@testgorilla/tgo-ui 3.2.5-beta.1 → 3.2.6

package/fesm2022/testgorilla-tgo-ui.mjs

@@ -7403,11 +7403,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 }, label: { classPropertyName: "label", publicName: "label", 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 }, 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 }, 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 }], 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    [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 && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      >{{ label }}</mat-label\n    >\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        [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 === '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  </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}.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}\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", "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"], 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: "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 }, 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 }, 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 }, 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 }], 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    [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 && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      >{{ label }}</mat-label\n    >\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        [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  </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}.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}\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", "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"], 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: "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    [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 && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      >{{ label }}</mat-label\n    >\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        [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 === '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  </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}.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}\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    [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 && ((type !== 'search' && applicationTheme === 'classic') || applicationTheme !== 'classic')\"\n      >{{ label }}</mat-label\n    >\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        [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  </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}.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}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -8494,6 +8494,7 @@ var ScreenBreakpoints;
 (function (ScreenBreakpoints) {
     ScreenBreakpoints[ScreenBreakpoints["MOBILE"] = 600] = "MOBILE";
     ScreenBreakpoints[ScreenBreakpoints["TABLET"] = 1023] = "TABLET";
+    ScreenBreakpoints[ScreenBreakpoints["LARGE_TABLET"] = 1280] = "LARGE_TABLET";
 })(ScreenBreakpoints || (ScreenBreakpoints = {}));
 
 class SideSheetService {
@@ -11581,6 +11582,13 @@ const IS_MOBILE_TOKEN = new InjectionToken('Is mobile', {
     },
 });
 
+const IS_LARGE_TABLET_TOKEN = new InjectionToken('Is large tablet', {
+    factory: () => {
+        const breakpointObserver = inject(BreakpointObserver);
+        return breakpointObserver.observe(`(max-width: ${ScreenBreakpoints.LARGE_TABLET}px)`).pipe(map(v => v.matches));
+    },
+});
+
 class StepComponent {
     constructor(defaultAppTheme, focusMonitor, destroyRef) {
         this.defaultAppTheme = defaultAppTheme;
@@ -11610,6 +11618,12 @@ class StepComponent {
          * @memberof StepComponent
          */
         this.mobileMode = false;
+        /**
+         * Input property indicating whether the component is in large tablet mode.
+         *
+         * @memberof StepComponent
+         */
+        this.largeTabletMode = false;
         /**
          * Input property indicating whether the final icon should be displayed.
          *
@@ -11654,12 +11668,20 @@ class StepComponent {
          * @memberof StepComponent
          */
         this.alwaysShowIcon = false;
+        /**
+         * A string representing the step variant.
+         * This attribute is used to indicate the variant that should be used.
+         * @type {string}
+         * @memberof StepComponent
+         */
+        this.stepVariant = 'primary';
         /**
          * Event emitted when the step was clicked.
          * @type {number}
          * @memberof StepComponent
          */
         this.stepSelected = new EventEmitter();
+        this.TooltipPositionType = TooltipPositionType;
         this.keyboardFocused = signal(false);
         if (defaultAppTheme) {
             this.applicationTheme = defaultAppTheme;
@@ -11703,11 +11725,11 @@ class StepComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected", applicationTheme: "applicationTheme", position: "position", htmlDescription: "htmlDescription", boldLabel: "boldLabel", descriptionTpl: "descriptionTpl", labelTooltip: "labelTooltip", alwaysShowIcon: "alwaysShowIcon", context: "context" }, outputs: { stepSelected: "stepSelected" }, viewQueries: [{ propertyName: "stepElement", first: true, predicate: ["step"], descendants: true }], ngImport: i0, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"disabled? -1 : 0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"disabled ? -1 : 0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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}.flex-center,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StepComponent, selector: "ui-step", inputs: { label: "label", isVisited: "isVisited", submitted: "submitted", icon: "icon", index: "index", selected: "selected", isLast: "isLast", selectedIndex: "selectedIndex", disabled: "disabled", prevStepIsVisited: "prevStepIsVisited", mobileMode: "mobileMode", largeTabletMode: "largeTabletMode", finalIcon: "finalIcon", showIconWhenSelected: "showIconWhenSelected", applicationTheme: "applicationTheme", position: "position", htmlDescription: "htmlDescription", boldLabel: "boldLabel", descriptionTpl: "descriptionTpl", labelTooltip: "labelTooltip", alwaysShowIcon: "alwaysShowIcon", context: "context", stepVariant: "stepVariant" }, outputs: { stepSelected: "stepSelected" }, viewQueries: [{ propertyName: "stepElement", first: true, predicate: ["step"], descendants: true }], ngImport: i0, template: "@if (!mobileMode) {\n  <ui-tooltip [message]=\"(stepVariant === 'secondary') && largeTabletMode ? label : ''\" [position]=\"TooltipPositionType.BOTTOM\">\n    <div\n      class=\"step-container\"\n      #step\n      [tabIndex]=\"disabled? -1 : 0\"\n      [ngClass]=\"{\n    'secondary-step-variant': stepVariant === 'secondary',\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n      [attr.theme]=\"applicationTheme\"\n      (keydown.enter)=\"onStepSelected(index)\"\n      (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n      (click)=\"onStepSelected(index)\"\n    >\n      <div class=\"step-icon\">\n        @if (index && stepVariant === 'primary') {\n          <div class=\"line\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n        }\n\n        <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n          <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n              <ui-icon\n                [size]=\"stepVariant ==='secondary' ? '16' : '24'\"\n                [name]=\"'Check'\"\n                [color]=\"(isVisited && index < selectedIndex) || stepVariant ==='secondary' ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"\n              ></ui-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n              <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              {{ index + 1 }}\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <ng-template #lastStep>\n          <img\n            *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n            [alt]=\"'step-finish-image'\"\n            [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n          >\n\n          <ng-template #stepIcon>\n            <div class=\"icon-wrapper\">\n              <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                       [color]=\"'white'\"></ui-icon>\n              <ng-template #stepIndex>\n                {{ index + 1 }}\n              </ng-template>\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n\n      <div class=\"steps-label\">\n        @if (label) {\n          <div\n            class=\"step-label\"\n            [ngClass]=\"{'step-bold-label': boldLabel}\"\n            [matTooltip]=\"labelTooltip ?? ''\">\n            {{ label }}\n          </div>\n        }\n\n        <div class=\"step-description-container\">\n          <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n            <div>{{ description.text }}</div>\n\n            <ui-icon\n              *ngIf=\"description.iconName\"\n              [name]=\"description.iconName\"\n              [size]=\"'24'\"\n              [matTooltip]=\"description.iconTooltip ?? ''\"\n            ></ui-icon>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"descriptionTpl\"\n          [ngTemplateOutlet]=\"descriptionTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"\n        ></ng-container>\n      </div>\n    </div>\n  </ui-tooltip>\n\n} @else {\n  <div\n    class=\"mobile-step-container\"\n     #step\n     [tabIndex]=\"disabled ? -1 : 0\"\n     [ngClass]=\"{\n      'secondary-step-variant': stepVariant === 'secondary',\n      'active': selected,\n      'disabled': disabled,\n      'visited': isVisited,\n      'keyboard-focused': keyboardFocused()\n       }\"\n     (keydown)=\"onKeydown($event)\"\n     (click)=\"onStepSelected(index)\"\n     [attr.theme]=\"applicationTheme\"\n     role=\"tab\"\n     [attr.aria-selected]=\"selected\"\n     [attr.aria-disabled]=\"disabled\"\n     [attr.aria-label]=\"label\"\n     [attr.aria-controls]=\"index\"\n     [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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}.flex-center,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-container.secondary-step-variant{flex-direction:row;align-items:center;padding:5px 16px 5px 12px;gap:4px}@media (max-width: 1280px){.step-container.secondary-step-variant{padding:5px 9.5px 5px 10px}}.step-container.secondary-step-variant.visited-next:hover .step-icon,.step-container.secondary-step-variant.visited-next:focus .step-icon,.step-container.secondary-step-variant.visited-next:active .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.visited-prev:hover .step-icon,.step-container.secondary-step-variant.visited-prev:focus .step-icon,.step-container.secondary-step-variant.visited-prev:active .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.active .step-icon,.step-container.secondary-step-variant.visited-prev .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.active{background-color:#ffe6fa;border-radius:999px}.step-container.secondary-step-variant.active .step-label{border-color:transparent;background-color:transparent;font-weight:400!important;color:#242424!important;text-shadow:none!important}.step-container.secondary-step-variant:hover{background-color:#fff2fc;border-radius:999px}.step-container.secondary-step-variant .step-icon{width:32px;height:32px;min-width:32px;min-height:32px;border-color:transparent;background-color:transparent;border-width:0;margin:0}.step-container.secondary-step-variant .step-icon .icon-wrapper{width:20px;height:20px;font-size:12px;background:#919191;color:#fff}.step-container.secondary-step-variant .step-icon img{width:25px}@media (max-width: 1280px){.step-container.secondary-step-variant .steps-label{display:none}}.step-container.secondary-step-variant .steps-label .step-label{color:#666}.step-container.secondary-step-variant .steps-label .step-description-container{display:none}.mobile-step-container.secondary-step-variant.active .step .label{color:#242424}.mobile-step-container.secondary-step-variant .step .icon{height:23px;font-size:12px;font-weight:400;margin-right:12px;background:#919191;color:#fff}.mobile-step-container.secondary-step-variant .step .label{color:#666;margin-top:.1rem;opacity:1}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\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: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "directive", type: i3.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TooltipComponent, selector: "ui-tooltip", inputs: ["position", "disabled", "message", "applicationTheme", "labelForDefinition", "definitionTooltipSize", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!mobileMode) {\n  <div\n    class=\"step-container\"\n    #step\n    [tabIndex]=\"disabled? -1 : 0\"\n    [ngClass]=\"{\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n    [attr.theme]=\"applicationTheme\"\n    (keydown.enter)=\"onStepSelected(index)\"\n    (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n    (click)=\"onStepSelected(index)\"\n  >\n    <div class=\"step-icon\">\n      <div class=\"line\" *ngIf=\"index\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n      <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n        <ng-container [ngSwitch]=\"true\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"'Check'\"\n                     [color]=\"isVisited && index < selectedIndex ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n            <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </ng-container>\n      </div>\n\n      <ng-template #lastStep>\n        <img\n          *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n          [alt]=\"'step-finish-image'\"\n          [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon-wrapper\">\n            <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                     [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n    </div>\n\n    <div class=\"steps-label\">\n      <div class=\"step-label\" [ngClass]=\"{'step-bold-label': boldLabel}\" *ngIf=\"label\"\n           [matTooltip]=\"labelTooltip ?? ''\">\n        {{ label }}\n      </div>\n\n      <div class=\"step-description-container\">\n        <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n          <div>{{ description.text }}</div>\n          <ui-icon *ngIf=\"description.iconName\" [name]=\"description.iconName\" [size]=\"'24'\"\n                   [matTooltip]=\"description.iconTooltip ?? ''\"></ui-icon>\n        </div>\n      </div>\n\n      <ng-container *ngIf=\"descriptionTpl\" [ngTemplateOutlet]=\"descriptionTpl\"\n                    [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"></ng-container>\n    </div>\n\n  </div>\n\n} @else {\n  <div class=\"mobile-step-container\"\n       #step\n       [tabIndex]=\"disabled ? -1 : 0\"\n       [ngClass]=\"{ 'active': selected, 'disabled': disabled, 'visited': isVisited, 'keyboard-focused': keyboardFocused() }\"\n       (keydown)=\"onKeydown($event)\"\n       (click)=\"onStepSelected(index)\"\n       [attr.theme]=\"applicationTheme\"\n       role=\"tab\"\n       [attr.aria-selected]=\"selected\"\n       [attr.aria-disabled]=\"disabled\"\n       [attr.aria-label]=\"label\"\n       [attr.aria-controls]=\"index\"\n       [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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}.flex-center,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\n"] }]
+            args: [{ selector: 'ui-step', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!mobileMode) {\n  <ui-tooltip [message]=\"(stepVariant === 'secondary') && largeTabletMode ? label : ''\" [position]=\"TooltipPositionType.BOTTOM\">\n    <div\n      class=\"step-container\"\n      #step\n      [tabIndex]=\"disabled? -1 : 0\"\n      [ngClass]=\"{\n    'secondary-step-variant': stepVariant === 'secondary',\n    'visited-next': isVisited && index > selectedIndex,\n    'visited-prev': isVisited && index < selectedIndex,\n    'active': selected,\n    'last-step': finalIcon && hasLastStepDefaultIcon && !alwaysShowIcon,\n    'disabled': disabled,\n    'vertical': position === 'vertical',\n    'keyboard-focused': keyboardFocused()\n  }\"\n      [attr.theme]=\"applicationTheme\"\n      (keydown.enter)=\"onStepSelected(index)\"\n      (keydown.space)=\"$event.preventDefault();onStepSelected(index)\"\n      (click)=\"onStepSelected(index)\"\n    >\n      <div class=\"step-icon\">\n        @if (index && stepVariant === 'primary') {\n          <div class=\"line\" [ngClass]=\"{ visited: prevStepIsVisited }\"></div>\n        }\n\n        <div class=\"icon-wrapper\" *ngIf=\"!finalIcon; else lastStep\">\n          <ng-container [ngSwitch]=\"true\">\n            <ng-container *ngSwitchCase=\"isVisited && !selected && !alwaysShowIcon\">\n              <ui-icon\n                [size]=\"stepVariant ==='secondary' ? '16' : '24'\"\n                [name]=\"'Check'\"\n                [color]=\"(isVisited && index < selectedIndex) || stepVariant ==='secondary' ? 'white' : applicationTheme === 'classic' ? 'petrol' : 'rebrand-black'\"\n              ></ui-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchCase=\"(selected && !!icon) || alwaysShowIcon\">\n              <ui-icon [size]=\"'24'\" [name]=\"icon!\" [color]=\"isLast && !selected ? 'rebrand-black' : 'white'\"></ui-icon>\n            </ng-container>\n\n            <ng-container *ngSwitchDefault>\n              {{ index + 1 }}\n            </ng-container>\n          </ng-container>\n        </div>\n\n        <ng-template #lastStep>\n          <img\n            *ngIf=\"hasLastStepDefaultIcon && !alwaysShowIcon; else stepIcon\"\n            [alt]=\"'step-finish-image'\"\n            [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n          >\n\n          <ng-template #stepIcon>\n            <div class=\"icon-wrapper\">\n              <ui-icon *ngIf=\"icon || (icon && alwaysShowIcon); else stepIndex\" [size]=\"'24'\" [name]=\"icon\"\n                       [color]=\"'white'\"></ui-icon>\n              <ng-template #stepIndex>\n                {{ index + 1 }}\n              </ng-template>\n            </div>\n          </ng-template>\n        </ng-template>\n      </div>\n\n      <div class=\"steps-label\">\n        @if (label) {\n          <div\n            class=\"step-label\"\n            [ngClass]=\"{'step-bold-label': boldLabel}\"\n            [matTooltip]=\"labelTooltip ?? ''\">\n            {{ label }}\n          </div>\n        }\n\n        <div class=\"step-description-container\">\n          <div *ngFor=\"let description of htmlDescription\" class=\"step-description\">\n            <div>{{ description.text }}</div>\n\n            <ui-icon\n              *ngIf=\"description.iconName\"\n              [name]=\"description.iconName\"\n              [size]=\"'24'\"\n              [matTooltip]=\"description.iconTooltip ?? ''\"\n            ></ui-icon>\n          </div>\n        </div>\n\n        <ng-container\n          *ngIf=\"descriptionTpl\"\n          [ngTemplateOutlet]=\"descriptionTpl\"\n          [ngTemplateOutletContext]=\"{ $implicit: context, label, isVisited, submitted, index, selected, isLast, selectedIndex, disabled, prevStepIsVisited, mobileMode, finalIcon, showIconWhenSelected, position }\"\n        ></ng-container>\n      </div>\n    </div>\n  </ui-tooltip>\n\n} @else {\n  <div\n    class=\"mobile-step-container\"\n     #step\n     [tabIndex]=\"disabled ? -1 : 0\"\n     [ngClass]=\"{\n      'secondary-step-variant': stepVariant === 'secondary',\n      'active': selected,\n      'disabled': disabled,\n      'visited': isVisited,\n      'keyboard-focused': keyboardFocused()\n       }\"\n     (keydown)=\"onKeydown($event)\"\n     (click)=\"onStepSelected(index)\"\n     [attr.theme]=\"applicationTheme\"\n     role=\"tab\"\n     [attr.aria-selected]=\"selected\"\n     [attr.aria-disabled]=\"disabled\"\n     [attr.aria-label]=\"label\"\n     [attr.aria-controls]=\"index\"\n     [id]=\"'step-'+ index\"\n  >\n    <div class=\"step\">\n      <ng-container *ngIf=\"!finalIcon; else lastStep\">\n        <div [ngSwitch]=\"true\" class=\"icon\">\n          <ng-container *ngSwitchCase=\"isVisited && !selected\">\n            <ui-icon [size]=\"'16'\" [name]=\"'Check'\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchCase=\"selected && !!icon\">\n            <ui-icon [size]=\"'16'\" [name]=\"icon!\" [color]=\"'white'\"></ui-icon>\n          </ng-container>\n\n          <ng-container *ngSwitchDefault>\n            {{ index + 1 }}\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-template #lastStep>\n        <img *ngIf=\"hasLastStepDefaultIcon; else stepIcon\"\n             [alt]=\"'step-finish-image'\"\n             [width]=\"24\"\n             [height]=\"24\"\n             [attr.src]=\"applicationTheme === 'classic' ? '/images/step-finish.svg' : isVisited ? '/images/rebrand-last-step-icon-light.svg' : '/images/rebrand-last-step-icon-black.svg'\"\n        >\n\n        <ng-template #stepIcon>\n          <div class=\"icon\">\n            <ui-icon *ngIf=\"icon; else stepIndex\" [size]=\"'24'\" [name]=\"icon\" [color]=\"'white'\"></ui-icon>\n            <ng-template #stepIndex>\n              {{ index + 1 }}\n            </ng-template>\n          </div>\n        </ng-template>\n      </ng-template>\n      <span class=\"label\">{{ label }}</span>\n    </div>\n  </div>\n}\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}.flex-center,.mobile-step-container .step .icon,.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper,.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon,.step-container .icon-wrapper,.step-container .step-icon,.step-container{display:flex;align-items:center;justify-content:center}.step-container{flex-direction:column;cursor:pointer;border-radius:8px;padding:24px;gap:16px;max-width:200px;width:100%;position:relative;letter-spacing:1px}.step-container.keyboard-focused{position:relative;outline:unset}.step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;z-index:3;animation:focus-ring-animation-main .4s forwards}.step-container .steps-label{width:100%;display:flex;flex-direction:column;justify-content:space-between;gap:8px}.step-container .steps-label .step-description-container{flex-direction:column}.step-container.vertical{flex-direction:row;padding:24px 12px;width:100%;max-width:1024px}.step-container.vertical .step-icon{margin:0 12px 0 0}.step-container.vertical .step-icon .line{top:0;left:34px;border:unset;border-right:2px solid #C8D7DE;height:calc(50% - 29px);width:1px}.step-container.vertical .step-label{width:fit-content;text-align:start;-webkit-line-clamp:3}.step-container.vertical .steps-label{flex-direction:row}.step-container.vertical .steps-label .step-description{justify-content:start}@media (max-width: 1024px){.step-container.vertical .steps-label{align-items:center}.step-container.vertical .steps-label .step-description-container{flex-direction:column;justify-content:flex-end}}@media (max-width: 600px){.step-container.vertical .steps-label{flex-direction:column;align-items:flex-start}.step-container.vertical .steps-label .step-description-container{display:block}}.step-container.disabled{pointer-events:none;cursor:default}.step-container:hover{background:#ededed}.step-container.visited-next:hover .step-icon,.step-container.visited-next:focus .step-icon,.step-container.visited-next:active .step-icon{border-color:#276678}.step-container.active .step-icon,.step-container.visited-prev .step-icon{border-color:#276678;background-color:#fff;color:#fff}.step-container.active .step-icon .icon-wrapper,.step-container.visited-prev .step-icon .icon-wrapper{background:#276678}.step-container.active .step-label{color:#276678;line-height:24px;text-shadow:0 0 1px #276678}.step-container.visited-prev:hover .step-icon,.step-container.visited-prev:focus .step-icon,.step-container.visited-prev:active .step-icon{background:#276678}.step-container.last-step .step-icon{border:unset;background:transparent}.step-container.last-step .step-label{font-weight:400}.step-container .step-label{color:#276678;line-height:24px;font-size:16px;font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;width:100%;text-align:center}.step-container .step-icon{width:44px;height:44px;min-width:44px;min-height:44px;border:3px solid #C8D7DE;border-radius:100%;color:#276678;font-size:14px;font-weight:700;line-height:17px;background:transparent;margin:0 24px}.step-container .step-icon .line{position:absolute;top:45px;left:-8px;border-top:2px solid #C8D7DE;width:calc(50% - 29px);right:56px}.step-container .step-icon .line.visited{border-color:#276678!important}.step-container .icon-wrapper{width:28px;height:28px;border-radius:100%;background:#c8d7de}.step-container[theme=dark],.step-container[theme=light]{gap:8px}.step-container[theme=dark]:hover,.step-container[theme=light]:hover{background:#fff2fc}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{font-size:14px}.step-container[theme=dark]:active,.step-container[theme=light]:active{background:#ffe6fa}.step-container[theme=dark].visited-next:hover .step-icon,.step-container[theme=dark].visited-next:focus .step-icon,.step-container[theme=dark].visited-next:active .step-icon,.step-container[theme=light].visited-next:hover .step-icon,.step-container[theme=light].visited-next:focus .step-icon,.step-container[theme=light].visited-next:active .step-icon{border-color:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=dark].visited-prev .step-icon,.step-container[theme=light].active .step-icon,.step-container[theme=light].visited-prev .step-icon{border-color:#242424;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=dark].visited-prev .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper,.step-container[theme=light].visited-prev .step-icon .icon-wrapper{background:#242424}.step-container[theme=dark].active .step-icon,.step-container[theme=light].active .step-icon{border-color:#d410aa;background-color:#fff;color:#fff}.step-container[theme=dark].active .step-icon .icon-wrapper,.step-container[theme=light].active .step-icon .icon-wrapper{background:#d410aa}.step-container[theme=dark].active .step-label,.step-container[theme=light].active .step-label{color:#d410aa;text-shadow:0 0 1px #D410AA}.step-container[theme=dark].visited-prev:hover .step-icon,.step-container[theme=dark].visited-prev:focus .step-icon,.step-container[theme=dark].visited-prev:active .step-icon,.step-container[theme=light].visited-prev:hover .step-icon,.step-container[theme=light].visited-prev:focus .step-icon,.step-container[theme=light].visited-prev:active .step-icon{background:#242424}.step-container[theme=dark].last-step .step-icon,.step-container[theme=light].last-step .step-icon{border:unset;background:transparent}.step-container[theme=dark].last-step .step-label,.step-container[theme=light].last-step .step-label{font-weight:400}.step-container[theme=dark] .step-label,.step-container[theme=light] .step-label{color:#242424}.step-container[theme=dark] .step-icon,.step-container[theme=light] .step-icon{border:3px solid #D3D3D3;color:#666}.step-container[theme=dark] .step-icon .line,.step-container[theme=light] .step-icon .line{border-top:2px solid;border-color:#d3d3d3}.step-container[theme=dark] .step-icon .line.visited,.step-container[theme=light] .step-icon .line.visited{border-color:#242424!important}.step-container[theme=dark] .icon-wrapper,.step-container[theme=light] .icon-wrapper{background:#d3d3d3}.mobile-step-container.keyboard-focused{position:relative;outline:unset}.mobile-step-container.keyboard-focused:after{content:\"\";position:absolute;top:0;width:100%;height:100%;left:0;outline:2px solid #242424;border-radius:8px;animation:focus-ring-animation-main .4s forwards}.mobile-step-container .step{cursor:pointer;padding:16px;display:flex;flex-direction:row}.mobile-step-container .step img{margin-right:16px}.mobile-step-container .step .icon{margin-right:16px;min-width:24px;height:24px;background:#c8d7de;border-radius:50%;color:#276678;font-weight:700}.mobile-step-container .step .label{font-size:14px;line-height:20px}.mobile-step-container.active .step .label{line-height:24px;font-weight:700}.mobile-step-container.active .step .icon,.mobile-step-container.visited .step .icon{background:#276678;color:#fff}.mobile-step-container.disabled{pointer-events:none}.mobile-step-container.disabled .step .label{opacity:.5}.mobile-step-container[theme=dark] .step .icon,.mobile-step-container[theme=light] .step .icon{background:#d3d3d3;color:#666}.mobile-step-container[theme=dark].visited .step .icon,.mobile-step-container[theme=light].visited .step .icon{background:#242424;color:#fff}.mobile-step-container[theme=dark].active .step .icon,.mobile-step-container[theme=light].active .step .icon{background:#d410aa;color:#fff}.step-container.secondary-step-variant{flex-direction:row;align-items:center;padding:5px 16px 5px 12px;gap:4px}@media (max-width: 1280px){.step-container.secondary-step-variant{padding:5px 9.5px 5px 10px}}.step-container.secondary-step-variant.visited-next:hover .step-icon,.step-container.secondary-step-variant.visited-next:focus .step-icon,.step-container.secondary-step-variant.visited-next:active .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.visited-prev:hover .step-icon,.step-container.secondary-step-variant.visited-prev:focus .step-icon,.step-container.secondary-step-variant.visited-prev:active .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.active .step-icon,.step-container.secondary-step-variant.visited-prev .step-icon{border-color:transparent;background-color:transparent}.step-container.secondary-step-variant.active{background-color:#ffe6fa;border-radius:999px}.step-container.secondary-step-variant.active .step-label{border-color:transparent;background-color:transparent;font-weight:400!important;color:#242424!important;text-shadow:none!important}.step-container.secondary-step-variant:hover{background-color:#fff2fc;border-radius:999px}.step-container.secondary-step-variant .step-icon{width:32px;height:32px;min-width:32px;min-height:32px;border-color:transparent;background-color:transparent;border-width:0;margin:0}.step-container.secondary-step-variant .step-icon .icon-wrapper{width:20px;height:20px;font-size:12px;background:#919191;color:#fff}.step-container.secondary-step-variant .step-icon img{width:25px}@media (max-width: 1280px){.step-container.secondary-step-variant .steps-label{display:none}}.step-container.secondary-step-variant .steps-label .step-label{color:#666}.step-container.secondary-step-variant .steps-label .step-description-container{display:none}.mobile-step-container.secondary-step-variant.active .step .label{color:#242424}.mobile-step-container.secondary-step-variant .step .icon{height:23px;font-size:12px;font-weight:400;margin-right:12px;background:#919191;color:#fff}.mobile-step-container.secondary-step-variant .step .label{color:#666;margin-top:.1rem;opacity:1}.step-bold-label{font-weight:700!important;text-shadow:none!important}.step-description,.step-description-container{display:flex;justify-content:center;align-items:center}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -11735,6 +11757,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], mobileMode: [{
                 type: Input
+            }], largeTabletMode: [{
+                type: Input
             }], finalIcon: [{
                 type: Input
             }], showIconWhenSelected: [{
@@ -11755,6 +11779,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], context: [{
                 type: Input
+            }], stepVariant: [{
+                type: Input
             }], stepSelected: [{
                 type: Output
             }], stepElement: [{
@@ -11975,9 +12001,10 @@ class StepperComponent {
     set isOpen(value) {
         this.isOpened = value;
     }
-    constructor(defaultAppTheme, isMobile$, focusMonitor, destroyRef) {
+    constructor(defaultAppTheme, isMobile$, isLargeTablet$, focusMonitor, destroyRef) {
         this.defaultAppTheme = defaultAppTheme;
         this.isMobile$ = isMobile$;
+        this.isLargeTablet$ = isLargeTablet$;
         this.focusMonitor = focusMonitor;
         this.destroyRef = destroyRef;
         /**
@@ -12009,6 +12036,13 @@ class StepperComponent {
          * @memberof StepperComponent
          */
         this.ariaRequired = false;
+        /**
+         * A string representing the stepper variant.
+         * This attribute is used to indicate the variant that should be used.
+         * @type {string}
+         * @memberof StepperComponent
+         */
+        this.stepperVariant = 'primary';
         this.selectionChange = new EventEmitter();
         this.isOpened = false;
         this.firstStepAutoSelect = true;
@@ -12055,12 +12089,12 @@ class StepperComponent {
             this.focusMonitor.focusVia(selectedElement, 'keyboard');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: StepperComponent, selector: "ui-stepper", inputs: { setFirstStepAutoSelect: ["firstStepAutoSelect", "setFirstStepAutoSelect"], steps: "steps", setSelectedIndex: ["selectedIndex", "setSelectedIndex"], lastStepFinalIcon: "lastStepFinalIcon", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "stepperElement", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\"\n       *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); else mobile\">\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\"\n           [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div class=\"stepper\"\n           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n           [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [total]=\"itemSteps.length\"></ui-radial-progress>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n          <div class=\"next-step\">\n            <span\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative;z-index:2}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .step-list{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "finalIcon", "showIconWhenSelected", "applicationTheme", "position", "htmlDescription", "boldLabel", "descriptionTpl", "labelTooltip", "alwaysShowIcon", "context"], outputs: ["stepSelected"] }, { kind: "component", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "variant", "icon", "buttonTooltip", "companyColor", "applicationTheme"], outputs: ["buttonClicked"] }, { kind: "directive", type: StepLineElementDirective, selector: "[stepLineElement]", inputs: ["stepLineElement", "position"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepperComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: IS_MOBILE_TOKEN }, { token: IS_LARGE_TABLET_TOKEN }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: StepperComponent, selector: "ui-stepper", inputs: { setFirstStepAutoSelect: ["firstStepAutoSelect", "setFirstStepAutoSelect"], steps: "steps", setSelectedIndex: ["selectedIndex", "setSelectedIndex"], lastStepFinalIcon: "lastStepFinalIcon", applicationTheme: "applicationTheme", ariaLabel: "ariaLabel", position: "position", ariaRequired: "ariaRequired", stepperVariant: "stepperVariant" }, outputs: { selectionChange: "selectionChange" }, viewQueries: [{ propertyName: "stepperElement", first: true, predicate: ["stepper"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n\n  <div\n    *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); else mobile\"\n    class=\"stepper-wrapper\"\n    role=\"tablist\"\n    [ngClass]=\"[position, stepperVariant === 'secondary' ? 'secondary-variant' : '']\"\n    [attr.theme]=\"applicationTheme\"\n  >\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n          [stepVariant]=\"stepperVariant\"\n          [largeTabletMode]=\"isLargeTablet$ | async\"\n        ></ui-step>\n      </div>\n\n      @if (!isLast && stepperVariant === 'primary') {\n        <div class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n          <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n        </div>\n      }\n\n      @if (!isLast && stepperVariant === 'secondary') {\n        <div class=\"separator-arrow\">\n          <ui-icon class=\"separator-icon\" name=\"Arrow-chevron-right-in-line\" size=\"24\" color=\"gray\"></ui-icon>\n        </div>\n      }\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div\n        class=\"stepper\"\n        [tabIndex]=\"0\"\n        #stepper\n        [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n        (keydown.enter)=\"showStepsToggle()\"\n        (keydown.space)=\"showStepsToggle()\"\n        [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [total]=\"itemSteps.length\"></ui-radial-progress>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n\n          <div class=\"next-step\">\n            <span\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon \n          data-testid=\"ui-stepper-icon\"\n          [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n              [stepVariant]=\"stepperVariant\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative;z-index:2}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.stepper-wrapper .separator-arrow{display:flex;align-items:center;justify-content:center;z-index:2;padding:0 10px}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.secondary-variant{justify-content:center}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .step-list{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\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: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: StepComponent, selector: "ui-step", inputs: ["label", "isVisited", "submitted", "icon", "index", "selected", "isLast", "selectedIndex", "disabled", "prevStepIsVisited", "mobileMode", "largeTabletMode", "finalIcon", "showIconWhenSelected", "applicationTheme", "position", "htmlDescription", "boldLabel", "descriptionTpl", "labelTooltip", "alwaysShowIcon", "context", "stepVariant"], outputs: ["stepSelected"] }, { kind: "component", type: RadialProgressComponent, selector: "ui-radial-progress", inputs: ["size", "value", "total", "variant", "icon", "buttonTooltip", "companyColor", "applicationTheme"], outputs: ["buttonClicked"] }, { kind: "directive", type: StepLineElementDirective, selector: "[stepLineElement]", inputs: ["stepLineElement", "position"] }, { 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: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n  <div class=\"stepper-wrapper\" role=\"tablist\" [ngClass]=\"position\" [attr.theme]=\"applicationTheme\"\n       *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); else mobile\">\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n        ></ui-step>\n      </div>\n      <div *ngIf=\"!isLast\" class=\"separator-line\"\n           [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n        <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n      </div>\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div class=\"stepper\"\n           [tabIndex]=\"0\"\n           #stepper\n           [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n           (keydown.enter)=\"showStepsToggle()\"\n           (keydown.space)=\"showStepsToggle()\"\n           [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [total]=\"itemSteps.length\"></ui-radial-progress>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n          <div class=\"next-step\">\n            <span\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative;z-index:2}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .step-list{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\n"] }]
+            args: [{ selector: 'ui-stepper', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div style=\"position: absolute; left: -99999px;\" [attr.aria-live]=\"'polite'\">\n     <span>\n       {{ itemSteps[selectedIndex]?.label ?? '' }}\n       {{ (translationContext + 'SELECTED_OF' | uiTranslate : { selected: (selectedIndex ?? 0) + 1, total: itemSteps?.length ?? 0 }) | async }}\n       {{ itemSteps[selectedIndex]?.isVisited && (itemSteps.length <= (selectedIndex ?? 0) + 1 && itemSteps[selectedIndex + 1]?.isVisited)\n       ? (translationContext + 'COMPLETED' | uiTranslate | async)\n       : (translationContext + 'INCOMPLETE' | uiTranslate | async) }}\n     </span>\n  </div>\n\n  <div\n    *ngIf=\"(position === 'horizontal' && !(isMobile$ | async)) || (position === 'vertical'); else mobile\"\n    class=\"stepper-wrapper\"\n    role=\"tablist\"\n    [ngClass]=\"[position, stepperVariant === 'secondary' ? 'secondary-variant' : '']\"\n    [attr.theme]=\"applicationTheme\"\n  >\n    <ng-container *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n      <div class=\"step\" #stepElement>\n        <ui-step\n          [label]=\"step.label\"\n          [isVisited]=\"step.isVisited!\"\n          [icon]=\"step.iconName\"\n          [index]=\"i\"\n          [selected]=\"i === selectedIndex\"\n          [selectedIndex]=\"selectedIndex\"\n          [isLast]=\"isLast\"\n          [disabled]=\"step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)\"\n          [prevStepIsVisited]=\"itemSteps[i - 1]?.isVisited && step.isVisited\"\n          [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n          [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n          (stepSelected)=\"onSelect($event, step)\"\n          [applicationTheme]=\"applicationTheme\"\n          role=\"tab\"\n          [attr.aria-controls]=\"'step-panel-' + i\"\n          [attr.aria-selected]=\"i === selectedIndex\"\n          [attr.aria-label]=\"step.label\"\n          [attr.tabindex]=\"(step.disabled ?? (i > selectedIndex + 1 && !step.isVisited)) ? -1 : 0\"\n          [htmlDescription]=\"step.htmlDescription ?? []\"\n          [boldLabel]=\"!!step.boldLabel\"\n          [position]=\"position\"\n          [descriptionTpl]=\"step.descriptionTpl\"\n          [labelTooltip]=\"step.labelTooltip\"\n          [alwaysShowIcon]=\"!!step.alwaysShowIcon\"\n          [context]=\"step.context\"\n          [stepVariant]=\"stepperVariant\"\n          [largeTabletMode]=\"isLargeTablet$ | async\"\n        ></ui-step>\n      </div>\n\n      @if (!isLast && stepperVariant === 'primary') {\n        <div class=\"separator-line\" [ngClass]=\"{ visited: step.isVisited && !!this.itemSteps[i + 1]?.isVisited }\">\n          <div [stepLineElement]=\"stepElement\" [position]=\"position\" class=\"line\"></div>\n        </div>\n      }\n\n      @if (!isLast && stepperVariant === 'secondary') {\n        <div class=\"separator-arrow\">\n          <ui-icon class=\"separator-icon\" name=\"Arrow-chevron-right-in-line\" size=\"24\" color=\"gray\"></ui-icon>\n        </div>\n      }\n    </ng-container>\n  </div>\n\n  <ng-template #mobile>\n    <div class=\"mobile-stepper-wrapper\">\n      <div\n        class=\"stepper\"\n        [tabIndex]=\"0\"\n        #stepper\n        [ngClass]=\"{ 'keyboard-focused': keyboardFocused() }\"\n        (keydown.enter)=\"showStepsToggle()\"\n        (keydown.space)=\"showStepsToggle()\"\n        [attr.aria-expanded]=\"isOpen\"\n      >\n        <div class=\"progress-step\" [tabindex]=\"-1\" [attr.aria-hidden]=\"true\">\n          <ui-radial-progress [applicationTheme]=\"applicationTheme\" [value]=\"selectedIndex + 1\"\n                              [total]=\"itemSteps.length\"></ui-radial-progress>\n        </div>\n\n        <div class=\"step-info\">\n          <div class=\"current-step\">\n            <span>{{ selectedIndex + 1 }}/{{ itemSteps.length }} </span>\n            <span>{{ itemSteps[selectedIndex].label }}</span>\n          </div>\n\n          <div class=\"next-step\">\n            <span\n              *ngIf=\"itemSteps.length !== selectedIndex + 1 else finalStep\">{{ (('COMMON.NEXT') | uiTranslate | async) + ':' }} {{ itemSteps[selectedIndex + 1].label }}</span>\n            <ng-template #finalStep>\n              <span>{{ (translationContext + 'FINAL_STEP') | uiTranslate | async }}</span>\n            </ng-template>\n          </div>\n        </div>\n\n        <div class=\"open-steps\" (click)=\"showStepsToggle()\" [ngClass]=\"{ opened: isOpen }\">\n          <ui-icon \n          data-testid=\"ui-stepper-icon\"\n          [applicationTheme]=\"applicationTheme\" [size]=\"'24'\"\n                   [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-in-line'\"></ui-icon>\n        </div>\n      </div>\n\n      <div *ngIf=\"isOpen\">\n        <div class=\"step-list\">\n          <div class=\"step\" *ngFor=\"let step of itemSteps; index as i, last as isLast\">\n            <ui-step\n              [label]=\"step.label\"\n              [isVisited]=\"step.isVisited!\"\n              [icon]=\"step.iconName\"\n              [index]=\"i\"\n              [selected]=\"i === selectedIndex\"\n              [selectedIndex]=\"selectedIndex\"\n              [isLast]=\"isLast\"\n              [disabled]=\"step.disabled ?? ( i > selectedIndex + 1 && !step.isVisited)\"\n              [mobileMode]=\"true\"\n              [finalIcon]=\"isLast ? lastStepFinalIcon : false\"\n              [showIconWhenSelected]=\"!!step.showIconWhenSelected\"\n              (stepSelected)=\"onSelect($event, step)\"\n              [applicationTheme]=\"applicationTheme\"\n              [attr.aria-label]=\"ariaLabel + '--' + step.label\"\n              [stepVariant]=\"stepperVariant\"\n            ></ui-step>\n          </div>\n        </div>\n        <div class=\"overlay\" (click)=\"onCloseStepList()\"></div>\n      </div>\n    </div>\n  </ng-template>\n\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}@media (max-width: 1024px){:host{width:100%}}@media (max-width: 600px){:host{width:fit-content}}.row,.mobile-stepper-wrapper .stepper,.stepper-wrapper .step,.stepper-wrapper{display:flex;flex-direction:row}.column,.mobile-stepper-wrapper .step-list,.mobile-stepper-wrapper .stepper .step-info{display:flex;flex-direction:column}.stepper-wrapper{width:100%}.stepper-wrapper .step{max-width:200px}.stepper-wrapper .separator-line{display:flex;flex:1 1 auto;position:relative;z-index:2}.stepper-wrapper .separator-line.visited .line{border-top:2px solid #276678}.stepper-wrapper .separator-line .line{position:absolute;top:45px;border-top:2px solid #C8D7DE;width:100%;left:0}.stepper-wrapper .separator-arrow{display:flex;align-items:center;justify-content:center;z-index:2;padding:0 10px}.stepper-wrapper.vertical{flex-direction:column}.stepper-wrapper.vertical .step{max-width:1024px;width:100%}.stepper-wrapper.vertical .step ui-step{width:100%}.stepper-wrapper.vertical .separator-line.visited .line{border-right:2px solid #276678}.stepper-wrapper.vertical .separator-line .line{top:-15px;border-right:2px solid #C8D7DE;width:2px;left:34px}.stepper-wrapper[theme=dark] .separator-line.visited .line,.stepper-wrapper[theme=light] .separator-line.visited .line{border-top:2px solid #242424}.stepper-wrapper[theme=dark] .separator-line .line,.stepper-wrapper[theme=light] .separator-line .line{border-top:2px solid #D3D3D3}.stepper-wrapper[theme=dark].vertical .separator-line.visited .line,.stepper-wrapper[theme=light].vertical .separator-line.visited .line{border-right:2px solid #242424}.stepper-wrapper[theme=dark].vertical .separator-line .line,.stepper-wrapper[theme=light].vertical .separator-line .line{border-right:2px solid #D3D3D3}.secondary-variant{justify-content:center}.mobile-stepper-wrapper{width:100%;position:relative}.mobile-stepper-wrapper .stepper{padding:12px 16px;height:72px;border:1px solid #888888;background:#fff;border-radius:8px}.mobile-stepper-wrapper .stepper.keyboard-focused{outline:2px solid #242424;outline-offset:2px;border-radius:8px;border-color:#242424;animation:focus-ring-animation-main .4s forwards}.mobile-stepper-wrapper .stepper .step-info{width:100%}.mobile-stepper-wrapper .stepper .step-info .current-step{font-weight:700;font-size:16px;line-height:24px}.mobile-stepper-wrapper .stepper .step-info .next-step{margin-top:4px;font-size:14px;line-height:20px}.mobile-stepper-wrapper .stepper .step-info .current-step,.mobile-stepper-wrapper .stepper .step-info .next-step{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.mobile-stepper-wrapper .stepper .open-steps{cursor:pointer;display:flex;justify-content:center;align-items:center}.mobile-stepper-wrapper .stepper .open-steps.opened ::ng-deep ui-icon{transform:rotateX(-180deg)}.mobile-stepper-wrapper .stepper .progress-step{position:relative;width:40px;height:40px;margin-right:16px}.mobile-stepper-wrapper .step-list{position:absolute;width:100%;margin-top:4px;z-index:1;background:#fff;box-shadow:0 8px 24px 4px #00000014;border-bottom-right-radius:8px;border-bottom-left-radius:8px}.mobile-stepper-wrapper .overlay{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-1;background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -12069,6 +12103,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }] }, { type: i8$3.Observable, decorators: [{
                     type: Inject,
                     args: [IS_MOBILE_TOKEN]
+                }] }, { type: i8$3.Observable, decorators: [{
+                    type: Inject,
+                    args: [IS_LARGE_TABLET_TOKEN]
                 }] }, { type: i2$3.FocusMonitor }, { type: i0.DestroyRef }], propDecorators: { setFirstStepAutoSelect: [{
                 type: Input,
                 args: ['firstStepAutoSelect']
@@ -12087,6 +12124,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], ariaRequired: [{
                 type: Input
+            }], stepperVariant: [{
+                type: Input
             }], selectionChange: [{
                 type: Output
             }], stepperElement: [{
@@ -12096,14 +12135,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 class StepComponentModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, declarations: [StepComponent], imports: [CommonModule, IconComponentModule, MatTooltipModule], exports: [StepComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, declarations: [StepComponent], imports: [CommonModule, IconComponentModule, MatTooltipModule, TooltipComponentModule], exports: [StepComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, imports: [CommonModule, IconComponentModule, MatTooltipModule, TooltipComponentModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: StepComponentModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [StepComponent],
-                    imports: [CommonModule, IconComponentModule, MatTooltipModule],
+                    imports: [CommonModule, IconComponentModule, MatTooltipModule, TooltipComponentModule],
                     exports: [StepComponent],
                 }]
         }] });
@@ -13032,11 +13071,11 @@ class AutocompleteComponent {
         this.matAutocomplete._setScrollTop(this.matAutocomplete._keyManager.activeItemIndex * optionHeight);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i2.DomSanitizer }, { token: i1$2.NgControl, optional: true, self: true }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i2$3.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n              aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '': placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [tabIndex]=\"disabled ? -1 : 0\"\n        (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"suggestionsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\n                  [value]=\"suggested\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\n                  [value]=\"item\"\n                >\n                  <span>{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.items\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [class]=\"'selected-option'\"\n                  [value]=\"value\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                           [style.height]=\"'200px'\" class=\"virtual-scroll\">\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *cdkVirtualFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n\n                  @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n                    <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                      <div class=\"loading-container\">\n                        <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                      </div>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *cdkVirtualFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }                  }\n                }\n\n              </cdk-virtual-scroll-viewport>\n\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *ngFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              </ng-template>\n\n            </ng-template>\n\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              @if (isGrouped && filteredItemsList.length) {\n                @for (group of filteredItemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.filteredItems\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.filteredItems\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"filteredSuggestionList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredSuggestionList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #showItemListWithGroup>\n                <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n                              *ngIf=\"filteredItemsList.length && !isGrouped\">\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of filteredItemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              </ng-template>\n\n              @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n                <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                  <div class=\"loading-container\">\n                    <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                  </div>\n                </mat-option>\n              } @else if(inputValue) {\n                @if (allowAdd && !isAlreadyAdded) {\n                  <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                    <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n                    <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                  </mat-option>\n                } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n                  <mat-option [style.pointer-events]=\"'none'\">\n                    <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n                  </mat-option>\n                }\n              }\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint class=\"error\"\n                *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n        <div class=\"errors\"\n             *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", maxLength: "maxLength", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n              aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [maxLength]=\"maxLength\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '': placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [tabIndex]=\"disabled ? -1 : 0\"\n        (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"suggestionsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\n                  [value]=\"suggested\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\n                  [value]=\"item\"\n                >\n                  <span>{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.items\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [class]=\"'selected-option'\"\n                  [value]=\"value\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                           [style.height]=\"'200px'\" class=\"virtual-scroll\">\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *cdkVirtualFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n\n                  @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n                    <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                      <div class=\"loading-container\">\n                        <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                      </div>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *cdkVirtualFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }                  }\n                }\n\n              </cdk-virtual-scroll-viewport>\n\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *ngFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              </ng-template>\n\n            </ng-template>\n\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              @if (isGrouped && filteredItemsList.length) {\n                @for (group of filteredItemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.filteredItems\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.filteredItems\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"filteredSuggestionList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredSuggestionList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #showItemListWithGroup>\n                <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n                              *ngIf=\"filteredItemsList.length && !isGrouped\">\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of filteredItemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              </ng-template>\n\n              @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n                <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                  <div class=\"loading-container\">\n                    <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                  </div>\n                </mat-option>\n              } @else if(inputValue) {\n                @if (allowAdd && !isAlreadyAdded) {\n                  <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                    <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n                    <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                  </mat-option>\n                } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n                  <mat-option [style.pointer-events]=\"'none'\">\n                    <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n                  </mat-option>\n                }\n              }\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint class=\"error\"\n                *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n        <div class=\"errors\"\n             *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2$4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i2$4.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i12.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i12.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i12.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$1.SlicePipe, name: "slice" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: HasValidationErrorPipe, name: "hasValidationError" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n              aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '': placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [tabIndex]=\"disabled ? -1 : 0\"\n        (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"suggestionsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\n                  [value]=\"suggested\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\n                  [value]=\"item\"\n                >\n                  <span>{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.items\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [class]=\"'selected-option'\"\n                  [value]=\"value\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                           [style.height]=\"'200px'\" class=\"virtual-scroll\">\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *cdkVirtualFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n\n                  @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n                    <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                      <div class=\"loading-container\">\n                        <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                      </div>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *cdkVirtualFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }                  }\n                }\n\n              </cdk-virtual-scroll-viewport>\n\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *ngFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              </ng-template>\n\n            </ng-template>\n\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              @if (isGrouped && filteredItemsList.length) {\n                @for (group of filteredItemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.filteredItems\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.filteredItems\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"filteredSuggestionList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredSuggestionList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #showItemListWithGroup>\n                <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n                              *ngIf=\"filteredItemsList.length && !isGrouped\">\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of filteredItemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              </ng-template>\n\n              @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n                <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                  <div class=\"loading-container\">\n                    <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                  </div>\n                </mat-option>\n              } @else if(inputValue) {\n                @if (allowAdd && !isAlreadyAdded) {\n                  <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                    <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n                    <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                  </mat-option>\n                } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n                  <mat-option [style.pointer-events]=\"'none'\">\n                    <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n                  </mat-option>\n                }\n              }\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint class=\"error\"\n                *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n        <div class=\"errors\"\n             *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"] }]
+            args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"(safeErrors.length || (ngControl?.errors && ngControl?.touched ) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' ')) ) ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{ 'large-size': type === autocompleteType.LARGE, 'hide-bottom-content': !showBottomContent, 'keyboard-focused': keyboardFocused(), 'has-label': !!label }\"\n    >\n      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span style=\"position: absolute; left: -9999px\" *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n              aria-live=\"polite\">{{ (('SELECTED') | uiTranslate | async) + ' ' + inputValue }}</span>\n\n        <input\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [maxLength]=\"maxLength\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': this.value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"((translationContext + 'SELECTED') | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '': placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && this.value) ||\n            (!(inputValue && this.isInputFocus) && this.value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n            [style.display]=\"(isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)  ? 'none' : 'block'\"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{ (translationContext + 'SELECTED_AMOUNT' | uiTranslate : { numberSelected: (value | slice: overlapIndex).length }) | async }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\"\n                      [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"clearable && (type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) || (type !== autocompleteType.SINGLE && value && value.length > 1 && ((AutocompleteUtils.isPrimitive(value) && value.length) || (!AutocompleteUtils.isPrimitive(value) && (AutocompleteUtils.isArray(value) && value.length || !AutocompleteUtils.isArray(value) && !value.length))))\"\n        class=\"remove-selected\"\n        [tabIndex]=\"disabled ? -1 : 0\"\n        (keydown.enter)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        (keydown.space)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n        (click)=\"onClear();$event.preventDefault();$event.stopPropagation()\"\n        [size]=\"'24'\"\n        [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n        [attr.aria-label]=\"('COMMON.CLEAR') | uiTranslate | async\"\n        [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n      ></ui-icon>\n\n      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\n\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"suggestionsList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\n                  [value]=\"suggested\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type !== autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\n                  [value]=\"item\"\n                >\n                  <span>{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.items\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SELECTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"value?.length && type === autocompleteType.SINGLE\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [class]=\"'selected-option'\"\n                  [value]=\"value\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\" [itemSize]=\"48\"\n                                           [style.height]=\"'200px'\" class=\"virtual-scroll\">\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *cdkVirtualFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n\n                  @if(infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n                    <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                      <div class=\"loading-container\">\n                        <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                      </div>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *cdkVirtualFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }                  }\n                }\n\n              </cdk-virtual-scroll-viewport>\n\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of itemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=$event.preventDefault()\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *ngFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon [applicationTheme]=\"applicationTheme\"\n                                   [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.items\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              </ng-template>\n\n            </ng-template>\n\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              @if (isGrouped && filteredItemsList.length) {\n                @for (group of filteredItemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      <mat-option\n                        (mousedown)=$event.preventDefault()\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        *ngFor=\"let item of group.filteredItems\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon [applicationTheme]=\"applicationTheme\"\n                                 [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  } @else {\n                    <mat-option\n                      (mousedown)=$event.preventDefault()\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *ngFor=\"let item of group.filteredItems\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon [applicationTheme]=\"applicationTheme\"\n                               [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                    </mat-option>\n                  }\n                }\n              }\n\n              <mat-optgroup [label]=\"((translationContext + 'SUGGESTED') | uiTranslate | async)! | uppercase\"\n                            *ngIf=\"filteredSuggestionList.length\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredSuggestionList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </mat-optgroup>\n\n              <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\n                <mat-option\n                  (mousedown)=$event.preventDefault()\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of filteredItemsList\"\n                  [value]=\"item\"\n                >\n                  <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                  <ui-icon [applicationTheme]=\"applicationTheme\"\n                           [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                </mat-option>\n              </ng-container>\n\n              <ng-template #showItemListWithGroup>\n                <mat-optgroup [label]=\"((translationContext + 'ALL_ITEMS') | uiTranslate | async)! | uppercase\"\n                              *ngIf=\"filteredItemsList.length && !isGrouped\">\n                  <mat-option\n                    (mousedown)=$event.preventDefault()\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"let item of filteredItemsList\"\n                    [value]=\"item\"\n                  >\n                    <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                    <ui-icon [applicationTheme]=\"applicationTheme\"\n                             [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              </ng-template>\n\n              @if(isDynamicFilteringEnabled && dynamicFilterLoading) {\n                <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                  <div class=\"loading-container\">\n                    <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                  </div>\n                </mat-option>\n              } @else if(inputValue) {\n                @if (allowAdd && !isAlreadyAdded) {\n                  <mat-option (mousedown)=$event.preventDefault() [value]=\"inputValue\">\n                    <span>{{ ('COMMON.ADD') | uiTranslate | async }}</span>\n                    <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n                  </mat-option>\n                } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n                  <mat-option [style.pointer-events]=\"'none'\">\n                    <span>{{ (translationContext + 'NO_RESULTS_FOUND') | uiTranslate | async }}</span>\n                  </mat-option>\n                }\n              }\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint class=\"error\"\n                *ngIf=\"safeErrors.length || (ngControl?.errors | hasValidationError) || (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n        <div class=\"errors\"\n             *ngIf=\"(AutocompleteUtils.isArray(value) && value.length) > maxItemSelected || ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && (inputValue && inputValue !== ' '))\">\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ (translationContext + 'MAX_SELECTED_ERROR') | uiTranslate : { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error *ngIf=\"ngControl && !hideBuiltInErrors\" [ngControl]=\"ngControl\"\n                             [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n\n      </mat-hint>\n    </mat-form-field>\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -13117,6 +13156,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 type: Input
             }], maxItemSelected: [{
                 type: Input
+            }], maxLength: [{
+                type: Input
             }], isDynamicFilteringEnabled: [{
                 type: Input
             }], dynamicFilterLoading: [{