@covalent/core/fesm2022/covalent-core-search.mjs

Core Teradata UI Platform for layouts, icons, custom components and themes. This should be added as a dependency for any project that wants to use layouts, icons and themes for Angular Material.

import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, ElementRef, Component, ChangeDetectionStrategy, Optional, ViewChild, Input, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i4 from '@angular/material/input';
import { MatInput, MatInputModule } from '@angular/material/input';
import * as i6 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i7 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 { Subject, fromEvent, noop } from 'rxjs';
import { debounceTime, skip, takeUntil } from 'rxjs/operators';
import { mixinControlValueAccessor } from '@covalent/core/common';
import * as i5 from '@angular/material/form-field';

class TdSearchInputBase {
    _changeDetectorRef;
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
    }
}
const _TdSearchInputMixinBase = mixinControlValueAccessor(TdSearchInputBase);
class TdSearchInputComponent extends _TdSearchInputMixinBase {
    _dir;
    _changeDetectorRef;
    _ngZone;
    _input;
    _searchElement;
    /**
     * appearance?: MatFormFieldAppearance
     * Appearance style for the underlying input component.
     */
    appearance = 'outline';
    /**
     * showUnderline?: boolean
     * Sets if the input underline should be visible. Defaults to 'false'.
     */
    showUnderline = false;
    /**
     * debounce?: number
     * Debounce timeout between keypresses. Defaults to 400.
     */
    debounce = 400;
    /**
     * placeholder?: string
     * Placeholder for the underlying input component.
     */
    placeholder = '';
    /**
     * clearIcon?: string
     * The icon used to clear the search input.
     * Defaults to 'cancel' icon.
     */
    clearIcon = 'cancel';
    value;
    /**
     * searchDebounce: function($event)
     * Event emitted after the [debounce] timeout.
     */
    searchDebounce = new EventEmitter();
    /**
     * search: function($event)
     * Event emitted after the key enter has been pressed.
     */
    search = new EventEmitter();
    /**
     * clear: function()
     * Event emitted after the clear icon has been clicked.
     */
    clear = new EventEmitter();
    /**
     * blur: function()
     * Event emitted after the blur event has been called in underlying input.
     */
    blurSearch = new EventEmitter();
    get isRTL() {
        if (this._dir) {
            return this._dir.dir === 'rtl';
        }
        return false;
    }
    _destroy$ = new Subject();
    constructor(_dir, _changeDetectorRef, _ngZone) {
        super(_changeDetectorRef);
        this._dir = _dir;
        this._changeDetectorRef = _changeDetectorRef;
        this._ngZone = _ngZone;
    }
    ngOnInit() {
        this._input?.ngControl?.valueChanges
            ?.pipe(debounceTime(this.debounce), skip(1), // skip first change when value is set to undefined
        takeUntil(this._destroy$))
            .subscribe((value) => {
            this._searchTermChanged(value);
        });
        this._ngZone.runOutsideAngular(() => fromEvent(this._searchElement.nativeElement, 'search')
            .pipe(takeUntil(this._destroy$))
            .subscribe(this._stopPropagation));
    }
    ngOnDestroy() {
        this._destroy$.next();
    }
    /**
     * Method to focus to underlying input.
     */
    focus() {
        this._input?.focus();
    }
    handleBlur() {
        this.blurSearch.emit();
    }
    handleSearch(event) {
        this._stopPropagation(event);
        if (typeof this.value == 'string') {
            this.search.emit(this.value);
        }
    }
    /**
     * Method to clear the underlying input.
     */
    clearSearch() {
        this.value = '';
        this._changeDetectorRef.markForCheck();
        this.clear.emit();
    }
    _searchTermChanged(value) {
        this.searchDebounce.emit(value);
    }
    _stopPropagation(event) {
        event.stopPropagation();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", 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: "17.1.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 }, { 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    <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</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-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{flex:0 0 auto}\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }], 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: "17.1.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  >\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    <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</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-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{flex:0 0 auto}\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
            }] } });

class TdSearchBoxBase {
    _changeDetectorRef;
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
    }
}
class TdSearchBoxComponent {
    _changeDetectorRef;
    _searchVisible = false;
    _searchInput;
    get searchVisible() {
        return this._searchVisible;
    }
    /**
     * backIcon?: string
     * The icon used to close the search toggle, only shown when [alwaysVisible] is false.
     * Defaults to 'search' icon.
     */
    backIcon = 'search';
    /**
     * searchIcon?: string
     * The icon used to open/focus the search toggle.
     * Defaults to 'search' icon.
     */
    searchIcon = 'search';
    /**
     * clearIcon?: string
     * The icon used to clear the search input.
     * Defaults to 'cancel' icon.
     */
    clearIcon = 'cancel';
    /**
     * showUnderline?: boolean
     * Sets if the input underline should be visible. Defaults to 'false'.
     */
    showUnderline = false;
    /**
     * debounce?: number
     * Debounce timeout between keypresses. Defaults to 400.
     */
    debounce = 400;
    /**
     * alwaysVisible?: boolean
     * Sets if the input should always be visible. Defaults to 'false'.
     */
    alwaysVisible = false;
    /**
     * placeholder?: string
     * Placeholder for the underlying input component.
     */
    placeholder = '';
    value;
    /**
     * searchDebounce: function($event)
     * Event emitted after the [debounce] timeout.
     */
    searchDebounce = new EventEmitter();
    /**
     * search: function($event)
     * Event emitted after the key enter has been pressed.
     */
    search = new EventEmitter();
    /**
     * clear: function()
     * Event emitted after the clear icon has been clicked.
     */
    clear = new EventEmitter();
    /**
     * blur: function()
     * Event emitted after the blur event has been called in underlying input.
     */
    blurSearch = new EventEmitter();
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
    }
    writeValue(value) {
        this.value = value;
        this._changeDetectorRef.markForCheck();
    }
    registerOnChange() {
        noop;
    }
    registerOnTouched() {
        noop;
    }
    /**
     * Method executed when the search icon is clicked.
     */
    searchClicked() {
        if (!this.alwaysVisible && this._searchVisible) {
            this.value = '';
            this.handleClear();
        }
        else if (this.alwaysVisible || !this._searchVisible) {
            this._searchInput?.focus();
        }
        this.toggleVisibility();
    }
    toggleVisibility() {
        this._searchVisible = !this._searchVisible;
        this._changeDetectorRef.markForCheck();
    }
    handleSearchDebounce(value) {
        this.searchDebounce.emit(value);
    }
    handleSearch(value) {
        this.search.emit(value);
    }
    handleClear() {
        this.clear.emit();
    }
    handleBlur() {
        this.blurSearch.emit();
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: TdSearchBoxComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.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-content:center;max-width:100%;justify-content:flex-end}.td-search-box .td-search-icon{margin-top:4px}.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}.mat-toolbar :host ::ng-deep .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:#fff}\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: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7.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 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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-content:center;max-width:100%;justify-content:flex-end}.td-search-box .td-search-icon{margin-top:4px}.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}.mat-toolbar :host ::ng-deep .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input{color:#fff}\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
            }] } });

class CovalentSearchModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.2", ngImport: i0, type: CovalentSearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.1.2", 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: "17.1.2", ngImport: i0, type: CovalentSearchModule, imports: [FormsModule,
            CommonModule,
            MatInputModule,
            MatIconModule,
            MatButtonModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.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, _TdSearchInputMixinBase };
//# sourceMappingURL=covalent-core-search.mjs.map