@covalent/core 9.1.3 → 10.0.1

package/fesm2022/covalent-core-search.mjs

@@ -1,22 +1,21 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, ElementRef, Component, ChangeDetectionStrategy, Optional, ViewChild, Input, Output, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { EventEmitter, ElementRef, forwardRef, Component, ChangeDetectionStrategy, Optional, ViewChild, Input, Output, NgModule } from '@angular/core';
+import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
 import * as i2 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/input';
-import { MatInput, MatInputModule } from '@angular/material/input';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
-import * as i6 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 { MatInput } from '@angular/material/input';
+import { MatFormField } from '@angular/material/form-field';
 import { Subject, fromEvent, noop } from 'rxjs';
 import { debounceTime, skip, takeUntil } from 'rxjs/operators';
 import { mixinControlValueAccessor } from '@covalent/core/common';
-import * as i4 from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { MatIconButton } from '@angular/material/button';
 
+const _c0$1 = ["searchElement"];
+function TdSearchInputComponent_ng_template_8_Template(rf, ctx) { }
 class TdSearchInputBase {
     _changeDetectorRef;
     constructor(_changeDetectorRef) {
@@ -133,94 +132,145 @@ class TdSearchInputComponent extends _TdSearchInputMixinBase {
     _stopPropagation(event) {
         event.stopPropagation();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TdSearchInputComponent, deps: [{ token: i1.Dir, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", 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 }, { propertyName: "_searchElement", first: true, predicate: ["searchElement"], descendants: true, read: ElementRef, static: true }], usesInheritance: 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  >\n    <input\n      matInput\n      #searchElement\n      type=\"search\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      (blur)=\"handleBlur()\"\n      (keyup.enter)=\"handleSearch($event)\"\n    />\n  </mat-form-field>\n  <div class=\"td-search-input-clear-wrapper\">\n    <button mat-icon-button class=\"td-search-input-clear\" type=\"button\" [@searchState]=\"\n      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'\n    \" (click)=\"clearSearch()\">\n      <mat-icon>{{ clearIcon }}</mat-icon>\n    </button>\n  </div>\n</div>\n\n<ng-template #clearButton>\n  \n</ng-template>\n", styles: [":host .td-search-input{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;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-mdc-text-field-wrapper.mdc-text-field{padding-right:48px}:host .td-search-input ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}: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-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{margin-left:-48px;margin-right:0;overflow:hidden}\n"], dependencies: [{ kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.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"] }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], animations: [
-            trigger('searchState', [
-                state('hide-left', style({
-                    transform: 'translateX(-150%)',
-                    opacity: 0,
-                    display: 'none',
-                })),
-                state('hide-right', style({
-                    transform: 'translateX(150%)',
-                    opacity: 0,
-                    display: 'none',
-                })),
-                state('show', style({
-                    transform: 'translateX(0%)',
-                    opacity: 1,
-                    display: 'block',
-                })),
-                transition('* => show', animate('200ms ease-in')),
-                transition('show => *', animate('200ms ease-out')),
-            ]),
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = function TdSearchInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdSearchInputComponent)(i0.ɵɵdirectiveInject(i1.Dir, 8), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TdSearchInputComponent, selectors: [["td-search-input"]], viewQuery: function TdSearchInputComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(MatInput, 7);
+            i0.ɵɵviewQuery(_c0$1, 7, ElementRef);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._input = _t.first);
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx._searchElement = _t.first);
+        } }, inputs: { appearance: "appearance", showUnderline: "showUnderline", debounce: "debounce", placeholder: "placeholder", clearIcon: "clearIcon", value: "value" }, outputs: { searchDebounce: "searchDebounce", search: "search", clear: "clear", blurSearch: "blurSearch" }, features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => TdSearchInputComponent),
+                    multi: true,
+                },
+            ]), i0.ɵɵInheritDefinitionFeature], decls: 10, vars: 7, consts: [["searchElement", ""], ["clearButton", ""], [1, "td-search-input"], [1, "td-search-input-field", 3, "appearance"], ["matInput", "", "type", "search", 3, "ngModelChange", "blur", "keyup.enter", "ngModel", "placeholder"], [1, "td-search-input-clear-wrapper"], ["mat-icon-button", "", "type", "button", 1, "td-search-input-clear", 3, "click"]], template: function TdSearchInputComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 2)(1, "mat-form-field", 3)(2, "input", 4, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function TdSearchInputComponent_Template_input_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("blur", function TdSearchInputComponent_Template_input_blur_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur()); })("keyup.enter", function TdSearchInputComponent_Template_input_keyup_enter_2_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearch($event)); });
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(4, "div", 5)(5, "button", 6);
+            i0.ɵɵlistener("click", function TdSearchInputComponent_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.clearSearch()); });
+            i0.ɵɵelementStart(6, "mat-icon");
+            i0.ɵɵtext(7);
+            i0.ɵɵelementEnd()()()();
+            i0.ɵɵtemplate(8, TdSearchInputComponent_ng_template_8_Template, 0, 0, "ng-template", null, 1, i0.ɵɵtemplateRefExtractor);
+        } if (rf & 2) {
+            const searchElement_r2 = i0.ɵɵreference(3);
+            i0.ɵɵadvance();
+            i0.ɵɵclassProp("mat-hide-underline", !ctx.showUnderline);
+            i0.ɵɵproperty("appearance", ctx.appearance);
+            i0.ɵɵadvance();
+            i0.ɵɵtwoWayProperty("ngModel", ctx.value);
+            i0.ɵɵproperty("placeholder", ctx.placeholder);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("@searchState", searchElement_r2.value ? "show" : ctx.isRTL ? "hide-left" : "hide-right");
+            i0.ɵɵadvance(2);
+            i0.ɵɵtextInterpolate(ctx.clearIcon);
+        } }, dependencies: [CommonModule, FormsModule, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, MatInput, MatFormField, MatIcon], styles: ["[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;align-content:center;max-width:100%;justify-content:flex-end}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]   .td-search-input-field[_ngcontent-%COMP%]{flex:1}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     .mat-mdc-text-field-wrapper.mdc-text-field{padding-right:48px}[_nghost-%COMP%]   .td-search-input[_ngcontent-%COMP%]     mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}[_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-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%]{margin-left:-48px;margin-right:0;overflow:hidden}"], data: { animation: [
+                trigger('searchState', [
+                    state('hide-left', style({
+                        transform: 'translateX(-150%)',
+                        opacity: 0,
+                        display: 'none',
+                    })),
+                    state('hide-right', style({
+                        transform: 'translateX(150%)',
+                        opacity: 0,
+                        display: 'none',
+                    })),
+                    state('show', style({
+                        transform: 'translateX(0%)',
+                        opacity: 1,
+                        display: 'block',
+                    })),
+                    transition('* => show', animate('200ms ease-in')),
+                    transition('show => *', animate('200ms ease-out')),
+                ]),
+            ] }, changeDetection: 0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", 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%)',
-                                opacity: 0,
-                                display: 'none',
-                            })),
-                            state('hide-right', style({
-                                transform: 'translateX(150%)',
-                                opacity: 0,
-                                display: 'none',
-                            })),
-                            state('show', style({
-                                transform: 'translateX(0%)',
-                                opacity: 1,
-                                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  >\n    <input\n      matInput\n      #searchElement\n      type=\"search\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      (blur)=\"handleBlur()\"\n      (keyup.enter)=\"handleSearch($event)\"\n    />\n  </mat-form-field>\n  <div class=\"td-search-input-clear-wrapper\">\n    <button mat-icon-button class=\"td-search-input-clear\" type=\"button\" [@searchState]=\"\n      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'\n    \" (click)=\"clearSearch()\">\n      <mat-icon>{{ clearIcon }}</mat-icon>\n    </button>\n  </div>\n</div>\n\n<ng-template #clearButton>\n  \n</ng-template>\n", styles: [":host .td-search-input{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;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-mdc-text-field-wrapper.mdc-text-field{padding-right:48px}:host .td-search-input ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}: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-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{margin-left:-48px;margin-right:0;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1.Dir, decorators: [{
-                    type: Optional
-                }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { _input: [{
-                type: ViewChild,
-                args: [MatInput, { static: true }]
-            }], _searchElement: [{
-                type: ViewChild,
-                args: ['searchElement', { static: true, read: ElementRef }]
-            }], 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
-            }] } });
+(() => { (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, imports: [CommonModule, FormsModule, MatInput, MatFormField, MatIcon], animations: [
+                    trigger('searchState', [
+                        state('hide-left', style({
+                            transform: 'translateX(-150%)',
+                            opacity: 0,
+                            display: 'none',
+                        })),
+                        state('hide-right', style({
+                            transform: 'translateX(150%)',
+                            opacity: 0,
+                            display: 'none',
+                        })),
+                        state('show', style({
+                            transform: 'translateX(0%)',
+                            opacity: 1,
+                            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  >\n    <input\n      matInput\n      #searchElement\n      type=\"search\"\n      [(ngModel)]=\"value\"\n      [placeholder]=\"placeholder\"\n      (blur)=\"handleBlur()\"\n      (keyup.enter)=\"handleSearch($event)\"\n    />\n  </mat-form-field>\n  <div class=\"td-search-input-clear-wrapper\">\n    <button mat-icon-button class=\"td-search-input-clear\" type=\"button\" [@searchState]=\"\n      searchElement.value ? 'show' : isRTL ? 'hide-left' : 'hide-right'\n    \" (click)=\"clearSearch()\">\n      <mat-icon>{{ clearIcon }}</mat-icon>\n    </button>\n  </div>\n</div>\n\n<ng-template #clearButton>\n  \n</ng-template>\n", styles: [":host .td-search-input{box-sizing:border-box;display:flex;flex-direction:row;align-items:center;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-mdc-text-field-wrapper.mdc-text-field{padding-right:48px}:host .td-search-input ::ng-deep mat-form-field .mat-mdc-form-field-subscript-wrapper{display:none}: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-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{margin-left:-48px;margin-right:0;overflow:hidden}\n"] }]
+    }], () => [{ type: i1.Dir, decorators: [{
+                type: Optional
+            }] }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }], { _input: [{
+            type: ViewChild,
+            args: [MatInput, { static: true }]
+        }], _searchElement: [{
+            type: ViewChild,
+            args: ['searchElement', { static: true, read: ElementRef }]
+        }], 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
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdSearchInputComponent, { className: "TdSearchInputComponent", filePath: "search-input/search-input.component.ts", lineNumber: 87 }); })();
 
+const _c0 = a0 => ({ "td-search-icon-active": a0 });
+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_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.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();
+    i0.ɵɵtextInterpolate(ctx_r1.searchIcon);
+} }
 class TdSearchBoxBase {
     _changeDetectorRef;
     constructor(_changeDetectorRef) {
@@ -335,106 +385,123 @@ class TdSearchBoxComponent {
     handleBlur() {
         this.blurSearch.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: TdSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", 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    [ngClass]=\"{ 'td-search-icon-active': searchVisible || alwaysVisible }\"\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();\"\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-content:center;max-width:100%;justify-content:flex-end;align-items:center;position:relative}.td-search-box .td-search-icon.td-search-icon-active{margin-right:-48px;margin-left:0;z-index:1}.td-search-box td-search-input{--mdc-filled-text-field-container-color: transparent;--mat-form-field-state-layer-color: transparent;--mdc-filled-text-field-active-indicator-color: transparent;--mdc-filled-text-field-hover-active-indicator-color: transparent}[dir=rtl] .td-search-box td-search-input ::ng-deep{margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field{padding-left:48px;overflow:visible}.td-search-box td-search-input ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:after{bottom:-1px}\n"], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: TdSearchInputComponent, selector: "td-search-input", inputs: ["appearance", "showUnderline", "debounce", "placeholder", "clearIcon", "value"], outputs: ["searchDebounce", "search", "clear", "blurSearch"] }], 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 });
+    static ɵfac = function TdSearchBoxComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdSearchBoxComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ 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: { 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" }, features: [i0.ɵɵProvidersFeature([
+                {
+                    provide: NG_VALUE_ACCESSOR,
+                    useExisting: forwardRef(() => TdSearchBoxComponent),
+                    multi: true,
+                },
+            ])], decls: 6, vars: 11, consts: [["searchInput", ""], [1, "td-search-box"], ["mat-icon-button", "", "type", "button", 1, "td-search-icon", 3, "click", "ngClass"], [4, "ngIf"], [3, "ngModelChange", "searchDebounce", "search", "clear", "blur", "debounce", "ngModel", "showUnderline", "placeholder", "clearIcon"]], template: function TdSearchBoxComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1)(1, "button", 2);
+            i0.ɵɵlistener("click", function TdSearchBoxComponent_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.searchClicked()); });
+            i0.ɵɵtemplate(2, TdSearchBoxComponent_mat_icon_2_Template, 2, 1, "mat-icon", 3)(3, TdSearchBoxComponent_mat_icon_3_Template, 2, 1, "mat-icon", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "td-search-input", 4, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function TdSearchBoxComponent_Template_td_search_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.value, $event) || (ctx.value = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("searchDebounce", function TdSearchBoxComponent_Template_td_search_input_searchDebounce_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearchDebounce($event)); })("search", function TdSearchBoxComponent_Template_td_search_input_search_4_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleSearch($event)); })("clear", function TdSearchBoxComponent_Template_td_search_input_clear_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleClear()); })("blur", function TdSearchBoxComponent_Template_td_search_input_blur_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.handleBlur()); });
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(9, _c0, ctx.searchVisible || ctx.alwaysVisible));
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.searchVisible && !ctx.alwaysVisible);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.searchVisible || ctx.alwaysVisible);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("@inputState", ctx.alwaysVisible || ctx.searchVisible)("debounce", ctx.debounce);
+            i0.ɵɵtwoWayProperty("ngModel", ctx.value);
+            i0.ɵɵproperty("showUnderline", ctx.showUnderline)("placeholder", ctx.placeholder)("clearIcon", ctx.clearIcon);
+        } }, dependencies: [CommonModule, i1$1.NgClass, i1$1.NgIf, FormsModule, i2.NgControlStatus, i2.NgModel, MatIconButton, TdSearchInputComponent, MatIcon], styles: ["[_nghost-%COMP%]{display:block}.td-search-box[_ngcontent-%COMP%]{box-sizing:border-box;display:flex;flex-direction:row;align-content:center;max-width:100%;justify-content:flex-end;align-items:center;position:relative}.td-search-box[_ngcontent-%COMP%]   .td-search-icon.td-search-icon-active[_ngcontent-%COMP%]{margin-right:-48px;margin-left:0;z-index:1}.td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]{--mdc-filled-text-field-container-color: transparent;--mat-form-field-state-layer-color: transparent;--mdc-filled-text-field-active-indicator-color: transparent;--mdc-filled-text-field-hover-active-indicator-color: transparent}[dir=rtl][_ngcontent-%COMP%]   .td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]    {margin-left:0!important}.td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]     .mat-mdc-text-field-wrapper.mdc-text-field{padding-left:48px;overflow:visible}.td-search-box[_ngcontent-%COMP%]   td-search-input[_ngcontent-%COMP%]     .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:after{bottom:-1px}"], 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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", 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    [ngClass]=\"{ 'td-search-icon-active': searchVisible || alwaysVisible }\"\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();\"\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-content:center;max-width:100%;justify-content:flex-end;align-items:center;position:relative}.td-search-box .td-search-icon.td-search-icon-active{margin-right:-48px;margin-left:0;z-index:1}.td-search-box td-search-input{--mdc-filled-text-field-container-color: transparent;--mat-form-field-state-layer-color: transparent;--mdc-filled-text-field-active-indicator-color: transparent;--mdc-filled-text-field-hover-active-indicator-color: transparent}[dir=rtl] .td-search-box td-search-input ::ng-deep{margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field{padding-left:48px;overflow:visible}.td-search-box td-search-input ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:after{bottom:-1px}\n"] }]
-        }], ctorParameters: () => [{ 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
-            }] } });
+(() => { (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, imports: [CommonModule, FormsModule, MatIconButton, TdSearchInputComponent, MatIcon], 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    [ngClass]=\"{ 'td-search-icon-active': searchVisible || alwaysVisible }\"\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();\"\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-content:center;max-width:100%;justify-content:flex-end;align-items:center;position:relative}.td-search-box .td-search-icon.td-search-icon-active{margin-right:-48px;margin-left:0;z-index:1}.td-search-box td-search-input{--mdc-filled-text-field-container-color: transparent;--mat-form-field-state-layer-color: transparent;--mdc-filled-text-field-active-indicator-color: transparent;--mdc-filled-text-field-hover-active-indicator-color: transparent}[dir=rtl] .td-search-box td-search-input ::ng-deep{margin-left:0!important}.td-search-box td-search-input ::ng-deep .mat-mdc-text-field-wrapper.mdc-text-field{padding-left:48px;overflow:visible}.td-search-box td-search-input ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:after{bottom:-1px}\n"] }]
+    }], () => [{ 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
+        }], value: [{
+            type: Input
+        }], searchDebounce: [{
+            type: Output
+        }], search: [{
+            type: Output
+        }], clear: [{
+            type: Output
+        }], blurSearch: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TdSearchBoxComponent, { className: "TdSearchBoxComponent", filePath: "search-box/search-box.component.ts", lineNumber: 65 }); })();
 
+/**
+ * @deprecated This module is deprecated and will be removed in future versions.
+ * Please migrate to using standalone components as soon as possible.
+ */
 class CovalentSearchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: CovalentSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: CovalentSearchModule, declarations: [TdSearchInputComponent, TdSearchBoxComponent], imports: [FormsModule,
-            CommonModule,
-            MatInputModule,
-            MatIconModule,
-            MatButtonModule], exports: [TdSearchInputComponent, TdSearchBoxComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: CovalentSearchModule, imports: [FormsModule,
-            CommonModule,
-            MatInputModule,
-            MatIconModule,
-            MatButtonModule] });
+    static ɵfac = function CovalentSearchModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSearchModule)(); };
+    static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentSearchModule });
+    static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [TdSearchInputComponent, TdSearchBoxComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: CovalentSearchModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        FormsModule,
-                        CommonModule,
-                        MatInputModule,
-                        MatIconModule,
-                        MatButtonModule,
-                    ],
-                    declarations: [TdSearchInputComponent, TdSearchBoxComponent],
-                    exports: [TdSearchInputComponent, TdSearchBoxComponent],
-                }]
-        }] });
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CovalentSearchModule, [{
+        type: NgModule,
+        args: [{
+                imports: [TdSearchInputComponent, TdSearchBoxComponent],
+                exports: [TdSearchInputComponent, TdSearchBoxComponent],
+            }]
+    }], null, null); })();
+(function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(CovalentSearchModule, { imports: [TdSearchInputComponent, TdSearchBoxComponent], exports: [TdSearchInputComponent, TdSearchBoxComponent] }); })();
 
 /**
  * Generated bundle index. Do not edit.