import { Component, Input, Output, EventEmitter, ElementRef, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/icon";
import * as i3 from "@angular/forms";
const _c0 = ["searchBox"];
function AxoSearchBarComponent_mat_icon_5_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "mat-icon", 6);
    i0.ɵɵlistener("click", function AxoSearchBarComponent_mat_icon_5_Template_mat_icon_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r2 = i0.ɵɵnextContext(); return ctx_r2.clearSearchText(); });
    i0.ɵɵtext(1, "clear");
    i0.ɵɵelementEnd();
} }
const _c1 = function (a0) { return { "search-global-border": a0 }; };
const _c2 = function (a0) { return { "search-icon": a0 }; };
export class AxoSearchBarComponent {
    constructor() {
        // <-------- (Inputs) ------------------->
        this.searchText = '';
        //<-----------(Outputs) ----------------->
        this.searchTextChanged = new EventEmitter();
        // <---------------( component variable)------------>
        this.showSearchBox = false;
    }
    ngOnInit() {
    }
    openSearchBox() {
        this.showSearchBox = true;
        this.searchElement.nativeElement.focus();
    }
    /**
     * Clear Search text
     */
    clearSearchText() {
        this.searchText = '';
        this.showSearchBox = false;
        this.searchTextChanged.emit(this.searchText);
    }
    /**
     * Search Text
     */
    search() {
        this.searchTextChanged.emit(this.searchText);
    }
}
AxoSearchBarComponent.ɵfac = function AxoSearchBarComponent_Factory(t) { return new (t || AxoSearchBarComponent)(); };
AxoSearchBarComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: AxoSearchBarComponent, selectors: [["axo-search-bar"]], viewQuery: function AxoSearchBarComponent_Query(rf, ctx) { if (rf & 1) {
        i0.ɵɵviewQuery(_c0, 5);
    } if (rf & 2) {
        let _t;
        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.searchElement = _t.first);
    } }, inputs: { searchText: "searchText" }, outputs: { searchTextChanged: "searchTextChanged" }, decls: 6, vars: 11, consts: [[1, "filter-search", 3, "ngClass"], [1, "icon-btn", 3, "click"], [3, "ngClass", "svgIcon"], ["id", "global-field-search", "autocomplete", "off", "placeholder", "Search...", "matInput", "", 1, "search-bar", "chart-title", 3, "ngModel", "keydown", "keyup", "ngModelChange"], ["searchBox", ""], ["class", "clear_icon cursor-pointer", 3, "click", 4, "ngIf"], [1, "clear_icon", "cursor-pointer", 3, "click"]], template: function AxoSearchBarComponent_Template(rf, ctx) { if (rf & 1) {
        i0.ɵɵelementStart(0, "div", 0);
        i0.ɵɵelementStart(1, "button", 1);
        i0.ɵɵlistener("click", function AxoSearchBarComponent_Template_button_click_1_listener() { return ctx.openSearchBox(); });
        i0.ɵɵelement(2, "mat-icon", 2);
        i0.ɵɵelementEnd();
        i0.ɵɵelementStart(3, "input", 3, 4);
        i0.ɵɵlistener("keydown", function AxoSearchBarComponent_Template_input_keydown_3_listener($event) { return $event.stopPropagation(); })("keyup", function AxoSearchBarComponent_Template_input_keyup_3_listener() { return ctx.search(); })("ngModelChange", function AxoSearchBarComponent_Template_input_ngModelChange_3_listener($event) { return ctx.searchText = $event; });
        i0.ɵɵelementEnd();
        i0.ɵɵtemplate(5, AxoSearchBarComponent_mat_icon_5_Template, 2, 0, "mat-icon", 5);
        i0.ɵɵelementEnd();
    } if (rf & 2) {
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(7, _c1, ctx.showSearchBox));
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c2, ctx.showSearchBox))("svgIcon", "heroicons_solid:search");
        i0.ɵɵadvance(1);
        i0.ɵɵstyleProp("width", !ctx.showSearchBox ? "0" : "100%");
        i0.ɵɵproperty("ngModel", ctx.searchText);
        i0.ɵɵadvance(2);
        i0.ɵɵproperty("ngIf", ctx.showSearchBox);
    } }, directives: [i1.NgClass, i2.MatIcon, i3.DefaultValueAccessor, i3.NgControlStatus, i3.NgModel, i1.NgIf], styles: [".clear_icon[_ngcontent-%COMP%]{cursor:pointer;color:#000!important;background:transparent!important;font-size:18px;width:18px;min-width:18px;opacity:.6}.clear_icon[_ngcontent-%COMP%]:hover{opacity:.9}"] });
(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AxoSearchBarComponent, [{
        type: Component,
        args: [{ selector: 'axo-search-bar', template: "<div class=\"filter-search\" [ngClass]=\"{'search-global-border' : showSearchBox}\">\n    <button (click)=\"openSearchBox()\" class=\"icon-btn\"> <mat-icon [ngClass]=\"{'search-icon' : showSearchBox}\" [svgIcon]=\"'heroicons_solid:search'\"></mat-icon></button>\n    <input  #searchBox (keydown)=\"$event.stopPropagation();\"  id=\"global-field-search\" autocomplete=\"off\" placeholder=\"Search...\" (keyup)=\"search()\"  [(ngModel)]=\"searchText\" matInput class=\"search-bar chart-title\"  [style.width]=\"!showSearchBox ? '0' : '100%'\" />\n    <mat-icon (click)=\"clearSearchText()\" *ngIf=\"showSearchBox\" class=\"clear_icon cursor-pointer\">clear</mat-icon>\n</div>\n", styles: [".clear_icon{cursor:pointer;color:#000!important;background:transparent!important;font-size:18px;width:18px;min-width:18px;opacity:.6}.clear_icon:hover{opacity:.9}\n"] }]
    }], function () { return []; }, { searchElement: [{
            type: ViewChild,
            args: ['searchBox']
        }], searchText: [{
            type: Input
        }], searchTextChanged: [{
            type: Output
        }] }); })();
//# sourceMappingURL=data:application/json;base64, 