@progress/kendo-angular-listbox 1.0.5 → 11.0.0-develop.100

package/fesm2015/{kendo-angular-listbox.js → progress-kendo-angular-listbox.mjs}

@@ -1,5 +1,5 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
@@ -7,10 +7,11 @@ import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener,
 import { validatePackage } from '@progress/kendo-licensing';
 import { Subscription } from 'rxjs';
 import { getter } from '@progress/kendo-common';
-import * as i2 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i3 from '@progress/kendo-angular-buttons';
+import { caretAltUpIcon, caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretDoubleAltRightIcon, caretDoubleAltLeftIcon, xIcon } from '@progress/kendo-svg-icons';
+import * as i2 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
 import { isChanged } from '@progress/kendo-angular-common';
 
 /**
@@ -20,7 +21,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-listbox',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698772,
+    publishDate: 1673469243,
     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'
 };
@@ -44,9 +45,9 @@ class ListBoxSelectionService {
         this.selectedIndex = null;
     }
 }
-ListBoxSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ListBoxSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxSelectionService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxSelectionService, decorators: [{
+ListBoxSelectionService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxSelectionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ListBoxSelectionService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxSelectionService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxSelectionService, decorators: [{
             type: Injectable
         }] });
 
@@ -74,9 +75,9 @@ class ItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemTemplateDirective, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemTemplateDirective, decorators: [{
+ItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ItemTemplateDirective, selector: "[kendoListBoxItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxItemTemplate]'
@@ -94,37 +95,44 @@ const allTools = [
     {
         name: 'moveUp',
         label: 'Move Up',
-        icon: 'arrow-n'
+        icon: 'caret-alt-up',
+        svgIcon: caretAltUpIcon
     },
     {
         name: 'moveDown',
         label: 'Move Down',
-        icon: 'arrow-s'
+        icon: 'caret-alt-down',
+        svgIcon: caretAltDownIcon
     },
     {
         name: 'transferTo',
         label: 'Transfer From',
-        icon: 'arrow-w'
+        icon: 'caret-alt-left',
+        svgIcon: caretAltLeftIcon
     },
     {
         name: 'transferFrom',
         label: 'Transfer To',
-        icon: 'arrow-e'
+        icon: 'caret-alt-right',
+        svgIcon: caretAltRightIcon
     },
     {
         name: 'transferAllTo',
         label: 'Transfer All To',
-        icon: 'arrow-double-60-right'
+        icon: 'caret-double-alt-right',
+        svgIcon: caretDoubleAltRightIcon
     },
     {
         name: 'transferAllFrom',
         label: 'Transfer All From',
-        icon: 'arrow-double-60-left'
+        icon: 'caret-double-alt-left',
+        svgIcon: caretDoubleAltLeftIcon
     },
     {
         name: 'remove',
         label: 'Remove',
-        icon: 'x'
+        icon: 'x',
+        svgIcon: xIcon
     }
 ];
 /**
@@ -138,11 +146,11 @@ const sizeClassMap = {
 /**
  * @hidden
  */
-const toolbarClasses = {
-    left: 'k-listbox-toolbar-left',
-    right: 'k-listbox-toolbar-right',
-    top: 'k-listbox-toolbar-top',
-    bottom: 'k-listbox-toolbar-bottom'
+const actionsClasses = {
+    left: 'k-listbox-actions-left',
+    right: 'k-listbox-actions-right',
+    top: 'k-listbox-actions-top',
+    bottom: 'k-listbox-actions-bottom'
 };
 
 /**
@@ -193,9 +201,9 @@ class ItemSelectableDirective {
         this.selectionService.select(this.index);
     }
 }
-ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
-ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ItemSelectableDirective, decorators: [{
+ItemSelectableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemSelectableDirective, deps: [{ token: ListBoxSelectionService }], target: i0.ɵɵFactoryTarget.Directive });
+ItemSelectableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: { index: "index" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-selected": "this.selectedClassName" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemSelectableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxItemSelectable]'
@@ -210,6 +218,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['click', ['$event']]
             }] } });
 
+const DEFAULT_SIZE = 'medium';
 /**
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
@@ -226,15 +235,6 @@ class ListBoxComponent {
          * 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.
          */
@@ -251,13 +251,32 @@ class ListBoxComponent {
          * @hidden
          */
         this.selectedTools = allTools;
+        this._size = DEFAULT_SIZE;
         this.sub = new Subscription();
         validatePackage(packageMetadata);
         this.setToolbarClass(DEFAULT_TOOLBAR_POSITION);
+        this.setSizingClass(this.size);
         this.sub.add(this.selectionService.onSelect.subscribe((e) => {
             this.selectionChange.next(e);
         }));
     }
+    /**
+     * Sets the size of the component.
+     *
+     * The possible values are:
+     * - `'small'`
+     * - `'medium'` (default)
+     * - `'large'`
+     */
+    set size(size) {
+        const newSize = size ? size : DEFAULT_SIZE;
+        this.renderer.removeClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[this.size]}`);
+        this.setSizingClass(newSize);
+        this._size = size;
+    }
+    get size() {
+        return this._size;
+    }
     /**
      * Sets whether a toolbar should be displayed with the ListBox, as well as what tools and position should be used.
      */
@@ -320,26 +339,31 @@ class ListBoxComponent {
         return fieldAccessor(dataItem, this.textField);
     }
     setToolbarClass(pos) {
-        Object.keys(toolbarClasses).forEach((className) => {
+        Object.keys(actionsClasses).forEach((className) => {
             if (pos === className) {
-                this.renderer.addClass(this.hostElement.nativeElement, toolbarClasses[className]);
+                this.renderer.addClass(this.hostElement.nativeElement, actionsClasses[className]);
             }
             else {
-                this.renderer.removeClass(this.hostElement.nativeElement, toolbarClasses[className]);
+                this.renderer.removeClass(this.hostElement.nativeElement, actionsClasses[className]);
             }
         });
     }
+    setSizingClass(size) {
+        this.renderer.addClass(this.hostElement.nativeElement, `k-listbox-${sizeClassMap[size]}`);
+    }
 }
-ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxComponent, deps: [{ token: ListBoxSelectionService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListBoxComponent, 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: [ListBoxSelectionService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], ngImport: i0, 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)" role="button"></button>
-                    </li>
-
-                    <!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ -->
-                </ul>
+ListBoxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxComponent, deps: [{ token: ListBoxSelectionService }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListBoxComponent, 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: [ListBoxSelectionService], queries: [{ propertyName: "itemTemplate", first: true, predicate: ItemTemplateDirective, descendants: true }], ngImport: i0, template: `
+            <div class="k-listbox-actions" *ngIf="selectedTools.length > 0">
+                <button
+                    *ngFor="let tool of selectedTools"
+                    kendoButton
+                    [size]="this.size"
+                    [icon]="tool.icon"
+                    [svgIcon]="tool.svgIcon"
+                    (click)="performAction(tool.name)"
+                    role="button"
+                ></button>
             </div>
             <div class="k-list-scroller k-selectable">
                 <div class="{{ listClasses }}">
@@ -366,21 +390,23 @@ ListBoxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
                     </div>
                 </div>
             </div>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.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: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i3.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: ItemSelectableDirective, selector: "[kendoListBoxItemSelectable]", inputs: ["index"] }, { type: i2.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxComponent, decorators: [{
             type: Component,
             args: [{
                     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)" role="button"></button>
-                    </li>
-
-                    <!-- react moving items has a smoother removal of the style: https://www.telerik.com/kendo-react-ui/components/listbox/ -->
-                </ul>
+            <div class="k-listbox-actions" *ngIf="selectedTools.length > 0">
+                <button
+                    *ngFor="let tool of selectedTools"
+                    kendoButton
+                    [size]="this.size"
+                    [icon]="tool.icon"
+                    [svgIcon]="tool.svgIcon"
+                    (click)="performAction(tool.name)"
+                    role="button"
+                ></button>
             </div>
             <div class="k-list-scroller k-selectable">
                 <div class="{{ listClasses }}">
@@ -481,7 +507,7 @@ class DataBindingDirective {
      */
     ngOnChanges(changes) {
         if (isChanged('connectedWith', changes, false)) {
-            if (!changes.connectedWith.firstChange) {
+            if (!changes['connectedWith'].firstChange) {
                 this.selectedBoxSub.unsubscribe();
                 this.selectedBoxSub = new Subscription();
             }
@@ -551,9 +577,9 @@ class DataBindingDirective {
         this.selectedBox = target;
     }
 }
-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: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, decorators: [{
+DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataBindingDirective, deps: [{ token: ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
+DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { connectedWith: "connectedWith" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DataBindingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoListBoxDataBinding]'
@@ -567,10 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ListBoxModule {
 }
-ListBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxModule, declarations: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective], imports: [ButtonsModule, CommonModule], exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective] });
-ListBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxModule, imports: [[ButtonsModule, CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListBoxModule, decorators: [{
+ListBoxModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListBoxModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxModule, declarations: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective], imports: [ButtonsModule, CommonModule], exports: [ListBoxComponent, ItemTemplateDirective, ItemSelectableDirective, DataBindingDirective] });
+ListBoxModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxModule, imports: [[ButtonsModule, CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListBoxModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [ButtonsModule, CommonModule],