@progress/kendo-angular-buttons 17.0.0-develop.8 → 17.0.0

package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.component.mjs

@@ -2,10 +2,10 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ContentChild, TemplateRef, ViewChild, ViewContainerRef, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
+import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, NgZone, ChangeDetectorRef, Renderer2 } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { PopupService } from '@progress/kendo-angular-popup';
-import { isDocumentAvailable, guid, Keys, isPresent } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, isPresent } from '@progress/kendo-angular-common';
 import { ButtonItemTemplateDirective } from '../listbutton/button-item-template.directive';
 import { closest } from '../util';
 import { ListButton } from '../listbutton/list-button';
@@ -59,89 +59,34 @@ const DEFAULT_FILL_MODE = 'solid';
  * ```
  */
 export class DropDownButtonComponent extends ListButton {
-    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
-        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
-        this.containerService = containerService;
-        this.renderer = renderer;
-        /**
-         * Allows showing the default arrow icon or providing alternative one instead.
-         * @default false
-         */
-        this.arrowIcon = false;
-        /**
-         * Defines the name of an existing icon in the Kendo UI theme.
-         */
-        this.icon = '';
-        /**
-         * Defines the list of CSS classes which are used for styling the Button with custom icons.
-         */
-        this.iconClass = '';
-        /**
-         * Defines a URL for styling the button with a custom image.
-         */
-        this.imageUrl = '';
-        /**
-         * The size property specifies the padding of the DropDownButton
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `none`
-         */
-        this.size = 'medium';
-        /**
-         * The rounded property specifies the border radius of the DropDownButton
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
-         *
-         * The possible values are:
-         * * `small`
-         * * `medium` (default)
-         * * `large`
-         * * `full`
-         * * `none`
-         */
-        this.rounded = 'medium';
-        /**
-         * The DropDownButton allows you to specify predefined theme colors.
-         * The theme color will be applied as a background and border color while also amending the text color accordingly
-         * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
-         *
-         * The possible values are:
-         * * `base` —Applies coloring based on the `base` theme color. (default)
-         * * `primary` —Applies coloring based on the `primary` theme color.
-         * * `secondary`—Applies coloring based on the `secondary` theme color.
-         * * `tertiary`— Applies coloring based on the `tertiary` theme color.
-         * * `info`—Applies coloring based on the `info` theme color.
-         * * `success`— Applies coloring based on the `success` theme color.
-         * * `warning`— Applies coloring based on the `warning` theme color.
-         * * `error`— Applies coloring based on the `error` theme color.
-         * * `dark`— Applies coloring based on the `dark` theme color.
-         * * `light`— Applies coloring based on the `light` theme color.
-         * * `inverse`— Applies coloring based on the `inverse` theme color.
-         * * `none` —Removes the default CSS class (no class would be rendered).
-         */
-        this.themeColor = 'base';
-        /**
-         * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
-         */
-        this.itemClick = new EventEmitter();
-        /**
-         * Fires each time the DropDownButton gets focused.
-         */
-        this.onFocus = new EventEmitter();
-        /**
-         * Fires each time the DropDownButton gets blurred.
-         */
-        this.onBlur = new EventEmitter();
-        this.listId = guid();
-        this.buttonId = guid();
-        this._fillMode = DEFAULT_FILL_MODE;
-        this._buttonAttributes = null;
-        this._itemClick = this.itemClick;
-        this._blur = this.onBlur;
-    }
+    containerService;
+    renderer;
+    /**
+     * Allows showing the default arrow icon or providing alternative one instead.
+     * @default false
+     */
+    arrowIcon = false;
+    /**
+     * Defines the name of an existing icon in the Kendo UI theme.
+     */
+    icon = '';
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) to be rendered within the button.
+     */
+    svgIcon;
+    /**
+     * Defines the list of CSS classes which are used for styling the Button with custom icons.
+     */
+    iconClass = '';
+    /**
+     * Defines a URL for styling the button with a custom image.
+     */
+    imageUrl = '';
+    /**
+     * Sets the data item field that represents the item text.
+     * If the data contains only primitive values, do not define it.
+     */
+    textField;
     /**
      * Sets or gets the data of the DropDownButton.
      *
@@ -153,6 +98,29 @@ export class DropDownButtonComponent extends ListButton {
     get data() {
         return this._data;
     }
+    /**
+     * The size property specifies the padding of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-size)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `none`
+     */
+    size = 'medium';
+    /**
+     * The rounded property specifies the border radius of the DropDownButton
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-rounded)).
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium` (default)
+     * * `large`
+     * * `full`
+     * * `none`
+     */
+    rounded = 'medium';
     /**
      * The fillMode property specifies the background and border styles of the DropDownButton
      * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-fillMode)).
@@ -170,6 +138,26 @@ export class DropDownButtonComponent extends ListButton {
     get fillMode() {
         return this._fillMode;
     }
+    /**
+     * The DropDownButton allows you to specify predefined theme colors.
+     * The theme color will be applied as a background and border color while also amending the text color accordingly
+     * ([see example]({% slug api_buttons_dropdownbuttoncomponent %}#toc-themeColor)).
+     *
+     * The possible values are:
+     * * `base` —Applies coloring based on the `base` theme color. (default)
+     * * `primary` —Applies coloring based on the `primary` theme color.
+     * * `secondary`—Applies coloring based on the `secondary` theme color.
+     * * `tertiary`— Applies coloring based on the `tertiary` theme color.
+     * * `info`—Applies coloring based on the `info` theme color.
+     * * `success`— Applies coloring based on the `success` theme color.
+     * * `warning`— Applies coloring based on the `warning` theme color.
+     * * `error`— Applies coloring based on the `error` theme color.
+     * * `dark`— Applies coloring based on the `dark` theme color.
+     * * `light`— Applies coloring based on the `light` theme color.
+     * * `inverse`— Applies coloring based on the `inverse` theme color.
+     * * `none` —Removes the default CSS class (no class would be rendered).
+     */
+    themeColor = 'base';
     /**
      * Sets attributes to the main button.
      */
@@ -181,12 +169,21 @@ export class DropDownButtonComponent extends ListButton {
     get buttonAttributes() {
         return this._buttonAttributes;
     }
+    /**
+     * Fires each time the user clicks on a drop-down list item. The event data contains the data item bound to the clicked list item.
+     */
+    itemClick = new EventEmitter();
+    /**
+     * Fires each time the DropDownButton gets focused.
+     */
+    onFocus = new EventEmitter();
+    /**
+     * Fires each time the DropDownButton gets blurred.
+     */
+    onBlur = new EventEmitter();
     get focused() {
         return this._isFocused && !this._disabled;
     }
-    get widgetClasses() {
-        return true;
-    }
     get dir() {
         return this.direction;
     }
@@ -196,6 +193,10 @@ export class DropDownButtonComponent extends ListButton {
     get active() {
         return this._active;
     }
+    itemTemplate;
+    _fillMode = DEFAULT_FILL_MODE;
+    _buttonAttributes = null;
+    documentMouseUpSub;
     /**
      * @hidden
      */
@@ -265,6 +266,20 @@ export class DropDownButtonComponent extends ListButton {
             this.blurWrapper();
         }
     }
+    constructor(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService, renderer) {
+        super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
+        this.containerService = containerService;
+        this.renderer = renderer;
+        this._itemClick = this.itemClick;
+        this._blur = this.onBlur;
+        zone.runOutsideAngular(() => {
+            this.documentMouseUpSub = this.renderer.listen('document', 'mouseup', () => {
+                if (this.active) {
+                    zone.run(() => this._active = false);
+                }
+            });
+        });
+    }
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
@@ -310,19 +325,26 @@ export class DropDownButtonComponent extends ListButton {
             }
         }
     }
-}
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
-        FocusService,
-        NavigationService,
-        NAVIGATION_SETTINGS_PROVIDER,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.dropdownbutton'
-        },
-        PopupContainerService
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    /**
+     * @hidden
+     */
+    ngOnDestroy() {
+        if (this.documentMouseUpSub) {
+            this.documentMouseUpSub();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: i1.FocusService }, { token: i2.NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i4.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i5.PopupContainerService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownButtonComponent, isStandalone: true, selector: "kendo-dropdownbutton", inputs: { arrowIcon: "arrowIcon", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", buttonAttributes: "buttonAttributes" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "attr.dir": "this.dir" } }, providers: [
+            FocusService,
+            NavigationService,
+            NAVIGATION_SETTINGS_PROVIDER,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.dropdownbutton'
+            },
+            PopupContainerService
+        ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <button kendoButton #button
             type="button"
             [id]="buttonId"
@@ -367,7 +389,8 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         </ng-template>
         <ng-container #container></ng-container>
     `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDropDownButton',
@@ -466,27 +489,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], focused: [{
                 type: HostBinding,
                 args: ['class.k-focus']
-            }], widgetClasses: [{
-                type: HostBinding,
-                args: ['class.k-dropdown-button']
             }], dir: [{
                 type: HostBinding,
                 args: ['attr.dir']
             }], itemTemplate: [{
                 type: ContentChild,
                 args: [ButtonItemTemplateDirective]
-            }], button: [{
-                type: ViewChild,
-                args: ['button', { read: ElementRef }]
-            }], buttonList: [{
-                type: ViewChild,
-                args: ['buttonList']
-            }], popupTemplate: [{
-                type: ViewChild,
-                args: ['popupTemplate']
-            }], container: [{
-                type: ViewChild,
-                args: ['container', { read: ViewContainerRef }]
             }], keydown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]

package/{esm2020 → esm2022}/dropdownbutton/dropdownbutton.module.mjs

@@ -20,11 +20,11 @@ import * as i2 from "../listbutton/button-item-template.directive";
  * - `ButtonItemTemplateDirective`—The Button item template directive.
  */
 export class DropDownButtonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, imports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective], exports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.DropDownButtonComponent] });
 }
-DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, imports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective], exports: [i1.DropDownButtonComponent, i2.ButtonItemTemplateDirective] });
-DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, providers: [IconsService, PopupService, ResizeBatchService], imports: [i1.DropDownButtonComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DropDownButtonModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_DROPDOWNBUTTON],

package/{esm2020 → esm2022}/floatingactionbutton/dial-item.component.mjs

@@ -12,13 +12,11 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class DialItemComponent {
-    constructor(element, renderer, localisationService) {
-        this.element = element;
-        this.renderer = renderer;
-        this.localisationService = localisationService;
-        this.hostClass = true;
-        this.role = 'menuitem';
-    }
+    element;
+    renderer;
+    localisationService;
+    hostClass = true;
+    role = 'menuitem';
     get disabledClass() {
         return this.item.disabled;
     }
@@ -29,6 +27,18 @@ export class DialItemComponent {
     get indexAttr() {
         return this.index;
     }
+    cssClass;
+    cssStyle;
+    isFocused;
+    index;
+    item;
+    dialItemTemplate;
+    align;
+    constructor(element, renderer, localisationService) {
+        this.element = element;
+        this.renderer = renderer;
+        this.localisationService = localisationService;
+    }
     get iconClasses() {
         const classes = [];
         if (this.item.iconClass) {
@@ -59,9 +69,8 @@ export class DialItemComponent {
         };
         return directions[dir][align];
     }
-}
-DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialItemComponent, isStandalone: true, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
         <ng-template *ngIf="dialItemTemplate"
             [ngTemplateOutlet]="dialItemTemplate"
             [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
@@ -78,7 +87,8 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                 [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialItemComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector

package/{esm2020 → esm2022}/floatingactionbutton/dial-list.component.mjs

@@ -14,28 +14,32 @@ import * as i1 from "../focusable/focus.service";
  * @hidden
  */
 export class DialListComponent {
-    constructor(focusService, cdr) {
-        this.focusService = focusService;
-        this.cdr = cdr;
-        this.hostClass = true;
-        this.subscriptions = new Subscription();
-        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
-    }
+    focusService;
+    cdr;
+    hostClass = true;
     get bottomClass() {
         return this.align.vertical === 'top' || this.align.vertical === 'middle';
     }
     get topClass() {
         return this.align.vertical === 'bottom';
     }
+    dialItems;
+    dialItemTemplate;
+    align;
+    subscriptions = new Subscription();
+    constructor(focusService, cdr) {
+        this.focusService = focusService;
+        this.cdr = cdr;
+        this.subscriptions.add(this.focusService.onFocus.subscribe(() => this.cdr.detectChanges()));
+    }
     isFocused(index) {
         return this.focusService.isFocused(index);
     }
     ngOnDestroy() {
         this.subscriptions.unsubscribe();
     }
-}
-DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, deps: [{ token: i1.FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DialListComponent, isStandalone: true, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
         <ng-container *ngFor='let item of dialItems; let idx = index'>
             <li
                 kendoButtonFocusable
@@ -51,7 +55,8 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
             </li>
         </ng-container>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { kind: "component", type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialListComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector