@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
247 lines (241 loc) • 10.1 kB
JavaScript
import { EventEmitter, Component, forwardRef, ChangeDetectorRef, Input, Output, ViewChild, NgModule } from '@angular/core';
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
import { AutoCompleteDirective, AutoCompleteModule } from '@duoduo-oba/ng-devui/auto-complete';
import { I18nService } from '@duoduo-oba/ng-devui/i18n';
import { CommonModule } from '@angular/common';
import { PositioningModule } from '@duoduo-oba/ng-devui/position';
/**
* @fileoverview added by tsickle
* Generated from: editable-select.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class EditableSelectComponent {
/**
* @param {?} changeDetectorRef
* @param {?} i18n
*/
constructor(changeDetectorRef, i18n) {
this.changeDetectorRef = changeDetectorRef;
this.i18n = i18n;
this.disabled = false;
this.placeholder = '';
this.enableLazyLoad = false;
this.loadMore = new EventEmitter();
this.multiItems = [];
this.onChange = (/**
* @param {?} _
* @return {?}
*/
(_) => null);
this.onTouched = (/**
* @return {?}
*/
() => null);
this.i18nCommonText = this.i18n.getI18nText().common;
}
/**
* @param {?} obj
* @return {?}
*/
writeValue(obj) {
/** @type {?} */
const value = obj || '';
this.inputValue = value;
this.changeDetectorRef.markForCheck();
}
/**
* @return {?}
*/
ngOnInit() {
this.i18nSubscription = this.i18n.langChange().subscribe((/**
* @param {?} data
* @return {?}
*/
(data) => {
this.i18nCommonText = data.common;
}));
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (changes && changes['searchFn'] && typeof this.searchFn === 'function') {
if (this.subscription) {
this.subscription.unsubscribe();
}
this.subscription = this.searchFn('').subscribe((/**
* @param {?} source
* @return {?}
*/
source => {
this.source = source;
}));
}
}
/**
* @param {?} fn
* @return {?}
*/
registerOnChange(fn) {
this.onChange = fn;
}
/**
* @param {?} fn
* @return {?}
*/
registerOnTouched(fn) {
this.onTouched = fn;
}
/**
* @param {?} value
* @return {?}
*/
onTermChange(value) {
this.inputValue = value;
this.onChange(this.inputValue);
}
/**
* @param {?} $event
* @return {?}
*/
toggle($event) {
this.autoCompleteDirective.popupRef.instance.isOpen = !this.autoCompleteDirective.popupRef.instance.isOpen;
}
/**
* @param {?} $event
* @return {?}
*/
loadMoreEvent($event) {
this.loadMore.emit($event);
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.i18nSubscription) {
this.i18nSubscription.unsubscribe();
}
}
}
EditableSelectComponent.decorators = [
{ type: Component, args: [{
selector: 'd-editable-select',
template: "<div\r\n class=\"devui-form-group devui-has-feedback\"\r\n [style.padding-bottom.px]=\"2\"\r\n [style.padding-bottom.px]=\"2\"\r\n [ngClass]=\"{\r\n 'devui-select-open': autoCompleteDirective.popupRef ? !!autoCompleteDirective.popupRef.instance.isOpen : false\r\n }\"\r\n>\r\n <input\r\n (click)=\"toggle($event)\"\r\n style=\"cursor: pointer\"\r\n class=\"devui-form-control\"\r\n type=\"text\"\r\n name=\"autoCompleteControl\"\r\n [source]=\"source\"\r\n (ngModelChange)=\"onTermChange($event)\"\r\n [ngModel]=\"inputValue\"\r\n [searchFn]=\"searchFn\"\r\n [disabled]=\"disabled\"\r\n [disabledKey]=\"disabledKey\"\r\n [placeholder]=\"placeholder\"\r\n [itemTemplate]=\"itemTemplate\"\r\n [noResultItemTemplate]=\"noResultItemTemplate ? noResultItemTemplate : noDataTemplate\"\r\n [maxHeight]=\"maxHeight\"\r\n [sceneType]=\"'select'\"\r\n dAutoComplete\r\n [enableLazyLoad]=\"enableLazyLoad\"\r\n (loadMore)=\"loadMoreEvent($event)\"\r\n />\r\n <span class=\"devui-form-control-feedback\">\r\n <span class=\"devui-select-chevron-icon\">\r\n <svg\r\n width=\"16px\"\r\n height=\"16px\"\r\n viewBox=\"0 0 16 16\"\r\n version=\"1.1\"\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\r\n >\r\n <g id=\"chevron_down\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\r\n <polygon id=\"chevron_down\" points=\"4.5 5 8 8.76923077 11.5 5 13 6.61538462 8 12 3 6.61538462\"></polygon>\r\n </g>\r\n </svg>\r\n </span>\r\n </span>\r\n</div>\r\n<ng-template #noDataTemplate>\r\n <div class=\"devui-no-data-tip\">\r\n <ng-container *ngIf=\"!inputValue\">{{ i18nCommonText?.noData }}</ng-container>\r\n <ng-container *ngIf=\"inputValue\">{{ i18nCommonText?.noRecordsFound }}</ng-container>\r\n </div>\r\n</ng-template>\r\n",
exportAs: 'editable-select',
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef((/**
* @return {?}
*/
() => EditableSelectComponent)),
multi: true
}],
styles: [".devui-select-chevron-icon{display:-webkit-inline-box;display:inline-flex;vertical-align:middle;-webkit-transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.devui-select-open .devui-select-chevron-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.devui-select-chevron-icon svg>g>polygon{fill:#252b3a}input::-ms-clear{display:none}.devui-no-data-tip{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:not-allowed;padding:5px 12px;opacity:.3}.devui-form-control{outline:0}"]
}] }
];
/** @nocollapse */
EditableSelectComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: I18nService }
];
EditableSelectComponent.propDecorators = {
cssClass: [{ type: Input }],
disabled: [{ type: Input }],
placeholder: [{ type: Input }],
source: [{ type: Input }],
isOpen: [{ type: Input }],
itemTemplate: [{ type: Input }],
noResultItemTemplate: [{ type: Input }],
maxHeight: [{ type: Input }],
disabledKey: [{ type: Input }],
searchFn: [{ type: Input }],
enableLazyLoad: [{ type: Input }],
loadMore: [{ type: Output }],
autoCompleteDirective: [{ type: ViewChild, args: [AutoCompleteDirective, { static: true },] }]
};
if (false) {
/** @type {?} */
EditableSelectComponent.prototype.cssClass;
/** @type {?} */
EditableSelectComponent.prototype.disabled;
/** @type {?} */
EditableSelectComponent.prototype.placeholder;
/** @type {?} */
EditableSelectComponent.prototype.source;
/** @type {?} */
EditableSelectComponent.prototype.isOpen;
/** @type {?} */
EditableSelectComponent.prototype.itemTemplate;
/** @type {?} */
EditableSelectComponent.prototype.noResultItemTemplate;
/** @type {?} */
EditableSelectComponent.prototype.maxHeight;
/** @type {?} */
EditableSelectComponent.prototype.disabledKey;
/** @type {?} */
EditableSelectComponent.prototype.searchFn;
/** @type {?} */
EditableSelectComponent.prototype.enableLazyLoad;
/** @type {?} */
EditableSelectComponent.prototype.loadMore;
/** @type {?} */
EditableSelectComponent.prototype.autoCompleteDirective;
/** @type {?} */
EditableSelectComponent.prototype.multiItems;
/** @type {?} */
EditableSelectComponent.prototype.inputValue;
/** @type {?} */
EditableSelectComponent.prototype.subscription;
/** @type {?} */
EditableSelectComponent.prototype.i18nCommonText;
/** @type {?} */
EditableSelectComponent.prototype.i18nSubscription;
/**
* @type {?}
* @private
*/
EditableSelectComponent.prototype.onChange;
/**
* @type {?}
* @private
*/
EditableSelectComponent.prototype.onTouched;
/**
* @type {?}
* @private
*/
EditableSelectComponent.prototype.changeDetectorRef;
/**
* @type {?}
* @private
*/
EditableSelectComponent.prototype.i18n;
}
/**
* @fileoverview added by tsickle
* Generated from: editable-select.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class EditableSelectModule {
}
EditableSelectModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule, FormsModule, AutoCompleteModule, PositioningModule],
exports: [EditableSelectComponent],
declarations: [EditableSelectComponent],
entryComponents: [EditableSelectComponent]
},] }
];
/**
* @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-editable-select.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { EditableSelectComponent, EditableSelectModule };
//# sourceMappingURL=ng-devui-editable-select.js.map