@covalent/core
Version:
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.
512 lines (506 loc) • 30.3 kB
JavaScript
import * as i0 from '@angular/core';
import { inject, NgZone, EventEmitter, ChangeDetectorRef, forwardRef, ElementRef, ChangeDetectionStrategy, Component, Output, Input, ViewChild, NgModule } from '@angular/core';
import { trigger, state, transition, style, animate, AUTO_STYLE } from '@angular/animations';
import * as i1 from '@angular/forms';
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
import { Dir } 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 { 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) {
this._changeDetectorRef = _changeDetectorRef;
}
}
const _TdSearchInputMixinBase = mixinControlValueAccessor(TdSearchInputBase);
class TdSearchInputComponent extends _TdSearchInputMixinBase {
_dir = inject(Dir, { optional: true });
_ngZone = inject(NgZone);
_input;
_searchElement;
/**
* appearance?: MatFormFieldAppearance
* Appearance style for the underlying input component.
*/
appearance = 'fill';
/**
* 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.
*/
searchChange = 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() {
const _changeDetectorRef = inject(ChangeDetectorRef);
super(_changeDetectorRef);
}
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.searchChange.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 = function TdSearchInputComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdSearchInputComponent)(); };
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", searchChange: "searchChange", 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, i1.DefaultValueAccessor, i1.NgControlStatus, i1.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 });
}
(() => { (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"] }]
}], () => [], { _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
}], searchChange: [{
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: 90 }); })();
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) {
this._changeDetectorRef = _changeDetectorRef;
}
}
class TdSearchBoxComponent {
_changeDetectorRef = inject(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 = 'close';
/**
* 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.
*/
searchChange = 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();
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.searchChange.emit(value);
}
handleClear() {
this.clear.emit();
}
handleBlur() {
this.blurSearch.emit();
}
static ɵfac = function TdSearchBoxComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TdSearchBoxComponent)(); };
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", searchChange: "searchChange", 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", "searchChange", "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)); })("searchChange", function TdSearchBoxComponent_Template_td_search_input_searchChange_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, i1.NgControlStatus, i1.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 });
}
(() => { (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 (searchChange)=\"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"] }]
}], null, { _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
}], searchChange: [{
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: 76 }); })();
/**
* @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 = function CovalentSearchModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CovalentSearchModule)(); };
static ɵmod = /*@__PURE__*/ i0.ɵɵdefineNgModule({ type: CovalentSearchModule });
static ɵinj = /*@__PURE__*/ i0.ɵɵdefineInjector({ imports: [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.
*/
export { CovalentSearchModule, TdSearchBoxBase, TdSearchBoxComponent, TdSearchInputBase, TdSearchInputComponent, _TdSearchInputMixinBase };
//# sourceMappingURL=covalent-core-search.mjs.map