@progress/kendo-angular-listbox 1.0.0 → 1.0.2-dev.202205250737

package/bundles/kendo-angular-listbox.umd.js

@@ -2,4 +2,4 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("rxjs"),require("@progress/kendo-common"),require("@angular/common"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common")):"function"==typeof define&&define.amd?define("KendoAngularListbox",["exports","@angular/core","@progress/kendo-licensing","rxjs","@progress/kendo-common","@angular/common","@progress/kendo-angular-buttons","@progress/kendo-angular-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularListbox={},e.ng.core,e.KendoLicensing,e.rxjs,e.KendoCommon,e.ng.common,e.KendoAngularButtons,e.KendoAngularCommon)}(this,function(e,i,s,r,o,t,n,l){"use strict";function a(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o)}var c=a(i),d=a(t),p=a(n),m={name:"@progress/kendo-angular-listbox",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1650457999,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},u=(g.prototype.select=function(e){this.selectedIndex=e,this.onSelect.next({index:this.selectedIndex})},g.prototype.isSelected=function(e){return e===this.selectedIndex},g.prototype.clearSelection=function(){this.selectedIndex=null},g);function g(){this.onSelect=new i.EventEmitter,this.selectedIndex=null}u.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,deps:[],target:c.ɵɵFactoryTarget.Injectable}),u.ɵprov=c.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,decorators:[{type:i.Injectable}]});function f(e,t){return I(e)?I(t)&&I(n=e)&&"object"==typeof n?o.getter(t)(e):e:null;var n}function b(){return!1}var h=function(e){this.templateRef=e},y=(h.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,deps:[{token:c.TemplateRef}],target:c.ɵɵFactoryTarget.Directive}),h.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"[kendoListBoxItemTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxItemTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef}]}}),"right"),v=[{name:"moveUp",label:"Move Up",icon:"arrow-n"},{name:"moveDown",label:"Move Down",icon:"arrow-s"},{name:"transferTo",label:"Transfer From",icon:"arrow-w"},{name:"transferFrom",label:"Transfer To",icon:"arrow-e"},{name:"transferAllTo",label:"Transfer All To",icon:"arrow-double-60-right"},{name:"transferAllFrom",label:"Transfer All From",icon:"arrow-double-60-left"},{name:"remove",label:"Remove",icon:"x"}],x={small:"sm",medium:"md",large:"lg"},k={left:"k-listbox-toolbar-left",right:"k-listbox-toolbar-right",top:"k-listbox-toolbar-top",bottom:"k-listbox-toolbar-bottom"},I=function(e){return null!=e},C=(Object.defineProperty(D.prototype,"selectedClassName",{get:function(){return this.selectionService.isSelected(this.index)},enumerable:!1,configurable:!0}),D.prototype.onClick=function(e){e.stopPropagation(),this.selectionService.select(this.index)},D);function D(e){this.selectionService=e}C.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,deps:[{token:u}],target:c.ɵɵFactoryTarget.Directive}),C.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"[kendoListBoxItemSelectable]",inputs:{index:"index"},host:{listeners:{click:"onClick($event)"},properties:{"class.k-selected":"this.selectedClassName"}},ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxItemSelectable]"}]}],ctorParameters:function(){return[{type:u}]},propDecorators:{index:[{type:i.Input}],selectedClassName:[{type:i.HostBinding,args:["class.k-selected"]}],onClick:[{type:i.HostListener,args:["click",["$event"]]}]}});Object.defineProperty(B.prototype,"toolbar",{set:function(e){var t=y;"boolean"==typeof e?this.selectedTools=e?v:[]:(this.selectedTools=e.tools?e.tools.map(function(t){return v.find(function(e){return e.name===t})}):v,e.position&&(t=e.position)),this.setToolbarClass(t)},enumerable:!1,configurable:!0}),Object.defineProperty(B.prototype,"listClasses",{get:function(){return"k-list k-list-"+x[this.size]},enumerable:!1,configurable:!0}),B.prototype.ngOnDestroy=function(){this.sub.unsubscribe()},B.prototype.performAction=function(e){this.actionClick.next(e)},B.prototype.selectItem=function(e){this.selectionService.selectedIndex=e},B.prototype.clearSelection=function(){this.selectionService.clearSelection()},Object.defineProperty(B.prototype,"selectedIndex",{get:function(){return this.selectionService.selectedIndex},enumerable:!1,configurable:!0}),B.prototype.getText=function(e){if("string"!=typeof e&&!this.textField&&i.isDevMode())throw new Error("Missing textField input. When passing an array of objects as data, please set the textField input of the ListBox accordingly.");return f(e,this.textField)},B.prototype.setToolbarClass=function(t){var n=this;Object.keys(k).forEach(function(e){t===e?n.renderer.addClass(n.hostElement.nativeElement,k[e]):n.renderer.removeClass(n.hostElement.nativeElement,k[e])})};var T=B;function B(e,t,n){var o=this;this.selectionService=e,this.renderer=t,this.hostElement=n,this.listboxClassName=!0,this.data=[],this.size="medium",this.itemDisabled=b,this.selectionChange=new i.EventEmitter,this.actionClick=new i.EventEmitter,this.selectedTools=v,this.sub=new r.Subscription,s.validatePackage(m),this.setToolbarClass(y),this.sub.add(this.selectionService.onSelect.subscribe(function(e){o.selectionChange.next(e)}))}T.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:T,deps:[{token:u},{token:c.Renderer2},{token:c.ElementRef}],target:c.ɵɵFactoryTarget.Component}),T.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:T,selector:"kendo-listbox",inputs:{textField:"textField",data:"data",size:"size",toolbar:"toolbar",itemDisabled:"itemDisabled"},outputs:{selectionChange:"selectionChange",actionClick:"actionClick"},host:{properties:{"class.k-listbox":"this.listboxClassName"}},providers:[u],queries:[{propertyName:"itemTemplate",first:!0,predicate:h,descendants:!0}],ngImport:c,template:'\n            <div class="k-listbox-toolbar" *ngIf="selectedTools.length > 0">\n                <ul class="k-reset">\n                    <li *ngFor="let tool of selectedTools">\n                        <button kendoButton [icon]="tool.icon" (click)="performAction(tool.name)"></button>\n                    </li>\n\n                    \x3c!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ --\x3e\n                </ul>\n            </div>\n            <div class="k-list-scroller k-selectable">\n                <div class="{{ listClasses }}">\n                    <div class="k-list-content">\n                        <ul class="k-list-ul">\n                            <li\n                                class="k-list-item"\n                                *ngFor="let item of data; let i = index;"\n                                kendoListBoxItemSelectable\n                                [index]="i"\n                                [class.k-disabled]="itemDisabled(item)"\n                            >\n                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"\n                                    [templateContext]="{\n                                        templateRef: itemTemplate.templateRef,\n                                        $implicit: item\n                                    }">\n                                </ng-template>\n                                <ng-template #defaultItemTemplate>\n                                    <span class="k-list-item-text">{{ getText(item) }}</span>\n                                </ng-template>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n    ',isInline:!0,directives:[{type:d.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:d.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:p.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:C,selector:"[kendoListBoxItemSelectable]",inputs:["index"]},{type:p.TemplateContextDirective,selector:"[templateContext]",inputs:["templateContext"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:T,decorators:[{type:i.Component,args:[{selector:"kendo-listbox",providers:[u],template:'\n            <div class="k-listbox-toolbar" *ngIf="selectedTools.length > 0">\n                <ul class="k-reset">\n                    <li *ngFor="let tool of selectedTools">\n                        <button kendoButton [icon]="tool.icon" (click)="performAction(tool.name)"></button>\n                    </li>\n\n                    \x3c!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ --\x3e\n                </ul>\n            </div>\n            <div class="k-list-scroller k-selectable">\n                <div class="{{ listClasses }}">\n                    <div class="k-list-content">\n                        <ul class="k-list-ul">\n                            <li\n                                class="k-list-item"\n                                *ngFor="let item of data; let i = index;"\n                                kendoListBoxItemSelectable\n                                [index]="i"\n                                [class.k-disabled]="itemDisabled(item)"\n                            >\n                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"\n                                    [templateContext]="{\n                                        templateRef: itemTemplate.templateRef,\n                                        $implicit: item\n                                    }">\n                                </ng-template>\n                                <ng-template #defaultItemTemplate>\n                                    <span class="k-list-item-text">{{ getText(item) }}</span>\n                                </ng-template>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n    '}]}],ctorParameters:function(){return[{type:u},{type:c.Renderer2},{type:c.ElementRef}]},propDecorators:{listboxClassName:[{type:i.HostBinding,args:["class.k-listbox"]}],itemTemplate:[{type:i.ContentChild,args:[h,{static:!1}]}],textField:[{type:i.Input}],data:[{type:i.Input}],size:[{type:i.Input}],toolbar:[{type:i.Input}],itemDisabled:[{type:i.Input}],selectionChange:[{type:i.Output}],actionClick:[{type:i.Output}]}});Object.create;function F(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,i,s=n.call(e),r=[];try{for(;(void 0===t||0<t--)&&!(o=s.next()).done;)r.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(n=s.return)&&n.call(s)}finally{if(i)throw i.error}}return r}Object.create;w.prototype.ngOnChanges=function(e){var t=this;l.isChanged("connectedWith",e,!1)&&(this.sub.add(this.listbox.selectionChange.subscribe(function(){t.selectedBox=t.listbox,t.connectedWith.clearSelection()})),this.sub.add(this.connectedWith.selectionChange.subscribe(function(){t.selectedBox=t.connectedWith,t.listbox.clearSelection()}))),l.isChanged("data",e,!0)&&(this.listbox.data=e.data.currentValue)},w.prototype.ngOnDestroy=function(){this.sub.unsubscribe()},w.prototype.moveVertically=function(e){var t,n=this.selectedBox.selectedIndex;I(n)&&(t="down"===e&&n>=this.selectedBox.data.length-1,"up"===e&&n<=0||t||(e=F([this.selectedBox.data[n],this.selectedBox.data[t="up"===e?n-1:n+1]],2),this.selectedBox.data[t]=e[0],this.selectedBox.data[n]=e[1],this.selectedBox.selectionService.select(t)))},w.prototype.removeItem=function(){var e=this.selectedBox.selectedIndex;I(e)&&(this.selectedBox.data.splice(e,1),this.selectedBox.selectionService.clearSelection())},w.prototype.transferItem=function(e,t){var n=e&&e.data[e.selectedIndex];n&&t&&e&&(t.data.push(n),e.data.splice(e.selectedIndex,1),e.clearSelection(),t.selectItem(t.data.length-1),this.selectedBox=t)},w.prototype.transferAll=function(e,t){var n;t&&e&&((n=t.data).splice.apply(n,function(e,t,n){if(n||2===arguments.length)for(var o,i=0,s=t.length;i<s;i++)!o&&i in t||((o=o||Array.prototype.slice.call(t,0,i))[i]=t[i]);return e.concat(o||Array.prototype.slice.call(t))}([t.data.length,0],F(e.data.splice(0,e.data.length)))),t.selectItem(t.data.length-1),this.selectedBox=t)};d=w;function w(e){var t=this;this.listbox=e,this.data=[],this.sub=new r.Subscription,this.selectedBox=this.listbox,this.sub.add(this.listbox.actionClick.subscribe(function(e){switch(e){case"moveUp":t.moveVertically("up");break;case"moveDown":t.moveVertically("down");break;case"transferTo":t.transferItem(t.connectedWith,t.listbox);break;case"transferFrom":t.transferItem(t.listbox,t.connectedWith);break;case"transferAllTo":t.transferAll(t.listbox,t.connectedWith);break;case"transferAllFrom":t.transferAll(t.connectedWith,t.listbox);break;case"remove":t.removeItem()}}))}d.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,deps:[{token:T}],target:c.ɵɵFactoryTarget.Directive}),d.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:d,selector:"[kendoListBoxDataBinding]",inputs:{data:["kendoListBoxDataBinding","data"],connectedWith:"connectedWith"},usesOnChanges:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxDataBinding]"}]}],ctorParameters:function(){return[{type:T}]},propDecorators:{data:[{type:i.Input,args:["kendoListBoxDataBinding"]}],connectedWith:[{type:i.Input}]}});p=function(){};p.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,deps:[],target:c.ɵɵFactoryTarget.NgModule}),p.ɵmod=c.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,declarations:[T,h,C,d],imports:[n.ButtonsModule,t.CommonModule],exports:[T,h,C,d]}),p.ɵinj=c.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,imports:[[n.ButtonsModule,t.CommonModule]]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,decorators:[{type:i.NgModule,args:[{imports:[n.ButtonsModule,t.CommonModule],declarations:[T,h,C,d],exports:[T,h,C,d]}]}]}),e.DataBindingDirective=d,e.ItemSelectableDirective=C,e.ItemTemplateDirective=h,e.ListBoxComponent=T,e.ListBoxModule=p,Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@progress/kendo-licensing"),require("rxjs"),require("@progress/kendo-common"),require("@angular/common"),require("@progress/kendo-angular-buttons"),require("@progress/kendo-angular-common")):"function"==typeof define&&define.amd?define("KendoAngularListbox",["exports","@angular/core","@progress/kendo-licensing","rxjs","@progress/kendo-common","@angular/common","@progress/kendo-angular-buttons","@progress/kendo-angular-common"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoAngularListbox={},e.ng.core,e.KendoLicensing,e.rxjs,e.KendoCommon,e.ng.common,e.KendoAngularButtons,e.KendoAngularCommon)}(this,function(e,i,s,r,o,t,n,l){"use strict";function a(n){if(n&&n.__esModule)return n;var o=Object.create(null);return n&&Object.keys(n).forEach(function(e){var t;"default"!==e&&(t=Object.getOwnPropertyDescriptor(n,e),Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:function(){return n[e]}}))}),o.default=n,Object.freeze(o)}var c=a(i),d=a(t),p=a(n),m={name:"@progress/kendo-angular-listbox",productName:"Kendo UI for Angular",productCodes:["KENDOUIANGULAR","KENDOUICOMPLETE"],publishDate:1653464246,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning"},u=(g.prototype.select=function(e){this.selectedIndex=e,this.onSelect.next({index:this.selectedIndex})},g.prototype.isSelected=function(e){return e===this.selectedIndex},g.prototype.clearSelection=function(){this.selectedIndex=null},g);function g(){this.onSelect=new i.EventEmitter,this.selectedIndex=null}u.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,deps:[],target:c.ɵɵFactoryTarget.Injectable}),u.ɵprov=c.ɵɵngDeclareInjectable({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:u,decorators:[{type:i.Injectable}]});function b(e,t){return I(e)?I(t)&&I(n=e)&&"object"==typeof n?o.getter(t)(e):e:null;var n}function f(){return!1}var h=function(e){this.templateRef=e},y=(h.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,deps:[{token:c.TemplateRef}],target:c.ɵɵFactoryTarget.Directive}),h.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:h,selector:"[kendoListBoxItemTemplate]",ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:h,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxItemTemplate]"}]}],ctorParameters:function(){return[{type:c.TemplateRef}]}}),"right"),x=[{name:"moveUp",label:"Move Up",icon:"arrow-n"},{name:"moveDown",label:"Move Down",icon:"arrow-s"},{name:"transferTo",label:"Transfer From",icon:"arrow-w"},{name:"transferFrom",label:"Transfer To",icon:"arrow-e"},{name:"transferAllTo",label:"Transfer All To",icon:"arrow-double-60-right"},{name:"transferAllFrom",label:"Transfer All From",icon:"arrow-double-60-left"},{name:"remove",label:"Remove",icon:"x"}],v={small:"sm",medium:"md",large:"lg"},k={left:"k-listbox-toolbar-left",right:"k-listbox-toolbar-right",top:"k-listbox-toolbar-top",bottom:"k-listbox-toolbar-bottom"},I=function(e){return null!=e},C=(Object.defineProperty(D.prototype,"selectedClassName",{get:function(){return this.selectionService.isSelected(this.index)},enumerable:!1,configurable:!0}),D.prototype.onClick=function(e){e.stopPropagation(),this.selectionService.select(this.index)},D);function D(e){this.selectionService=e}C.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,deps:[{token:u}],target:c.ɵɵFactoryTarget.Directive}),C.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:C,selector:"[kendoListBoxItemSelectable]",inputs:{index:"index"},host:{listeners:{click:"onClick($event)"},properties:{"class.k-selected":"this.selectedClassName"}},ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:C,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxItemSelectable]"}]}],ctorParameters:function(){return[{type:u}]},propDecorators:{index:[{type:i.Input}],selectedClassName:[{type:i.HostBinding,args:["class.k-selected"]}],onClick:[{type:i.HostListener,args:["click",["$event"]]}]}});Object.defineProperty(T.prototype,"toolbar",{set:function(e){var t=y;"boolean"==typeof e?this.selectedTools=e?x:[]:(this.selectedTools=e.tools?e.tools.map(function(t){return x.find(function(e){return e.name===t})}):x,e.position&&(t=e.position)),this.setToolbarClass(t)},enumerable:!1,configurable:!0}),Object.defineProperty(T.prototype,"listClasses",{get:function(){return"k-list k-list-"+v[this.size]},enumerable:!1,configurable:!0}),T.prototype.ngOnDestroy=function(){this.sub.unsubscribe()},T.prototype.performAction=function(e){this.actionClick.next(e)},T.prototype.selectItem=function(e){this.selectionService.selectedIndex=e},T.prototype.clearSelection=function(){this.selectionService.clearSelection()},Object.defineProperty(T.prototype,"selectedIndex",{get:function(){return this.selectionService.selectedIndex},enumerable:!1,configurable:!0}),T.prototype.getText=function(e){if("string"!=typeof e&&!this.textField&&i.isDevMode())throw new Error("Missing textField input. When passing an array of objects as data, please set the textField input of the ListBox accordingly.");return b(e,this.textField)},T.prototype.setToolbarClass=function(t){var n=this;Object.keys(k).forEach(function(e){t===e?n.renderer.addClass(n.hostElement.nativeElement,k[e]):n.renderer.removeClass(n.hostElement.nativeElement,k[e])})};var B=T;function T(e,t,n){var o=this;this.selectionService=e,this.renderer=t,this.hostElement=n,this.listboxClassName=!0,this.data=[],this.size="medium",this.itemDisabled=f,this.selectionChange=new i.EventEmitter,this.actionClick=new i.EventEmitter,this.selectedTools=x,this.sub=new r.Subscription,s.validatePackage(m),this.setToolbarClass(y),this.sub.add(this.selectionService.onSelect.subscribe(function(e){o.selectionChange.next(e)}))}B.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:B,deps:[{token:u},{token:c.Renderer2},{token:c.ElementRef}],target:c.ɵɵFactoryTarget.Component}),B.ɵcmp=c.ɵɵngDeclareComponent({minVersion:"12.0.0",version:"12.2.16",type:B,selector:"kendo-listbox",inputs:{textField:"textField",data:"data",size:"size",toolbar:"toolbar",itemDisabled:"itemDisabled"},outputs:{selectionChange:"selectionChange",actionClick:"actionClick"},host:{properties:{"class.k-listbox":"this.listboxClassName"}},providers:[u],queries:[{propertyName:"itemTemplate",first:!0,predicate:h,descendants:!0}],ngImport:c,template:'\n            <div class="k-listbox-toolbar" *ngIf="selectedTools.length > 0">\n                <ul class="k-reset">\n                    <li *ngFor="let tool of selectedTools">\n                        <button kendoButton [icon]="tool.icon" (click)="performAction(tool.name)"></button>\n                    </li>\n\n                    \x3c!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ --\x3e\n                </ul>\n            </div>\n            <div class="k-list-scroller k-selectable">\n                <div class="{{ listClasses }}">\n                    <div class="k-list-content">\n                        <ul class="k-list-ul">\n                            <li\n                                class="k-list-item"\n                                *ngFor="let item of data; let i = index;"\n                                kendoListBoxItemSelectable\n                                [index]="i"\n                                [class.k-disabled]="itemDisabled(item)"\n                            >\n                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"\n                                    [templateContext]="{\n                                        templateRef: itemTemplate.templateRef,\n                                        $implicit: item\n                                    }">\n                                </ng-template>\n                                <ng-template #defaultItemTemplate>\n                                    <span class="k-list-item-text">{{ getText(item) }}</span>\n                                </ng-template>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n    ',isInline:!0,directives:[{type:d.NgIf,selector:"[ngIf]",inputs:["ngIf","ngIfThen","ngIfElse"]},{type:d.NgForOf,selector:"[ngFor][ngForOf]",inputs:["ngForOf","ngForTrackBy","ngForTemplate"]},{type:p.ButtonDirective,selector:"button[kendoButton], span[kendoButton]",inputs:["toggleable","togglable","selected","tabIndex","icon","iconClass","imageUrl","disabled","size","rounded","fillMode","themeColor","role","primary","look"],outputs:["selectedChange","click"],exportAs:["kendoButton"]},{type:C,selector:"[kendoListBoxItemSelectable]",inputs:["index"]},{type:p.TemplateContextDirective,selector:"[templateContext]",inputs:["templateContext"]}]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:B,decorators:[{type:i.Component,args:[{selector:"kendo-listbox",providers:[u],template:'\n            <div class="k-listbox-toolbar" *ngIf="selectedTools.length > 0">\n                <ul class="k-reset">\n                    <li *ngFor="let tool of selectedTools">\n                        <button kendoButton [icon]="tool.icon" (click)="performAction(tool.name)"></button>\n                    </li>\n\n                    \x3c!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ --\x3e\n                </ul>\n            </div>\n            <div class="k-list-scroller k-selectable">\n                <div class="{{ listClasses }}">\n                    <div class="k-list-content">\n                        <ul class="k-list-ul">\n                            <li\n                                class="k-list-item"\n                                *ngFor="let item of data; let i = index;"\n                                kendoListBoxItemSelectable\n                                [index]="i"\n                                [class.k-disabled]="itemDisabled(item)"\n                            >\n                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"\n                                    [templateContext]="{\n                                        templateRef: itemTemplate.templateRef,\n                                        $implicit: item\n                                    }">\n                                </ng-template>\n                                <ng-template #defaultItemTemplate>\n                                    <span class="k-list-item-text">{{ getText(item) }}</span>\n                                </ng-template>\n                            </li>\n                        </ul>\n                    </div>\n                </div>\n            </div>\n    '}]}],ctorParameters:function(){return[{type:u},{type:c.Renderer2},{type:c.ElementRef}]},propDecorators:{listboxClassName:[{type:i.HostBinding,args:["class.k-listbox"]}],itemTemplate:[{type:i.ContentChild,args:[h,{static:!1}]}],textField:[{type:i.Input}],data:[{type:i.Input}],size:[{type:i.Input}],toolbar:[{type:i.Input}],itemDisabled:[{type:i.Input}],selectionChange:[{type:i.Output}],actionClick:[{type:i.Output}]}});Object.create;function S(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,i,s=n.call(e),r=[];try{for(;(void 0===t||0<t--)&&!(o=s.next()).done;)r.push(o.value)}catch(e){i={error:e}}finally{try{o&&!o.done&&(n=s.return)&&n.call(s)}finally{if(i)throw i.error}}return r}Object.create;F.prototype.ngOnChanges=function(e){var t=this;l.isChanged("connectedWith",e,!1)&&(e.connectedWith.firstChange||(this.selectedBoxSub.unsubscribe(),this.selectedBoxSub=new r.Subscription),this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(function(){t.selectedBox=t.listbox,t.connectedWith.clearSelection()})),this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(function(){t.selectedBox=t.connectedWith,t.listbox.clearSelection()})))},F.prototype.ngOnDestroy=function(){this.actionClickSub&&(this.actionClickSub.unsubscribe(),this.actionClickSub=null),this.selectedBoxSub&&(this.selectedBoxSub.unsubscribe(),this.selectedBoxSub=null)},F.prototype.moveVertically=function(e){var t,n=this.selectedBox.selectedIndex;I(n)&&(t="down"===e&&n>=this.selectedBox.data.length-1,"up"===e&&n<=0||t||(e=S([this.selectedBox.data[n],this.selectedBox.data[t="up"===e?n-1:n+1]],2),this.selectedBox.data[t]=e[0],this.selectedBox.data[n]=e[1],this.selectedBox.selectionService.select(t)))},F.prototype.removeItem=function(){var e=this.selectedBox.selectedIndex;I(e)&&(this.selectedBox.data.splice(e,1),this.selectedBox.selectionService.clearSelection())},F.prototype.transferItem=function(e,t){var n=e&&e.data[e.selectedIndex];n&&t&&e&&(t.data.push(n),e.data.splice(e.selectedIndex,1),e.clearSelection(),t.selectItem(t.data.length-1),this.selectedBox=t)},F.prototype.transferAll=function(e,t){var n;t&&e&&((n=t.data).splice.apply(n,function(e,t,n){if(n||2===arguments.length)for(var o,i=0,s=t.length;i<s;i++)!o&&i in t||((o=o||Array.prototype.slice.call(t,0,i))[i]=t[i]);return e.concat(o||Array.prototype.slice.call(t))}([t.data.length,0],S(e.data.splice(0,e.data.length)))),t.selectItem(t.data.length-1),this.selectedBox=t)};d=F;function F(e){var t=this;this.listbox=e,this.actionClickSub=new r.Subscription,this.selectedBoxSub=new r.Subscription,this.selectedBox=this.listbox,this.actionClickSub.add(this.listbox.actionClick.subscribe(function(e){switch(e){case"moveUp":t.moveVertically("up");break;case"moveDown":t.moveVertically("down");break;case"transferTo":t.transferItem(t.connectedWith,t.listbox);break;case"transferFrom":t.transferItem(t.listbox,t.connectedWith);break;case"transferAllTo":t.transferAll(t.listbox,t.connectedWith);break;case"transferAllFrom":t.transferAll(t.connectedWith,t.listbox);break;case"remove":t.removeItem()}}))}d.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,deps:[{token:B}],target:c.ɵɵFactoryTarget.Directive}),d.ɵdir=c.ɵɵngDeclareDirective({minVersion:"12.0.0",version:"12.2.16",type:d,selector:"[kendoListBoxDataBinding]",inputs:{connectedWith:"connectedWith"},usesOnChanges:!0,ngImport:c}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:d,decorators:[{type:i.Directive,args:[{selector:"[kendoListBoxDataBinding]"}]}],ctorParameters:function(){return[{type:B}]},propDecorators:{connectedWith:[{type:i.Input}]}});p=function(){};p.ɵfac=c.ɵɵngDeclareFactory({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,deps:[],target:c.ɵɵFactoryTarget.NgModule}),p.ɵmod=c.ɵɵngDeclareNgModule({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,declarations:[B,h,C,d],imports:[n.ButtonsModule,t.CommonModule],exports:[B,h,C,d]}),p.ɵinj=c.ɵɵngDeclareInjector({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,imports:[[n.ButtonsModule,t.CommonModule]]}),c.ɵɵngDeclareClassMetadata({minVersion:"12.0.0",version:"12.2.16",ngImport:c,type:p,decorators:[{type:i.NgModule,args:[{imports:[n.ButtonsModule,t.CommonModule],declarations:[B,h,C,d],exports:[B,h,C,d]}]}]}),e.DataBindingDirective=d,e.ItemSelectableDirective=C,e.ItemTemplateDirective=h,e.ListBoxComponent=B,e.ListBoxModule=p,Object.defineProperty(e,"__esModule",{value:!0})});

package/data-binding.directive.d.ts

@@ -10,16 +10,13 @@ import * as i0 from "@angular/core";
  */
 export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private listbox;
-    /**
-     * @hidden
-     */
-    data: any[];
     /**
      * Specifies the ListBoxComponent instance with which the current ListBox should be connected.
      * When two listboxes are linked via this input, one can transfer items between them.
      */
     connectedWith: ListBoxComponent;
-    private sub;
+    private actionClickSub;
+    private selectedBoxSub;
     private selectedBox;
     constructor(listbox: ListBoxComponent);
     /**
@@ -35,5 +32,5 @@ export declare class DataBindingDirective implements OnChanges, OnDestroy {
     private transferItem;
     private transferAll;
     static ɵfac: i0.ɵɵFactoryDeclaration<DataBindingDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "data": "kendoListBoxDataBinding"; "connectedWith": "connectedWith"; }, {}, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<DataBindingDirective, "[kendoListBoxDataBinding]", never, { "connectedWith": "connectedWith"; }, {}, never>;
 }

package/esm2015/data-binding.directive.js

@@ -14,13 +14,10 @@ import * as i1 from "./listbox.component";
 export class DataBindingDirective {
     constructor(listbox) {
         this.listbox = listbox;
-        /**
-         * @hidden
-         */
-        this.data = [];
-        this.sub = new Subscription();
+        this.actionClickSub = new Subscription();
+        this.selectedBoxSub = new Subscription();
         this.selectedBox = this.listbox;
-        this.sub.add(this.listbox.actionClick.subscribe((actionName) => {
+        this.actionClickSub.add(this.listbox.actionClick.subscribe((actionName) => {
             switch (actionName) {
                 case 'moveUp': {
                     this.moveVertically('up');
@@ -61,24 +58,32 @@ export class DataBindingDirective {
      */
     ngOnChanges(changes) {
         if (isChanged('connectedWith', changes, false)) {
-            this.sub.add(this.listbox.selectionChange.subscribe(() => {
+            if (!changes.connectedWith.firstChange) {
+                this.selectedBoxSub.unsubscribe();
+                this.selectedBoxSub = new Subscription();
+            }
+            this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(() => {
                 this.selectedBox = this.listbox;
                 this.connectedWith.clearSelection();
             }));
-            this.sub.add(this.connectedWith.selectionChange.subscribe(() => {
+            this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(() => {
                 this.selectedBox = this.connectedWith;
                 this.listbox.clearSelection();
             }));
         }
-        if (isChanged('data', changes, true)) {
-            this.listbox.data = changes.data.currentValue;
-        }
     }
     /**
      * @hidden
      */
     ngOnDestroy() {
-        this.sub.unsubscribe();
+        if (this.actionClickSub) {
+            this.actionClickSub.unsubscribe();
+            this.actionClickSub = null;
+        }
+        if (this.selectedBoxSub) {
+            this.selectedBoxSub.unsubscribe();
+            this.selectedBoxSub = null;
+        }
     }
     moveVertically(dir) {
         const index = this.selectedBox.selectedIndex;
@@ -124,15 +129,12 @@ export class DataBindingDirective {
     }
 }
 DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { data: ["kendoListBoxDataBinding", "data"], connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxDataBinding]'
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ListBoxComponent }]; }, propDecorators: { data: [{
-                type: Input,
-                args: ['kendoListBoxDataBinding']
-            }], connectedWith: [{
+        }], ctorParameters: function () { return [{ type: i1.ListBoxComponent }]; }, propDecorators: { connectedWith: [{
                 type: Input
             }] } });

package/esm2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650457999,
+    publishDate: 1653464246,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };

package/fesm2015/kendo-angular-listbox.js

@@ -20,7 +20,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650457999,
+    publishDate: 1653464246,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -437,13 +437,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 class DataBindingDirective {
     constructor(listbox) {
         this.listbox = listbox;
-        /**
-         * @hidden
-         */
-        this.data = [];
-        this.sub = new Subscription();
+        this.actionClickSub = new Subscription();
+        this.selectedBoxSub = new Subscription();
         this.selectedBox = this.listbox;
-        this.sub.add(this.listbox.actionClick.subscribe((actionName) => {
+        this.actionClickSub.add(this.listbox.actionClick.subscribe((actionName) => {
             switch (actionName) {
                 case 'moveUp': {
                     this.moveVertically('up');
@@ -484,24 +481,32 @@ class DataBindingDirective {
      */
     ngOnChanges(changes) {
         if (isChanged('connectedWith', changes, false)) {
-            this.sub.add(this.listbox.selectionChange.subscribe(() => {
+            if (!changes.connectedWith.firstChange) {
+                this.selectedBoxSub.unsubscribe();
+                this.selectedBoxSub = new Subscription();
+            }
+            this.selectedBoxSub.add(this.listbox.selectionChange.subscribe(() => {
                 this.selectedBox = this.listbox;
                 this.connectedWith.clearSelection();
             }));
-            this.sub.add(this.connectedWith.selectionChange.subscribe(() => {
+            this.selectedBoxSub.add(this.connectedWith.selectionChange.subscribe(() => {
                 this.selectedBox = this.connectedWith;
                 this.listbox.clearSelection();
             }));
         }
-        if (isChanged('data', changes, true)) {
-            this.listbox.data = changes.data.currentValue;
-        }
     }
     /**
      * @hidden
      */
     ngOnDestroy() {
-        this.sub.unsubscribe();
+        if (this.actionClickSub) {
+            this.actionClickSub.unsubscribe();
+            this.actionClickSub = null;
+        }
+        if (this.selectedBoxSub) {
+            this.selectedBoxSub.unsubscribe();
+            this.selectedBoxSub = null;
+        }
     }
     moveVertically(dir) {
         const index = this.selectedBox.selectedIndex;
@@ -547,16 +552,13 @@ class DataBindingDirective {
     }
 }
 DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { data: ["kendoListBoxDataBinding", "data"], connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxDataBinding]'
                 }]
-        }], ctorParameters: function () { return [{ type: ListBoxComponent }]; }, propDecorators: { data: [{
-                type: Input,
-                args: ['kendoListBoxDataBinding']
-            }], connectedWith: [{
+        }], ctorParameters: function () { return [{ type: ListBoxComponent }]; }, propDecorators: { connectedWith: [{
                 type: Input
             }] } });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-listbox",
-  "version": "1.0.0",
+  "version": "1.0.2-dev.202205250737",
   "description": "Kendo UI for Angular ListBox",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -22,6 +22,7 @@
     "friendlyName": "ListBox"
   },
   "dependencies": {
+    "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-schematics": "^3.0.0",
     "tslib": "^2.3.1"
   },
@@ -32,7 +33,6 @@
     "@progress/kendo-angular-common": "^3.0.0",
     "@progress/kendo-angular-l10n": "^4.0.0",
     "@progress/kendo-angular-popup": "^5.0.0",
-    "@progress/kendo-common": "^0.2.2",
     "@progress/kendo-licensing": "^1.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },