ng-devui
Version:
DevUI components based on Angular
224 lines (219 loc) • 27.7 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, ChangeDetectionStrategy, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i1 from 'ng-devui/i18n';
import * as i2 from 'ng-devui/utils';
import { WithConfig } from 'ng-devui/utils';
import { Subject, fromEvent } from 'rxjs';
import { takeUntil, map, debounceTime, filter } from 'rxjs/operators';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from 'ng-devui/common';
import { DCommonModule } from 'ng-devui/common';
class SearchComponent {
get hasGlowStyle() {
return this.showGlowStyle;
}
;
constructor(renderer, i18n, cdr, el, devConfigService) {
this.renderer = renderer;
this.i18n = i18n;
this.cdr = cdr;
this.el = el;
this.devConfigService = devConfigService;
this.maxLength = Number.MAX_SAFE_INTEGER;
this.isKeyupSearch = false;
this.delay = 300;
this.disabled = false;
this.iconPosition = 'right';
this.noBorder = false;
this.autoFocus = false;
this.styleType = 'default';
this.showGlowStyle = true;
this.searchFn = new EventEmitter();
this.clearIconExit = false;
this.destroy$ = new Subject();
this.onChange = (_) => null;
this.onTouch = () => null;
}
ngOnInit() {
this.setI18nText();
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouch = fn;
}
writeValue(value = '') {
this.renderer.setProperty(this.filterInputElement.nativeElement, 'value', value);
this.renderClearIcon();
}
setI18nText() {
this.i18nCommonText = this.i18n.getI18nText().common;
this.i18nSubscription = this.i18n
.langChange()
.pipe(takeUntil(this.destroy$))
.subscribe((data) => {
this.i18nCommonText = data.common;
this.cdr.markForCheck();
});
}
clearText() {
this.renderer.setProperty(this.filterInputElement.nativeElement, 'value', '');
if (this.onChange) {
this.onChange('');
}
this.searchFn.emit('');
this.filterInputElement.nativeElement.focus();
this.renderClearIcon();
}
inputChange(value, event) {
this.renderClearIcon();
// 此函数不能删除，需要给filterInput.value赋值，从而控制clear的显隐。因为registerFilterChange对clear的显隐控制不起作用。
}
inputBlur() {
this.onTouch();
}
clickSearch(term) {
if (!this.disabled) {
this.searchFn.emit(term);
}
}
registerFilterChange() {
fromEvent(this.filterInputElement.nativeElement, 'input')
.pipe(takeUntil(this.destroy$), map((e) => e.target.value), debounceTime(this.delay))
.subscribe((value) => {
this.onChange(value);
if (this.isKeyupSearch) {
this.searchFn.emit(value);
}
});
fromEvent(this.filterInputElement.nativeElement, 'keydown')
.pipe(takeUntil(this.destroy$), filter((keyEvent) => keyEvent.key === 'Enter'), debounceTime(this.delay))
.subscribe((keyEvent) => {
this.searchFn.emit(this.filterInputElement.nativeElement.value);
});
}
ngAfterViewInit() {
this.registerFilterChange();
this.renderClearIcon();
}
renderClearIcon() {
if (this.iconPosition === 'right') {
if (this.filterInputElement.nativeElement.value && this.lineElement && this.clearIconElement) {
this.clearIconExit = true;
}
else if (this.lineElement && this.clearIconElement) {
this.clearIconExit = false;
}
}
else {
if (this.filterInputElement.nativeElement.value && this.clearIconElement) {
this.clearIconExit = true;
}
else if (this.clearIconElement) {
this.clearIconExit = false;
}
}
this.cdr.markForCheck();
}
ngOnDestroy() {
this.destroy$.next(true);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchComponent, deps: [{ token: i0.Renderer2 }, { token: i1.I18nService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i2.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SearchComponent, selector: "d-search", inputs: { size: "size", placeholder: "placeholder", maxLength: "maxLength", isKeyupSearch: "isKeyupSearch", delay: "delay", disabled: "disabled", cssClass: "cssClass", iconPosition: "iconPosition", noBorder: "noBorder", autoFocus: "autoFocus", styleType: "styleType", showGlowStyle: "showGlowStyle" }, outputs: { searchFn: "searchFn" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchComponent),
multi: true,
},
], viewQueries: [{ propertyName: "filterInputElement", first: true, predicate: ["filterInput"], descendants: true, static: true }, { propertyName: "lineElement", first: true, predicate: ["line"], descendants: true }, { propertyName: "clearIconElement", first: true, predicate: ["clearIcon"], descendants: true }], exportAs: ["search"], ngImport: i0, template: "<div class=\"devui-search\" [class.devui-gray-style]=\"styleType === 'gray'\">\n <input\n #filterInput\n [dAutoFocus]=\"autoFocus\"\n [placeholder]=\"placeholder || i18nCommonText?.searchPlaceholder\"\n (change)=\"inputChange(filterInput.value, $event)\"\n (keyup)=\"inputChange(filterInput.value, $event)\"\n [attr.maxlength]=\"maxLength\"\n [disabled]=\"disabled\"\n (blur)=\"inputBlur()\"\n type=\"text\"\n class=\"devui-input {{ cssClass }}\"\n [ngClass]=\"{\n 'devui-input-sm': size === 'sm',\n 'devui-input-lg': size === 'lg',\n 'devui-clear-exit': clearIconExit,\n 'devui-icon-left': iconPosition === 'left',\n 'devui-search-no-border': noBorder === true\n }\"\n />\n <span\n class=\"devui-search-icon\"\n [ngClass]=\"{ 'devui-search-icon-sm': size === 'sm', 'devui-search-icon-lg': size === 'lg', 'devui-icon-left': iconPosition === 'left' }\"\n (click)=\"clickSearch(filterInput.value)\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"svg-icon-search\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M7.71295742,1.53283795 C11.0266659,1.53283795 13.7129574,4.21912945 13.7129574,7.53283795 C13.7129574,9.0690006 13.1356609,10.4703284 12.1861834,11.5317059 L14.5333041,13.8784875 C14.7285663,14.0737497 14.7285663,14.3903321 14.5333041,14.5855943 C14.3597378,14.7591606 14.0903134,14.7784458 13.8954453,14.6434497 L13.8261974,14.5855943 L11.4604434,12.2188804 C10.4336319,13.0411023 9.13072017,13.5328379 7.71295742,13.5328379 C4.39924893,13.5328379 1.71295742,10.8465464 1.71295742,7.53283795 C1.71295742,4.21912945 4.39924893,1.53283795 7.71295742,1.53283795 Z M7.71295742,2.53283795 C4.95153368,2.53283795 2.71295742,4.7714142 2.71295742,7.53283795 C2.71295742,10.2942617 4.95153368,12.5328379 7.71295742,12.5328379 C10.4743812,12.5328379 12.7129574,10.2942617 12.7129574,7.53283795 C12.7129574,4.7714142 10.4743812,2.53283795 7.71295742,2.53283795 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n <span\n #line\n *ngIf=\"iconPosition === 'right'\"\n class=\"devui-search-line\"\n [ngClass]=\"{ 'devui-search-line-sm': size === 'sm', 'devui-search-line-lg': size === 'lg', 'devui-clear-exit': clearIconExit }\"\n >\n </span>\n <span\n *ngIf=\"!disabled\"\n #clearIcon\n (click)=\"clearText()\"\n class=\"devui-search-clear\"\n [ngClass]=\"{\n 'devui-search-clear-sm': size === 'sm',\n 'devui-search-clear-lg': size === 'lg',\n 'devui-clear-exit': clearIconExit,\n 'devui-icon-left': iconPosition === 'left'\n }\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"svg-icon-clear\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\n fill=\"#D5D5DB\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-search .devui-serach-line{border-color:var(--devui-dividing-line, #f0f0f0)}svg.svg-icon-search path{fill:var(--devui-icon-fill, #595959);transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}svg.svg-icon-search:hover path{fill:var(--devui-icon-fill-hover, #191919)}svg.svg-icon-clear{vertical-align:middle;position:relative;top:-.1em}svg.svg-icon-clear path{fill:var(--devui-shape-icon-fill, #c2c2c2);transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}svg.svg-icon-clear:hover path{fill:var(--devui-shape-icon-fill-hover, #808080)}:host{display:inline-block}.devui-search{position:relative}.devui-search .devui-input{height:28px;padding:4px 28px 4px 8px;font-size:var(--devui-font-size, 12px);text-overflow:ellipsis}.devui-search .devui-input.devui-icon-left{padding-left:32px}.devui-search .devui-input.devui-search-no-border:not(:focus,:active){background-color:unset}.devui-search .devui-input.devui-search-no-border:not(:hover,:focus,:active){border:1px solid transparent}.devui-search .devui-input.devui-clear-exit:not(.devui-icon-left){padding-right:60px}.devui-search .devui-input-sm{height:26px;padding:4px 24px 4px 8px;font-size:var(--devui-font-size, 12px)}.devui-search .devui-input-sm.devui-clear-exit:not(.devui-icon-left){padding-right:56px}.devui-search .devui-input-lg{height:46px;padding:12px 36px 12px 8px;font-size:var(--devui-font-size-lg, 14px);line-height:24px}.devui-search .devui-input-lg.devui-clear-exit:not(.devui-icon-left){padding-right:72px}.devui-search .devui-input::-ms-clear{display:none}.devui-search .devui-input:disabled{background-color:var(--devui-disabled-bg, #f3f3f3);border-color:var(--devui-disabled-line, #e6e6e6);color:var(--devui-disabled-text, #c2c2c2)}.devui-search .devui-input:disabled+.devui-search-icon svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-search .icon{cursor:pointer}.devui-search .devui-search-icon{position:absolute;width:auto;pointer-events:all;cursor:pointer;height:100%;line-height:28px;padding:0 12px;top:0;right:0;z-index:2;text-align:center;display:flex;align-items:center;justify-content:center}.devui-search .devui-search-icon.devui-icon-left{left:8px;right:auto;padding-left:0}.devui-search .devui-search-icon>svg{height:16px;width:16px}.devui-search .devui-search-icon-sm{height:26px;line-height:26px;padding:0 12px}.devui-search .devui-search-icon-sm>svg{height:14px;width:14px}.devui-search .devui-search-icon-lg{height:46px;line-height:46px}.devui-search .devui-search-icon-lg>svg{height:18px;width:18px}.devui-search .devui-search-clear{position:absolute;width:auto;top:0;right:36px;padding:0 8px;pointer-events:all;cursor:pointer;height:100%;line-height:28px;font-size:var(--devui-font-size-lg, 14px);z-index:2;display:none}.devui-search .devui-search-clear.devui-icon-left{right:0}.devui-search .devui-search-clear.devui-clear-exit{display:block}.devui-search .devui-search-clear-sm{line-height:26px;padding:0 8px}.devui-search .devui-search-clear-sm>svg{height:14px;width:14px}.devui-search .devui-search-clear-lg{right:46px;line-height:46px;padding:0 8px}.devui-search .devui-search-clear-lg>svg{height:18px;width:18px}.devui-search .devui-search-line{position:absolute;right:36px;height:46%;top:27%;width:1px;border-left-width:1px;border-left-style:solid;border-color:var(--devui-line, #dbdbdb);line-height:28px;display:none}.devui-search .devui-search-line.devui-clear-exit{display:block}.devui-search .devui-search-line-sm{line-height:26px}.devui-search .devui-search-line-lg{line-height:46px;right:42px}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.AutoFocusDirective, selector: "[dAutoFocus]", inputs: ["dAutoFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], SearchComponent.prototype, "styleType", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], SearchComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchComponent, decorators: [{
type: Component,
args: [{ selector: 'd-search', exportAs: 'search', changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => SearchComponent),
multi: true,
},
], template: "<div class=\"devui-search\" [class.devui-gray-style]=\"styleType === 'gray'\">\n <input\n #filterInput\n [dAutoFocus]=\"autoFocus\"\n [placeholder]=\"placeholder || i18nCommonText?.searchPlaceholder\"\n (change)=\"inputChange(filterInput.value, $event)\"\n (keyup)=\"inputChange(filterInput.value, $event)\"\n [attr.maxlength]=\"maxLength\"\n [disabled]=\"disabled\"\n (blur)=\"inputBlur()\"\n type=\"text\"\n class=\"devui-input {{ cssClass }}\"\n [ngClass]=\"{\n 'devui-input-sm': size === 'sm',\n 'devui-input-lg': size === 'lg',\n 'devui-clear-exit': clearIconExit,\n 'devui-icon-left': iconPosition === 'left',\n 'devui-search-no-border': noBorder === true\n }\"\n />\n <span\n class=\"devui-search-icon\"\n [ngClass]=\"{ 'devui-search-icon-sm': size === 'sm', 'devui-search-icon-lg': size === 'lg', 'devui-icon-left': iconPosition === 'left' }\"\n (click)=\"clickSearch(filterInput.value)\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"svg-icon-search\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M7.71295742,1.53283795 C11.0266659,1.53283795 13.7129574,4.21912945 13.7129574,7.53283795 C13.7129574,9.0690006 13.1356609,10.4703284 12.1861834,11.5317059 L14.5333041,13.8784875 C14.7285663,14.0737497 14.7285663,14.3903321 14.5333041,14.5855943 C14.3597378,14.7591606 14.0903134,14.7784458 13.8954453,14.6434497 L13.8261974,14.5855943 L11.4604434,12.2188804 C10.4336319,13.0411023 9.13072017,13.5328379 7.71295742,13.5328379 C4.39924893,13.5328379 1.71295742,10.8465464 1.71295742,7.53283795 C1.71295742,4.21912945 4.39924893,1.53283795 7.71295742,1.53283795 Z M7.71295742,2.53283795 C4.95153368,2.53283795 2.71295742,4.7714142 2.71295742,7.53283795 C2.71295742,10.2942617 4.95153368,12.5328379 7.71295742,12.5328379 C10.4743812,12.5328379 12.7129574,10.2942617 12.7129574,7.53283795 C12.7129574,4.7714142 10.4743812,2.53283795 7.71295742,2.53283795 Z\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n <span\n #line\n *ngIf=\"iconPosition === 'right'\"\n class=\"devui-search-line\"\n [ngClass]=\"{ 'devui-search-line-sm': size === 'sm', 'devui-search-line-lg': size === 'lg', 'devui-clear-exit': clearIconExit }\"\n >\n </span>\n <span\n *ngIf=\"!disabled\"\n #clearIcon\n (click)=\"clearText()\"\n class=\"devui-search-clear\"\n [ngClass]=\"{\n 'devui-search-clear-sm': size === 'sm',\n 'devui-search-clear-lg': size === 'lg',\n 'devui-clear-exit': clearIconExit,\n 'devui-icon-left': iconPosition === 'left'\n }\"\n >\n <svg\n width=\"16px\"\n height=\"16px\"\n viewBox=\"0 0 16 16\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n class=\"svg-icon-clear\"\n >\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675 4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288 C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289 L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935 5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271 C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364 10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751 11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742 L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z\"\n fill=\"#D5D5DB\"\n fill-rule=\"nonzero\"\n ></path>\n </g>\n </svg>\n </span>\n</div>\n", styles: [".devui-font-size-base{font-size:var(--devui-font-size, 12px)}.devui-font-base{font-size:var(--devui-font-size, 12px);font-weight:var(--devui-font-content-weight, normal);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-modal-title{font-size:var(--devui-font-size-modal-title, 18px)}.devui-font-modal-title{font-size:var(--devui-font-size-modal-title, 18px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-page-title{font-size:var(--devui-font-size-page-title, 16px)}.devui-font-page-title{font-size:var(--devui-font-size-page-title, 16px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-font-size-secondary-title{font-size:var(--devui-font-size-card-title, 14px)}.devui-font-secondary-title{font-size:var(--devui-font-size-card-title, 14px);font-weight:var(--devui-font-title-weight, bold);line-height:var(--devui-line-height-base, 1.5)}.devui-search .devui-serach-line{border-color:var(--devui-dividing-line, #f0f0f0)}svg.svg-icon-search path{fill:var(--devui-icon-fill, #595959);transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}svg.svg-icon-search:hover path{fill:var(--devui-icon-fill-hover, #191919)}svg.svg-icon-clear{vertical-align:middle;position:relative;top:-.1em}svg.svg-icon-clear path{fill:var(--devui-shape-icon-fill, #c2c2c2);transition:all var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)) var(--devui-animation-duration-slow, .3s)}svg.svg-icon-clear:hover path{fill:var(--devui-shape-icon-fill-hover, #808080)}:host{display:inline-block}.devui-search{position:relative}.devui-search .devui-input{height:28px;padding:4px 28px 4px 8px;font-size:var(--devui-font-size, 12px);text-overflow:ellipsis}.devui-search .devui-input.devui-icon-left{padding-left:32px}.devui-search .devui-input.devui-search-no-border:not(:focus,:active){background-color:unset}.devui-search .devui-input.devui-search-no-border:not(:hover,:focus,:active){border:1px solid transparent}.devui-search .devui-input.devui-clear-exit:not(.devui-icon-left){padding-right:60px}.devui-search .devui-input-sm{height:26px;padding:4px 24px 4px 8px;font-size:var(--devui-font-size, 12px)}.devui-search .devui-input-sm.devui-clear-exit:not(.devui-icon-left){padding-right:56px}.devui-search .devui-input-lg{height:46px;padding:12px 36px 12px 8px;font-size:var(--devui-font-size-lg, 14px);line-height:24px}.devui-search .devui-input-lg.devui-clear-exit:not(.devui-icon-left){padding-right:72px}.devui-search .devui-input::-ms-clear{display:none}.devui-search .devui-input:disabled{background-color:var(--devui-disabled-bg, #f3f3f3);border-color:var(--devui-disabled-line, #e6e6e6);color:var(--devui-disabled-text, #c2c2c2)}.devui-search .devui-input:disabled+.devui-search-icon svg path{fill:var(--devui-disabled-text, #c2c2c2)}.devui-search .icon{cursor:pointer}.devui-search .devui-search-icon{position:absolute;width:auto;pointer-events:all;cursor:pointer;height:100%;line-height:28px;padding:0 12px;top:0;right:0;z-index:2;text-align:center;display:flex;align-items:center;justify-content:center}.devui-search .devui-search-icon.devui-icon-left{left:8px;right:auto;padding-left:0}.devui-search .devui-search-icon>svg{height:16px;width:16px}.devui-search .devui-search-icon-sm{height:26px;line-height:26px;padding:0 12px}.devui-search .devui-search-icon-sm>svg{height:14px;width:14px}.devui-search .devui-search-icon-lg{height:46px;line-height:46px}.devui-search .devui-search-icon-lg>svg{height:18px;width:18px}.devui-search .devui-search-clear{position:absolute;width:auto;top:0;right:36px;padding:0 8px;pointer-events:all;cursor:pointer;height:100%;line-height:28px;font-size:var(--devui-font-size-lg, 14px);z-index:2;display:none}.devui-search .devui-search-clear.devui-icon-left{right:0}.devui-search .devui-search-clear.devui-clear-exit{display:block}.devui-search .devui-search-clear-sm{line-height:26px;padding:0 8px}.devui-search .devui-search-clear-sm>svg{height:14px;width:14px}.devui-search .devui-search-clear-lg{right:46px;line-height:46px;padding:0 8px}.devui-search .devui-search-clear-lg>svg{height:18px;width:18px}.devui-search .devui-search-line{position:absolute;right:36px;height:46%;top:27%;width:1px;border-left-width:1px;border-left-style:solid;border-color:var(--devui-line, #dbdbdb);line-height:28px;display:none}.devui-search .devui-search-line.devui-clear-exit{display:block}.devui-search .devui-search-line-sm{line-height:26px}.devui-search .devui-search-line-lg{line-height:46px;right:42px}\n"] }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i1.I18nService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i2.DevConfigService }], propDecorators: { size: [{
type: Input
}], placeholder: [{
type: Input
}], maxLength: [{
type: Input
}], isKeyupSearch: [{
type: Input
}], delay: [{
type: Input
}], disabled: [{
type: Input
}], cssClass: [{
type: Input
}], iconPosition: [{
type: Input
}], noBorder: [{
type: Input
}], autoFocus: [{
type: Input
}], styleType: [{
type: Input
}], showGlowStyle: [{
type: Input
}], hasGlowStyle: [{
type: HostBinding,
args: ['class.devui-glow-style']
}], searchFn: [{
type: Output
}], filterInputElement: [{
type: ViewChild,
args: ['filterInput', { static: true }]
}], lineElement: [{
type: ViewChild,
args: ['line']
}], clearIconElement: [{
type: ViewChild,
args: ['clearIcon']
}] } });
class SearchModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: SearchModule, declarations: [SearchComponent], imports: [CommonModule,
FormsModule,
DCommonModule], exports: [SearchComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchModule, imports: [CommonModule,
FormsModule,
DCommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
DCommonModule
],
exports: [
SearchComponent,
],
declarations: [
SearchComponent,
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { SearchComponent, SearchModule };
//# sourceMappingURL=ng-devui-search.mjs.map