ngx-tree-select/bundle/ngx-tree-select.rollup.umd.min.js

Angular component for select with tree items.

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs/Subject"),require("@angular/common")):"function"==typeof define&&define.amd?define(["exports","@angular/core","@angular/forms","rxjs/Subject","@angular/common"],t):t(e.ngxTreeSelect={},e.ng.core,e.ng.forms,e.Rx.Subject,e.ng.common)}(this,function(e,t,i,n,o){"use strict";var r=function(){function e(){}return e.None="None",e.Selection="Selection",e.All="All",e}(),s=function(){function e(){this.expandMode=r.None}return e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}(),l=function(){function e(e,t,i,n){this.id=e,this.text=t,this.data=i,this.svc=n,this._selected=!1,this.isOpen=!1,this.matchFilter=!0,this.isVisible=!1}return Object.defineProperty(e.prototype,"hasChild",{get:function(){return this.children&&this.children.length>0},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"checked",{get:function(){return this.hasChild&&this.svc.Configuration.allowMultiple?!!this.children.every(function(e){return e.selected})||(this.children.every(function(e){return!1===e.selected})?this._selected:null):this._selected},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selected",{get:function(){if(this.hasChild&&this.svc.Configuration.allowMultiple)return this.children.some(function(e){return e.selected})?(this.svc.Configuration.allowParentSelection&&(this._selected=!1),!0):!!this.children.every(function(e){return!1===e.selected})&&(this.svc.Configuration.allowParentSelection?this._selected:this._selected=!1);if(this.hasChild&&!0===this._selected)for(var e=0,t=this.children;e<t.length;e++)t[e].selected=!1;return this._selected},set:function(e){this.hasChild&&!this.svc.Configuration.allowParentSelection?null!==e&&this.children.forEach(function(t){return t.selected=e}):this._selected=e},enumerable:!0,configurable:!0}),e}(),c=function(){function e(){this.idProperty="id",this.textProperty="text",this.childProperty=null,this.allowMultiple=!1,this.closeOnSelection=!0,this.items=[],this.isOpen=!1,this.filter="",this.filterCaseSensitive=!1,this.allowParentSelection=!1,this.restructureWhenChildSameName=!1,this.expandMode=r.None}return e.prototype.isHierarchy=function(){return this.childProperty&&this.childProperty.trim().length>0},Object.defineProperty(e.prototype,"filterExpandMode",{get:function(){return""!==this.filter?r.All:this.expandMode},enumerable:!0,configurable:!0}),e.prototype.displayCheckbox=function(){return this.allowMultiple&&this.isHierarchy()},e.prototype.isValid=function(){return this.idProperty&&this.idProperty.trim().length>0&&this.textProperty&&this.textProperty.trim().length>0&&this.items&&Array.isArray(this.items)&&this.items.length>0},e}(),a=function(){function e(){this.modelChanged$=new n.Subject,this._options=new c}return e.prototype.close=function(){this.Configuration.isOpen&&this.setConfiguration(function(e){return e.isOpen=!1},!1)},e.prototype.open=function(){this.Configuration.isOpen||this.setConfiguration(function(e){return e.isOpen=!0},!1)},e.prototype.toggleOpen=function(){this.setConfiguration(function(e){return e.isOpen=!e.isOpen},!1)},e.prototype.setItems=function(e){this.setConfiguration(function(t){return t.items=e},!0),this.setExpand()},e.prototype.getInternalItems=function(){return this._items},e.prototype.setSelection=function(e){this.setConfiguration(function(t){return t.model=e},!0),this.setExpand()},e.prototype.setSelectedItemOrChild=function(e,t){for(var i=0,n=e;i<n.length;i++){var o=n[i];o.hasChild?(o.id===t&&(o.selected=!0),this.setSelectedItemOrChild(o.children,t)):o.id===t&&(o.selected=!0)}},e.prototype.getSelection=function(){if(this.Configuration.allowMultiple)return this.getInternalSelection().map(function(e){return e.data});var e=this.getInternalSelection();return e&&e.length>0?e[0].data:null},e.prototype.getInternalSelection=function(){var e=this.getSelectedItems(this._items);if(e&&e.length>0)for(var t=0,i=this._options.maxVisibleItemCount?this._options.maxVisibleItemCount:0,n=0,o=e;n<o.length;n++){var r=o[n];r.isVisible=(t<i||0===i)&&(!r.hasChild||r.children.every(function(e){return!1===e.selected})),r.isVisible&&i>0&&t++}return e},e.prototype.toggleItemSelection=function(e){var t=this;this.Configuration.allowMultiple||this.setAllUnselected(this._items),e.selected=!e.selected,this.setConfiguration(function(e){return e.model=t.getSelection()},!1),this.Configuration.closeOnSelection&&this.setConfiguration(function(e){return e.isOpen=!1},!1)},e.prototype.setAllUnselected=function(e){for(var t=0,i=e;t<i.length;t++){var n=i[t];n.hasChild?(n.selected=!1,this.setAllUnselected(n.children)):n.selected=!1}},e.prototype.setConfiguration=function(e,t){var i=this._options.model;e(this._options),this._options.isValid()&&this.reconfigure(t),!t&&(i&&this._options.model!==i||!i&&this._options.model)&&this.modelChanged$.next(this._options.model)},Object.defineProperty(e.prototype,"Configuration",{get:function(){return this._options},enumerable:!0,configurable:!0}),e.prototype.setExpand=function(){this.setExpandForList(this._items)},e.prototype.setExpandForList=function(e){if(e)for(var t=0,i=e;t<i.length;t++){var n=i[t];this.setExpandForList(n.children),n.isOpen=this._options.filterExpandMode===r.All,this._options.filterExpandMode===r.Selection&&n.children&&(n.isOpen=n.children.some(function(e){return e.isOpen||e.selected}))}},e.prototype.toSelectableItems=function(e){var t=this;if(e&&Array.isArray(e)){var i=1;return e.map(function(e){var n;return e[t._options.idProperty]&&""!==e[t._options.idProperty]&&e[t._options.textProperty]?n=new l((e[t._options.idProperty]||"").toString(),e[t._options.textProperty],e,t):(n=new l(i.toString(),e,e,t),i++),t._options.isHierarchy()&&(n.children=t.toSelectableItems(e[t._options.childProperty])),n})}return[]},e.prototype.getSelectedItems=function(e){if(this.Configuration.isValid()){for(var t=[],i=0,n=e;i<n.length;i++){var o=n[i];o.hasChild&&!0===o.selected?t=o.children.every(function(e){return!1===e.selected})?t.concat([o]):t.concat(this.getSelectedItems(o.children)):o.hasChild?t=t.concat(this.getSelectedItems(o.children)):!0===o.selected&&(t=t.concat([o]))}return t}return[]},e.prototype.reconfigure=function(e){var t=this;if(this.Configuration.isValid()){this.checkConfig(),e&&(this._items=this.toSelectableItems(this.Configuration.items));var i=[];this.getModel().forEach(function(e){i=i.concat(t.getItemForModel(e,t._items))}),i.forEach(function(e){return e._selected=!0})}},e.prototype.checkConfig=function(){this.Configuration.allowMultiple&&this.Configuration.closeOnSelection?this.Configuration.closeOnSelection=!1:this.Configuration.allowMultiple||this.Configuration.closeOnSelection||(this.Configuration.closeOnSelection=!0)},e.prototype.getModel=function(){return this.Configuration.model?Array.isArray(this.Configuration.model)?this.Configuration.model:[this.Configuration.model]:[]},e.prototype.getItemForModel=function(e,t){for(var i=[],n=0,o=t;n<o.length;n++){var r=o[n];e&&("object"!=typeof e?r.data===e&&i.push(r):(e[this.Configuration.idProperty]&&r.id===(e[this.Configuration.idProperty]||"").toString()&&i.push(r),this.Configuration.isHierarchy()&&r.children&&r.children.length>0&&(i=i.concat(this.getItemForModel(e,r.children)))))}return i},e.decorators=[{type:t.Injectable}],e.ctorParameters=function(){return[]},e}(),u=function(){},p={provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef(function(){return h}),multi:!0},h=function(){function e(e,t){var i=this;this.svc=e,this.defaultOpts=t,this.onTouchedCallback=u,this.showMoreLink=!1,this.moreLoaded=!1,this.disabled=!1,this.placeholder="",this.filterPlaceholder="Type here for filtering items...",this.allowFilter=!0,this._isOpen=!1,this.onChangeCallback=u,this.haveFocus=!1,this.inputFocus=!1,this.clickedOutside=this.clickedOutside.bind(this),this.svc.modelChanged$.subscribe(function(e){i.onChangeCallback(e)}),this.maxVisibleItemCount=t.maxVisibleItemCount||0,this.allowParentSelection=void 0===t.allowParentSelection||null===t.allowParentSelection||t.allowParentSelection,this.allowFilter=void 0===t.allowFilter||null===t.allowFilter||t.allowFilter,this.filterCaseSensitive=void 0!==t.filterCaseSensitive&&null!==t.filterCaseSensitive&&t.filterCaseSensitive,this.filterPlaceholder=t.filterPlaceholder||"Type here for filtering items...",this.idField=t.idField||"id",this.textField=t.textField||"id",this.childrenField=t.childrenField||"",this.expandMode=t.expandMode||r.None}return Object.defineProperty(e.prototype,"items",{set:function(e){this.svc.setItems(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"idField",{set:function(e){this.svc.setConfiguration(function(t){return t.idProperty=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"textField",{set:function(e){this.svc.setConfiguration(function(t){return t.textProperty=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"allowParentSelection",{get:function(){return this.svc.Configuration.allowParentSelection},set:function(e){this.svc.setConfiguration(function(t){return t.allowParentSelection=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"restructureWhenChildSameName",{get:function(){return this.svc.Configuration.restructureWhenChildSameName},set:function(e){this.svc.setConfiguration(function(t){return t.restructureWhenChildSameName=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"childrenField",{set:function(e){this.svc.setConfiguration(function(t){return t.childProperty=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"multiple",{get:function(){return this.svc.Configuration.allowMultiple},set:function(e){this.svc.setConfiguration(function(t){return t.allowMultiple=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"filterCaseSensitive",{get:function(){return this.svc.Configuration.filterCaseSensitive},set:function(e){this.svc.setConfiguration(function(t){return t.filterCaseSensitive=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"expandMode",{get:function(){return this.svc.Configuration.expandMode},set:function(e){this.svc.setConfiguration(function(t){return t.expandMode=e},!0),this.svc.setExpand()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"maxVisibleItemCount",{get:function(){return this.svc.Configuration.maxVisibleItemCount},set:function(e){this.svc.setConfiguration(function(t){return t.maxVisibleItemCount=e},!0)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"internalItems",{get:function(){return this.svc.getInternalItems()||[]},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"selection",{get:function(){return this.showMoreLink=this.maxVisibleItemCount>0&&this.svc.getInternalSelection().length-this.maxVisibleItemCount>0,this.svc.getInternalSelection()},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"filter",{get:function(){return this.svc.Configuration.filter},set:function(e){this.svc.setConfiguration(function(t){return t.filter=e},!1);for(var t=0,i=this.internalItems;t<i.length;t++){var n=i[t];this.ProcessMatchFilterTreeItem(n,this.svc.Configuration.filter)}this.svc.setExpand()},enumerable:!0,configurable:!0}),e.prototype.keyUp=function(e){},e.prototype.toggle=function(e){e.preventDefault(),this.haveFocus=!0,this.svc.toggleOpen()},e.prototype.removeItem=function(e,t){e.stopPropagation(),this.svc.toggleItemSelection(t)},Object.defineProperty(e.prototype,"isOpen",{get:function(){return this.svc.Configuration.isOpen},enumerable:!0,configurable:!0}),e.prototype.clickedOutside=function(){this.inputFocus||((!this.haveFocus&&this.isOpen||this.haveFocus&&!this.isOpen)&&this.onTouched(),this.haveFocus=!1)},e.prototype.onTouched=function(){this.svc.close(),this.onTouchedCallback()},e.prototype.setInputFocus=function(){this.inputFocus=!0},e.prototype.setInputFocusOut=function(){this.inputFocus=!1},e.prototype.writeValue=function(e){this.svc.setSelection(e)},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.setDisabledState=function(e){this.disabled=e},e.prototype.loadMore=function(e){e.stopPropagation(),this.moreLoaded=!this.moreLoaded},e.prototype.ProcessMatchFilterTreeItem=function(e,t){var i=!1;if(e&&e.children&&e.children.length>0)for(var n=0,o=e.children;n<o.length;n++){var r=o[n];i=this.ProcessMatchFilterTreeItem(r,t)||i}return e.matchFilter=this.filterCaseSensitive?e.id.indexOf(t)>-1||e.text.indexOf(t)>-1||i:e.id.toLowerCase().indexOf(t.toLowerCase())>-1||e.text.toLowerCase().indexOf(t.toLowerCase())>-1||i,e.matchFilter},e.decorators=[{type:t.Component,args:[{selector:"tree-select",template:'<div tabindex="0" class="dropdown open show" [off-click]="clickedOutside"> \x3c!-- Control display --\x3e <div [class.disabled]="disabled"> <span tabindex="-1" class="btn btn-default btn-secondary form-control" [class.selected-container-text]="!multiple" [class.selected-container-item]="multiple" (click)="toggle($event)"> <span *ngIf="selection.length <= 0" class="ui-select-placeholder text-muted">{{placeholder}}</span> <span *ngFor="let itm of selection; let idx=index"> <span *ngIf="moreLoaded || maxVisibleItemCount == 0 || idx<maxVisibleItemCount" class="pull-left" [class.selected-item-text]="!multiple" [class.selected-item-item]="multiple" [class.btn]="multiple" [class.btn-default]="multiple" [class.btn-xs]="multiple"> {{itm.text}} <a *ngIf="multiple && !disabled" class="close" (click)="removeItem($event, itm)">x</a> </span> </span> </span> </div> <div class="enabled"> <span class="pull-right more-items-icon" (click)="loadMore($event)" *ngIf="showMoreLink">(...)</span> <i class="caret pull-right" (click)="toggle($event)"></i> </div> \x3c!-- options template --\x3e <ul *ngIf="!disabled && isOpen && internalItems && internalItems.length > 0" class="dropdown-menu" role="menu"> <input name="filterText" *ngIf="allowFilter" type="text" [(ngModel)]="filter" (click)="setInputFocus()" (blur)="setInputFocusOut()" class="form-control" placeholder="{{filterPlaceholder}}" [ngModelOptions]="{standalone: true}" autocomplete="off" /> <li *ngFor="let o of internalItems | itemPipe:filter" role="menuitem"> <tree-select-item [item]="o" [onTouchedCallBack]="onTouchedCallback"></tree-select-item> </li> </ul> </div> ',providers:[p,a],styles:[":host.ng-invalid:not(.ng-pristine) span.form-control, :host.ng-invalid:not(.ng-untouched) span.form-control { border-color: #a94442; } .input-group > .dropdown { position: static; } .disabled > span { background-color: #eceeef; cursor: not-allowed; } .disabled .btn { border-color: #ccc; } .enabled > span { cursor: context-menu; } ul { height: auto; list-style-type: none; margin-top: 0; max-height: 200px; overflow-x: hidden; width: 100%; } .selected-container-text { padding-left: 7px; } .selected-container-item { padding-left: 2px; } .selected-item-text { font-size: 14px; margin: 3px; } .selected-item-item { font-size: 14px; margin: 2px; outline: 0; } .more-items-icon { bottom: 23px; height: 10px; opacity: .5; position: absolute; right: 20px; z-index: 100; } .close { font-size: 18px; line-height: .75; margin-left: 5px; padding-top: 3px; position: absolute; z-index: 50; } .caret { height: 10px; margin-top: -2px; position: absolute; right: 10px; top: 50%; } .btn { display: table; padding-right: 20px; } "]}]}],e.ctorParameters=function(){return[{type:a},{type:s}]},e.propDecorators={disabled:[{type:t.Input}],placeholder:[{type:t.Input}],filterPlaceholder:[{type:t.Input}],allowFilter:[{type:t.Input}],items:[{type:t.Input}],idField:[{type:t.Input}],textField:[{type:t.Input}],allowParentSelection:[{type:t.Input}],restructureWhenChildSameName:[{type:t.Input}],childrenField:[{type:t.Input}],multiple:[{type:t.Input}],filterCaseSensitive:[{type:t.Input}],expandMode:[{type:t.Input}],maxVisibleItemCount:[{type:t.Input}]},e}(),d=function(){function e(){}return e.prototype.transform=function(e){return e.filter(function(e){return e.matchFilter})},e.decorators=[{type:t.Pipe,args:[{name:"itemPipe"}]}],e.ctorParameters=function(){return[]},e}(),f=function(){function e(e){this.platformId=e}return e.prototype.ngOnInit=function(){var e=this;o.isPlatformBrowser(this.platformId)&&setTimeout(function(){document.addEventListener("click",e.offClickHandler)},0)},e.prototype.ngOnDestroy=function(){o.isPlatformBrowser(this.platformId)&&document.removeEventListener("click",this.offClickHandler)},e.decorators=[{type:t.Directive,args:[{selector:"[off-click]"}]}],e.ctorParameters=function(){return[{type:void 0,decorators:[{type:t.Inject,args:[t.PLATFORM_ID]}]}]},e.propDecorators={offClickHandler:[{type:t.Input,args:["off-click"]}]},e}(),m=function(){function e(e){this.svc=e}return Object.defineProperty(e.prototype,"isOpen",{get:function(){return this.item.isOpen},enumerable:!0,configurable:!0}),e.prototype.toggleOpen=function(e){e.stopPropagation(),this.haveChildren?this.item.isOpen=!this.item.isOpen:this.select(e)},Object.defineProperty(e.prototype,"allowParentSelection",{get:function(){return this.svc.Configuration.allowParentSelection},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"restructureWhenChildSameName",{get:function(){return this.svc.Configuration.restructureWhenChildSameName},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"needCheckBox",{get:function(){return this.svc.Configuration.isHierarchy()&&this.svc.Configuration.allowMultiple},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"haveChildren",{get:function(){return this.restructureWhenChildSameName&&this.item&&this.item.children&&1===this.item.children.length&&this.item.text===this.item.children[0].text&&(this.item=this.item.children[0]),this.item&&this.item.children&&this.item.children.length>0},enumerable:!0,configurable:!0}),e.prototype.select=function(e){e.stopPropagation(),(this.svc.Configuration.allowMultiple||!this.haveChildren||this.svc.Configuration.allowParentSelection)&&this.svc.toggleItemSelection(this.item),this.onTouchedCallBack()},Object.defineProperty(e.prototype,"filter",{get:function(){return this.svc.Configuration.filter},enumerable:!0,configurable:!0}),e.decorators=[{type:t.Component,args:[{selector:"tree-select-item",template:'<div class=\'item\' (click)="select($event)"> <div class="item" [class.active]="item.selected && !needCheckBox"> <a href="javascript:void(0)" (click)="toggleOpen($event)"> <span> <i class="fa" [class.fa-plus-square-o]="haveChildren && !isOpen" [class.fa-minus-square-o]="haveChildren && isOpen"></i> </span> <i class="fa" *ngIf="needCheckBox" [class.fa-check-square-o]="item.checked === true" [class.fa-square-o]="item.checked === false" [class.fa-square]="item.checked === null" (click)="select($event)"></i> <span *ngIf="allowParentSelection" (click)="select($event)"> {{item.text}}</span> <span *ngIf="!allowParentSelection"> {{item.text}}</span> </a> </div> <ul *ngIf="haveChildren && isOpen" class="ui-select-choices" role="menu"> <li *ngFor="let o of item.children | itemPipe:filter" role="menuitem"> <tree-select-item [item]="o" [onTouchedCallBack]="onTouchedCallBack"></tree-select-item> </li> </ul> </div> ',styles:[".item { color: #333; } .item ul { list-style-type: none; } .item > a { clear: both; color: inherit; display: block; font-weight: 400; line-height: 1.42857143; padding: 3px 20px; padding-left: 10px; text-decoration: none; white-space: nowrap; } .item > a:hover { background-color: #357ebd; color: #fff; outline: 0; text-decoration: none; } .item.active { background-color: #428bca; color: #fff; outline: 0; text-decoration: none; } "]}]}],e.ctorParameters=function(){return[{type:a}]},e.propDecorators={onTouchedCallBack:[{type:t.Input}],item:[{type:t.Input}]},e}(),g=function(){function e(){}return e.forRoot=function(t){return{ngModule:e,providers:[{provide:s,useValue:t}]}},e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,i.FormsModule],declarations:[h,m,f,d],exports:[h]}]}],e.ctorParameters=function(){return[]},e}();e.TreeSelectDefaultOptions=s,e.TreeSelectComponent=h,e.ItemPipe=d,e.NgxTreeSelectModule=g,e.ExpandMode=r,e.ɵc=m,e.ɵa=p,e.ɵd=f,e.ɵb=a,Object.defineProperty(e,"__esModule",{value:!0})});