@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
479 lines (473 loc) • 23.6 kB
JavaScript
import { EventEmitter, Component, forwardRef, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { of } from 'rxjs';
import { AutoCompleteDirective, AutoCompleteModule } from '@duoduo-oba/ng-devui/auto-complete';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: multi-auto-complete.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MultiAutoCompleteComponent = /** @class */ (function () {
function MultiAutoCompleteComponent(changeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
/*
overview: border none multiline single
*/
this.overview = 'border';
// 提示文字
this.placeholder = '请输入关键字'; // placeholder
// placeholder
this.disabled = false;
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 = (/**
* @param {?} _
* @return {?}
*/
function (_) { return null; });
this.onTouched = (/**
* @return {?}
*/
function () { return null; });
this.formatter = (/**
* @param {?} item
* @return {?}
*/
function (item) { return item ? (item.label || item.toString()) : ''; });
this.valueParser = (/**
* @param {?} item
* @return {?}
*/
function (item) { return item; });
this.id = MultiAutoCompleteComponent.ID_SEED++;
}
Object.defineProperty(MultiAutoCompleteComponent.prototype, "placeholderView", {
get: /**
* @return {?}
*/
function () {
if (this.multiItems.length > 0) {
return '';
}
else {
return this.placeholder;
}
},
enumerable: true,
configurable: true
});
/**
* @param {?} obj
* @return {?}
*/
MultiAutoCompleteComponent.prototype.writeValue = /**
* @param {?} obj
* @return {?}
*/
function (obj) {
/** @type {?} */
var value = obj || [];
this.multiItems = value;
if (this.overview === 'single') {
this.inputEdit = this.multiItems.length === 0;
}
this.setSinglePlaceholder();
this.changeDetectorRef.markForCheck();
};
/**
* @return {?}
*/
MultiAutoCompleteComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
var _this = this;
if (this.source && !this.searchFn) {
this.searchFn = (/**
* @param {?} term
* @return {?}
*/
function (term) {
return of(_this.source
.filter((/**
* @param {?} lang
* @return {?}
*/
function (lang) { return _this.multiItems.indexOf(lang) === -1 && lang.toLowerCase().indexOf(term.toLowerCase()) !== -1; })));
});
}
};
/**
* @param {?} changes
* @return {?}
*/
MultiAutoCompleteComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (changes && changes['overview']) {
this.multipleLabelClassNameSuffix = changes['overview'].currentValue;
}
if (changes && changes['placeholder']) {
this.clonePlaceholder = changes['placeholder'].currentValue;
}
};
/**
* @param {?} fn
* @return {?}
*/
MultiAutoCompleteComponent.prototype.registerOnChange = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onChange = fn;
};
/**
* @param {?} fn
* @return {?}
*/
MultiAutoCompleteComponent.prototype.registerOnTouched = /**
* @param {?} fn
* @return {?}
*/
function (fn) {
this.onTouched = fn;
};
/**
* @param {?} $event
* @return {?}
*/
MultiAutoCompleteComponent.prototype.singleClick = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
this.inputEdit = true;
};
/**
* @param {?=} item
* @return {?}
*/
MultiAutoCompleteComponent.prototype.onMultipleSearch = /**
* @param {?=} item
* @return {?}
*/
function (item) {
if (this.overview !== 'single' && item) {
/** @type {?} */
var inArray = false;
for (var 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((/**
* @param {?} data
* @return {?}
*/
function (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.inputValue = null;
this.multiAutoCompleteInputElement.nativeElement.value = '';
};
/**
* @param {?} label
* @return {?}
*/
MultiAutoCompleteComponent.prototype.removeLabel = /**
* @param {?} label
* @return {?}
*/
function (label) {
if (this.multiItems.indexOf(label) !== -1) {
this.multiItems = this.multiItems.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return item !== label; }));
}
this.setSinglePlaceholder();
this.autoSubmit.emit(this.multiItems);
this.onChange(this.multiItems);
};
/**
* @param {?} $event
* @return {?}
*/
MultiAutoCompleteComponent.prototype.getInputFocusFlag = /**
* @param {?} $event
* @return {?}
*/
function ($event) {
var _this = this;
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((/**
* @return {?}
*/
function () {
_this.multiAutoCompleteInputElement.nativeElement.focus();
}), 0);
}
else {
this.multipleLabelClassNameSuffix = this.multipleLabelClassNameConfig[this.overview]['blur'];
this.inputValue = null;
this.multiAutoCompleteInputElement.nativeElement.value = '';
this.autoSubmit.emit(this.multiItems);
}
};
/**
* @param {?} $event
* @param {?} inputValue
* @return {?}
*/
MultiAutoCompleteComponent.prototype.onBackspaceKeyUp = /**
* @param {?} $event
* @param {?} inputValue
* @return {?}
*/
function ($event, inputValue) {
if (this.multiItems.length > 0 && !inputValue) {
this.multiItems.pop();
}
this.setSinglePlaceholder();
this.autoSubmit.emit(this.multiItems);
this.onChange(this.multiItems);
};
/**
* @return {?}
*/
MultiAutoCompleteComponent.prototype.setSinglePlaceholder = /**
* @return {?}
*/
function () {
if (this.overview === 'single') {
if (this.multiItems && this.multiItems.length > 0) {
this.placeholder = '';
}
else {
this.placeholder = this.clonePlaceholder;
}
}
};
MultiAutoCompleteComponent.ID_SEED = 0;
MultiAutoCompleteComponent.decorators = [
{ type: Component, args: [{
selector: 'd-multi-auto-complete',
template: "<div class=\"form-group multi-auto-complete\">\r\n <label\r\n for=\"multiple-label-auto-complete-{{ id }}\"\r\n class=\"multiple-label-auto-complete multiple-label-auto-complete-{{ multipleLabelClassNameSuffix }}\"\r\n [ngClass]=\"{ 'multiple-label-auto-complete-disabled': disabled }\"\r\n >\r\n <ul *ngIf=\"overview !== 'single'\">\r\n <li *ngFor=\"let item of multiItems\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"disabled || (overview === 'none' && !inputEdit) ? transparentTemplate : defaultTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: item,\r\n formatter: formatter,\r\n parent: multiItems\r\n }\"\r\n ></ng-template>\r\n </li>\r\n <li *ngIf=\"!disabled\">\r\n <input\r\n #multiAutoCompleteInput\r\n id=\"multiple-label-auto-complete-{{ id }}\"\r\n type=\"text\"\r\n name=\"autoCompleteControl\"\r\n class=\"auto-complete-control\"\r\n [placeholder]=\"placeholderView\"\r\n [tipsText]=\"tipsText\"\r\n [latestSource]=\"latestSource\"\r\n (selectValue)=\"onMultipleSearch($event)\"\r\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n [formatter]=\"formatter\"\r\n [valueParser]=\"valueParser\"\r\n [itemTemplate]=\"itemTemplate\"\r\n [noResultItemTemplate]=\"noResultItemTemplate\"\r\n [cssClass]=\"cssClass\"\r\n [overview]=\"overview\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"inputValue\"\r\n [delay]=\"delay\"\r\n dAutoComplete\r\n [searchFn]=\"searchFn\"\r\n />\r\n </li>\r\n </ul>\r\n\r\n <!--\u5355\u9009\u6A21\u677F-->\r\n <ul *ngIf=\"overview === 'single'\" title=\"{{ formatter(multiItems[0]) }}\" (click)=\"singleClick($event)\">\r\n <li *ngFor=\"let item of multiItems\">\r\n <ng-template\r\n [ngTemplateOutlet]=\"transparentTemplate\"\r\n [ngTemplateOutletContext]=\"{\r\n item: item,\r\n formatter: formatter,\r\n parent: multiItems\r\n }\"\r\n ></ng-template>\r\n </li>\r\n <li *ngIf=\"!disabled && inputEdit\">\r\n <input\r\n #multiAutoCompleteInput\r\n id=\"multiple-label-auto-complete-{{ id }}\"\r\n type=\"text\"\r\n name=\"autoCompleteControl\"\r\n class=\"auto-complete-control\"\r\n [placeholder]=\"placeholder\"\r\n [tipsText]=\"tipsText\"\r\n [latestSource]=\"latestSource\"\r\n (selectValue)=\"onMultipleSearch($event)\"\r\n (transInputFocusEmit)=\"getInputFocusFlag($event)\"\r\n (keydown.backspace)=\"onBackspaceKeyUp($event, inputValue)\"\r\n [formatter]=\"formatter\"\r\n [valueParser]=\"valueParser\"\r\n [itemTemplate]=\"itemTemplate\"\r\n [noResultItemTemplate]=\"noResultItemTemplate\"\r\n [cssClass]=\"cssClass\"\r\n [overview]=\"overview\"\r\n [disabled]=\"disabled\"\r\n [(ngModel)]=\"inputValue\"\r\n [delay]=\"delay\"\r\n dAutoComplete\r\n [searchFn]=\"searchFn\"\r\n />\r\n </li>\r\n </ul>\r\n </label>\r\n</div>\r\n\r\n<!--\u9EC4\u5E95\u6A21\u677F-->\r\n<ng-template #defaultTemplate let-item=\"item\" let-formatter=\"formatter\">\r\n <span class=\"label-item\">\r\n <span class=\"label label-text\">{{ formatter(item) }}</span\r\n ><span class=\"label label-close\" (click)=\"removeLabel(item)\">×</span></span\r\n >\r\n</ng-template>\r\n\r\n<!--\u65E0\u5E95\u8272\u6A21\u677F-->\r\n<ng-template #transparentTemplate let-item=\"item\" let-formatter=\"formatter\" let-parent=\"parent\">\r\n <span class=\"label label-text\">{{ formatter(item) }}{{ parent.length > 1 ? ';' : '' }}</span>\r\n</ng-template>\r\n",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
function () { return MultiAutoCompleteComponent; })),
multi: true
}],
styles: [".form-group label{cursor:pointer;font-size:14px;margin-bottom:0;width:100%}.multiple-label-auto-complete{padding:0;font-weight:400}.multiple-label-auto-complete ul{display:block;list-style:none;background-color:#fff;border-radius:1px;padding:5px 5px 0}.multiple-label-auto-complete-border ul,.multiple-label-auto-complete-multiline ul,.multiple-label-auto-complete-single ul,.multiple-label-auto-complete-single-focus ul{border:1px solid #adb0b8}.multiple-label-auto-complete-border ul:active,.multiple-label-auto-complete-border ul:hover,.multiple-label-auto-complete-multiline ul:active,.multiple-label-auto-complete-multiline ul:hover,.multiple-label-auto-complete-single ul:active,.multiple-label-auto-complete-single ul:hover,.multiple-label-auto-complete-single-focus ul:active,.multiple-label-auto-complete-single-focus ul:hover{border-color:#344899}.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:active,.multiple-label-auto-complete-none ul:hover{border-color:transparent}.multiple-label-auto-complete-disabled ul{cursor:default}.multiple-label-auto-complete-disabled ul:active,.multiple-label-auto-complete-disabled ul:hover{border-color:#adb0b8}.multiple-label-auto-complete ul::-ms-expand{border:0;background-color:transparent}::-ms-clear,::-ms-reveal{display:none}.multiple-label-auto-complete ul li{display:inline-block;position:relative;margin-right:5px;margin-bottom:5px}.multiple-label-auto-complete-none ul li{margin-right:0}.multiple-label-auto-complete-multiline ul li,.multiple-label-auto-complete-single ul li,.multiple-label-auto-complete-single-focus 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{border-radius:0;font-size:14px;padding:1px 2px;color:#252b3a;font-weight:400;background-color:#eef0f5}.multiple-label-auto-complete ul li .label-close{cursor:pointer}.multiple-label-auto-complete-disabled ul li .label-text,.multiple-label-auto-complete-none ul li .label-text,.multiple-label-auto-complete-single ul li .label-text,.multiple-label-auto-complete-single-focus 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%;direction:rtl;text-align:left;display:block;height:20px;line-height:20px}.multiple-label-auto-complete .auto-complete-control{height:20px;border:none;outline:0;background:#fff;color:#252b3a;position:relative}.multiple-label-auto-complete .auto-complete-control:focus,.multiple-label-auto-complete .auto-complete-control:hover{border:none;outline:0}.multiple-label-auto-complete-none .auto-complete-control{width:0}:host label{color:inherit}:host ::ng-deep .multiple-label-auto-complete-border ul li .dropdown-menu{margin-top:6px}:host ::ng-deep .multiple-label-auto-complete-multiline ul li .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}"]
}] }
];
/** @nocollapse */
MultiAutoCompleteComponent.ctorParameters = function () { return [
{ type: ChangeDetectorRef }
]; };
MultiAutoCompleteComponent.propDecorators = {
cssClass: [{ type: Input }],
overview: [{ type: Input }],
tipsText: [{ type: Input }],
placeholder: [{ type: Input }],
disabled: [{ type: Input }],
source: [{ type: Input }],
latestSource: [{ type: Input }],
isOpen: [{ type: Input }],
term: [{ type: Input }],
itemTemplate: [{ type: Input }],
noResultItemTemplate: [{ type: Input }],
dropdown: [{ type: Input }],
minLength: [{ type: Input }],
delay: [{ type: Input }],
searchFn: [{ type: Input }],
formatter: [{ type: Input }],
valueParser: [{ type: Input }],
autoSubmit: [{ type: Output }],
multiAutoCompleteInputElement: [{ type: ViewChild, args: ['multiAutoCompleteInput', { static: false },] }],
autoCompleteDirective: [{ type: ViewChild, args: [AutoCompleteDirective, { static: false },] }]
};
return MultiAutoCompleteComponent;
}());
if (false) {
/** @type {?} */
MultiAutoCompleteComponent.ID_SEED;
/** @type {?} */
MultiAutoCompleteComponent.prototype.cssClass;
/** @type {?} */
MultiAutoCompleteComponent.prototype.overview;
/** @type {?} */
MultiAutoCompleteComponent.prototype.tipsText;
/** @type {?} */
MultiAutoCompleteComponent.prototype.placeholder;
/** @type {?} */
MultiAutoCompleteComponent.prototype.disabled;
/** @type {?} */
MultiAutoCompleteComponent.prototype.source;
/** @type {?} */
MultiAutoCompleteComponent.prototype.latestSource;
/** @type {?} */
MultiAutoCompleteComponent.prototype.isOpen;
/** @type {?} */
MultiAutoCompleteComponent.prototype.term;
/** @type {?} */
MultiAutoCompleteComponent.prototype.itemTemplate;
/** @type {?} */
MultiAutoCompleteComponent.prototype.noResultItemTemplate;
/** @type {?} */
MultiAutoCompleteComponent.prototype.dropdown;
/** @type {?} */
MultiAutoCompleteComponent.prototype.minLength;
/** @type {?} */
MultiAutoCompleteComponent.prototype.delay;
/** @type {?} */
MultiAutoCompleteComponent.prototype.searchFn;
/** @type {?} */
MultiAutoCompleteComponent.prototype.formatter;
/** @type {?} */
MultiAutoCompleteComponent.prototype.valueParser;
/** @type {?} */
MultiAutoCompleteComponent.prototype.autoSubmit;
/** @type {?} */
MultiAutoCompleteComponent.prototype.multiAutoCompleteInputElement;
/** @type {?} */
MultiAutoCompleteComponent.prototype.autoCompleteDirective;
/** @type {?} */
MultiAutoCompleteComponent.prototype.multiItems;
/** @type {?} */
MultiAutoCompleteComponent.prototype.inputValue;
/** @type {?} */
MultiAutoCompleteComponent.prototype.multipleLabelClassNameSuffix;
/** @type {?} */
MultiAutoCompleteComponent.prototype.inputEdit;
/** @type {?} */
MultiAutoCompleteComponent.prototype.multipleLabelClassNameConfig;
/** @type {?} */
MultiAutoCompleteComponent.prototype.id;
/** @type {?} */
MultiAutoCompleteComponent.prototype.clonePlaceholder;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.popupRef;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.value;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.placement;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
MultiAutoCompleteComponent.prototype.changeDetectorRef;
}
/**
* @fileoverview added by tsickle
* Generated from: multi-auto-complete.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var MultiAutoCompleteModule = /** @class */ (function () {
function MultiAutoCompleteModule() {
}
MultiAutoCompleteModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, AutoCompleteModule, FormsModule],
exports: [MultiAutoCompleteComponent],
declarations: [MultiAutoCompleteComponent],
providers: [],
entryComponents: []
},] }
];
return MultiAutoCompleteModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ng-devui-multi-auto-complete.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { MultiAutoCompleteComponent, MultiAutoCompleteModule };
//# sourceMappingURL=ng-devui-multi-auto-complete.js.map