@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 8.21 kB
JavaScript
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("rxjs"),require("@angular/core"),require("@angular/forms"),require("rxjs/operators"),require("ng-devui/i18n"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/search",["exports","rxjs","@angular/core","@angular/forms","rxjs/operators","ng-devui/i18n","@angular/common"],n):n(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].search={}),e.rxjs,e.ng.core,e.ng.forms,e.rxjs.operators,e["ng-devui"].i18n,e.ng.common)}(this,(function(e,n,t,i,r,s,o){"use strict";var h=function(){function e(e,n,i){this.renderer=e,this.i18n=n,this.cdr=i,this.maxLength=Number.MAX_SAFE_INTEGER,this.isKeyupSearch=!1,this.delay=300,this.searchFn=new t.EventEmitter,this.onChange=function(e){return null},this.onTouch=function(){return null}}return e.prototype.ngOnInit=function(){this.setI18nText()},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouch=e},e.prototype.writeValue=function(e){void 0===e&&(e=""),this.renderer.setProperty(this.filterInputElement.nativeElement,"value",e),this.renderClearIcon()},e.prototype.setI18nText=function(){var e=this;this.i18nCommonText=this.i18n.getI18nText().common,this.i18nSubscription=this.i18n.langChange().subscribe((function(n){e.i18nCommonText=n.common,e.cdr.markForCheck()}))},e.prototype.clearText=function(){this.renderer.setProperty(this.filterInputElement.nativeElement,"value",""),this.onChange&&this.onChange(""),this.searchFn.emit(""),this.filterInputElement.nativeElement.focus(),this.renderClearIcon()},e.prototype.inputChange=function(e,n){this.renderClearIcon()},e.prototype.keyupEnter=function(e){this.searchFn.emit(e)},e.prototype.registerFilterChange=function(){var e=this;this.subscription=n.fromEvent(this.filterInputElement.nativeElement,"input").pipe(r.map((function(e){return e.target.value})),r.filter((function(e){return!0})),r.debounceTime(this.delay)).subscribe((function(n){e.onChange(n),e.isKeyupSearch&&e.searchFn.emit(n)}))},e.prototype.ngAfterViewInit=function(){this.registerFilterChange(),this.renderClearIcon()},e.prototype.renderClearIcon=function(){this.filterInputElement.nativeElement.value&&this.lineElement&&this.clearIconElement?(this.renderer.setStyle(this.lineElement.nativeElement,"display","block"),this.renderer.setStyle(this.clearIconElement.nativeElement,"display","block")):this.lineElement&&this.clearIconElement&&(this.renderer.setStyle(this.lineElement.nativeElement,"display","none"),this.renderer.setStyle(this.clearIconElement.nativeElement,"display","none"))},e.prototype.ngOnDestroy=function(){this.subscription&&this.subscription.unsubscribe(),this.i18nSubscription&&this.i18nSubscription.unsubscribe()},e.decorators=[{type:t.Component,args:[{selector:"d-search",template:'<div class="devui-search">\r\n <input\r\n #filterInput\r\n (keyup.enter)="keyupEnter(filterInput.value)"\r\n [placeholder]="placeholder || i18nCommonText?.searchPlaceholder"\r\n [ngClass]="size ? \'devui-input-\' + size : \'\'"\r\n (change)="inputChange(filterInput.value, $event)"\r\n (keyup)="inputChange(filterInput.value, $event)"\r\n [attr.maxlength]="maxLength"\r\n type="text"\r\n class="devui-input"\r\n [ngClass]="size ? \'devui-input-\' + size : \'\'"\r\n />\r\n <span class="devui-search-icon" [ngClass]="size ? \'devui-search-icon-\' + size : \'\'" (click)="keyupEnter(filterInput.value)">\r\n <svg\r\n class="svg-icon-search"\r\n xmlns="http://www.w3.org/2000/svg"\r\n xmlns:xlink="http://www.w3.org/1999/xlink"\r\n width="14px"\r\n height="14px"\r\n viewBox="0 0 16 16"\r\n version="1.1"\r\n >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <path\r\n d="M12.902261,10.765041 L15.5632031,13.425983 C16.1489895,14.0117695 16.1489895,14.961517 15.5632031,15.5473034 C14.9774166,16.1330898 14.0276691,16.1330898 13.4418827,15.5473034 L10.7844126,12.8898333 C9.69325562,13.5923888 8.39422915,14 7,14 C3.13400675,14 0,10.8659932 0,7 C0,3.13400675 3.13400675,0 7,0 C10.8659932,0 14,3.13400675 14,7 C14,8.38598771 13.5971935,9.67789492 12.902261,10.765041 L12.902261,10.765041 Z M7,12 C9.76142375,12 12,9.76142375 12,7 C12,4.23857625 9.76142375,2 7,2 C4.23857625,2 2,4.23857625 2,7 C2,9.76142375 4.23857625,12 7,12 Z"\r\n id="Combined-Shape-Copy-97"\r\n fill-rule="nonzero"\r\n />\r\n </g>\r\n </svg>\r\n </span>\r\n <span #line class="devui-serach-line" [ngClass]="size ? \'devui-serach-line-\' + size : \'\'"> </span>\r\n <span #clearIcon class="devui-search-clear" [ngClass]="size ? \'devui-search-clear-\' + size : \'\'" (click)="clearText()">\r\n <svg\r\n class="svg-icon-clear"\r\n width="10px"\r\n height="10px"\r\n viewBox="0 0 10 10"\r\n version="1.1"\r\n xmlns="http://www.w3.org/2000/svg"\r\n xmlns:xlink="http://www.w3.org/1999/xlink"\r\n >\r\n <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">\r\n <g transform="translate(-1546.000000, -432.000000)">\r\n <polygon\r\n id="Combined-Shape-Copy-60"\r\n points="1552.36396 436.949747 1555.89949 433.414214 1554.48528 432 1550.94975 435.535534 1547.41421 432 1546 433.414214 1549.53553 436.949747 1546 440.485281 1547.41421 441.899495 1550.94975 438.363961 1554.48528 441.899495 1555.89949 440.485281"\r\n ></polygon>\r\n </g>\r\n </g>\r\n </svg>\r\n </span>\r\n</div>\r\n',exportAs:"search",changeDetection:t.ChangeDetectionStrategy.OnPush,providers:[{provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],styles:["svg.svg-icon-clear>g>g,svg.svg-icon-search>g>path{fill:#252b3a}:host{display:inline-block}.devui-search{position:relative}.devui-search .devui-input{height:32px;padding:5px 60px 5px 12px;font-size:14px;line-height:1.42857143;text-overflow:ellipsis}.devui-search .devui-input-sm{height:30px;padding:5px 49px 5px 10px;font-size:12px;line-height:1.5}.devui-search .devui-input-lg{height:46px;padding:10px 71px 10px 16px;font-size:18px;line-height:1.3333333}.devui-search .icon{cursor:pointer}.devui-search .devui-search-icon{position:absolute;width:auto;pointer-events:all;cursor:pointer;height:100%;line-height:32px;padding:3px 10px;top:0;right:0;z-index:2;display:block;text-align:center}.devui-search .devui-search-icon>svg{height:14px;width:14px}.devui-search .devui-search-icon-sm{width:30px;height:30px;line-height:30px;padding:1px 10px}.devui-search .devui-search-icon-sm>svg{height:12px;width:12px}.devui-search .devui-search-icon-lg{width:46px;height:46px;line-height:46px}.devui-search .devui-search-icon-lg>svg{height:18px;width:18px}.devui-search .devui-search-clear{position:absolute;width:auto;top:0;right:32px;padding:1px 10px;pointer-events:all;cursor:pointer;height:100%;line-height:32px;font-size:14px;z-index:2}.devui-search .devui-search-clear-sm{right:30px;line-height:30px;padding:0 8px}.devui-search .devui-search-clear-lg{right:46px;line-height:46px;padding:0 10px}.devui-search .devui-serach-line{border-color:#adb0b8;position:absolute;right:32px;height:70%;top:15%;width:1px;border-left-width:1px;border-left-style:solid;line-height:32px}.devui-search .devui-serach-line-sm{line-height:30px;right:30px}.devui-search .devui-serach-line-lg{line-height:46px;right:46px}"]}]}],e.ctorParameters=function(){return[{type:t.Renderer2},{type:s.I18nService},{type:t.ChangeDetectorRef}]},e.propDecorators={size:[{type:t.Input}],placeholder:[{type:t.Input}],maxLength:[{type:t.Input}],isKeyupSearch:[{type:t.Input}],delay:[{type:t.Input}],searchFn:[{type:t.Output}],filterInputElement:[{type:t.ViewChild,args:["filterInput",{static:!0}]}],lineElement:[{type:t.ViewChild,args:["line",{static:!0}]}],clearIconElement:[{type:t.ViewChild,args:["clearIcon",{static:!0}]}]},e}();var p=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,i.FormsModule],exports:[h],declarations:[h]}]}],e}();e.SearchComponent=h,e.SearchModule=p,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-search.umd.min.js.map