@testgorilla/tgo-ui 3.10.9-beta.1 → 3.10.10

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -6053,11 +6053,11 @@ class AiFeedbackComponent {
         this.selectedValue.emit(this.selected());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AiFeedbackComponent, selector: "ui-ai-feedback", inputs: { selection: "selection", tooltipPosition: "tooltipPosition" }, outputs: { selectedValue: "selectedValue" }, ngImport: i0, template: "<div class=\"ai-feedback\" [attr.aria-label]=\"'AI_FEEDBACK.TITLE' | uiTranslate\">\n  <span>{{ 'AI_FEEDBACK.TITLE' | uiTranslate | async}}</span>\n  <div class=\"ai-feedback-buttons\">\n    @if(selected() !== optionNo) {\n      <ui-button\n        [justIcon]=\"true\"\n        [iconName]=\"'Thumb-up-in-line'\"\n        [size]=\"'small'\"\n        [tooltipPosition]=\"tooltipPosition\"\n        [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n        [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n        [iconFilled]=\"selected() === optionYes\"\n        (buttonClickEvent)=\"onSelectionChange(optionYes)\"\n        variant=\"icon-button\"\n        role=\"button\"\n      ></ui-button>\n    }\n\n    @if(selected() !== optionYes) {\n      <ui-button\n        [justIcon]=\"true\"\n        [iconName]=\"'Thumb-down-in-line'\"\n        [iconFilled]=\"selected() === optionNo\"\n        [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n        [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n        [size]=\"'small'\"\n        (buttonClickEvent)=\"onSelectionChange(optionNo)\"\n        variant=\"icon-button\"\n        role=\"button\"\n      ></ui-button>\n     }\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}.ai-feedback,.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center}.ai-feedback>span{color:#666;margin-right:16px}.ai-feedback-buttons{justify-content:center}.ai-feedback-buttons>ui-button:first-child{margin-right:8px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AiFeedbackComponent, selector: "ui-ai-feedback", inputs: { selection: "selection", tooltipPosition: "tooltipPosition" }, outputs: { selectedValue: "selectedValue" }, ngImport: i0, template: "<div class=\"ai-feedback\" [attr.aria-label]=\"'AI_FEEDBACK.TITLE' | uiTranslate\">\r\n  <span>{{ 'AI_FEEDBACK.TITLE' | uiTranslate | async}}</span>\r\n  <div class=\"ai-feedback-buttons\">\r\n    @if(selected() !== optionNo) {\r\n      <ui-button\r\n        [justIcon]=\"true\"\r\n        [iconName]=\"'Thumb-up-in-line'\"\r\n        [size]=\"'small'\"\r\n        [tooltipPosition]=\"tooltipPosition\"\r\n        [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\r\n        [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\r\n        [iconFilled]=\"selected() === optionYes\"\r\n        (buttonClickEvent)=\"onSelectionChange(optionYes)\"\r\n        variant=\"icon-button\"\r\n        role=\"button\"\r\n      ></ui-button>\r\n    }\r\n\r\n    @if(selected() !== optionYes) {\r\n      <ui-button\r\n        [justIcon]=\"true\"\r\n        [iconName]=\"'Thumb-down-in-line'\"\r\n        [iconFilled]=\"selected() === optionNo\"\r\n        [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\r\n        [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\r\n        [size]=\"'small'\"\r\n        (buttonClickEvent)=\"onSelectionChange(optionNo)\"\r\n        variant=\"icon-button\"\r\n        role=\"button\"\r\n      ></ui-button>\r\n     }\r\n  </div>\r\n</div>\r\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}.ai-feedback,.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center}.ai-feedback>span{color:#666;margin-right:16px}.ai-feedback-buttons{justify-content:center}.ai-feedback-buttons>ui-button:first-child{margin-right:8px}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AiFeedbackComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-ai-feedback', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-feedback\" [attr.aria-label]=\"'AI_FEEDBACK.TITLE' | uiTranslate\">\n  <span>{{ 'AI_FEEDBACK.TITLE' | uiTranslate | async}}</span>\n  <div class=\"ai-feedback-buttons\">\n    @if(selected() !== optionNo) {\n      <ui-button\n        [justIcon]=\"true\"\n        [iconName]=\"'Thumb-up-in-line'\"\n        [size]=\"'small'\"\n        [tooltipPosition]=\"tooltipPosition\"\n        [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n        [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n        [iconFilled]=\"selected() === optionYes\"\n        (buttonClickEvent)=\"onSelectionChange(optionYes)\"\n        variant=\"icon-button\"\n        role=\"button\"\n      ></ui-button>\n    }\n\n    @if(selected() !== optionYes) {\n      <ui-button\n        [justIcon]=\"true\"\n        [iconName]=\"'Thumb-down-in-line'\"\n        [iconFilled]=\"selected() === optionNo\"\n        [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n        [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n        [size]=\"'small'\"\n        (buttonClickEvent)=\"onSelectionChange(optionNo)\"\n        variant=\"icon-button\"\n        role=\"button\"\n      ></ui-button>\n     }\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}.ai-feedback,.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center}.ai-feedback>span{color:#666;margin-right:16px}.ai-feedback-buttons{justify-content:center}.ai-feedback-buttons>ui-button:first-child{margin-right:8px}\n"] }]
+            args: [{ selector: 'ui-ai-feedback', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"ai-feedback\" [attr.aria-label]=\"'AI_FEEDBACK.TITLE' | uiTranslate\">\r\n  <span>{{ 'AI_FEEDBACK.TITLE' | uiTranslate | async}}</span>\r\n  <div class=\"ai-feedback-buttons\">\r\n    @if(selected() !== optionNo) {\r\n      <ui-button\r\n        [justIcon]=\"true\"\r\n        [iconName]=\"'Thumb-up-in-line'\"\r\n        [size]=\"'small'\"\r\n        [tooltipPosition]=\"tooltipPosition\"\r\n        [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\r\n        [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\r\n        [iconFilled]=\"selected() === optionYes\"\r\n        (buttonClickEvent)=\"onSelectionChange(optionYes)\"\r\n        variant=\"icon-button\"\r\n        role=\"button\"\r\n      ></ui-button>\r\n    }\r\n\r\n    @if(selected() !== optionYes) {\r\n      <ui-button\r\n        [justIcon]=\"true\"\r\n        [iconName]=\"'Thumb-down-in-line'\"\r\n        [iconFilled]=\"selected() === optionNo\"\r\n        [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\r\n        [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\r\n        [size]=\"'small'\"\r\n        (buttonClickEvent)=\"onSelectionChange(optionNo)\"\r\n        variant=\"icon-button\"\r\n        role=\"button\"\r\n      ></ui-button>\r\n     }\r\n  </div>\r\n</div>\r\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}.ai-feedback,.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center}.ai-feedback>span{color:#666;margin-right:16px}.ai-feedback-buttons{justify-content:center}.ai-feedback-buttons>ui-button:first-child{margin-right:8px}\n"] }]
         }], propDecorators: { selection: [{
                 type: Input
             }], tooltipPosition: [{
@@ -6186,11 +6186,11 @@ class CardComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", errorsSize: "errorsSize", selected: "selected", allowSelect: "allowSelect", allowFocus: "allowFocus" }, outputs: { cardSelected: "cardSelected" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.tabindex]=\"allowFocus ? 0 : null\"\n>\n  <ng-content></ng-content>\n</div>\n@if (safeErrors?.length) {\n  <div class=\"errors\"\n       [class.errors-small]=\"errorsSize === 'small'\">\n    @for (error of safeErrors; track error) {\n      <div class=\"error\">\n        <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: CardComponent, selector: "ui-card", inputs: { size: "size", variant: "variant", applicationTheme: "applicationTheme", errors: "errors", errorsSize: "errorsSize", selected: "selected", allowSelect: "allowSelect", allowFocus: "allowFocus" }, outputs: { cardSelected: "cardSelected" }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  class=\"card-container\"\r\n  (keydown.enter)=\"selectCard()\"\r\n  (keydown.space)=\"selectCard()\"\r\n  (click)=\"selectCard()\"\r\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\r\n  [attr.theme]=\"applicationTheme\"\r\n  [attr.tabindex]=\"allowFocus ? 0 : null\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n@if (safeErrors?.length) {\r\n  <div class=\"errors\"\r\n       [class.errors-small]=\"errorsSize === 'small'\">\r\n    @for (error of safeErrors; track error) {\r\n      <div class=\"error\">\r\n        <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\r\n        <span [innerHTML]=\"error\"></span>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\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}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"card-container\"\n  (keydown.enter)=\"selectCard()\"\n  (keydown.space)=\"selectCard()\"\n  (click)=\"selectCard()\"\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\n  [attr.theme]=\"applicationTheme\"\n  [attr.tabindex]=\"allowFocus ? 0 : null\"\n>\n  <ng-content></ng-content>\n</div>\n@if (safeErrors?.length) {\n  <div class=\"errors\"\n       [class.errors-small]=\"errorsSize === 'small'\">\n    @for (error of safeErrors; track error) {\n      <div class=\"error\">\n        <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n        <span [innerHTML]=\"error\"></span>\n      </div>\n    }\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"] }]
+            args: [{ selector: 'ui-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\r\n  class=\"card-container\"\r\n  (keydown.enter)=\"selectCard()\"\r\n  (keydown.space)=\"selectCard()\"\r\n  (click)=\"selectCard()\"\r\n  [ngClass]=\"[classes, isSelected ? 'selected' : '']\"\r\n  [attr.theme]=\"applicationTheme\"\r\n  [attr.tabindex]=\"allowFocus ? 0 : null\"\r\n>\r\n  <ng-content></ng-content>\r\n</div>\r\n@if (safeErrors?.length) {\r\n  <div class=\"errors\"\r\n       [class.errors-small]=\"errorsSize === 'small'\">\r\n    @for (error of safeErrors; track error) {\r\n      <div class=\"error\">\r\n        <ui-icon [size]=\"errorIconSize\" [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\r\n        <span [innerHTML]=\"error\"></span>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\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}.card-container{border:1px solid #E0E0E0;background:#fff;position:relative;transition:box-shadow .25s ease}.card-container.card-size-medium{padding:24px}.card-container.card-size-large{padding:80px}.card-container.card-size-small{padding:16px}.card-container[theme=dark],.card-container[theme=light]{border-color:#d3d3d3;border-radius:10px;border-width:1px}.card-container[theme=dark].shadow,.card-container[theme=light].shadow{box-shadow:0 4px 100px #2424240a}.card-container[theme=dark].error,.card-container[theme=light].error{border-width:2px;border-color:#e02800}.card-container[theme=dark].ai,.card-container[theme=light].ai{border:2px solid transparent;background:linear-gradient(to left,#fff,#fff),linear-gradient(to right,#d410aa 25%,#0165fc);background-clip:padding-box,border-box;background-origin:padding-box,border-box}.card-container[theme=dark].educative,.card-container[theme=light].educative{background:#d9e8ff;border-color:#1a47aa}.card-container[theme=dark].premium,.card-container[theme=light].premium{background:#fff5e6;border-color:#d07d00}.card-container[theme=dark].actionDriver,.card-container[theme=light].actionDriver{background:#242424;border:none}.card-container[theme=dark].neutral,.card-container[theme=light].neutral{background:#f4f4f4;border:none}.card-container[theme=dark].state,.card-container[theme=light].state{cursor:pointer}.card-container[theme=dark].state:hover,.card-container[theme=dark].state:hover:focus,.card-container[theme=light].state:hover,.card-container[theme=light].state:hover:focus{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].state.selected:focus:not(:focus-visible),.card-container[theme=light].state.selected:focus:not(:focus-visible){border-color:#242424;outline:1px solid #242424}.card-container[theme=dark].selected,.card-container[theme=light].selected{border-color:#242424;outline:1px solid #242424}.card-container[theme=dark]:focus-visible:not(.selected),.card-container[theme=light]:focus-visible:not(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:not(.selected):before,.card-container[theme=light]:focus-visible:not(.selected):before{display:none}.card-container[theme=dark]:focus-visible:is(.selected),.card-container[theme=light]:focus-visible:is(.selected){outline:1px solid black;border-color:#242424;box-shadow:0 0 0 2px #fff,0 0 0 4px #242424;animation:none}.card-container[theme=dark]:focus-visible:is(.selected):before,.card-container[theme=light]:focus-visible:is(.selected):before{display:none}.card-container[theme=dark].default,.card-container[theme=light].default{border-color:#d3d3d3}.card-size-brand.card-size-medium{padding:23px}.card-size-brand.card-size-large{padding:79px}.card-size-brand.card-size-small{padding:15px}.errors{margin-top:8px}.errors.errors-small{margin-top:4px}.errors.errors-small .error{font-size:12px}.errors .error{font-size:14px;display:flex;flex-direction:row;align-items:center;color:#e02800}.errors .error ui-icon{margin-right:8px}.errors .error ui-icon ::ng-deep svg{color:#e02800}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -6664,11 +6664,11 @@ class SelectableCardComponent {
         this.cardSelected.emit(newValue);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectableCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SelectableCardComponent, selector: "ui-selectable-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxDisabled: { classPropertyName: "isCheckboxDisabled", publicName: "isCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardSelected: "cardSelected" }, ngImport: i0, template: "<ui-card\n  class=\"selectable-card\"\n  [size]=\"size()\"\n  [selected]=\"isSelected()\"\n  [allowSelect]=\"!isCheckboxDisabled()\"\n  [allowFocus]=\"false\"\n  [variant]=\"isCheckboxDisabled() ? 'default' : 'state'\"\n  (cardSelected)=\"handleSelect()\"\n>\n  <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\n    <div checkbox-label>\n      <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\n    </div>\n  </ui-checkbox>\n  <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\n</ui-card>\n", styles: [".selectable-card .selectable-card-checkbox{display:block;margin-top:-11px;margin-left:-11px}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ui-card", inputs: ["size", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: SelectableCardComponent, selector: "ui-selectable-card", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, isCheckboxDisabled: { classPropertyName: "isCheckboxDisabled", publicName: "isCheckboxDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cardSelected: "cardSelected" }, ngImport: i0, template: "<ui-card\r\n  class=\"selectable-card\"\r\n  [size]=\"size()\"\r\n  [selected]=\"isSelected()\"\r\n  [allowSelect]=\"!isCheckboxDisabled()\"\r\n  [allowFocus]=\"false\"\r\n  [variant]=\"isCheckboxDisabled() ? 'default' : 'state'\"\r\n  (cardSelected)=\"handleSelect()\"\r\n>\r\n  <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\r\n    <div checkbox-label>\r\n      <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\r\n    </div>\r\n  </ui-checkbox>\r\n  <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\r\n</ui-card>\r\n", styles: [".selectable-card .selectable-card-checkbox{display:block;margin-top:-11px;margin-left:-11px}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "ui-card", inputs: ["size", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SelectableCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-selectable-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-card\n  class=\"selectable-card\"\n  [size]=\"size()\"\n  [selected]=\"isSelected()\"\n  [allowSelect]=\"!isCheckboxDisabled()\"\n  [allowFocus]=\"false\"\n  [variant]=\"isCheckboxDisabled() ? 'default' : 'state'\"\n  (cardSelected)=\"handleSelect()\"\n>\n  <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\n    <div checkbox-label>\n      <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\n    </div>\n  </ui-checkbox>\n  <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\n</ui-card>\n", styles: [".selectable-card .selectable-card-checkbox{display:block;margin-top:-11px;margin-left:-11px}\n"] }]
+            args: [{ selector: 'ui-selectable-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ui-card\r\n  class=\"selectable-card\"\r\n  [size]=\"size()\"\r\n  [selected]=\"isSelected()\"\r\n  [allowSelect]=\"!isCheckboxDisabled()\"\r\n  [allowFocus]=\"false\"\r\n  [variant]=\"isCheckboxDisabled() ? 'default' : 'state'\"\r\n  (cardSelected)=\"handleSelect()\"\r\n>\r\n  <ui-checkbox class=\"selectable-card-checkbox\" [checked]=\"isSelected()\" [disabled]=\"isCheckboxDisabled()\">\r\n    <div checkbox-label>\r\n      <ng-content select=\"[ui-selectable-card-label]\"></ng-content>\r\n    </div>\r\n  </ui-checkbox>\r\n  <ng-content select=\"[ui-selectable-card-content]\"></ng-content>\r\n</ui-card>\r\n", styles: [".selectable-card .selectable-card-checkbox{display:block;margin-top:-11px;margin-left:-11px}\n"] }]
         }] });
 
 class ValidationErrorModule {
@@ -7388,13 +7388,6 @@ class FieldComponent {
          * @memberof FieldComponent
          */
         this.fullWidth = true;
-        /**
-         * Indicator of the field height
-         *
-         * @type {boolean}
-         * @memberof FieldComponent
-         */
-        this.fullHeight = false;
         /**
          * Form field label
          *
@@ -7766,11 +7759,11 @@ class FieldComponent {
         }, 0);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1.MatIconRegistry }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i1$2.NgControl, optional: true, self: true }, { token: i2$3.FocusMonitor }, { token: i0.NgZone }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, labelHtml: { classPropertyName: "labelHtml", publicName: "labelHtml", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: false, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: false, isRequired: false, transformFunction: null }, hintMessage: { classPropertyName: "hintMessage", publicName: "hintMessage", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, updateOnBlur: { classPropertyName: "updateOnBlur", publicName: "updateOnBlur", isSignal: false, isRequired: false, transformFunction: null }, allowOnlyDigits: { classPropertyName: "allowOnlyDigits", publicName: "allowOnlyDigits", isSignal: false, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: false, isRequired: false, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: false, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: false, isRequired: false, transformFunction: null }, trimOnBlur: { classPropertyName: "trimOnBlur", publicName: "trimOnBlur", isSignal: false, isRequired: false, transformFunction: null }, trimOnSubmit: { classPropertyName: "trimOnSubmit", publicName: "trimOnSubmit", isSignal: false, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: false, isRequired: false, transformFunction: null }, hasTextAreaCounter: { classPropertyName: "hasTextAreaCounter", publicName: "hasTextAreaCounter", isSignal: false, isRequired: false, transformFunction: null }, hideBuiltInErrors: { classPropertyName: "hideBuiltInErrors", publicName: "hideBuiltInErrors", isSignal: false, isRequired: false, transformFunction: null }, hideLabelInErrors: { classPropertyName: "hideLabelInErrors", publicName: "hideLabelInErrors", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, textareaHeight: { classPropertyName: "textareaHeight", publicName: "textareaHeight", isSignal: false, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: false, isRequired: false, transformFunction: null }, isAIVariant: { classPropertyName: "isAIVariant", publicName: "isAIVariant", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "class.full-height": "this.fullHeight", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }, { propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    [ngStyle]=\"{\n      '--textarea-height': textareaHeight - 10 + 'px',\n      '--textarea-height-container': textareaHeight + 'px',\n    }\"\n    #uiField\n    appearance=\"outline\"\n    hideRequiredMarker=\"true\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      textarea: type === 'textarea',\n      'multi-line': type === 'multi-line',\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n      'has-value': !!value,\n      'text-area-borderless': type === 'textarea' && borderless,\n    }\"\n    (mouseenter)=\"onActive(true, 'hover')\"\n    (mouseleave)=\"onActive(false, 'hover')\"\n  >\n    <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n      @if (required) {\n        <span>{{ 'ERRORS.REQUIRED' | uiTranslate | async }}</span>\n      }\n      {{ ariaDescribedby() }}\n    </span>\n    <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n      {{ ariaLabelledby() ?? label }}\n    </span>\n    <mat-label\n      *ngIf=\"(label || labelHtml()) && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      class=\"label-with-icon\"\n    >\n      @if(isAIVariant || labelIcon) {\n        <ui-icon\n          [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n          [size]=\"'16'\"\n          class=\"label-icon\"\n        ></ui-icon>\n      }\n      <span>\n        @if(labelHtml()) {\n          <span [innerHTML]=\"labelHtml()\"></span>\n        } @else {\n          {{ label }}\n        }@if(required) {<span>*</span>}\n      </span>\n    </mat-label>\n    <mat-icon\n      *ngIf=\"type === 'search' || type === 'collapsed-search'\"\n      matIconPrefix\n      class=\"search-icon\"\n      [svgIcon]=\"'Search'\"\n    ></mat-icon>\n    <input\n      [readonly]=\"readOnly\"\n      *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n      matInput\n      #inputElement\n      (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id()\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled || loading\"\n      [type]=\"currentType\"\n      (keyup.enter)=\"onSubmit()\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [name]=\"fieldName!\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n      [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n      [attr.aria-describedby]=\"ariaDescribedbyId()\"\n      role=\"textbox\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n      [allowNegative]=\"allowNegative\"\n      (focusin)=\"onActive(true, 'focus')\"\n    />\n\n    <ng-template #textarea>\n      <textarea\n        matInput\n        #inputElement\n        #autosize=\"cdkTextareaAutosize\"\n        [readonly]=\"readOnly\"\n        (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n        (input)=\"onInput($event)\"\n        [id]=\"id()\"\n        (keyup)=\"onChangeInputSearch()\"\n        (keyup.enter)=\"onSubmit()\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [type]=\"currentType\"\n        [name]=\"fieldName!\"\n        [required]=\"required\"\n        [attr.aria-label]=\"!label ? ariaLabel : ''\"\n        [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n        [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n        [attr.aria-describedby]=\"ariaDescribedbyId()\"\n        role=\"textbox\"\n        [cdkTextareaAutosize]=\"type === 'multi-line'\"\n        [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n        [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n        (focusin)=\"onActive(true, 'focus')\"\n      ></textarea>\n    </ng-template>\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'collapsed-search' || type === 'password' || type === 'validation-text'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n          (buttonClickEvent)=\"clearValue()\"\n          [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' | uiTranslate | async)\"\n        ></ui-button>\n        <ui-button\n          class=\"password\"\n          variant=\"secondary\"\n          [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') | uiTranslate | async)!\"\n          *ngIf=\"type === 'password'\"\n          [justIcon]=\"true\"\n          role=\"switch\"\n          [attr.aria-checked]=\"showPassword\"\n          [iconName]=\"getPasswordIcon\"\n          [applicationTheme]=\"applicationTheme\"\n          (click)=\"showPasswordClick()\"\n          #btn\n          (keydown.enter)=\"refocusPasswordButton(btn)\"\n          (keydown.space)=\"refocusPasswordButton(btn)\"\n        ></ui-button>\n\n        <ng-container\n          *ngIf=\"\n            type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\n          \"\n        >\n          <ui-button\n            *ngIf=\"!isValid\"\n            class=\"validation\"\n            [variant]=\"'text'\"\n            [applicationTheme]=\"'light'\"\n            [label]=\"'Validate'\"\n            [loading]=\"loading\"\n            (click)=\"validate()\"\n            [disabled]=\"disabled\"\n            [size]=\"'small'\"\n          ></ui-button>\n          <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n        </ng-container>\n      </div>\n    </div>\n    @if (hasTextAreaCounter) {\n      <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\"\n        >{{ value.length }} / {{ maxCharacters }}</mat-hint\n      >\n    }\n\n    <mat-hint\n      class=\"info\"\n      *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\"\n      >{{ hintMessage }}</mat-hint\n    >\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-template [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-template>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n\n    @if (badgeVariant) {\n      <ui-badge class=\"field-badge\"\n                [variant]=\"badgeVariant\"></ui-badge>\n    }\n  </mat-form-field>\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}.label-with-icon ui-icon{display:inline-block;vertical-align:middle;margin-right:4px}.label-with-icon>span{vertical-align:middle}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field.full-height{height:100%}.ui-field.full-height mat-form-field{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix textarea{max-height:100%!important;height:100%!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value){width:56px!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75);margin-left:1px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888;--icon-color: #888888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button.password{width:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container button,.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container span{width:24px!important;height:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading:hover,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing:hover,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch:hover{border-color:transparent!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element{color:#242424}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix{padding:12px 0!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above{display:none!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{border-radius:0!important}.ui-field[theme=dark] .field-badge,.ui-field[theme=light] .field-badge{position:absolute;left:-27px;top:-10px;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FieldComponent, selector: "ui-field", inputs: { fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, labelHtml: { classPropertyName: "labelHtml", publicName: "labelHtml", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: false, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: false, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, badgeVariant: { classPropertyName: "badgeVariant", publicName: "badgeVariant", isSignal: false, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: false, isRequired: false, transformFunction: null }, hintMessage: { classPropertyName: "hintMessage", publicName: "hintMessage", isSignal: false, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, updateOnBlur: { classPropertyName: "updateOnBlur", publicName: "updateOnBlur", isSignal: false, isRequired: false, transformFunction: null }, allowOnlyDigits: { classPropertyName: "allowOnlyDigits", publicName: "allowOnlyDigits", isSignal: false, isRequired: false, transformFunction: null }, allowNegative: { classPropertyName: "allowNegative", publicName: "allowNegative", isSignal: false, isRequired: false, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: false, isRequired: false, transformFunction: null }, isValid: { classPropertyName: "isValid", publicName: "isValid", isSignal: false, isRequired: false, transformFunction: null }, maxCharacters: { classPropertyName: "maxCharacters", publicName: "maxCharacters", isSignal: false, isRequired: false, transformFunction: null }, trimOnBlur: { classPropertyName: "trimOnBlur", publicName: "trimOnBlur", isSignal: false, isRequired: false, transformFunction: null }, trimOnSubmit: { classPropertyName: "trimOnSubmit", publicName: "trimOnSubmit", isSignal: false, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: false, isRequired: false, transformFunction: null }, hasTextAreaCounter: { classPropertyName: "hasTextAreaCounter", publicName: "hasTextAreaCounter", isSignal: false, isRequired: false, transformFunction: null }, hideBuiltInErrors: { classPropertyName: "hideBuiltInErrors", publicName: "hideBuiltInErrors", isSignal: false, isRequired: false, transformFunction: null }, hideLabelInErrors: { classPropertyName: "hideLabelInErrors", publicName: "hideLabelInErrors", isSignal: false, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: false, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: false, isRequired: false, transformFunction: null }, textareaHeight: { classPropertyName: "textareaHeight", publicName: "textareaHeight", isSignal: false, isRequired: false, transformFunction: null }, borderless: { classPropertyName: "borderless", publicName: "borderless", isSignal: false, isRequired: false, transformFunction: null }, isAIVariant: { classPropertyName: "isAIVariant", publicName: "isAIVariant", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { validateEvent: "validateEvent", fieldBlur: "fieldBlur" }, host: { properties: { "class": "this.class", "class.full-width": "this.fullWidth", "attr.field-class": "this.type", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "field", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef }, { propertyName: "autosize", first: true, predicate: ["autosize"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    [ngStyle]=\"{\n      '--textarea-height': textareaHeight - 10 + 'px',\n      '--textarea-height-container': textareaHeight + 'px',\n    }\"\n    #uiField\n    appearance=\"outline\"\n    hideRequiredMarker=\"true\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      textarea: type === 'textarea',\n      'multi-line': type === 'multi-line',\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n      'has-value': !!value,\n      'text-area-borderless': type === 'textarea' && borderless,\n    }\"\n    (mouseenter)=\"onActive(true, 'hover')\"\n    (mouseleave)=\"onActive(false, 'hover')\"\n  >\n    <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n      @if (required) {\n        <span>{{ 'ERRORS.REQUIRED' | uiTranslate | async }}</span>\n      }\n      {{ ariaDescribedby() }}\n    </span>\n    <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n      {{ ariaLabelledby() ?? label }}\n    </span>\n    <mat-label\n      *ngIf=\"(label || labelHtml()) && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      class=\"label-with-icon\"\n    >\n      @if(isAIVariant || labelIcon) {\n        <ui-icon\n          [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n          [size]=\"'16'\"\n          class=\"label-icon\"\n        ></ui-icon>\n      }\n      <span>\n        @if(labelHtml()) {\n          <span [innerHTML]=\"labelHtml()\"></span>\n        } @else {\n          {{ label }}\n        }@if(required) {<span>*</span>}\n      </span>\n    </mat-label>\n    <mat-icon\n      *ngIf=\"type === 'search' || type === 'collapsed-search'\"\n      matIconPrefix\n      class=\"search-icon\"\n      [svgIcon]=\"'Search'\"\n    ></mat-icon>\n    <input\n      [readonly]=\"readOnly\"\n      *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n      matInput\n      #inputElement\n      (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id()\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled || loading\"\n      [type]=\"currentType\"\n      (keyup.enter)=\"onSubmit()\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [name]=\"fieldName!\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n      [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n      [attr.aria-describedby]=\"ariaDescribedbyId()\"\n      role=\"textbox\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n      [allowNegative]=\"allowNegative\"\n      (focusin)=\"onActive(true, 'focus')\"\n    />\n\n    <ng-template #textarea>\n      <textarea\n        matInput\n        #inputElement\n        #autosize=\"cdkTextareaAutosize\"\n        [readonly]=\"readOnly\"\n        (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n        (input)=\"onInput($event)\"\n        [id]=\"id()\"\n        (keyup)=\"onChangeInputSearch()\"\n        (keyup.enter)=\"onSubmit()\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [type]=\"currentType\"\n        [name]=\"fieldName!\"\n        [required]=\"required\"\n        [attr.aria-label]=\"!label ? ariaLabel : ''\"\n        [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n        [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n        [attr.aria-describedby]=\"ariaDescribedbyId()\"\n        role=\"textbox\"\n        [cdkTextareaAutosize]=\"type === 'multi-line'\"\n        [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n        [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n        (focusin)=\"onActive(true, 'focus')\"\n      ></textarea>\n    </ng-template>\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'collapsed-search' || type === 'password' || type === 'validation-text'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n          (buttonClickEvent)=\"clearValue()\"\n          [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' | uiTranslate | async)\"\n        ></ui-button>\n        <ui-button\n          class=\"password\"\n          variant=\"secondary\"\n          [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') | uiTranslate | async)!\"\n          *ngIf=\"type === 'password'\"\n          [justIcon]=\"true\"\n          role=\"switch\"\n          [attr.aria-checked]=\"showPassword\"\n          [iconName]=\"getPasswordIcon\"\n          [applicationTheme]=\"applicationTheme\"\n          (click)=\"showPasswordClick()\"\n          #btn\n          (keydown.enter)=\"refocusPasswordButton(btn)\"\n          (keydown.space)=\"refocusPasswordButton(btn)\"\n        ></ui-button>\n\n        <ng-container\n          *ngIf=\"\n            type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\n          \"\n        >\n          <ui-button\n            *ngIf=\"!isValid\"\n            class=\"validation\"\n            [variant]=\"'text'\"\n            [applicationTheme]=\"'light'\"\n            [label]=\"'Validate'\"\n            [loading]=\"loading\"\n            (click)=\"validate()\"\n            [disabled]=\"disabled\"\n            [size]=\"'small'\"\n          ></ui-button>\n          <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n        </ng-container>\n      </div>\n    </div>\n    @if (hasTextAreaCounter) {\n      <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\"\n        >{{ value.length }} / {{ maxCharacters }}</mat-hint\n      >\n    }\n\n    <mat-hint\n      class=\"info\"\n      *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\"\n      >{{ hintMessage }}</mat-hint\n    >\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-template [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-template>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n\n    @if (badgeVariant) {\n      <ui-badge class=\"field-badge\"\n                [variant]=\"badgeVariant\"></ui-badge>\n    }\n  </mat-form-field>\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}.label-with-icon ui-icon{display:inline-block;vertical-align:middle;margin-right:4px}.label-with-icon>span{vertical-align:middle}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value){width:56px!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75);margin-left:1px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888;--icon-color: #888888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button.password{width:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container button,.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container span{width:24px!important;height:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch{border-color:transparent!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label{color:#919191!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element{color:#242424}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix{padding:12px 0!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above{display:none!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{border-radius:0!important}.ui-field .field-badge{position:absolute;left:-27px;top:-10px;z-index:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i5.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i8$1.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: DigitsOnlyDirective, selector: "[digitsOnly]", inputs: ["allowNegative", "allowDecimal", "allowOnlyDigits"] }, { kind: "component", type: BadgeComponent, selector: "ui-badge", inputs: ["label", "icon", "color", "variant", "notificationsAmount", "applicationTheme", "rebrandColor", "truncateLabel"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FieldComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-form-field\n    [ngStyle]=\"{\n      '--textarea-height': textareaHeight - 10 + 'px',\n      '--textarea-height-container': textareaHeight + 'px',\n    }\"\n    #uiField\n    appearance=\"outline\"\n    hideRequiredMarker=\"true\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      textarea: type === 'textarea',\n      'multi-line': type === 'multi-line',\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n      'has-value': !!value,\n      'text-area-borderless': type === 'textarea' && borderless,\n    }\"\n    (mouseenter)=\"onActive(true, 'hover')\"\n    (mouseleave)=\"onActive(false, 'hover')\"\n  >\n    <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n      @if (required) {\n        <span>{{ 'ERRORS.REQUIRED' | uiTranslate | async }}</span>\n      }\n      {{ ariaDescribedby() }}\n    </span>\n    <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n      {{ ariaLabelledby() ?? label }}\n    </span>\n    <mat-label\n      *ngIf=\"(label || labelHtml()) && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      class=\"label-with-icon\"\n    >\n      @if(isAIVariant || labelIcon) {\n        <ui-icon\n          [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n          [size]=\"'16'\"\n          class=\"label-icon\"\n        ></ui-icon>\n      }\n      <span>\n        @if(labelHtml()) {\n          <span [innerHTML]=\"labelHtml()\"></span>\n        } @else {\n          {{ label }}\n        }@if(required) {<span>*</span>}\n      </span>\n    </mat-label>\n    <mat-icon\n      *ngIf=\"type === 'search' || type === 'collapsed-search'\"\n      matIconPrefix\n      class=\"search-icon\"\n      [svgIcon]=\"'Search'\"\n    ></mat-icon>\n    <input\n      [readonly]=\"readOnly\"\n      *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n      matInput\n      #inputElement\n      (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id()\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled || loading\"\n      [type]=\"currentType\"\n      (keyup.enter)=\"onSubmit()\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [name]=\"fieldName!\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n      [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n      [attr.aria-describedby]=\"ariaDescribedbyId()\"\n      role=\"textbox\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n      [allowNegative]=\"allowNegative\"\n      (focusin)=\"onActive(true, 'focus')\"\n    />\n\n    <ng-template #textarea>\n      <textarea\n        matInput\n        #inputElement\n        #autosize=\"cdkTextareaAutosize\"\n        [readonly]=\"readOnly\"\n        (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n        (input)=\"onInput($event)\"\n        [id]=\"id()\"\n        (keyup)=\"onChangeInputSearch()\"\n        (keyup.enter)=\"onSubmit()\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [type]=\"currentType\"\n        [name]=\"fieldName!\"\n        [required]=\"required\"\n        [attr.aria-label]=\"!label ? ariaLabel : ''\"\n        [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n        [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n        [attr.aria-describedby]=\"ariaDescribedbyId()\"\n        role=\"textbox\"\n        [cdkTextareaAutosize]=\"type === 'multi-line'\"\n        [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n        [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n        (focusin)=\"onActive(true, 'focus')\"\n      ></textarea>\n    </ng-template>\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'collapsed-search' || type === 'password' || type === 'validation-text'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n          (buttonClickEvent)=\"clearValue()\"\n          [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' | uiTranslate | async)\"\n        ></ui-button>\n        <ui-button\n          class=\"password\"\n          variant=\"secondary\"\n          [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') | uiTranslate | async)!\"\n          *ngIf=\"type === 'password'\"\n          [justIcon]=\"true\"\n          role=\"switch\"\n          [attr.aria-checked]=\"showPassword\"\n          [iconName]=\"getPasswordIcon\"\n          [applicationTheme]=\"applicationTheme\"\n          (click)=\"showPasswordClick()\"\n          #btn\n          (keydown.enter)=\"refocusPasswordButton(btn)\"\n          (keydown.space)=\"refocusPasswordButton(btn)\"\n        ></ui-button>\n\n        <ng-container\n          *ngIf=\"\n            type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\n          \"\n        >\n          <ui-button\n            *ngIf=\"!isValid\"\n            class=\"validation\"\n            [variant]=\"'text'\"\n            [applicationTheme]=\"'light'\"\n            [label]=\"'Validate'\"\n            [loading]=\"loading\"\n            (click)=\"validate()\"\n            [disabled]=\"disabled\"\n            [size]=\"'small'\"\n          ></ui-button>\n          <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n        </ng-container>\n      </div>\n    </div>\n    @if (hasTextAreaCounter) {\n      <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\"\n        >{{ value.length }} / {{ maxCharacters }}</mat-hint\n      >\n    }\n\n    <mat-hint\n      class=\"info\"\n      *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\"\n      >{{ hintMessage }}</mat-hint\n    >\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-template [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-template>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n\n    @if (badgeVariant) {\n      <ui-badge class=\"field-badge\"\n                [variant]=\"badgeVariant\"></ui-badge>\n    }\n  </mat-form-field>\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}.label-with-icon ui-icon{display:inline-block;vertical-align:middle;margin-right:4px}.label-with-icon>span{vertical-align:middle}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field.full-height{height:100%}.ui-field.full-height mat-form-field{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix{height:100%}.ui-field.full-height mat-form-field .mat-mdc-form-field-flex .mat-mdc-form-field-infix textarea{max-height:100%!important;height:100%!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value){width:56px!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75);margin-left:1px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888;--icon-color: #888888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button.password{width:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container button,.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container span{width:24px!important;height:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading:hover,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing:hover,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch:hover,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch:hover{border-color:transparent!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label{color:#919191!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element{color:#242424}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix{padding:12px 0!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above{display:none!important}.ui-field[theme=dark] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{border-radius:0!important}.ui-field[theme=dark] .field-badge,.ui-field[theme=light] .field-badge{position:absolute;left:-27px;top:-10px;z-index:1}\n"] }]
+            args: [{ selector: 'ui-field', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <mat-form-field\n    [ngStyle]=\"{\n      '--textarea-height': textareaHeight - 10 + 'px',\n      '--textarea-height-container': textareaHeight + 'px',\n    }\"\n    #uiField\n    appearance=\"outline\"\n    hideRequiredMarker=\"true\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      textarea: type === 'textarea',\n      'multi-line': type === 'multi-line',\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n      'has-value': !!value,\n      'text-area-borderless': type === 'textarea' && borderless,\n    }\"\n    (mouseenter)=\"onActive(true, 'hover')\"\n    (mouseleave)=\"onActive(false, 'hover')\"\n  >\n    <span [style.display]=\"'none'\" [id]=\"ariaDescribedbyId()\">\n      @if (required) {\n        <span>{{ 'ERRORS.REQUIRED' | uiTranslate | async }}</span>\n      }\n      {{ ariaDescribedby() }}\n    </span>\n    <span [style.display]=\"'none'\" [id]=\"ariaLabelledbyId()\">\n      {{ ariaLabelledby() ?? label }}\n    </span>\n    <mat-label\n      *ngIf=\"(label || labelHtml()) && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      class=\"label-with-icon\"\n    >\n      @if(isAIVariant || labelIcon) {\n        <ui-icon\n          [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\"\n          [size]=\"'16'\"\n          class=\"label-icon\"\n        ></ui-icon>\n      }\n      <span>\n        @if(labelHtml()) {\n          <span [innerHTML]=\"labelHtml()\"></span>\n        } @else {\n          {{ label }}\n        }@if(required) {<span>*</span>}\n      </span>\n    </mat-label>\n    <mat-icon\n      *ngIf=\"type === 'search' || type === 'collapsed-search'\"\n      matIconPrefix\n      class=\"search-icon\"\n      [svgIcon]=\"'Search'\"\n    ></mat-icon>\n    <input\n      [readonly]=\"readOnly\"\n      *ngIf=\"type !== 'textarea' && type !== 'multi-line'; else textarea\"\n      matInput\n      #inputElement\n      (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n      (input)=\"onInput($event)\"\n      [id]=\"id()\"\n      (keyup)=\"onChangeInputSearch()\"\n      [placeholder]=\"placeholder!\"\n      [value]=\"value\"\n      [disabled]=\"disabled || loading\"\n      [type]=\"currentType\"\n      (keyup.enter)=\"onSubmit()\"\n      [max]=\"max\"\n      [min]=\"min\"\n      [name]=\"fieldName!\"\n      [required]=\"required\"\n      [attr.aria-label]=\"ariaLabel\"\n      [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n      [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n      [attr.aria-describedby]=\"ariaDescribedbyId()\"\n      role=\"textbox\"\n      digitsOnly\n      [allowOnlyDigits]=\"allowOnlyDigits\"\n      [allowNegative]=\"allowNegative\"\n      (focusin)=\"onActive(true, 'focus')\"\n    />\n\n    <ng-template #textarea>\n      <textarea\n        matInput\n        #inputElement\n        #autosize=\"cdkTextareaAutosize\"\n        [readonly]=\"readOnly\"\n        (blur)=\"onTouch(); onActive(false, 'focus'); onBlur()\"\n        (input)=\"onInput($event)\"\n        [id]=\"id()\"\n        (keyup)=\"onChangeInputSearch()\"\n        (keyup.enter)=\"onSubmit()\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [type]=\"currentType\"\n        [name]=\"fieldName!\"\n        [required]=\"required\"\n        [attr.aria-label]=\"!label ? ariaLabel : ''\"\n        [attr.aria-invalid]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError\"\n        [attr.aria-labelledby]=\"ariaLabelledbyId()\"\n        [attr.aria-describedby]=\"ariaDescribedbyId()\"\n        role=\"textbox\"\n        [cdkTextareaAutosize]=\"type === 'multi-line'\"\n        [cdkAutosizeMinRows]=\"type === 'multi-line' ? 1 : 5\"\n        [cdkAutosizeMaxRows]=\"type === 'multi-line' ? maxRows : 5\"\n        (focusin)=\"onActive(true, 'focus')\"\n      ></textarea>\n    </ng-template>\n\n    <div class=\"options\" *ngIf=\"type === 'search' || type === 'collapsed-search' || type === 'password' || type === 'validation-text'\">\n      <div class=\"options-container\">\n        <ui-button\n          *ngIf=\"showClose\"\n          variant=\"secondary\"\n          [justIcon]=\"true\"\n          class=\"close\"\n          iconName=\"Close\"\n          [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n          (buttonClickEvent)=\"clearValue()\"\n          [ariaLabel]=\"ariaLabel + '--' + ('COMMON.CLEAR' | uiTranslate | async)\"\n        ></ui-button>\n        <ui-button\n          class=\"password\"\n          variant=\"secondary\"\n          [tooltip]=\"((showPassword ? 'FIELD.HIDE_PASSWORD' : 'FIELD.SHOW_PASSWORD') | uiTranslate | async)!\"\n          *ngIf=\"type === 'password'\"\n          [justIcon]=\"true\"\n          role=\"switch\"\n          [attr.aria-checked]=\"showPassword\"\n          [iconName]=\"getPasswordIcon\"\n          [applicationTheme]=\"applicationTheme\"\n          (click)=\"showPasswordClick()\"\n          #btn\n          (keydown.enter)=\"refocusPasswordButton(btn)\"\n          (keydown.space)=\"refocusPasswordButton(btn)\"\n        ></ui-button>\n\n        <ng-container\n          *ngIf=\"\n            type === 'validation-text' && (applicationTheme === 'dark' || applicationTheme === 'light') && value.length\n          \"\n        >\n          <ui-button\n            *ngIf=\"!isValid\"\n            class=\"validation\"\n            [variant]=\"'text'\"\n            [applicationTheme]=\"'light'\"\n            [label]=\"'Validate'\"\n            [loading]=\"loading\"\n            (click)=\"validate()\"\n            [disabled]=\"disabled\"\n            [size]=\"'small'\"\n          ></ui-button>\n          <ui-icon class=\"valid\" [color]=\"'white'\" applicationTheme=\"light\" [name]=\"'Check'\" *ngIf=\"isValid\"></ui-icon>\n        </ng-container>\n      </div>\n    </div>\n    @if (hasTextAreaCounter) {\n      <mat-hint class=\"info\" *ngIf=\"type === 'textarea' && !errorsLength && !(ngControl?.errors | hasValidationError)\"\n        >{{ value.length }} / {{ maxCharacters }}</mat-hint\n      >\n    }\n\n    <mat-hint\n      class=\"info\"\n      *ngIf=\"hintMessage && !errorsLength && !(ngControl?.errors | hasValidationError) && type !== 'textarea'\"\n      >{{ hintMessage }}</mat-hint\n    >\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-template [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-template>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n\n    @if (badgeVariant) {\n      <ui-badge class=\"field-badge\"\n                [variant]=\"badgeVariant\"></ui-badge>\n    }\n  </mat-form-field>\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}.label-with-icon ui-icon{display:inline-block;vertical-align:middle;margin-right:4px}.label-with-icon>span{vertical-align:middle}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.mat-mdc-form-field.keyboard-focused{position:relative}.mat-mdc-form-field.keyboard-focused .mat-mdc-text-field-wrapper:after{content:\"\";position:absolute;top:0;border-radius:10px;left:0;width:100%;height:100%;outline:2px solid #ffffff;z-index:-1}.mat-mdc-form-field.keyboard-focused .mat-mdc-form-field-subscript-wrapper{z-index:-1}.mat-mdc-form-field.has-label .mdc-notched-outline__notch{position:relative}.mat-mdc-form-field.has-label .mdc-notched-outline__notch:after{content:\"\";position:absolute;top:0;left:0;background:#fff;width:100%;height:5px;z-index:-1}.active-field .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.ui-field{display:block;width:320px}.ui-field.full-width{width:100%}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value){width:56px!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-floating-label{display:none!important}.ui-field[field-class=collapsed-search] mat-form-field:not(.mat-focused):not(.has-value) .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-wrapper{position:relative;width:100vw!important}.ui-field .mat-mdc-form-field-subscript-wrapper{margin:0!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field:hover.mat-form-field-appearance-outline .mdc-notched-outline__notch,.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mdc-notched-outline__notch{border-top:2px solid #276678!important}.ui-field[field-class=search][theme=classic] .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline__notch{border-top:1px solid var(--mdc-outlined-text-field-outline-color)!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{top:28px!important}.ui-field[field-class=search][theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[field-class=search][theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field input[type=search]::-webkit-search-decoration,.ui-field input[type=search]::-webkit-search-cancel-button,.ui-field input[type=search]::-webkit-search-results-button,.ui-field input[type=search]::-webkit-search-results-decoration{display:none}.ui-field .mat-mdc-form-field{margin-top:0;width:100%}.ui-field .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-text-field-wrapper{height:auto!important}.ui-field .mat-mdc-form-field.multi-line .mat-mdc-form-field-infix{min-height:48px!important}.ui-field .mat-mdc-form-field.multi-line textarea{margin-top:8px;min-height:32px!important}.ui-field .mat-mdc-form-field.textarea .mat-mdc-text-field-wrapper{height:var(--textarea-height-container)!important}.ui-field .mat-mdc-form-field.textarea textarea{max-height:var(--textarea-height)!important;min-height:var(--textarea-height)!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#276678!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing{border-color:#cb7b7a!important}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{background:#fff!important;top:22px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75);margin-left:1px}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:4px;font-size:12px;line-height:16px;position:relative}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%;text-align:right}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{position:relative;padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-prefix,.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{padding:0}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .search-icon{padding:12px 8px 12px 16px;color:#888;--icon-color: #888888}.ui-field .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.search svg,.ui-field .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .options .options-container ui-button.password svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-icon svg{color:#276678}.ui-field .mat-mdc-form-field.mat-accent.mat-focused .options .options-container ui-button.close svg{color:#888}.ui-field .mat-mdc-form-field .options .options-container{display:flex;column-gap:8px;padding-left:8px}.ui-field .mat-mdc-form-field .options .options-container ui-button.password{width:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container button,.ui-field .mat-mdc-form-field .options .options-container ui-button.password .button-wrapper .button-container span{width:24px!important;height:24px!important}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon{background:#3c9a13;border-radius:100%}.ui-field .mat-mdc-form-field .options .options-container ui-icon.valid mat-icon svg{color:#fff!important}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation svg circle{stroke:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button.validation *{color:#d410aa}.ui-field .mat-mdc-form-field .options .options-container ui-button,.ui-field .mat-mdc-form-field .options .options-container ui-icon{display:flex}.ui-field .mat-mdc-form-field .options .options-container ui-button svg,.ui-field .mat-mdc-form-field .options .options-container ui-icon svg{color:#888}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon{padding:0;height:auto;background:transparent}.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:hover,.ui-field .mat-mdc-form-field .options ui-button button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled .mat-mdc-input-element,.ui-field .mat-mdc-form-field.mat-form-field-disabled .mdc-floating-label{pointer-events:none}.ui-field .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-button svg,.ui-field .mat-mdc-form-field.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--disabled .mdc-notched-outline__notch label{color:#e9e9e9!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading{border-top-left-radius:10px;border-bottom-left-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-top-right-radius:10px;border-bottom-right-radius:10px}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .password .icon-only-wrapper svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above),.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label:not(.mdc-floating-label--float-above){top:21px!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#242424!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-hint.error svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-icon-prefix svg,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-icon-prefix svg{color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing{border-color:#e02800!important}.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper:hover .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above,.ui-field[theme=light] .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .mat-mdc-text-field-wrapper.mdc-text-field--focused .mat-mdc-form-field-flex .mat-mdc-floating-label.mdc-floating-label--float-above{color:#e02800!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch{border-color:transparent!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-floating-label{color:#919191!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-input-element{color:#242424}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-form-field-infix{padding:12px 0!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mdc-floating-label--float-above{display:none!important}.ui-field .mat-mdc-form-field.text-area-borderless.mat-mdc-form-field-type-mat-input.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{border-radius:0!important}.ui-field .field-badge{position:absolute;left:-27px;top:-10px;z-index:1}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -7787,11 +7780,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 args: ['class.full-width']
             }, {
                 type: Input
-            }], fullHeight: [{
-                type: HostBinding,
-                args: ['class.full-height']
-            }, {
-                type: Input
             }], label: [{
                 type: Input
             }], labelIcon: [{
@@ -8235,7 +8223,7 @@ class FileUploadComponent {
                 useExisting: forwardRef(() => FileUploadComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n    (fileDropped)=\"onFileDropped($event)\"\n    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n        <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n          <ng-container *ngIf=\"!!errors\">\n            <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n          </ng-container>\n\n          <span *ngIf=\"isMissedMinSize\">\n            <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n            {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n          </span>\n        </div>\n        <input\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n          [attr.aria-describedby]=\"'upload-supported-files'\"\n          [tabIndex]=\"-1\"\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          id=\"file\"\n          [accept]=\"supportedFileTypes\"\n          [disabled]=\"disabled\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n          {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\n          <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\n          {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n        </p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\n        <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\n          >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n        >\n      </div>\n    </div>\n    @if (success) {\n      <div class=\"upload-success\">\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n        <span class=\"upload-success-text\"\n          ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n          >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\n        >\n        <input\n          [tabIndex]=\"-1\"\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n          [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          id=\"fileTest\"\n          [accept]=\"supportedFileTypes\"\n          (change)=\"onChangeUpload($event)\"\n          [disabled]=\"disabled\"\n        />\n        <span class=\"upload-text\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar\n        [progress]=\"uploadProgress\"\n        [companyColor]=\"compColor\"\n        [applicationTheme]=\"applicationTheme\"\n      ></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' | uiTranslate | async) }}\n        @if (showUploadProgress) {\n          <span>{{ uploadProgress }}</span\n          >%\n        }\n      </p>\n    </div>\n\n    <ng-template #iconTpl>\n      <ui-icon\n        *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n        class=\"upload-icon\"\n        name=\"File-upload\"\n      ></ui-icon>\n      <ng-template #rebrandedIconTpl>\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      </ng-template>\n    </ng-template>\n    <ng-template #rebrandedDnDCopyTpl>\n      <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n    </ng-template>\n\n    <div\n      *ngIf=\"!!supportedFileTypes\"\n      [attr.theme]=\"applicationTheme\"\n      class=\"upload-supported-files\"\n      id=\"upload-supported-files\"\n    >\n      <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n      >{{ supportedFileTypes }}\n    </div>\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#3c9a13;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:16px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
+        ], viewQueries: [{ propertyName: "fileDrop", first: true, predicate: ["fileDrop"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\r\n  <div\r\n    class=\"upload-file-container\"\r\n    uiDragDrop\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-required]=\"ariaRequired\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\r\n    (fileDropped)=\"onFileDropped($event)\"\r\n    [tabIndex]=\"0\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"fileDrop?.nativeElement?.click()\"\r\n  >\r\n    <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\r\n      <div class=\"upload-browse\">\r\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\r\n\r\n        <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\r\n          <ng-container *ngIf=\"!!errors\">\r\n            <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\r\n          </ng-container>\r\n\r\n          <span *ngIf=\"isMissedMinSize\">\r\n            <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\r\n            {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\r\n          </span>\r\n        </div>\r\n        <input\r\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\r\n          [attr.aria-describedby]=\"'upload-supported-files'\"\r\n          [tabIndex]=\"-1\"\r\n          class=\"form-control\"\r\n          #fileDrop\r\n          type=\"file\"\r\n          id=\"file\"\r\n          [accept]=\"supportedFileTypes\"\r\n          [disabled]=\"disabled\"\r\n          (change)=\"onChangeUpload($event)\"\r\n        />\r\n        <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\r\n          {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\r\n          <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\r\n          {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\r\n        </p>\r\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\r\n        <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\r\n          >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\r\n        >\r\n      </div>\r\n    </div>\r\n    @if (success) {\r\n      <div class=\"upload-success\">\r\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\r\n        <span class=\"upload-success-text\"\r\n          ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\r\n          >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\r\n        >\r\n        <input\r\n          [tabIndex]=\"-1\"\r\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\r\n          [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\r\n          class=\"form-control\"\r\n          #fileDrop\r\n          type=\"file\"\r\n          id=\"fileTest\"\r\n          [accept]=\"supportedFileTypes\"\r\n          (change)=\"onChangeUpload($event)\"\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <span class=\"upload-text\">{{ file?.name }}</span>\r\n        @if (showFileSize) {\r\n          <span class=\"upload-text\">{{\r\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\r\n          }}</span>\r\n        }\r\n      </div>\r\n    }\r\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\r\n      <p>{{ file.name }}</p>\r\n      <ui-progress-bar\r\n        [progress]=\"uploadProgress\"\r\n        [companyColor]=\"compColor\"\r\n        [applicationTheme]=\"applicationTheme\"\r\n      ></ui-progress-bar>\r\n      <p class=\"upload-text\">\r\n        {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' | uiTranslate | async) }}\r\n        @if (showUploadProgress) {\r\n          <span>{{ uploadProgress }}</span\r\n          >%\r\n        }\r\n      </p>\r\n    </div>\r\n\r\n    <ng-template #iconTpl>\r\n      <ui-icon\r\n        *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\r\n        class=\"upload-icon\"\r\n        name=\"File-upload\"\r\n      ></ui-icon>\r\n      <ng-template #rebrandedIconTpl>\r\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\r\n      </ng-template>\r\n    </ng-template>\r\n    <ng-template #rebrandedDnDCopyTpl>\r\n      <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\r\n    </ng-template>\r\n\r\n    <div\r\n      *ngIf=\"!!supportedFileTypes\"\r\n      [attr.theme]=\"applicationTheme\"\r\n      class=\"upload-supported-files\"\r\n      id=\"upload-supported-files\"\r\n    >\r\n      <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\r\n      >{{ supportedFileTypes }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#3c9a13;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:16px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "directive", type: DragDropDirective, selector: "[uiDragDrop]", outputs: ["fileDropped"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.LowerCasePipe, name: "lowercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], animations: [
             trigger('inOutAnimation', [
                 transition(':enter', [
                     style({ opacity: 0, height: 0 }),
@@ -8307,7 +8295,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                                 animate('0.2s ease-in', style({ opacity: 0, height: 0 })),
                             ]),
                         ]),
-                    ], template: "<ng-container>\n  <div\n    class=\"upload-file-container\"\n    uiDragDrop\n    [attr.aria-label]=\"ariaLabel\"\n    [attr.aria-required]=\"ariaRequired\"\n    [attr.theme]=\"applicationTheme\"\n    [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\n    (fileDropped)=\"onFileDropped($event)\"\n    [tabIndex]=\"0\"\n    (keydown)=\"onKeydown($event)\"\n    (click)=\"fileDrop?.nativeElement?.click()\"\n  >\n    <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\n      <div class=\"upload-browse\">\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n\n        <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\n          <ng-container *ngIf=\"!!errors\">\n            <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\n          </ng-container>\n\n          <span *ngIf=\"isMissedMinSize\">\n            <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\n            {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\n          </span>\n        </div>\n        <input\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n          [attr.aria-describedby]=\"'upload-supported-files'\"\n          [tabIndex]=\"-1\"\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          id=\"file\"\n          [accept]=\"supportedFileTypes\"\n          [disabled]=\"disabled\"\n          (change)=\"onChangeUpload($event)\"\n        />\n        <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\n          {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\n          <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\n          {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\n        </p>\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\n        <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\n          >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\n        >\n      </div>\n    </div>\n    @if (success) {\n      <div class=\"upload-success\">\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\n        <span class=\"upload-success-text\"\n          ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\n          >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\n        >\n        <input\n          [tabIndex]=\"-1\"\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\n          [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\n          class=\"form-control\"\n          #fileDrop\n          type=\"file\"\n          id=\"fileTest\"\n          [accept]=\"supportedFileTypes\"\n          (change)=\"onChangeUpload($event)\"\n          [disabled]=\"disabled\"\n        />\n        <span class=\"upload-text\">{{ file?.name }}</span>\n        @if (showFileSize) {\n          <span class=\"upload-text\">{{\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\n          }}</span>\n        }\n      </div>\n    }\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\n      <p>{{ file.name }}</p>\n      <ui-progress-bar\n        [progress]=\"uploadProgress\"\n        [companyColor]=\"compColor\"\n        [applicationTheme]=\"applicationTheme\"\n      ></ui-progress-bar>\n      <p class=\"upload-text\">\n        {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' | uiTranslate | async) }}\n        @if (showUploadProgress) {\n          <span>{{ uploadProgress }}</span\n          >%\n        }\n      </p>\n    </div>\n\n    <ng-template #iconTpl>\n      <ui-icon\n        *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\n        class=\"upload-icon\"\n        name=\"File-upload\"\n      ></ui-icon>\n      <ng-template #rebrandedIconTpl>\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\n      </ng-template>\n    </ng-template>\n    <ng-template #rebrandedDnDCopyTpl>\n      <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\n    </ng-template>\n\n    <div\n      *ngIf=\"!!supportedFileTypes\"\n      [attr.theme]=\"applicationTheme\"\n      class=\"upload-supported-files\"\n      id=\"upload-supported-files\"\n    >\n      <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\n      >{{ supportedFileTypes }}\n    </div>\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#3c9a13;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:16px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"] }]
+                    ], template: "<ng-container>\r\n  <div\r\n    class=\"upload-file-container\"\r\n    uiDragDrop\r\n    [attr.aria-label]=\"ariaLabel\"\r\n    [attr.aria-required]=\"ariaRequired\"\r\n    [attr.theme]=\"applicationTheme\"\r\n    [ngClass]=\"{ 'upload-errors': !!errors || isMissedMinSize, 'upload-file-container-disabled': disabled }\"\r\n    (fileDropped)=\"onFileDropped($event)\"\r\n    [tabIndex]=\"0\"\r\n    (keydown)=\"onKeydown($event)\"\r\n    (click)=\"fileDrop?.nativeElement?.click()\"\r\n  >\r\n    <div *ngIf=\"browse && !(success && !!file && progress)\" [@inOutAnimation] class=\"upload-files\">\r\n      <div class=\"upload-browse\">\r\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\r\n\r\n        <div class=\"errors\" *ngIf=\"!!errors || isMissedMinSize\" role=\"alert\">\r\n          <ng-container *ngIf=\"!!errors\">\r\n            <span *ngFor=\"let error of errors\"><ui-icon name=\"Error\" class=\"error-icon\"></ui-icon> {{ error }}</span>\r\n          </ng-container>\r\n\r\n          <span *ngIf=\"isMissedMinSize\">\r\n            <ui-icon name=\"Error\" class=\"error-icon\"></ui-icon>\r\n            {{ translationContext + 'MIN_SIZE_ERROR' | uiTranslate: { min: minFileSizeMB } | async }}\r\n          </span>\r\n        </div>\r\n        <input\r\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\r\n          [attr.aria-describedby]=\"'upload-supported-files'\"\r\n          [tabIndex]=\"-1\"\r\n          class=\"form-control\"\r\n          #fileDrop\r\n          type=\"file\"\r\n          id=\"file\"\r\n          [accept]=\"supportedFileTypes\"\r\n          [disabled]=\"disabled\"\r\n          (change)=\"onChangeUpload($event)\"\r\n        />\r\n        <p *ngIf=\"applicationTheme === 'classic'; else rebrandedDnDCopyTpl\">\r\n          {{ translationContext + 'DRAG_AND_DROP_OR' | uiTranslate | async }}\r\n          <span class=\"semibold\"> {{ translationContext + 'BROWSE' | uiTranslate | async | lowercase }}</span>\r\n          {{ translationContext + 'YOUR_FILES' | uiTranslate | async }}\r\n        </p>\r\n        <span class=\"upload-text\">{{ maxFileSizeMB }}{{ translationContext + 'MAX_SIZE' | uiTranslate | async }}</span>\r\n        <span *ngIf=\"minFileSizeMB\" class=\"upload-text\"\r\n          >{{ minFileSizeMB }}{{ translationContext + 'MIN_SIZE' | uiTranslate | async }}</span\r\n        >\r\n      </div>\r\n    </div>\r\n    @if (success) {\r\n      <div class=\"upload-success\">\r\n        <ng-container [ngTemplateOutlet]=\"iconTpl\"></ng-container>\r\n        <span class=\"upload-success-text\"\r\n          ><ui-icon name=\"Check-round-in-line\" [color]=\"colorUploadSuccess\"></ui-icon\r\n          >{{ translationContext + 'FILE_UPLOADING_SUCCESS' | uiTranslate | async }}</span\r\n        >\r\n        <input\r\n          [tabIndex]=\"-1\"\r\n          [attr.aria-labelledby]=\"success || progress ? '' : 'drag-and-drop'\"\r\n          [attr.aria-describedby]=\"success || progress ? '' : 'supported-file-types'\"\r\n          class=\"form-control\"\r\n          #fileDrop\r\n          type=\"file\"\r\n          id=\"fileTest\"\r\n          [accept]=\"supportedFileTypes\"\r\n          (change)=\"onChangeUpload($event)\"\r\n          [disabled]=\"disabled\"\r\n        />\r\n        <span class=\"upload-text\">{{ file?.name }}</span>\r\n        @if (showFileSize) {\r\n          <span class=\"upload-text\">{{\r\n            translationContext + 'FILE_SIZE' | uiTranslate: { fileSize: fileSizeInMB } | async\r\n          }}</span>\r\n        }\r\n      </div>\r\n    }\r\n    <div class=\"upload-progress\" [@inOutAnimationProgress] *ngIf=\"!!progress && !!file && !success\">\r\n      <p>{{ file.name }}</p>\r\n      <ui-progress-bar\r\n        [progress]=\"uploadProgress\"\r\n        [companyColor]=\"compColor\"\r\n        [applicationTheme]=\"applicationTheme\"\r\n      ></ui-progress-bar>\r\n      <p class=\"upload-text\">\r\n        {{ fileProcessingMessage ?? (translationContext + 'UPLOADING' | uiTranslate | async) }}\r\n        @if (showUploadProgress) {\r\n          <span>{{ uploadProgress }}</span\r\n          >%\r\n        }\r\n      </p>\r\n    </div>\r\n\r\n    <ng-template #iconTpl>\r\n      <ui-icon\r\n        *ngIf=\"applicationTheme === 'classic'; else rebrandedIconTpl\"\r\n        class=\"upload-icon\"\r\n        name=\"File-upload\"\r\n      ></ui-icon>\r\n      <ng-template #rebrandedIconTpl>\r\n        <ui-icon class=\"upload-icon\" name=\"Upload\" [size]=\"'24'\" [applicationTheme]=\"applicationTheme\"></ui-icon>\r\n      </ng-template>\r\n    </ng-template>\r\n    <ng-template #rebrandedDnDCopyTpl>\r\n      <p id=\"'drag-and-drop'\">{{ translationContext + 'DRAG_AND_DROP' | uiTranslate | async }}</p>\r\n    </ng-template>\r\n\r\n    <div\r\n      *ngIf=\"!!supportedFileTypes\"\r\n      [attr.theme]=\"applicationTheme\"\r\n      class=\"upload-supported-files\"\r\n      id=\"upload-supported-files\"\r\n    >\r\n      <span>{{ translationContext + 'SUPPORTED_FILE_TYPES' | uiTranslate | async }}</span\r\n      >{{ supportedFileTypes }}\r\n    </div>\r\n  </div>\r\n</ng-container>\r\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}.upload-file-container{border-radius:8px;border:1px dashed #888888;background:#fff;display:flex;justify-content:center;align-items:center;height:196px;flex-flow:column;position:relative;max-width:563px;cursor:pointer}.upload-file-container:focus-visible{outline-offset:2px;outline:2px solid #242424;animation:focus-ring-animation .4s forwards}@keyframes focus-ring-animation{0%{outline-width:4px}to{outline-width:2px}}.upload-file-container.upload-errors{border:1px dashed #cb7b7a}.upload-file-container .upload-files{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;height:196px}.upload-file-container .upload-success,.upload-file-container .upload-browse{display:flex;flex-flow:column;align-items:center;justify-content:center;width:100%;position:relative;height:196px}.upload-file-container .upload-success ui-icon.upload-icon,.upload-file-container .upload-browse ui-icon.upload-icon{margin-bottom:16px}.upload-file-container .upload-success ui-icon.upload-icon mat-icon.size-16 svg,.upload-file-container .upload-browse ui-icon.upload-icon mat-icon.size-16 svg{width:32px;height:32px}.upload-file-container .upload-success input,.upload-file-container .upload-browse input{visibility:hidden;position:absolute;z-index:2;width:100%;height:100%;cursor:pointer}.upload-file-container .upload-success .upload-text,.upload-file-container .upload-browse .upload-text{margin-top:16px}.upload-file-container .upload-success .upload-success-text,.upload-file-container .upload-browse .upload-success-text{color:#3c9a13;display:flex;align-items:center;gap:8px}.upload-file-container .upload-success p,.upload-file-container .upload-browse p{margin:0}.upload-file-container .upload-success p .semibold,.upload-file-container .upload-browse p .semibold{font-weight:400;text-decoration:underline;color:var(--color)}.upload-file-container .upload-success .errors,.upload-file-container .upload-browse .errors{width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:16px;font-size:12px;line-height:16px;color:#cb7b7a}.upload-file-container .upload-success .errors span,.upload-file-container .upload-browse .errors span{display:flex;align-items:center;margin-bottom:5px}.upload-file-container .upload-success .errors span:last-child,.upload-file-container .upload-browse .errors span:last-child{margin-bottom:0}.upload-file-container .upload-success .errors .error-icon,.upload-file-container .upload-browse .errors .error-icon{margin-right:4px}.upload-file-container .upload-success .errors .error-icon svg,.upload-file-container .upload-browse .errors .error-icon svg{color:#cb7b7a}.upload-file-container .upload-success .errors .error-icon mat-icon.size-16 svg,.upload-file-container .upload-browse .errors .error-icon mat-icon.size-16 svg{width:16px;height:16px}.upload-file-container .upload-progress{padding:0 32px;width:100%}.upload-file-container .upload-text{text-align:right}.upload-file-container[theme=dark],.upload-file-container[theme=light]{border-radius:10px;border-color:#242424}.upload-file-container[theme=dark].upload-file-container-disabled,.upload-file-container[theme=light].upload-file-container-disabled{border-color:#919191;color:#919191;background-color:#f4f4f4}.upload-file-container[theme=dark].upload-file-container-disabled .upload-icon svg,.upload-file-container[theme=light].upload-file-container-disabled .upload-icon svg{color:#919191}.upload-file-container[theme=dark].upload-errors,.upload-file-container[theme=light].upload-errors{border-color:#e02800}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):hover,.upload-file-container[theme=light]:not(.upload-file-container-disabled):hover{background:#f4f4f4;border-style:solid}.upload-file-container[theme=dark]:not(.upload-file-container-disabled):active,.upload-file-container[theme=light]:not(.upload-file-container-disabled):active{background:#f4f4f4;transform:scale(.98)}.upload-file-container[theme=dark] .errors,.upload-file-container[theme=light] .errors{color:#e02800;font-size:14px}.upload-file-container[theme=dark] .errors .error-icon svg,.upload-file-container[theme=light] .errors .error-icon svg{color:#e02800}.upload-supported-files{left:0;position:absolute;top:100%;font-size:12px;line-height:16px;margin-top:8px;width:100%}.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:563px}.upload-supported-files span{font-weight:700;margin-right:5px}@media (max-width: 600px){.upload-file-container,.upload-supported-files[theme=dark],.upload-supported-files[theme=light]{max-width:100%}}.transparent{opacity:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -11411,14 +11399,14 @@ class DatepickerComponent {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: DatepickerComponent, selector: "ui-datepicker", inputs: { label: "label", fieldName: "fieldName", placeholder: "placeholder", id: "id", value: "value", errors: "errors", isRange: "isRange", disabled: "disabled", required: "required", hintMessage: "hintMessage", updateOnBlur: "updateOnBlur", showBottomContent: "showBottomContent", fullWidth: "fullWidth", minDate: "minDate", maxDate: "maxDate", monthPicker: "monthPicker", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", preventUserInput: "preventUserInput", companyColor: "companyColor", browserTimezone: "browserTimezone" }, outputs: { changed: "changed" }, host: { properties: { "class": "this.class" } }, providers: [
             { provide: DateAdapter, useClass: UiDateAdapter },
             { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },
-        ], usesOnChanges: true, ngImport: i0, template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <input\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n    >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n        <input\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\n  }\n  <ui-validation-error\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\n    [ngControl]=\"ngControl\"\n    [label]=\"hideLabelInErrors ? null : label\"\n  ></ui-validation-error>\n</ng-template>\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i8$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i8$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i8$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i8$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], usesOnChanges: true, ngImport: i0, template: "@if (monthPicker) {\r\n  <mat-form-field\r\n    appNoDateFormat\r\n    appearance=\"outline\"\r\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n  >\r\n    <mat-label *ngIf=\"label\">\r\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n    </mat-label>\r\n\r\n    <input\r\n      matInput\r\n      [id]=\"id!\"\r\n      (blur)=\"onTouch()\"\r\n      [placeholder]=\"placeholder!\"\r\n      [matDatepicker]=\"dp\"\r\n      [value]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [name]=\"fieldName!\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [readonly]=\"preventUserInput\"\r\n      (change)=\"onInput($event)\"\r\n      (dateChange)=\"onValueChange($event.value)\"\r\n    />\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\r\n      <ui-icon\r\n        matDatepickerToggleIcon\r\n        [applicationTheme]=\"applicationTheme\"\r\n        name=\"Calendar\"\r\n        size=\"24\"\r\n        color=\"inherit\"\r\n      ></ui-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      panelClass=\"month-picker\"\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\r\n    ></mat-datepicker>\r\n\r\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n    >{{ hint }}\r\n    </mat-hint>\r\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n} @else {\r\n  @if (isRange) {\r\n    <mat-form-field\r\n      appearance=\"outline\"\r\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n    >\r\n      <mat-label *ngIf=\"label\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n      </mat-label>\r\n\r\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\r\n        <input\r\n          matStartDate\r\n          formControlName=\"start\"\r\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\r\n          (dateChange)=\"dateRangeChange()\"\r\n        />\r\n        <input\r\n          matEndDate\r\n          formControlName=\"end\"\r\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\r\n          (dateChange)=\"dateRangeChange()\"\r\n        />\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\r\n        <ui-icon\r\n          matDatepickerToggleIcon\r\n          [applicationTheme]=\"applicationTheme\"\r\n          name=\"Calendar\"\r\n          size=\"24\"\r\n          color=\"inherit\"\r\n        ></ui-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\r\n\r\n      <mat-hint\r\n        class=\"info\"\r\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n      >{{ hint }}\r\n      </mat-hint>\r\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n  } @else {\r\n    <mat-form-field\r\n      appearance=\"outline\"\r\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n    >\r\n      <mat-label *ngIf=\"label\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n      </mat-label>\r\n      <input\r\n        matInput\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n        (dateChange)=\"onValueChange($event.value)\"\r\n        [id]=\"id!\"\r\n        [placeholder]=\"placeholder!\"\r\n        [value]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [name]=\"fieldName!\"\r\n        [readonly]=\"preventUserInput\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n      />\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\r\n        <ui-icon\r\n          matDatepickerToggleIcon\r\n          [applicationTheme]=\"applicationTheme\"\r\n          name=\"Calendar\"\r\n          size=\"24\"\r\n          color=\"inherit\"\r\n        ></ui-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #picker></mat-datepicker>\r\n\r\n      <mat-hint\r\n        class=\"info\"\r\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n      >{{ hint }}\r\n      </mat-hint>\r\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\r\n<ng-template #hintsTpl>\r\n  @if (errorsLength) {\r\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\r\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\r\n      <span [innerHTML]=\"error\"></span>\r\n    </div>\r\n  }\r\n  <ui-validation-error\r\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\r\n    [ngControl]=\"ngControl\"\r\n    [label]=\"hideLabelInErrors ? null : label\"\r\n  ></ui-validation-error>\r\n</ng-template>\r\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i8$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i8$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i8$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i8$2.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i8$2.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i8$2.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i8$2.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i8$2.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "directive", type: NoDateFormatDirective, selector: "[appNoDateFormat]" }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatepickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ui-datepicker', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
                         { provide: DateAdapter, useClass: UiDateAdapter },
                         { provide: MAT_DATE_FORMATS, useValue: UI_DATE_FORMATS },
-                    ], template: "@if (monthPicker) {\n  <mat-form-field\n    appNoDateFormat\n    appearance=\"outline\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n  >\n    <mat-label *ngIf=\"label\">\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n    </mat-label>\n\n    <input\n      matInput\n      [id]=\"id!\"\n      (blur)=\"onTouch()\"\n      [placeholder]=\"placeholder!\"\n      [matDatepicker]=\"dp\"\n      [value]=\"value\"\n      [disabled]=\"disabled\"\n      [name]=\"fieldName!\"\n      [min]=\"minDate\"\n      [max]=\"maxDate\"\n      [readonly]=\"preventUserInput\"\n      (change)=\"onInput($event)\"\n      (dateChange)=\"onValueChange($event.value)\"\n    />\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\n      <ui-icon\n        matDatepickerToggleIcon\n        [applicationTheme]=\"applicationTheme\"\n        name=\"Calendar\"\n        size=\"24\"\n        color=\"inherit\"\n      ></ui-icon>\n    </mat-datepicker-toggle>\n    <mat-datepicker\n      panelClass=\"month-picker\"\n      #dp\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\n    ></mat-datepicker>\n\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n    >{{ hint }}\n    </mat-hint>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n    </mat-hint>\n  </mat-form-field>\n} @else {\n  @if (isRange) {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\n        <input\n          matStartDate\n          formControlName=\"start\"\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n        <input\n          matEndDate\n          formControlName=\"end\"\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\n          (dateChange)=\"dateRangeChange()\"\n        />\n      </mat-date-range-input>\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  } @else {\n    <mat-form-field\n      appearance=\"outline\"\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\n    >\n      <mat-label *ngIf=\"label\">\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\n      </mat-label>\n      <input\n        matInput\n        [matDatepicker]=\"picker\"\n        (blur)=\"onTouch()\"\n        (dateChange)=\"onValueChange($event.value)\"\n        [id]=\"id!\"\n        [placeholder]=\"placeholder!\"\n        [value]=\"value\"\n        [disabled]=\"disabled\"\n        [name]=\"fieldName!\"\n        [readonly]=\"preventUserInput\"\n        [min]=\"minDate\"\n        [max]=\"maxDate\"\n      />\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n        <ui-icon\n          matDatepickerToggleIcon\n          [applicationTheme]=\"applicationTheme\"\n          name=\"Calendar\"\n          size=\"24\"\n          color=\"inherit\"\n        ></ui-icon>\n      </mat-datepicker-toggle>\n      <mat-datepicker #picker></mat-datepicker>\n\n      <mat-hint\n        class=\"info\"\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\n      >{{ hint }}\n      </mat-hint>\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\n      </mat-hint>\n    </mat-form-field>\n  }\n}\n\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\n<ng-template #hintsTpl>\n  @if (errorsLength) {\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\n      <span [innerHTML]=\"error\"></span>\n    </div>\n  }\n  <ui-validation-error\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\n    [ngControl]=\"ngControl\"\n    [label]=\"hideLabelInErrors ? null : label\"\n  ></ui-validation-error>\n</ng-template>\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"] }]
+                    ], template: "@if (monthPicker) {\r\n  <mat-form-field\r\n    appNoDateFormat\r\n    appearance=\"outline\"\r\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n    [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n  >\r\n    <mat-label *ngIf=\"label\">\r\n      <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n    </mat-label>\r\n\r\n    <input\r\n      matInput\r\n      [id]=\"id!\"\r\n      (blur)=\"onTouch()\"\r\n      [placeholder]=\"placeholder!\"\r\n      [matDatepicker]=\"dp\"\r\n      [value]=\"value\"\r\n      [disabled]=\"disabled\"\r\n      [name]=\"fieldName!\"\r\n      [min]=\"minDate\"\r\n      [max]=\"maxDate\"\r\n      [readonly]=\"preventUserInput\"\r\n      (change)=\"onInput($event)\"\r\n      (dateChange)=\"onValueChange($event.value)\"\r\n    />\r\n    <mat-datepicker-toggle matIconSuffix [for]=\"dp\">\r\n      <ui-icon\r\n        matDatepickerToggleIcon\r\n        [applicationTheme]=\"applicationTheme\"\r\n        name=\"Calendar\"\r\n        size=\"24\"\r\n        color=\"inherit\"\r\n      ></ui-icon>\r\n    </mat-datepicker-toggle>\r\n    <mat-datepicker\r\n      panelClass=\"month-picker\"\r\n      #dp\r\n      startView=\"multi-year\"\r\n      (monthSelected)=\"setMonthAndYear($event, dp)\"\r\n    ></mat-datepicker>\r\n\r\n    <mat-hint class=\"info\" *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n    >{{ hint }}\r\n    </mat-hint>\r\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n      <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n    </mat-hint>\r\n  </mat-form-field>\r\n} @else {\r\n  @if (isRange) {\r\n    <mat-form-field\r\n      appearance=\"outline\"\r\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n    >\r\n      <mat-label *ngIf=\"label\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n      </mat-label>\r\n\r\n      <mat-date-range-input [formGroup]=\"range\" [rangePicker]=\"rangePicker\" [min]=\"minDate\" [max]=\"maxDate\">\r\n        <input\r\n          matStartDate\r\n          formControlName=\"start\"\r\n          [placeholder]=\"translationContext + 'START_DATE' | uiTranslate | async\"\r\n          (dateChange)=\"dateRangeChange()\"\r\n        />\r\n        <input\r\n          matEndDate\r\n          formControlName=\"end\"\r\n          [placeholder]=\"translationContext + 'END_DATE' | uiTranslate | async\"\r\n          (dateChange)=\"dateRangeChange()\"\r\n        />\r\n      </mat-date-range-input>\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\r\n        <ui-icon\r\n          matDatepickerToggleIcon\r\n          [applicationTheme]=\"applicationTheme\"\r\n          name=\"Calendar\"\r\n          size=\"24\"\r\n          color=\"inherit\"\r\n        ></ui-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-date-range-picker #rangePicker></mat-date-range-picker>\r\n\r\n      <mat-hint\r\n        class=\"info\"\r\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n      >{{ hint }}\r\n      </mat-hint>\r\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n  } @else {\r\n    <mat-form-field\r\n      appearance=\"outline\"\r\n      [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) ? 'warn' : 'accent'\"\r\n      [ngClass]=\"{ 'hide-bottom-content': !showBottomContent, 'full-width': fullWidth }\"\r\n    >\r\n      <mat-label *ngIf=\"label\">\r\n        <ng-container [ngTemplateOutlet]=\"labelTpl\"></ng-container>\r\n      </mat-label>\r\n      <input\r\n        matInput\r\n        [matDatepicker]=\"picker\"\r\n        (blur)=\"onTouch()\"\r\n        (dateChange)=\"onValueChange($event.value)\"\r\n        [id]=\"id!\"\r\n        [placeholder]=\"placeholder!\"\r\n        [value]=\"value\"\r\n        [disabled]=\"disabled\"\r\n        [name]=\"fieldName!\"\r\n        [readonly]=\"preventUserInput\"\r\n        [min]=\"minDate\"\r\n        [max]=\"maxDate\"\r\n      />\r\n      <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\r\n        <ui-icon\r\n          matDatepickerToggleIcon\r\n          [applicationTheme]=\"applicationTheme\"\r\n          name=\"Calendar\"\r\n          size=\"24\"\r\n          color=\"inherit\"\r\n        ></ui-icon>\r\n      </mat-datepicker-toggle>\r\n      <mat-datepicker #picker></mat-datepicker>\r\n\r\n      <mat-hint\r\n        class=\"info\"\r\n        *ngIf=\"hint && !_errors && !(ngControl?.touched && (ngControl?.errors | hasValidationError))\"\r\n      >{{ hint }}\r\n      </mat-hint>\r\n      <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.touched && (ngControl?.errors | hasValidationError))\">\r\n        <ng-container [ngTemplateOutlet]=\"hintsTpl\"></ng-container>\r\n      </mat-hint>\r\n    </mat-form-field>\r\n  }\r\n}\r\n\r\n<ng-template #labelTpl>{{ label }}<span *ngIf=\"required\"> *</span></ng-template>\r\n<ng-template #hintsTpl>\r\n  @if (errorsLength) {\r\n    <div class=\"errors\" *ngFor=\"let error of _errors\">\r\n      <ui-icon [applicationTheme]=\"applicationTheme\" name=\"Error\"></ui-icon>\r\n      <span [innerHTML]=\"error\"></span>\r\n    </div>\r\n  }\r\n  <ui-validation-error\r\n    *ngIf=\"ngControl && !hideBuiltInErrors\"\r\n    [ngControl]=\"ngControl\"\r\n    [label]=\"hideLabelInErrors ? null : label\"\r\n  ></ui-validation-error>\r\n</ng-template>\r\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}.month-picker .mat-calendar-period-button{pointer-events:none}.month-picker .mat-calendar-arrow{display:none}.ui-datepicker{width:100%}.ui-datepicker .mat-mdc-form-field{margin-top:0;min-width:296px}.ui-datepicker .mat-mdc-form-field.full-width{width:100%}.ui-datepicker .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-infix{min-height:48px;max-height:48px;padding:4px 0;line-height:22px;display:inline-flex;align-items:center}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0 0 12px;margin-top:0;font-size:12px;line-height:16px;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-form-field-hint-spacer{display:none}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.info{color:#888;width:100%}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0;position:relative}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-icon-suffix{margin-right:4px}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline:not(.mdc-text-field--disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,.ui-datepicker .mat-mdc-form-field.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}.ui-datepicker .mat-mdc-form-field.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#cb7b7a}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex;padding-bottom:10px}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-mdc-form-field-flex:hover .mdc-notched-outline{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-accent.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-form-field-label mat-label{color:#276678}.ui-datepicker .mat-mdc-form-field.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}.ui-datepicker .mat-mdc-form-field .mat-mdc-form-field-hint .hint-message{color:#888!important;margin-top:4px}.mat-datepicker-content .mat-mdc-button.mat-unthemed .mdc-button__label>span{font-weight:600}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:#e9f0f1}.mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:#e9f0f1}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before,[theme=light] .mat-datepicker-content.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before{background-color:var(--datepicker-hover-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-selected,[theme=light] .mat-datepicker-content .mat-calendar-body-selected{background-color:var(--datepicker-selected-color)}[theme=dark] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected),[theme=light] .mat-datepicker-content .mat-calendar-body-today:not(.mat-calendar-body-selected){background:transparent;--mat-datepicker-calendar-date-focus-state-background-color: $tgo-white }[theme=dark] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),[theme=light] .mat-datepicker-content .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical){--mat-datepicker-calendar-date-focus-state-background-color: var(--datepicker-hover-color)}.info{margin-top:4px!important;padding-bottom:10px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -15835,7 +15823,7 @@ class PasswordComponent {
                 useExisting: forwardRef(() => PasswordComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n\n  <ui-field [applicationTheme]=\"'dark'\"\n            [formControl]=\"formControl\"\n            [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n            [type]=\"'password'\"\n            [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n            (keydown.enter)=\"showError = true\"\n            (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n\n    <div class=\"progress\">\n      <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon [size]=\"'24'\"\n               [color]=\"'rebrand-black'\"\n               [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n               applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{ (criteriaPassed[criterion.key] ? ('COMMON.PASSED') : ('COMMON.FAILED')) | uiTranslate | async }}</span>\n    </div>\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}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "requiredCriteria", first: true, predicate: ["requiredCriteria"], descendants: true }], ngImport: i0, template: "<div class=\"password-criteria-container\">\n\n  <ui-field [applicationTheme]=\"'dark'\"\n            [formControl]=\"formControl\"\n            [ariaLabel]=\"requiredCriteria?.nativeElement?.innerText ?? ''\"\n            [type]=\"'password'\"\n            [placeholder]=\"('PASSWORD.PASSWORD_PLACEHOLDER' | uiTranslate | async) + (required ? ' *' : '')\"\n            (keydown.enter)=\"showError = true\"\n            (focusout)=\"showError = true\"\n  ></ui-field>\n\n  <div class=\"criteria-container\" *ngIf=\"showCriteria\" #requiredCriteria>\n\n    <div class=\"progress\">\n      <ui-progress-bar [progress]=\"progressValue === 1 ? 0 : progressValue\" [applicationTheme]=\"'dark'\"></ui-progress-bar>\n    </div>\n\n    <span *ngIf=\"allRequirementsMet\" style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">{{ 'FIELD.ALL_PASSWORD_REQ_PASSED' | uiTranslate | async }}</span>\n\n    <div\n      *ngFor=\"let criterion of criteria\"\n      class=\"criterion\"\n      [attr.aria-live]=\"!allRequirementsMet ? 'polite' : ''\"\n      [ngClass]=\"{ 'passed': criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n    >\n      <ui-icon [size]=\"'24'\"\n               [color]=\"'rebrand-black'\"\n               [name]=\"!criteriaPassed[criterion.key] && showError ? 'Info-in-line' : 'Check-round-in-line'\"\n               applicationTheme=\"dark\"\n      ></ui-icon>\n      <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n      <span style=\"position: absolute; left: -9999px\">{{ (criteriaPassed[criterion.key] ? ('COMMON.PASSED') : ('COMMON.FAILED')) | uiTranslate | async }}</span>\n    </div>\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}.password-criteria-container .criteria-container{margin-top:14px}.password-criteria-container .criteria-container .progress{margin-bottom:16px}.password-criteria-container .criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.password-criteria-container .criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.password-criteria-container .criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.password-criteria-container .criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.password-criteria-container .criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.password-criteria-container .criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.password-criteria-container .criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
@@ -16629,7 +16617,7 @@ class MultiInputComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MultiInputComponent, selector: "ui-multi-input", inputs: { itemsList: "itemsList", itemTextField: "itemTextField", itemValueField: "itemValueField", value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], label: "label", placeholder: "placeholder", allowDecimal: ["allowDecimal", "allowDecimal", booleanAttribute], allowNegative: ["allowNegative", "allowNegative", booleanAttribute], applicationTheme: "applicationTheme", errors: "errors", hideBuiltInErrors: ["hideBuiltInErrors", "hideBuiltInErrors", booleanAttribute], hideLabelInErrors: ["hideLabelInErrors", "hideLabelInErrors", booleanAttribute], maxCharacters: "maxCharacters", validators: "validators", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.theme": "this.applicationTheme", "class.full-width": "this.fullWidth", "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField\"\n      [valueList]=\"itemsList\"\n      [textField]=\"itemTextField\"\n      [valueField]=\"itemValueField\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      (closed)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"'value'\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative\"\n      (focusout)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n  @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @for (error of errors; track error) {\n        <ui-icon\n          [applicationTheme]=\"applicationTheme\"\n          [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n        ></ui-icon>{{ error }}\n      }\n      @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors) {\n        <ui-validation-error\n          [touchedOn]=\"!controlHasError\"\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : label\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MultiInputComponent, selector: "ui-multi-input", inputs: { itemsList: "itemsList", itemTextField: "itemTextField", itemValueField: "itemValueField", value: "value", disabled: ["disabled", "disabled", booleanAttribute], required: ["required", "required", booleanAttribute], label: "label", placeholder: "placeholder", allowDecimal: ["allowDecimal", "allowDecimal", booleanAttribute], allowNegative: ["allowNegative", "allowNegative", booleanAttribute], applicationTheme: "applicationTheme", errors: "errors", hideBuiltInErrors: ["hideBuiltInErrors", "hideBuiltInErrors", booleanAttribute], hideLabelInErrors: ["hideLabelInErrors", "hideLabelInErrors", booleanAttribute], maxCharacters: "maxCharacters", validators: "validators", fullWidth: "fullWidth" }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.theme": "this.applicationTheme", "class.full-width": "this.fullWidth", "class": "this.class" } }, usesOnChanges: true, ngImport: i0, template: "<div [formGroup]=\"multiInputForm\">\n  <div class=\"controls-wrapper\">\n    <ui-dropdown\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"itemValueField\"\n      [valueList]=\"itemsList\"\n      [textField]=\"itemTextField\"\n      [valueField]=\"itemValueField\"\n      [showBottomContent]=\"false\"\n      [allowClear]=\"false\"\n      (closed)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-dropdown>\n\n    <ui-field\n      [hasError]=\"controlHasError\"\n      [formControlName]=\"'value'\"\n      [label]=\"label\"\n      [placeholder]=\"placeholder\"\n      [required]=\"required\"\n      [hideBuiltInErrors]=\"true\"\n      [showBottomContent]=\"false\"\n      [allowOnlyDigits]=\"true\"\n      [fullWidth]=\"fullWidth\"\n      [allowNegative]=\"allowNegative\"\n      (focusout)=\"markAsTouched(); checkFormErrors()\"\n    ></ui-field>\n  </div>\n\n  <mat-hint class=\"info\" *ngIf=\"!controlHasError && maxCharacters && !errors?.length\">{{ getValueLength() }} / {{ maxCharacters }}</mat-hint>\n\n  @if (errors?.length || (ngControl?.errors | hasValidationError)) {\n    <mat-hint class=\"error\">\n      @for (error of errors; track error) {\n        <ui-icon\n          [applicationTheme]=\"applicationTheme\"\n          [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n        ></ui-icon>{{ error }}\n      }\n      @if ((ngControl?.errors | hasValidationError) && !hideBuiltInErrors) {\n        <ui-validation-error\n          [touchedOn]=\"!controlHasError\"\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : label\"\n        ></ui-validation-error>\n      }\n    </mat-hint>\n  }\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}:host.ui-multi-input{position:relative!important}:host.ui-multi-input .ng-untouched,:host.ui-multi-input .ng-touched{width:fit-content}:host.ui-multi-input.full-width .ng-untouched{width:100%}:host.ui-multi-input .controls-wrapper{display:flex}:host.ui-multi-input ::ng-deep ui-validation-error .errors{display:flex}:host.ui-multi-input ::ng-deep .ui-dropdown{max-width:120px}:host.ui-multi-input ::ng-deep .ui-dropdown .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-text-field-wrapper,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .mdc-notched-outline__trailing{border-right-color:transparent!important;border-top-right-radius:0!important;border-bottom-right-radius:0!important}:host.ui-multi-input ::ng-deep .ui-dropdown:hover .mdc-notched-outline__trailing,:host.ui-multi-input ::ng-deep .ui-dropdown .mat-mdc-form-field-focused .mdc-notched-outline__trailing{border-right-color:#242424}:host.ui-multi-input ::ng-deep .ui-field .mdc-notched-outline__leading,:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-text-field-wrapper{border-top-left-radius:0!important;border-bottom-left-radius:0!important}:host.ui-multi-input ::ng-deep .ui-field .mat-mdc-form-field-subscript-wrapper{position:absolute!important;left:0!important;top:48px!important}:host.ui-multi-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix{padding-top:0!important;padding-bottom:0!important;min-height:48px!important;align-items:center!important;display:flex!important}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.info{display:block;color:#888;width:100%;text-align:right}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error{display:flex;gap:4px;color:#e02800;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint.error svg{color:#e02800}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint:before{display:none}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error{color:#e02800;font-size:12px;line-height:16px;letter-spacing:.4px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error .errors{display:flex;align-items:center;padding:4px 0 10px}:host.ui-multi-input ::ng-deep .mat-mdc-form-field-hint ui-validation-error svg{margin-right:4px;color:#e02800;row-gap:0}:host.ui-multi-input .separator-line{border-left:1px solid var(--mdc-outlined-text-field-outline-color);height:40px;margin:0 12px -7px 8px}:host.ui-multi-input ::ng-deep .mat-mdc-select .mat-mdc-select-arrow-wrapper{display:none}:host.ui-multi-input ::ng-deep .mdc-text-field--outlined{padding-left:12px!important}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: DropdownComponent, selector: "ui-dropdown", inputs: ["label", "labelIcon", "isAIVariant", "name", "placeholder", "id", "value", "errors", "disabled", "valueList", "allowClear", "allowMultipleSelection", "required", "showBottomContent", "applicationTheme", "hideBuiltInErrors", "hideLabelInErrors", "textField", "valueField", "hasError", "companyColor", "panelClass"], outputs: ["closed", "opened"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiInputComponent, decorators: [{
             type: Component,
@@ -16909,11 +16897,11 @@ class SidePanelComponent {
         }, sidePanelAnimationDuration);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel{width:100%}}.side-panel-action{margin-top:1px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{font-weight:900;font-size:24px;display:block;display:-webkit-box;max-height:3em;line-height:1.5em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:40px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: SidePanelComponent, isStandalone: true, selector: "ui-side-panel", viewQueries: [{ propertyName: "sidePanelContainer", first: true, predicate: ["sidePanelContainer"], descendants: true, read: ViewContainerRef, isSignal: true }, { propertyName: "sidePanel", first: true, predicate: ["sidePanel"], descendants: true, isSignal: true }, { propertyName: "backdrop", first: true, predicate: ["sidePanelBackdrop"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\r\n<div\r\n  class=\"side-panel\"\r\n  [class]=\"sidePanelConfig.panelClass\"\r\n  [class.side-panel-small]=\"isSmall()\"\r\n  [class.side-panel-large]=\"isLarge()\"\r\n  #sidePanel\r\n  [@slideInOut]=\"animation()\"\r\n>\r\n  @if (sidePanelConfig.showHeader) {\r\n    <div class=\"side-panel-header\">\r\n      <div class=\"side-panel-title-container\">\r\n        @if (sidePanelConfig.showBackButton) {\r\n          <ui-button\r\n            class=\"side-panel-action\"\r\n            [variant]=\"'icon-button'\"\r\n            [iconName]=\"'Arrow-chevron-left-filled'\"\r\n            (click)=\"close()\"\r\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\r\n            size=\"medium\"\r\n          ></ui-button>\r\n        }\r\n        <span class=\"side-panel-title\">{{ sidePanelConfig.title }}</span>\r\n      </div>\r\n      @if (sidePanelConfig.showCloseButton) {\r\n        <ui-button\r\n          class=\"side-panel-action\"\r\n          [variant]=\"'icon-button'\"\r\n          [iconName]=\"'Close'\"\r\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\r\n          (click)=\"close()\"\r\n          size=\"medium\"\r\n        ></ui-button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"side-panel-content\">\r\n    <ng-container #sidePanelContainer></ng-container>\r\n  </div>\r\n</div>\r\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action{margin-top:1px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{font-weight:900;font-size:24px;display:block;display:-webkit-box;max-height:3em;line-height:1.5em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:40px}\n"], dependencies: [{ kind: "ngmodule", type: TooltipComponentModule }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], animations: [sidePanelAnimation, backdropAnimation], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SidePanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass], template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\n<div\n  class=\"side-panel\"\n  [class]=\"sidePanelConfig.panelClass\"\n  [class.side-panel-small]=\"isSmall()\"\n  [class.side-panel-large]=\"isLarge()\"\n  #sidePanel\n  [@slideInOut]=\"animation()\"\n>\n  @if (sidePanelConfig.showHeader) {\n    <div class=\"side-panel-header\">\n      <div class=\"side-panel-title-container\">\n        @if (sidePanelConfig.showBackButton) {\n          <ui-button\n            class=\"side-panel-action\"\n            [variant]=\"'icon-button'\"\n            [iconName]=\"'Arrow-chevron-left-filled'\"\n            (click)=\"close()\"\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\n            size=\"medium\"\n          ></ui-button>\n        }\n        <span class=\"side-panel-title\">{{ sidePanelConfig.title }}</span>\n      </div>\n      @if (sidePanelConfig.showCloseButton) {\n        <ui-button\n          class=\"side-panel-action\"\n          [variant]=\"'icon-button'\"\n          [iconName]=\"'Close'\"\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\n          (click)=\"close()\"\n          size=\"medium\"\n        ></ui-button>\n      }\n    </div>\n  }\n\n  <div class=\"side-panel-content\">\n    <ng-container #sidePanelContainer></ng-container>\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel{width:100%}}.side-panel-action{margin-top:1px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{font-weight:900;font-size:24px;display:block;display:-webkit-box;max-height:3em;line-height:1.5em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:40px}\n"] }]
+            args: [{ selector: 'ui-side-panel', animations: [sidePanelAnimation, backdropAnimation], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [TooltipComponentModule, ButtonComponentModule, UiTranslatePipe, AsyncPipe, NgClass], template: "<div class=\"side-panel-backdrop\" #sidePanelBackdrop (click)=\"close()\" [@fadeInOut]=\"isOpen() ? 'open' : 'closed'\"></div>\r\n<div\r\n  class=\"side-panel\"\r\n  [class]=\"sidePanelConfig.panelClass\"\r\n  [class.side-panel-small]=\"isSmall()\"\r\n  [class.side-panel-large]=\"isLarge()\"\r\n  #sidePanel\r\n  [@slideInOut]=\"animation()\"\r\n>\r\n  @if (sidePanelConfig.showHeader) {\r\n    <div class=\"side-panel-header\">\r\n      <div class=\"side-panel-title-container\">\r\n        @if (sidePanelConfig.showBackButton) {\r\n          <ui-button\r\n            class=\"side-panel-action\"\r\n            [variant]=\"'icon-button'\"\r\n            [iconName]=\"'Arrow-chevron-left-filled'\"\r\n            (click)=\"close()\"\r\n            [tooltip]=\"('COMMON.BACK' | uiTranslate | async)!\"\r\n            size=\"medium\"\r\n          ></ui-button>\r\n        }\r\n        <span class=\"side-panel-title\">{{ sidePanelConfig.title }}</span>\r\n      </div>\r\n      @if (sidePanelConfig.showCloseButton) {\r\n        <ui-button\r\n          class=\"side-panel-action\"\r\n          [variant]=\"'icon-button'\"\r\n          [iconName]=\"'Close'\"\r\n          [tooltip]=\"('COMMON.CLOSE' | uiTranslate | async)!\"\r\n          (click)=\"close()\"\r\n          size=\"medium\"\r\n        ></ui-button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <div class=\"side-panel-content\">\r\n    <ng-container #sidePanelContainer></ng-container>\r\n  </div>\r\n</div>\r\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}.side-panel{position:fixed;top:0;bottom:0;background-color:#fff;padding:32px;box-shadow:2px 24px 48px 8px #00000014;z-index:999999;display:flex;flex-direction:column;will-change:transform;transform:translate(100%)}.side-panel.side-panel-small{width:600px}@media (max-width: 600px){.side-panel.side-panel-small{width:100%}}.side-panel.side-panel-large{width:956px}@media (max-width: 600px){.side-panel.side-panel-large{width:100%}}@media (max-width: 960px){.side-panel.side-panel-large{width:100%}}.side-panel-action{margin-top:1px}.side-panel-title-container{display:flex;gap:8px}.side-panel.left{left:0}.side-panel.right{right:0}.side-panel-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#000;z-index:899;opacity:0}.side-panel-title{font-weight:900;font-size:24px;display:block;display:-webkit-box;max-height:3em;line-height:1.5em;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal}.side-panel-content{overflow:auto;flex:1}.side-panel-header{position:sticky;min-height:30px;display:flex;justify-content:space-between;margin-bottom:40px}\n"] }]
         }], ctorParameters: () => [] });
 
 // These are the sizes of the canvas, not the chart itself. It includes 40px of padding on all sides.
@@ -17507,7 +17495,7 @@ class ChecklistComponent {
         this.footerButtonClicked.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecklistComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChecklistComponent, isStandalone: true, selector: "ui-checklist", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, footerButtonLabel: { classPropertyName: "footerButtonLabel", publicName: "footerButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, autocheck: { classPropertyName: "autocheck", publicName: "autocheck", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", footerButtonClicked: "footerButtonClicked", completed: "completed", selectedItem: "selectedItemChange" }, ngImport: i0, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      data-testid=\"checklist-item\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #D3D3D3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "ngmodule", type: RadioButtonComponentModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: DividerComponentModule }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ChecklistComponent, isStandalone: true, selector: "ui-checklist", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, footerButtonLabel: { classPropertyName: "footerButtonLabel", publicName: "footerButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, autocheck: { classPropertyName: "autocheck", publicName: "autocheck", isSignal: true, isRequired: false, transformFunction: null }, selectedItem: { classPropertyName: "selectedItem", publicName: "selectedItem", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", footerButtonClicked: "footerButtonClicked", completed: "completed", selectedItem: "selectedItemChange" }, ngImport: i0, template: "@if (label()) {\r\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\r\n}\r\n@if (description()) {\r\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\r\n}\r\n\r\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\r\n\r\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\r\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\r\n</div>\r\n\r\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\r\n\r\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\r\n  @for (item of items(); track item.value + item.checked; let i = $index) {\r\n    <div\r\n      data-testid=\"checklist-item\"\r\n      class=\"checklist-item\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.checked]=\"item.checked\"\r\n      [class.active]=\"item === selectedItem() && !autocheck()\"\r\n      [attr.aria-labelledby]=\"'item-' + item.value\"\r\n      [tabindex]=\"item?.disabled ? -1 : 0\"\r\n      (click)=\"selectItem(item)\"\r\n      (keydown)=\"keydownHandler($event, item)\"\r\n    >\r\n      <div class=\"content\">\r\n        <ui-icon\r\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\r\n          [filled]=\"item.checked\"\r\n          class=\"checked\"\r\n          [applicationTheme]=\"theme()\"\r\n          [size]=\"'16'\"\r\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\r\n        ></ui-icon>\r\n        <div class=\"label-and-description\">\r\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\r\n          @if (item.description) {\r\n            <span class=\"item-description\">{{ item.description }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (item.hasLink && !item.disabled) {\r\n        <div class=\"navigation\">\r\n          <ui-icon\r\n            [tabindex]=\"-1\"\r\n            class=\"link\"\r\n            [name]=\"'Arrow-chevron-right-filled'\"\r\n            [applicationTheme]=\"theme()\"\r\n            [size]=\"'24'\"\r\n            color=\"rebrand-black\"\r\n          ></ui-icon>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n@if (footerButtonLabel()) {\r\n  <div class=\"action-btn\">\r\n    <ui-button\r\n      data-testid=\"checklist-footer-button\"\r\n      [label]=\"footerButtonLabel()!\"\r\n      [variant]=\"'link'\"\r\n      [companyColor]=\"'#000'\"\r\n      (buttonClickEvent)=\"footerButtonClick($event)\"\r\n    ></ui-button>\r\n  </div>\r\n}\r\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;flex-direction:column;padding:24px;background:#fff;border:1px solid #D3D3D3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: ProgressBarComponentModule }, { kind: "component", type: ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "ngmodule", type: RadioButtonComponentModule }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: ButtonComponentModule }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "ngmodule", type: DividerComponentModule }, { kind: "component", type: DividerComponent, selector: "ui-divider", inputs: ["size", "companyColor", "applicationTheme", "label"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ChecklistComponent, decorators: [{
             type: Component,
@@ -17519,7 +17507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                         DividerComponentModule,
                         UiTranslatePipe,
                         AsyncPipe,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\n}\n@if (description()) {\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\n}\n\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\n\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\n</div>\n\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\n\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\n  @for (item of items(); track item.value + item.checked; let i = $index) {\n    <div\n      data-testid=\"checklist-item\"\n      class=\"checklist-item\"\n      [class.disabled]=\"item.disabled\"\n      [class.checked]=\"item.checked\"\n      [class.active]=\"item === selectedItem() && !autocheck()\"\n      [attr.aria-labelledby]=\"'item-' + item.value\"\n      [tabindex]=\"item?.disabled ? -1 : 0\"\n      (click)=\"selectItem(item)\"\n      (keydown)=\"keydownHandler($event, item)\"\n    >\n      <div class=\"content\">\n        <ui-icon\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\n          [filled]=\"item.checked\"\n          class=\"checked\"\n          [applicationTheme]=\"theme()\"\n          [size]=\"'16'\"\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\n        ></ui-icon>\n        <div class=\"label-and-description\">\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\n          @if (item.description) {\n            <span class=\"item-description\">{{ item.description }}</span>\n          }\n        </div>\n      </div>\n\n      @if (item.hasLink && !item.disabled) {\n        <div class=\"navigation\">\n          <ui-icon\n            [tabindex]=\"-1\"\n            class=\"link\"\n            [name]=\"'Arrow-chevron-right-filled'\"\n            [applicationTheme]=\"theme()\"\n            [size]=\"'24'\"\n            color=\"rebrand-black\"\n          ></ui-icon>\n        </div>\n      }\n    </div>\n  }\n</div>\n@if (footerButtonLabel()) {\n  <div class=\"action-btn\">\n    <ui-button\n      data-testid=\"checklist-footer-button\"\n      [label]=\"footerButtonLabel()!\"\n      [variant]=\"'link'\"\n      [companyColor]=\"'#000'\"\n      (buttonClickEvent)=\"footerButtonClick($event)\"\n    ></ui-button>\n  </div>\n}\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{display:flex;flex-direction:column;padding:24px;background:#fff;border:1px solid #D3D3D3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (label()) {\r\n  <h4 [attr.aria-label]=\"ariaLabel() ?? label()\">{{ label() }}</h4>\r\n}\r\n@if (description()) {\r\n  <div aria-label=\"description\" class=\"description\" [innerHTML]=\"description()\"></div>\r\n}\r\n\r\n<ui-progress-bar [showPercentage]=\"true\" [progress]=\"progress()\"></ui-progress-bar>\r\n\r\n<div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\r\n  {{ 'COMMON.PROGRESS' | uiTranslate: { progress: progress() } | async }}\r\n</div>\r\n\r\n<ui-divider size=\"small\" companyColor=\"#d3d3d3\"> </ui-divider>\r\n\r\n<div class=\"checklist-container\" data-testid=\"checklist-container\">\r\n  @for (item of items(); track item.value + item.checked; let i = $index) {\r\n    <div\r\n      data-testid=\"checklist-item\"\r\n      class=\"checklist-item\"\r\n      [class.disabled]=\"item.disabled\"\r\n      [class.checked]=\"item.checked\"\r\n      [class.active]=\"item === selectedItem() && !autocheck()\"\r\n      [attr.aria-labelledby]=\"'item-' + item.value\"\r\n      [tabindex]=\"item?.disabled ? -1 : 0\"\r\n      (click)=\"selectItem(item)\"\r\n      (keydown)=\"keydownHandler($event, item)\"\r\n    >\r\n      <div class=\"content\">\r\n        <ui-icon\r\n          [name]=\"item.checked ? 'Check-in-line' : 'Circle-in-line'\"\r\n          [filled]=\"item.checked\"\r\n          class=\"checked\"\r\n          [applicationTheme]=\"theme()\"\r\n          [size]=\"'16'\"\r\n          [color]=\"item.checked ? 'white' : item.disabled ? '#919191' : 'dark'\"\r\n        ></ui-icon>\r\n        <div class=\"label-and-description\">\r\n          <span [id]=\"'item-' + item.value\" class=\"label\">{{ item.label }}</span>\r\n          @if (item.description) {\r\n            <span class=\"item-description\">{{ item.description }}</span>\r\n          }\r\n        </div>\r\n      </div>\r\n\r\n      @if (item.hasLink && !item.disabled) {\r\n        <div class=\"navigation\">\r\n          <ui-icon\r\n            [tabindex]=\"-1\"\r\n            class=\"link\"\r\n            [name]=\"'Arrow-chevron-right-filled'\"\r\n            [applicationTheme]=\"theme()\"\r\n            [size]=\"'24'\"\r\n            color=\"rebrand-black\"\r\n          ></ui-icon>\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n@if (footerButtonLabel()) {\r\n  <div class=\"action-btn\">\r\n    <ui-button\r\n      data-testid=\"checklist-footer-button\"\r\n      [label]=\"footerButtonLabel()!\"\r\n      [variant]=\"'link'\"\r\n      [companyColor]=\"'#000'\"\r\n      (buttonClickEvent)=\"footerButtonClick($event)\"\r\n    ></ui-button>\r\n  </div>\r\n}\r\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;flex-direction:column;padding:24px;background:#fff;border:1px solid #D3D3D3;border-radius:10px}:host .checklist-container{margin-top:24px;display:flex;flex-direction:column;height:100%;overflow:auto}:host h4{margin:16px 0}:host .description{font-size:14px;line-height:22px;margin-bottom:16px}:host ui-progress-bar{margin-bottom:24px}:host .checklist-item{border-radius:10px;border:1px solid transparent;display:flex;align-items:center;flex-direction:row;height:40px;padding:8px 8px 8px 12px;margin:4px 4px 8px;background-color:#fff;justify-content:space-between;cursor:pointer}:host .checklist-item .content{display:flex;align-items:center}:host .checklist-item .label-and-description{display:flex;flex-direction:column}:host .checklist-item .label-and-description .label{-webkit-user-select:none;user-select:none}:host .checklist-item .label-and-description .item-description{font-size:12px;color:#666;line-height:16px}:host .checklist-item .link{position:relative;z-index:1;cursor:pointer;border-radius:50px}:host .checklist-item .checked{position:relative;border-radius:50px;margin-right:12px;width:16px;height:16px;cursor:pointer}:host .checklist-item .checked ::ng-deep mat-icon{position:relative;z-index:1}:host .checklist-item .checked:after{content:\"\";width:16px;height:16px;position:absolute;transition:background-color .2s;top:0;left:0;border-radius:50px}:host .checklist-item.checked{cursor:default}:host .checklist-item.checked ui-icon .label{color:#919191}:host .checklist-item.checked ui-icon:after{background:#d410aa}:host .checklist-item.checked .label{color:#919191}:host .checklist-item:hover{background-color:#fff2fc}:host .checklist-item:hover .label{color:#242424}:host .checklist-item.active,:host .checklist-item:active{background-color:#ffe6fa}:host .checklist-item.active .label,:host .checklist-item:active .label{color:#242424}:host .checklist-item:focus-visible{outline-offset:2px;outline:3px solid #242424;border-color:#242424;animation:focus-ring-animation-main .4s forwards}:host .checklist-item ::ng-deep .mat-mdc-radio-button{pointer-events:none!important}:host .checklist-item.disabled{pointer-events:none}:host .checklist-item.disabled .label{color:#919191}:host .action-btn{margin-top:16px;display:flex;justify-content:flex-end}:host .action-btn ::ng-deep ui-button .link a.mat-mdc-unelevated-button.big .mdc-button__label .icon-label-wrapper{font-size:14px!important}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -17794,11 +17782,11 @@ class GaussianChartComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GaussianChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GaussianChartComponent, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "<div\n  class=\"chart-section\"\n  *ngIf=\"score\"\n  [attr.aria-label]=\"\n    translationContext + 'ARIA_LABEL'\n      | uiTranslate\n        : {\n            score: score,\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n            bestCandidateScore: bestCandidateScore,\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n          }\n      | async\n  \"\n  tabindex=\"0\"\n>\n  <!-- Legend positioned at top -->\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n\n  <div class=\"chart-range-wrapper\">\n    <div class=\"normal-chart-container\">\n      <div class=\"normal-chart\">\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n        </canvas>\n        <div\n          class=\"overlay-icon\"\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n        >\n          <div class=\"drop-icon\">\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n            <span class=\"curve-score\">{{ score }}</span>\n          </div>\n        </div>\n        <div\n          class=\"best-score\"\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\n          [style.left]=\"overlayXBestScoreValue + '%'\"\n        >\n          <div\n            class=\"best-score-content\"\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n          >\n            <ui-icon name=\"Trophy\"></ui-icon>\n            {{ bestCandidateScore }}\n          </div>\n        </div>\n      </div>\n      <div class=\"overlay\">\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"range\">\n      <div>1</div>\n      <div>20</div>\n      <div>40</div>\n      <div>60</div>\n      <div>80</div>\n      <div>99</div>\n    </div>\n  </div>\n\n  <!-- Legend positioned at bottom -->\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: GaussianChartComponent, selector: "ui-gaussian-chart", inputs: { score: "score", bestCandidateScore: "bestCandidateScore", applicationTheme: "applicationTheme", legendPosition: "legendPosition" }, ngImport: i0, template: "<div\r\n  class=\"chart-section\"\r\n  *ngIf=\"score\"\r\n  [attr.aria-label]=\"\r\n    translationContext + 'ARIA_LABEL'\r\n      | uiTranslate\r\n        : {\r\n            score: score,\r\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\r\n            bestCandidateScore: bestCandidateScore,\r\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\r\n          }\r\n      | async\r\n  \"\r\n  tabindex=\"0\"\r\n>\r\n  <!-- Legend positioned at top -->\r\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\r\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\r\n  }\r\n\r\n  <div class=\"chart-range-wrapper\">\r\n    <div class=\"normal-chart-container\">\r\n      <div class=\"normal-chart\">\r\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\r\n        </canvas>\r\n        <div\r\n          class=\"overlay-icon\"\r\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\r\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\r\n        >\r\n          <div class=\"drop-icon\">\r\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\r\n            <span class=\"curve-score\">{{ score }}</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"best-score\"\r\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\r\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\r\n          [style.left]=\"overlayXBestScoreValue + '%'\"\r\n        >\r\n          <div\r\n            class=\"best-score-content\"\r\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\r\n          >\r\n            <ui-icon name=\"Trophy\"></ui-icon>\r\n            {{ bestCandidateScore }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"overlay\">\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"range\">\r\n      <div>1</div>\r\n      <div>20</div>\r\n      <div>40</div>\r\n      <div>60</div>\r\n      <div>80</div>\r\n      <div>99</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend positioned at bottom -->\r\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\r\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<!-- Reusable legend template -->\r\n<ng-template #legendTemplate>\r\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\r\n    <div class=\"legend\">\r\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\r\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\r\n    </div>\r\n    <div class=\"legend\">\r\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\r\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\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}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$4.BaseChartDirective, selector: "canvas[baseChart]", inputs: ["type", "legend", "data", "options", "plugins", "labels", "datasets"], outputs: ["chartClick", "chartHover"], exportAs: ["base-chart"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GaussianChartComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-gaussian-chart', template: "<div\n  class=\"chart-section\"\n  *ngIf=\"score\"\n  [attr.aria-label]=\"\n    translationContext + 'ARIA_LABEL'\n      | uiTranslate\n        : {\n            score: score,\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\n            bestCandidateScore: bestCandidateScore,\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\n          }\n      | async\n  \"\n  tabindex=\"0\"\n>\n  <!-- Legend positioned at top -->\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n\n  <div class=\"chart-range-wrapper\">\n    <div class=\"normal-chart-container\">\n      <div class=\"normal-chart\">\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\n        </canvas>\n        <div\n          class=\"overlay-icon\"\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\n        >\n          <div class=\"drop-icon\">\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\n            <span class=\"curve-score\">{{ score }}</span>\n          </div>\n        </div>\n        <div\n          class=\"best-score\"\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\n          [style.left]=\"overlayXBestScoreValue + '%'\"\n        >\n          <div\n            class=\"best-score-content\"\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\n          >\n            <ui-icon name=\"Trophy\"></ui-icon>\n            {{ bestCandidateScore }}\n          </div>\n        </div>\n      </div>\n      <div class=\"overlay\">\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\n          </div>\n        </div>\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\n          <div\n            class=\"column-item\"\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\n          >\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"range\">\n      <div>1</div>\n      <div>20</div>\n      <div>40</div>\n      <div>60</div>\n      <div>80</div>\n      <div>99</div>\n    </div>\n  </div>\n\n  <!-- Legend positioned at bottom -->\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\n  }\n</div>\n\n<!-- Reusable legend template -->\n<ng-template #legendTemplate>\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\n    <div class=\"legend\">\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\n    </div>\n    <div class=\"legend\">\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\n    </div>\n  </div>\n</ng-template>\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}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
+            args: [{ selector: 'ui-gaussian-chart', template: "<div\r\n  class=\"chart-section\"\r\n  *ngIf=\"score\"\r\n  [attr.aria-label]=\"\r\n    translationContext + 'ARIA_LABEL'\r\n      | uiTranslate\r\n        : {\r\n            score: score,\r\n            activeBucket: getScoreTranslationKey(score) | uiTranslate | async,\r\n            bestCandidateScore: bestCandidateScore,\r\n            activeBucketBestScore: getScoreTranslationKey(bestCandidateScore) | uiTranslate | async,\r\n          }\r\n      | async\r\n  \"\r\n  tabindex=\"0\"\r\n>\r\n  <!-- Legend positioned at top -->\r\n  @if (legendPosition === 'top-start' || legendPosition === 'top-end') {\r\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\r\n  }\r\n\r\n  <div class=\"chart-range-wrapper\">\r\n    <div class=\"normal-chart-container\">\r\n      <div class=\"normal-chart\">\r\n        <canvas baseChart [data]=\"gaussianChartData\" [options]=\"gaussianChartOptions\" type=\"line\" class=\"chart\">\r\n        </canvas>\r\n        <div\r\n          class=\"overlay-icon\"\r\n          [style.bottom]=\"[overlayYValue, 3, 'subtract'] | memoizeFunc: getCalcPosition\"\r\n          [style.left]=\"[overlayXValue, 20, 'subtract'] | memoizeFunc: getCalcPosition\"\r\n        >\r\n          <div class=\"drop-icon\">\r\n            <ui-icon name=\"Pin-marker\" size=\"40\"></ui-icon>\r\n            <span class=\"curve-score\">{{ score }}</span>\r\n          </div>\r\n        </div>\r\n        <div\r\n          class=\"best-score\"\r\n          [style.height]=\"[100 - overlayYBestScoreValue, normalContainerPadding, 'add'] | memoizeFunc: getCalcPosition\"\r\n          [style.bottom]=\"overlayYBestScoreValue + '%'\"\r\n          [style.left]=\"overlayXBestScoreValue + '%'\"\r\n        >\r\n          <div\r\n            class=\"best-score-content\"\r\n            [style.left]=\"bestCandidateScore | memoizeFunc: getBestScoreContentPosition : this\"\r\n          >\r\n            <ui-icon name=\"Trophy\"></ui-icon>\r\n            {{ bestCandidateScore }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"overlay\">\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWEST\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWEST\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWEST' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.LOWER\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.LOWER\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.LOWER' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.AVERAGE\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.AVERAGE\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.AVERAGE' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHER\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHER\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHER' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n        <div class=\"overlay-column\" [class.active]=\"activeBucket === PercentileThreshold.HIGHEST\">\r\n          <div\r\n            class=\"column-item\"\r\n            [class.text-bold]=\"activeBucket === PercentileThreshold.HIGHEST\"\r\n            [matTooltip]=\"(translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST_TOOLTIP' | uiTranslate | async) || ''\"\r\n          >\r\n            {{ translationContext + 'PERCENTAGE_BUCKETS_GRAPH.HIGHEST' | uiTranslate | async }}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"range\">\r\n      <div>1</div>\r\n      <div>20</div>\r\n      <div>40</div>\r\n      <div>60</div>\r\n      <div>80</div>\r\n      <div>99</div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Legend positioned at bottom -->\r\n  @if (legendPosition === 'bottom-start' || legendPosition === 'bottom-end') {\r\n    <ng-container [ngTemplateOutlet]=\"legendTemplate\"></ng-container>\r\n  }\r\n</div>\r\n\r\n<!-- Reusable legend template -->\r\n<ng-template #legendTemplate>\r\n  <div class=\"legend-container\" [ngClass]=\"'legend-' + legendPosition\">\r\n    <div class=\"legend\">\r\n      <ui-icon name=\"Dot\" color=\"gray\"></ui-icon>\r\n      {{ translationContext + 'CANDIDATE_SCORE' | uiTranslate | async }}\r\n    </div>\r\n    <div class=\"legend\">\r\n      <ui-icon name=\"Trophy\" color=\"gray\"></ui-icon>\r\n      {{ translationContext + 'HIGHEST_SCORE' | uiTranslate | async }}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\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}.chart-section{display:flex;flex-direction:column;gap:16px;overflow:auto;width:100%}.chart-section .chart-range-wrapper{display:flex;flex-direction:column;gap:8px;width:100%}.chart-section .chart-range-wrapper .normal-chart-container{position:relative;padding-bottom:32px;padding-top:50px;border:1px solid #D3D3D3;border-radius:10px;width:100%;height:230px}.chart-section .chart-range-wrapper .normal-chart-container .normal-chart{position:relative;z-index:1;width:100%;height:100%}.chart-section .chart-range-wrapper .normal-chart-container .overlay{position:absolute;top:0;left:0;height:100%;width:100%;display:flex}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column{flex:1;font-size:12px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column .column-item{cursor:pointer}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column:not(:last-child){border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active{background-color:#fff5ed;border-bottom:3px solid #242424}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border:none;position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-right:1px solid #D3D3D3}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before,.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{content:\"\";position:absolute;bottom:0;width:calc(100% - 4px);height:2.5px;background-color:#000}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child{border-top-left-radius:8px;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:first-child:before{right:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child{border-top-right-radius:8px;border-bottom-right-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay .overlay-column.active:last-child:after{left:0;border-bottom-left-radius:8px}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon{position:relative}.chart-section .chart-range-wrapper .normal-chart-container .overlay-icon .drop-icon .curve-score{font-size:14px;font-weight:700;position:absolute;width:100%;text-align:center;top:0;left:.5px;padding:4px 4px 9px}.chart-section .chart-range-wrapper .normal-chart-container .best-score{position:absolute;border-left:1px #242424 dashed}.chart-section .chart-range-wrapper .normal-chart-container .best-score .best-score-content{position:absolute;display:flex;gap:3px;align-items:center}.chart-section .chart-range-wrapper .range{display:flex;justify-content:space-between;color:#919191}.chart-section .chart-range-wrapper .range div{width:35px;text-align:center}.chart-section .chart-range-wrapper .range div:nth-child(2){text-align:left}.chart-section .chart-range-wrapper .range div:nth-last-child(2){text-align:right}.chart-section .legend-container{display:flex;gap:16px}.chart-section .legend-container.legend-top-start,.chart-section .legend-container.legend-bottom-start{justify-content:flex-start}.chart-section .legend-container.legend-top-end,.chart-section .legend-container.legend-bottom-end{justify-content:flex-end}.chart-section .legend-container .legend{display:flex;gap:8px;align-items:center;color:#666}\n"] }]
         }], propDecorators: { score: [{
                 type: Input
             }], bestCandidateScore: [{
@@ -18174,7 +18162,7 @@ class FilterButtonComponent {
         this.cdr.markForCheck();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterButtonComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line'\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n        <ui-field\n          type=\"search\"\n          [showBottomContent]=\"false\"\n          [ngModel]=\"search()\"\n          (ngModelChange)=\"search.set($event)\"\n          [applicationTheme]=\"applicationTheme\"\n        ></ui-field>\n      </div>\n      <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <div *ngFor=\"let section of displayedOptions(); index as i\">\n            <div\n              *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n              class=\"section-title\"\n            >\n              {{ section.sectionTitle }}\n            </div>\n            <div\n              class=\"item\"\n              [class.item-selected]=\"isSelected(section.value)\"\n              (click)=\"optionChanged(!isSelected(section.value), section)\"\n            >\n              <ui-radio-button\n                (click)=\"$event.stopPropagation()\"\n                *ngIf=\"singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [selected]=\"isSelected(section.value)\"\n                (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              >\n              </ui-radio-button>\n              <ui-checkbox\n                (click)=\"$event.stopPropagation()\"\n                [class.with-label-number]=\"section.labelNumber !== undefined\"\n                *ngIf=\"!singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [checked]=\"isSelected(section.value)\"\n                (changed)=\"optionChanged($event, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              ></ui-checkbox>\n              <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n              <span\n                #tooltip=\"matTooltip\"\n                class=\"item-label\"\n                uiEllipseText\n                (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                [matTooltipClass]=\"applicationTheme\"\n              >\n                {{ section.label }}\n              </span>\n              <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n            </div>\n          </div>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n          <ui-button\n            *ngIf=\"allowClear\"\n            variant=\"text\"\n            size=\"small\"\n            [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n            (click)=\"clearValue()\"\n            [applicationTheme]=\"applicationTheme\"\n            (keydown.escape)=\"toggle()\"\n          ></ui-button>\n          <div class=\"ui-filter-button-footer-message\">\n            {{ message }}\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: FilterButtonComponent, selector: "ui-filter-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: false, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: false, isRequired: false, transformFunction: null }, singleSelection: { classPropertyName: "singleSelection", publicName: "singleSelection", isSignal: false, isRequired: false, transformFunction: null }, iconName: { classPropertyName: "iconName", publicName: "iconName", isSignal: false, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: false, isRequired: false, transformFunction: null }, noOptionsMessage: { classPropertyName: "noOptionsMessage", publicName: "noOptionsMessage", isSignal: false, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { changed: "changed", optionChange: "optionChange" }, host: { properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "overlayContainer", first: true, predicate: ["overlayContainer"], descendants: true }, { propertyName: "filterOptions", predicate: ["filterOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <ui-button\n    [matTooltip]=\"tooltip()\"\n    [matTooltipClass]=\"'tooltip-multi-line'\"\n    [matTooltipPosition]=\"'above'\"\n    class=\"ui-filter-button-trigger\"\n    [class.button-opened]=\"isOpen()\"\n    [variant]=\"value.length || isOpen() ? 'secondary' : 'ghost'\"\n    [label]=\"displayedLabel() || label\"\n    [disabled]=\"disabled || (options().length === 0 && !noOptionsMessage)\"\n    (click)=\"toggle()\"\n    type=\"button\"\n    size=\"small\"\n    [role]=\"'combobox'\"\n    [tooltip]=\"value.length ? ' ' : ''\"\n    [attr.aria-expanded]=\"isOpen()\"\n    [iconName]=\"iconName || (isOpen() ? 'Arrow-chevron-up-filled' : 'Arrow-chevron-down-filled')\"\n    [iconPosition]=\"iconPosition\"\n    [applicationTheme]=\"applicationTheme\"\n    cdkOverlayOrigin\n    #trigger=\"cdkOverlayOrigin\"\n  ></ui-button>\n  <ng-template\n    cdkConnectedOverlay\n    [cdkConnectedOverlayOrigin]=\"trigger\"\n    [cdkConnectedOverlayOpen]=\"isOpen()\"\n    (overlayOutsideClick)=\"outsideClick()\"\n  >\n    @if (displayedOptions().length) {\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          translationContext + 'ACTIVE_ITEM'\n            | uiTranslate: { active: (keyManager.activeItemIndex ?? 0) + 1, total: filterOptions.length }\n            | async\n        }}\n      </div>\n      <div style=\"position: absolute; left: -9999px\" [attr.aria-live]=\"'polite'\">\n        {{ displayedOptions()[keyManager.activeItemIndex ?? 0].label }}\n        {{\n          (value.includes(displayedOptions()[keyManager.activeItemIndex ?? 0].value)\n            ? translationContext + 'SELECTED'\n            : translationContext + 'DESELECTED'\n          )\n            | uiTranslate\n            | async\n        }}\n      </div>\n    }\n    <div class=\"ui-filter-button\" #overlayContainer>\n      <div class=\"ui-filter-button-header\" *ngIf=\"options().length > MIN_OPTIONS_LENGTH_FOR_SEARCH\">\n        <ui-field\n          type=\"search\"\n          [showBottomContent]=\"false\"\n          [ngModel]=\"search()\"\n          (ngModelChange)=\"search.set($event)\"\n          [applicationTheme]=\"applicationTheme\"\n        ></ui-field>\n      </div>\n      <div class=\"ui-filter-button-list\" #list (keydown)=\"keyDownHandler($event)\">\n        @if (!displayedOptions().length && options().length) {\n          <div class=\"no-results-found\">\n            <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n          </div>\n        } @else {\n          <div *ngFor=\"let section of displayedOptions(); index as i\">\n            <div\n              *ngIf=\"section.sectionTitle && section.sectionTitle !== displayedOptions()[i - 1]?.sectionTitle\"\n              class=\"section-title\"\n            >\n              {{ section.sectionTitle }}\n            </div>\n            <div\n              class=\"item\"\n              [class.item-selected]=\"isSelected(section.value)\"\n              (click)=\"optionChanged(!isSelected(section.value), section)\"\n            >\n              <ui-radio-button\n                (click)=\"$event.stopPropagation()\"\n                *ngIf=\"singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [selected]=\"isSelected(section.value)\"\n                (changeRadio)=\"optionChanged($event.optionChecked, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              >\n              </ui-radio-button>\n              <ui-checkbox\n                (click)=\"$event.stopPropagation()\"\n                [class.with-label-number]=\"section.labelNumber !== undefined\"\n                *ngIf=\"!singleSelection\"\n                [tabIndex]=\"i === 0 ? 0 : -1\"\n                [checked]=\"isSelected(section.value)\"\n                (changed)=\"optionChanged($event, section)\"\n                [applicationTheme]=\"applicationTheme\"\n                #filterOption\n              ></ui-checkbox>\n              <ui-icon *ngIf=\"section.icon\" [applicationTheme]=\"applicationTheme\" [name]=\"section.icon\"></ui-icon>\n              <span\n                #tooltip=\"matTooltip\"\n                class=\"item-label\"\n                uiEllipseText\n                (onChangeTextState)=\"onLabelEllipsisChange($event, section.value)\"\n                [matTooltip]=\"showTooltip[section.value] ? section.label : ''\"\n                [matTooltipClass]=\"applicationTheme\"\n              >\n                {{ section.label }}\n              </span>\n              <span class=\"item-number\" *ngIf=\"section.labelNumber !== undefined\">({{ section.labelNumber }})</span>\n            </div>\n          </div>\n        }\n      </div>\n      @if (!options().length && !!noOptionsMessage) {\n        <div class=\"ui-filter-button-no-options\" [innerHTML]=\"noOptionsMessage\"></div>\n      } @else {\n        <div class=\"ui-filter-button-footer\" *ngIf=\"allowClear || message\">\n          <ui-button\n            *ngIf=\"allowClear\"\n            variant=\"text\"\n            size=\"small\"\n            [label]=\"('COMMON.RESET' | uiTranslate | async)!\"\n            (click)=\"clearValue()\"\n            [applicationTheme]=\"applicationTheme\"\n            (keydown.escape)=\"toggle()\"\n          ></ui-button>\n          <div class=\"ui-filter-button-footer-message\">\n            {{ message }}\n          </div>\n        </div>\n      }\n    </div>\n  </ng-template>\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}ui-filter-button{display:inline-block}ui-filter-button ui-button .button-wrapper button{padding:7px 24px!important}ui-filter-button ui-button .button-wrapper button .icon ui-icon mat-icon.size-16 svg{width:24px;height:24px}ui-filter-button ui-button .button-wrapper button .label{line-clamp:1;-webkit-line-clamp:1!important}ui-filter-button ui-button.button-opened .button-wrapper button{background-color:#666!important;border-color:#666}ui-filter-button ui-button button.secondary{border:1px solid #242424}ui-filter-button ui-button button.secondary:hover{border-color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button{margin-top:4px;box-shadow:0 4px 16px #24242414;border-radius:10px;background-color:#fff;padding:0 0 8px;width:240px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-header{padding:8px 16px 0}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list{max-height:290px;overflow-y:auto;overflow-x:hidden}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .section-title,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .no-results-found{padding:8px 16px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item{padding:0 16px 0 5px;display:flex;align-items:center;gap:5px;height:48px;cursor:pointer}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item:hover,.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item.item-selected{background-color:#f4f4f4}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox{max-width:100%}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item ui-checkbox.with-label-number{max-width:calc(100% - 25px)}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-number{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-list .item-label{-webkit-user-select:none;user-select:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer{display:flex;justify-content:space-between;align-items:center;padding:0 16px 0 5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer ui-button{margin-left:-5px}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-footer-message{color:#666}.cdk-overlay-container .cdk-overlay-pane .ui-filter-button-no-options{padding:24px}.tooltip-multi-line .mdc-tooltip__surface{text-align:left;white-space:pre-line}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i1$7.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1$7.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: CheckboxComponent, selector: "ui-checkbox", inputs: ["disabled", "checked", "indeterminate", "companyColor", "name", "label", "multiple", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "hideBuiltInErrors", "hideLabelInErrors", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changed"] }, { kind: "component", type: FieldComponent, selector: "ui-field", inputs: ["fullWidth", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "directive", type: EllipseTextDirective, selector: "[uiEllipseText]", inputs: ["isMultiline", "maxDiffPixels", "refresh"], outputs: ["onChangeTextState"] }, { kind: "component", type: RadioButtonComponent, selector: "ui-radio-button", inputs: ["disabled", "selected", "allowUnselect", "companyColor", "name", "label", "multiple", "value", "applicationTheme", "ariaLabel", "ariaRequired", "hasError", "ariaLabelledby", "ariaDescribedby", "truncateText", "alignment", "tabIndex"], outputs: ["changeRadio"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: FilterButtonComponent, decorators: [{
             type: Component,