@progress/kendo-angular-gantt 24.2.2-develop.8 → 24.2.2-develop.9

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

@@ -44,8 +44,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783409430,
-    version: '24.2.2-develop.8',
+    publishDate: 1783411233,
+    version: '24.2.2-develop.9',
     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'
 };
 
@@ -1075,6 +1075,7 @@ class NavigationService {
      */
     timelineLastActive = false;
     metadata;
+    bar;
     _enabled = false;
     _activeTimelineIndex = 0;
     _activeTreeListCell = { rowIndex: 0, colIndex: 0 };
@@ -1088,19 +1089,23 @@ class NavigationService {
         // no private property setters in TypeScript, so use a getter and a poorly named private prop for this value
         this._enabled = true;
         this.metadata = metadata;
-        // TODO: fix in the splitter package and remove
-        // move the splitbar HTML element between the two panes to keep the visial tabbing order in tact
-        const splitbar = this.metadata.host.querySelector('.k-splitbar');
-        if (isPresent(splitbar) && isPresent(splitbar.previousElementSibling) && isPresent(splitbar.after)) {
-            splitbar.after(splitbar.previousElementSibling);
+        this.bar = this.metadata.host.querySelector('.k-splitbar');
+        // Demote first TreeList cell so bar is the natural tab target
+        // Cell will get tabindex="0" when it's actually focused
+        const firstCell = this.metadata.treeListElement.querySelector('[tabindex="0"]');
+        if (isPresent(firstCell)) {
+            this.renderer.setAttribute(firstCell, 'tabindex', '-1');
         }
         this.zone.runOutsideAngular(() => {
             this.eventListenerDisposers = [
                 this.renderer.listen(this.metadata.treeListElement, 'mousedown', this.focusTreeList.bind(this)),
                 this.renderer.listen(this.metadata.treeListElement, 'focusin', this.handleTreeListFocusIn.bind(this)),
+                this.renderer.listen(this.metadata.treeListElement, 'focusout', this.handleTreeListFocusOut.bind(this)),
                 this.renderer.listen(this.metadata.timelineElement, 'mousedown', this.handleTimelineMousedown.bind(this)),
                 this.renderer.listen(this.metadata.timelineElement, 'focusin', this.handleTimelineFocusIn.bind(this)),
-                this.renderer.listen(this.metadata.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this))
+                this.renderer.listen(this.metadata.timelineElement, 'focusout', this.handleTimelineFocusOut.bind(this)),
+                // Intercept Tab from splitter bar to manually focus TreeList
+                this.renderer.listen(this.bar, 'keydown', this.handleSplitterBarKeydown.bind(this))
             ];
         });
     }
@@ -1162,9 +1167,17 @@ class NavigationService {
     }
     /**
      * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     * Restore bar to tab order when focus leaves Timeline.
      */
     handleTimelineFocusOut({ relatedTarget }) {
         this.isTimelineFocused = this.metadata.timelineElement.contains(relatedTarget);
+        // Restore bar to tab order when focus leaves Timeline to areas outside the Gantt
+        if (!this.metadata.timelineElement.contains(relatedTarget) &&
+            !this.metadata.treeListElement.contains(relatedTarget)) {
+            if (this.bar) {
+                this.renderer.setAttribute(this.bar, 'tabindex', '0');
+            }
+        }
         // update the task element only if the new focus target is not in the Timeline - focus change between tasks is handled in the focusin handler
         if (!isTask(relatedTarget, this.metadata.timelineElement)) {
             this.notifyTaskStatusChange();
@@ -1179,6 +1192,10 @@ class NavigationService {
     handleTreeListFocusIn(event) {
         this.treeListLastActive = true;
         this.timelineLastActive = false;
+        // Hide bar from tab order while TreeList is focused, so Tab goes to Timeline
+        if (this.bar) {
+            this.renderer.setAttribute(this.bar, 'tabindex', '-1');
+        }
         // if the previous focus target was in the TreeList, rely on its component navigation and just record the focused item index
         if (this.metadata.treeListElement.contains(event.relatedTarget)) {
             const { colIndex, rowIndex } = this.metadata.treeList.activeCell;
@@ -1196,6 +1213,24 @@ class NavigationService {
             this.scrollSyncService.syncScrollTop('treelist', 'timeline');
         }
     }
+    /**
+     * Handle focus leaving TreeList.
+     * Restore bar to tab order and demote the cell when focus leaves TreeList.
+     */
+    handleTreeListFocusOut(event) {
+        // Demote the active TreeList cell when focus leaves
+        const activeCell = this.metadata.treeListElement.querySelector('[tabindex="0"]');
+        if (activeCell) {
+            this.renderer.setAttribute(activeCell, 'tabindex', '-1');
+        }
+        // Restore bar to tab order when focus leaves TreeList to areas outside (not to Timeline)
+        if (!this.metadata.timelineElement.contains(event.relatedTarget) &&
+            !this.metadata.treeListElement.contains(event.relatedTarget)) {
+            if (this.bar) {
+                this.renderer.setAttribute(this.bar, 'tabindex', '0');
+            }
+        }
+    }
     updateActiveTimeLineIndex(index) {
         this.activeTimelineIndex = index;
     }
@@ -1246,6 +1281,19 @@ class NavigationService {
     focusTreeList() {
         this.metadata.treeList.focus();
     }
+    /**
+     * Intercept Tab key on splitter bar to focus the TreeList.
+     * Since TreeList first cell has tabindex="-1", Tab from bar won't naturally focus it.
+     * This handler manually focuses the cell and prevents default Tab to avoid jumping to Timeline.
+     */
+    handleSplitterBarKeydown(event) {
+        if (event.key === 'Tab' && !event.shiftKey) {
+            event.preventDefault();
+            // Call focusCell to update tracking and focus the DOM
+            // The TreeList handles setting proper tabindex on the focused cell
+            this.focusCell(this.activeTreeListCell.rowIndex, this.activeTreeListCell.colIndex);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: ScrollSyncService }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.25", ngImport: i0, type: NavigationService });
 }

package/navigation/navigation.service.d.ts

@@ -67,6 +67,7 @@ export declare class NavigationService implements OnDestroy {
      */
     private timelineLastActive;
     private metadata;
+    private bar;
     private _enabled;
     private _activeTimelineIndex;
     private _activeTreeListCell;
@@ -95,6 +96,7 @@ export declare class NavigationService implements OnDestroy {
     handleTimelineFocusIn({ target }: FocusEvent): void;
     /**
      * Updates the timeline focus state flag and notifies the active task to update its focused state.
+     * Restore bar to tab order when focus leaves Timeline.
      */
     handleTimelineFocusOut({ relatedTarget }: FocusEvent): void;
     /**
@@ -104,6 +106,11 @@ export declare class NavigationService implements OnDestroy {
      * when navigating in the Timeline has updated the expected TreeList focus target.
      */
     handleTreeListFocusIn(event: FocusEvent): void;
+    /**
+     * Handle focus leaving TreeList.
+     * Restore bar to tab order and demote the cell when focus leaves TreeList.
+     */
+    handleTreeListFocusOut(event: FocusEvent): void;
     updateActiveTimeLineIndex(index: number): void;
     updateActiveTreeListCell(): void;
     /**
@@ -125,6 +132,12 @@ export declare class NavigationService implements OnDestroy {
      * Otherwise cell clicks are wrongly overwritten in `handleTreeListFocusIn` and the click focus target is not respected.
      */
     private focusTreeList;
+    /**
+     * Intercept Tab key on splitter bar to focus the TreeList.
+     * Since TreeList first cell has tabindex="-1", Tab from bar won't naturally focus it.
+     * This handler manually focuses the cell and prevents default Tab to avoid jumping to Timeline.
+     */
+    private handleSplitterBarKeydown;
     static ɵfac: i0.ɵɵFactoryDeclaration<NavigationService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<NavigationService>;
 }

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783409430,
-  "version": "24.2.2-develop.8",
+  "publishDate": 1783411233,
+  "version": "24.2.2-develop.9",
   "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-gantt",
-  "version": "24.2.2-develop.8",
+  "version": "24.2.2-develop.9",
   "description": "Kendo UI Angular Gantt",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -41,7 +41,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783409430,
+      "publishDate": 1783411233,
       "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"
     }
   },
@@ -53,25 +53,25 @@
     "@angular/platform-browser": "19 - 22",
     "@progress/kendo-data-query": "^1.7.3",
     "@progress/kendo-licensing": "^1.11.0",
-    "@progress/kendo-angular-buttons": "24.2.2-develop.8",
-    "@progress/kendo-angular-common": "24.2.2-develop.8",
-    "@progress/kendo-angular-dialog": "24.2.2-develop.8",
-    "@progress/kendo-angular-dropdowns": "24.2.2-develop.8",
-    "@progress/kendo-angular-grid": "24.2.2-develop.8",
-    "@progress/kendo-angular-icons": "24.2.2-develop.8",
-    "@progress/kendo-angular-inputs": "24.2.2-develop.8",
-    "@progress/kendo-angular-intl": "24.2.2-develop.8",
-    "@progress/kendo-angular-l10n": "24.2.2-develop.8",
-    "@progress/kendo-angular-label": "24.2.2-develop.8",
-    "@progress/kendo-angular-layout": "24.2.2-develop.8",
-    "@progress/kendo-angular-popup": "24.2.2-develop.8",
-    "@progress/kendo-angular-tooltip": "24.2.2-develop.8",
-    "@progress/kendo-angular-treelist": "24.2.2-develop.8",
+    "@progress/kendo-angular-buttons": "24.2.2-develop.9",
+    "@progress/kendo-angular-common": "24.2.2-develop.9",
+    "@progress/kendo-angular-dialog": "24.2.2-develop.9",
+    "@progress/kendo-angular-dropdowns": "24.2.2-develop.9",
+    "@progress/kendo-angular-grid": "24.2.2-develop.9",
+    "@progress/kendo-angular-icons": "24.2.2-develop.9",
+    "@progress/kendo-angular-inputs": "24.2.2-develop.9",
+    "@progress/kendo-angular-intl": "24.2.2-develop.9",
+    "@progress/kendo-angular-l10n": "24.2.2-develop.9",
+    "@progress/kendo-angular-label": "24.2.2-develop.9",
+    "@progress/kendo-angular-layout": "24.2.2-develop.9",
+    "@progress/kendo-angular-popup": "24.2.2-develop.9",
+    "@progress/kendo-angular-tooltip": "24.2.2-develop.9",
+    "@progress/kendo-angular-treelist": "24.2.2-develop.9",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "24.2.2-develop.8",
+    "@progress/kendo-angular-schematics": "24.2.2-develop.9",
     "@progress/kendo-common": "^1.0.1",
     "@progress/kendo-date-math": "^1.5.2",
     "@progress/kendo-draggable": "^3.0.0"

package/schematics/ngAdd/index.js

@@ -12,16 +12,16 @@ function default_1(options) {
         // See https://github.com/telerik/kendo-schematics/issues/28
         peerDependencies: {
             // peer deps of the treelist
-            '@progress/kendo-angular-dateinputs': '24.2.2-develop.8',
-            '@progress/kendo-angular-excel-export': '24.2.2-develop.8',
-            '@progress/kendo-angular-pdf-export': '24.2.2-develop.8',
-            '@progress/kendo-angular-utils': '24.2.2-develop.8',
+            '@progress/kendo-angular-dateinputs': '24.2.2-develop.9',
+            '@progress/kendo-angular-excel-export': '24.2.2-develop.9',
+            '@progress/kendo-angular-pdf-export': '24.2.2-develop.9',
+            '@progress/kendo-angular-utils': '24.2.2-develop.9',
             '@progress/kendo-drawing': '^1.0.0',
             // peer deps of the dropdowns
-            '@progress/kendo-angular-treeview': '24.2.2-develop.8',
-            '@progress/kendo-angular-navigation': '24.2.2-develop.8',
+            '@progress/kendo-angular-treeview': '24.2.2-develop.9',
+            '@progress/kendo-angular-navigation': '24.2.2-develop.9',
             // peer dep of the layout
-            '@progress/kendo-angular-progressbar': '24.2.2-develop.8',
+            '@progress/kendo-angular-progressbar': '24.2.2-develop.9',
             // peer dep of the icons
             '@progress/kendo-svg-icons': '^4.0.0'
         } });