| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/common"),require("@angular/material/icon"),require("@angular/material/button"),require("@angular/cdk/bidi"),require("@angular/material/input"),require("rxjs/operators"),require("@angular/core"),require("@angular/forms"),require("@angular/animations"),require("@covalent/core/common")):"function"==typeof define&&define.amd?define("@covalent/core/search",["exports","@angular/common","@angular/material/icon","@angular/material/button","@angular/cdk/bidi","@angular/material/input","rxjs/operators","@angular/core","@angular/forms","@angular/animations","@covalent/core/common"],t):t((e.covalent=e.covalent||{},e.covalent.core=e.covalent.core||{},e.covalent.core.search={}),e.ng.common,e.ng.material.icon,e.ng.material.button,e.ng.cdk.bidi,e.ng.material.input,e.rxjs.operators,e.ng.core,e.ng.forms,e.ng.animations,e.covalent.core.common)}(this,function(e,t,n,a,r,o,i,l,c,s,p){"use strict";var u=function(e,t){return(u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function d(e,t){function n(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}function h(e){this._changeDetectorRef=e}var m,f=p.mixinControlValueAccessor(h),g=(d(b,m=f),Object.defineProperty(b.prototype,"isRTL",{get:function(){return!!this._dir&&"rtl"===this._dir.dir},enumerable:!0,configurable:!0}),b.prototype.ngOnInit=function(){var t=this;this._input.ngControl.valueChanges.pipe(i.debounceTime(this.debounce),i.skip(1)).subscribe(function(e){t._searchTermChanged(e)})},b.prototype.focus=function(){this._input.focus()},b.prototype.handleBlur=function(){this.onBlur.emit(undefined)},b.prototype.stopPropagation=function(e){e.stopPropagation()},b.prototype.handleSearch=function(e){this.stopPropagation(e),this.onSearch.emit(this.value)},b.prototype.clearSearch=function(){this.value="",this._changeDetectorRef.markForCheck(),this.onClear.emit(undefined)},b.prototype._searchTermChanged=function(e){this.onSearchDebounce.emit(e)},b.decorators=[{type:l.Component,args:[{providers:[{provide:c.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return b}),multi:!0}],selector:"td-search-input",template:'<div class="td-search-input">\n <mat-form-field class="td-search-input-field"\n [class.mat-hide-underline]="!showUnderline"\n [appearance]="appearance"\n floatLabel="never">\n <input matInput\n #searchElement\n type="search"\n [(ngModel)]="value"\n [placeholder]="placeholder"\n (blur)="handleBlur()"\n (search)="stopPropagation($event)"\n (keyup.enter)="handleSearch($event)"/>\n <span matSuffix *ngIf="appearance === \'fill\' || appearance === \'outline\' || appearance === \'standard\'">\n <ng-template\n [ngTemplateOutlet]="clearButton">\n </ng-template>\n </span>\n </mat-form-field>\n <ng-template\n *ngIf="!appearance || appearance === \'legacy\'"\n [ngTemplateOutlet]="clearButton">\n </ng-template>\n</div>\n<ng-template #clearButton>\n <button mat-icon-button\n class="td-search-input-clear"\n type="button"\n [@searchState]="(searchElement.value ? \'show\' : (isRTL ? \'hide-left\' : \'hide-right\'))"\n (click)="clearSearch()">\n <mat-icon>{{clearIcon}}</mat-icon>\n </button>\n</ng-template>\n',changeDetection:l.ChangeDetectionStrategy.OnPush,inputs:["value"],animations:[s.trigger("searchState",[s.state("hide-left",s.style({transform:"translateX(-150%)",display:"none"})),s.state("hide-right",s.style({transform:"translateX(150%)",display:"none"})),s.state("show",s.style({transform:"translateX(0%)",display:"block"})),s.transition("* => show",s.animate("200ms ease-in")),s.transition("show => *",s.animate("200ms ease-out"))])],styles:[":host .td-search-input{overflow-x:hidden;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}:host .td-search-input .td-search-input-field{-webkit-box-flex:1;-ms-flex:1;flex:1}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-flex{height:52px}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper{padding-bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-infix{bottom:.4em}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-underline{bottom:0}:host .td-search-input ::ng-deep mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}:host .td-search-input ::ng-deep mat-form-field .mat-input-element{caret-color:currentColor}:host .td-search-input ::ng-deep mat-form-field.mat-hide-underline .mat-form-field-underline{display:none}:host .td-search-input .td-search-input-clear{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}"]}]}],b.ctorParameters=function(){return[{type:r.Dir,decorators:[{type:l.Optional}]},{type:l.ChangeDetectorRef}]},b.propDecorators={_input:[{type:l.ViewChild,args:[o.MatInput]}],appearance:[{type:l.Input,args:["appearance"]}],showUnderline:[{type:l.Input,args:["showUnderline"]}],debounce:[{type:l.Input,args:["debounce"]}],placeholder:[{type:l.Input,args:["placeholder"]}],clearIcon:[{type:l.Input,args:["clearIcon"]}],onSearchDebounce:[{type:l.Output,args:["searchDebounce"]}],onSearch:[{type:l.Output,args:["search"]}],onClear:[{type:l.Output,args:["clear"]}],onBlur:[{type:l.Output,args:["blur"]}]},b);function b(e,t){var n=m.call(this,t)||this;return n._dir=e,n.showUnderline=!1,n.debounce=400,n.clearIcon="cancel",n.onSearchDebounce=new l.EventEmitter,n.onSearch=new l.EventEmitter,n.onClear=new l.EventEmitter,n.onBlur=new l.EventEmitter,n}function y(e){this._changeDetectorRef=e}var x,w=p.mixinControlValueAccessor(y),v=(d(I,x=w),Object.defineProperty(I.prototype,"searchVisible",{get:function(){return this._searchVisible},enumerable:!0,configurable:!0}),I.prototype.searchClicked=function(){!this.alwaysVisible&&this._searchVisible?(this.value="",this.handleClear()):!this.alwaysVisible&&this._searchVisible||this._searchInput.focus(),this.toggleVisibility()},I.prototype.toggleVisibility=function(){this._searchVisible=!this._searchVisible,this._changeDetectorRef.markForCheck()},I.prototype.handleSearchDebounce=function(e){this.onSearchDebounce.emit(e)},I.prototype.handleSearch=function(e){this.onSearch.emit(e)},I.prototype.handleClear=function(){this.onClear.emit(undefined)},I.prototype.handleBlur=function(){this.onBlur.emit(undefined)},I.decorators=[{type:l.Component,args:[{providers:[{provide:c.NG_VALUE_ACCESSOR,useExisting:l.forwardRef(function(){return I}),multi:!0}],selector:"td-search-box",template:'<div class="td-search-box">\n <button mat-icon-button type="button" class="td-search-icon" (click)="searchClicked()">\n <mat-icon *ngIf="searchVisible && !alwaysVisible">{{backIcon}}</mat-icon>\n <mat-icon *ngIf="!searchVisible || alwaysVisible">{{searchIcon}}</mat-icon>\n </button>\n <td-search-input #searchInput\n [@inputState]="alwaysVisible || searchVisible"\n [debounce]="debounce"\n [(ngModel)]="value"\n [showUnderline]="showUnderline"\n [placeholder]="placeholder"\n [clearIcon]="clearIcon"\n (searchDebounce)="handleSearchDebounce($event)"\n (search)="handleSearch($event)"\n (clear)="handleClear(); toggleVisibility()"\n (blur)="handleBlur()">\n </td-search-input>\n</div>\n',changeDetection:l.ChangeDetectionStrategy.OnPush,inputs:["value"],animations:[s.trigger("inputState",[s.state("0",s.style({width:"0%",margin:"0px"})),s.state("1",s.style({width:"100%",margin:s.AUTO_STYLE})),s.transition("0 => 1",s.animate("200ms ease-in")),s.transition("1 => 0",s.animate("200ms ease-out"))])],styles:[":host{display:block}.td-search-box{-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.td-search-box .td-search-icon{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.td-search-box td-search-input{margin-left:12px}::ng-deep [dir=rtl] .td-search-box td-search-input{margin-right:12px;margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-form.field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1em}"]}]}],I.ctorParameters=function(){return[{type:l.ChangeDetectorRef}]},I.propDecorators={_searchInput:[{type:l.ViewChild,args:[g]}],backIcon:[{type:l.Input,args:["backIcon"]}],searchIcon:[{type:l.Input,args:["searchIcon"]}],clearIcon:[{type:l.Input,args:["clearIcon"]}],showUnderline:[{type:l.Input,args:["showUnderline"]}],debounce:[{type:l.Input,args:["debounce"]}],alwaysVisible:[{type:l.Input,args:["alwaysVisible"]}],placeholder:[{type:l.Input,args:["placeholder"]}],onSearchDebounce:[{type:l.Output,args:["searchDebounce"]}],onSearch:[{type:l.Output,args:["search"]}],onClear:[{type:l.Output,args:["clear"]}],onBlur:[{type:l.Output,args:["blur"]}]},I);function I(e){var t=x.call(this,e)||this;return t._searchVisible=!1,t.backIcon="search",t.searchIcon="search",t.clearIcon="cancel",t.showUnderline=!1,t.debounce=400,t.alwaysVisible=!1,t.onSearchDebounce=new l.EventEmitter,t.onSearch=new l.EventEmitter,t.onClear=new l.EventEmitter,t.onBlur=new l.EventEmitter,t}var k=(S.decorators=[{type:l.NgModule,args:[{imports:[c.FormsModule,t.CommonModule,o.MatInputModule,n.MatIconModule,a.MatButtonModule],declarations:[g,v],exports:[g,v]}]}],S);function S(){}e.CovalentSearchModule=k,e.TdSearchBoxBase=y,e._TdSearchBoxMixinBase=w,e.TdSearchBoxComponent=v,e.TdSearchInputBase=h,e._TdSearchInputMixinBase=f,e.TdSearchInputComponent=g,Object.defineProperty(e,"__esModule",{value:!0})}); |
