@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
1 lines • 8.51 kB
JSON
{"__symbolic":"module","version":4,"metadata":{"SearchComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"d-search","exportAs":"search","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":12,"character":19},"member":"OnPush"},"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":14,"character":13},"useExisting":{"__symbolic":"reference","name":"SearchComponent"},"multi":true}],"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","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}"]}]}],"members":{"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"maxLength":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"isKeyupSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}}]}],"delay":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"searchFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":31,"character":3}}]}],"filterInputElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":32,"character":3},"arguments":["filterInput",{"static":true}]}]}],"lineElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":3},"arguments":["line",{"static":true}]}]}],"clearIconElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":34,"character":3},"arguments":["clearIcon",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":41,"character":32},{"__symbolic":"reference","module":"ng-devui/i18n","name":"I18nService","line":41,"character":57},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":41,"character":83}]}],"ngOnInit":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"setI18nText":[{"__symbolic":"method"}],"clearText":[{"__symbolic":"method"}],"inputChange":[{"__symbolic":"method"}],"keyupEnter":[{"__symbolic":"method"}],"registerFilterChange":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"renderClearIcon":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}]}},"SearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":4,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":6,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":7,"character":4}],"exports":[{"__symbolic":"reference","name":"SearchComponent"}],"declarations":[{"__symbolic":"reference","name":"SearchComponent"}]}]}],"members":{}}},"origins":{"SearchComponent":"./search.component","SearchModule":"./search.module"},"importAs":"ng-devui/search"}