@testgorilla/tgo-ui 4.1.2-beta → 4.1.3-beta

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

@@ -0,0 +1,434 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, signal, TemplateRef, HostListener, ContentChild, ViewChild, Output, Input, HostBinding, Optional, Inject, Self, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import * as i6 from '@testgorilla/tgo-ui/components/button';
+import { adjustLightness, ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i9 from '@testgorilla/tgo-ui/components/core';
+import { IKeyboardEvent, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@angular/cdk/a11y';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+import * as i7 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i8 from '@testgorilla/tgo-ui/components/validation-error';
+import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
+import { MatInputModule } from '@angular/material/input';
+
+class DropdownComponent {
+    onTabPress() {
+        this.matSelect?.close();
+    }
+    constructor(defaultAppTheme, cdr, ngControl, renderer2, focusMonitor, destroyRef, ngZone) {
+        this.defaultAppTheme = defaultAppTheme;
+        this.cdr = cdr;
+        this.ngControl = ngControl;
+        this.renderer2 = renderer2;
+        this.focusMonitor = focusMonitor;
+        this.destroyRef = destroyRef;
+        this.ngZone = ngZone;
+        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 = '';
+        /**
+         * 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.keyboardFocused = signal(false);
+        this.isOpen = signal(false);
+        this.errors = [];
+        this.valueList = [];
+        if (defaultAppTheme) {
+            this.applicationTheme = 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)
+     */
+    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);
+    }
+    //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) {
+        if ($event.key === IKeyboardEvent.ARROW_DOWN || $event.key === IKeyboardEvent.ARROW_UP) {
+            if (!this.matSelect.panelOpen) {
+                this.matSelect.open();
+            }
+            else {
+                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);
+                }
+            }
+        }
+        else if (($event.key === IKeyboardEvent.SPACE || $event.key === IKeyboardEvent.ENTER)) {
+            if (this.isOpen()) {
+                if (this.optionSelected) {
+                    if (!this.allowMultipleSelection) {
+                        this.matSelect.value = this.optionSelected.value;
+                        this.matSelect.close();
+                    }
+                    else {
+                        if (this.matSelect.value) {
+                            this.matSelect.value = this.matSelect.value.includes(this.optionSelected.value) ? this.matSelect.value.filter((value) => value !== this.optionSelected.value) : [...this.matSelect.value, this.optionSelected.value];
+                        }
+                        else {
+                            this.matSelect.value = [this.optionSelected.value];
+                        }
+                    }
+                }
+                else {
+                    this.matSelect.value = this.matSelect.options.first.value;
+                }
+                this.onChange(this.matSelect.value);
+            }
+            else {
+                this.matSelect.open();
+            }
+        }
+        else if ($event.key === IKeyboardEvent.HOME) {
+            this.matSelect._keyManager.setFirstItemActive();
+        }
+        else if ($event.key === IKeyboardEvent.END) {
+            this.matSelect._keyManager.setLastItemActive();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.NgControl, optional: true, self: true }, { token: i0.Renderer2 }, { token: i2.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: DropdownComponent, isStandalone: false, selector: "ui-dropdown", inputs: { label: "label", labelIcon: "labelIcon", isAIVariant: "isAIVariant", name: "name", placeholder: "placeholder", id: "id", 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($event)" }, 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      data-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        <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n          <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n          <mat-option\n            *ngIf=\"section\"\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        </div>\n      }\n    </mat-select>\n    <ui-button\n      [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n      *ngIf=\"allowClear && !matSelect.empty\"\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    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"!matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n    ></ui-icon>\n    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n    ></ui-icon>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of errors\">\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n          ></ui-icon\n          >{{ error }}\n        </div>\n      </ng-container>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-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-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .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-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .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-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i5.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i6.ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: i7.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: i7.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i8.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i9.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i9.HasValidationErrorPipe, name: "hasValidationError" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dropdown', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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      data-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        <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n          <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n          <mat-option\n            *ngIf=\"section\"\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        </div>\n      }\n    </mat-select>\n    <ui-button\n      [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n      *ngIf=\"allowClear && !matSelect.empty\"\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    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"!matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n    ></ui-icon>\n    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n    ></ui-icon>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of errors\">\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n          ></ui-icon\n          >{{ error }}\n        </div>\n      </ng-container>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.mat-mdc-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-container .cdk-overlay-pane .ui-dropdown-list{margin-top:4px;box-shadow:0 8px 24px 4px #00000014}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-option{display:flex;height:48px;color:#000}.cdk-overlay-container .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-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:hover,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:hover{background:var(--dropdown-color-option-hover)!important}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-warn mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent mat-option:active,.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list.mat-accent .mat-mdc-option-multiple:active{background:var(--dropdown-color-option-active)!important}.cdk-overlay-container .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-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}.cdk-overlay-container .cdk-overlay-pane .ui-dropdown-list .mat-mdc-form-field-hint.error .errors{display:flex}.chevron-icon{position:absolute;right:-2px}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }, { type: i0.ChangeDetectorRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: i0.Renderer2 }, { type: i2.FocusMonitor }, { type: i0.DestroyRef }, { type: i0.NgZone }], propDecorators: { class: [{
+                type: HostBinding
+            }], label: [{
+                type: Input
+            }], labelIcon: [{
+                type: Input
+            }], isAIVariant: [{
+                type: Input
+            }], name: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                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', ['$event']]
+            }] } });
+
+class DropdownComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponentModule, declarations: [DropdownComponent], imports: [CommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            IconComponentModule,
+            FormsModule,
+            ReactiveFormsModule,
+            ButtonComponentModule,
+            MatSelectModule,
+            UiTranslatePipe,
+            ValidationErrorModule,
+            HasValidationErrorPipe], exports: [DropdownComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponentModule, imports: [CommonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            IconComponentModule,
+            FormsModule,
+            ReactiveFormsModule,
+            ButtonComponentModule,
+            MatSelectModule,
+            ValidationErrorModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: DropdownComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [DropdownComponent],
+                    imports: [
+                        CommonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        IconComponentModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonComponentModule,
+                        MatSelectModule,
+                        UiTranslatePipe,
+                        ValidationErrorModule,
+                        HasValidationErrorPipe,
+                    ],
+                    exports: [DropdownComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DropdownComponent, DropdownComponentModule };
+//# sourceMappingURL=testgorilla-tgo-ui-components-dropdown.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"testgorilla-tgo-ui-components-dropdown.mjs","sources":["../../../components/dropdown/dropdown.component.ts","../../../components/dropdown/dropdown.component.html","../../../components/dropdown/dropdown.component.module.ts","../../../components/dropdown/testgorilla-tgo-ui-components-dropdown.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  ChangeDetectorRef,\n  Component,\n  ContentChild,\n  DestroyRef,\n  DoCheck,\n  EventEmitter,\n  HostBinding,\n  HostListener,\n  Inject,\n  Input,\n  NgZone,\n  OnChanges,\n  OnInit,\n  Optional,\n  Output,\n  Renderer2,\n  Self,\n  signal,\n  SimpleChanges,\n  TemplateRef,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { FloatLabelType } from '@angular/material/form-field';\nimport { OptionType } from './dropdown.model';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\nimport { adjustLightness } from '@testgorilla/tgo-ui/components/button';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FocusMonitor } from '@angular/cdk/a11y';\nimport { MatSelect } from '@angular/material/select';\nimport { IKeyboardEvent } from '@testgorilla/tgo-ui/components/core';\n\n@Component({\n    selector: 'ui-dropdown',\n    templateUrl: './dropdown.component.html',\n    styleUrls: ['./dropdown.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: false\n})\nexport class DropdownComponent implements OnInit, ControlValueAccessor, DoCheck, OnChanges {\n  @HostBinding() class = 'ui-dropdown';\n\n  findValueByValueField = (item: any) => item[this.valueField] === this.value;\n  /**\n   * Text content will be applied to the input element if present.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() label? = '';\n\n  /**\n   * Icon to display alongside the label\n   *\n   * @type {IconName}\n   * @memberof DropdownComponent\n   */\n  @Input() labelIcon?: IconName;\n\n  /**\n   * Indicates if this field is filled by AI\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() isAIVariant = false;\n\n  /**\n   * Input name attribute\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() name: string;\n  /**\n   * Placeholder to be shown if no value has been selected.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() placeholder: string;\n\n  /**\n   * Unique id of the element.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() id? = '';\n\n  /**\n   * Input value\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() value?: string;\n\n  /**\n   * Whether the component is in an error state.\n   *\n   * @type {string[]}\n   * @memberof DropdownComponent\n   */\n  @Input() errors?: string[];\n\n  /**\n   * Whether the component is disabled.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() disabled = false;\n\n  /**\n   * List of options.\n   *\n   * @type {OptionType}\n   * @memberof DropdownComponent\n   */\n  @Input() valueList: OptionType[] = [];\n\n  /**\n   * Whether the user should be allowed to clear the values.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowClear = true;\n\n  /**\n   * This will allow the user to select multiple values at once.\n   * Default: true.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() allowMultipleSelection? = false;\n\n  /**\n   * Whether the component is required.\n   * Default: false.\n   *\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() required = false;\n\n  /**\n   * Show reserved content below form field\n   * @property showBottomContent\n   * @type {boolean}\n   * @memberof DropdownComponent\n   */\n  @Input() showBottomContent = true;\n\n  /**\n   *\n   * Defines the application theme\n   *\n   * @type {ApplicationTheme}\n   * @memberof DropdownComponent\n   */\n  @HostBinding('attr.theme')\n  @Input()\n  applicationTheme: ApplicationTheme = 'light';\n\n  /**\n   * Hide in build errors for Reactive Forms\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideBuiltInErrors = false;\n\n  /**\n   * Hide label in errors\n   *\n   * @type {number}\n   * @memberof DropdownComponent\n   */\n  @Input() hideLabelInErrors = false;\n\n  /**\n   * @property textField\n   * @description The field to be used as the display text in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() textField = '';\n\n  /**\n   * @property valueField\n   * @description The field to be used as the value in the dropdown.\n   * @memberof DropdownComponent\n   */\n  @Input() valueField = '';\n\n  @Input() hasError = false;\n\n  /**\n   * Color of the option hover.\n   * Defaults to Test Gorilla primary color.\n   *\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() companyColor: string = '';\n\n  /**\n   * Class to be applied to the panel.\n   * @type {string}\n   * @memberof DropdownComponent\n   */\n  @Input() panelClass: string = '';\n\n  @Output() closed = new EventEmitter<void>();\n  @Output() opened = new EventEmitter<void>();\n\n  @ViewChild('matSelect') matSelect: MatSelect;\n\n  @ContentChild('customOptionTemplate', { read: TemplateRef }) customOptionTemplate: TemplateRef<any> | null;\n  @ContentChild('customSelectedOptionTemplate', { read: TemplateRef })\n  customSelectedOptionTemplate: TemplateRef<any> | null;\n\n  @HostListener('keydown.tab', ['$event'])\n  onTabPress(): void {\n    this.matSelect?.close();\n  }\n\n  /**\n   * @ignore\n   */\n  onChange = (_: any) => {};\n\n  /**\n   * @ignore\n   */\n  onTouch = () => {};\n\n  constructor(\n    @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme,\n    private readonly cdr: ChangeDetectorRef,\n    @Optional() @Self() public ngControl: NgControl,\n    private readonly renderer2: Renderer2,\n    private readonly focusMonitor: FocusMonitor,\n    private readonly destroyRef: DestroyRef,\n    private readonly ngZone: NgZone\n  ) {\n    this.errors = [];\n    this.valueList = [];\n    if (defaultAppTheme) {\n      this.applicationTheme = defaultAppTheme;\n    }\n\n    if (this.ngControl != null) {\n      this.ngControl.valueAccessor = this;\n    }\n  }\n\n  floatLabel: FloatLabelType;\n  classError: string;\n  errorsLength: boolean;\n  showCheck: boolean;\n  optionSelected: any;\n  keyboardFocused = signal<boolean>(false);\n  isOpen = signal(false);\n\n  /**\n   * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors\n   * to display validation errors that might happen (e.g. required)\n   */\n  ngDoCheck(): void {\n    if (this.ngControl?.touched || this.ngControl?.errors) {\n      this.cdr.markForCheck();\n    }\n  }\n\n  ngOnInit(): void {\n    this.errorsLength = this.setErrorsLength();\n    this.setStyleVariable();\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['companyColor']) {\n      this.setStyleVariable();\n    }\n  }\n\n  ngAfterViewInit(): void {\n    if (this.matSelect._elementRef) {\n      this.focusMonitor.monitor(this.matSelect._elementRef).pipe(takeUntilDestroyed(this.destroyRef))\n        .subscribe(origin => this.ngZone.run(() => {\n          this.keyboardFocused.set(origin === 'keyboard')\n        }));\n    }\n\n    this.matSelect._handleKeydown = this.onKeydown.bind(this);\n  }\n\n  clearValue(event: Event): void {\n    event?.stopPropagation();\n    this.value = '';\n    this.optionSelected = null;\n    this.matSelect.value = null;\n    this.onChange(this.value);\n  }\n\n  //Save select value\n  onChangeOption(event: any) {\n    this.value = event.value;\n    this.errorsLength = this.setErrorsLength();\n    this.onTouch();\n    this.onChange(this.value);\n  }\n\n  //Set errors length for validation\n  setErrorsLength(): boolean {\n    if (!!this.errors) {\n      return this.errors.length > 0 ? true : false;\n    }\n    return false;\n  }\n\n  writeValue(value?: any): void {\n    if (value) {\n      this.value = value || '';\n    } else {\n      this.value = '';\n    }\n    this.cdr.markForCheck();\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouch = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.disabled = isDisabled;\n    this.cdr.markForCheck();\n  }\n\n  onClosed(): void {\n    this.onTouch();\n    this.closed.emit();\n    this.isOpen.set(false);\n  }\n\n  onOpened(): void {\n    this.opened.emit();\n    this.isOpen.set(true);\n  }\n\n  setStyleVariable() {\n    const active = this.companyColor ? adjustLightness(this.companyColor, 'pressed') : '#FFE6FA'\n    const hover = this.companyColor ? adjustLightness(this.companyColor, 'hover') : '#FFF2FC';\n    document.body.style.setProperty('--dropdown-color-option-active', active);\n    document.body.style.setProperty('--dropdown-color-option-hover', hover);\n  }\n\n  onKeydown($event: KeyboardEvent) {\n    if ($event.key === IKeyboardEvent.ARROW_DOWN || $event.key === IKeyboardEvent.ARROW_UP) {\n      if (!this.matSelect.panelOpen) {\n        this.matSelect.open();\n      } else {\n        const selectedItem = this.optionSelected || this.matSelect.options.first;\n        const index = this.matSelect.options.toArray().indexOf(selectedItem);\n        const nextIndex = $event.key === IKeyboardEvent.ARROW_DOWN ? (index + 1) > this.matSelect.options.length - 1 ? index : (index + 1) : index - 1;\n        this.optionSelected = this.matSelect.options.toArray()[nextIndex];\n\n        if (this.optionSelected) {\n          this.matSelect._keyManager.setActiveItem(this.optionSelected);\n        }\n      }\n    } else if (($event.key === IKeyboardEvent.SPACE || $event.key === IKeyboardEvent.ENTER)) {\n      if (this.isOpen()) {\n        if (this.optionSelected) {\n          if (!this.allowMultipleSelection) {\n            this.matSelect.value = this.optionSelected.value;\n            this.matSelect.close();\n          } else {\n            if (this.matSelect.value) {\n              this.matSelect.value = this.matSelect.value.includes(this.optionSelected.value) ? this.matSelect.value.filter((value: any) => value !== this.optionSelected.value) : [...this.matSelect.value, this.optionSelected.value];\n            } else {\n              this.matSelect.value = [this.optionSelected.value];\n            }\n          }\n        } else {\n          this.matSelect.value = this.matSelect.options.first.value;\n        }\n        this.onChange(this.matSelect.value);\n      } else {\n        this.matSelect.open();\n      }\n    } else if ($event.key === IKeyboardEvent.HOME) {\n      this.matSelect._keyManager.setFirstItemActive();\n    } else if ($event.key === IKeyboardEvent.END) {\n      this.matSelect._keyManager.setLastItemActive();\n    }\n  }\n}\n","<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      data-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        <div class=\"mat-option-section\" *ngFor=\"let section of valueList\">\n          <span *ngIf=\"section.sectionTitle\" class=\"section-title\">{{ section.sectionTitle }}</span>\n          <mat-option\n            *ngIf=\"section\"\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        </div>\n      }\n    </mat-select>\n    <ui-button\n      [ariaLabel]=\"('COMMON.CLEAR' | uiTranslate | async)!\"\n      *ngIf=\"allowClear && !matSelect.empty\"\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    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"!matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_down' : 'Arrow-chevron-down-filled'\"\n    ></ui-icon>\n    <ui-icon\n      class=\"chevron-icon\"\n      *ngIf=\"matSelect.panelOpen\"\n      size=\"24\"\n      [applicationTheme]=\"applicationTheme\"\n      [name]=\"applicationTheme === 'classic' ? 'Arrow_up' : 'Arrow-chevron-up-filled'\"\n    ></ui-icon>\n    <mat-hint class=\"error\" *ngIf=\"errorsLength || (ngControl?.errors | hasValidationError)\">\n      <ng-container *ngIf=\"errorsLength\">\n        <div class=\"errors\" *ngFor=\"let error of errors\">\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Error' : 'Error-in-line'\"\n          ></ui-icon\n          >{{ error }}\n        </div>\n      </ng-container>\n\n      <ui-validation-error\n        *ngIf=\"ngControl && !hideBuiltInErrors\"\n        [ngControl]=\"ngControl\"\n        [label]=\"hideLabelInErrors ? null : label\"\n      ></ui-validation-error>\n    </mat-hint>\n  </mat-form-field>\n</ng-container>\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { DropdownComponent } from './dropdown.component';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\nimport { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';\nimport { HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n  declarations: [DropdownComponent],\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatInputModule,\n    IconComponentModule,\n    FormsModule,\n    ReactiveFormsModule,\n    ButtonComponentModule,\n    MatSelectModule,\n    UiTranslatePipe,\n    ValidationErrorModule,\n    HasValidationErrorPipe,\n  ],\n  exports: [DropdownComponent],\n})\nexport class DropdownComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}