// © 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 { Component, EventEmitter, Input, Output, ViewEncapsulation, } from "@angular/core";
import _isEmpty from "lodash/isEmpty";
import { Subject } from "rxjs";
import * as i0 from "@angular/core";
import * as i1 from "../button/button.component";
import * as i2 from "@angular/common";
import * as i3 from "@angular/forms";
import * as i4 from "../../common/directives/set-focus/set-focus.directive";
// <example-url>./../examples/index.html#/search</example-url>
/**
 * Search component provides input box with 'search' and 'cancel' buttons on the right side of the box.
 * Handles setting focus to its inner input fields on cancel.
 * Fires 'search', 'cancel', 'inputChanged' and 'focusChange' events.
 * Indicates spinner to the left of input text depending on 'busy' property.
 */
export class SearchComponent {
    constructor() {
        // mark this filter to be monitored by our datasource for any changes in order reset other filters(eg: pagination)
        // before any new search is performed
        this.detectFilterChanges = true;
        /** @ignore */
        this.onDestroy$ = new Subject();
        /**
         * Input to apply error state styles
         */
        this.isInErrorState = false;
        /**
         * Event fired on each 'cancel' button click. Emits empty string.
         */
        this.cancel = new EventEmitter();
        /**
         * Event fired on external focus changes (e.g. initiated by user via UI).
         * Use it if you bind an external input to 'captureFocus' property for matching them both.
         */
        this.focusChange = new EventEmitter();
        /**
         * Event fired when input field value is changed (via either keyboard or typeahead select item).
         * Pay attention, that host property bound to 'value' is not being changed by component on this event,
         * it is the responsibility of host component. The same with clearing of 'busy' status - if you want
         * to clear it on inputChange - handle it in host component
         */
        this.inputChange = new EventEmitter();
        /**
         * Event fired on 'search' button click or 'ENTER' key pressed
         */
        this.search = new EventEmitter();
        this.searchIconColor = "gray";
        this.defaultPlaceholder = $localize `Search`;
    }
    getFilters() {
        return {
            type: "string",
            value: this.value,
        };
    }
    getPlaceholder() {
        return this.placeholder || this.defaultPlaceholder + "...";
    }
    onCancel() {
        this.value = "";
        this.cancel.emit(this.value);
        this.captureFocus = true;
        this.focusChange.emit(true);
    }
    onFocusChange(event) {
        this.captureFocus = event;
        this.focusChange.emit(event);
    }
    onInputChange() {
        this.inputChange.emit(this.value);
    }
    onKeyup(event) {
        if (event.key === "Enter") {
            this.onSearch();
        }
    }
    isButtonDisabled() {
        return _isEmpty(this.value);
    }
    onSearch() {
        this.search.emit(this.value);
    }
    ngOnDestroy() {
        this.onDestroy$.next();
        this.onDestroy$.complete();
    }
}
SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SearchComponent, selector: "nui-search", inputs: { captureFocus: "captureFocus", name: "name", isInErrorState: "isInErrorState", placeholder: "placeholder", value: "value" }, outputs: { cancel: "cancel", focusChange: "focusChange", inputChange: "inputChange", search: "search" }, host: { attributes: { "role": "search" }, classAttribute: "nui-search" }, ngImport: i0, template: "<div class=\"nui-search__group input-group\" [class.has-error]=\"isInErrorState\">\n    <div class=\"nui-search__input\">\n        <div class=\"nui-search__button input-group-btn\">\n            <button\n                nui-button\n                type=\"button\"\n                *ngIf=\"!!value\"\n                class=\"nui-search__button-cancel\"\n                displayStyle=\"action\"\n                icon=\"close\"\n                (click)=\"onCancel()\"\n            ></button>\n            <button\n                nui-button\n                type=\"button\"\n                class=\"nui-search__button-search\"\n                displayStyle=\"action\"\n                icon=\"search\"\n                [disabled]=\"isButtonDisabled()\"\n                (click)=\"onSearch()\"\n            ></button>\n        </div>\n        <input\n            class=\"nui-search__input-control form-control\"\n            type=\"text\"\n            [attr.name]=\"name\"\n            [nuiSetFocus]=\"captureFocus\"\n            (focusChange)=\"onFocusChange($event)\"\n            autocomplete=\"off\"\n            (input)=\"onInputChange()\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"getPlaceholder()\"\n            (keyup)=\"onKeyup($event)\"\n            [attr.aria-invalid]=\"isInErrorState\"\n        />\n    </div>\n</div>\n", styles: [".nui .nui-search__group{position:relative;max-width:400px;min-width:180px;width:100%}.nui .nui-search__group[class*=col-]{float:none;padding-left:0;padding-right:0}.nui .nui-search__group .form-control{position:relative;margin-bottom:0;width:100%;z-index:2}.nui .nui-search__input{display:flex;position:relative}.nui .nui-search__input:before,.nui .nui-search__input:after{content:\" \";display:table;width:0px}.nui .nui-search__input:after{clear:both}.nui .nui-search__input-spinner{left:6px;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.nui .nui-search__input-control.form-control{border-radius:3px;font-weight:400;padding-right:60px;transition:padding-left .3s ease;z-index:0}.nui .nui-search__input-control.form-control::-moz-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));opacity:1;font-weight:400}.nui .nui-search__input-control.form-control:-ms-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-search__input-control.form-control::-webkit-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-search__input-control.form-control:hover,.nui .nui-search__input-control.form-control:active{z-index:1}.nui .nui-search__input-control.form-control:focus{z-index:1;outline:none;box-shadow:0 0 0 2px #00c4d280}.nui .nui-search__input .dropdown-menu{border-color:var(--nui-color-line-active,#0079aa);box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3));margin-top:-1px;max-height:300px;overflow-y:auto}.nui .nui-search__input .dropdown-menu>li.active>a{background-color:var(--nui-color-bg-light-hover,#f2f2f2);cursor:pointer}.nui .nui-search__input .dropdown-menu>li>a{padding:5px 10px}.nui .nui-search__button{align-items:center;display:flex;font-size:0;justify-content:flex-end;position:absolute;right:0;z-index:2}.nui .nui-search__button:hover~.nui-search__input-control{border-color:var(--nui-color-line-default-hover,#b3b3b3)}.nui .nui-search__button:hover~.nui-search__input-control:focus{border-color:var(--nui-color-line-active,#0079aa)}.nui .nui-search__button>.nui-button:focus,.nui .nui-search__button>.nui-button:focus:active{outline:none}.nui .nui-search__button>.btn{position:relative}.nui .nui-search__button .btn-action[disabled] .nui-icon path,.nui .nui-search__button .btn-action[disabled] .nui-icon polygon{fill:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui .nui-search__button-cancel{border:none;border-bottom-right-radius:0;border-right:1px solid;border-right-color:var(--nui-color-line-default,#d9d9d9);border-top-right-radius:0;position:absolute;z-index:1}.nui .nui-search__button-cancel.nui-button.btn-action{min-height:28px;padding:5px}.nui .nui-search__button-search{border:none;border-top-left-radius:0;border-bottom-left-radius:0;z-index:2}.nui .nui-search.unlimited-width .nui-search__group{max-width:unset}\n"], components: [{ type: i1.ButtonComponent, selector: "[nui-button]", inputs: ["displayStyle", "icon", "iconColor", "iconRight", "isBusy", "isEmpty", "ariaLabel", "isRepeat", "size"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.SetFocusDirective, selector: "[nuiSetFocus]", inputs: ["nuiSetFocus", "preventScroll"], outputs: ["focusChange"] }, { type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SearchComponent, decorators: [{
            type: Component,
            args: [{ selector: "nui-search", host: {
                        class: "nui-search",
                        role: "search",
                    }, encapsulation: ViewEncapsulation.None, template: "<div class=\"nui-search__group input-group\" [class.has-error]=\"isInErrorState\">\n    <div class=\"nui-search__input\">\n        <div class=\"nui-search__button input-group-btn\">\n            <button\n                nui-button\n                type=\"button\"\n                *ngIf=\"!!value\"\n                class=\"nui-search__button-cancel\"\n                displayStyle=\"action\"\n                icon=\"close\"\n                (click)=\"onCancel()\"\n            ></button>\n            <button\n                nui-button\n                type=\"button\"\n                class=\"nui-search__button-search\"\n                displayStyle=\"action\"\n                icon=\"search\"\n                [disabled]=\"isButtonDisabled()\"\n                (click)=\"onSearch()\"\n            ></button>\n        </div>\n        <input\n            class=\"nui-search__input-control form-control\"\n            type=\"text\"\n            [attr.name]=\"name\"\n            [nuiSetFocus]=\"captureFocus\"\n            (focusChange)=\"onFocusChange($event)\"\n            autocomplete=\"off\"\n            (input)=\"onInputChange()\"\n            [(ngModel)]=\"value\"\n            [placeholder]=\"getPlaceholder()\"\n            (keyup)=\"onKeyup($event)\"\n            [attr.aria-invalid]=\"isInErrorState\"\n        />\n    </div>\n</div>\n", styles: [".nui .nui-search__group{position:relative;max-width:400px;min-width:180px;width:100%}.nui .nui-search__group[class*=col-]{float:none;padding-left:0;padding-right:0}.nui .nui-search__group .form-control{position:relative;margin-bottom:0;width:100%;z-index:2}.nui .nui-search__input{display:flex;position:relative}.nui .nui-search__input:before,.nui .nui-search__input:after{content:\" \";display:table;width:0px}.nui .nui-search__input:after{clear:both}.nui .nui-search__input-spinner{left:6px;position:absolute;top:50%;transform:translateY(-50%);z-index:2}.nui .nui-search__input-control.form-control{border-radius:3px;font-weight:400;padding-right:60px;transition:padding-left .3s ease;z-index:0}.nui .nui-search__input-control.form-control::-moz-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));opacity:1;font-weight:400}.nui .nui-search__input-control.form-control:-ms-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-search__input-control.form-control::-webkit-input-placeholder{color:var(--input-color-placeholder,rgba(17, 17, 17, .6));font-weight:400}.nui .nui-search__input-control.form-control:hover,.nui .nui-search__input-control.form-control:active{z-index:1}.nui .nui-search__input-control.form-control:focus{z-index:1;outline:none;box-shadow:0 0 0 2px #00c4d280}.nui .nui-search__input .dropdown-menu{border-color:var(--nui-color-line-active,#0079aa);box-shadow:0 0 5px 0 var(--nui-shadow-color, rgba(17, 17, 17, .3));margin-top:-1px;max-height:300px;overflow-y:auto}.nui .nui-search__input .dropdown-menu>li.active>a{background-color:var(--nui-color-bg-light-hover,#f2f2f2);cursor:pointer}.nui .nui-search__input .dropdown-menu>li>a{padding:5px 10px}.nui .nui-search__button{align-items:center;display:flex;font-size:0;justify-content:flex-end;position:absolute;right:0;z-index:2}.nui .nui-search__button:hover~.nui-search__input-control{border-color:var(--nui-color-line-default-hover,#b3b3b3)}.nui .nui-search__button:hover~.nui-search__input-control:focus{border-color:var(--nui-color-line-active,#0079aa)}.nui .nui-search__button>.nui-button:focus,.nui .nui-search__button>.nui-button:focus:active{outline:none}.nui .nui-search__button>.btn{position:relative}.nui .nui-search__button .btn-action[disabled] .nui-icon path,.nui .nui-search__button .btn-action[disabled] .nui-icon polygon{fill:var(--nui-color-icon-default,rgba(17, 17, 17, .5))}.nui .nui-search__button-cancel{border:none;border-bottom-right-radius:0;border-right:1px solid;border-right-color:var(--nui-color-line-default,#d9d9d9);border-top-right-radius:0;position:absolute;z-index:1}.nui .nui-search__button-cancel.nui-button.btn-action{min-height:28px;padding:5px}.nui .nui-search__button-search{border:none;border-top-left-radius:0;border-bottom-left-radius:0;z-index:2}.nui .nui-search.unlimited-width .nui-search__group{max-width:unset}\n"] }]
        }], ctorParameters: function () { return []; }, propDecorators: { captureFocus: [{
                type: Input
            }], name: [{
                type: Input
            }], isInErrorState: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], value: [{
                type: Input
            }], cancel: [{
                type: Output
            }], focusChange: [{
                type: Output
            }], inputChange: [{
                type: Output
            }], search: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 