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

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

class TdSearchInputBase {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
    }
}
const _TdSearchInputMixinBase = mixinControlValueAccessor(TdSearchInputBase);
class TdSearchInputComponent extends _TdSearchInputMixinBase {
    constructor(_dir, _changeDetectorRef, _ngZone) {
        super(_changeDetectorRef);
        this._dir = _dir;
        this._changeDetectorRef = _changeDetectorRef;
        this._ngZone = _ngZone;
        /**
         * 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'.
         */
        this.showUnderline = false;
        /**
         * debounce?: number
         * 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.
         * Defaults to 'cancel' icon.
         */
        this.clearIcon = 'cancel';
        /**
         * searchDebounce: function($event)
         * Event emitted after the [debounce] timeout.
         */
        this.searchDebounce = new EventEmitter();
        /**
         * search: function($event)
         * Event emitted after the key enter has been pressed.
         */
        this.search = new EventEmitter();
        /**
         * clear: function()
         * Event emitted after the clear icon has been clicked.
         */
        this.clear = new EventEmitter();
        /**
         * blur: function()
         * Event emitted after the blur event has been called in underlying input.
         */
        this.blurSearch = new EventEmitter();
        this._destroy$ = new Subject();
    }
    get isRTL() {
        if (this._dir) {
            return this._dir.dir === 'rtl';
        }
        return false;
    }
    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();
    }
}
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 }, { token: i0.NgZone }], 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 }, { 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    floatLabel=\"never\"\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  <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      (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 }, { 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 {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
    }
}
class TdSearchBoxComponent {
    constructor(_changeDetectorRef) {
        this._changeDetectorRef = _changeDetectorRef;
        this._searchVisible = false;
        /**
         * backIcon?: string
         * The icon used to close the search toggle, only shown when [alwaysVisible] is false.
         * Defaults to 'search' icon.
         */
        this.backIcon = 'search';
        /**
         * searchIcon?: string
         * The icon used to open/focus the search toggle.
         * Defaults to 'search' icon.
         */
        this.searchIcon = 'search';
        /**
         * clearIcon?: string
         * The icon used to clear the search input.
         * Defaults to 'cancel' icon.
         */
        this.clearIcon = 'cancel';
        /**
         * showUnderline?: boolean
         * Sets if the input underline should be visible. Defaults to 'false'.
         */
        this.showUnderline = false;
        /**
         * debounce?: number
         * Debounce timeout between keypresses. Defaults to 400.
         */
        this.debounce = 400;
        /**
         * alwaysVisible?: boolean
         * 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.
         */
        this.searchDebounce = new EventEmitter();
        /**
         * search: function($event)
         * Event emitted after the key enter has been pressed.
         */
        this.search = new EventEmitter();
        /**
         * clear: function()
         * Event emitted after the clear icon has been clicked.
         */
        this.clear = new EventEmitter();
        /**
         * blur: function()
         * Event emitted after the blur event has been called in underlying input.
         */
        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.
     */
    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();
    }
}
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 {
}
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, _TdSearchInputMixinBase };
//# sourceMappingURL=covalent-core-search.mjs.map