@progress/kendo-angular-listbox 0.1.0

package/dist/es/listbox.module.js

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { NgModule } from '@angular/core';
+import { ListBoxComponent } from './listbox.component';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { CommonModule } from '@angular/common';
+import { ItemTemplateDirective } from './item-template.directive';
+import { ItemSelectableDirective } from './item-selectable.directive';
+import { DataBindingDirective } from './data-binding.directive';
+/**
+ * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
+ */
+var ListBoxModule = /** @class */ (function () {
+    function ListBoxModule() {
+    }
+    ListBoxModule = tslib_1.__decorate([
+        NgModule({
+            imports: [ButtonsModule, CommonModule],
+            declarations: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective],
+            exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective]
+        })
+    ], ListBoxModule);
+    return ListBoxModule;
+}());
+export { ListBoxModule };

package/dist/es/main.js

@@ -0,0 +1,7 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+export { ListBoxComponent } from './listbox.component';
+export { DataBindingDirective } from './data-binding.directive';
+export { ListBoxModule } from './listbox.module';

package/dist/es/package-metadata.js

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export var packageMetadata = {
+    name: '@progress/kendo-angular-listbox',
+    productName: 'Kendo UI for Angular',
+    productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
+    publishDate: 1649835747,
+    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/dist/es/selection.service.js

@@ -0,0 +1,30 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { EventEmitter, Injectable } from "@angular/core";
+/**
+ * @hidden
+ */
+var ListBoxSelectionService = /** @class */ (function () {
+    function ListBoxSelectionService() {
+        this.onSelect = new EventEmitter();
+        this.selectedIndex = null;
+    }
+    ListBoxSelectionService.prototype.select = function (index) {
+        this.selectedIndex = index;
+        this.onSelect.next({ index: this.selectedIndex });
+    };
+    ListBoxSelectionService.prototype.isSelected = function (index) {
+        return index === this.selectedIndex;
+    };
+    ListBoxSelectionService.prototype.clearSelection = function () {
+        this.selectedIndex = null;
+    };
+    ListBoxSelectionService = tslib_1.__decorate([
+        Injectable()
+    ], ListBoxSelectionService);
+    return ListBoxSelectionService;
+}());
+export { ListBoxSelectionService };

package/dist/es/size.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/toolbar.js

@@ -0,0 +1,4 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/

package/dist/es/util.js

@@ -0,0 +1,38 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { getter } from '@progress/kendo-common';
+import { allTools } from './constants';
+/**
+ * @hidden
+ */
+export var isPresent = function (value) { return value !== null && value !== undefined; };
+/**
+ * @hidden
+ */
+export var isObject = function (value) { return isPresent(value) && typeof value === 'object'; };
+/**
+ * @hidden
+ */
+export var fieldAccessor = function (dataItem, field) {
+    if (!isPresent(dataItem)) {
+        return null;
+    }
+    if (!isPresent(field) || !isObject(dataItem)) {
+        return dataItem;
+    }
+    // creates a field accessor supporting nested fields processing
+    var valueFrom = getter(field);
+    return valueFrom(dataItem);
+};
+/**
+ * @hidden
+ */
+export var defaultItemDisabled = function () { return false; };
+/**
+ * @hidden
+ */
+export var getTools = function (names) {
+    return names.map(function (tool) { return allTools.find(function (meta) { return meta.name === tool; }); });
+};

package/dist/es2015/constants.d.ts

@@ -0,0 +1,25 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ListBoxToolbarPosition, Tool } from "./toolbar";
+/**
+ * @hidden
+ */
+export declare const DEFAULT_TOOLBAR_POSITION: ListBoxToolbarPosition;
+/**
+ * @hidden
+ */
+export declare const allTools: Tool[];
+/**
+ * @hidden
+ */
+export declare const sizeClassMap: {
+    [key: string]: string;
+};
+/**
+ * @hidden
+ */
+export declare const toolbarClasses: {
+    [key: string]: string;
+};

package/dist/es2015/constants.js

@@ -0,0 +1,65 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * @hidden
+ */
+export const DEFAULT_TOOLBAR_POSITION = 'right';
+/**
+ * @hidden
+ */
+export const allTools = [
+    {
+        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'
+    }
+];
+/**
+ * @hidden
+ */
+export const sizeClassMap = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ */
+export const toolbarClasses = {
+    left: 'k-listbox-toolbar-left',
+    right: 'k-listbox-toolbar-right',
+    top: 'k-listbox-toolbar-top',
+    bottom: 'k-listbox-toolbar-bottom'
+};

package/dist/es2015/data-binding.directive.d.ts

@@ -0,0 +1,36 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ListBoxComponent } from './listbox.component';
+/**
+ * A directive which manages the functoinality of the ListBox tools out of the box, and modifies the provided data accordingly.
+ */
+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 selectedBox;
+    constructor(listbox: ListBoxComponent);
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * @hidden
+     */
+    ngOnDestroy(): void;
+    private moveVertically;
+    private removeItem;
+    private transferItem;
+    private transferAll;
+}

package/dist/es2015/data-binding.directive.js

@@ -0,0 +1,140 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Input } from '@angular/core';
+import { isChanged } from '@progress/kendo-angular-common';
+import { Subscription } from 'rxjs';
+import { ListBoxComponent } from './listbox.component';
+import { isPresent } from './util';
+/**
+ * A directive which manages the functoinality of the ListBox tools out of the box, and modifies the provided data accordingly.
+ */
+let DataBindingDirective = class DataBindingDirective {
+    constructor(listbox) {
+        this.listbox = listbox;
+        /**
+         * @hidden
+         */
+        this.data = [];
+        this.sub = new Subscription();
+        this.selectedBox = this.listbox;
+        this.sub.add(this.listbox.actionClick.subscribe((actionName) => {
+            switch (actionName) {
+                case 'moveUp': {
+                    this.moveVertically('up');
+                    break;
+                }
+                case 'moveDown': {
+                    this.moveVertically('down');
+                    break;
+                }
+                case 'transferTo': {
+                    this.transferItem(this.connectedWith, this.listbox);
+                    break;
+                }
+                case 'transferFrom': {
+                    this.transferItem(this.listbox, this.connectedWith);
+                    break;
+                }
+                case 'transferAllTo': {
+                    this.transferAll(this.listbox, this.connectedWith);
+                    break;
+                }
+                case 'transferAllFrom': {
+                    this.transferAll(this.connectedWith, this.listbox);
+                    break;
+                }
+                case 'remove': {
+                    this.removeItem();
+                    break;
+                }
+                default: {
+                    break;
+                }
+            }
+        }));
+    }
+    /**
+     * @hidden
+     */
+    ngOnChanges(changes) {
+        if (isChanged('connectedWith', changes, false)) {
+            this.sub.add(this.listbox.selectionChange.subscribe(() => {
+                this.selectedBox = this.listbox;
+                this.connectedWith.clearSelection();
+            }));
+            this.sub.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();
+    }
+    moveVertically(dir) {
+        const index = this.selectedBox.selectedIndex;
+        if (!isPresent(index)) {
+            return;
+        }
+        const topReached = dir === 'up' && index <= 0;
+        const bottomReached = dir === 'down' && index >= this.selectedBox.data.length - 1;
+        if (topReached || bottomReached) {
+            return;
+        }
+        const newIndex = dir === 'up' ? index - 1 : index + 1;
+        // ES6 Destructuring swap
+        [this.selectedBox.data[newIndex], this.selectedBox.data[index]] = [this.selectedBox.data[index], this.selectedBox.data[newIndex]];
+        this.selectedBox.selectionService.select(newIndex);
+    }
+    removeItem() {
+        const index = this.selectedBox.selectedIndex;
+        if (!isPresent(index)) {
+            return;
+        }
+        this.selectedBox.data.splice(index, 1);
+        this.selectedBox.selectionService.clearSelection();
+    }
+    transferItem(source, target) {
+        const item = source && source.data[source.selectedIndex];
+        if (!item || !target || !source) {
+            return;
+        }
+        target.data.push(item);
+        source.data.splice(source.selectedIndex, 1);
+        source.clearSelection();
+        target.selectItem(target.data.length - 1);
+        this.selectedBox = target;
+    }
+    transferAll(source, target) {
+        if (!target || !source) {
+            return;
+        }
+        target.data.splice(target.data.length, 0, ...source.data.splice(0, source.data.length));
+        target.selectItem(target.data.length - 1);
+        this.selectedBox = target;
+    }
+};
+tslib_1.__decorate([
+    Input('kendoListBoxDataBinding'),
+    tslib_1.__metadata("design:type", Array)
+], DataBindingDirective.prototype, "data", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", ListBoxComponent)
+], DataBindingDirective.prototype, "connectedWith", void 0);
+DataBindingDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoListBoxDataBinding]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [ListBoxComponent])
+], DataBindingDirective);
+export { DataBindingDirective };

package/dist/es2015/index.d.ts

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './main';
+export { ItemSelectableDirective } from './item-selectable.directive';
+export { ItemTemplateDirective } from './item-template.directive';
+export { ListBoxSelectionService } from './selection.service';

package/dist/es2015/index.js

@@ -0,0 +1,11 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './main';
+export { ItemSelectableDirective } from './item-selectable.directive';
+export { ItemTemplateDirective } from './item-template.directive';
+export { ListBoxSelectionService } from './selection.service';

package/dist/es2015/index.metadata.json

@@ -0,0 +1 @@
+{"__symbolic":"module","version":4,"metadata":{"ListBoxComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":26,"character":1},"arguments":[{"selector":"kendo-listbox","providers":[{"__symbolic":"reference","name":"ListBoxSelectionService"}],"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                    <!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ -->\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    "}]}],"members":{"listboxClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":70,"character":5},"arguments":["class.k-listbox"]}]}],"itemTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":76,"character":5},"arguments":[{"__symbolic":"reference","name":"ItemTemplateDirective"},{"static":false}]}]}],"textField":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":5}}]}],"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":87,"character":5}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":97,"character":5}}]}],"toolbar":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":102,"character":5}}]}],"itemDisabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":123,"character":5}}]}],"selectionChange":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":129,"character":5}}]}],"actionClick":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":135,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ListBoxSelectionService"},{"__symbolic":"reference","module":"@angular/core","name":"Renderer2","line":154,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":155,"character":29}]}],"ngOnDestroy":[{"__symbolic":"method"}],"performAction":[{"__symbolic":"method"}],"selectItem":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}],"getText":[{"__symbolic":"method"}],"setToolbarClass":[{"__symbolic":"method"}]}},"DataBindingDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":12,"character":1},"arguments":[{"selector":"[kendoListBoxDataBinding]"}]}],"members":{"data":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":5},"arguments":["kendoListBoxDataBinding"]}]}],"connectedWith":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ListBoxComponent"}]}],"ngOnChanges":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"moveVertically":[{"__symbolic":"method"}],"removeItem":[{"__symbolic":"method"}],"transferItem":[{"__symbolic":"method"}],"transferAll":[{"__symbolic":"method"}]}},"ListBoxModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":11,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@progress/kendo-angular-buttons","name":"ButtonsModule","line":12,"character":15},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":12,"character":30}],"declarations":[{"__symbolic":"reference","name":"ListBoxComponent"},{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"ItemSelectableDirective"},{"__symbolic":"reference","name":"DataBindingDirective"}],"exports":[{"__symbolic":"reference","name":"ListBoxComponent"},{"__symbolic":"reference","name":"ItemTemplateDirective"},{"__symbolic":"reference","name":"ItemSelectableDirective"},{"__symbolic":"reference","name":"DataBindingDirective"}]}]}],"members":{}},"ListBoxSize":{"__symbolic":"interface"},"ActionName":{"__symbolic":"interface"},"ListBoxToolbarPosition":{"__symbolic":"interface"},"Toolbar":{"__symbolic":"interface"},"ListBoxToolbarConfig":{"__symbolic":"interface"},"ListBoxSelectionService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":15,"character":1}}],"members":{"select":[{"__symbolic":"method"}],"isSelected":[{"__symbolic":"method"}],"clearSelection":[{"__symbolic":"method"}]}},"ItemTemplateDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":21,"character":1},"arguments":[{"selector":"[kendoListBoxItemTemplate]"}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"TemplateRef","module":"@angular/core","arguments":[{"__symbolic":"reference","name":"any"}]}]}]}},"ItemSelectableDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":11,"character":1},"arguments":[{"selector":"[kendoListBoxItemSelectable]"}]}],"members":{"index":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":5}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ListBoxSelectionService"}]}],"selectedClassName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":19,"character":5},"arguments":["class.k-selected"]}]}],"onClick":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":25,"character":5},"arguments":["click",["$event"]]}]}]}}},"origins":{"ListBoxComponent":"./listbox.component","DataBindingDirective":"./data-binding.directive","ListBoxModule":"./listbox.module","ListBoxSize":"./size","ActionName":"./toolbar","ListBoxToolbarPosition":"./toolbar","Toolbar":"./toolbar","ListBoxToolbarConfig":"./toolbar","ListBoxSelectionService":"./selection.service","ItemTemplateDirective":"./item-template.directive","ItemSelectableDirective":"./item-selectable.directive"},"importAs":"@progress/kendo-angular-component-base"}

package/dist/es2015/item-selectable.directive.d.ts

@@ -0,0 +1,15 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ListBoxSelectionService } from './selection.service';
+/**
+ * @hidden
+ */
+export declare class ItemSelectableDirective {
+    private selectionService;
+    index: number;
+    constructor(selectionService: ListBoxSelectionService);
+    readonly selectedClassName: boolean;
+    onClick(event: any): void;
+}

package/dist/es2015/item-selectable.directive.js

@@ -0,0 +1,44 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, Input, HostBinding, HostListener } from '@angular/core';
+import { ListBoxSelectionService } from './selection.service';
+/**
+ * @hidden
+ */
+let ItemSelectableDirective = class ItemSelectableDirective {
+    constructor(selectionService) {
+        this.selectionService = selectionService;
+    }
+    get selectedClassName() {
+        return this.selectionService.isSelected(this.index);
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.selectionService.select(this.index);
+    }
+};
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Number)
+], ItemSelectableDirective.prototype, "index", void 0);
+tslib_1.__decorate([
+    HostBinding('class.k-selected'),
+    tslib_1.__metadata("design:type", Boolean),
+    tslib_1.__metadata("design:paramtypes", [])
+], ItemSelectableDirective.prototype, "selectedClassName", null);
+tslib_1.__decorate([
+    HostListener('click', ['$event']),
+    tslib_1.__metadata("design:type", Function),
+    tslib_1.__metadata("design:paramtypes", [Object]),
+    tslib_1.__metadata("design:returntype", void 0)
+], ItemSelectableDirective.prototype, "onClick", null);
+ItemSelectableDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoListBoxItemSelectable]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [ListBoxSelectionService])
+], ItemSelectableDirective);
+export { ItemSelectableDirective };

package/dist/es2015/item-template.directive.d.ts

@@ -0,0 +1,28 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { TemplateRef } from '@angular/core';
+/**
+ * Renders the ListBox item content. To define the item template, nest an `<ng-template>` tag
+ * with the `kendoListBoxItemTemplate` directive inside the `<kendo-listbox>` tag. The template context is
+ * set to the current data item.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *   <kendo-listbox [data]="listBoxItems">
+ *     <ng-template kendoListBoxItemTemplate let-dataItem>
+ *       <span>{{ dataItem }} item</span>
+ *     </ng-template>
+ *   </kendo-listbox>
+ * `
+ * })
+ * ```
+ */
+export declare class ItemTemplateDirective {
+    templateRef: TemplateRef<any>;
+    constructor(templateRef: TemplateRef<any>);
+}

package/dist/es2015/item-template.directive.js

@@ -0,0 +1,37 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as tslib_1 from "tslib";
+import { Directive, TemplateRef } from '@angular/core';
+/**
+ * Renders the ListBox item content. To define the item template, nest an `<ng-template>` tag
+ * with the `kendoListBoxItemTemplate` directive inside the `<kendo-listbox>` tag. The template context is
+ * set to the current data item.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *   <kendo-listbox [data]="listBoxItems">
+ *     <ng-template kendoListBoxItemTemplate let-dataItem>
+ *       <span>{{ dataItem }} item</span>
+ *     </ng-template>
+ *   </kendo-listbox>
+ * `
+ * })
+ * ```
+ */
+let ItemTemplateDirective = class ItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+};
+ItemTemplateDirective = tslib_1.__decorate([
+    Directive({
+        selector: '[kendoListBoxItemTemplate]'
+    }),
+    tslib_1.__metadata("design:paramtypes", [TemplateRef])
+], ItemTemplateDirective);
+export { ItemTemplateDirective };