@progress/kendo-angular-listbox 0.1.0

package/dist/es2015/listbox.component.d.ts

@@ -0,0 +1,93 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { ListBoxSelectionEvent, ListBoxSelectionService } from './selection.service';
+import { ItemTemplateDirective } from './item-template.directive';
+import { ListBoxSize } from './size';
+import { ActionName, ListBoxToolbarConfig, Tool } from './toolbar';
+/**
+ * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
+ */
+export declare class ListBoxComponent implements OnDestroy {
+    selectionService: ListBoxSelectionService;
+    private renderer;
+    private hostElement;
+    /**
+     * @hidden
+     */
+    listboxClassName: boolean;
+    /**
+     * @hidden
+     */
+    itemTemplate: ItemTemplateDirective;
+    /**
+     * The fields of the data item that provide the text content of the nodes.
+     */
+    textField: string;
+    /**
+     * The data which will be displayed by the ListBox.
+     */
+    data: any[];
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * - `'small'`
+     * - `'medium'` (default)
+     * - `'large'`
+     */
+    size: ListBoxSize;
+    /**
+     * Sets whether a toolbar should be displayed with the ListBox, as well as what tools and position should be used.
+     */
+    toolbar: ListBoxToolbarConfig;
+    /**
+     * A function which determines if a specific item is disabled.
+     */
+    itemDisabled: (item: any) => boolean;
+    /**
+     * Fires when the user selects a different ListBox item. Also fires when a node is moved, since that also changes its index.
+     */
+    selectionChange: EventEmitter<ListBoxSelectionEvent>;
+    /**
+     * Fires when the user clicks a ListBox item.
+     */
+    actionClick: EventEmitter<ActionName>;
+    /**
+     * @hidden
+     */
+    readonly listClasses: string;
+    /**
+     * @hidden
+     */
+    selectedTools: Tool[];
+    private sub;
+    constructor(selectionService: ListBoxSelectionService, renderer: Renderer2, hostElement: ElementRef);
+    /**
+     * @hidden
+     */
+    ngOnDestroy(): void;
+    /**
+     * @hidden
+     */
+    performAction(actionName: ActionName): void;
+    /**
+     * Programmatically selects a ListBox node.
+     */
+    selectItem(index: number): void;
+    /**
+     * Programmatically clears the ListBox selection.
+     */
+    clearSelection(): void;
+    /**
+     * The index of the currently selected item in the ListBox.
+     */
+    readonly selectedIndex: number;
+    /**
+     * @hidden
+     */
+    getText(dataItem: any): string;
+    private setToolbarClass;
+}

package/dist/es2015/listbox.component.js

@@ -0,0 +1,216 @@
+/**-----------------------------------------------------------------------------------------
+* 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 { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, isDevMode, Output, Renderer2 } from '@angular/core';
+import { validatePackage } from '@progress/kendo-licensing';
+import { Subscription } from 'rxjs';
+import { packageMetadata } from './package-metadata';
+import { ListBoxSelectionService } from './selection.service';
+import { ItemTemplateDirective } from './item-template.directive';
+import { defaultItemDisabled, fieldAccessor, getTools } from './util';
+import { allTools, DEFAULT_TOOLBAR_POSITION, sizeClassMap, toolbarClasses } from './constants';
+/**
+ * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
+ */
+let ListBoxComponent = class ListBoxComponent {
+    constructor(selectionService, renderer, hostElement) {
+        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((e) => {
+            this.selectionChange.next(e);
+        }));
+    }
+    /**
+     * Sets whether a toolbar should be displayed with the ListBox, as well as what tools and position should be used.
+     */
+    set toolbar(config) {
+        let 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);
+    }
+    /**
+     * @hidden
+     */
+    get listClasses() {
+        return `k-list k-list-${sizeClassMap[this.size]}`;
+    }
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        this.sub.unsubscribe();
+    }
+    /**
+     * @hidden
+     */
+    performAction(actionName) {
+        this.actionClick.next(actionName);
+    }
+    /**
+     * Programmatically selects a ListBox node.
+     */
+    selectItem(index) {
+        this.selectionService.selectedIndex = index;
+    }
+    /**
+     * Programmatically clears the ListBox selection.
+     */
+    clearSelection() {
+        this.selectionService.clearSelection();
+    }
+    /**
+     * The index of the currently selected item in the ListBox.
+     */
+    get selectedIndex() {
+        return this.selectionService.selectedIndex;
+    }
+    /**
+     * @hidden
+     */
+    getText(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);
+    }
+    setToolbarClass(pos) {
+        Object.keys(toolbarClasses).forEach((className) => {
+            if (pos === className) {
+                this.renderer.addClass(this.hostElement.nativeElement, toolbarClasses[className]);
+            }
+            else {
+                this.renderer.removeClass(this.hostElement.nativeElement, toolbarClasses[className]);
+            }
+        });
+    }
+};
+tslib_1.__decorate([
+    HostBinding('class.k-listbox'),
+    tslib_1.__metadata("design:type", Boolean)
+], ListBoxComponent.prototype, "listboxClassName", void 0);
+tslib_1.__decorate([
+    ContentChild(ItemTemplateDirective, { static: false }),
+    tslib_1.__metadata("design:type", ItemTemplateDirective)
+], ListBoxComponent.prototype, "itemTemplate", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ListBoxComponent.prototype, "textField", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Array)
+], ListBoxComponent.prototype, "data", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", String)
+], ListBoxComponent.prototype, "size", void 0);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Object),
+    tslib_1.__metadata("design:paramtypes", [Object])
+], ListBoxComponent.prototype, "toolbar", null);
+tslib_1.__decorate([
+    Input(),
+    tslib_1.__metadata("design:type", Function)
+], ListBoxComponent.prototype, "itemDisabled", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ListBoxComponent.prototype, "selectionChange", void 0);
+tslib_1.__decorate([
+    Output(),
+    tslib_1.__metadata("design:type", EventEmitter)
+], ListBoxComponent.prototype, "actionClick", void 0);
+ListBoxComponent = tslib_1.__decorate([
+    Component({
+        selector: 'kendo-listbox',
+        providers: [ListBoxSelectionService],
+        template: `
+            <div class="k-listbox-toolbar" *ngIf="selectedTools.length > 0">
+                <ul class="k-reset">
+                    <li *ngFor="let tool of selectedTools">
+                        <button kendoButton [icon]="tool.icon" (click)="performAction(tool.name)"></button>
+                    </li>
+
+                    <!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ -->
+                </ul>
+            </div>
+            <div class="k-list-scroller k-selectable">
+                <div class="{{ listClasses }}">
+                    <div class="k-list-content">
+                        <ul class="k-list-ul">
+                            <li
+                                class="k-list-item"
+                                *ngFor="let item of data; let i = index;"
+                                kendoListBoxItemSelectable
+                                [index]="i"
+                                [class.k-disabled]="itemDisabled(item)"
+                            >
+                                <ng-template *ngIf="itemTemplate; else defaultItemTemplate"
+                                    [templateContext]="{
+                                        templateRef: itemTemplate.templateRef,
+                                        $implicit: item
+                                    }">
+                                </ng-template>
+                                <ng-template #defaultItemTemplate>
+                                    <span class="k-list-item-text">{{ getText(item) }}</span>
+                                </ng-template>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+    `
+    }),
+    tslib_1.__metadata("design:paramtypes", [ListBoxSelectionService,
+        Renderer2,
+        ElementRef])
+], ListBoxComponent);
+export { ListBoxComponent };

package/dist/es2015/listbox.module.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the [NgModule](https://angular.io/api/core/NgModule) definition for the ListBox component.
+ */
+export declare class ListBoxModule {
+}

package/dist/es2015/listbox.module.js

@@ -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 * 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.
+ */
+let ListBoxModule = class ListBoxModule {
+};
+ListBoxModule = tslib_1.__decorate([
+    NgModule({
+        imports: [ButtonsModule, CommonModule],
+        declarations: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective],
+        exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective]
+    })
+], ListBoxModule);
+export { ListBoxModule };

package/dist/es2015/main.d.ts

@@ -0,0 +1,12 @@
+/**-----------------------------------------------------------------------------------------
+* 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';
+export { ListBoxSize } from './size';
+export { ActionName } from './toolbar';
+export { ListBoxToolbarPosition } from './toolbar';
+export { Toolbar } from './toolbar';
+export { ListBoxToolbarConfig } from './toolbar';

package/dist/es2015/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/es2015/package-metadata.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;

package/dist/es2015/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 const 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/es2015/selection.service.d.ts

@@ -0,0 +1,21 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { EventEmitter } from "@angular/core";
+/**
+ * The event fired by the ListBox component when the user makes a new selection.
+ */
+export interface ListBoxSelectionEvent {
+    index: number;
+}
+/**
+ * @hidden
+ */
+export declare class ListBoxSelectionService {
+    onSelect: EventEmitter<ListBoxSelectionEvent>;
+    selectedIndex: number;
+    select(index: number): void;
+    isSelected(index: number): boolean;
+    clearSelection(): void;
+}

package/dist/es2015/selection.service.js

@@ -0,0 +1,32 @@
+/**-----------------------------------------------------------------------------------------
+* 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
+ */
+let ListBoxSelectionService = class ListBoxSelectionService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.onSelect = new EventEmitter();
+        this.selectedIndex = null;
+    }
+    select(index) {
+        this.selectedIndex = index;
+        this.onSelect.next({ index: this.selectedIndex });
+    }
+    isSelected(index) {
+        return index === this.selectedIndex;
+    }
+    clearSelection() {
+        this.selectedIndex = null;
+    }
+};
+ListBoxSelectionService = tslib_1.__decorate([
+    Injectable()
+], ListBoxSelectionService);
+export { ListBoxSelectionService };

package/dist/es2015/size.d.ts

@@ -0,0 +1,13 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible size options of the ListBox.
+ *
+ * The possible values are:
+ * - `'small'`
+ * - `'medium'`
+ * - `'large'`
+ */
+export declare type ListBoxSize = 'small' | 'medium' | 'large';

package/dist/es2015/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/es2015/toolbar.d.ts

@@ -0,0 +1,42 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+/**
+ * Represents the possible toolbar buttons that the ListBox can display.
+ */
+export declare type ActionName = 'moveUp' | 'moveDown' | 'transferTo' | 'transferFrom' | 'transferAllTo' | 'transferAllFrom' | 'remove';
+/**
+ * Represents the possible values for customizing the toolbar position of the ListBox component.
+ */
+export declare type ListBoxToolbarPosition = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * The possible tool and position settings that the ListBox can accept for its built-in toolbar.
+ */
+export interface Toolbar {
+    /**
+     * The set of tools to be displayed in the toolbar.
+     * If not specified, all tools will be included.
+     */
+    tools?: ActionName[];
+    /**
+     * The position of the toolbar.
+     */
+    position?: ListBoxToolbarPosition;
+}
+/**
+ * The possible values that the ListBox can accept for its built-in toolbar.
+ *
+ * - Use `false` to hide the toolbar.
+ * - Omit the setting or use `true` to show the default settings, which are the full set of possible tools and position `"right"`.
+ * - Use a config object of type [`Toolbar`]({% slug api_listbox_toolbar %}) to specify tools or position. If only [`tools`]({% slug api_listbox_toolbar %}#toc-tools) or [`position`]({% slug api_listbox_toolbar %}#toc-position) is specified, the other will use its default value.
+ */
+export declare type ListBoxToolbarConfig = boolean | Toolbar;
+/**
+ * @hidden
+ */
+export interface Tool {
+    name: ActionName;
+    label: string;
+    icon: string;
+}

package/dist/es2015/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/es2015/util.d.ts

@@ -0,0 +1,31 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { ActionName } from './toolbar';
+/**
+ * @hidden
+ */
+export declare const isPresent: Function;
+/**
+ * @hidden
+ */
+export declare const isObject: Function;
+/**
+ * @hidden
+ */
+export declare const fieldAccessor: (dataItem: any, field: string) => any;
+/**
+ * @hidden
+ */
+export declare const defaultItemDisabled: () => boolean;
+/**
+ * @hidden
+ */
+export declare type StringKeyObject = {
+    [key: string]: any;
+};
+/**
+ * @hidden
+ */
+export declare const getTools: (names: ActionName[]) => import("./toolbar").Tool[];

package/dist/es2015/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 const isPresent = (value) => value !== null && value !== undefined;
+/**
+ * @hidden
+ */
+export const isObject = (value) => isPresent(value) && typeof value === 'object';
+/**
+ * @hidden
+ */
+export const fieldAccessor = (dataItem, field) => {
+    if (!isPresent(dataItem)) {
+        return null;
+    }
+    if (!isPresent(field) || !isObject(dataItem)) {
+        return dataItem;
+    }
+    // creates a field accessor supporting nested fields processing
+    const valueFrom = getter(field);
+    return valueFrom(dataItem);
+};
+/**
+ * @hidden
+ */
+export const defaultItemDisabled = () => false;
+/**
+ * @hidden
+ */
+export const getTools = (names) => {
+    return names.map(tool => allTools.find(meta => meta.name === tool));
+};