@progress/kendo-angular-toolbar 17.1.1-develop.2 → 17.1.1-develop.4

package/esm2022/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1732795301,
-    version: '17.1.1-develop.2',
+    publishDate: 1733124434,
+    version: '17.1.1-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/tools/toolbar-dropdownbutton.component.mjs

@@ -2,17 +2,19 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Component, ElementRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2 } from '@angular/core';
+import { Component, ElementRef, forwardRef, ViewChild, Input, EventEmitter, Output, QueryList, ViewChildren, isDevMode, Renderer2, NgZone } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { DropDownButtonComponent } from '@progress/kendo-angular-buttons';
 import { getValueForLocation, makePeeker, getIndexOfFocused, getPrevKey, getNextKey, seekFocusedIndex, areEqual } from '../util';
 import { IconWrapperComponent } from '@progress/kendo-angular-icons';
 import { NgClass, NgIf, NgFor } from '@angular/common';
+import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
+    zone;
     renderer;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
@@ -206,16 +208,9 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         svgIcon: null,
         imageUrl: ''
     };
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    ngAfterViewInit() {
-        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
-    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
-    toolbarDropDownButton;
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
@@ -223,13 +218,20 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _text;
     getNextKey;
     getPrevKey;
-    constructor(renderer) {
+    constructor(zone, renderer) {
         super();
+        this.zone = zone;
         this.renderer = renderer;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
+    }
     /**
      * @hidden
      */
@@ -250,7 +252,7 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     focus(ev = {}) {
         if (!this.overflows) {
             if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarDropDownButton.focus();
+                this.dropDownButtonComponent?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -302,11 +304,10 @@ export class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
-                #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -379,7 +380,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
-                #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -445,7 +445,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -496,7 +496,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']
-            }], toolbarDropDownButton: [{
-                type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
             }] } });

package/fesm2022/progress-kendo-angular-toolbar.mjs

@@ -24,8 +24,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1732795301,
-    version: '17.1.1-develop.2',
+    publishDate: 1733124434,
+    version: '17.1.1-develop.4',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -2292,6 +2292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
+    zone;
     renderer;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
@@ -2485,16 +2486,9 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         svgIcon: null,
         imageUrl: ''
     };
-    ngOnInit() {
-        this.setTextDisplayMode();
-    }
-    ngAfterViewInit() {
-        this.renderer.addClass(this.toolbarDropDownButton.button.nativeElement, 'k-toolbar-menu-button');
-    }
     get overflowButtons() {
         return [...this.overflowListItems.toArray().filter(el => !el.nativeElement.classList.contains('k-disabled'))];
     }
-    toolbarDropDownButton;
     _data;
     _popupSettings = { animate: true, popupClass: '' };
     focusedIndex = -1;
@@ -2502,13 +2496,20 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     _text;
     getNextKey;
     getPrevKey;
-    constructor(renderer) {
+    constructor(zone, renderer) {
         super();
+        this.zone = zone;
         this.renderer = renderer;
         this.getNextKey = getNextKey();
         this.getPrevKey = getPrevKey();
         this.isBuiltInTool = true;
     }
+    ngOnInit() {
+        this.setTextDisplayMode();
+    }
+    ngAfterViewInit() {
+        this.zone.onStable.pipe(take(1)).subscribe(() => (this.renderer.addClass(this.dropDownButtonComponent.button.nativeElement, 'k-toolbar-menu-button')));
+    }
     /**
      * @hidden
      */
@@ -2529,7 +2530,7 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
     focus(ev = {}) {
         if (!this.overflows) {
             if (ev.type === 'focus' || ev.type === 'keydown') {
-                this.toolbarDropDownButton.focus();
+                this.dropDownButtonComponent?.focus();
             }
         }
         else if (this.overflowButtons.length > 0) {
@@ -2581,11 +2582,10 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.text = this.showText === 'overflow' ? undefined : this.text;
         this.overflowOptions.text = this.showText === 'toolbar' ? undefined : this.text;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "toolbarDropDownButton", first: true, predicate: ["toolbarDropDownButton"], descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToolBarDropDownButtonComponent, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ToolBarDropDownButtonComponent, isStandalone: true, selector: "kendo-toolbar-dropdownbutton", inputs: { arrowIcon: "arrowIcon", title: "title", showText: "showText", showIcon: "showIcon", text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", popupSettings: "popupSettings", look: "look", primary: "primary", fillMode: "fillMode", themeColor: "themeColor", buttonClass: "buttonClass", textField: "textField", disabled: "disabled", data: "data" }, outputs: { itemClick: "itemClick", open: "open", close: "close" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarDropDownButtonComponent) }], viewQueries: [{ propertyName: "dropdownButton", first: true, predicate: ["dropdownButton"], descendants: true, read: ElementRef, static: true }, { propertyName: "dropDownButtonComponent", first: true, predicate: DropDownButtonComponent, descendants: true }, { propertyName: "overflowListItems", predicate: ["listItem"], descendants: true }], exportAs: ["kendoToolBarDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
-                #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2658,7 +2658,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     template: `
         <ng-template #toolbarTemplate>
             <kendo-dropdownbutton
-                #toolbarDropDownButton
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
                 [svgIcon]="toolbarOptions.svgIcon"
@@ -2724,7 +2723,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     standalone: true,
                     imports: [DropDownButtonComponent, NgClass, NgIf, IconWrapperComponent, NgFor]
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }]; }, propDecorators: { arrowIcon: [{
                 type: Input
             }], title: [{
                 type: Input
@@ -2775,9 +2774,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             }], overflowListItems: [{
                 type: ViewChildren,
                 args: ['listItem']
-            }], toolbarDropDownButton: [{
-                type: ViewChild,
-                args: ['toolbarDropDownButton', { static: false }]
             }] } });
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-toolbar",
-  "version": "17.1.1-develop.2",
+  "version": "17.1.1-develop.4",
   "description": "Kendo UI Angular Toolbar component - a single UI element that organizes buttons and other navigation elements",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -29,16 +29,16 @@
     "@angular/core": "16 - 19",
     "@angular/platform-browser": "16 - 19",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "17.1.1-develop.2",
-    "@progress/kendo-angular-common": "17.1.1-develop.2",
-    "@progress/kendo-angular-l10n": "17.1.1-develop.2",
-    "@progress/kendo-angular-icons": "17.1.1-develop.2",
-    "@progress/kendo-angular-popup": "17.1.1-develop.2",
+    "@progress/kendo-angular-buttons": "17.1.1-develop.4",
+    "@progress/kendo-angular-common": "17.1.1-develop.4",
+    "@progress/kendo-angular-l10n": "17.1.1-develop.4",
+    "@progress/kendo-angular-icons": "17.1.1-develop.4",
+    "@progress/kendo-angular-popup": "17.1.1-develop.4",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "17.1.1-develop.2"
+    "@progress/kendo-angular-schematics": "17.1.1-develop.4"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-toolbar.mjs",

package/tools/toolbar-dropdownbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2024 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, OnInit, QueryList, Renderer2 } from '@angular/core';
+import { ElementRef, EventEmitter, OnInit, QueryList, Renderer2, NgZone } from '@angular/core';
 import { ToolBarToolComponent } from './toolbar-tool.component';
 import { PopupSettings } from '../popup-settings';
 import { ArrowIconSettings, ButtonFillMode, ButtonThemeColor, DropDownButtonComponent } from '@progress/kendo-angular-buttons';
@@ -15,6 +15,7 @@ import * as i0 from "@angular/core";
  * Represents the [Kendo UI ToolBar DropDownButton for Angular]({% slug controltypes_toolbar %}#toc-dropdownbuttons).
  */
 export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent implements OnInit {
+    private zone;
     private renderer;
     /**
      * Allows showing the default arrow icon or providing alternative one instead.
@@ -148,10 +149,7 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     overflowListItems: QueryList<ElementRef>;
     toolbarOptions: ToolOptions;
     overflowOptions: ToolOptions;
-    ngOnInit(): void;
-    ngAfterViewInit(): void;
     private get overflowButtons();
-    private toolbarDropDownButton;
     private _data;
     private _popupSettings;
     private focusedIndex;
@@ -159,7 +157,9 @@ export declare class ToolBarDropDownButtonComponent extends ToolBarToolComponent
     private _text;
     private getNextKey;
     private getPrevKey;
-    constructor(renderer: Renderer2);
+    constructor(zone: NgZone, renderer: Renderer2);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
     /**
      * @hidden
      */