@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-dropdown.mjs

@@ -1,468 +1,600 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { NgClass, NgTemplateOutlet, AsyncPipe, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { EventEmitter, inject, ChangeDetectorRef, Renderer2, DestroyRef, NgZone, signal, TemplateRef, HostListener, ContentChild, ViewChild, Output, Input, HostBinding, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { NgControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatFormField, MatLabel, MatHint, MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelect, MatSelectTrigger, MatOption, MatSelectModule } from '@angular/material/select';
-import { adjustLightness, ButtonComponent, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
-import { IKeyboardEvent, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
-import * as i1 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i2 from '@testgorilla/tgo-ui/components/validation-error';
-import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-import { MatInputModule } from '@angular/material/input';
-
-// eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-class DropdownComponent {
-    onTabPress() {
-        this.matSelect?.close();
-    }
-    constructor() {
-        this.class = 'ui-dropdown';
-        this.findValueByValueField = (item) => item[this.valueField] === this.value;
-        /**
-         * Text content will be applied to the input element if present.
-         *
-         * @type {string}
-         * @memberof DropdownComponent
-         */
-        this.label = '';
-        /**
-         * Indicates if this field is filled by AI
-         *
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.isAIVariant = false;
-        /**
-         * Unique id of the element.
-         *
-         * @type {string}
-         * @memberof DropdownComponent
-         */
-        this.id = '';
-        this.testId = null;
-        this.ariaLabel = '';
-        /**
-         * Whether the component is disabled.
-         * Default: false.
-         *
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.disabled = false;
-        /**
-         * List of options.
-         *
-         * @type {OptionType}
-         * @memberof DropdownComponent
-         */
-        this.valueList = [];
-        /**
-         * Whether the user should be allowed to clear the values.
-         * Default: true.
-         *
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.allowClear = true;
-        /**
-         * This will allow the user to select multiple values at once.
-         * Default: true.
-         *
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.allowMultipleSelection = false;
-        /**
-         * Whether the component is required.
-         * Default: false.
-         *
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.required = false;
-        /**
-         * Show reserved content below form field
-         * @property showBottomContent
-         * @type {boolean}
-         * @memberof DropdownComponent
-         */
-        this.showBottomContent = true;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof DropdownComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Hide in build errors for Reactive Forms
-         *
-         * @type {number}
-         * @memberof DropdownComponent
-         */
-        this.hideBuiltInErrors = false;
-        /**
-         * Hide label in errors
-         *
-         * @type {number}
-         * @memberof DropdownComponent
-         */
-        this.hideLabelInErrors = false;
-        /**
-         * @property textField
-         * @description The field to be used as the display text in the dropdown.
-         * @memberof DropdownComponent
-         */
-        this.textField = '';
-        /**
-         * @property valueField
-         * @description The field to be used as the value in the dropdown.
-         * @memberof DropdownComponent
-         */
-        this.valueField = '';
-        this.hasError = false;
-        /**
-         * Color of the option hover.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof DropdownComponent
-         */
-        this.companyColor = '';
-        /**
-         * Class to be applied to the panel.
-         * @type {string}
-         * @memberof DropdownComponent
-         */
-        this.panelClass = '';
-        this.closed = new EventEmitter();
-        this.opened = new EventEmitter();
-        /**
-         * @ignore
-         */
-        this.onChange = () => { };
-        /**
-         * @ignore
-         */
-        this.onTouch = () => { };
-        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
-            optional: true,
-        });
-        this.cdr = inject(ChangeDetectorRef);
-        this.ngControl = inject(NgControl, { optional: true, self: true });
-        this.renderer2 = inject(Renderer2);
-        this.focusMonitor = inject(FocusMonitor);
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.optionSelected = null;
-        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []));
-        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
-        this.errors = [];
-        this.valueList = [];
-        if (this.defaultAppTheme) {
-            this.applicationTheme = this.defaultAppTheme;
-        }
-        if (this.ngControl !== null) {
-            this.ngControl.valueAccessor = this;
-        }
-    }
-    /**
-     * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
-     * to display validation errors that might happen (e.g. required)
-     */
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngDoCheck() {
-        if (this.ngControl?.touched || this.ngControl?.errors) {
-            this.cdr.markForCheck();
-        }
-    }
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngOnInit() {
-        this.errorsLength = this.setErrorsLength();
-        this.setStyleVariable();
-    }
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngOnChanges(changes) {
-        if (changes['companyColor']) {
-            this.setStyleVariable();
-        }
-    }
-    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
-    ngAfterViewInit() {
-        /* eslint-disable no-underscore-dangle -- MatSelect internals (_elementRef/_handleKeydown) for focus monitoring + key handling */
-        if (this.matSelect._elementRef) {
-            this.focusMonitor
-                .monitor(this.matSelect._elementRef)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(origin => this.ngZone.run(() => {
-                this.keyboardFocused.set(origin === 'keyboard');
-            }));
-        }
-        this.matSelect._handleKeydown = this.onKeydown.bind(this);
-        /* eslint-enable no-underscore-dangle */
-    }
-    clearValue(event) {
-        event?.stopPropagation();
-        this.value = '';
-        this.optionSelected = null;
-        this.matSelect.value = null;
-        this.onChange(this.value);
-    }
-    //Save select value
-    onChangeOption(event) {
-        this.value = event.value;
-        this.errorsLength = this.setErrorsLength();
-        this.onTouch();
-        this.onChange(this.value);
-    }
-    //Set errors length for validation
-    setErrorsLength() {
-        if (this.errors) {
-            return this.errors.length > 0 ? true : false;
-        }
-        return false;
-    }
-    writeValue(value) {
-        if (value) {
-            this.value = value ?? '';
-        }
-        else {
-            this.value = '';
-        }
-        this.cdr.markForCheck();
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    onClosed() {
-        this.onTouch();
-        this.closed.emit();
-        this.isOpen.set(false);
-    }
-    onOpened() {
-        this.opened.emit();
-        this.isOpen.set(true);
-    }
-    setStyleVariable() {
-        const active = this.companyColor ? adjustLightness(this.companyColor, 'pressed') : '#FFE6FA';
-        const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';
-        document.body.style.setProperty('--dropdown-color-option-active', active);
-        document.body.style.setProperty('--dropdown-color-option-hover', hover);
-    }
-    onKeydown($event) {
-        const key = $event.key;
-        if (key === IKeyboardEvent.ARROW_DOWN || key === IKeyboardEvent.ARROW_UP) {
-            this.handleArrowNavigation($event);
-        }
-        else if (key === IKeyboardEvent.SPACE || key === IKeyboardEvent.ENTER) {
-            this.handleSelectionKey();
-        }
-        else if (key === IKeyboardEvent.HOME) {
-            // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation
-            this.matSelect._keyManager.setFirstItemActive();
-        }
-        else if (key === IKeyboardEvent.END) {
-            // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation
-            this.matSelect._keyManager.setLastItemActive();
-        }
-    }
-    handleArrowNavigation($event) {
-        if (!this.matSelect.panelOpen) {
-            this.matSelect.open();
-            return;
-        }
-        const selectedItem = this.optionSelected ?? this.matSelect.options.first;
-        const index = this.matSelect.options.toArray().indexOf(selectedItem);
-        const nextIndex = $event.key === IKeyboardEvent.ARROW_DOWN
-            ? index + 1 > this.matSelect.options.length - 1
-                ? index
-                : index + 1
-            : index - 1;
-        this.optionSelected = this.matSelect.options.toArray()[nextIndex];
-        if (this.optionSelected) {
-            // eslint-disable-next-line no-underscore-dangle -- MatSelect's internal _keyManager drives option navigation
-            this.matSelect._keyManager.setActiveItem(this.optionSelected);
-        }
-    }
-    handleSelectionKey() {
-        if (!this.isOpen()) {
-            this.matSelect.open();
-            return;
-        }
-        if (!this.optionSelected) {
-            this.matSelect.value = this.matSelect.options.first.value;
-            this.onChange(this.matSelect.value);
-            return;
-        }
-        const selectedValue = this.optionSelected.value;
-        if (!this.allowMultipleSelection) {
-            this.matSelect.value = selectedValue;
-            this.matSelect.close();
-        }
-        else if (this.matSelect.value) {
-            const currentValue = this.matSelect.value;
-            this.matSelect.value = currentValue.includes(selectedValue)
-                ? currentValue.filter(value => value !== selectedValue)
-                : [...currentValue, selectedValue];
-        }
-        else {
-            this.matSelect.value = [selectedValue];
-        }
-        this.onChange(this.matSelect.value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: DropdownComponent, isStandalone: true, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", testId: "testId", ariaLabel: "ariaLabel", value: "value", errors: "errors", disabled: "disabled", valueList: "valueList", allowClear: "allowClear", allowMultipleSelection: "allowMultipleSelection", required: "required", showBottomContent: "showBottomContent", applicationTheme: "applicationTheme", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", textField: "textField", valueField: "valueField", hasError: "hasError", companyColor: "companyColor", panelClass: "panelClass" }, outputs: { closed: "closed", opened: "opened" }, host: { listeners: { "keydown.tab": "onTabPress()" }, properties: { "class": "this.class", "attr.theme": "this.applicationTheme" } }, queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOptionTemplate"], descendants: true, read: TemplateRef }, { propertyName: "customSelectedOptionTemplate", first: true, predicate: ["customSelectedOptionTemplate"], descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "matSelect", first: true, predicate: ["matSelect"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      [aria-label]=\"ariaLabel\"\n      [attr.data-testid]=\"testId ?? 'ui-dropdown-select'\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "trailingIconName", "trailingIconFilled", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled", "testId"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i2.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "pipe", type: 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: "21.2.25", ngImport: i0, type: DropdownComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        MatFormField,
-                        NgClass,
-                        MatLabel,
-                        IconComponentModule,
-                        MatSelect,
-                        MatSelectTrigger,
-                        NgTemplateOutlet,
-                        MatOption,
-                        ButtonComponent,
-                        MatHint,
-                        ValidationErrorModule,
-                        AsyncPipe,
-                        UiTranslatePipe,
-                        HasValidationErrorPipe,
-                    ], template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      [aria-label]=\"ariaLabel\"\n      [attr.data-testid]=\"testId ?? 'ui-dropdown-select'\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || (ngControl?.errors | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: HostBinding
-            }], label: [{
-                type: Input
-            }], labelIcon: [{
-                type: Input
-            }], isAIVariant: [{
-                type: Input
-            }], name: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], id: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], ariaLabel: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], valueList: [{
-                type: Input
-            }], allowClear: [{
-                type: Input
-            }], allowMultipleSelection: [{
-                type: Input
-            }], required: [{
-                type: Input
-            }], showBottomContent: [{
-                type: Input
-            }], applicationTheme: [{
-                type: HostBinding,
-                args: ['attr.theme']
-            }, {
-                type: Input
-            }], hideBuiltInErrors: [{
-                type: Input
-            }], hideLabelInErrors: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], hasError: [{
-                type: Input
-            }], companyColor: [{
-                type: Input
-            }], panelClass: [{
-                type: Input
-            }], closed: [{
-                type: Output
-            }], opened: [{
-                type: Output
-            }], matSelect: [{
-                type: ViewChild,
-                args: ['matSelect']
-            }], customOptionTemplate: [{
-                type: ContentChild,
-                args: ['customOptionTemplate', { read: TemplateRef }]
-            }], customSelectedOptionTemplate: [{
-                type: ContentChild,
-                args: ['customSelectedOptionTemplate', { read: TemplateRef }]
-            }], onTabPress: [{
-                type: HostListener,
-                args: ['keydown.tab']
-            }] } });
-
-class DropdownComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DropdownComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            ButtonComponentModule,
-            MatSelectModule,
-            UiTranslatePipe,
-            ValidationErrorModule,
-            HasValidationErrorPipe,
-            DropdownComponent], exports: [DropdownComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
-            MatFormFieldModule,
-            MatInputModule,
-            IconComponentModule,
-            FormsModule,
-            ReactiveFormsModule,
-            ButtonComponentModule,
-            MatSelectModule,
-            ValidationErrorModule,
-            DropdownComponent] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: DropdownComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        IconComponentModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        ButtonComponentModule,
-                        MatSelectModule,
-                        UiTranslatePipe,
-                        ValidationErrorModule,
-                        HasValidationErrorPipe,
-                        DropdownComponent,
-                    ],
-                    exports: [DropdownComponent],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { AsyncPipe, CommonModule, NgClass, NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, DestroyRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, Renderer2, TemplateRef, ViewChild, ViewEncapsulation, inject, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { FormsModule, NgControl, ReactiveFormsModule } from "@angular/forms";
+import { MatFormField, MatFormFieldModule, MatHint, MatLabel } from "@angular/material/form-field";
+import { MatOption, MatSelect, MatSelectModule, MatSelectTrigger } from "@angular/material/select";
+import { ButtonComponent, ButtonComponentModule, adjustLightness } from "@testgorilla/tgo-ui/components/button";
+import { HasValidationErrorPipe, IKeyboardEvent, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i1 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i2 from "@testgorilla/tgo-ui/components/validation-error";
+import { ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+import { MatInputModule } from "@angular/material/input";
+var DropdownComponent = class DropdownComponent {
+	onTabPress() {
+		this.matSelect?.close();
+	}
+	constructor() {
+		this.class = "ui-dropdown";
+		this.findValueByValueField = (item) => item[this.valueField] === this.value;
+		this.label = "";
+		this.isAIVariant = false;
+		this.id = "";
+		this.testId = null;
+		this.ariaLabel = "";
+		this.disabled = false;
+		this.valueList = [];
+		this.allowClear = true;
+		this.allowMultipleSelection = false;
+		this.required = false;
+		this.showBottomContent = true;
+		this.applicationTheme = "light";
+		this.hideBuiltInErrors = false;
+		this.hideLabelInErrors = false;
+		this.textField = "";
+		this.valueField = "";
+		this.hasError = false;
+		this.companyColor = "";
+		this.panelClass = "";
+		this.closed = new EventEmitter();
+		this.opened = new EventEmitter();
+		this.onChange = () => {};
+		this.onTouch = () => {};
+		this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
+		this.cdr = inject(ChangeDetectorRef);
+		this.ngControl = inject(NgControl, {
+			optional: true,
+			self: true
+		});
+		this.renderer2 = inject(Renderer2);
+		this.focusMonitor = inject(FocusMonitor);
+		this.destroyRef = inject(DestroyRef);
+		this.ngZone = inject(NgZone);
+		this.optionSelected = null;
+		this.keyboardFocused = signal(false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
+		this.isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+		this.errors = [];
+		this.valueList = [];
+		if (this.defaultAppTheme) this.applicationTheme = this.defaultAppTheme;
+		if (this.ngControl !== null) this.ngControl.valueAccessor = this;
+	}
+	ngDoCheck() {
+		if (this.ngControl?.touched || this.ngControl?.errors) this.cdr.markForCheck();
+	}
+	ngOnInit() {
+		this.errorsLength = this.setErrorsLength();
+		this.setStyleVariable();
+	}
+	ngOnChanges(changes) {
+		if (changes["companyColor"]) this.setStyleVariable();
+	}
+	ngAfterViewInit() {
+		if (this.matSelect._elementRef) this.focusMonitor.monitor(this.matSelect._elementRef).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => this.ngZone.run(() => {
+			this.keyboardFocused.set(origin === "keyboard");
+		}));
+		this.matSelect._handleKeydown = this.onKeydown.bind(this);
+	}
+	clearValue(event) {
+		event?.stopPropagation();
+		this.value = "";
+		this.optionSelected = null;
+		this.matSelect.value = null;
+		this.onChange(this.value);
+	}
+	onChangeOption(event) {
+		this.value = event.value;
+		this.errorsLength = this.setErrorsLength();
+		this.onTouch();
+		this.onChange(this.value);
+	}
+	setErrorsLength() {
+		if (this.errors) return this.errors.length > 0 ? true : false;
+		return false;
+	}
+	writeValue(value) {
+		if (value) this.value = value ?? "";
+		else this.value = "";
+		this.cdr.markForCheck();
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	onClosed() {
+		this.onTouch();
+		this.closed.emit();
+		this.isOpen.set(false);
+	}
+	onOpened() {
+		this.opened.emit();
+		this.isOpen.set(true);
+	}
+	setStyleVariable() {
+		const active = this.companyColor ? adjustLightness(this.companyColor, "pressed") : "#FFE6FA";
+		const hover = this.companyColor ? adjustLightness(this.companyColor, "hover") : "#FFF2FC";
+		document.body.style.setProperty("--dropdown-color-option-active", active);
+		document.body.style.setProperty("--dropdown-color-option-hover", hover);
+	}
+	onKeydown($event) {
+		const key = $event.key;
+		if (key === IKeyboardEvent.ARROW_DOWN || key === IKeyboardEvent.ARROW_UP) this.handleArrowNavigation($event);
+		else if (key === IKeyboardEvent.SPACE || key === IKeyboardEvent.ENTER) this.handleSelectionKey();
+		else if (key === IKeyboardEvent.HOME) this.matSelect._keyManager.setFirstItemActive();
+		else if (key === IKeyboardEvent.END) this.matSelect._keyManager.setLastItemActive();
+	}
+	handleArrowNavigation($event) {
+		if (!this.matSelect.panelOpen) {
+			this.matSelect.open();
+			return;
+		}
+		const selectedItem = this.optionSelected ?? this.matSelect.options.first;
+		const index = this.matSelect.options.toArray().indexOf(selectedItem);
+		const nextIndex = $event.key === IKeyboardEvent.ARROW_DOWN ? index + 1 > this.matSelect.options.length - 1 ? index : index + 1 : index - 1;
+		this.optionSelected = this.matSelect.options.toArray()[nextIndex];
+		if (this.optionSelected) this.matSelect._keyManager.setActiveItem(this.optionSelected);
+	}
+	handleSelectionKey() {
+		if (!this.isOpen()) {
+			this.matSelect.open();
+			return;
+		}
+		if (!this.optionSelected) {
+			this.matSelect.value = this.matSelect.options.first.value;
+			this.onChange(this.matSelect.value);
+			return;
+		}
+		const selectedValue = this.optionSelected.value;
+		if (!this.allowMultipleSelection) {
+			this.matSelect.value = selectedValue;
+			this.matSelect.close();
+		} else if (this.matSelect.value) {
+			const currentValue = this.matSelect.value;
+			this.matSelect.value = currentValue.includes(selectedValue) ? currentValue.filter((value) => value !== selectedValue) : [...currentValue, selectedValue];
+		} else this.matSelect.value = [selectedValue];
+		this.onChange(this.matSelect.value);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DropdownComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: DropdownComponent,
+			isStandalone: true,
+			selector: "ui-dropdown",
+			inputs: {
+				label: "label",
+				labelIcon: "labelIcon",
+				isAIVariant: "isAIVariant",
+				name: "name",
+				placeholder: "placeholder",
+				id: "id",
+				testId: "testId",
+				ariaLabel: "ariaLabel",
+				value: "value",
+				errors: "errors",
+				disabled: "disabled",
+				valueList: "valueList",
+				allowClear: "allowClear",
+				allowMultipleSelection: "allowMultipleSelection",
+				required: "required",
+				showBottomContent: "showBottomContent",
+				applicationTheme: "applicationTheme",
+				hideBuiltInErrors: "hideBuiltInErrors",
+				hideLabelInErrors: "hideLabelInErrors",
+				textField: "textField",
+				valueField: "valueField",
+				hasError: "hasError",
+				companyColor: "companyColor",
+				panelClass: "panelClass"
+			},
+			outputs: {
+				closed: "closed",
+				opened: "opened"
+			},
+			host: {
+				listeners: { "keydown.tab": "onTabPress()" },
+				properties: {
+					"class": "this.class",
+					"attr.theme": "this.applicationTheme"
+				}
+			},
+			queries: [{
+				propertyName: "customOptionTemplate",
+				first: true,
+				predicate: ["customOptionTemplate"],
+				descendants: true,
+				read: TemplateRef
+			}, {
+				propertyName: "customSelectedOptionTemplate",
+				first: true,
+				predicate: ["customSelectedOptionTemplate"],
+				descendants: true,
+				read: TemplateRef
+			}],
+			viewQueries: [{
+				propertyName: "matSelect",
+				first: true,
+				predicate: ["matSelect"],
+				descendants: true
+			}],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      [aria-label]=\"ariaLabel\"\n      [attr.data-testid]=\"testId ?? 'ui-dropdown-select'\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"],
+			dependencies: [
+				{
+					kind: "component",
+					type: MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i1.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: MatSelect,
+					selector: "mat-select",
+					inputs: [
+						"aria-describedby",
+						"panelClass",
+						"disabled",
+						"disableRipple",
+						"tabIndex",
+						"hideSingleSelectionIndicator",
+						"placeholder",
+						"required",
+						"multiple",
+						"disableOptionCentering",
+						"compareWith",
+						"value",
+						"aria-label",
+						"aria-labelledby",
+						"errorStateMatcher",
+						"typeaheadDebounceInterval",
+						"sortComparator",
+						"id",
+						"panelWidth",
+						"canSelectNullableOptions"
+					],
+					outputs: [
+						"openedChange",
+						"opened",
+						"closed",
+						"selectionChange",
+						"valueChange"
+					],
+					exportAs: ["matSelect"]
+				},
+				{
+					kind: "directive",
+					type: MatSelectTrigger,
+					selector: "mat-select-trigger"
+				},
+				{
+					kind: "directive",
+					type: NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "component",
+					type: MatOption,
+					selector: "mat-option",
+					inputs: [
+						"value",
+						"id",
+						"disabled"
+					],
+					outputs: ["onSelectionChange"],
+					exportAs: ["matOption"]
+				},
+				{
+					kind: "component",
+					type: ButtonComponent,
+					selector: "ui-button",
+					inputs: [
+						"size",
+						"variant",
+						"label",
+						"iconPosition",
+						"justIcon",
+						"iconName",
+						"trailingIconName",
+						"trailingIconFilled",
+						"disabled",
+						"loading",
+						"loadingWithLabel",
+						"fullWidth",
+						"url",
+						"urlTarget",
+						"value",
+						"tooltip",
+						"isPremium",
+						"type",
+						"companyColor",
+						"buttonBadgeConfig",
+						"applicationTheme",
+						"disabledScaleOnClick",
+						"ariaLabel",
+						"ariaExpanded",
+						"ariaControls",
+						"ariaPressed",
+						"ariaRequired",
+						"ariaLabelledby",
+						"ariaDescribedby",
+						"preventDefault",
+						"hasBackground",
+						"tooltipPosition",
+						"role",
+						"iconFilled",
+						"testId"
+					],
+					outputs: ["buttonClickEvent", "buttonHoverEvent"]
+				},
+				{
+					kind: "directive",
+					type: MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "ngmodule",
+					type: ValidationErrorModule
+				},
+				{
+					kind: "component",
+					type: i2.ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "pipe",
+					type: 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: "22.2.4",
+	ngImport: i0,
+	type: DropdownComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-dropdown",
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				MatFormField,
+				NgClass,
+				MatLabel,
+				IconComponentModule,
+				MatSelect,
+				MatSelectTrigger,
+				NgTemplateOutlet,
+				MatOption,
+				ButtonComponent,
+				MatHint,
+				ValidationErrorModule,
+				AsyncPipe,
+				UiTranslatePipe,
+				HasValidationErrorPipe
+			],
+			template: "<ng-container>\n  <mat-form-field\n    appearance=\"outline\"\n    [attr.theme]=\"applicationTheme\"\n    [color]=\"errorsLength || (ngControl?.errors && ngControl?.touched) || hasError ? 'warn' : 'accent'\"\n    [ngClass]=\"{\n      'hide-bottom-content': !showBottomContent,\n      'without-label': !label,\n      'keyboard-focused': keyboardFocused(),\n      'has-label': !!label,\n    }\"\n  >\n    <mat-label class=\"label-with-icon\">\n      @if (isAIVariant || labelIcon) {\n        <ui-icon [name]=\"isAIVariant ? 'Sparkle-in-line' : labelIcon!\" [size]=\"'16'\" class=\"label-icon\"></ui-icon>\n      }\n      {{ label }}\n      @if (required) {\n        <span>*</span>\n      }\n    </mat-label>\n    <mat-select\n      (closed)=\"onClosed()\"\n      (opened)=\"onOpened()\"\n      #matSelect\n      [id]=\"id!\"\n      [disableRipple]=\"applicationTheme !== 'classic'\"\n      [panelClass]=\"'ui-dropdown-list' + ' ' + applicationTheme + (panelClass ? ' ' + panelClass : '')\"\n      [disabled]=\"disabled\"\n      [multiple]=\"!!allowMultipleSelection\"\n      [placeholder]=\"placeholder\"\n      [value]=\"value\"\n      (selectionChange)=\"onChangeOption($event)\"\n      [attr.name]=\"name\"\n      [aria-label]=\"ariaLabel\"\n      [attr.data-testid]=\"testId ?? 'ui-dropdown-select'\"\n    >\n      @if (customSelectedOptionTemplate && valueField) {\n        <mat-select-trigger>\n          <ng-container\n            [ngTemplateOutlet]=\"customSelectedOptionTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: valueList.find(findValueByValueField) }\"\n          ></ng-container>\n        </mat-select-trigger>\n      }\n\n      @if (customOptionTemplate && valueField) {\n        @for (item of valueList; track item[valueField]) {\n          <mat-option [value]=\"item[valueField]\">\n            <ng-container\n              [ngTemplateOutlet]=\"customOptionTemplate\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </mat-option>\n        }\n      } @else {\n        @for (section of valueList; track section) {\n          <div class=\"mat-option-section\">\n            @if (section.sectionTitle) {\n              <span class=\"section-title\">{{ section.sectionTitle }}</span>\n            }\n            @if (section) {\n              <mat-option\n                #matOption\n                [value]=\"valueField ? section[valueField] : textField && !valueField ? section : section.value\"\n              >\n                <div class=\"option-content\">\n                  <span class=\"option-text\">{{\n                    textField ? section[textField] : (section.displayValue ?? section.value)\n                  }}</span>\n                  @if (section.isAISuggested) {\n                    <ui-icon [name]=\"'Sparkle-in-line'\" [size]=\"'16'\"> </ui-icon>\n                  }\n                </div>\n              </mat-option>\n            }\n          </div>\n        }\n      }\n    </mat-select>\n    @if (allowClear && !matSelect.empty) {\n      <ui-button\n        [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        variant=\"secondary\"\n        [justIcon]=\"true\"\n        class=\"clear\"\n        [iconName]=\"applicationTheme === 'classic' ? 'Close' : 'Close-filled'\"\n        [label]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n        (click)=\"clearValue($event)\"\n      ></ui-button>\n    }\n    @if (!matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n      ></ui-icon>\n    }\n    @if (matSelect.panelOpen) {\n      <ui-icon\n        class=\"chevron-icon\"\n        size=\"24\"\n        [applicationTheme]=\"applicationTheme\"\n        [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n      ></ui-icon>\n    }\n    @if (errorsLength || ($safeNavigationMigration(ngControl?.errors) | hasValidationError)) {\n      <mat-hint class=\"error\">\n        @if (errorsLength) {\n          @for (error of errors; track error) {\n            <div class=\"errors\">\n              <ui-icon\n                [applicationTheme]=\"applicationTheme\"\n                [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n              ></ui-icon\n              >{{ error }}\n            </div>\n          }\n        }\n        @if (ngControl && !hideBuiltInErrors) {\n          <ui-validation-error [ngControl]=\"ngControl\" [label]=\"hideLabelInErrors ? null : label\"></ui-validation-error>\n        }\n      </mat-hint>\n    }\n  </mat-form-field>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon{gap:4px}.mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn .label-with-icon .label-icon mat-icon svg{color:#e02800!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn):hover .mat-mdc-floating-label:not(.mdc-floating-label--float-above) .label-with-icon .label-icon mat-icon svg{color:#919191!important}.mat-mdc-form-field.mat-form-field-appearance-outline:not(.mat-warn) .mat-mdc-floating-label.mdc-floating-label--float-above .label-with-icon .label-icon mat-icon svg{color:#000!important}.ui-dropdown-list .option-content{display:flex;align-items:center;gap:8px}ui-dropdown{display:flex}ui-dropdown .label-with-icon{display:flex;align-items:center;gap:8px}ui-dropdown .mat-mdc-form-field{margin-top:0;width:100%}ui-dropdown .mat-mdc-form-field.without-label .mdc-notched-outline__notch{padding:0}ui-dropdown .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper{height:48px;flex:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-icon-suffix{margin-right:16px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mdc-notched-outline .mdc-floating-label--float-above{transform:translateY(-30px) scale(.75)}ui-dropdown .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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-arrow-wrapper{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-floating-label{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-bottom-align:before{height:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint-wrapper{padding:0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-focused ui-icon:not(.clear) svg{color:#276678}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon{padding:0;height:auto;background:transparent}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:hover,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon:focus{background:transparent;color:inherit;border:none;outline:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline button.mat-mdc-unelevated-button.secondary.only-icon.focus.cdk-focused.cdk-mouse-focused{background-color:transparent!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear{position:absolute;right:24px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .clear mat-icon.black svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.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-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__leading,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__trailing,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-form-field-appearance-outline .mdc-notched-outline .mdc-notched-outline__notch{border-color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-mdc-floating-label mat-label{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-warn.mat-focused ui-icon svg{color:#888}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper{padding:0;margin-top:9px;font-size:12px;line-height:16px;position:relative}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-subscript-wrapper .mat-mdc-form-field-hint-spacer{display:none}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error .errors{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-select-value{line-height:18px;width:74%!important}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error svg{color:#cb7b7a}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error{display:flex}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-form-field-hint.error ui-icon{margin-right:9px}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled.mat-form-field-appearance-outline .mdc-notched-outline{color:#e0e0e0}ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-button svg,ui-dropdown .mat-mdc-form-field.mat-form-field-appearance-outline.mat-form-field-disabled .options .options-container ui-icon svg{color:#e0e0e0}ui-dropdown[theme=light] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper,ui-dropdown[theme=dark] .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper{margin-top:4px}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown[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-dropdown[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-dropdown[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-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused .mdc-notched-outline__trailing,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__leading,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__notch,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper .mdc-notched-outline__trailing{border-color:#fff!important}ui-dropdown[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-dropdown[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-dropdown[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-dropdown .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-dropdown .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-dropdown .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{color:#919191!important}ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown[theme=dark] .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper:hover ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper.mdc-text-field--focused ui-icon svg,ui-dropdown .dark .mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-text-field-wrapper ui-icon svg{color:#919191!important}.cdk-overlay-pane .ui-dropdown-list{box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-pane .ui-dropdown-list.mat-mdc-select-panel .mat-mdc-option ui-icon mat-icon svg{color:var(--cnp-icon-color, var(--icon-color))!important}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center;justify-content:space-between}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-pane .ui-dropdown-list .mat-option-section .section-title{font-size:12px;text-transform:uppercase;display:flex;height:48px;align-items:center;font-weight:700;padding:0 16px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		class: [{ type: HostBinding }],
+		label: [{ type: Input }],
+		labelIcon: [{ type: Input }],
+		isAIVariant: [{ type: Input }],
+		name: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		id: [{ type: Input }],
+		testId: [{ type: Input }],
+		ariaLabel: [{ type: Input }],
+		value: [{ type: Input }],
+		errors: [{ type: Input }],
+		disabled: [{ type: Input }],
+		valueList: [{ type: Input }],
+		allowClear: [{ type: Input }],
+		allowMultipleSelection: [{ type: Input }],
+		required: [{ type: Input }],
+		showBottomContent: [{ type: Input }],
+		applicationTheme: [{
+			type: HostBinding,
+			args: ["attr.theme"]
+		}, { type: Input }],
+		hideBuiltInErrors: [{ type: Input }],
+		hideLabelInErrors: [{ type: Input }],
+		textField: [{ type: Input }],
+		valueField: [{ type: Input }],
+		hasError: [{ type: Input }],
+		companyColor: [{ type: Input }],
+		panelClass: [{ type: Input }],
+		closed: [{ type: Output }],
+		opened: [{ type: Output }],
+		matSelect: [{
+			type: ViewChild,
+			args: ["matSelect"]
+		}],
+		customOptionTemplate: [{
+			type: ContentChild,
+			args: ["customOptionTemplate", { read: TemplateRef }]
+		}],
+		customSelectedOptionTemplate: [{
+			type: ContentChild,
+			args: ["customSelectedOptionTemplate", { read: TemplateRef }]
+		}],
+		onTabPress: [{
+			type: HostListener,
+			args: ["keydown.tab"]
+		}]
+	}
+});
+var DropdownComponentModule = class DropdownComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DropdownComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DropdownComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				ButtonComponentModule,
+				MatSelectModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				DropdownComponent
+			],
+			exports: [DropdownComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: DropdownComponentModule,
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				ButtonComponentModule,
+				MatSelectModule,
+				ValidationErrorModule,
+				DropdownComponent
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: DropdownComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatInputModule,
+				IconComponentModule,
+				FormsModule,
+				ReactiveFormsModule,
+				ButtonComponentModule,
+				MatSelectModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				DropdownComponent
+			],
+			exports: [DropdownComponent]
+		}]
+	}]
+});
 export { DropdownComponent, DropdownComponentModule };
-//# sourceMappingURL=testgorilla-tgo-ui-components-dropdown.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-dropdown.mjs.map