@progress/kendo-angular-buttons 20.1.0-develop.13 → 20.1.0-develop.15

package/esm2022/package-metadata.mjs

@@ -10,7 +10,7 @@ export const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759828751,
-    version: '20.1.0-develop.13',
+    publishDate: 1759838478,
+    version: '20.1.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2022/splitbutton/localization/messages.mjs

@@ -30,8 +30,12 @@ export class Messages extends ComponentMessages {
      * ```
      */
     splitButtonLabel;
+    /**
+     * Specifies the text for the SplitButton toggle button `aria-label`.
+     */
+    toggleButtonLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -41,4 +45,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { splitButtonLabel: [{
                 type: Input
+            }], toggleButtonLabel: [{
+                type: Input
             }] } });

package/esm2022/splitbutton/splitbutton.component.mjs

@@ -263,9 +263,15 @@ export class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get ariaLabel() {
-        const localizationMsg = this.localization.get('splitButtonLabel') || '';
+        const localizationMsg = this.messageFor('splitButtonLabel') || '';
         return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -336,19 +342,15 @@ export class SplitButtonComponent extends ListButton {
             this.keyUpHandler(event);
         }
     }
-    /**
-     * @hidden
-     */
+    ngDoCheck() {
+        this.updateButtonText();
+    }
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
-        this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
         this.handleButtonAttributes(this.buttonAttributes);
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('text')) {
             this.updateButtonText();
@@ -466,12 +468,13 @@ export class SplitButtonComponent extends ListButton {
     }
     updateButtonText() {
         if (isDocumentAvailable()) {
-            const innerText = this.wrapper.innerText
+            const innerText = this.wrapper?.innerText
                 .split('\n')
                 .join('')
                 .trim();
-            //setTimeout is needed because of `Expression has changed after it was checked.` error;
-            setTimeout(() => (this.buttonText = innerText), 0);
+            if (innerText !== this.buttonText) {
+                this.buttonText = innerText;
+            }
         }
     }
     handleClasses(value, input) {
@@ -488,7 +491,7 @@ export class SplitButtonComponent extends ListButton {
         this.button.nativeElement.classList[this.isIconButton ? 'add' : 'remove']('k-button-icon');
     }
     handleButtonAttributes(newButtonAttributes) {
-        const mainButton = this.button.nativeElement;
+        const mainButton = this.button?.nativeElement;
         if (isPresent(this.buttonAttributes) && isPresent(mainButton)) {
             for (const attr in this.buttonAttributes) {
                 this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
@@ -519,8 +522,9 @@ export class SplitButtonComponent extends ListButton {
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-        >
-        </ng-container>
+            i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
+            toggleButtonLabel="Toggle options"
+        ></ng-container>
         <button
             kendoButton
             #button
@@ -561,7 +565,7 @@ export class SplitButtonComponent extends ListButton {
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
-            aria-hidden="true"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -608,8 +612,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-        >
-        </ng-container>
+            i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
+            toggleButtonLabel="Toggle options"
+        ></ng-container>
         <button
             kendoButton
             #button
@@ -650,7 +655,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
-            aria-hidden="true"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"

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

@@ -45,8 +45,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1759828751,
-    version: '20.1.0-develop.13',
+    publishDate: 1759838478,
+    version: '20.1.0-develop.15',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -4517,8 +4517,12 @@ class Messages extends ComponentMessages {
      * ```
      */
     splitButtonLabel;
+    /**
+     * Specifies the text for the SplitButton toggle button `aria-label`.
+     */
+    toggleButtonLabel;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel", toggleButtonLabel: "toggleButtonLabel" }, usesInheritance: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
@@ -4528,6 +4532,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }], propDecorators: { splitButtonLabel: [{
                 type: Input
+            }], toggleButtonLabel: [{
+                type: Input
             }] } });
 
 /**
@@ -4830,9 +4836,15 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get ariaLabel() {
-        const localizationMsg = this.localization.get('splitButtonLabel') || '';
+        const localizationMsg = this.messageFor('splitButtonLabel') || '';
         return replaceMessagePlaceholder(localizationMsg, 'buttonText', this.buttonText);
     }
+    /**
+     * @hidden
+     */
+    messageFor(key) {
+        return this.localization.get(key);
+    }
     /**
      * @hidden
      */
@@ -4903,19 +4915,15 @@ class SplitButtonComponent extends ListButton {
             this.keyUpHandler(event);
         }
     }
-    /**
-     * @hidden
-     */
+    ngDoCheck() {
+        this.updateButtonText();
+    }
     ngAfterViewInit() {
         this.containerService.container = this.container;
         this.containerService.template = this.popupTemplate;
-        this.updateButtonText();
         this.handleClasses(this.rounded, 'rounded');
         this.handleButtonAttributes(this.buttonAttributes);
     }
-    /**
-     * @hidden
-     */
     ngOnChanges(changes) {
         if (changes.hasOwnProperty('text')) {
             this.updateButtonText();
@@ -5033,12 +5041,13 @@ class SplitButtonComponent extends ListButton {
     }
     updateButtonText() {
         if (isDocumentAvailable()) {
-            const innerText = this.wrapper.innerText
+            const innerText = this.wrapper?.innerText
                 .split('\n')
                 .join('')
                 .trim();
-            //setTimeout is needed because of `Expression has changed after it was checked.` error;
-            setTimeout(() => (this.buttonText = innerText), 0);
+            if (innerText !== this.buttonText) {
+                this.buttonText = innerText;
+            }
         }
     }
     handleClasses(value, input) {
@@ -5055,7 +5064,7 @@ class SplitButtonComponent extends ListButton {
         this.button.nativeElement.classList[this.isIconButton ? 'add' : 'remove']('k-button-icon');
     }
     handleButtonAttributes(newButtonAttributes) {
-        const mainButton = this.button.nativeElement;
+        const mainButton = this.button?.nativeElement;
         if (isPresent(this.buttonAttributes) && isPresent(mainButton)) {
             for (const attr in this.buttonAttributes) {
                 this.renderer.removeAttribute(mainButton, attr, this.buttonAttributes[attr]);
@@ -5086,8 +5095,9 @@ class SplitButtonComponent extends ListButton {
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-        >
-        </ng-container>
+            i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
+            toggleButtonLabel="Toggle options"
+        ></ng-container>
         <button
             kendoButton
             #button
@@ -5128,7 +5138,7 @@ class SplitButtonComponent extends ListButton {
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
-            aria-hidden="true"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -5175,8 +5185,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}"
-        >
-        </ng-container>
+            i18n-toggleButtonLabel="kendo.splitbutton.toggleButtonLabel|The text for the SplitButton toggle button aria-label"
+            toggleButtonLabel="Toggle options"
+        ></ng-container>
         <button
             kendoButton
             #button
@@ -5217,7 +5228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
-            aria-hidden="true"
+            [attr.aria-label]="messageFor('toggleButtonLabel')"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-buttons",
-  "version": "20.1.0-develop.13",
+  "version": "20.1.0-develop.15",
   "description": "Buttons Package for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -21,7 +21,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1759828751,
+      "publishDate": 1759838478,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -31,15 +31,15 @@
     "@angular/core": "16 - 20",
     "@angular/platform-browser": "16 - 20",
     "@progress/kendo-licensing": "^1.7.0",
-    "@progress/kendo-angular-common": "20.1.0-develop.13",
-    "@progress/kendo-angular-l10n": "20.1.0-develop.13",
-    "@progress/kendo-angular-popup": "20.1.0-develop.13",
-    "@progress/kendo-angular-icons": "20.1.0-develop.13",
+    "@progress/kendo-angular-common": "20.1.0-develop.15",
+    "@progress/kendo-angular-l10n": "20.1.0-develop.15",
+    "@progress/kendo-angular-popup": "20.1.0-develop.15",
+    "@progress/kendo-angular-icons": "20.1.0-develop.15",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "20.1.0-develop.13",
+    "@progress/kendo-angular-schematics": "20.1.0-develop.15",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-webspeech-common": "1.0.1"
   },

package/splitbutton/localization/messages.d.ts

@@ -29,6 +29,10 @@ export declare class Messages extends ComponentMessages {
      * ```
      */
     splitButtonLabel: string;
+    /**
+     * Specifies the text for the SplitButton toggle button `aria-label`.
+     */
+    toggleButtonLabel: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<Messages, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendo-splitbutton-messages-base", never, { "splitButtonLabel": { "alias": "splitButtonLabel"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<Messages, "kendo-splitbutton-messages-base", never, { "splitButtonLabel": { "alias": "splitButtonLabel"; "required": false; }; "toggleButtonLabel": { "alias": "toggleButtonLabel"; "required": false; }; }, {}, never, never, false, never>;
 }

package/splitbutton/splitbutton.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef, Renderer2, OnDestroy } from '@angular/core';
+import { ElementRef, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, NgZone, ChangeDetectorRef, Renderer2, OnDestroy, DoCheck } from '@angular/core';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { Align, PopupService } from '@progress/kendo-angular-popup';
 import { ListButton } from './../listbutton/list-button';
@@ -44,7 +44,7 @@ import * as i0 from "@angular/core";
  * }
  * ```
  */
-export declare class SplitButtonComponent extends ListButton implements AfterViewInit, OnChanges, OnDestroy {
+export declare class SplitButtonComponent extends ListButton implements AfterViewInit, OnChanges, OnDestroy, DoCheck {
     private localization;
     private renderer;
     /**
@@ -198,6 +198,10 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * @hidden
      */
     get ariaLabel(): string;
+    /**
+     * @hidden
+     */
+    messageFor(key: string): string;
     /**
      * @hidden
      */
@@ -230,13 +234,8 @@ export declare class SplitButtonComponent extends ListButton implements AfterVie
      * @hidden
      */
     keyup(event: any): void;
-    /**
-     * @hidden
-     */
+    ngDoCheck(): void;
     ngAfterViewInit(): void;
-    /**
-     * @hidden
-     */
     ngOnChanges(changes: SimpleChanges): void;
     /**
      * @hidden