// © 2022 SolarWinds Worldwide, LLC. All rights reserved.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to
//  deal in the Software without restriction, including without limitation the
//  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
//  sell copies of the Software, and to permit persons to whom the Software is
//  furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
//  all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
//  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
//  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
//  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
//  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
//  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
//  THE SOFTWARE.
import { FocusMonitor } from "@angular/cdk/a11y";
import { ChangeDetectorRef, Component, ElementRef, forwardRef, HostBinding, Input, QueryList, Renderer2, ViewChild, ViewChildren, ViewEncapsulation, } from "@angular/core";
import { NG_VALUE_ACCESSOR } from "@angular/forms";
import _debounce from "lodash/debounce";
import _escape from "lodash/escape";
import _every from "lodash/every";
import _find from "lodash/find";
import _flatMap from "lodash/flatMap";
import _includes from "lodash/includes";
import _isArray from "lodash/isArray";
import _isEmpty from "lodash/isEmpty";
import _isNil from "lodash/isNil";
import _isUndefined from "lodash/isUndefined";
import _some from "lodash/some";
import _unescape from "lodash/unescape";
import { Subject } from "rxjs";
import { LoggerService } from "../../../services/log-service";
import { UtilService } from "../../../services/util.service";
import { NuiFormFieldControl } from "../../form-field/public-api";
import { MenuActionComponent } from "../../menu/menu-item/menu-action/menu-action.component";
import { MenuGroupComponent } from "../../menu/menu-item/menu-group/menu-group.component";
import { MenuKeyControlService } from "../../menu/menu-key-control.service";
import { PopupComponent } from "../../popup-adapter/popup-adapter.component";
import { BaseSelect } from "../base-select";
import * as i0 from "@angular/core";
import * as i1 from "../../../services/util.service";
import * as i2 from "../../menu/menu-key-control.service";
import * as i3 from "@angular/cdk/a11y";
import * as i4 from "../../../services/log-service";
import * as i5 from "../../popup-adapter/popup-adapter.component";
import * as i6 from "../../icon/icon.component";
import * as i7 from "../../textbox/textbox.component";
import * as i8 from "../../button/button.component";
import * as i9 from "../../menu/menu-item/menu-action/menu-action.component";
import * as i10 from "../../menu/menu-item/menu-group/menu-group.component";
import * as i11 from "@angular/common";
import * as i12 from "../../popup/popup-toggle.directive";
import * as i13 from "../../../pipes/highlight.pipe";
// <example-url>./../examples/index.html#/combobox</example-url>
/**
 * @deprecated in v11 - Use ComboboxV2Component instead - Removal: NUI-5796
 */
export class ComboboxComponent extends BaseSelect {
    constructor(utilService, elRef, renderer, changeDetector, keyControlService, focusMonitor, logger) {
        super(utilService);
        this.elRef = elRef;
        this.renderer = renderer;
        this.changeDetector = changeDetector;
        this.keyControlService = keyControlService;
        this.focusMonitor = focusMonitor;
        this.logger = logger;
        this.openControl = new Subject();
        this.debouncedBlur = _debounce(() => {
            this.handleBlur();
        }, 300);
        this.comboboxEventListeners = [];
        // Blur is debounced cause when you click on menu item blur is triggered twice: from textbox and when popup is closed.
        this.comboboxEventListeners.push(this.renderer.listen(this.elRef.nativeElement, "focusout", () => {
            this.debouncedBlur();
        }));
        this.logger.warn("<nui-combobox> is deprecated as of Nova v11. Please use <nui-combobox-v2> instead.");
    }
    get isJustified() {
        return this.justified;
    }
    get isInline() {
        return this.inline;
    }
    ngOnInit() {
        super.ngOnInit();
    }
    ngOnChanges(changes) {
        super.ngOnChanges(changes);
    }
    displayPlaceholder() {
        return !_isUndefined(this.placeholder) && _isEmpty(this.inputValue);
    }
    displayPlaceholderValue() {
        return this.displayPlaceholder() ? this.placeholder : "";
    }
    showIcon() {
        return !_isNil(this.icon);
    }
    showRightBorder() {
        return !this.isRemoveValueDisplayed() && !_isEmpty(this.inputValue);
    }
    isRemoveValueDisplayed() {
        return this.isRemoveValueEnabled && !_isEmpty(this.inputValue);
    }
    ngAfterViewInit() {
        // setting data for key-control service
        this.setKeyboardManagerServiceData();
        // initializing key-control manager
        this.keyControlService.initKeyboardManager();
        // listening to events for key-control
        this.comboboxEventListeners.push(this.renderer.listen(this.elRef.nativeElement, "keydown", (event) => {
            this.keyControlService.handleKeydown(event);
        }));
        // listen to focus event to open popup using tab key
        // The FocusMonitor is an injectable service that can be used to listen for changes in the focus state of an element.
        // It's more powerful than just listening for focus or blur events because it tells you how the element was focused
        // (via mouse, keyboard, touch, or programmatically).
        // It also allows listening for focus on descendant elements if desired as it is done below by passing second
        // argument with value true in the monitor method of FocusMonitor.
        this.focusMonitorSubscription = this.focusMonitor
            .monitor(this.comboboxToggle.nativeElement, true)
            .subscribe((origin) => {
            if (origin === "keyboard") {
                if (!this.popup.popupToggle.disabled) {
                    if (!this.isOpened) {
                        this.openControl.next(new FocusEvent("focusin"));
                    }
                }
            }
        });
        // when datasource change we need to re-initialize key control stuff
        this.itemsChangeSubscription = this.menuItems.changes.subscribe((changes) => {
            this.keyControlService.initKeyboardManager();
            this.keyControlService.setActiveItem(0);
            this.changeDetector.detectChanges();
        });
        // when appendToBody is set width of the popup element should be calculated
        // To get actual value detectChanges() call afterViewInit is needed
        this.changeDetector.detectChanges();
    }
    setKeyboardManagerServiceData() {
        this.keyControlService.menuGroups = this.menuGroups;
        this.keyControlService.menuItems = this.menuItems;
        this.keyControlService.popup = this.popup;
        this.keyControlService.menuToggle = this.comboboxToggle;
    }
    openChange(currentValue) {
        this.keyControlService.setActiveItem(-1);
        this.isOpened = currentValue;
    }
    onInputChange(value) {
        const oldValue = this.selectedItem;
        const newValue = this.displayValue
            ? this.findObjectByValue(value)
            : value;
        this.changeValue(newValue);
        this.changed.emit({ newValue, oldValue });
    }
    handleBlur() {
        const newValue = this.displayValue
            ? this.findObjectByValue(_unescape(this.inputValue))
            : _unescape(this.inputValue);
        const isGroupedData = this.isGroupedData(this.itemsSource);
        let isInArray;
        if (isGroupedData) {
            const flattenedData = _flatMap(this.itemsSource, (group) => group.items);
            isInArray = this.displayValue
                ? _some(flattenedData, newValue)
                : _includes(flattenedData, newValue);
        }
        else {
            isInArray = this.displayValue
                ? _some(this.itemsSource, newValue)
                : _includes(this.itemsSource, newValue);
        }
        const valueToSelect = this.clearOnBlur && !isInArray ? "" : this.selectedItem;
        this.select(valueToSelect);
    }
    select(item) {
        super.select(item);
    }
    findObjectByValue(value) {
        let arrayOfValues;
        // for itemsSource passed as ISelectGroup[]
        if (this.isGroupedData(this.itemsSource)) {
            arrayOfValues = _flatMap(this.itemsSource, (group) => group.items);
        }
        else {
            arrayOfValues = this.itemsSource;
        }
        const foundObject = _find(arrayOfValues, [this.displayValue, value]);
        return foundObject ? foundObject : value;
    }
    isGroupedData(itemsSource) {
        return _every(itemsSource, (group) => _isArray(group.items));
    }
    getItemDisplay(item) {
        return super.getItemDisplay(item);
    }
    escapeItem(item) {
        return _escape(item);
    }
    unescapeItem(item) {
        return _unescape(item);
    }
    ngOnDestroy() {
        if (this.itemsChangeSubscription) {
            this.itemsChangeSubscription.unsubscribe();
        }
        if (this.comboboxEventListeners.length > 0) {
            this.comboboxEventListeners.forEach((listener) => listener());
        }
        if (this.focusMonitorSubscription) {
            this.focusMonitorSubscription.unsubscribe();
        }
    }
    getWidth() {
        return this.customTemplate
            ? "auto"
            : this.popupRef.nativeElement.getBoundingClientRect().width;
    }
    getPopupContextClass() {
        return `${this.justified ? "nui-combobox--justified " : ""}nui-combobox-popup-host`;
    }
    clearValue(event) {
        if (this.isRemoveValueEnabled) {
            this.changeValue(null);
            event.stopPropagation(); // To avoid triggering dropdown open/close
            this.popup.closePopup();
        }
    }
}
ComboboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxComponent, deps: [{ token: i1.UtilService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i2.MenuKeyControlService }, { token: i3.FocusMonitor }, { token: i4.LoggerService }], target: i0.ɵɵFactoryTarget.Component });
ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ComboboxComponent, selector: "nui-combobox", inputs: { clearOnBlur: "clearOnBlur", appendToBody: "appendToBody" }, host: { properties: { "class.nui-combobox--justified": "this.isJustified", "class.nui-combobox--inline": "this.isInline" }, classAttribute: "nui-combobox" }, providers: [
        {
            provide: NG_VALUE_ACCESSOR,
            multi: true,
            useExisting: forwardRef(() => ComboboxComponent),
        },
        {
            provide: NuiFormFieldControl,
            useExisting: forwardRef(() => ComboboxComponent),
            multi: true,
        },
        MenuKeyControlService,
    ], viewQueries: [{ propertyName: "comboboxToggle", first: true, predicate: ["comboboxToggle"], descendants: true, read: ElementRef }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef }, { propertyName: "popup", first: true, predicate: PopupComponent, descendants: true }, { propertyName: "popupRef", first: true, predicate: PopupComponent, descendants: true, read: ElementRef, static: true }, { propertyName: "menuItems", predicate: MenuActionComponent, descendants: true }, { propertyName: "menuGroups", predicate: MenuGroupComponent, descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"nui-combobox__layout-block\" [class.disabled]=\"isDisabled\">\n    <nui-popup\n        [class.custom-template]=\"customTemplate\"\n        (opened)=\"openChange($event)\"\n        [manualOpenControl]=\"openControl\"\n        [width]=\"getWidth()\"\n        [contextClass]=\"getPopupContextClass()\"\n        [appendToBody]=\"appendToBody\"\n    >\n        <div class=\"nui-combobox__icon\" *ngIf=\"!!icon\">\n            <nui-icon\n                [icon]=\"icon\"\n                aria-hidden=\"true\"\n                [iconColor]=\"getIconColor()\"\n            ></nui-icon>\n        </div>\n        <div\n            class=\"nui-combobox__container\"\n            [class.has-error]=\"isInErrorState\"\n            [class.nui-combobox__editable-container--disabled]=\"isDisabled\"\n            nuiPopupToggle\n            [disabled]=\"isDisabled\"\n        >\n            <nui-textbox\n                class=\"nui-combobox__input\"\n                [class.nui-combobox__input-icon]=\"showIcon()\"\n                [class.nui-combobox__right-border]=\"showRightBorder()\"\n                [class.nui-combobox__input--with-remove-value]=\"\n                    isRemoveValueDisplayed()\n                \"\n                type=\"text\"\n                autocomplete=\"off\"\n                [value]=\"unescapeItem(inputValue)\"\n                [placeholder]=\"displayPlaceholderValue()\"\n                (textChange)=\"onInputChange($event)\"\n                [disabled]=\"isDisabled\"\n                [isInErrorState]=\"isInErrorState\"\n                [ariaLabel]=\"ariaLabel\"\n                #comboboxToggle\n            >\n            </nui-textbox>\n            <button\n                tabindex=\"-1\"\n                *ngIf=\"isRemoveValueDisplayed()\"\n                nui-button\n                class=\"nui-combobox__remove-value\"\n                (click)=\"clearValue($event)\"\n                [isEmpty]=\"true\"\n                icon=\"remove\"\n                title=\"remove\"\n                displayStyle=\"action\"\n                type=\"button\"\n            ></button>\n            <button\n                tabindex=\"-1\"\n                class=\"nui-combobox__toggle\"\n                nui-button\n                [isEmpty]=\"true\"\n                icon=\"caret-down\"\n                title=\"toggle\"\n                displayStyle=\"action\"\n                type=\"button\"\n                [class.disabled]=\"isDisabled\"\n                [disabled]=\"isDisabled\"\n            ></button>\n        </div>\n        <div popupAreaContent>\n            <div #scrollContainer class=\"nui-menu nui-combobox__menu\">\n                <ng-container *ngFor=\"let item of itemsSource\">\n                    <nui-menu-action\n                        tabindex=\"-1\"\n                        *ngIf=\"!item.items\"\n                        [class.item-selected]=\"isItemSelected(item)\"\n                        (actionDone)=\"select(item)\"\n                    >\n                        <span\n                            tabindex=\"-1\"\n                            *ngIf=\"!customTemplate\"\n                            [innerHTML]=\"\n                                getItemDisplay(item)\n                                    | nuiHighlight\n                                        : (isItemSelected(item)\n                                              ? ''\n                                              : inputValue)\n                            \"\n                        ></span>\n                        <ng-container\n                            [ngTemplateOutlet]=\"customTemplate\"\n                            [ngTemplateOutletContext]=\"{ context: item }\"\n                        >\n                        </ng-container>\n                    </nui-menu-action>\n                    <nui-menu-group\n                        tabindex=\"-1\"\n                        *ngIf=\"item.items\"\n                        [header]=\"item.header\"\n                    >\n                        <nui-menu-action\n                            *ngFor=\"let groupedItem of item.items\"\n                            [class.item-selected]=\"isItemSelected(groupedItem)\"\n                            (actionDone)=\"select(groupedItem)\"\n                        >\n                            <span\n                                tabindex=\"-1\"\n                                [innerHTML]=\"\n                                    getItemDisplay(groupedItem)\n                                        | nuiHighlight\n                                            : (isItemSelected(groupedItem)\n                                                  ? ''\n                                                  : inputValue)\n                                \"\n                            ></span>\n                        </nui-menu-action>\n                    </nui-menu-group>\n                </ng-container>\n            </div>\n        </div>\n    </nui-popup>\n</div>\n", styles: [".nui-menu-item{display:list-item;list-style-type:none;white-space:nowrap;margin-bottom:1px;font-size:13px;background-color:var(--nui-color-bg-transparent,transparent)}.nui-menu-item:not(.nui-menu-item--header){min-height:30px}.nui-menu-item .nui-icon{margin-right:5px}.nui-menu-item:not(.nui-menu-item--header):hover{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-menu-item:not(.nui-menu-item--header):hover .nui-checkbox__label{background-color:var(--transparent,transparent)}.nui-menu-item.nui-menu-item--header{padding:5px 10px;text-transform:uppercase;cursor:default;font-size:11px;color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));line-height:14px}.nui-menu-item.nui-menu-item__default,.nui-menu-item .nui-checkbox__transclude,.nui-menu-item>.nui-menu-item__link,.nui-menu-item>.nui-menu-item__switch,.nui-menu-item>.nui-menu-item__option{overflow:hidden;text-overflow:ellipsis}.nui-menu-item>.nui-menu-item__link,.nui-menu-item>.nui-menu-item__switch,.nui-menu-item>.nui-menu-item__option,.nui-menu-item>.nui-menu-item__default{display:flex;align-items:center;padding:5px 10px;text-decoration:none}.nui-menu-item>.nui-menu-item__link:active,.nui-menu-item>.nui-menu-item__switch:active,.nui-menu-item>.nui-menu-item__option:active,.nui-menu-item>.nui-menu-item__default:active,.nui-menu-item>.nui-menu-item__link:focus,.nui-menu-item>.nui-menu-item__switch:focus,.nui-menu-item>.nui-menu-item__option:focus,.nui-menu-item>.nui-menu-item__default:focus{outline:none;z-index:500;box-shadow:inset 0 0 0 2px #00c4d280}.nui-menu-item.checked{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-menu-item.checked:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2));font-weight:600;cursor:pointer}.nui-menu-item .nui-menu-item__default{padding:5px 10px;cursor:pointer;color:var(--nui-color-text-default,#111)}.nui-menu-item .nui-menu-item__default:hover{color:var(--nui-color-text-default-hover,#000000)}.nui-menu-item--active{background-color:var(--nui-color-bg-light-hover,#f2f2f2);outline:none;z-index:500;box-shadow:inset 0 0 0 2px #00c4d280}.nui-menu-item--active.nui-menu-item--selected,.nui-menu-item--active.nui-menu-item.checked{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui-menu-item.nui-menu-item--selected{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-menu-item.nui-menu-item--selected:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui .nui-combobox .nui-combobox__container{outline:none;border-radius:3px;border:1px solid #d9d9d9;border:1px solid var(--nui-color-line-default, #d9d9d9)}.nui .nui-combobox .nui-combobox__container.nui-combobox__editable-container--disabled{background-color:var(--nui-color-disabled-secondary,#e8e8e8)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):hover{border-color:var(--nui-color-line-default-hover,#b3b3b3)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):focus-within{border-color:var(--nui-color-line-active,#0079aa)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox .nui-combobox__container.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-combobox .nui-combobox__container.has-error:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox--inline .nui-combobox__layout-block{display:inline-flex}.nui .nui-combobox .btn{border-radius:0 3px 3px 0}.nui .nui-combobox .btn:hover,.nui .nui-combobox .btn:active{outline:none}.nui .nui-combobox .btn:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox .btn.disabled{color:var(--nui-color-disabled,#b3b3b3);pointer-events:auto;cursor:not-allowed}.nui .nui-combobox .btn.disabled:hover,.nui .nui-combobox .btn.disabled:active{color:var(--nui-color-disabled,#b3b3b3);background-color:var(--transparent,transparent);box-shadow:none}.nui .nui-combobox .btn.disabled .nui-icon path,.nui .nui-combobox .btn.disabled .nui-icon polygon{fill:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui .nui-combobox .nui-menu-item .nui-menu-item__action{color:var(--nui-color-text-default,#111)}.nui .nui-combobox .nui-menu-item.item-selected .nui-menu-item__action{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));color:var(--nui-color-text-default,#111);font-weight:600}.nui .nui-combobox .nui-menu-item.item-selected .nui-menu-item__action:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui .nui-combobox .nui-popup .nui-popup__area [popupAreaContent]{padding:0}.nui .nui-combobox .nui-popup .nui-popup__area{width:100%;min-width:160px;max-width:400px;height:100%;overflow-y:auto}.nui .nui-combobox .nui-combobox__menu{max-height:300px;overflow-y:auto;max-width:400px;overflow-y:initial}.nui .nui-combobox__input{float:left;width:200px;height:30px;border-radius:3px 0 0 3px;border:0;box-shadow:none}.nui .nui-combobox__input--with-remove-value{width:170px}.nui .nui-combobox__input:not(:disabled):hover,.nui .nui-combobox__input:not(:disabled):focus{border-color:var(--nui-color-line-default,#d9d9d9);position:relative}.nui .nui-combobox__input .nui-textbox__input{border:none;box-shadow:none}.nui .nui-combobox__input .nui-textbox__input::-moz-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));opacity:1;font-weight:400}.nui .nui-combobox__input .nui-textbox__input:-ms-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-combobox__input .nui-textbox__input::-webkit-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-combobox__input .nui-textbox__input.input-control{border-radius:3px 0 0 3px;padding-right:0;margin-bottom:0}.nui .nui-combobox__input .nui-textbox__input.input-control:active{border:#0079aa}.nui .nui-combobox__input .nui-textbox__input.input-control:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox__remove-value{border-right:1px solid var(--nui-color-line-default, #d9d9d9);border-left:none}.nui .nui-combobox__icon{align-items:center;display:flex;height:22px;left:7px;pointer-events:none;position:absolute;top:5px;z-index:501}.nui .nui-combobox__input-icon .nui-textbox .has-feedback .nui-textbox__input{padding-left:32px}.nui .nui-combobox__right-border{border-right:1px solid var(--nui-color-line-default, #d9d9d9)}.nui .nui-combobox.disabled>.nui-combobox__container{background-color:var(--nui-color-disabled-secondary,#e8e8e8)}.nui .nui-combobox.disabled>.nui-combobox__btn-group>.btn{color:var(--nui-color-off,#4d4d4d);background-color:var(--nui-color-line-default,#d9d9d9);border-color:var(--nui-color-line-default,#d9d9d9)}.nui .nui-combobox--justified .nui-popup,.nui .nui-combobox--justified .nui-popup .nui-popup-container{flex-grow:1}.nui .nui-combobox--justified .nui-popup .nui-popup__content{width:100%}.nui .nui-combobox--justified .nui-combobox__layout-block{display:flex}.nui .nui-combobox--justified .nui-combobox__container{display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-combobox__input{width:auto;display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-combobox__input .nui-textbox,.nui .nui-combobox--justified .nui-combobox__input .nui-textbox .has-feedback{display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-popup .nui-popup__area,.nui .nui-combobox--justified .nui-popup .nui-popup__area .nui-combobox__menu{max-width:none}.nui .nui-combobox .custom-template .nui-combobox__menu,.nui .nui-combobox .custom-template .nui-popup__area{width:auto}@-moz-document url-prefix(){.nui .nui-combobox .nui-menu-item{padding-right:0}}\n"], components: [{ type: i5.PopupComponent, selector: "nui-popup", inputs: ["width", "overlayConfig", "contextClass", "directionTop", "directionRight", "manualOpenControl", "appendToBody", "baseElementSelector", "isHostToggleRef", "ariaLabel", "isOpen", "visible"], outputs: ["opened"] }, { type: i6.IconComponent, selector: "nui-icon", inputs: ["iconColor", "brushType", "iconHoverColor", "iconSize", "cssClass", "fillContainer", "status", "childStatus", "icon", "counter"] }, { type: i7.TextboxComponent, selector: "nui-textbox", inputs: ["caption", "autocomplete", "info", "customBoxWidth", "disabled", "hint", "name", "placeholder", "readonly", "rows", "type", "value", "isInErrorState", "ariaLabel", "isBusy"], outputs: ["textChange", "blurred"] }, { type: i8.ButtonComponent, selector: "[nui-button]", inputs: ["displayStyle", "icon", "iconColor", "iconRight", "isBusy", "isEmpty", "ariaLabel", "isRepeat", "size"] }, { type: i9.MenuActionComponent, selector: "nui-menu-action", inputs: ["icon", "type"] }, { type: i10.MenuGroupComponent, selector: "nui-menu-group", inputs: ["header"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.PopupToggleDirective, selector: "[nuiPopupToggle]", inputs: ["isDisabled", "disabled"], outputs: ["toggle"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i11.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "nuiHighlight": i13.HighlightPipe }, encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ComboboxComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-combobox", host: { class: "nui-combobox" }, providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            multi: true,
                            useExisting: forwardRef(() => ComboboxComponent),
                        },
                        {
                            provide: NuiFormFieldControl,
                            useExisting: forwardRef(() => ComboboxComponent),
                            multi: true,
                        },
                        MenuKeyControlService,
                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"nui-combobox__layout-block\" [class.disabled]=\"isDisabled\">\n    <nui-popup\n        [class.custom-template]=\"customTemplate\"\n        (opened)=\"openChange($event)\"\n        [manualOpenControl]=\"openControl\"\n        [width]=\"getWidth()\"\n        [contextClass]=\"getPopupContextClass()\"\n        [appendToBody]=\"appendToBody\"\n    >\n        <div class=\"nui-combobox__icon\" *ngIf=\"!!icon\">\n            <nui-icon\n                [icon]=\"icon\"\n                aria-hidden=\"true\"\n                [iconColor]=\"getIconColor()\"\n            ></nui-icon>\n        </div>\n        <div\n            class=\"nui-combobox__container\"\n            [class.has-error]=\"isInErrorState\"\n            [class.nui-combobox__editable-container--disabled]=\"isDisabled\"\n            nuiPopupToggle\n            [disabled]=\"isDisabled\"\n        >\n            <nui-textbox\n                class=\"nui-combobox__input\"\n                [class.nui-combobox__input-icon]=\"showIcon()\"\n                [class.nui-combobox__right-border]=\"showRightBorder()\"\n                [class.nui-combobox__input--with-remove-value]=\"\n                    isRemoveValueDisplayed()\n                \"\n                type=\"text\"\n                autocomplete=\"off\"\n                [value]=\"unescapeItem(inputValue)\"\n                [placeholder]=\"displayPlaceholderValue()\"\n                (textChange)=\"onInputChange($event)\"\n                [disabled]=\"isDisabled\"\n                [isInErrorState]=\"isInErrorState\"\n                [ariaLabel]=\"ariaLabel\"\n                #comboboxToggle\n            >\n            </nui-textbox>\n            <button\n                tabindex=\"-1\"\n                *ngIf=\"isRemoveValueDisplayed()\"\n                nui-button\n                class=\"nui-combobox__remove-value\"\n                (click)=\"clearValue($event)\"\n                [isEmpty]=\"true\"\n                icon=\"remove\"\n                title=\"remove\"\n                displayStyle=\"action\"\n                type=\"button\"\n            ></button>\n            <button\n                tabindex=\"-1\"\n                class=\"nui-combobox__toggle\"\n                nui-button\n                [isEmpty]=\"true\"\n                icon=\"caret-down\"\n                title=\"toggle\"\n                displayStyle=\"action\"\n                type=\"button\"\n                [class.disabled]=\"isDisabled\"\n                [disabled]=\"isDisabled\"\n            ></button>\n        </div>\n        <div popupAreaContent>\n            <div #scrollContainer class=\"nui-menu nui-combobox__menu\">\n                <ng-container *ngFor=\"let item of itemsSource\">\n                    <nui-menu-action\n                        tabindex=\"-1\"\n                        *ngIf=\"!item.items\"\n                        [class.item-selected]=\"isItemSelected(item)\"\n                        (actionDone)=\"select(item)\"\n                    >\n                        <span\n                            tabindex=\"-1\"\n                            *ngIf=\"!customTemplate\"\n                            [innerHTML]=\"\n                                getItemDisplay(item)\n                                    | nuiHighlight\n                                        : (isItemSelected(item)\n                                              ? ''\n                                              : inputValue)\n                            \"\n                        ></span>\n                        <ng-container\n                            [ngTemplateOutlet]=\"customTemplate\"\n                            [ngTemplateOutletContext]=\"{ context: item }\"\n                        >\n                        </ng-container>\n                    </nui-menu-action>\n                    <nui-menu-group\n                        tabindex=\"-1\"\n                        *ngIf=\"item.items\"\n                        [header]=\"item.header\"\n                    >\n                        <nui-menu-action\n                            *ngFor=\"let groupedItem of item.items\"\n                            [class.item-selected]=\"isItemSelected(groupedItem)\"\n                            (actionDone)=\"select(groupedItem)\"\n                        >\n                            <span\n                                tabindex=\"-1\"\n                                [innerHTML]=\"\n                                    getItemDisplay(groupedItem)\n                                        | nuiHighlight\n                                            : (isItemSelected(groupedItem)\n                                                  ? ''\n                                                  : inputValue)\n                                \"\n                            ></span>\n                        </nui-menu-action>\n                    </nui-menu-group>\n                </ng-container>\n            </div>\n        </div>\n    </nui-popup>\n</div>\n", styles: [".nui-menu-item{display:list-item;list-style-type:none;white-space:nowrap;margin-bottom:1px;font-size:13px;background-color:var(--nui-color-bg-transparent,transparent)}.nui-menu-item:not(.nui-menu-item--header){min-height:30px}.nui-menu-item .nui-icon{margin-right:5px}.nui-menu-item:not(.nui-menu-item--header):hover{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05))}.nui-menu-item:not(.nui-menu-item--header):hover .nui-checkbox__label{background-color:var(--transparent,transparent)}.nui-menu-item.nui-menu-item--header{padding:5px 10px;text-transform:uppercase;cursor:default;font-size:11px;color:var(--nui-color-text-secondary,rgba(17, 17, 17, .6));line-height:14px}.nui-menu-item.nui-menu-item__default,.nui-menu-item .nui-checkbox__transclude,.nui-menu-item>.nui-menu-item__link,.nui-menu-item>.nui-menu-item__switch,.nui-menu-item>.nui-menu-item__option{overflow:hidden;text-overflow:ellipsis}.nui-menu-item>.nui-menu-item__link,.nui-menu-item>.nui-menu-item__switch,.nui-menu-item>.nui-menu-item__option,.nui-menu-item>.nui-menu-item__default{display:flex;align-items:center;padding:5px 10px;text-decoration:none}.nui-menu-item>.nui-menu-item__link:active,.nui-menu-item>.nui-menu-item__switch:active,.nui-menu-item>.nui-menu-item__option:active,.nui-menu-item>.nui-menu-item__default:active,.nui-menu-item>.nui-menu-item__link:focus,.nui-menu-item>.nui-menu-item__switch:focus,.nui-menu-item>.nui-menu-item__option:focus,.nui-menu-item>.nui-menu-item__default:focus{outline:none;z-index:500;box-shadow:inset 0 0 0 2px #00c4d280}.nui-menu-item.checked{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-menu-item.checked:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2));font-weight:600;cursor:pointer}.nui-menu-item .nui-menu-item__default{padding:5px 10px;cursor:pointer;color:var(--nui-color-text-default,#111)}.nui-menu-item .nui-menu-item__default:hover{color:var(--nui-color-text-default-hover,#000000)}.nui-menu-item--active{background-color:var(--nui-color-bg-light-hover,#f2f2f2);outline:none;z-index:500;box-shadow:inset 0 0 0 2px #00c4d280}.nui-menu-item--active.nui-menu-item--selected,.nui-menu-item--active.nui-menu-item.checked{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui-menu-item.nui-menu-item--selected{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));font-weight:600}.nui-menu-item.nui-menu-item--selected:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui .nui-combobox .nui-combobox__container{outline:none;border-radius:3px;border:1px solid #d9d9d9;border:1px solid var(--nui-color-line-default, #d9d9d9)}.nui .nui-combobox .nui-combobox__container.nui-combobox__editable-container--disabled{background-color:var(--nui-color-disabled-secondary,#e8e8e8)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):hover{border-color:var(--nui-color-line-default-hover,#b3b3b3)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):focus-within{border-color:var(--nui-color-line-active,#0079aa)}.nui .nui-combobox .nui-combobox__container:not(.nui-combobox__editable-container--disabled):not(.has-error):focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox .nui-combobox__container.has-error{border-color:var(--nui-color-line-critical,#dd2c00)}.nui .nui-combobox .nui-combobox__container.has-error:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox--inline .nui-combobox__layout-block{display:inline-flex}.nui .nui-combobox .btn{border-radius:0 3px 3px 0}.nui .nui-combobox .btn:hover,.nui .nui-combobox .btn:active{outline:none}.nui .nui-combobox .btn:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox .btn.disabled{color:var(--nui-color-disabled,#b3b3b3);pointer-events:auto;cursor:not-allowed}.nui .nui-combobox .btn.disabled:hover,.nui .nui-combobox .btn.disabled:active{color:var(--nui-color-disabled,#b3b3b3);background-color:var(--transparent,transparent);box-shadow:none}.nui .nui-combobox .btn.disabled .nui-icon path,.nui .nui-combobox .btn.disabled .nui-icon polygon{fill:var(--nui-color-icon-disabled,rgba(17, 17, 17, .3))}.nui .nui-combobox .nui-menu-item .nui-menu-item__action{color:var(--nui-color-text-default,#111)}.nui .nui-combobox .nui-menu-item.item-selected .nui-menu-item__action{background-color:var(--nui-color-selected,rgba(0, 196, 210, .1));color:var(--nui-color-text-default,#111);font-weight:600}.nui .nui-combobox .nui-menu-item.item-selected .nui-menu-item__action:hover{background-color:var(--nui-color-selected-hover,rgba(0, 196, 210, .2))}.nui .nui-combobox .nui-popup .nui-popup__area [popupAreaContent]{padding:0}.nui .nui-combobox .nui-popup .nui-popup__area{width:100%;min-width:160px;max-width:400px;height:100%;overflow-y:auto}.nui .nui-combobox .nui-combobox__menu{max-height:300px;overflow-y:auto;max-width:400px;overflow-y:initial}.nui .nui-combobox__input{float:left;width:200px;height:30px;border-radius:3px 0 0 3px;border:0;box-shadow:none}.nui .nui-combobox__input--with-remove-value{width:170px}.nui .nui-combobox__input:not(:disabled):hover,.nui .nui-combobox__input:not(:disabled):focus{border-color:var(--nui-color-line-default,#d9d9d9);position:relative}.nui .nui-combobox__input .nui-textbox__input{border:none;box-shadow:none}.nui .nui-combobox__input .nui-textbox__input::-moz-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));opacity:1;font-weight:400}.nui .nui-combobox__input .nui-textbox__input:-ms-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-combobox__input .nui-textbox__input::-webkit-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-combobox__input .nui-textbox__input.input-control{border-radius:3px 0 0 3px;padding-right:0;margin-bottom:0}.nui .nui-combobox__input .nui-textbox__input.input-control:active{border:#0079aa}.nui .nui-combobox__input .nui-textbox__input.input-control:focus{background-color:var(--nui-color-bg-transparent-hover,rgba(17, 17, 17, .05));outline:none;z-index:500;box-shadow:0 0 0 2px #00c4d280}.nui .nui-combobox__remove-value{border-right:1px solid var(--nui-color-line-default, #d9d9d9);border-left:none}.nui .nui-combobox__icon{align-items:center;display:flex;height:22px;left:7px;pointer-events:none;position:absolute;top:5px;z-index:501}.nui .nui-combobox__input-icon .nui-textbox .has-feedback .nui-textbox__input{padding-left:32px}.nui .nui-combobox__right-border{border-right:1px solid var(--nui-color-line-default, #d9d9d9)}.nui .nui-combobox.disabled>.nui-combobox__container{background-color:var(--nui-color-disabled-secondary,#e8e8e8)}.nui .nui-combobox.disabled>.nui-combobox__btn-group>.btn{color:var(--nui-color-off,#4d4d4d);background-color:var(--nui-color-line-default,#d9d9d9);border-color:var(--nui-color-line-default,#d9d9d9)}.nui .nui-combobox--justified .nui-popup,.nui .nui-combobox--justified .nui-popup .nui-popup-container{flex-grow:1}.nui .nui-combobox--justified .nui-popup .nui-popup__content{width:100%}.nui .nui-combobox--justified .nui-combobox__layout-block{display:flex}.nui .nui-combobox--justified .nui-combobox__container{display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-combobox__input{width:auto;display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-combobox__input .nui-textbox,.nui .nui-combobox--justified .nui-combobox__input .nui-textbox .has-feedback{display:flex;flex-grow:1}.nui .nui-combobox--justified .nui-popup .nui-popup__area,.nui .nui-combobox--justified .nui-popup .nui-popup__area .nui-combobox__menu{max-width:none}.nui .nui-combobox .custom-template .nui-combobox__menu,.nui .nui-combobox .custom-template .nui-popup__area{width:auto}@-moz-document url-prefix(){.nui .nui-combobox .nui-menu-item{padding-right:0}}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.UtilService }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i2.MenuKeyControlService }, { type: i3.FocusMonitor }, { type: i4.LoggerService }]; }, propDecorators: { clearOnBlur: [{
                type: Input
            }], appendToBody: [{
                type: Input
            }], menuItems: [{
                type: ViewChildren,
                args: [MenuActionComponent]
            }], comboboxToggle: [{
                type: ViewChild,
                args: ["comboboxToggle", { read: ElementRef }]
            }], scrollContainer: [{
                type: ViewChild,
                args: ["scrollContainer", { read: ElementRef }]
            }], menuGroups: [{
                type: ViewChildren,
                args: [MenuGroupComponent]
            }], popup: [{
                type: ViewChild,
                args: [PopupComponent]
            }], popupRef: [{
                type: ViewChild,
                args: [PopupComponent, { read: ElementRef, static: true }]
            }], isJustified: [{
                type: HostBinding,
                args: ["class.nui-combobox--justified"]
            }], isInline: [{
                type: HostBinding,
                args: ["class.nui-combobox--inline"]
            }] } });
//# sourceMappingURL=data:application/json;base64, 