ngx-multi-selector/bundles/ngx-multi-selector.umd.min.js

A small plugin which generates multi-selector control, it supports web api loading. Only supported angular 5.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common")):"function"==typeof define&&define.amd?define("ngx-multi-selector",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common"],t):t((e=e||self)["ngx-multi-selector"]={},e.ng.core,e.ng.forms,e.rxjs,e.rxjs.operators,e.ng.common)}(this,function(e,t,n,r,l,i){"use strict";function o(e,t,n,r){var l,i=arguments.length,o=i<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,n):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,n,r);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(o=(i<3?l(o):i>3?l(t,n,o):l(t,n))||o);return i>3&&o&&Object.defineProperty(t,n,o),o}function a(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function s(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var r,l,i=n.call(e),o=[];try{for(;(void 0===t||t-- >0)&&!(r=i.next()).done;)o.push(r.value)}catch(a){l={error:a}}finally{try{r&&!r.done&&(n=i["return"])&&n.call(i)}finally{if(l)throw l.error}}return o}function p(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(s(arguments[t]));return e}var u=function(){function e(){var e=this;this._defaultItemsInterval=150,this._separationCharacter=",",this._maximumContextItems=0,this._maximumSelectableItems=0,this._loadItemsInterval=this._defaultItemsInterval,this._selectedItems=[],this.items=[],this._maximumSelectableItems=10,this._updateAvailableItemsSubject=new r.ReplaySubject(1),this._updateAvailableItemsSubscription=this._updateAvailableItemsSubject.pipe(l.debounce(function(t){return t.shouldIgnoreInterval?r.EMPTY:r.timer(e._loadItemsInterval)}),l.map(function(t){var n=e._keyword;return n&&n.length&&(n=n.trim()),{keyword:n,command:t}}),l.distinctUntilChanged(function(e,t){return!t.command.shouldIgnoreDuplicate&&e.keyword===t.keyword}),l.switchMap(function(t){return e.loadAvailableItemsAsync(t.keyword)})).subscribe(function(t){e._availableItems=p(t)})}var i;return i=e,Object.defineProperty(e.prototype,"keyword",{get:function(){return this._keyword},set:function(e){this._keyword=e;this._updateAvailableItemsSubject.next({shouldIgnoreDuplicate:!1,shouldIgnoreInterval:!1})},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"separationCharacter",{set:function(e){e&&e.length?this._separationCharacter=e:this._separationCharacter=","},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selectedItems",{get:function(){return this._selectedItems},set:function(e){!e||e.length<0?this._selectedItems=[]:this._selectedItems=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"interval",{set:function(e){e<this._defaultItemsInterval?this._loadItemsInterval=this._defaultItemsInterval:this._loadItemsInterval=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"items",{get:function(){return this._availableItems},set:function(e){if(this.loadAvailableItemsAsyncHandler&&this._updateAvailableItemsSubject)this._updateAvailableItemsSubject.next(null);else{if(!(e&&e.length&&e instanceof Array))return this._originalItems=[],void(this._availableItems=[]);this._originalItems=e,this._availableItems=e}},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maximumContextItem",{get:function(){return this._maximumContextItems},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maximumContextItems",{set:function(e){e<0&&(e=0),this._maximumContextItems=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maximumSelectableItems",{get:function(){return this._maximumSelectableItems},set:function(e){e<0||isNaN(e)?this._maximumSelectableItems=0:this._maximumSelectableItems=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"key",{set:function(e){this._key=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"keyProperty",{set:function(e){this._key=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"displayProperty",{set:function(e){this._displayProperty=e},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"valueProperty",{set:function(e){this._valueProperty=e},enumerable:!0,configurable:!0}),e.prototype.ngOnDestroy=function(){this._updateAvailableItemsSubscription&&!this._updateAvailableItemsSubscription.closed&&this._updateAvailableItemsSubscription.unsubscribe()},e.prototype.hasItemSelected=function(e){return-1!=this.loadSelectedItemIndex(e)},e.prototype.loadSelectedItemIndex=function(e){var t=this;return null==this._selectedItems||this._selectedItems.length<1?-1:this._selectedItems.findIndex(function(n){return t.loadItemUniqueValue(n)===t.loadItemUniqueValue(e)})},e.prototype.loadSelectedItemsTitle=function(){var e=this;if(null==this.selectedItems||this.selectedItems.length<1)return"";var t=this._separationCharacter;return t||(t=","),this.selectedItems.map(function(t){return e.loadItemDisplay(t)}).join(t).slice(0,255)},e.prototype.deleteSelectedItems=function(e){this.selectedItems=new Array,e&&this.ngOnChangeCallback(this.selectedItems)},e.prototype.deleteSelectedValue=function(e){var t=this;if(this.selectedItems&&this.selectedItems.length){var n=this.selectedItems.findIndex(function(n){return t.loadItemValue(n)==e});if(!(n<0)){var r=p(this.selectedItems);r.splice(n,1),r&&r.length?(this.selectedItems=r,this.ngOnChangeCallback(this.selectedItems.map(function(e){return t.loadItemValue(e)}))):(this.selectedItems=null,this.ngOnChangeCallback(null))}}},e.prototype.clickSelectItem=function(e){var t,n=this;t=this.selectedItems?p(this.selectedItems):[];var r=this.loadSelectedItemIndex(e);if(null==r||r<0){if(null!=this.maximumSelectableItems&&this.maximumSelectableItems>0&&t.length>=this.maximumSelectableItems)return;return t.push(e),this.selectedItems=t,void this.ngOnChangeCallback(t.map(function(e){return n.loadItemValue(e)}))}t.splice(r,1),t&&t.length?(this.selectedItems=t,this.ngOnChangeCallback(this.selectedItems)):(this.selectedItems=null,this.ngOnChangeCallback(this.selectedItems))},e.prototype.close=function(){if(null!=this.multiSelectorDropDown){var e=this.multiSelectorDropDown.nativeElement;null!=e&&e.classList.remove("open")}},e.prototype.open=function(){this.disabled||null!=this.multiSelectorDropDown&&null!=this.multiSelectorDropDown.nativeElement&&this.multiSelectorDropDown.nativeElement.classList.add("open")},e.prototype.writeValue=function(e){e&&e.length?this.selectedItems=e:this.selectedItems=null},e.prototype.registerOnChange=function(e){this.ngOnChangeCallback=e},e.prototype.registerOnTouched=function(e){this.ngOnTouchedCallback=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.loadAvailableItemsAsync=function(e){var t=this,n=null==e?null:e.toUpperCase();return this.loadAvailableItemsAsyncHandler?this.loadAvailableItemsAsyncHandler(e):r.of(p(this._originalItems)).pipe(l.map(function(e){return e&&e.length?e.filter(function(r){var l=t.loadItemDisplay(r);return n?-1!==l.toString().toUpperCase().indexOf(n):e}):[]}))},e.prototype.loadItemDisplay=function(e){var t=this._displayProperty;return t&&t.length?e[t]:e.toString()},e.prototype.loadItemValue=function(e){var t=this._valueProperty;return t&&t.length?e[t]:e},e.prototype.loadItemUniqueValue=function(e){if(!e)return e;var t=this._key;return!t||t.length<1?e:e[t]},e.prototype.ngOnInit=function(){if(this.loadAvailableItemsAsyncHandler&&this._updateAvailableItemsSubject){return this._updateAvailableItemsSubject.next({shouldIgnoreDuplicate:!0,shouldIgnoreInterval:!0})}},o([t.Input("load-available-items-handler"),a("design:type",Function)],e.prototype,"loadAvailableItemsAsyncHandler",void 0),o([t.ViewChild("multiSelectorDropdownMenu",{"static":!1}),a("design:type",t.ElementRef)],e.prototype,"multiSelectorDropDown",void 0),o([t.Input("is-clear-button-available"),a("design:type",Boolean)],e.prototype,"shouldClearButtonAvailable",void 0),o([t.Input("is-search-box-available"),a("design:type",Boolean)],e.prototype,"shouldSearchBoxAvailable",void 0),o([t.Input("placeholder-search-drop-down"),a("design:type",String)],e.prototype,"placeholderSearchDropDown",void 0),o([t.Input("placeholder-title-drop-down"),a("design:type",String)],e.prototype,"placeholderTitleDropDown",void 0),o([t.Input("disabled"),a("design:type",Boolean)],e.prototype,"disabled",void 0),o([t.Input("item-template"),a("design:type",t.TemplateRef)],e.prototype,"itemTemplate",void 0),o([t.Input("separation-character"),a("design:type",String),a("design:paramtypes",[String])],e.prototype,"separationCharacter",null),o([t.Input("interval"),a("design:type",Number),a("design:paramtypes",[Number])],e.prototype,"interval",null),o([t.Input("items"),a("design:type",Array),a("design:paramtypes",[Array])],e.prototype,"items",null),o([t.Input("limit-item-amount"),a("design:type",Number),a("design:paramtypes",[Number])],e.prototype,"maximumContextItems",null),o([t.Input("limit-item-selection"),a("design:type",Number),a("design:paramtypes",[Number])],e.prototype,"maximumSelectableItems",null),o([t.Input("key"),a("design:type",String),a("design:paramtypes",[String])],e.prototype,"key",null),o([t.Input("key-property"),a("design:type",String),a("design:paramtypes",[String])],e.prototype,"keyProperty",null),o([t.Input("display-property"),a("design:type",String),a("design:paramtypes",[String])],e.prototype,"displayProperty",null),o([t.Input("value-property"),a("design:type",String),a("design:paramtypes",[String])],e.prototype,"valueProperty",null),e=i=o([t.Component({selector:"ngx-multi-selector",exportAs:"ngx-multi-selector",template:'<div class="dropdown">\r\n\r\n  \x3c!--Text input--\x3e\r\n  <div #multiSelectorDropdownMenu\r\n       class="input-group ngx-multi-selector">\r\n    <div class="dropdown-toggle"\r\n         [attr.data-toggle]="disabled ? \'\': \'dropdown\'"\r\n         aria-haspopup="true"\r\n         aria-expanded="false"\r\n         [attr.disabled]="disabled">\r\n      <input class="form-control ngx-multi-selector-title-box"\r\n             [class.disabled]="disabled"\r\n             [placeholder]="!placeholderTitleDropDown ? \'\' : placeholderTitleDropDown"\r\n             readonly="readonly"\r\n             [value]="loadSelectedItemsTitle()">\r\n    </div>\r\n    <span class="input-group-addon"\r\n          *ngIf="shouldClearButtonAvailable"\r\n          [class.disabled]="disabled"\r\n          (click)="deleteSelectedItems()">\r\n      <span class="glyphicon glyphicon-remove"></span>\r\n    </span>\r\n\r\n    \x3c!--Dropdown--\x3e\r\n    <span class="input-group-addon dropdown-toggle"\r\n          [attr.data-toggle]="disabled ? \'\': \'dropdown\'"\r\n          [class.disabled]="disabled"\r\n          aria-haspopup="true"\r\n          aria-expanded="false">\r\n        <span class="caret"></span>\r\n    </span>\r\n\r\n    \x3c!--Dropdown menu--\x3e\r\n    <ul class="dropdown-menu"\r\n        (click)="$event.stopPropagation();">\r\n      <li *ngIf="shouldSearchBoxAvailable">\r\n        <div class="col-lg-12">\r\n          <div class="form-group">\r\n            <div class="input-group">\r\n              <input class="form-control"\r\n                     [(ngModel)]="keyword"\r\n                     [placeholder]="!placeholderSearchDropDown ? \'\' : placeholderSearchDropDown">\r\n              <span class="input-group-addon">\r\n                <span class="glyphicon glyphicon-search"></span>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </li>\r\n\r\n      <ng-template ngFor\r\n                   let-item\r\n                   let-i="index"\r\n                   [ngForOf]="items">\r\n\r\n        <ng-container *ngIf="maximumContextItem < 1 || (maximumContextItem > 0 && i < maximumContextItem)">\r\n          \x3c!--Item template--\x3e\r\n          <ng-template [ngTemplateOutlet]="itemTemplate || defaultItemTemplate"\r\n                       [ngTemplateOutletContext]="{item:item, index:i, selected: hasItemSelected(item), instance: this}">\r\n          </ng-template>\r\n        </ng-container>\r\n\r\n      </ng-template>\r\n    </ul>\r\n  </div>\r\n</div>\r\n\r\n\x3c!--Default item template--\x3e\r\n<ng-template #defaultItemTemplate\r\n             let-item="item"\r\n             let-i="index"\r\n             let-selected="selected"\r\n             let-instance="instance">\r\n\r\n  <li [class.active]="hasItemSelected(item)"\r\n      (click)="instance.clickSelectItem(item)">\r\n    <a href="javascript:void(0);">\r\n      <span class="glyphicon glyphicon-check"\r\n            *ngIf="selected"></span>\r\n      {{loadItemDisplay(item)}}\r\n    </a>\r\n  </li>\r\n</ng-template>\r\n',providers:[{provide:n.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return i}),multi:!0}],styles:[".ngx-multi-selector .dropdown-menu{width:100%}.ngx-multi-selector input.ngx-multi-selector-title-box{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background-color:#fff!important;cursor:default}.ngx-multi-selector .input-group-addon.disabled,.ngx-multi-selector .input-group-addon:disabled,.ngx-multi-selector input.ngx-multi-selector-title-box.disabled,.ngx-multi-selector input.ngx-multi-selector-title-box:disabled{background-color:#eee!important;cursor:not-allowed;pointer-events:none}"]}),a("design:paramtypes",[])],e)}(),c=function(){function e(){}return e=o([t.NgModule({imports:[i.CommonModule,n.FormsModule],declarations:[u],exports:[u]})],e)}();e.NgxMultiSelectorComponent=u,e.NgxMultiSelectorModule=c,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-multi-selector.umd.min.js.map