@duoduo-oba/ng-devui/bundles/ng-devui-multi-auto-complete.umd.min.js

DevUI components based on Angular

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("ng-devui/auto-complete"),require("@angular/common")):"function"==typeof define&&define.amd?define("ng-devui/multi-auto-complete",["exports","@angular/core","@angular/forms","rxjs","ng-devui/auto-complete","@angular/common"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"]["multi-auto-complete"]={}),e.ng.core,e.ng.forms,e.rxjs,e["ng-devui"]["auto-complete"],e.ng.common)}(this,(function(e,t,l,o,i,n){"use strict";var a=function(){function e(l){this.changeDetectorRef=l,this.overview="border",this.placeholder="请输入关键字",this.disabled=!1,this.autoSubmit=new t.EventEmitter,this.multiItems=[],this.multipleLabelClassNameSuffix=this.overview,this.inputEdit=!1,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=function(e){return null},this.onTouched=function(){return null},this.formatter=function(e){return e?e.label||e.toString():""},this.valueParser=function(e){return e},this.id=e.ID_SEED++}return Object.defineProperty(e.prototype,"placeholderView",{get:function(){return this.multiItems.length>0?"":this.placeholder},enumerable:!0,configurable:!0}),e.prototype.writeValue=function(e){var t=e||[];this.multiItems=t,"single"===this.overview&&(this.inputEdit=0===this.multiItems.length),this.setSinglePlaceholder(),this.changeDetectorRef.markForCheck()},e.prototype.ngOnInit=function(){var e=this;this.source&&!this.searchFn&&(this.searchFn=function(t){return o.of(e.source.filter((function(l){return-1===e.multiItems.indexOf(l)&&-1!==l.toLowerCase().indexOf(t.toLowerCase())})))})},e.prototype.ngOnChanges=function(e){e&&e.overview&&(this.multipleLabelClassNameSuffix=e.overview.currentValue),e&&e.placeholder&&(this.clonePlaceholder=e.placeholder.currentValue)},e.prototype.registerOnChange=function(e){this.onChange=e},e.prototype.registerOnTouched=function(e){this.onTouched=e},e.prototype.singleClick=function(e){this.inputEdit=!0},e.prototype.onMultipleSearch=function(e){if("single"!==this.overview&&e){for(var t=!1,l=0;l<this.multiItems.length;l++)if(e.label){if(e.label===this.multiItems[l].label){t=!0;break}}else if(e===this.multiItems[l]){t=!0;break}t?this.multiItems=this.multiItems.filter((function(t){return t.label?t.label!==e.label:t!==e})):this.multiItems.push(e)}else"single"===this.overview&&e&&(this.multiItems=[],this.multiItems.push(e),this.inputEdit=!1,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=""},e.prototype.removeLabel=function(e){-1!==this.multiItems.indexOf(e)&&(this.multiItems=this.multiItems.filter((function(t){return t!==e}))),this.setSinglePlaceholder(),this.autoSubmit.emit(this.multiItems),this.onChange(this.multiItems)},e.prototype.getInputFocusFlag=function(e){var t=this;this.inputEdit=0===this.multiItems.length||e.focus,this.popupRef=e.popupRef,this.setSinglePlaceholder(),e.focus?(this.multipleLabelClassNameSuffix=this.multipleLabelClassNameConfig[this.overview].focus,setTimeout((function(){t.multiAutoCompleteInputElement.nativeElement.focus()}),0)):(this.multipleLabelClassNameSuffix=this.multipleLabelClassNameConfig[this.overview].blur,this.inputValue=null,this.multiAutoCompleteInputElement.nativeElement.value="",this.autoSubmit.emit(this.multiItems))},e.prototype.onBackspaceKeyUp=function(e,t){this.multiItems.length>0&&!t&&this.multiItems.pop(),this.setSinglePlaceholder(),this.autoSubmit.emit(this.multiItems),this.onChange(this.multiItems)},e.prototype.setSinglePlaceholder=function(){"single"===this.overview&&(this.multiItems&&this.multiItems.length>0?this.placeholder="":this.placeholder=this.clonePlaceholder)},e.ID_SEED=0,e.decorators=[{type:t.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    \x3c!--单选模板--\x3e\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\x3c!--黄底模板--\x3e\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)">&times;</span></span\r\n  >\r\n</ng-template>\r\n\r\n\x3c!--无底色模板--\x3e\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:l.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return e})),multi:!0}],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}"]}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},e.propDecorators={cssClass:[{type:t.Input}],overview:[{type:t.Input}],tipsText:[{type:t.Input}],placeholder:[{type:t.Input}],disabled:[{type:t.Input}],source:[{type:t.Input}],latestSource:[{type:t.Input}],isOpen:[{type:t.Input}],term:[{type:t.Input}],itemTemplate:[{type:t.Input}],noResultItemTemplate:[{type:t.Input}],dropdown:[{type:t.Input}],minLength:[{type:t.Input}],delay:[{type:t.Input}],searchFn:[{type:t.Input}],formatter:[{type:t.Input}],valueParser:[{type:t.Input}],autoSubmit:[{type:t.Output}],multiAutoCompleteInputElement:[{type:t.ViewChild,args:["multiAutoCompleteInput",{static:!1}]}],autoCompleteDirective:[{type:t.ViewChild,args:[i.AutoCompleteDirective,{static:!1}]}]},e}();var u=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,i.AutoCompleteModule,l.FormsModule],exports:[a],declarations:[a],providers:[],entryComponents:[]}]}],e}();e.MultiAutoCompleteComponent=a,e.MultiAutoCompleteModule=u,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-multi-auto-complete.umd.min.js.map