ng-devui
Version:
DevUI components based on Angular
313 lines (308 loc) • 37.4 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import * as i0 from '@angular/core';
import { EventEmitter, forwardRef, Component, Input, HostBinding, Output, ViewChild, NgModule } from '@angular/core';
import * as i4 from '@angular/forms';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import * as i3 from 'ng-devui/auto-complete';
import { AutoCompleteDirective, AutoCompleteModule } from 'ng-devui/auto-complete';
import * as i1 from 'ng-devui/utils';
import { addClassToOrigin, removeClassFromOrigin, WithConfig } from 'ng-devui/utils';
import { of } from 'rxjs';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from 'ng-devui/tags';
import { TagsModule } from 'ng-devui/tags';
class MultiAutoCompleteComponent {
static { this.ID_SEED = 0; }
get hasGlowStyle() {
return this.showGlowStyle;
}
get placeholderView() {
if (this.multiItems.length > 0) {
return '';
}
else {
return this.placeholder;
}
}
constructor(changeDetectorRef, devConfigService) {
this.changeDetectorRef = changeDetectorRef;
this.devConfigService = devConfigService;
this.appendToBody = false;
this.appendToBodyDirections = ['rightDown', 'leftDown', 'rightUp', 'leftUp'];
/**
* @deprecated
* overview: border none multiline single
*/
this.overview = 'border';
this.placeholder = ''; // placeholder
this.disabled = false;
this.retainInputValue = false;
this.showAnimation = true;
this.showGlowStyle = true;
this.autoSubmit = new EventEmitter(); // 失焦自动提交
this.multiItems = [];
this.multipleLabelClassNameSuffix = this.overview;
this.inputEdit = false;
this.multipleLabelClassNameConfig = {
border: {
focus: 'border',
blur: 'border',
},
none: {
focus: 'border',
blur: 'none',
},
multiline: {
focus: 'multiline',
blur: 'multiline',
},
single: {
focus: 'single-focus',
blur: 'single',
},
};
this.clonePlaceholder = this.placeholder;
this.placement = 'bottom-left';
this.onChange = (_) => null;
this.onTouched = () => null;
this.formatter = (item) => (item ? item.label || item.toString() : '');
this.valueParser = (item) => item;
this.id = MultiAutoCompleteComponent.ID_SEED++;
}
writeValue(obj) {
const value = obj || [];
this.multiItems = value;
if (this.overview === 'single') {
this.inputEdit = this.multiItems.length === 0;
}
this.setSinglePlaceholder();
this.changeDetectorRef.markForCheck();
}
ngOnInit() {
if (this.source && !this.searchFn) {
this.searchFn = (term) => {
return of(this.source.filter((lang) => this.multiItems.indexOf(lang) === -1 && lang.toLowerCase().indexOf(term.toLowerCase()) !== -1));
};
}
}
ngOnChanges(changes) {
const { overview, placeholder } = changes;
if (overview) {
this.multipleLabelClassNameSuffix = overview.currentValue;
}
if (placeholder) {
this.clonePlaceholder = placeholder.currentValue;
}
}
registerOnChange(fn) {
this.onChange = fn;
}
registerOnTouched(fn) {
this.onTouched = fn;
}
singleClick($event) {
this.inputEdit = true;
}
onMultipleSearch(item) {
if (this.overview !== 'single' && item) {
let inArray = false;
for (let i = 0; i < this.multiItems.length; i++) {
if (item.label) {
if (item.label === this.multiItems[i].label) {
inArray = true;
break;
}
}
else {
if (item === this.multiItems[i]) {
inArray = true;
break;
}
}
}
if (!inArray) {
this.multiItems.push(item);
}
else {
this.multiItems = this.multiItems.filter((data) => {
if (data.label) {
return data.label !== item.label;
}
else {
return data !== item;
}
});
}
}
else if (this.overview === 'single' && item) {
this.multiItems = [];
this.multiItems.push(item);
this.inputEdit = false;
this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview].blur;
}
this.setSinglePlaceholder();
this.autoSubmit.emit(this.multiItems);
this.onChange(this.multiItems);
this.clearInputValue();
}
removeLabel(label) {
if (this.multiItems.indexOf(label) !== -1) {
this.multiItems = this.multiItems.filter((item) => item !== label);
}
this.setSinglePlaceholder();
this.autoSubmit.emit(this.multiItems);
this.onChange(this.multiItems);
}
getInputFocusFlag($event) {
this.inputEdit = this.multiItems.length === 0 || $event.focus;
this.popupRef = $event.popupRef;
this.setSinglePlaceholder();
if ($event.focus) {
this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview].focus;
setTimeout(() => {
// 这里需要等待一会才能聚焦
this.multiAutoCompleteInputElement.nativeElement.focus();
}, 0);
}
else {
this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview].blur;
this.clearInputValue();
this.autoSubmit.emit(this.multiItems);
}
}
clearInputValue() {
if (!this.retainInputValue) {
this.inputValue = null;
this.multiAutoCompleteInputElement.nativeElement.value = '';
}
}
onBackspaceKeyUp($event, inputValue) {
if (this.multiItems.length > 0 && !inputValue) {
this.multiItems.pop();
}
this.setSinglePlaceholder();
this.autoSubmit.emit(this.multiItems);
this.onChange(this.multiItems);
}
setSinglePlaceholder() {
if (this.overview === 'single') {
if (this.multiItems && this.multiItems.length > 0) {
this.placeholder = '';
}
else {
this.placeholder = this.clonePlaceholder;
}
}
}
changePopUp(open) {
if (open) {
addClassToOrigin(this.multiAutoCompleteWrapperElement);
}
else {
removeClassFromOrigin(this.multiAutoCompleteWrapperElement);
}
}
inputBlur() {
this.onTouched();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DevConfigService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiAutoCompleteComponent, selector: "d-multi-auto-complete", inputs: { appendToBody: "appendToBody", appendToBodyDirections: "appendToBodyDirections", cssClass: "cssClass", overview: "overview", tipsText: "tipsText", placeholder: "placeholder", disabled: "disabled", retainInputValue: "retainInputValue", source: "source", latestSource: "latestSource", disabledKey: "disabledKey", width: "width", itemTemplate: "itemTemplate", noResultItemTemplate: "noResultItemTemplate", delay: "delay", searchFn: "searchFn", formatter: "formatter", valueParser: "valueParser", showAnimation: "showAnimation", showGlowStyle: "showGlowStyle" }, outputs: { autoSubmit: "autoSubmit" }, host: { properties: { "class.devui-glow-style": "this.hasGlowStyle" } }, providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiAutoCompleteComponent),
multi: true,
},
], viewQueries: [{ propertyName: "multiAutoCompleteInputElement", first: true, predicate: ["multiAutoCompleteInput"], descendants: true }, { propertyName: "multiAutoCompleteWrapperElement", first: true, predicate: ["multiAutoCompleteWrapper"], descendants: true }, { propertyName: "autoCompleteDirective", first: true, predicate: AutoCompleteDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"form-group multi-auto-complete\">\n <label\n for=\"multiple-label-auto-complete-{{ id }}\"\n class=\"multiple-label-auto-complete multiple-label-auto-complete-{{ multipleLabelClassNameSuffix }}\"\n [ngClass]=\"{ 'multiple-label-auto-complete-disabled': disabled }\"\n >\n <ul *ngIf=\"overview !== 'single'\" class=\"devui-dropdown-origin\" #multiAutoCompleteWrapper>\n <li *ngFor=\"let item of multiItems\">\n <ng-template\n [ngTemplateOutlet]=\"disabled || (overview === 'none' && !inputEdit) ? transparentTemplate : defaultTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n formatter: formatter,\n parent: multiItems\n }\"\n ></ng-template>\n </li>\n <li *ngIf=\"!disabled\">\n <input\n #multiAutoCompleteInput\n id=\"multiple-label-auto-complete-{{ id }}\"\n type=\"text\"\n name=\"autoCompleteControl\"\n class=\"auto-complete-control\"\n [placeholder]=\"placeholderView\"\n [tipsText]=\"tipsText\"\n [latestSource]=\"latestSource\"\n (selectValue)=\"onMultipleSearch($event)\"\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\n [formatter]=\"formatter\"\n [valueParser]=\"valueParser\"\n [itemTemplate]=\"itemTemplate\"\n [noResultItemTemplate]=\"noResultItemTemplate\"\n [cssClass]=\"cssClass\"\n [overview]=\"overview\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputValue\"\n [delay]=\"delay\"\n [dAutoCompleteWidth]=\"width\"\n dAutoComplete\n [retainInputValue]=\"retainInputValue\"\n [showAnimation]=\"showAnimation\"\n [searchFn]=\"searchFn\"\n [appendToBody]=\"appendToBody\"\n [appendToBodyDirections]=\"appendToBodyDirections\"\n [cdkOverlayOffsetY]=\"3\"\n [disabledKey]=\"disabledKey\"\n (blur)=\"inputBlur()\"\n (changeDropDownStatus)=\"changePopUp($event)\"\n />\n </li>\n </ul>\n\n <!--\u5355\u9009\u6A21\u677F-->\n <ul *ngIf=\"overview === 'single'\" title=\"{{ formatter(multiItems[0]) }}\" (click)=\"singleClick($event)\">\n <li *ngFor=\"let item of multiItems\">\n <ng-template\n [ngTemplateOutlet]=\"transparentTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n formatter: formatter,\n parent: multiItems\n }\"\n ></ng-template>\n </li>\n <li *ngIf=\"!disabled && inputEdit\">\n <input\n #multiAutoCompleteInput\n id=\"multiple-label-auto-complete-{{ id }}\"\n type=\"text\"\n name=\"autoCompleteControl\"\n class=\"auto-complete-control\"\n [placeholder]=\"placeholder\"\n [tipsText]=\"tipsText\"\n [latestSource]=\"latestSource\"\n (selectValue)=\"onMultipleSearch($event)\"\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\n [formatter]=\"formatter\"\n [valueParser]=\"valueParser\"\n [itemTemplate]=\"itemTemplate\"\n [noResultItemTemplate]=\"noResultItemTemplate\"\n [cssClass]=\"cssClass\"\n [overview]=\"overview\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputValue\"\n [delay]=\"delay\"\n [dAutoCompleteWidth]=\"width\"\n dAutoComplete\n [searchFn]=\"searchFn\"\n (blur)=\"inputBlur()\"\n (changeDropDownStatus)=\"changePopUp($event)\"\n />\n </li>\n </ul>\n </label>\n</div>\n\n<!--\u9EC4\u5E95\u6A21\u677F-->\n<ng-template #defaultTemplate let-item=\"item\" let-formatter=\"formatter\">\n <d-tag [deletable]=\"true\" [tag]=\"formatter(item)\" (tagDelete)=\"removeLabel(item)\"></d-tag>\n</ng-template>\n\n<!--\u65E0\u5E95\u8272\u6A21\u677F-->\n<ng-template #transparentTemplate let-item=\"item\" let-formatter=\"formatter\" let-parent=\"parent\">\n <d-tag [tag]=\"formatter(item)\"></d-tag>\n</ng-template>\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)}.form-group label{cursor:pointer;font-size:var(--devui-font-size, 12px);margin-bottom:0;width:100%}.multiple-label-auto-complete{padding:0;font-weight:400}.multiple-label-auto-complete ul{display:flex;flex-wrap:wrap;align-items:center;list-style:none;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);padding:4px 4px 0}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul,.multiple-label-auto-complete-border ul,.multiple-label-auto-complete-multiline ul{border:1px solid var(--devui-line, #dbdbdb)}.multiple-label-auto-complete-single ul:hover,.multiple-label-auto-complete-single-focus ul:hover,.multiple-label-auto-complete-border ul:hover,.multiple-label-auto-complete-multiline ul:hover{border-color:var(--devui-form-control-line-hover, #808080)}.multiple-label-auto-complete-single ul:active,.multiple-label-auto-complete-single-focus ul:active,.multiple-label-auto-complete-border ul:active,.multiple-label-auto-complete-multiline ul:active{border-color:var(--devui-form-control-line-active, #0a59f7)}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul{overflow:hidden}.multiple-label-auto-complete-multiline ul{height:60px;overflow:auto}.multiple-label-auto-complete-none ul{border:1px solid transparent}.multiple-label-auto-complete-none ul:hover,.multiple-label-auto-complete-none ul:active{border-color:transparent}.multiple-label-auto-complete:not(.multiple-label-auto-complete-disabled) ul li:last-child{border-color:transparent}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul{cursor:not-allowed}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul:hover{border-color:var(--devui-disabled-line, #e6e6e6);background-color:var(--devui-disabled-bg, #f3f3f3)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li{border-color:var(--devui-disabled-line, #e6e6e6)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text:hover{background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2)}.multiple-label-auto-complete ul::-ms-expand{border:0;background-color:transparent}::-ms-clear,::-ms-reveal{display:none}.multiple-label-auto-complete ul li{position:relative;display:inline-block;line-height:1;margin:0 4px 4px 0}.multiple-label-auto-complete-none ul li{margin-right:0}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li,.multiple-label-auto-complete-multiline ul li{position:static}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li{float:left;width:100%}.multiple-label-auto-complete-single-focus ul li:first-child{max-width:calc(100% - 5px);margin-right:0;width:auto}.multiple-label-auto-complete-single-focus ul li:last-child{width:5px;margin-right:0;margin-left:0}.multiple-label-auto-complete ul li .label-close,.multiple-label-auto-complete ul li .label-text{font-size:var(--devui-font-size, 12px);line-height:20px;padding:0 8px;color:var(--devui-text-weak, #333333);font-weight:400;background-color:var(--devui-label-bg, #f0f0f0)}.multiple-label-auto-complete ul li .label-close{padding-left:4px;display:flex;align-items:center}.multiple-label-auto-complete ul li .label-close svg rect{fill:var(--devui-line, #dbdbdb)}.multiple-label-auto-complete ul li .label-close svg path{fill:var(--devui-light-text, #ffffff)}.multiple-label-auto-complete ul li .label-close:hover svg rect{fill:var(--devui-icon-fill-active-hover, #000000)}.multiple-label-auto-complete ul li .label-text:hover{color:var(--devui-icon-fill-active-hover, #000000)}.multiple-label-auto-complete ul li .label-text{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.multiple-label-auto-complete ul li .label-close{cursor:pointer;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.multiple-label-auto-complete-single ul li .label-text,.multiple-label-auto-complete-single-focus ul li .label-text,.multiple-label-auto-complete-none ul li .label-text{background-color:transparent}.multiple-label-auto-complete-single ul li .label-text{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;height:20px;line-height:20px}.multiple-label-auto-complete-single-focus ul li .label-text{width:100%;text-align:left;display:block;height:20px;line-height:20px}.multiple-label-auto-complete .auto-complete-control{min-width:160px;height:20px;border:none;outline:none;background:var(--devui-base-bg, #ffffff);color:var(--devui-text, #191919)}.multiple-label-auto-complete .auto-complete-control:focus,.multiple-label-auto-complete .auto-complete-control:hover{border:none;outline:none}.multiple-label-auto-complete-none .auto-complete-control{width:0}:host label{color:inherit}:host ::ng-deep .multiple-label-auto-complete-disabled li{border:solid 1px var(--devui-disabled-line, #e6e6e6);border-radius:var(--devui-border-radius, 2px)}:host ::ng-deep .multiple-label-auto-complete-disabled li d-tag .devui-tag-item{background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}:host ::ng-deep .multiple-label-auto-complete-border ul li .devui-dropdown-menu{margin-top:8px}:host ::ng-deep .multiple-label-auto-complete-multiline ul li .devui-dropdown-menu{margin-top:0;width:170px}:host-context(d-data-table) .multiple-label-auto-complete-single ul,:host-context(d-data-table) .multiple-label-auto-complete-single ul li .auto-complete-control{border-color:transparent;background-color:transparent}:host-context(d-data-table) .multiple-label-auto-complete-single ul{padding-left:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.AutoCompleteDirective, selector: "[dAutoComplete]", inputs: ["disabled", "cssClass", "delay", "showGlowStyle", "minLength", "itemTemplate", "noResultItemTemplate", "searchingTemplate", "isSearching", "appendToBody", "appendToBodyDirections", "appendToBodyScrollStrategy", "cdkOverlayOffsetY", "dAutoCompleteWidth", "formatter", "sceneType", "tipsText", "overview", "latestSource", "source", "valueParser", "searchFn", "dropdown", "maxHeight", "disabledKey", "showAnimation", "enableLazyLoad", "retainInputValue", "allowEmptyValueSearch", "customViewTemplate", "customViewDirection"], outputs: ["loadMore", "selectValue", "transInputFocusEmit", "changeDropDownStatus", "toggleChange", "hoverItem"], exportAs: ["autoComplete"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.TagComponent, selector: "d-tag", inputs: ["tag", "labelStyle", "customColor", "deletable", "titleContent", "mode", "size", "checked", "maxWidth", "customViewTemplate", "beforeDelete"], outputs: ["tagDelete", "checkedChange"], exportAs: ["Tag"] }] }); }
}
__decorate([
WithConfig(),
__metadata("design:type", Object)
], MultiAutoCompleteComponent.prototype, "showAnimation", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Object)
], MultiAutoCompleteComponent.prototype, "showGlowStyle", void 0);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteComponent, decorators: [{
type: Component,
args: [{ selector: 'd-multi-auto-complete', providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => MultiAutoCompleteComponent),
multi: true,
},
], preserveWhitespaces: false, template: "<div class=\"form-group multi-auto-complete\">\n <label\n for=\"multiple-label-auto-complete-{{ id }}\"\n class=\"multiple-label-auto-complete multiple-label-auto-complete-{{ multipleLabelClassNameSuffix }}\"\n [ngClass]=\"{ 'multiple-label-auto-complete-disabled': disabled }\"\n >\n <ul *ngIf=\"overview !== 'single'\" class=\"devui-dropdown-origin\" #multiAutoCompleteWrapper>\n <li *ngFor=\"let item of multiItems\">\n <ng-template\n [ngTemplateOutlet]=\"disabled || (overview === 'none' && !inputEdit) ? transparentTemplate : defaultTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n formatter: formatter,\n parent: multiItems\n }\"\n ></ng-template>\n </li>\n <li *ngIf=\"!disabled\">\n <input\n #multiAutoCompleteInput\n id=\"multiple-label-auto-complete-{{ id }}\"\n type=\"text\"\n name=\"autoCompleteControl\"\n class=\"auto-complete-control\"\n [placeholder]=\"placeholderView\"\n [tipsText]=\"tipsText\"\n [latestSource]=\"latestSource\"\n (selectValue)=\"onMultipleSearch($event)\"\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\n [formatter]=\"formatter\"\n [valueParser]=\"valueParser\"\n [itemTemplate]=\"itemTemplate\"\n [noResultItemTemplate]=\"noResultItemTemplate\"\n [cssClass]=\"cssClass\"\n [overview]=\"overview\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputValue\"\n [delay]=\"delay\"\n [dAutoCompleteWidth]=\"width\"\n dAutoComplete\n [retainInputValue]=\"retainInputValue\"\n [showAnimation]=\"showAnimation\"\n [searchFn]=\"searchFn\"\n [appendToBody]=\"appendToBody\"\n [appendToBodyDirections]=\"appendToBodyDirections\"\n [cdkOverlayOffsetY]=\"3\"\n [disabledKey]=\"disabledKey\"\n (blur)=\"inputBlur()\"\n (changeDropDownStatus)=\"changePopUp($event)\"\n />\n </li>\n </ul>\n\n <!--\u5355\u9009\u6A21\u677F-->\n <ul *ngIf=\"overview === 'single'\" title=\"{{ formatter(multiItems[0]) }}\" (click)=\"singleClick($event)\">\n <li *ngFor=\"let item of multiItems\">\n <ng-template\n [ngTemplateOutlet]=\"transparentTemplate\"\n [ngTemplateOutletContext]=\"{\n item: item,\n formatter: formatter,\n parent: multiItems\n }\"\n ></ng-template>\n </li>\n <li *ngIf=\"!disabled && inputEdit\">\n <input\n #multiAutoCompleteInput\n id=\"multiple-label-auto-complete-{{ id }}\"\n type=\"text\"\n name=\"autoCompleteControl\"\n class=\"auto-complete-control\"\n [placeholder]=\"placeholder\"\n [tipsText]=\"tipsText\"\n [latestSource]=\"latestSource\"\n (selectValue)=\"onMultipleSearch($event)\"\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\n [formatter]=\"formatter\"\n [valueParser]=\"valueParser\"\n [itemTemplate]=\"itemTemplate\"\n [noResultItemTemplate]=\"noResultItemTemplate\"\n [cssClass]=\"cssClass\"\n [overview]=\"overview\"\n [disabled]=\"disabled\"\n [(ngModel)]=\"inputValue\"\n [delay]=\"delay\"\n [dAutoCompleteWidth]=\"width\"\n dAutoComplete\n [searchFn]=\"searchFn\"\n (blur)=\"inputBlur()\"\n (changeDropDownStatus)=\"changePopUp($event)\"\n />\n </li>\n </ul>\n </label>\n</div>\n\n<!--\u9EC4\u5E95\u6A21\u677F-->\n<ng-template #defaultTemplate let-item=\"item\" let-formatter=\"formatter\">\n <d-tag [deletable]=\"true\" [tag]=\"formatter(item)\" (tagDelete)=\"removeLabel(item)\"></d-tag>\n</ng-template>\n\n<!--\u65E0\u5E95\u8272\u6A21\u677F-->\n<ng-template #transparentTemplate let-item=\"item\" let-formatter=\"formatter\" let-parent=\"parent\">\n <d-tag [tag]=\"formatter(item)\"></d-tag>\n</ng-template>\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)}.form-group label{cursor:pointer;font-size:var(--devui-font-size, 12px);margin-bottom:0;width:100%}.multiple-label-auto-complete{padding:0;font-weight:400}.multiple-label-auto-complete ul{display:flex;flex-wrap:wrap;align-items:center;list-style:none;background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);padding:4px 4px 0}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul,.multiple-label-auto-complete-border ul,.multiple-label-auto-complete-multiline ul{border:1px solid var(--devui-line, #dbdbdb)}.multiple-label-auto-complete-single ul:hover,.multiple-label-auto-complete-single-focus ul:hover,.multiple-label-auto-complete-border ul:hover,.multiple-label-auto-complete-multiline ul:hover{border-color:var(--devui-form-control-line-hover, #808080)}.multiple-label-auto-complete-single ul:active,.multiple-label-auto-complete-single-focus ul:active,.multiple-label-auto-complete-border ul:active,.multiple-label-auto-complete-multiline ul:active{border-color:var(--devui-form-control-line-active, #0a59f7)}.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul{overflow:hidden}.multiple-label-auto-complete-multiline ul{height:60px;overflow:auto}.multiple-label-auto-complete-none ul{border:1px solid transparent}.multiple-label-auto-complete-none ul:hover,.multiple-label-auto-complete-none ul:active{border-color:transparent}.multiple-label-auto-complete:not(.multiple-label-auto-complete-disabled) ul li:last-child{border-color:transparent}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul{cursor:not-allowed}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul:hover{border-color:var(--devui-disabled-line, #e6e6e6);background-color:var(--devui-disabled-bg, #f3f3f3)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li{border-color:var(--devui-disabled-line, #e6e6e6)}.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text,.multiple-label-auto-complete.multiple-label-auto-complete-disabled ul li .label-text:hover{background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2)}.multiple-label-auto-complete ul::-ms-expand{border:0;background-color:transparent}::-ms-clear,::-ms-reveal{display:none}.multiple-label-auto-complete ul li{position:relative;display:inline-block;line-height:1;margin:0 4px 4px 0}.multiple-label-auto-complete-none ul li{margin-right:0}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li,.multiple-label-auto-complete-multiline ul li{position:static}.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus ul li{float:left;width:100%}.multiple-label-auto-complete-single-focus ul li:first-child{max-width:calc(100% - 5px);margin-right:0;width:auto}.multiple-label-auto-complete-single-focus ul li:last-child{width:5px;margin-right:0;margin-left:0}.multiple-label-auto-complete ul li .label-close,.multiple-label-auto-complete ul li .label-text{font-size:var(--devui-font-size, 12px);line-height:20px;padding:0 8px;color:var(--devui-text-weak, #333333);font-weight:400;background-color:var(--devui-label-bg, #f0f0f0)}.multiple-label-auto-complete ul li .label-close{padding-left:4px;display:flex;align-items:center}.multiple-label-auto-complete ul li .label-close svg rect{fill:var(--devui-line, #dbdbdb)}.multiple-label-auto-complete ul li .label-close svg path{fill:var(--devui-light-text, #ffffff)}.multiple-label-auto-complete ul li .label-close:hover svg rect{fill:var(--devui-icon-fill-active-hover, #000000)}.multiple-label-auto-complete ul li .label-text:hover{color:var(--devui-icon-fill-active-hover, #000000)}.multiple-label-auto-complete ul li .label-text{border-radius:var(--devui-border-radius, 2px) 0 0 var(--devui-border-radius, 2px)}.multiple-label-auto-complete ul li .label-close{cursor:pointer;border-radius:0 var(--devui-border-radius, 2px) var(--devui-border-radius, 2px) 0}.multiple-label-auto-complete-single ul li .label-text,.multiple-label-auto-complete-single-focus ul li .label-text,.multiple-label-auto-complete-none ul li .label-text{background-color:transparent}.multiple-label-auto-complete-single ul li .label-text{width:100%;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;height:20px;line-height:20px}.multiple-label-auto-complete-single-focus ul li .label-text{width:100%;text-align:left;display:block;height:20px;line-height:20px}.multiple-label-auto-complete .auto-complete-control{min-width:160px;height:20px;border:none;outline:none;background:var(--devui-base-bg, #ffffff);color:var(--devui-text, #191919)}.multiple-label-auto-complete .auto-complete-control:focus,.multiple-label-auto-complete .auto-complete-control:hover{border:none;outline:none}.multiple-label-auto-complete-none .auto-complete-control{width:0}:host label{color:inherit}:host ::ng-deep .multiple-label-auto-complete-disabled li{border:solid 1px var(--devui-disabled-line, #e6e6e6);border-radius:var(--devui-border-radius, 2px)}:host ::ng-deep .multiple-label-auto-complete-disabled li d-tag .devui-tag-item{background-color:var(--devui-disabled-bg, #f3f3f3);color:var(--devui-disabled-text, #c2c2c2);cursor:not-allowed}:host ::ng-deep .multiple-label-auto-complete-border ul li .devui-dropdown-menu{margin-top:8px}:host ::ng-deep .multiple-label-auto-complete-multiline ul li .devui-dropdown-menu{margin-top:0;width:170px}:host-context(d-data-table) .multiple-label-auto-complete-single ul,:host-context(d-data-table) .multiple-label-auto-complete-single ul li .auto-complete-control{border-color:transparent;background-color:transparent}:host-context(d-data-table) .multiple-label-auto-complete-single ul{padding-left:0}\n"] }]
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1.DevConfigService }], propDecorators: { appendToBody: [{
type: Input
}], appendToBodyDirections: [{
type: Input
}], cssClass: [{
type: Input
}], overview: [{
type: Input
}], tipsText: [{
type: Input
}], placeholder: [{
type: Input
}], disabled: [{
type: Input
}], retainInputValue: [{
type: Input
}], source: [{
type: Input
}], latestSource: [{
type: Input
}], disabledKey: [{
type: Input
}], width: [{
type: Input
}], itemTemplate: [{
type: Input
}], noResultItemTemplate: [{
type: Input
}], delay: [{
type: Input
}], searchFn: [{
type: Input
}], formatter: [{
type: Input
}], valueParser: [{
type: Input
}], showAnimation: [{
type: Input
}], showGlowStyle: [{
type: Input
}], hasGlowStyle: [{
type: HostBinding,
args: ['class.devui-glow-style']
}], autoSubmit: [{
type: Output
}], multiAutoCompleteInputElement: [{
type: ViewChild,
args: ['multiAutoCompleteInput']
}], multiAutoCompleteWrapperElement: [{
type: ViewChild,
args: ['multiAutoCompleteWrapper']
}], autoCompleteDirective: [{
type: ViewChild,
args: [AutoCompleteDirective]
}] } });
class MultiAutoCompleteModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteModule, declarations: [MultiAutoCompleteComponent], imports: [CommonModule, AutoCompleteModule, FormsModule, TagsModule], exports: [MultiAutoCompleteComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteModule, imports: [CommonModule, AutoCompleteModule, FormsModule, TagsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiAutoCompleteModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, AutoCompleteModule, FormsModule, TagsModule],
exports: [MultiAutoCompleteComponent],
declarations: [MultiAutoCompleteComponent],
providers: [],
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { MultiAutoCompleteComponent, MultiAutoCompleteModule };
//# sourceMappingURL=ng-devui-multi-auto-complete.mjs.map