@covalent/core 4.0.0-beta.2 → 4.1.0-develop.10

package/fesm2020/covalent-core-search.mjs

@@ -1,66 +1,35 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Optional, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i4 from '@angular/forms';
+import * as i6 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInput, MatInputModule } from '@angular/material/input';
-import * as i7 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i6 from '@angular/material/button';
+import * as i3 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import * as i1 from '@angular/cdk/bidi';
 import { debounceTime, skip } from 'rxjs/operators';
-import { mixinControlValueAccessor } from '@covalent/core/common';
+import { noop } from 'rxjs';
 import * as i2 from '@angular/material/form-field';
 
-function TdSearchInputComponent_span_4_ng_template_1_Template(rf, ctx) { }
-function TdSearchInputComponent_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 7);
-    i0.ɵɵtemplate(1, TdSearchInputComponent_span_4_ng_template_1_Template, 0, 0, "ng-template", 8);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵnextContext();
-    const _r3 = i0.ɵɵreference(7);
-    i0.ɵɵadvance(1);
-    i0.ɵɵproperty("ngTemplateOutlet", _r3);
-} }
-function TdSearchInputComponent_5_ng_template_0_Template(rf, ctx) { }
-function TdSearchInputComponent_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, TdSearchInputComponent_5_ng_template_0_Template, 0, 0, "ng-template", 8);
-} if (rf & 2) {
-    i0.ɵɵnextContext();
-    const _r3 = i0.ɵɵreference(7);
-    i0.ɵɵproperty("ngTemplateOutlet", _r3);
-} }
-function TdSearchInputComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 9);
-    i0.ɵɵlistener("click", function TdSearchInputComponent_ng_template_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r7 = i0.ɵɵnextContext(); return ctx_r7.clearSearch(); });
-    i0.ɵɵelementStart(1, "mat-icon");
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r4 = i0.ɵɵnextContext();
-    const _r0 = i0.ɵɵreference(3);
-    i0.ɵɵproperty("@searchState", _r0.value ? "show" : ctx_r4.isRTL ? "hide-left" : "hide-right");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r4.clearIcon);
-} }
 class TdSearchInputBase {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
     }
 }
-/* tslint:disable-next-line */
-const _TdSearchInputMixinBase = mixinControlValueAccessor(TdSearchInputBase);
-class TdSearchInputComponent extends _TdSearchInputMixinBase {
+class TdSearchInputComponent {
     constructor(_dir, _changeDetectorRef) {
-        super(_changeDetectorRef);
         this._dir = _dir;
+        this._changeDetectorRef = _changeDetectorRef;
+        /**
+         * appearance?: MatFormFieldAppearance
+         * Appearance style for the underlying input component.
+         */
+        this.appearance = 'legacy';
         /**
          * showUnderline?: boolean
          * Sets if the input underline should be visible. Defaults to 'false'.
@@ -71,6 +40,11 @@ class TdSearchInputComponent extends _TdSearchInputMixinBase {
          * Debounce timeout between keypresses. Defaults to 400.
          */
         this.debounce = 400;
+        /**
+         * placeholder?: string
+         * Placeholder for the underlying input component.
+         */
+        this.placeholder = '';
         /**
          * clearIcon?: string
          * The icon used to clear the search input.
@@ -96,7 +70,7 @@ class TdSearchInputComponent extends _TdSearchInputMixinBase {
          * blur: function()
          * Event emitted after the blur event has been called in underlying input.
          */
-        this.blur = new EventEmitter();
+        this.blurSearch = new EventEmitter();
     }
     get isRTL() {
         if (this._dir) {
@@ -105,27 +79,40 @@ class TdSearchInputComponent extends _TdSearchInputMixinBase {
         return false;
     }
     ngOnInit() {
-        this._input.ngControl.valueChanges
-            .pipe(debounceTime(this.debounce), skip(1))
+        this._input?.ngControl?.valueChanges
+            ?.pipe(debounceTime(this.debounce), skip(1) // skip first change when value is set to undefined
+        )
             .subscribe((value) => {
             this._searchTermChanged(value);
         });
     }
+    writeValue(value) {
+        this.value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    registerOnChange() {
+        noop;
+    }
+    registerOnTouched() {
+        noop;
+    }
     /**
      * Method to focus to underlying input.
      */
     focus() {
-        this._input.focus();
+        this._input?.focus();
     }
     handleBlur() {
-        this.blur.emit();
+        this.blurSearch.emit();
     }
     stopPropagation(event) {
         event.stopPropagation();
     }
     handleSearch(event) {
         this.stopPropagation(event);
-        this.search.emit(this.value);
+        if (typeof this.value == 'string') {
+            this.search.emit(this.value);
+        }
     }
     /**
      * Method to clear the underlying input.
@@ -139,136 +126,92 @@ class TdSearchInputComponent extends _TdSearchInputMixinBase {
         this.searchDebounce.emit(value);
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdSearchInputComponent.ɵfac = function TdSearchInputComponent_Factory(t) { return new (t || TdSearchInputComponent)(i0.ɵɵdirectiveInject(i1.Dir, 8), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdSearchInputComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdSearchInputComponent, selectors: [["td-search-input"]], viewQuery: function TdSearchInputComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(MatInput, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._input = _t.first);
-    } }, inputs: { value: "value", appearance: "appearance", showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder", clearIcon: "clearIcon" }, outputs: { searchDebounce: "searchDebounce", search: "search", clear: "clear", blur: "blur" }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => TdSearchInputComponent)),
-                multi: true,
-            },
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 8, vars: 7, consts: [[1, "td-search-input"], ["floatLabel", "never", 1, "td-search-input-field", 3, "appearance"], ["matInput", "", "type", "search", 3, "ngModel", "placeholder", "ngModelChange", "blur", "search", "keyup.enter"], ["searchElement", ""], ["matSuffix", "", 4, "ngIf"], [4, "ngIf"], ["clearButton", ""], ["matSuffix", ""], [3, "ngTemplateOutlet"], ["mat-icon-button", "", "type", "button", 1, "td-search-input-clear", 3, "click"]], template: function TdSearchInputComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "mat-form-field", 1);
-        i0.ɵɵelementStart(2, "input", 2, 3);
-        i0.ɵɵlistener("ngModelChange", function TdSearchInputComponent_Template_input_ngModelChange_2_listener($event) { return ctx.value = $event; })("blur", function TdSearchInputComponent_Template_input_blur_2_listener() { return ctx.handleBlur(); })("search", function TdSearchInputComponent_Template_input_search_2_listener($event) { return ctx.stopPropagation($event); })("keyup.enter", function TdSearchInputComponent_Template_input_keyup_enter_2_listener($event) { return ctx.handleSearch($event); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(4, TdSearchInputComponent_span_4_Template, 2, 1, "span", 4);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(5, TdSearchInputComponent_5_Template, 1, 1, null, 5);
-        i0.ɵɵelementEnd();
-        i0.ɵɵtemplate(6, TdSearchInputComponent_ng_template_6_Template, 3, 2, "ng-template", null, 6, i0.ɵɵtemplateRefExtractor);
-    } if (rf & 2) {
-        i0.ɵɵadvance(1);
-        i0.ɵɵclassProp("mat-hide-underline", !ctx.showUnderline);
-        i0.ɵɵproperty("appearance", ctx.appearance);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngModel", ctx.value)("placeholder", ctx.placeholder);
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.appearance === "fill" || ctx.appearance === "outline" || ctx.appearance === "standard");
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx.appearance || ctx.appearance === "legacy");
-    } }, directives: [i2.MatFormField, i3.MatInput, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i5.NgIf, i2.MatSuffix, i5.NgTemplateOutlet, i6.MatButton, i7.MatIcon], styles: ["[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]{overflow-x:hidden;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]   .td-search-input-field[_ngcontent-%COMP%]{-ms-flex:1;flex:1}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-outline .mat-form-field-wrapper{padding-bottom:0}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper{padding-bottom:0}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-flex{height:52px}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-fill .mat-form-field-wrapper .mat-form-field-underline{bottom:0}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper{padding-bottom:0}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-infix{bottom:.4em}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-standard .mat-form-field-wrapper .mat-form-field-underline{bottom:0}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-form-field-appearance-legacy .mat-form-field-infix{-ms-flex-item-align:center;align-self:center}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field .mat-input-element{caret-color:currentColor}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field.mat-hide-underline .mat-form-field-underline{display:none}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]   .td-search-input-clear[_ngcontent-%COMP%]{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;align-self:center}"], data: { animation: [
-            trigger('searchState', [
-                state('hide-left', style({
-                    transform: 'translateX(-150%)',
-                    display: 'none',
-                })),
-                state('hide-right', style({
-                    transform: 'translateX(150%)',
-                    display: 'none',
-                })),
-                state('show', style({
-                    transform: 'translateX(0%)',
-                    display: 'block',
-                })),
-                transition('* => show', animate('200ms ease-in')),
-                transition('show => *', animate('200ms ease-out')),
-            ]),
-        ] }, changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdSearchInputComponent, [{
-        type: Component,
-        args: [{ providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef((() => TdSearchInputComponent)),
-                        multi: true,
-                    },
-                ], selector: 'td-search-input', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['value'], animations: [
-                    trigger('searchState', [
-                        state('hide-left', style({
-                            transform: 'translateX(-150%)',
-                            display: 'none',
-                        })),
-                        state('hide-right', style({
-                            transform: 'translateX(150%)',
-                            display: 'none',
-                        })),
-                        state('show', style({
-                            transform: 'translateX(0%)',
-                            display: 'block',
-                        })),
-                        transition('* => show', animate('200ms ease-in')),
-                        transition('show => *', animate('200ms ease-out')),
-                    ]),
-                ], template: "<div class=\"td-search-input\">\n  <mat-form-field\n    class=\"td-search-input-field\"\n    [class.mat-hide-underline]=\"!showUnderline\"\n    [appearance]=\"appearance\"\n    floatLabel=\"never\"\n  >\n    <input\n      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    />\n    <span matSuffix *ngIf=\"appearance === 'fill' || appearance === 'outline' || appearance === 'standard'\">\n      <ng-template [ngTemplateOutlet]=\"clearButton\"></ng-template>\n    </span>\n  </mat-form-field>\n  <ng-template *ngIf=\"!appearance || appearance === 'legacy'\" [ngTemplateOutlet]=\"clearButton\"></ng-template>\n</div>\n<ng-template #clearButton>\n  <button\n    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  >\n    <mat-icon>{{ clearIcon }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host .td-search-input{overflow-x:hidden;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}:host .td-search-input .td-search-input-field{-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;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{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;align-self:center}\n"] }]
-    }], function () { return [{ type: i1.Dir, decorators: [{
-                type: Optional
-            }] }, { type: i0.ChangeDetectorRef }]; }, { _input: [{
-            type: ViewChild,
-            args: [MatInput, { static: true }]
-        }], appearance: [{
-            type: Input
-        }], showUnderline: [{
-            type: Input
-        }], debounce: [{
-            type: Input
-        }], placeholder: [{
-            type: Input
-        }], clearIcon: [{
-            type: Input
-        }], searchDebounce: [{
-            type: Output
-        }], search: [{
-            type: Output
-        }], clear: [{
-            type: Output
-        }], blur: [{
-            type: Output
-        }] }); })();
+TdSearchInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdSearchInputComponent, deps: [{ token: i1.Dir, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdSearchInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdSearchInputComponent, selector: "td-search-input", inputs: { appearance: "appearance", showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder", clearIcon: "clearIcon", value: "value" }, outputs: { searchDebounce: "searchDebounce", search: "search", clear: "clear", blurSearch: "blurSearch" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdSearchInputComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "_input", first: true, predicate: MatInput, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-search-input\">\n  <mat-form-field\n    class=\"td-search-input-field\"\n    [class.mat-hide-underline]=\"!showUnderline\"\n    [appearance]=\"appearance\"\n    floatLabel=\"never\"\n  >\n    <input\n      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    />\n    <span\n      matSuffix\n      *ngIf=\"\n        appearance === 'fill' ||\n        appearance === 'outline' ||\n        appearance === 'standard'\n      \"\n    >\n      <ng-template [ngTemplateOutlet]=\"clearButton\"></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\n    mat-icon-button\n    class=\"td-search-input-clear\"\n    type=\"button\"\n    [@searchState]=\"\n      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'\n    \"\n    (click)=\"clearSearch()\"\n  >\n    <mat-icon>{{ clearIcon }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host .td-search-input{overflow-x:hidden;box-sizing:border-box;display:flex;flex-direction:row;align-items:baseline;align-content:center;max-width:100%;justify-content:flex-end}:host .td-search-input .td-search-input-field{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{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{flex:0 0 auto;align-self:center}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.MatSuffix, selector: "[matSuffix]" }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+        trigger('searchState', [
+            state('hide-left', style({
+                transform: 'translateX(-150%)',
+                display: 'none',
+            })),
+            state('hide-right', style({
+                transform: 'translateX(150%)',
+                display: 'none',
+            })),
+            state('show', style({
+                transform: 'translateX(0%)',
+                display: 'block',
+            })),
+            transition('* => show', animate('200ms ease-in')),
+            transition('show => *', animate('200ms ease-out')),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdSearchInputComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdSearchInputComponent),
+                            multi: true,
+                        },
+                    ], selector: 'td-search-input', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('searchState', [
+                            state('hide-left', style({
+                                transform: 'translateX(-150%)',
+                                display: 'none',
+                            })),
+                            state('hide-right', style({
+                                transform: 'translateX(150%)',
+                                display: 'none',
+                            })),
+                            state('show', style({
+                                transform: 'translateX(0%)',
+                                display: 'block',
+                            })),
+                            transition('* => show', animate('200ms ease-in')),
+                            transition('show => *', animate('200ms ease-out')),
+                        ]),
+                    ], template: "<div class=\"td-search-input\">\n  <mat-form-field\n    class=\"td-search-input-field\"\n    [class.mat-hide-underline]=\"!showUnderline\"\n    [appearance]=\"appearance\"\n    floatLabel=\"never\"\n  >\n    <input\n      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    />\n    <span\n      matSuffix\n      *ngIf=\"\n        appearance === 'fill' ||\n        appearance === 'outline' ||\n        appearance === 'standard'\n      \"\n    >\n      <ng-template [ngTemplateOutlet]=\"clearButton\"></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\n    mat-icon-button\n    class=\"td-search-input-clear\"\n    type=\"button\"\n    [@searchState]=\"\n      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'\n    \"\n    (click)=\"clearSearch()\"\n  >\n    <mat-icon>{{ clearIcon }}</mat-icon>\n  </button>\n</ng-template>\n", styles: [":host .td-search-input{overflow-x:hidden;box-sizing:border-box;display:flex;flex-direction:row;align-items:baseline;align-content:center;max-width:100%;justify-content:flex-end}:host .td-search-input .td-search-input-field{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{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{flex:0 0 auto;align-self:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.Dir, decorators: [{
+                    type: Optional
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { _input: [{
+                type: ViewChild,
+                args: [MatInput, { static: true }]
+            }], appearance: [{
+                type: Input
+            }], showUnderline: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], clearIcon: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], searchDebounce: [{
+                type: Output
+            }], search: [{
+                type: Output
+            }], clear: [{
+                type: Output
+            }], blurSearch: [{
+                type: Output
+            }] } });
 
-function TdSearchBoxComponent_mat_icon_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r0.backIcon);
-} }
-function TdSearchBoxComponent_mat_icon_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "mat-icon");
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(1);
-    i0.ɵɵtextInterpolate(ctx_r1.searchIcon);
-} }
 class TdSearchBoxBase {
     constructor(_changeDetectorRef) {
         this._changeDetectorRef = _changeDetectorRef;
     }
 }
-/* tslint:disable-next-line */
-const _TdSearchBoxMixinBase = mixinControlValueAccessor(TdSearchBoxBase);
-class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
+class TdSearchBoxComponent {
     constructor(_changeDetectorRef) {
-        super(_changeDetectorRef);
+        this._changeDetectorRef = _changeDetectorRef;
         this._searchVisible = false;
         /**
          * backIcon?: string
@@ -303,6 +246,11 @@ class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
          * Sets if the input should always be visible. Defaults to 'false'.
          */
         this.alwaysVisible = false;
+        /**
+         * placeholder?: string
+         * Placeholder for the underlying input component.
+         */
+        this.placeholder = '';
         /**
          * searchDebounce: function($event)
          * Event emitted after the [debounce] timeout.
@@ -322,11 +270,21 @@ class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
          * blur: function()
          * Event emitted after the blur event has been called in underlying input.
          */
-        this.blur = new EventEmitter();
+        this.blurSearch = new EventEmitter();
     }
     get searchVisible() {
         return this._searchVisible;
     }
+    writeValue(value) {
+        this.value = value;
+        this._changeDetectorRef.markForCheck();
+    }
+    registerOnChange() {
+        noop;
+    }
+    registerOnTouched() {
+        noop;
+    }
     /**
      * Method executed when the search icon is clicked.
      */
@@ -336,7 +294,7 @@ class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
             this.handleClear();
         }
         else if (this.alwaysVisible || !this._searchVisible) {
-            this._searchInput.focus();
+            this._searchInput?.focus();
         }
         this.toggleVisibility();
     }
@@ -354,120 +312,114 @@ class TdSearchBoxComponent extends _TdSearchBoxMixinBase {
         this.clear.emit();
     }
     handleBlur() {
-        this.blur.emit();
+        this.blurSearch.emit();
     }
 }
-/** @nocollapse */ /** @nocollapse */ TdSearchBoxComponent.ɵfac = function TdSearchBoxComponent_Factory(t) { return new (t || TdSearchBoxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-/** @nocollapse */ /** @nocollapse */ TdSearchBoxComponent.ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TdSearchBoxComponent, selectors: [["td-search-box"]], viewQuery: function TdSearchBoxComponent_Query(rf, ctx) { if (rf & 1) {
-        i0.ɵɵviewQuery(TdSearchInputComponent, 7);
-    } if (rf & 2) {
-        let _t;
-        i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._searchInput = _t.first);
-    } }, inputs: { value: "value", backIcon: "backIcon", searchIcon: "searchIcon", clearIcon: "clearIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder" }, outputs: { searchDebounce: "searchDebounce", search: "search", clear: "clear", blur: "blur" }, features: [i0.ɵɵProvidersFeature([
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef((() => TdSearchBoxComponent)),
-                multi: true,
-            },
-        ]), i0.ɵɵInheritDefinitionFeature], decls: 6, vars: 8, consts: [[1, "td-search-box"], ["mat-icon-button", "", "type", "button", 1, "td-search-icon", 3, "click"], [4, "ngIf"], [3, "debounce", "ngModel", "showUnderline", "placeholder", "clearIcon", "ngModelChange", "searchDebounce", "search", "clear", "blur"], ["searchInput", ""]], template: function TdSearchBoxComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0);
-        i0.ɵɵelementStart(1, "button", 1);
-        i0.ɵɵlistener("click", function TdSearchBoxComponent_Template_button_click_1_listener() { return ctx.searchClicked(); });
-        i0.ɵɵtemplate(2, TdSearchBoxComponent_mat_icon_2_Template, 2, 1, "mat-icon", 2);
-        i0.ɵɵtemplate(3, TdSearchBoxComponent_mat_icon_3_Template, 2, 1, "mat-icon", 2);
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(4, "td-search-input", 3, 4);
-        i0.ɵɵlistener("ngModelChange", function TdSearchBoxComponent_Template_td_search_input_ngModelChange_4_listener($event) { return ctx.value = $event; })("searchDebounce", function TdSearchBoxComponent_Template_td_search_input_searchDebounce_4_listener($event) { return ctx.handleSearchDebounce($event); })("search", function TdSearchBoxComponent_Template_td_search_input_search_4_listener($event) { return ctx.handleSearch($event); })("clear", function TdSearchBoxComponent_Template_td_search_input_clear_4_listener() { ctx.handleClear(); return ctx.toggleVisibility(); })("blur", function TdSearchBoxComponent_Template_td_search_input_blur_4_listener() { return ctx.handleBlur(); });
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵadvance(2);
-        i0.ɵɵproperty("ngIf", ctx.searchVisible && !ctx.alwaysVisible);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("ngIf", !ctx.searchVisible || ctx.alwaysVisible);
-        i0.ɵɵadvance(1);
-        i0.ɵɵproperty("@inputState", ctx.alwaysVisible || ctx.searchVisible)("debounce", ctx.debounce)("ngModel", ctx.value)("showUnderline", ctx.showUnderline)("placeholder", ctx.placeholder)("clearIcon", ctx.clearIcon);
-    } }, directives: [i6.MatButton, i5.NgIf, i7.MatIcon, TdSearchInputComponent, i4.NgControlStatus, i4.NgModel], styles: ["[_nghost-%COMP%]{display:block}.td-search-box[_ngcontent-%COMP%]{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}.td-search-box[_ngcontent-%COMP%]   .td-search-icon[_ngcontent-%COMP%]{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-align:center;align-self:center}.td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]{margin-left:12px}  [dir=rtl] .td-search-box td-search-input{margin-right:12px;margin-left:0!important}.td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]     .mat-form.field.mat-form-field-appearance-legacy .mat-form-field-wrapper{padding-bottom:1em}"], data: { animation: [
-            trigger('inputState', [
-                state('0', style({
-                    width: '0%',
-                    margin: '0px',
-                })),
-                state('1', style({
-                    width: '100%',
-                    margin: AUTO_STYLE,
-                })),
-                transition('0 => 1', animate('200ms ease-in')),
-                transition('1 => 0', animate('200ms ease-out')),
-            ]),
-        ] }, changeDetection: 0 });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TdSearchBoxComponent, [{
-        type: Component,
-        args: [{ providers: [
-                    {
-                        provide: NG_VALUE_ACCESSOR,
-                        useExisting: forwardRef((() => TdSearchBoxComponent)),
-                        multi: true,
-                    },
-                ], selector: 'td-search-box', changeDetection: ChangeDetectionStrategy.OnPush, inputs: ['value'], animations: [
-                    trigger('inputState', [
-                        state('0', style({
-                            width: '0%',
-                            margin: '0px',
-                        })),
-                        state('1', style({
-                            width: '100%',
-                            margin: AUTO_STYLE,
-                        })),
-                        transition('0 => 1', animate('200ms ease-in')),
-                        transition('1 => 0', animate('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\n    #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{box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:baseline;align-items:baseline;-ms-flex-line-pack:center;align-content:center;max-width:100%;-ms-flex-pack:end;justify-content:flex-end}.td-search-box .td-search-icon{-ms-flex:0 0 auto;flex:0 0 auto;-ms-flex-item-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}\n"] }]
-    }], function () { return [{ type: i0.ChangeDetectorRef }]; }, { _searchInput: [{
-            type: ViewChild,
-            args: [TdSearchInputComponent, { static: true }]
-        }], backIcon: [{
-            type: Input
-        }], searchIcon: [{
-            type: Input
-        }], clearIcon: [{
-            type: Input
-        }], showUnderline: [{
-            type: Input
-        }], debounce: [{
-            type: Input
-        }], alwaysVisible: [{
-            type: Input
-        }], placeholder: [{
-            type: Input
-        }], searchDebounce: [{
-            type: Output
-        }], search: [{
-            type: Output
-        }], clear: [{
-            type: Output
-        }], blur: [{
-            type: Output
-        }] }); })();
+TdSearchBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TdSearchBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.2", type: TdSearchBoxComponent, selector: "td-search-box", inputs: { backIcon: "backIcon", searchIcon: "searchIcon", clearIcon: "clearIcon", showUnderline: "showUnderline", debounce: "debounce", alwaysVisible: "alwaysVisible", placeholder: "placeholder", value: "value" }, outputs: { searchDebounce: "searchDebounce", search: "search", clear: "clear", blurSearch: "blurSearch" }, providers: [
+        {
+            provide: NG_VALUE_ACCESSOR,
+            useExisting: forwardRef(() => TdSearchBoxComponent),
+            multi: true,
+        },
+    ], viewQueries: [{ propertyName: "_searchInput", first: true, predicate: TdSearchInputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"td-search-box\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"td-search-icon\"\n    (click)=\"searchClicked()\"\n  >\n    <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{ backIcon }}</mat-icon>\n    <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">{{\n      searchIcon\n    }}</mat-icon>\n  </button>\n  <td-search-input\n    #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{box-sizing:border-box;display:flex;flex-direction:row;align-items:baseline;align-content:center;max-width:100%;justify-content:flex-end}.td-search-box .td-search-icon{flex:0 0 auto;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}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { type: TdSearchInputComponent, selector: "td-search-input", inputs: ["appearance", "showUnderline", "debounce", "placeholder", "clearIcon", "value"], outputs: ["searchDebounce", "search", "clear", "blurSearch"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], animations: [
+        trigger('inputState', [
+            state('0', style({
+                width: '0%',
+                margin: '0px',
+            })),
+            state('1', style({
+                width: '100%',
+                margin: AUTO_STYLE,
+            })),
+            transition('0 => 1', animate('200ms ease-in')),
+            transition('1 => 0', animate('200ms ease-out')),
+        ]),
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: TdSearchBoxComponent, decorators: [{
+            type: Component,
+            args: [{ providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TdSearchBoxComponent),
+                            multi: true,
+                        },
+                    ], selector: 'td-search-box', changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('inputState', [
+                            state('0', style({
+                                width: '0%',
+                                margin: '0px',
+                            })),
+                            state('1', style({
+                                width: '100%',
+                                margin: AUTO_STYLE,
+                            })),
+                            transition('0 => 1', animate('200ms ease-in')),
+                            transition('1 => 0', animate('200ms ease-out')),
+                        ]),
+                    ], template: "<div class=\"td-search-box\">\n  <button\n    mat-icon-button\n    type=\"button\"\n    class=\"td-search-icon\"\n    (click)=\"searchClicked()\"\n  >\n    <mat-icon *ngIf=\"searchVisible && !alwaysVisible\">{{ backIcon }}</mat-icon>\n    <mat-icon *ngIf=\"!searchVisible || alwaysVisible\">{{\n      searchIcon\n    }}</mat-icon>\n  </button>\n  <td-search-input\n    #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{box-sizing:border-box;display:flex;flex-direction:row;align-items:baseline;align-content:center;max-width:100%;justify-content:flex-end}.td-search-box .td-search-icon{flex:0 0 auto;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}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { _searchInput: [{
+                type: ViewChild,
+                args: [TdSearchInputComponent, { static: true }]
+            }], backIcon: [{
+                type: Input
+            }], searchIcon: [{
+                type: Input
+            }], clearIcon: [{
+                type: Input
+            }], showUnderline: [{
+                type: Input
+            }], debounce: [{
+                type: Input
+            }], alwaysVisible: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], searchDebounce: [{
+                type: Output
+            }], search: [{
+                type: Output
+            }], clear: [{
+                type: Output
+            }], blurSearch: [{
+                type: Output
+            }] } });
 
 class CovalentSearchModule {
 }
-/** @nocollapse */ /** @nocollapse */ CovalentSearchModule.ɵfac = function CovalentSearchModule_Factory(t) { return new (t || CovalentSearchModule)(); };
-/** @nocollapse */ /** @nocollapse */ CovalentSearchModule.ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: CovalentSearchModule });
-/** @nocollapse */ /** @nocollapse */ CovalentSearchModule.ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ imports: [[FormsModule, CommonModule, MatInputModule, MatIconModule, MatButtonModule]] });
-(function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSearchModule, [{
-        type: NgModule,
-        args: [{
-                imports: [FormsModule, CommonModule, MatInputModule, MatIconModule, MatButtonModule],
-                declarations: [TdSearchInputComponent, TdSearchBoxComponent],
-                exports: [TdSearchInputComponent, TdSearchBoxComponent],
-            }]
-    }], null, null); })();
-(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentSearchModule, { declarations: [TdSearchInputComponent, TdSearchBoxComponent], imports: [FormsModule, CommonModule, MatInputModule, MatIconModule, MatButtonModule], exports: [TdSearchInputComponent, TdSearchBoxComponent] }); })();
+CovalentSearchModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+CovalentSearchModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSearchModule, declarations: [TdSearchInputComponent, TdSearchBoxComponent], imports: [FormsModule,
+        CommonModule,
+        MatInputModule,
+        MatIconModule,
+        MatButtonModule], exports: [TdSearchInputComponent, TdSearchBoxComponent] });
+CovalentSearchModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSearchModule, imports: [[
+            FormsModule,
+            CommonModule,
+            MatInputModule,
+            MatIconModule,
+            MatButtonModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.2", ngImport: i0, type: CovalentSearchModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        FormsModule,
+                        CommonModule,
+                        MatInputModule,
+                        MatIconModule,
+                        MatButtonModule,
+                    ],
+                    declarations: [TdSearchInputComponent, TdSearchBoxComponent],
+                    exports: [TdSearchInputComponent, TdSearchBoxComponent],
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CovalentSearchModule, TdSearchBoxBase, TdSearchBoxComponent, TdSearchInputBase, TdSearchInputComponent, _TdSearchBoxMixinBase, _TdSearchInputMixinBase };
+export { CovalentSearchModule, TdSearchBoxBase, TdSearchBoxComponent, TdSearchInputBase, TdSearchInputComponent };
 //# sourceMappingURL=covalent-core-search.mjs.map