| {"__symbolic":"module","version":4,"metadata":{"CovalentSearchModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":12,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":14,"character":4},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":15,"character":4},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/material/icon","name":"MatIconModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":18,"character":4}],"declarations":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}],"exports":[{"__symbolic":"reference","name":"TdSearchInputComponent"},{"__symbolic":"reference","name":"TdSearchBoxComponent"}]}]}],"members":{}},"TdSearchBoxBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}]}},"_TdSearchBoxMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":12,"character":37},"arguments":[{"__symbolic":"reference","name":"TdSearchBoxBase"}]},"TdSearchBoxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchBoxMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":14,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":16,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchBoxComponent"},"multi":true}],"selector":"td-search-box","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":23,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":26,"character":4},"arguments":["inputState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":27,"character":6},"arguments":["0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":27,"character":17},"arguments":[{"width":"0%","margin":"0px"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":31,"character":6},"arguments":["1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":31,"character":18},"arguments":[{"width":"100%","margin":{"__symbolic":"reference","module":"@angular/animations","name":"AUTO_STYLE","line":33,"character":16}}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":35,"character":6},"arguments":["0 => 1",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":35,"character":27},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":36,"character":6},"arguments":["1 => 0",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":36,"character":27},"arguments":["200ms ease-out"]}]}]]}],"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","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}"]}]}],"members":{"_searchInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":43,"character":3},"arguments":[{"__symbolic":"reference","name":"TdSearchInputComponent"}]}]}],"backIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":3},"arguments":["backIcon"]}]}],"searchIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":61,"character":3},"arguments":["searchIcon"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":68,"character":3},"arguments":["clearIcon"]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3},"arguments":["debounce"]}]}],"alwaysVisible":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":3},"arguments":["alwaysVisible"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":3},"arguments":["placeholder"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":98,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":104,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":110,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":116,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":8,"character":41}]}],"searchClicked":[{"__symbolic":"method"}],"toggleVisibility":[{"__symbolic":"method"}],"handleSearchDebounce":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"handleClear":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}]}},"TdSearchInputBase":{"__symbolic":"class","members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":13,"character":41}]}]}},"_TdSearchInputMixinBase":{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@covalent/core/common","name":"mixinControlValueAccessor","line":17,"character":39},"arguments":[{"__symbolic":"reference","name":"TdSearchInputBase"}]},"TdSearchInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"_TdSearchInputMixinBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":13},"useExisting":{"__symbolic":"reference","name":"TdSearchInputComponent"},"multi":true}],"selector":"td-search-input","changeDetection":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectionStrategy","line":28,"character":19},"member":"OnPush"},"inputs":["value"],"animations":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"trigger","line":31,"character":4},"arguments":["searchState",[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":32,"character":6},"arguments":["hide-left",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":32,"character":25},"arguments":[{"transform":"translateX(-150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":36,"character":6},"arguments":["hide-right",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":36,"character":26},"arguments":[{"transform":"translateX(150%)","display":"none"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"state","line":40,"character":6},"arguments":["show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"style","line":40,"character":21},"arguments":[{"transform":"translateX(0%)","display":"block"}]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":44,"character":6},"arguments":["* => show",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":44,"character":30},"arguments":["200ms ease-in"]}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"transition","line":45,"character":6},"arguments":["show => *",{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/animations","name":"animate","line":45,"character":30},"arguments":["200ms ease-out"]}]}]]}],"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","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}"]}]}],"members":{"_input":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":51,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/input","name":"MatInput","line":51,"character":13}]}]}],"appearance":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":57,"character":3},"arguments":["appearance"]}]}],"showUnderline":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3},"arguments":["showUnderline"]}]}],"debounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":69,"character":3},"arguments":["debounce"]}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":75,"character":3},"arguments":["placeholder"]}]}],"clearIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3},"arguments":["clearIcon"]}]}],"onSearchDebounce":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":88,"character":3},"arguments":["searchDebounce"]}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":94,"character":3},"arguments":["search"]}]}],"onClear":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":100,"character":3},"arguments":["clear"]}]}],"onBlur":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":106,"character":3},"arguments":["blur"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":115,"character":15}}],null],"parameters":[{"__symbolic":"reference","module":"@angular/cdk/bidi","name":"Dir","line":115,"character":40},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":13,"character":41}]}],"ngOnInit":[{"__symbolic":"method"}],"focus":[{"__symbolic":"method"}],"handleBlur":[{"__symbolic":"method"}],"stopPropagation":[{"__symbolic":"method"}],"handleSearch":[{"__symbolic":"method"}],"clearSearch":[{"__symbolic":"method"}],"_searchTermChanged":[{"__symbolic":"method"}]}}},"origins":{"CovalentSearchModule":"./search.module","TdSearchBoxBase":"./search-box/search-box.component","_TdSearchBoxMixinBase":"./search-box/search-box.component","TdSearchBoxComponent":"./search-box/search-box.component","TdSearchInputBase":"./search-input/search-input.component","_TdSearchInputMixinBase":"./search-input/search-input.component","TdSearchInputComponent":"./search-input/search-input.component"},"importAs":"@covalent/core/search"} |