@progress/kendo-angular-listbox 0.1.0

package/dist/fesm5/index.js

@@ -0,0 +1,557 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { __decorate, __metadata } from 'tslib';
+import { Injectable, EventEmitter, Directive, TemplateRef, isDevMode, HostBinding, ContentChild, Input, Output, Component, Renderer2, ElementRef, HostListener, NgModule } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
+import { getter } from '@progress/kendo-common';
+import { isChanged } from '@progress/kendo-angular-common';
+import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @hidden
+ */
+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'
+};
+
+/**
+ * @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 = __decorate([
+        Injectable()
+    ], ListBoxSelectionService);
+    return ListBoxSelectionService;
+}());
+
+/**
+ * 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>
+ * `
+ * })
+ * ```
+ */
+var ItemTemplateDirective = /** @class */ (function () {
+    function ItemTemplateDirective(templateRef) {
+        this.templateRef = templateRef;
+    }
+    ItemTemplateDirective = __decorate([
+        Directive({
+            selector: '[kendoListBoxItemTemplate]'
+        }),
+        __metadata("design:paramtypes", [TemplateRef])
+    ], ItemTemplateDirective);
+    return ItemTemplateDirective;
+}());
+
+/**
+ * @hidden
+ */
+var DEFAULT_TOOLBAR_POSITION = 'right';
+/**
+ * @hidden
+ */
+var 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
+ */
+var sizeClassMap = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ */
+var toolbarClasses = {
+    left: 'k-listbox-toolbar-left',
+    right: 'k-listbox-toolbar-right',
+    top: 'k-listbox-toolbar-top',
+    bottom: 'k-listbox-toolbar-bottom'
+};
+
+/**
+ * @hidden
+ */
+var isPresent = function (value) { return value !== null && value !== undefined; };
+/**
+ * @hidden
+ */
+var isObject = function (value) { return isPresent(value) && typeof value === 'object'; };
+/**
+ * @hidden
+ */
+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
+ */
+var defaultItemDisabled = function () { return false; };
+/**
+ * @hidden
+ */
+var getTools = function (names) {
+    return names.map(function (tool) { return allTools.find(function (meta) { return meta.name === tool; }); });
+};
+
+/**
+ * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
+ */
+var ListBoxComponent = /** @class */ (function () {
+    function ListBoxComponent(selectionService, renderer, hostElement) {
+        var _this = this;
+        this.selectionService = selectionService;
+        this.renderer = renderer;
+        this.hostElement = hostElement;
+        /**
+         * @hidden
+         */
+        this.listboxClassName = true;
+        /**
+         * The data which will be displayed by the ListBox.
+         */
+        this.data = [];
+        /**
+         * Sets the size of the component.
+         *
+         * The possible values are:
+         * - `'small'`
+         * - `'medium'` (default)
+         * - `'large'`
+         */
+        this.size = 'medium';
+        /**
+         * A function which determines if a specific item is disabled.
+         */
+        this.itemDisabled = defaultItemDisabled;
+        /**
+         * Fires when the user selects a different ListBox item. Also fires when a node is moved, since that also changes its index.
+         */
+        this.selectionChange = new EventEmitter();
+        /**
+         * Fires when the user clicks a ListBox item.
+         */
+        this.actionClick = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.selectedTools = allTools;
+        this.sub = new Subscription();
+        validatePackage(packageMetadata);
+        this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
+        this.sub.add(this.selectionService.onSelect.subscribe(function (e) {
+            _this.selectionChange.next(e);
+        }));
+    }
+    Object.defineProperty(ListBoxComponent.prototype, "toolbar", {
+        /**
+         * Sets whether a toolbar should be displayed with the ListBox, as well as what tools and position should be used.
+         */
+        set: function (config) {
+            var position = DEFAULT_TOOLBAR_POSITION;
+            if (typeof config === 'boolean') {
+                this.selectedTools = config ? allTools : [];
+            }
+            else {
+                this.selectedTools = config.tools ? getTools(config.tools) : allTools;
+                if (config.position) {
+                    position = config.position;
+                }
+            }
+            this.setToolbarClass(position);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(ListBoxComponent.prototype, "listClasses", {
+        /**
+         * @hidden
+         */
+        get: function () {
+            return "k-list k-list-" + sizeClassMap[this.size];
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ListBoxComponent.prototype.ngOnDestroy = function () {
+        this.sub.unsubscribe();
+    };
+    /**
+     * @hidden
+     */
+    ListBoxComponent.prototype.performAction = function (actionName) {
+        this.actionClick.next(actionName);
+    };
+    /**
+     * Programmatically selects a ListBox node.
+     */
+    ListBoxComponent.prototype.selectItem = function (index) {
+        this.selectionService.selectedIndex = index;
+    };
+    /**
+     * Programmatically clears the ListBox selection.
+     */
+    ListBoxComponent.prototype.clearSelection = function () {
+        this.selectionService.clearSelection();
+    };
+    Object.defineProperty(ListBoxComponent.prototype, "selectedIndex", {
+        /**
+         * The index of the currently selected item in the ListBox.
+         */
+        get: function () {
+            return this.selectionService.selectedIndex;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @hidden
+     */
+    ListBoxComponent.prototype.getText = function (dataItem) {
+        if (typeof dataItem !== 'string' && !this.textField && 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 fieldAccessor(dataItem, this.textField);
+    };
+    ListBoxComponent.prototype.setToolbarClass = function (pos) {
+        var _this = this;
+        Object.keys(toolbarClasses).forEach(function (className) {
+            if (pos === className) {
+                _this.renderer.addClass(_this.hostElement.nativeElement, toolbarClasses[className]);
+            }
+            else {
+                _this.renderer.removeClass(_this.hostElement.nativeElement, toolbarClasses[className]);
+            }
+        });
+    };
+    __decorate([
+        HostBinding('class.k-listbox'),
+        __metadata("design:type", Boolean)
+    ], ListBoxComponent.prototype, "listboxClassName", void 0);
+    __decorate([
+        ContentChild(ItemTemplateDirective, { static: false }),
+        __metadata("design:type", ItemTemplateDirective)
+    ], ListBoxComponent.prototype, "itemTemplate", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ListBoxComponent.prototype, "textField", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Array)
+    ], ListBoxComponent.prototype, "data", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], ListBoxComponent.prototype, "size", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], ListBoxComponent.prototype, "toolbar", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Function)
+    ], ListBoxComponent.prototype, "itemDisabled", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ListBoxComponent.prototype, "selectionChange", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], ListBoxComponent.prototype, "actionClick", void 0);
+    ListBoxComponent = __decorate([
+        Component({
+            selector: 'kendo-listbox',
+            providers: [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    "
+        }),
+        __metadata("design:paramtypes", [ListBoxSelectionService,
+            Renderer2,
+            ElementRef])
+    ], ListBoxComponent);
+    return ListBoxComponent;
+}());
+
+/**
+ * A directive which manages the functoinality of the ListBox tools out of the box, and modifies the provided data accordingly.
+ */
+var DataBindingDirective = /** @class */ (function () {
+    function DataBindingDirective(listbox) {
+        var _this = this;
+        this.listbox = listbox;
+        /**
+         * @hidden
+         */
+        this.data = [];
+        this.sub = new Subscription();
+        this.selectedBox = this.listbox;
+        this.sub.add(this.listbox.actionClick.subscribe(function (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
+     */
+    DataBindingDirective.prototype.ngOnChanges = function (changes) {
+        var _this = this;
+        if (isChanged('connectedWith', changes, false)) {
+            this.sub.add(this.listbox.selectionChange.subscribe(function () {
+                _this.selectedBox = _this.listbox;
+                _this.connectedWith.clearSelection();
+            }));
+            this.sub.add(this.connectedWith.selectionChange.subscribe(function () {
+                _this.selectedBox = _this.connectedWith;
+                _this.listbox.clearSelection();
+            }));
+        }
+        if (isChanged('data', changes, true)) {
+            this.listbox.data = changes.data.currentValue;
+        }
+    };
+    /**
+     * @hidden
+     */
+    DataBindingDirective.prototype.ngOnDestroy = function () {
+        this.sub.unsubscribe();
+    };
+    DataBindingDirective.prototype.moveVertically = function (dir) {
+        var _a;
+        var index = this.selectedBox.selectedIndex;
+        if (!isPresent(index)) {
+            return;
+        }
+        var topReached = dir === 'up' && index <= 0;
+        var bottomReached = dir === 'down' && index >= this.selectedBox.data.length - 1;
+        if (topReached || bottomReached) {
+            return;
+        }
+        var newIndex = dir === 'up' ? index - 1 : index + 1;
+        // ES6 Destructuring swap
+        _a = [this.selectedBox.data[index], this.selectedBox.data[newIndex]], this.selectedBox.data[newIndex] = _a[0], this.selectedBox.data[index] = _a[1];
+        this.selectedBox.selectionService.select(newIndex);
+    };
+    DataBindingDirective.prototype.removeItem = function () {
+        var index = this.selectedBox.selectedIndex;
+        if (!isPresent(index)) {
+            return;
+        }
+        this.selectedBox.data.splice(index, 1);
+        this.selectedBox.selectionService.clearSelection();
+    };
+    DataBindingDirective.prototype.transferItem = function (source, target) {
+        var 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;
+    };
+    DataBindingDirective.prototype.transferAll = function (source, target) {
+        var _a;
+        if (!target || !source) {
+            return;
+        }
+        (_a = target.data).splice.apply(_a, [target.data.length, 0].concat(source.data.splice(0, source.data.length)));
+        target.selectItem(target.data.length - 1);
+        this.selectedBox = target;
+    };
+    __decorate([
+        Input('kendoListBoxDataBinding'),
+        __metadata("design:type", Array)
+    ], DataBindingDirective.prototype, "data", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", ListBoxComponent)
+    ], DataBindingDirective.prototype, "connectedWith", void 0);
+    DataBindingDirective = __decorate([
+        Directive({
+            selector: '[kendoListBoxDataBinding]'
+        }),
+        __metadata("design:paramtypes", [ListBoxComponent])
+    ], DataBindingDirective);
+    return DataBindingDirective;
+}());
+
+/**
+ * @hidden
+ */
+var ItemSelectableDirective = /** @class */ (function () {
+    function ItemSelectableDirective(selectionService) {
+        this.selectionService = selectionService;
+    }
+    Object.defineProperty(ItemSelectableDirective.prototype, "selectedClassName", {
+        get: function () {
+            return this.selectionService.isSelected(this.index);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    ItemSelectableDirective.prototype.onClick = function (event) {
+        event.stopPropagation();
+        this.selectionService.select(this.index);
+    };
+    __decorate([
+        Input(),
+        __metadata("design:type", Number)
+    ], ItemSelectableDirective.prototype, "index", void 0);
+    __decorate([
+        HostBinding('class.k-selected'),
+        __metadata("design:type", Boolean),
+        __metadata("design:paramtypes", [])
+    ], ItemSelectableDirective.prototype, "selectedClassName", null);
+    __decorate([
+        HostListener('click', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ItemSelectableDirective.prototype, "onClick", null);
+    ItemSelectableDirective = __decorate([
+        Directive({
+            selector: '[kendoListBoxItemSelectable]'
+        }),
+        __metadata("design:paramtypes", [ListBoxSelectionService])
+    ], ItemSelectableDirective);
+    return ItemSelectableDirective;
+}());
+
+/**
+ * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
+ */
+var ListBoxModule = /** @class */ (function () {
+    function ListBoxModule() {
+    }
+    ListBoxModule = __decorate([
+        NgModule({
+            imports: [ButtonsModule, CommonModule],
+            declarations: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective],
+            exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective]
+        })
+    ], ListBoxModule);
+    return ListBoxModule;
+}());
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ItemSelectableDirective, ItemTemplateDirective, ListBoxSelectionService, ListBoxComponent, DataBindingDirective, ListBoxModule };

package/dist/npm/constants.js

@@ -0,0 +1,67 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @hidden
+ */
+exports.DEFAULT_TOOLBAR_POSITION = 'right';
+/**
+ * @hidden
+ */
+exports.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
+ */
+exports.sizeClassMap = {
+    small: 'sm',
+    medium: 'md',
+    large: 'lg'
+};
+/**
+ * @hidden
+ */
+exports.toolbarClasses = {
+    left: 'k-listbox-toolbar-left',
+    right: 'k-listbox-toolbar-right',
+    top: 'k-listbox-toolbar-top',
+    bottom: 'k-listbox-toolbar-bottom'
+};