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

package/LICENSE.md

@@ -8,4 +8,4 @@ This is commercial software. To use it, you need to agree to the [**Telerik End
 
 All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
 
-*Copyright © 2022 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
+*Copyright © 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*

package/NOTICE.txt

@@ -1,4 +1,4 @@
-Progress Kendo UI for Angular 2022
+Progress Kendo UI for Angular 2023
 
 Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
@@ -37,7 +37,7 @@ DefinitelyTyped.org | @types/prosemirror-view | 1.11.4 - Open Source | MIT-style
 Isaac Z. Schlueter | glob | 7.1.3 - Open Source | ISC-style License
 Jorik Tangelder (Eight Media) | HammerJS | 2.0.8 - Open Source | MIT-style License
 Matt Mueller | cheerio | 0.22 - Open Source | MIT-style License
-Progress Software Corporation | Kendo UI Licensing CLI | 1.1 - Proprietary | 
+Progress Software Corporation | Kendo UI Licensing CLI | 1.1 - Proprietary |
 Progress Software Corporation | jszip-esm | 1.0.0 - Open Source | MIT-style License
 Progress Software Corporation | pako-esm | 1.0.0 - Open Source | MIT-style License
 ProseMirror | prosemiror-inputrules | 1.0.1 - Open Source | MIT-style License
@@ -433,7 +433,7 @@ subject to the following terms and conditions:
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
 @types/prosemirror-transform v1*, and @types/prosemirror-view v1*.  Such technologies are
-subject to the following terms and conditions: 
+subject to the following terms and conditions:
 
     This project is licensed under the MIT license.
     Copyrights are respective of each contributor listed at the beginning of each
@@ -640,7 +640,7 @@ Such technology is subject to the following terms and conditions:
 2. Special Notices Regarding Commercially Licensed Third-Party Components
 incorporated into the Product:  NONE
 
-3. Special Notices Regarding Progress Products incorporated into the Product:  
+3. Special Notices Regarding Progress Products incorporated into the Product:
 
 (a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for

package/README.md

@@ -26,6 +26,6 @@ Kendo UI for Angular is a commercial UI library designed and built for developin
 * [Feedback Portal](https://feedback.telerik.com/kendo-angular-ui)
 * [StackOverflow](https://stackoverflow.com/questions/tagged/kendo-ui-angular2)
 
-*Copyright © 2022 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
+*Copyright © 2023 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
 
 *Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

package/constants.d.ts

@@ -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 { ListBoxToolbarPosition, Tool } from "./toolbar";
@@ -20,6 +20,6 @@ export declare const sizeClassMap: {
 /**
  * @hidden
  */
-export declare const toolbarClasses: {
+export declare const actionsClasses: {
     [key: string]: string;
 };

package/data-binding.directive.d.ts

@@ -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 { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';

package/{esm2015/constants.js → esm2020/constants.mjs}

@@ -1,7 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon, caretDoubleAltLeftIcon, caretDoubleAltRightIcon, xIcon } from "@progress/kendo-svg-icons";
 /**
  * @hidden
  */
@@ -13,37 +14,44 @@ export 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
     }
 ];
 /**
@@ -57,9 +65,9 @@ export const sizeClassMap = {
 /**
  * @hidden
  */
-export const toolbarClasses = {
-    left: 'k-listbox-toolbar-left',
-    right: 'k-listbox-toolbar-right',
-    top: 'k-listbox-toolbar-top',
-    bottom: 'k-listbox-toolbar-bottom'
+export const actionsClasses = {
+    left: 'k-listbox-actions-left',
+    right: 'k-listbox-actions-right',
+    top: 'k-listbox-actions-top',
+    bottom: 'k-listbox-actions-bottom'
 };

package/{esm2015/data-binding.directive.js → esm2020/data-binding.directive.mjs}

@@ -1,10 +1,11 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { 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';
 import * as i0 from "@angular/core";
 import * as i1 from "./listbox.component";
@@ -58,7 +59,7 @@ export class DataBindingDirective {
      */
     ngOnChanges(changes) {
         if (isChanged('connectedWith', changes, false)) {
-            if (!changes.connectedWith.firstChange) {
+            if (!changes['connectedWith'].firstChange) {
                 this.selectedBoxSub.unsubscribe();
                 this.selectedBoxSub = new Subscription();
             }
@@ -128,9 +129,9 @@ export class DataBindingDirective {
         this.selectedBox = target;
     }
 }
-DataBindingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DataBindingDirective, deps: [{ token: i1.ListBoxComponent }], target: i0.ɵɵFactoryTarget.Directive });
-DataBindingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DataBindingDirective, selector: "[kendoListBoxDataBinding]", inputs: { 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: i1.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]'

package/{esm2015/main.js → esm2020/index.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
 *-------------------------------------------------------------------------------------------*/
 export { ListBoxComponent } from './listbox.component';

package/{esm2015/item-selectable.directive.js → esm2020/item-selectable.directive.mjs}

@@ -1,8 +1,9 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { Directive, Input, HostBinding, HostListener } from '@angular/core';
+import { ListBoxSelectionService } from './selection.service';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
 /**
@@ -20,9 +21,9 @@ export 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: i1.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: i1.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]'

package/{esm2015/item-template.directive.js → esm2020/item-template.directive.mjs}

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { Directive } from '@angular/core';
+import { Directive, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * Renders the ListBox item content. To define the item template, nest an `<ng-template>` tag
@@ -28,9 +28,9 @@ export 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]'

package/{esm2015/listbox.component.js → esm2020/listbox.component.mjs}

@@ -1,20 +1,21 @@
 /**-----------------------------------------------------------------------------------------
-* 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 { Component, ContentChild, EventEmitter, HostBinding, Input, isDevMode, Output } from '@angular/core';
+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';
+import { allTools, DEFAULT_TOOLBAR_POSITION, sizeClassMap, actionsClasses } from './constants';
 import * as i0 from "@angular/core";
 import * as i1 from "./selection.service";
-import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-buttons";
+import * as i2 from "@progress/kendo-angular-buttons";
+import * as i3 from "@angular/common";
 import * as i4 from "./item-selectable.directive";
+const DEFAULT_SIZE = 'medium';
 /**
  * Represents the [Kendo UI ListBox component for Angular]({% slug overview_listbox %}).
  */
@@ -31,15 +32,6 @@ export 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.
          */
@@ -56,13 +48,32 @@ export 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.
      */
@@ -125,26 +136,31 @@ export 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: i1.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: i1.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 }}">
@@ -171,21 +187,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: i4.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: i4.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 }}">

package/{esm2015/listbox.module.js → esm2020/listbox.module.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 { NgModule } from '@angular/core';
@@ -15,10 +15,10 @@ import * as i0 from "@angular/core";
  */
 export 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],

package/{esm2015/package-metadata.js → esm2020/package-metadata.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
 *-------------------------------------------------------------------------------------------*/
 /**
@@ -9,7 +9,7 @@ export 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'
 };

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

@@ -1,8 +1,8 @@
 /**-----------------------------------------------------------------------------------------
-* 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
 *-------------------------------------------------------------------------------------------*/
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './main';
+export * from './index';

package/{esm2015/selection.service.js → esm2020/selection.service.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 { EventEmitter, Injectable } from "@angular/core";
@@ -23,8 +23,8 @@ export 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
         }] });

package/{esm2015/size.js → esm2020/size.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
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/toolbar.js → esm2020/toolbar.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
 *-------------------------------------------------------------------------------------------*/
 export {};

package/{esm2015/util.js → esm2020/util.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 { getter } from '@progress/kendo-common';