@progress/kendo-angular-buttons 25.3.0-develop.12 → 25.3.0-develop.13

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

@@ -49,8 +49,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1791373738,
-    version: '25.3.0-develop.12',
+    publishDate: 1791376793,
+    version: '25.3.0-develop.13',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -6770,6 +6770,14 @@ class SegmentedControlComponent {
      * Fires when the selected button changes. Emits the index of the selected button.
      */
     selectedChange = new EventEmitter();
+    /**
+     * @hidden
+     */
+    get tabStopIndex() {
+        const index = this.focusedButtonIndex() ?? this.selectedButtonIndex ?? 0;
+        const isIndexInRange = index >= 0 && index < this._items.length;
+        return isIndexInRange ? index : 0;
+    }
     /**
      * @hidden
      */
@@ -6778,6 +6786,10 @@ class SegmentedControlComponent {
      * @hidden
      */
     isActiveTabStop = signal(true, ...(ngDevMode ? [{ debugName: "isActiveTabStop" }] : []));
+    /**
+     * @hidden
+     */
+    focusedButtonIndex = signal(null, ...(ngDevMode ? [{ debugName: "focusedButtonIndex" }] : []));
     _items = [];
     _size;
     _layoutMode = 'compact';
@@ -6793,6 +6805,9 @@ class SegmentedControlComponent {
         this.subs.add(localization.changes.subscribe(({ rtl }) => {
             this._direction.set(rtl ? 'rtl' : 'ltr');
         }));
+        this.zone.runOutsideAngular(() => {
+            this.subs.add(this.renderer.listen(this.wrapper.nativeElement, 'focusout', this.handleFocusOut.bind(this)));
+        });
     }
     ngAfterViewInit() {
         this.handleSizeClass(this._size, null);
@@ -6828,7 +6843,8 @@ class SegmentedControlComponent {
             return;
         }
         if (code === Keys.ArrowLeft || code === Keys.ArrowRight) {
-            const moved = this.moveFocus(index, code === Keys.ArrowRight ? 1 : -1);
+            const forwardKey = this.direction === 'rtl' ? Keys.ArrowLeft : Keys.ArrowRight;
+            const moved = this.moveFocus(index, code === forwardKey ? 1 : -1);
             if (moved) {
                 event.preventDefault();
             }
@@ -6847,16 +6863,22 @@ class SegmentedControlComponent {
      * Moves DOM focus to the currently selected button. Used by host toolbars.
      */
     focusSelectedButton(preventScroll = true) {
-        this.focusButtonAt(this.selectedButtonIndex, preventScroll);
+        this.focusButtonAt(this.tabStopIndex, preventScroll);
+    }
+    handleFocusOut(event) {
+        const next = event.relatedTarget;
+        const isFocusLeavingControl = !next || !this.wrapper.nativeElement.contains(next);
+        if (isFocusLeavingControl) {
+            this.focusedButtonIndex.set(null);
+        }
     }
     /**
      * Moves DOM focus to the adjacent button in the given direction. Disabled buttons are not
      * skipped so that keyboard users are still made aware of their presence and disabled state.
      */
     moveFocus(currentIndex, step) {
-        const count = this._items.length;
         const index = currentIndex + step;
-        if (index < 0 || index >= count) {
+        if (index < 0 || index >= this._items.length) {
             return false;
         }
         this.focusButtonAt(index, false);
@@ -6922,7 +6944,8 @@ class SegmentedControlComponent {
                 [attr.aria-disabled]="button.disabled ? true : null"
                 [attr.title]="button.title"
                 [attr.aria-label]="button.title && !button.text ? button.title : null"
-                [attr.tabindex]="isActiveTabStop() && selectedButtonIndex === idx ? 0 : -1"
+                [attr.tabindex]="isActiveTabStop() && tabStopIndex === idx ? 0 : -1"
+                (focus)="focusedButtonIndex.set(idx)"
                 (click)="handleClick(button, idx)"
                 (keydown)="handleKeydown($event, button, idx)"
                 [class.k-selected]="selectedButtonIndex === idx"
@@ -6966,7 +6989,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.32", ngImpo
                 [attr.aria-disabled]="button.disabled ? true : null"
                 [attr.title]="button.title"
                 [attr.aria-label]="button.title && !button.text ? button.title : null"
-                [attr.tabindex]="isActiveTabStop() && selectedButtonIndex === idx ? 0 : -1"
+                [attr.tabindex]="isActiveTabStop() && tabStopIndex === idx ? 0 : -1"
+                (focus)="focusedButtonIndex.set(idx)"
                 (click)="handleClick(button, idx)"
                 (keydown)="handleKeydown($event, button, idx)"
                 [class.k-selected]="selectedButtonIndex === idx"

package/index.d.ts

@@ -2862,6 +2862,10 @@ declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
      * Fires when the selected button changes. Emits the index of the selected button.
      */
     selectedChange: EventEmitter<number>;
+    /**
+     * @hidden
+     */
+    get tabStopIndex(): number;
     /**
      * @hidden
      */
@@ -2870,6 +2874,10 @@ declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
      * @hidden
      */
     isActiveTabStop: i0.WritableSignal<boolean>;
+    /**
+     * @hidden
+     */
+    focusedButtonIndex: i0.WritableSignal<number>;
     private _items;
     private _size;
     private _layoutMode;
@@ -2897,6 +2905,7 @@ declare class SegmentedControlComponent implements AfterViewInit, OnDestroy {
      * Moves DOM focus to the currently selected button. Used by host toolbars.
      */
     focusSelectedButton(preventScroll?: boolean): void;
+    private handleFocusOut;
     /**
      * Moves DOM focus to the adjacent button in the given direction. Disabled buttons are not
      * skipped so that keyboard users are still made aware of their presence and disabled state.

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1791373738,
-  "version": "25.3.0-develop.12",
+  "publishDate": 1791376793,
+  "version": "25.3.0-develop.13",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

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