/**
 * @license
 * Copyright Akveo. All Rights Reserved.
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostBinding, Input, Output, ViewChild, } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { of as observableOf, Subject } from 'rxjs';
import { filter, delay, takeUntil } from 'rxjs/operators';
import { NbPortalDirective } from '../cdk/overlay/mapping';
import * as i0 from "@angular/core";
import * as i1 from "../button/button.component";
import * as i2 from "../icon/icon.component";
import * as i3 from "@angular/forms";
import * as i4 from "./search.service";
import * as i5 from "../../services/theme.service";
import * as i6 from "@angular/router";
import * as i7 from "../cdk/overlay/overlay-service";
import * as i8 from "../cdk/overlay/mapping";
/**
 * search-field-component is used under the hood by nb-search component
 * can't be used itself
 */
export class NbSearchFieldComponent {
    constructor() {
        this.show = false;
        this.close = new EventEmitter();
        this.search = new EventEmitter();
        this.searchInput = new EventEmitter();
    }
    get showClass() {
        return this.show;
    }
    get modalZoomin() {
        return this.type === NbSearchFieldComponent.TYPE_MODAL_ZOOMIN;
    }
    get rotateLayout() {
        return this.type === NbSearchFieldComponent.TYPE_ROTATE_LAYOUT;
    }
    get modalMove() {
        return this.type === NbSearchFieldComponent.TYPE_MODAL_MOVE;
    }
    get curtain() {
        return this.type === NbSearchFieldComponent.TYPE_CURTAIN;
    }
    get columnCurtain() {
        return this.type === NbSearchFieldComponent.TYPE_COLUMN_CURTAIN;
    }
    get modalDrop() {
        return this.type === NbSearchFieldComponent.TYPE_MODAL_DROP;
    }
    get modalHalf() {
        return this.type === NbSearchFieldComponent.TYPE_MODAL_HALF;
    }
    ngOnChanges({ show }) {
        const becameHidden = !show.isFirstChange() && show.currentValue === false;
        if (becameHidden && this.inputElement) {
            this.inputElement.nativeElement.value = '';
        }
        this.focusInput();
    }
    ngAfterViewInit() {
        this.focusInput();
    }
    emitClose() {
        this.close.emit();
    }
    submitSearch(term) {
        if (term) {
            this.search.emit(term);
        }
    }
    emitSearchInput(term) {
        this.searchInput.emit(term);
    }
    focusInput() {
        if (this.show && this.inputElement) {
            this.inputElement.nativeElement.focus();
        }
    }
}
NbSearchFieldComponent.TYPE_MODAL_ZOOMIN = 'modal-zoomin';
NbSearchFieldComponent.TYPE_ROTATE_LAYOUT = 'rotate-layout';
NbSearchFieldComponent.TYPE_MODAL_MOVE = 'modal-move';
NbSearchFieldComponent.TYPE_CURTAIN = 'curtain';
NbSearchFieldComponent.TYPE_COLUMN_CURTAIN = 'column-curtain';
NbSearchFieldComponent.TYPE_MODAL_DROP = 'modal-drop';
NbSearchFieldComponent.TYPE_MODAL_HALF = 'modal-half';
NbSearchFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: NbSearchFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
NbSearchFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: NbSearchFieldComponent, selector: "nb-search-field", inputs: { type: "type", placeholder: "placeholder", hint: "hint", show: "show" }, outputs: { close: "close", search: "search", searchInput: "searchInput" }, host: { properties: { "class.show": "this.showClass", "class.modal-zoomin": "this.modalZoomin", "class.rotate-layout": "this.rotateLayout", "class.modal-move": "this.modalMove", "class.curtain": "this.curtain", "class.column-curtain": "this.columnCurtain", "class.modal-drop": "this.modalDrop", "class.modal-half": "this.modalHalf" } }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
    <div class="search" (keyup.esc)="emitClose()">
      <button (click)="emitClose()" nbButton ghost class="close-button">
        <nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
      </button>
      <div class="form-wrapper">
        <form class="form" (keyup.enter)="submitSearch(searchInput.value)">
          <div class="form-content">
            <input class="search-input"
                   #searchInput
                   (input)="emitSearchInput(searchInput.value)"
                   autocomplete="off"
                   [attr.placeholder]="placeholder"
                   tabindex="-1"
                   (blur)="focusInput()"/>
          </div>
          <span class="info">{{ hint }}</span>
        </form>
      </div>
    </div>
  `, isInline: true, styles: ["/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/:host button{margin:0;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}:host input{border-top:0;border-right:0;border-left:0;background:transparent;border-radius:0;line-height:1;display:inline-block;box-sizing:border-box;padding:.05rem 0;-webkit-appearance:none}:host input:focus{outline:none}:host input:-ms-input-placeholder,:host input::placeholder{opacity:.3}:host span{font-size:90%;font-weight:bold;display:block;width:75%;margin:0 auto;padding:.85rem 0;text-align:right}:host.modal-zoomin{display:block}:host.modal-zoomin .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity .5s}:host.modal-zoomin .search:before,:host.modal-zoomin .search:after{content:\"\";position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);pointer-events:none}:host.modal-zoomin .search:before{top:0;left:0;border-right-width:0;border-bottom-width:0;transform:translate(-15px,-15px)}:host.modal-zoomin .search:after{right:0;bottom:0;border-top-width:0;border-left-width:0;transform:translate(15px,15px)}:host.modal-zoomin .search button{position:absolute;top:3rem;font-size:2.5rem}[dir=ltr] :host.modal-zoomin .search button{right:3rem}[dir=rtl] :host.modal-zoomin .search button{left:3rem}:host.modal-zoomin .search input{font-size:10vw;width:75%}:host.modal-zoomin .search button,:host.modal-zoomin .search form{opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.modal-zoomin.show .search{pointer-events:auto;opacity:1}:host.modal-zoomin.show .search:before,:host.modal-zoomin.show .search:after{transform:translate(0);transition:transform .5s}:host.modal-zoomin.show .search button,:host.modal-zoomin.show .search form{opacity:1;transform:scale(1)}@media screen and (max-width: 40rem){:host.modal-zoomin form{margin:5rem 0 1rem}:host.modal-zoomin span{text-align:left}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.rotate-layout{position:fixed;overflow:hidden;width:100%}::ng-deep nb-layout.rotate-layout .scrollable-container{position:relative;z-index:10001;transition:transform .5s cubic-bezier(.2,1,.3,1)}::ng-deep nb-layout.rotate-layout.with-search .scrollable-container{transition:transform .5s cubic-bezier(.2,1,.3,1);transform-origin:50vw 50vh;transform:perspective(1000px) translateY(50vh) rotateX(30deg);pointer-events:none}:host.rotate-layout{position:absolute;display:block;width:100vw;height:100vh;pointer-events:none;opacity:0;transition-property:opacity;transition-delay:.4s}:host.rotate-layout .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:50vh;pointer-events:none;opacity:0;transition:opacity .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.rotate-layout .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}[dir=ltr] :host.rotate-layout .search button{right:3rem}[dir=rtl] :host.rotate-layout .search button{left:3rem}:host.rotate-layout .search form{margin:5rem 0;opacity:0;transform:scale(.7);transition:opacity .5s,transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.rotate-layout .search input{font-size:7vw;width:75%}:host.rotate-layout.show{opacity:1;transition-delay:0s}:host.rotate-layout.show .search{pointer-events:auto;opacity:1}:host.rotate-layout.show .search button,:host.rotate-layout.show .search form{opacity:1;transform:scale(1)}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-move .layout{transition:transform .5s}::ng-deep nb-layout.modal-move.with-search .layout{transform:scale(.8);pointer-events:none}:host.modal-move .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity .5s}:host.modal-move .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transition:opacity .5s}[dir=ltr] :host.modal-move .search button{right:3rem}[dir=rtl] :host.modal-move .search button{left:3rem}:host.modal-move .search form{margin:5rem 0;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.modal-move .search input{font-size:10vw;width:75%;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}:host.modal-move.show .search{pointer-events:auto;opacity:1}:host.modal-move.show .search button{opacity:1}:host.modal-move.show .search form{opacity:1;transform:scale(1)}:host.modal-move.show .search input{transform:scale(1);transition-duration:.5s}@media screen and (max-width: 40rem){:host.modal-move span{text-align:left}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/:host.curtain .search{position:fixed;z-index:1050;top:0;left:100%;overflow:hidden;height:100vh;width:100%;padding:3rem;pointer-events:none;transition:transform .3s;transition-delay:.4s;transition-timing-function:ease-out}:host.curtain .search:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .3s;transition-timing-function:ease-out}:host.curtain .search button{font-size:2.5rem;position:absolute;top:3rem;transition:opacity .1s;transition-delay:.3s}[dir=ltr] :host.curtain .search button{right:3rem}[dir=rtl] :host.curtain .search button{left:3rem}:host.curtain .search form{width:50%;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.curtain .search input{width:100%;font-size:6vw}:host.curtain.show .search{width:100%;pointer-events:auto;transform:translate(-100%);transition-delay:0s}:host.curtain.show .search:after{transform:translate(100%);transition-delay:.4s}:host.curtain.show .search button,:host.curtain.show .search form{opacity:1;transform:scale(1)}@media screen and (max-width: 40em){:host.curtain span{width:90%}:host.curtain input{font-size:2em;width:90%}}::ng-deep nb-layout.curtain .scrollable-container{position:relative;z-index:0}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/::ng-deep nb-layout.column-curtain.with-search .layout{pointer-events:none}:host.column-curtain{display:block;position:fixed;z-index:1050;top:0;left:50%;overflow:hidden;width:50%;height:100vh;pointer-events:none}:host.column-curtain:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s;transition-timing-function:cubic-bezier(.86,0,.07,1)}:host.column-curtain .search{position:relative;padding:2.5rem 1.5rem 0;background:transparent}:host.column-curtain .search button{position:absolute;top:2rem;font-size:2.5rem;opacity:0;transition:opacity .5s}[dir=ltr] :host.column-curtain .search button{right:2rem}[dir=rtl] :host.column-curtain .search button{left:2rem}:host.column-curtain .search form{width:85%;transform:translate(-150%);transition:transform .3s}:host.column-curtain .search input{font-size:2.5rem;width:100%}:host.column-curtain .search span{font-size:85%}:host.column-curtain.show{pointer-events:auto}:host.column-curtain.show:before{transform:scale(1)}:host.column-curtain.show .search form{transform:translate(0);transition-delay:.15s;transition-timing-function:cubic-bezier(.86,0,.07,1)}:host.column-curtain.show .search button{opacity:1;z-index:100}@media screen and (max-width: 40rem){:host.column-curtain span{width:90%}:host.column-curtain input{font-size:2rem;width:90%}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-drop .layout{position:relative;transition:transform .4s,opacity .4s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::ng-deep nb-layout.modal-drop.with-search .layout{opacity:0;transform:scale(.9);pointer-events:none}:host.modal-drop .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-drop .search:before{content:\"\";position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity .4s}:host.modal-drop .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;opacity:0;transition:opacity .4s}[dir=ltr] :host.modal-drop .search button{right:3rem}[dir=rtl] :host.modal-drop .search button{left:3rem}:host.modal-drop .search form{position:relative;margin:5rem 0 2rem}:host.modal-drop .search input{font-size:6vw;width:60%;padding:.25rem;text-align:center;opacity:0;transition:opacity .4s}:host.modal-drop .search span{position:relative;z-index:9;display:block;width:60%;padding:.85rem 0;opacity:0;transform:translateY(-50px);transition:opacity .4s,transform .4s}:host.modal-drop .search .form-content{position:relative;z-index:10;overflow:hidden;transform:translateY(-50px);transition:transform .4s}:host.modal-drop .search .form-content:after{content:\"\";position:absolute;top:0;left:20%;width:60%;height:105%;opacity:0;transform-origin:50% 0}:host.modal-drop.show .search{pointer-events:auto}:host.modal-drop.show .search:before,:host.modal-drop.show .search button{opacity:1}:host.modal-drop.show .search .form-content{transform:translate(0);transition:none}:host.modal-drop.show .search .form-content:after{animation:scaleUpDown .8s cubic-bezier(.4,0,.2,1) forwards}:host.modal-drop.show .search input{opacity:1;transition:opacity 0s .4s}:host.modal-drop.show .search span{opacity:1;transform:translate(0);transition-delay:.4s;transition-timing-function:ease-out}@keyframes scaleUpDown{0%{opacity:1;transform:scaleY(0)}50%{transform:scale(1);transform-origin:50% 0;transition-timing-function:ease-out}50.1%{transform-origin:50% 100%;transition-timing-function:ease-out}to{opacity:1;transform:scaleY(0);transform-origin:50% 100%;transition-timing-function:ease-out}}@media screen and (max-width: 40rem){:host.modal-drop form{margin:2rem 0}:host.modal-drop input{width:100%;left:0}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-half .layout{transition:transform .6s,opacity .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}::ng-deep nb-layout.modal-half.with-search .layout{transform:scale(.8);pointer-events:none}:host.modal-half .search{text-align:center;position:fixed;z-index:1050;top:0;left:0;overflow:hidden;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-half .search:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.modal-half .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;z-index:100;opacity:0;transform:scale(.8);transition:opacity .6s,transform .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}[dir=ltr] :host.modal-half .search button{right:3rem}[dir=rtl] :host.modal-half .search button{left:3rem}:host.modal-half .search .form-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:50%;transition:transform .6s;transition-timing-function:cubic-bezier(.2,1,.3,1);transform:translateY(-100%)}:host.modal-half .search form{width:75%;margin:0 auto}:host.modal-half .search input{font-size:7vw;width:100%}:host.modal-half.show .search{pointer-events:auto}:host.modal-half.show .search:before{opacity:1}:host.modal-half.show .search button{opacity:1;transform:scale(1)}:host.modal-half.show .search .form-wrapper{transform:translate(0)}\n"], components: [{ type: i1.NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]", inputs: ["hero"] }, { type: i2.NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"] }], directives: [{ type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: NbSearchFieldComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nb-search-field', changeDetection: ChangeDetectionStrategy.OnPush, template: `
    <div class="search" (keyup.esc)="emitClose()">
      <button (click)="emitClose()" nbButton ghost class="close-button">
        <nb-icon icon="close-outline" pack="nebular-essentials"></nb-icon>
      </button>
      <div class="form-wrapper">
        <form class="form" (keyup.enter)="submitSearch(searchInput.value)">
          <div class="form-content">
            <input class="search-input"
                   #searchInput
                   (input)="emitSearchInput(searchInput.value)"
                   autocomplete="off"
                   [attr.placeholder]="placeholder"
                   tabindex="-1"
                   (blur)="focusInput()"/>
          </div>
          <span class="info">{{ hint }}</span>
        </form>
      </div>
    </div>
  `, styles: ["/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/:host button{margin:0;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}:host input{border-top:0;border-right:0;border-left:0;background:transparent;border-radius:0;line-height:1;display:inline-block;box-sizing:border-box;padding:.05rem 0;-webkit-appearance:none}:host input:focus{outline:none}:host input:-ms-input-placeholder,:host input::placeholder{opacity:.3}:host span{font-size:90%;font-weight:bold;display:block;width:75%;margin:0 auto;padding:.85rem 0;text-align:right}:host.modal-zoomin{display:block}:host.modal-zoomin .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity .5s}:host.modal-zoomin .search:before,:host.modal-zoomin .search:after{content:\"\";position:absolute;width:calc(100% + 15px);height:calc(100% + 15px);pointer-events:none}:host.modal-zoomin .search:before{top:0;left:0;border-right-width:0;border-bottom-width:0;transform:translate(-15px,-15px)}:host.modal-zoomin .search:after{right:0;bottom:0;border-top-width:0;border-left-width:0;transform:translate(15px,15px)}:host.modal-zoomin .search button{position:absolute;top:3rem;font-size:2.5rem}[dir=ltr] :host.modal-zoomin .search button{right:3rem}[dir=rtl] :host.modal-zoomin .search button{left:3rem}:host.modal-zoomin .search input{font-size:10vw;width:75%}:host.modal-zoomin .search button,:host.modal-zoomin .search form{opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.modal-zoomin.show .search{pointer-events:auto;opacity:1}:host.modal-zoomin.show .search:before,:host.modal-zoomin.show .search:after{transform:translate(0);transition:transform .5s}:host.modal-zoomin.show .search button,:host.modal-zoomin.show .search form{opacity:1;transform:scale(1)}@media screen and (max-width: 40rem){:host.modal-zoomin form{margin:5rem 0 1rem}:host.modal-zoomin span{text-align:left}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.rotate-layout{position:fixed;overflow:hidden;width:100%}::ng-deep nb-layout.rotate-layout .scrollable-container{position:relative;z-index:10001;transition:transform .5s cubic-bezier(.2,1,.3,1)}::ng-deep nb-layout.rotate-layout.with-search .scrollable-container{transition:transform .5s cubic-bezier(.2,1,.3,1);transform-origin:50vw 50vh;transform:perspective(1000px) translateY(50vh) rotateX(30deg);pointer-events:none}:host.rotate-layout{position:absolute;display:block;width:100vw;height:100vh;pointer-events:none;opacity:0;transition-property:opacity;transition-delay:.4s}:host.rotate-layout .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:50vh;pointer-events:none;opacity:0;transition:opacity .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.rotate-layout .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}[dir=ltr] :host.rotate-layout .search button{right:3rem}[dir=rtl] :host.rotate-layout .search button{left:3rem}:host.rotate-layout .search form{margin:5rem 0;opacity:0;transform:scale(.7);transition:opacity .5s,transform .5s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.rotate-layout .search input{font-size:7vw;width:75%}:host.rotate-layout.show{opacity:1;transition-delay:0s}:host.rotate-layout.show .search{pointer-events:auto;opacity:1}:host.rotate-layout.show .search button,:host.rotate-layout.show .search form{opacity:1;transform:scale(1)}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-move .layout{transition:transform .5s}::ng-deep nb-layout.modal-move.with-search .layout{transform:scale(.8);pointer-events:none}:host.modal-move .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:fixed;z-index:1050;top:0;left:0;width:100%;height:100vh;pointer-events:none;opacity:0;transition:opacity .5s}:host.modal-move .search button{position:absolute;top:3rem;font-size:2.5rem;opacity:0;transition:opacity .5s}[dir=ltr] :host.modal-move .search button{right:3rem}[dir=rtl] :host.modal-move .search button{left:3rem}:host.modal-move .search form{margin:5rem 0;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.modal-move .search input{font-size:10vw;width:75%;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}:host.modal-move.show .search{pointer-events:auto;opacity:1}:host.modal-move.show .search button{opacity:1}:host.modal-move.show .search form{opacity:1;transform:scale(1)}:host.modal-move.show .search input{transform:scale(1);transition-duration:.5s}@media screen and (max-width: 40rem){:host.modal-move span{text-align:left}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/:host.curtain .search{position:fixed;z-index:1050;top:0;left:100%;overflow:hidden;height:100vh;width:100%;padding:3rem;pointer-events:none;transition:transform .3s;transition-delay:.4s;transition-timing-function:ease-out}:host.curtain .search:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transition:transform .3s;transition-timing-function:ease-out}:host.curtain .search button{font-size:2.5rem;position:absolute;top:3rem;transition:opacity .1s;transition-delay:.3s}[dir=ltr] :host.curtain .search button{right:3rem}[dir=rtl] :host.curtain .search button{left:3rem}:host.curtain .search form{width:50%;opacity:0;transform:scale(.8);transition:opacity .5s,transform .5s}:host.curtain .search input{width:100%;font-size:6vw}:host.curtain.show .search{width:100%;pointer-events:auto;transform:translate(-100%);transition-delay:0s}:host.curtain.show .search:after{transform:translate(100%);transition-delay:.4s}:host.curtain.show .search button,:host.curtain.show .search form{opacity:1;transform:scale(1)}@media screen and (max-width: 40em){:host.curtain span{width:90%}:host.curtain input{font-size:2em;width:90%}}::ng-deep nb-layout.curtain .scrollable-container{position:relative;z-index:0}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n *//**\n* @license\n* Copyright Akveo. All Rights Reserved.\n* Licensed under the MIT License. See License.txt in the project root for license information.\n*/::ng-deep nb-layout.column-curtain.with-search .layout{pointer-events:none}:host.column-curtain{display:block;position:fixed;z-index:1050;top:0;left:50%;overflow:hidden;width:50%;height:100vh;pointer-events:none}:host.column-curtain:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s;transition-timing-function:cubic-bezier(.86,0,.07,1)}:host.column-curtain .search{position:relative;padding:2.5rem 1.5rem 0;background:transparent}:host.column-curtain .search button{position:absolute;top:2rem;font-size:2.5rem;opacity:0;transition:opacity .5s}[dir=ltr] :host.column-curtain .search button{right:2rem}[dir=rtl] :host.column-curtain .search button{left:2rem}:host.column-curtain .search form{width:85%;transform:translate(-150%);transition:transform .3s}:host.column-curtain .search input{font-size:2.5rem;width:100%}:host.column-curtain .search span{font-size:85%}:host.column-curtain.show{pointer-events:auto}:host.column-curtain.show:before{transform:scale(1)}:host.column-curtain.show .search form{transform:translate(0);transition-delay:.15s;transition-timing-function:cubic-bezier(.86,0,.07,1)}:host.column-curtain.show .search button{opacity:1;z-index:100}@media screen and (max-width: 40rem){:host.column-curtain span{width:90%}:host.column-curtain input{font-size:2rem;width:90%}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-drop .layout{position:relative;transition:transform .4s,opacity .4s;transition-timing-function:cubic-bezier(.4,0,.2,1)}::ng-deep nb-layout.modal-drop.with-search .layout{opacity:0;transform:scale(.9);pointer-events:none}:host.modal-drop .search{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;z-index:1050;position:fixed;top:0;left:0;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-drop .search:before{content:\"\";position:absolute;top:0;right:0;width:100%;height:100%;opacity:0;transition:opacity .4s}:host.modal-drop .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;opacity:0;transition:opacity .4s}[dir=ltr] :host.modal-drop .search button{right:3rem}[dir=rtl] :host.modal-drop .search button{left:3rem}:host.modal-drop .search form{position:relative;margin:5rem 0 2rem}:host.modal-drop .search input{font-size:6vw;width:60%;padding:.25rem;text-align:center;opacity:0;transition:opacity .4s}:host.modal-drop .search span{position:relative;z-index:9;display:block;width:60%;padding:.85rem 0;opacity:0;transform:translateY(-50px);transition:opacity .4s,transform .4s}:host.modal-drop .search .form-content{position:relative;z-index:10;overflow:hidden;transform:translateY(-50px);transition:transform .4s}:host.modal-drop .search .form-content:after{content:\"\";position:absolute;top:0;left:20%;width:60%;height:105%;opacity:0;transform-origin:50% 0}:host.modal-drop.show .search{pointer-events:auto}:host.modal-drop.show .search:before,:host.modal-drop.show .search button{opacity:1}:host.modal-drop.show .search .form-content{transform:translate(0);transition:none}:host.modal-drop.show .search .form-content:after{animation:scaleUpDown .8s cubic-bezier(.4,0,.2,1) forwards}:host.modal-drop.show .search input{opacity:1;transition:opacity 0s .4s}:host.modal-drop.show .search span{opacity:1;transform:translate(0);transition-delay:.4s;transition-timing-function:ease-out}@keyframes scaleUpDown{0%{opacity:1;transform:scaleY(0)}50%{transform:scale(1);transform-origin:50% 0;transition-timing-function:ease-out}50.1%{transform-origin:50% 100%;transition-timing-function:ease-out}to{opacity:1;transform:scaleY(0);transform-origin:50% 100%;transition-timing-function:ease-out}}@media screen and (max-width: 40rem){:host.modal-drop form{margin:2rem 0}:host.modal-drop input{width:100%;left:0}}\n", "/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */::ng-deep nb-layout.modal-half .layout{transition:transform .6s,opacity .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}::ng-deep nb-layout.modal-half.with-search .layout{transform:scale(.8);pointer-events:none}:host.modal-half .search{text-align:center;position:fixed;z-index:1050;top:0;left:0;overflow:hidden;width:100%;height:100vh;background:none;pointer-events:none}:host.modal-half .search:before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}:host.modal-half .search button{font-size:2.5rem;position:absolute;top:3rem;display:block;z-index:100;opacity:0;transform:scale(.8);transition:opacity .6s,transform .6s;transition-timing-function:cubic-bezier(.2,1,.3,1)}[dir=ltr] :host.modal-half .search button{right:3rem}[dir=rtl] :host.modal-half .search button{left:3rem}:host.modal-half .search .form-wrapper{position:absolute;display:flex;justify-content:center;align-items:center;width:100%;height:50%;transition:transform .6s;transition-timing-function:cubic-bezier(.2,1,.3,1);transform:translateY(-100%)}:host.modal-half .search form{width:75%;margin:0 auto}:host.modal-half .search input{font-size:7vw;width:100%}:host.modal-half.show .search{pointer-events:auto}:host.modal-half.show .search:before{opacity:1}:host.modal-half.show .search button{opacity:1;transform:scale(1)}:host.modal-half.show .search .form-wrapper{transform:translate(0)}\n"] }]
        }], propDecorators: { type: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], hint: [{
                type: Input
            }], show: [{
                type: Input
            }], close: [{
                type: Output
            }], search: [{
                type: Output
            }], searchInput: [{
                type: Output
            }], inputElement: [{
                type: ViewChild,
                args: ['searchInput']
            }], showClass: [{
                type: HostBinding,
                args: ['class.show']
            }], modalZoomin: [{
                type: HostBinding,
                args: ['class.modal-zoomin']
            }], rotateLayout: [{
                type: HostBinding,
                args: ['class.rotate-layout']
            }], modalMove: [{
                type: HostBinding,
                args: ['class.modal-move']
            }], curtain: [{
                type: HostBinding,
                args: ['class.curtain']
            }], columnCurtain: [{
                type: HostBinding,
                args: ['class.column-curtain']
            }], modalDrop: [{
                type: HostBinding,
                args: ['class.modal-drop']
            }], modalHalf: [{
                type: HostBinding,
                args: ['class.modal-half']
            }] } });
/**
 * Beautiful full-page search control.
 *
 * @stacked-example(Showcase, search/search-showcase.component)
 *
 * Basic setup:
 *
 * ```ts
 *  <nb-search type="rotate-layout"></nb-search>
 * ```
 * ### Installation
 *
 * Import `NbSearchModule` to your feature module.
 * ```ts
 * @NgModule({
 *   imports: [
 *     // ...
 *     NbSearchModule,
 *   ],
 * })
 * export class PageModule { }
 * ```
 * ### Usage
 *
 * Several animation types are available:
 * modal-zoomin, rotate-layout, modal-move, curtain, column-curtain, modal-drop, modal-half
 *
 * It is also possible to handle search event using `NbSearchService`:
 *
 * @stacked-example(Search Event, search/search-event.component)
 *
 * @styles
 *
 * search-background-color:
 * search-divider-color:
 * search-divider-style:
 * search-divider-width:
 * search-extra-background-color:
 * search-text-color:
 * search-text-font-family:
 * search-text-font-size:
 * search-text-font-weight:
 * search-text-line-height:
 * search-placeholder-text-color:
 * search-info-text-color:
 * search-info-text-font-family:
 * search-info-text-font-size:
 * search-info-text-font-weight:
 * search-info-text-line-height:
 */
export class NbSearchComponent {
    constructor(searchService, themeService, router, overlayService, changeDetector) {
        this.searchService = searchService;
        this.themeService = themeService;
        this.router = router;
        this.overlayService = overlayService;
        this.changeDetector = changeDetector;
        this.destroy$ = new Subject();
        this.showSearchField = false;
        /**
         * Search input placeholder
         * @type {string}
         */
        this.placeholder = 'Search...';
        /**
         * Hint showing under the input field to improve user experience
         *
         * @type {string}
         */
        this.hint = 'Hit enter to search';
    }
    ngOnInit() {
        this.router.events
            .pipe(filter(event => event instanceof NavigationEnd), takeUntil(this.destroy$))
            .subscribe(() => this.hideSearch());
        this.searchService.onSearchActivate()
            .pipe(filter(data => !this.tag || data.tag === this.tag), takeUntil(this.destroy$))
            .subscribe(() => this.openSearch());
        this.searchService.onSearchDeactivate()
            .pipe(filter(data => !this.tag || data.tag === this.tag), takeUntil(this.destroy$))
            .subscribe(() => this.hideSearch());
    }
    ngOnDestroy() {
        if (this.overlayRef && this.overlayRef.hasAttached()) {
            this.removeLayoutClasses();
            this.overlayRef.detach();
        }
        this.destroy$.next();
        this.destroy$.complete();
    }
    openSearch() {
        if (!this.overlayRef) {
            this.overlayRef = this.overlayService.create();
            this.overlayRef.attach(this.searchFieldPortal);
        }
        this.themeService.appendLayoutClass(this.type);
        observableOf(null).pipe(delay(0)).subscribe(() => {
            this.themeService.appendLayoutClass('with-search');
            this.showSearchField = true;
            this.changeDetector.detectChanges();
        });
    }
    hideSearch() {
        this.removeLayoutClasses();
        this.showSearchField = false;
        this.changeDetector.detectChanges();
        this.searchButton.nativeElement.focus();
    }
    search(term) {
        this.searchService.submitSearch(term, this.tag);
        this.hideSearch();
    }
    emitInput(term) {
        this.searchService.searchInput(term, this.tag);
    }
    emitActivate() {
        this.searchService.activateSearch(this.type, this.tag);
    }
    emitDeactivate() {
        this.searchService.deactivateSearch(this.type, this.tag);
    }
    removeLayoutClasses() {
        this.themeService.removeLayoutClass('with-search');
        observableOf(null).pipe(delay(500)).subscribe(() => {
            this.themeService.removeLayoutClass(this.type);
        });
    }
}
NbSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: NbSearchComponent, deps: [{ token: i4.NbSearchService }, { token: i5.NbThemeService }, { token: i6.Router }, { token: i7.NbOverlayService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
NbSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.0", type: NbSearchComponent, selector: "nb-search", inputs: { tag: "tag", placeholder: "placeholder", hint: "hint", type: "type" }, viewQueries: [{ propertyName: "searchFieldPortal", first: true, predicate: NbPortalDirective, descendants: true }, { propertyName: "searchButton", first: true, predicate: ["searchButton"], descendants: true, read: ElementRef }], ngImport: i0, template: `
    <button #searchButton class="start-search" (click)="emitActivate()" nbButton ghost>
      <nb-icon icon="search-outline" pack="nebular-essentials"></nb-icon>
    </button>
    <nb-search-field
      *nbPortal
      [show]="showSearchField"
      [type]="type"
      [placeholder]="placeholder"
      [hint]="hint"
      (search)="search($event)"
      (searchInput)="emitInput($event)"
      (close)="emitDeactivate()">
    </nb-search-field>
  `, isInline: true, styles: ["/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */:host button{font-size:2rem;margin:0 auto;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}::ng-deep nb-layout.with-search .scrollable-container{position:relative;z-index:0}\n"], components: [{ type: i1.NbButtonComponent, selector: "button[nbButton],a[nbButton],input[type=\"button\"][nbButton],input[type=\"submit\"][nbButton]", inputs: ["hero"] }, { type: i2.NbIconComponent, selector: "nb-icon", inputs: ["icon", "pack", "options", "status", "config"] }, { type: NbSearchFieldComponent, selector: "nb-search-field", inputs: ["type", "placeholder", "hint", "show"], outputs: ["close", "search", "searchInput"] }], directives: [{ type: i8.NbPortalDirective, selector: "[nbPortal]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.0", ngImport: i0, type: NbSearchComponent, decorators: [{
            type: Component,
            args: [{ selector: 'nb-search', changeDetection: ChangeDetectionStrategy.OnPush, template: `
    <button #searchButton class="start-search" (click)="emitActivate()" nbButton ghost>
      <nb-icon icon="search-outline" pack="nebular-essentials"></nb-icon>
    </button>
    <nb-search-field
      *nbPortal
      [show]="showSearchField"
      [type]="type"
      [placeholder]="placeholder"
      [hint]="hint"
      (search)="search($event)"
      (searchInput)="emitInput($event)"
      (close)="emitDeactivate()">
    </nb-search-field>
  `, styles: ["/**\n * @license\n * Copyright Akveo. All Rights Reserved.\n * Licensed under the MIT License. See License.txt in the project root for license information.\n */:host button{font-size:2rem;margin:0 auto;padding:0;cursor:pointer;border:none;background:none}:host button:focus{box-shadow:none;outline:none}::ng-deep nb-layout.with-search .scrollable-container{position:relative;z-index:0}\n"] }]
        }], ctorParameters: function () { return [{ type: i4.NbSearchService }, { type: i5.NbThemeService }, { type: i6.Router }, { type: i7.NbOverlayService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { tag: [{
                type: Input
            }], placeholder: [{
                type: Input
            }], hint: [{
                type: Input
            }], type: [{
                type: Input
            }], searchFieldPortal: [{
                type: ViewChild,
                args: [NbPortalDirective]
            }], searchButton: [{
                type: ViewChild,
                args: ['searchButton', { read: ElementRef }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 