@progress/kendo-angular-gantt 11.2.0-develop.18 → 11.2.0-develop.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/esm2020/gantt.component.mjs +17 -2
  2. package/esm2020/package-metadata.mjs +2 -2
  3. package/esm2020/toolbar/toolbar-navigation.service.mjs +27 -0
  4. package/esm2020/toolbar/toolbar.component.mjs +64 -9
  5. package/esm2020/toolbar/view-selector.component.mjs +2 -2
  6. package/fesm2015/progress-kendo-angular-gantt.mjs +101 -12
  7. package/fesm2020/progress-kendo-angular-gantt.mjs +101 -12
  8. package/gantt.component.d.ts +6 -1
  9. package/package.json +13 -13
  10. package/schematics/ngAdd/index.js +10 -10
  11. package/toolbar/toolbar-navigation.service.d.ts +18 -0
  12. package/toolbar/toolbar.component.d.ts +11 -2
package/esm2020/gantt.component.mjs CHANGED
@@ -189,6 +189,11 @@ export class GanttComponent {
189
189
  * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
190
190
  */
191
191
  this.selectable = false;
192
+ /**
193
+ * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
194
+ * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
195
+ */
196
+ this.toolbarAriaLabel = 'Toolbar';
192
197
  /**
193
198
  * Defines the dependencies that will be drawn between the rendered tasks.
194
199
  *
@@ -1290,7 +1295,7 @@ export class GanttComponent {
1290
1295
  }
1291
1296
  }
1292
1297
  GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, deps: [{ token: i1.TimelineViewService }, { token: i2.ScrollSyncService }, { token: i0.Renderer2 }, { token: i3.MappingService }, { token: i4.OptionChangesService }, { token: i5.DependencyDomService }, { token: i6.EditService }, { token: i7.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i8.NavigationService }], target: i0.ɵɵFactoryTarget.Component });
1293
- GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
1298
+ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
1294
1299
  GanttLocalizationService,
1295
1300
  LocalizationService,
1296
1301
  {
@@ -1520,6 +1525,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1520
1525
  columnsReset="Reset"></ng-container>
1521
1526
  <kendo-gantt-toolbar
1522
1527
  *ngIf="showToolbar('top')"
1528
+ [attr.aria-label]="toolbarAriaLabel"
1523
1529
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
1524
1530
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
1525
1531
  [toolbarTemplate]="toolbarTemplate"
@@ -1527,6 +1533,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1527
1533
  [activeView]="activeView"
1528
1534
  class="k-gantt-header k-toolbar k-gantt-toolbar"
1529
1535
  position="top"
1536
+ [navigable]="navigable"
1530
1537
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
1531
1538
  <div class="k-gantt-content">
1532
1539
  <kendo-splitter [style.border]="0">
@@ -1659,11 +1666,13 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1659
1666
  </div>
1660
1667
  <kendo-gantt-toolbar
1661
1668
  *ngIf="showToolbar('bottom')"
1669
+ [attr.aria-label]="toolbarAriaLabel"
1662
1670
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
1663
1671
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
1664
1672
  [toolbarTemplate]="toolbarTemplate"
1665
1673
  [views]="viewTypes"
1666
1674
  [activeView]="activeView"
1675
+ [navigable]="navigable"
1667
1676
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
1668
1677
  position="bottom"></kendo-gantt-toolbar>
1669
1678
  <kendo-gantt-edit-dialog
@@ -1683,7 +1692,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
1683
1692
  <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
1684
1693
  </kendo-dialog-actions>
1685
1694
  </kendo-dialog>
1686
- `, isInline: true, components: [{ type: i9.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i10.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i10.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i12.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i13.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i14.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i14.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i15.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i16.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
1695
+ `, isInline: true, components: [{ type: i9.ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { type: i10.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i10.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: i12.GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: i13.EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i14.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i14.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i15.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i16.LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i17.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i18.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
1687
1696
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, decorators: [{
1688
1697
  type: Component,
1689
1698
  args: [{
@@ -1920,6 +1929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1920
1929
  columnsReset="Reset"></ng-container>
1921
1930
  <kendo-gantt-toolbar
1922
1931
  *ngIf="showToolbar('top')"
1932
+ [attr.aria-label]="toolbarAriaLabel"
1923
1933
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
1924
1934
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
1925
1935
  [toolbarTemplate]="toolbarTemplate"
@@ -1927,6 +1937,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
1927
1937
  [activeView]="activeView"
1928
1938
  class="k-gantt-header k-toolbar k-gantt-toolbar"
1929
1939
  position="top"
1940
+ [navigable]="navigable"
1930
1941
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
1931
1942
  <div class="k-gantt-content">
1932
1943
  <kendo-splitter [style.border]="0">
@@ -2059,11 +2070,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2059
2070
  </div>
2060
2071
  <kendo-gantt-toolbar
2061
2072
  *ngIf="showToolbar('bottom')"
2073
+ [attr.aria-label]="toolbarAriaLabel"
2062
2074
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
2063
2075
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
2064
2076
  [toolbarTemplate]="toolbarTemplate"
2065
2077
  [views]="viewTypes"
2066
2078
  [activeView]="activeView"
2079
+ [navigable]="navigable"
2067
2080
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
2068
2081
  position="bottom"></kendo-gantt-toolbar>
2069
2082
  <kendo-gantt-edit-dialog
@@ -2145,6 +2158,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
2145
2158
  type: Input
2146
2159
  }], toolbarSettings: [{
2147
2160
  type: Input
2161
+ }], toolbarAriaLabel: [{
2162
+ type: Input
2148
2163
  }], fetchChildren: [{
2149
2164
  type: Input
2150
2165
  }], hasChildren: [{
package/esm2020/package-metadata.mjs CHANGED
@@ -9,7 +9,7 @@ export const packageMetadata = {
9
9
  name: '@progress/kendo-angular-gantt',
10
10
  productName: 'Kendo UI for Angular',
11
11
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
12
- publishDate: 1676046372,
13
- version: '11.2.0-develop.18',
12
+ publishDate: 1676052416,
13
+ version: '11.2.0-develop.19',
14
14
  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'
15
15
  };
package/esm2020/toolbar/toolbar-navigation.service.mjs ADDED
@@ -0,0 +1,27 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Injectable, Renderer2 } from '@angular/core';
6
+ import * as i0 from "@angular/core";
7
+ /**
8
+ * @hidden
9
+ */
10
+ export class ToolbarNavigationService {
11
+ constructor(renderer) {
12
+ this.renderer = renderer;
13
+ this.focusIndex = 0;
14
+ }
15
+ updateFocus() {
16
+ this.focusableContent.forEach(el => {
17
+ this.renderer.setAttribute(el, 'tabindex', '-1');
18
+ });
19
+ this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
20
+ this.focusableContent[this.focusIndex].focus();
21
+ }
22
+ }
23
+ ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
24
+ ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
25
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
26
+ type: Injectable
27
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
package/esm2020/toolbar/toolbar.component.mjs CHANGED
@@ -3,21 +3,55 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ToolbarTemplateDirective } from './toolbar-template.directive';
6
- import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core';
6
+ import { Component, Input, HostBinding, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
7
+ import { ToolbarNavigationService } from './toolbar-navigation.service';
8
+ import { closest, focusableSelector, isDocumentAvailable, isFocusable, isVisible } from '@progress/kendo-angular-common';
7
9
  import * as i0 from "@angular/core";
8
- import * as i1 from "../editing/add-task.component";
9
- import * as i2 from "./view-selector.component";
10
- import * as i3 from "@angular/common";
10
+ import * as i1 from "./toolbar-navigation.service";
11
+ import * as i2 from "../editing/add-task.component";
12
+ import * as i3 from "./view-selector.component";
13
+ import * as i4 from "@angular/common";
11
14
  /**
12
15
  * @hidden
13
16
  */
14
17
  export class ToolbarComponent {
15
- constructor() {
18
+ constructor(hostEl, navigationService) {
19
+ this.hostEl = hostEl;
20
+ this.navigationService = navigationService;
16
21
  this.context = {};
17
22
  this.role = 'toolbar';
18
23
  this.toolbarSizingClass = true;
19
24
  this.activeViewChange = new EventEmitter();
20
25
  }
26
+ clickHandler(ev) {
27
+ if (this.navigable) {
28
+ const closestFocusable = closest(ev.target, isFocusable);
29
+ const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
30
+ if (targetIndex > -1) {
31
+ this.navigationService.focusIndex = targetIndex;
32
+ }
33
+ this.navigationService.updateFocus();
34
+ }
35
+ }
36
+ ;
37
+ arrowLeftListener() {
38
+ if (this.navigable && isDocumentAvailable()) {
39
+ this.navigationService.focusIndex--;
40
+ if (this.navigationService.focusIndex < 0) {
41
+ this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
42
+ }
43
+ this.navigationService.updateFocus();
44
+ }
45
+ }
46
+ arrowRightListener() {
47
+ if (this.navigable && isDocumentAvailable()) {
48
+ this.navigationService.focusIndex++;
49
+ if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
50
+ this.navigationService.focusIndex = 0;
51
+ }
52
+ this.navigationService.updateFocus();
53
+ }
54
+ }
21
55
  set position(value) {
22
56
  this.context.position = this._position = value;
23
57
  }
@@ -35,9 +69,18 @@ export class ToolbarComponent {
35
69
  handleViewChange(view) {
36
70
  this.activeViewChange.emit(view);
37
71
  }
72
+ ngAfterViewInit() {
73
+ if (isDocumentAvailable()) {
74
+ const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
75
+ .filter(el => isVisible(el));
76
+ if (focusableElements.length) {
77
+ this.navigationService.focusableContent = focusableElements;
78
+ }
79
+ }
80
+ }
38
81
  }
39
- ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
40
- ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, ngImport: i0, template: `
82
+ ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: i1.ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
83
+ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", navigable: "navigable", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, providers: [ToolbarNavigationService], ngImport: i0, template: `
41
84
  <ng-container *ngIf="!renderTemplate">
42
85
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
43
86
  <span class="k-spacer k-toolbar-spacer"></span>
@@ -53,11 +96,12 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
53
96
  [ngTemplateOutletContext]="context"
54
97
  >
55
98
  </ng-template>
56
- `, isInline: true, components: [{ type: i1.GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: ["data", "icon"] }, { type: i2.ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
99
+ `, isInline: true, components: [{ type: i2.GanttAddTaskComponent, selector: "kendo-gantt-add-task", inputs: ["data", "icon"] }, { type: i3.ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: ["views", "activeView"], outputs: ["activeViewChange"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
57
100
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
58
101
  type: Component,
59
102
  args: [{
60
103
  selector: 'kendo-gantt-toolbar',
104
+ providers: [ToolbarNavigationService],
61
105
  template: `
62
106
  <ng-container *ngIf="!renderTemplate">
63
107
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
@@ -76,12 +120,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
76
120
  </ng-template>
77
121
  `
78
122
  }]
79
- }], propDecorators: { role: [{
123
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ToolbarNavigationService }]; }, propDecorators: { role: [{
80
124
  type: HostBinding,
81
125
  args: ['attr.role']
82
126
  }], toolbarSizingClass: [{
83
127
  type: HostBinding,
84
128
  args: ['class.k-toolbar-md']
129
+ }], clickHandler: [{
130
+ type: HostListener,
131
+ args: ['click', ['$event']]
132
+ }], arrowLeftListener: [{
133
+ type: HostListener,
134
+ args: ['keydown.arrowleft', ['$event']]
135
+ }], arrowRightListener: [{
136
+ type: HostListener,
137
+ args: ['keydown.arrowright', ['$event']]
85
138
  }], activeViewChange: [{
86
139
  type: Output
87
140
  }], showAddTask: [{
@@ -94,6 +147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
94
147
  type: Input
95
148
  }], toolbarTemplate: [{
96
149
  type: Input
150
+ }], navigable: [{
151
+ type: Input
97
152
  }], position: [{
98
153
  type: Input
99
154
  }] } });
package/esm2020/toolbar/view-selector.component.mjs CHANGED
@@ -56,7 +56,7 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
56
56
  (change)="onActiveViewChange($event)">
57
57
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
58
58
  </select>
59
- <kendo-buttongroup class="k-gantt-views" selection="single">
59
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
60
60
  <button *ngFor="let view of views"
61
61
  kendoButton
62
62
  type="button"
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
76
76
  (change)="onActiveViewChange($event)">
77
77
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
78
78
  </select>
79
- <kendo-buttongroup class="k-gantt-views" selection="single">
79
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
80
80
  <button *ngFor="let view of views"
81
81
  kendoButton
82
82
  type="button"
package/fesm2015/progress-kendo-angular-gantt.mjs CHANGED
@@ -3,13 +3,13 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, isDevMode, NgModule } from '@angular/core';
6
+ import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
7
7
  import * as i11 from '@progress/kendo-angular-treelist';
8
8
  import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
9
9
  import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
10
10
  import { validatePackage } from '@progress/kendo-licensing';
11
11
  import * as i9 from '@progress/kendo-angular-common';
12
- import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
12
+ import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
13
13
  import { map, distinctUntilChanged, take, expand, reduce, switchMap, filter } from 'rxjs/operators';
14
14
  import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
15
15
  import { getter, touchEnabled } from '@progress/kendo-common';
@@ -50,8 +50,8 @@ const packageMetadata = {
50
50
  name: '@progress/kendo-angular-gantt',
51
51
  productName: 'Kendo UI for Angular',
52
52
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
53
- publishDate: 1676046372,
54
- version: '11.2.0-develop.18',
53
+ publishDate: 1676052416,
54
+ version: '11.2.0-develop.19',
55
55
  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'
56
56
  };
57
57
 
@@ -3929,6 +3929,28 @@ const mapPath = (item) => ({
3929
3929
  parent: item.parent.data ? mapPath(item.parent) : null
3930
3930
  });
3931
3931
 
3932
+ /**
3933
+ * @hidden
3934
+ */
3935
+ class ToolbarNavigationService {
3936
+ constructor(renderer) {
3937
+ this.renderer = renderer;
3938
+ this.focusIndex = 0;
3939
+ }
3940
+ updateFocus() {
3941
+ this.focusableContent.forEach(el => {
3942
+ this.renderer.setAttribute(el, 'tabindex', '-1');
3943
+ });
3944
+ this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
3945
+ this.focusableContent[this.focusIndex].focus();
3946
+ }
3947
+ }
3948
+ ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
3949
+ ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
3950
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
3951
+ type: Injectable
3952
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
3953
+
3932
3954
  /**
3933
3955
  * The UI for adding new items to the Gantt.
3934
3956
  * Use it within a toolbar template to provide a custom icon or list of options.
@@ -4076,7 +4098,7 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
4076
4098
  (change)="onActiveViewChange($event)">
4077
4099
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
4078
4100
  </select>
4079
- <kendo-buttongroup class="k-gantt-views" selection="single">
4101
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
4080
4102
  <button *ngFor="let view of views"
4081
4103
  kendoButton
4082
4104
  type="button"
@@ -4096,7 +4118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4096
4118
  (change)="onActiveViewChange($event)">
4097
4119
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
4098
4120
  </select>
4099
- <kendo-buttongroup class="k-gantt-views" selection="single">
4121
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
4100
4122
  <button *ngFor="let view of views"
4101
4123
  kendoButton
4102
4124
  type="button"
@@ -4120,12 +4142,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4120
4142
  * @hidden
4121
4143
  */
4122
4144
  class ToolbarComponent {
4123
- constructor() {
4145
+ constructor(hostEl, navigationService) {
4146
+ this.hostEl = hostEl;
4147
+ this.navigationService = navigationService;
4124
4148
  this.context = {};
4125
4149
  this.role = 'toolbar';
4126
4150
  this.toolbarSizingClass = true;
4127
4151
  this.activeViewChange = new EventEmitter();
4128
4152
  }
4153
+ clickHandler(ev) {
4154
+ if (this.navigable) {
4155
+ const closestFocusable = closest(ev.target, isFocusable);
4156
+ const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
4157
+ if (targetIndex > -1) {
4158
+ this.navigationService.focusIndex = targetIndex;
4159
+ }
4160
+ this.navigationService.updateFocus();
4161
+ }
4162
+ }
4163
+ ;
4164
+ arrowLeftListener() {
4165
+ if (this.navigable && isDocumentAvailable()) {
4166
+ this.navigationService.focusIndex--;
4167
+ if (this.navigationService.focusIndex < 0) {
4168
+ this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
4169
+ }
4170
+ this.navigationService.updateFocus();
4171
+ }
4172
+ }
4173
+ arrowRightListener() {
4174
+ if (this.navigable && isDocumentAvailable()) {
4175
+ this.navigationService.focusIndex++;
4176
+ if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
4177
+ this.navigationService.focusIndex = 0;
4178
+ }
4179
+ this.navigationService.updateFocus();
4180
+ }
4181
+ }
4129
4182
  set position(value) {
4130
4183
  this.context.position = this._position = value;
4131
4184
  }
@@ -4143,9 +4196,18 @@ class ToolbarComponent {
4143
4196
  handleViewChange(view) {
4144
4197
  this.activeViewChange.emit(view);
4145
4198
  }
4199
+ ngAfterViewInit() {
4200
+ if (isDocumentAvailable()) {
4201
+ const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
4202
+ .filter(el => isVisible(el));
4203
+ if (focusableElements.length) {
4204
+ this.navigationService.focusableContent = focusableElements;
4205
+ }
4206
+ }
4207
+ }
4146
4208
  }
4147
- ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4148
- ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, ngImport: i0, template: `
4209
+ ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
4210
+ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", navigable: "navigable", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, providers: [ToolbarNavigationService], ngImport: i0, template: `
4149
4211
  <ng-container *ngIf="!renderTemplate">
4150
4212
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
4151
4213
  <span class="k-spacer k-toolbar-spacer"></span>
@@ -4166,6 +4228,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4166
4228
  type: Component,
4167
4229
  args: [{
4168
4230
  selector: 'kendo-gantt-toolbar',
4231
+ providers: [ToolbarNavigationService],
4169
4232
  template: `
4170
4233
  <ng-container *ngIf="!renderTemplate">
4171
4234
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
@@ -4184,12 +4247,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4184
4247
  </ng-template>
4185
4248
  `
4186
4249
  }]
4187
- }], propDecorators: { role: [{
4250
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }]; }, propDecorators: { role: [{
4188
4251
  type: HostBinding,
4189
4252
  args: ['attr.role']
4190
4253
  }], toolbarSizingClass: [{
4191
4254
  type: HostBinding,
4192
4255
  args: ['class.k-toolbar-md']
4256
+ }], clickHandler: [{
4257
+ type: HostListener,
4258
+ args: ['click', ['$event']]
4259
+ }], arrowLeftListener: [{
4260
+ type: HostListener,
4261
+ args: ['keydown.arrowleft', ['$event']]
4262
+ }], arrowRightListener: [{
4263
+ type: HostListener,
4264
+ args: ['keydown.arrowright', ['$event']]
4193
4265
  }], activeViewChange: [{
4194
4266
  type: Output
4195
4267
  }], showAddTask: [{
@@ -4202,6 +4274,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4202
4274
  type: Input
4203
4275
  }], toolbarTemplate: [{
4204
4276
  type: Input
4277
+ }], navigable: [{
4278
+ type: Input
4205
4279
  }], position: [{
4206
4280
  type: Input
4207
4281
  }] } });
@@ -4942,6 +5016,11 @@ class GanttComponent {
4942
5016
  * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
4943
5017
  */
4944
5018
  this.selectable = false;
5019
+ /**
5020
+ * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
5021
+ * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
5022
+ */
5023
+ this.toolbarAriaLabel = 'Toolbar';
4945
5024
  /**
4946
5025
  * Defines the dependencies that will be drawn between the rendered tasks.
4947
5026
  *
@@ -6034,7 +6113,7 @@ class GanttComponent {
6034
6113
  }
6035
6114
  }
6036
6115
  GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
6037
- GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
6116
+ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
6038
6117
  GanttLocalizationService,
6039
6118
  LocalizationService,
6040
6119
  {
@@ -6264,6 +6343,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6264
6343
  columnsReset="Reset"></ng-container>
6265
6344
  <kendo-gantt-toolbar
6266
6345
  *ngIf="showToolbar('top')"
6346
+ [attr.aria-label]="toolbarAriaLabel"
6267
6347
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
6268
6348
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
6269
6349
  [toolbarTemplate]="toolbarTemplate"
@@ -6271,6 +6351,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6271
6351
  [activeView]="activeView"
6272
6352
  class="k-gantt-header k-toolbar k-gantt-toolbar"
6273
6353
  position="top"
6354
+ [navigable]="navigable"
6274
6355
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
6275
6356
  <div class="k-gantt-content">
6276
6357
  <kendo-splitter [style.border]="0">
@@ -6403,11 +6484,13 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6403
6484
  </div>
6404
6485
  <kendo-gantt-toolbar
6405
6486
  *ngIf="showToolbar('bottom')"
6487
+ [attr.aria-label]="toolbarAriaLabel"
6406
6488
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
6407
6489
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
6408
6490
  [toolbarTemplate]="toolbarTemplate"
6409
6491
  [views]="viewTypes"
6410
6492
  [activeView]="activeView"
6493
+ [navigable]="navigable"
6411
6494
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
6412
6495
  position="bottom"></kendo-gantt-toolbar>
6413
6496
  <kendo-gantt-edit-dialog
@@ -6427,7 +6510,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6427
6510
  <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
6428
6511
  </kendo-dialog-actions>
6429
6512
  </kendo-dialog>
6430
- `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i5$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6513
+ `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { type: i5$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6431
6514
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, decorators: [{
6432
6515
  type: Component,
6433
6516
  args: [{
@@ -6664,6 +6747,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6664
6747
  columnsReset="Reset"></ng-container>
6665
6748
  <kendo-gantt-toolbar
6666
6749
  *ngIf="showToolbar('top')"
6750
+ [attr.aria-label]="toolbarAriaLabel"
6667
6751
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
6668
6752
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
6669
6753
  [toolbarTemplate]="toolbarTemplate"
@@ -6671,6 +6755,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6671
6755
  [activeView]="activeView"
6672
6756
  class="k-gantt-header k-toolbar k-gantt-toolbar"
6673
6757
  position="top"
6758
+ [navigable]="navigable"
6674
6759
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
6675
6760
  <div class="k-gantt-content">
6676
6761
  <kendo-splitter [style.border]="0">
@@ -6803,11 +6888,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6803
6888
  </div>
6804
6889
  <kendo-gantt-toolbar
6805
6890
  *ngIf="showToolbar('bottom')"
6891
+ [attr.aria-label]="toolbarAriaLabel"
6806
6892
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
6807
6893
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
6808
6894
  [toolbarTemplate]="toolbarTemplate"
6809
6895
  [views]="viewTypes"
6810
6896
  [activeView]="activeView"
6897
+ [navigable]="navigable"
6811
6898
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
6812
6899
  position="bottom"></kendo-gantt-toolbar>
6813
6900
  <kendo-gantt-edit-dialog
@@ -6889,6 +6976,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6889
6976
  type: Input
6890
6977
  }], toolbarSettings: [{
6891
6978
  type: Input
6979
+ }], toolbarAriaLabel: [{
6980
+ type: Input
6892
6981
  }], fetchChildren: [{
6893
6982
  type: Input
6894
6983
  }], hasChildren: [{
package/fesm2020/progress-kendo-angular-gantt.mjs CHANGED
@@ -3,14 +3,14 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import * as i0 from '@angular/core';
6
- import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, isDevMode, NgModule } from '@angular/core';
6
+ import { Injectable, Component, HostBinding, Input, InjectionToken, EventEmitter, Directive, ViewChild, forwardRef, Inject, ViewContainerRef, Output, Optional, QueryList, SkipSelf, Host, ContentChildren, ContentChild, HostListener, isDevMode, NgModule } from '@angular/core';
7
7
  import * as i11 from '@progress/kendo-angular-treelist';
8
8
  import { ColumnBase, ColumnComponent, ColumnGroupComponent, SpanColumnComponent, DataBoundTreeComponent, ExpandableTreeComponent, TreeListComponent, FlatBindingDirective, HierarchyBindingDirective, ExpandableDirective, TreeListModule } from '@progress/kendo-angular-treelist';
9
9
  import { cloneDate, addWeeks, firstDayInWeek, addDays, lastDayOfMonth, getDate, firstDayOfMonth, addMonths, lastMonthOfYear, MS_PER_HOUR, MS_PER_DAY, isEqual } from '@progress/kendo-date-math';
10
10
  import { Subject, Subscription, fromEvent, forkJoin, EMPTY, isObservable, of } from 'rxjs';
11
11
  import { validatePackage } from '@progress/kendo-licensing';
12
12
  import * as i9 from '@progress/kendo-angular-common';
13
- import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
13
+ import { Keys, isDocumentAvailable, closestInScope, matchesClasses, PreventableEvent, anyChanged, closest, isFocusable, focusableSelector, isVisible, hasObservers, EventsModule, DraggableModule } from '@progress/kendo-angular-common';
14
14
  import { map, distinctUntilChanged, take, expand, reduce, switchMap, filter } from 'rxjs/operators';
15
15
  import { getter, touchEnabled } from '@progress/kendo-common';
16
16
  import * as i6 from '@angular/common';
@@ -50,8 +50,8 @@ const packageMetadata = {
50
50
  name: '@progress/kendo-angular-gantt',
51
51
  productName: 'Kendo UI for Angular',
52
52
  productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
53
- publishDate: 1676046372,
54
- version: '11.2.0-develop.18',
53
+ publishDate: 1676052416,
54
+ version: '11.2.0-develop.19',
55
55
  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'
56
56
  };
57
57
 
@@ -3895,6 +3895,28 @@ const mapPath = (item) => ({
3895
3895
  parent: item.parent.data ? mapPath(item.parent) : null
3896
3896
  });
3897
3897
 
3898
+ /**
3899
+ * @hidden
3900
+ */
3901
+ class ToolbarNavigationService {
3902
+ constructor(renderer) {
3903
+ this.renderer = renderer;
3904
+ this.focusIndex = 0;
3905
+ }
3906
+ updateFocus() {
3907
+ this.focusableContent.forEach(el => {
3908
+ this.renderer.setAttribute(el, 'tabindex', '-1');
3909
+ });
3910
+ this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
3911
+ this.focusableContent[this.focusIndex].focus();
3912
+ }
3913
+ }
3914
+ ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
3915
+ ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
3916
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
3917
+ type: Injectable
3918
+ }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });
3919
+
3898
3920
  /**
3899
3921
  * The UI for adding new items to the Gantt.
3900
3922
  * Use it within a toolbar template to provide a custom icon or list of options.
@@ -4042,7 +4064,7 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
4042
4064
  (change)="onActiveViewChange($event)">
4043
4065
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
4044
4066
  </select>
4045
- <kendo-buttongroup class="k-gantt-views" selection="single">
4067
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
4046
4068
  <button *ngFor="let view of views"
4047
4069
  kendoButton
4048
4070
  type="button"
@@ -4062,7 +4084,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4062
4084
  (change)="onActiveViewChange($event)">
4063
4085
  <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
4064
4086
  </select>
4065
- <kendo-buttongroup class="k-gantt-views" selection="single">
4087
+ <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
4066
4088
  <button *ngFor="let view of views"
4067
4089
  kendoButton
4068
4090
  type="button"
@@ -4086,12 +4108,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4086
4108
  * @hidden
4087
4109
  */
4088
4110
  class ToolbarComponent {
4089
- constructor() {
4111
+ constructor(hostEl, navigationService) {
4112
+ this.hostEl = hostEl;
4113
+ this.navigationService = navigationService;
4090
4114
  this.context = {};
4091
4115
  this.role = 'toolbar';
4092
4116
  this.toolbarSizingClass = true;
4093
4117
  this.activeViewChange = new EventEmitter();
4094
4118
  }
4119
+ clickHandler(ev) {
4120
+ if (this.navigable) {
4121
+ const closestFocusable = closest(ev.target, isFocusable);
4122
+ const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
4123
+ if (targetIndex > -1) {
4124
+ this.navigationService.focusIndex = targetIndex;
4125
+ }
4126
+ this.navigationService.updateFocus();
4127
+ }
4128
+ }
4129
+ ;
4130
+ arrowLeftListener() {
4131
+ if (this.navigable && isDocumentAvailable()) {
4132
+ this.navigationService.focusIndex--;
4133
+ if (this.navigationService.focusIndex < 0) {
4134
+ this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
4135
+ }
4136
+ this.navigationService.updateFocus();
4137
+ }
4138
+ }
4139
+ arrowRightListener() {
4140
+ if (this.navigable && isDocumentAvailable()) {
4141
+ this.navigationService.focusIndex++;
4142
+ if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
4143
+ this.navigationService.focusIndex = 0;
4144
+ }
4145
+ this.navigationService.updateFocus();
4146
+ }
4147
+ }
4095
4148
  set position(value) {
4096
4149
  this.context.position = this._position = value;
4097
4150
  }
@@ -4109,9 +4162,18 @@ class ToolbarComponent {
4109
4162
  handleViewChange(view) {
4110
4163
  this.activeViewChange.emit(view);
4111
4164
  }
4165
+ ngAfterViewInit() {
4166
+ if (isDocumentAvailable()) {
4167
+ const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
4168
+ .filter(el => isVisible(el));
4169
+ if (focusableElements.length) {
4170
+ this.navigationService.focusableContent = focusableElements;
4171
+ }
4172
+ }
4173
+ }
4112
4174
  }
4113
- ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4114
- ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, ngImport: i0, template: `
4175
+ ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, deps: [{ token: i0.ElementRef }, { token: ToolbarNavigationService }], target: i0.ɵɵFactoryTarget.Component });
4176
+ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: { showAddTask: "showAddTask", showViewSelector: "showViewSelector", views: "views", activeView: "activeView", toolbarTemplate: "toolbarTemplate", navigable: "navigable", position: "position" }, outputs: { activeViewChange: "activeViewChange" }, host: { listeners: { "click": "clickHandler($event)", "keydown.arrowleft": "arrowLeftListener($event)", "keydown.arrowright": "arrowRightListener($event)" }, properties: { "attr.role": "this.role", "class.k-toolbar-md": "this.toolbarSizingClass" } }, providers: [ToolbarNavigationService], ngImport: i0, template: `
4115
4177
  <ng-container *ngIf="!renderTemplate">
4116
4178
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
4117
4179
  <span class="k-spacer k-toolbar-spacer"></span>
@@ -4132,6 +4194,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4132
4194
  type: Component,
4133
4195
  args: [{
4134
4196
  selector: 'kendo-gantt-toolbar',
4197
+ providers: [ToolbarNavigationService],
4135
4198
  template: `
4136
4199
  <ng-container *ngIf="!renderTemplate">
4137
4200
  <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
@@ -4150,12 +4213,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4150
4213
  </ng-template>
4151
4214
  `
4152
4215
  }]
4153
- }], propDecorators: { role: [{
4216
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ToolbarNavigationService }]; }, propDecorators: { role: [{
4154
4217
  type: HostBinding,
4155
4218
  args: ['attr.role']
4156
4219
  }], toolbarSizingClass: [{
4157
4220
  type: HostBinding,
4158
4221
  args: ['class.k-toolbar-md']
4222
+ }], clickHandler: [{
4223
+ type: HostListener,
4224
+ args: ['click', ['$event']]
4225
+ }], arrowLeftListener: [{
4226
+ type: HostListener,
4227
+ args: ['keydown.arrowleft', ['$event']]
4228
+ }], arrowRightListener: [{
4229
+ type: HostListener,
4230
+ args: ['keydown.arrowright', ['$event']]
4159
4231
  }], activeViewChange: [{
4160
4232
  type: Output
4161
4233
  }], showAddTask: [{
@@ -4168,6 +4240,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
4168
4240
  type: Input
4169
4241
  }], toolbarTemplate: [{
4170
4242
  type: Input
4243
+ }], navigable: [{
4244
+ type: Input
4171
4245
  }], position: [{
4172
4246
  type: Input
4173
4247
  }] } });
@@ -4908,6 +4982,11 @@ class GanttComponent {
4908
4982
  * > When applied, the [`SelectableDirective`]({% slug api_gantt_selectabledirective %}) sets `selectable` to `true` internally.
4909
4983
  */
4910
4984
  this.selectable = false;
4985
+ /**
4986
+ * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
4987
+ * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
4988
+ */
4989
+ this.toolbarAriaLabel = 'Toolbar';
4911
4990
  /**
4912
4991
  * Defines the dependencies that will be drawn between the rendered tasks.
4913
4992
  *
@@ -6009,7 +6088,7 @@ class GanttComponent {
6009
6088
  }
6010
6089
  }
6011
6090
  GanttComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, deps: [{ token: TimelineViewService }, { token: ScrollSyncService }, { token: i0.Renderer2 }, { token: MappingService }, { token: OptionChangesService }, { token: DependencyDomService }, { token: EditService }, { token: i1$1.LocalizationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
6012
- GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
6091
+ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: GanttComponent, selector: "kendo-gantt", inputs: { roleDescription: ["aria-roledescription", "roleDescription"], role: "role", taskModelFields: "taskModelFields", dependencyModelFields: "dependencyModelFields", activeView: "activeView", data: "data", isSelected: "isSelected", validateNewDependency: "validateNewDependency", selectable: "selectable", toolbarSettings: "toolbarSettings", toolbarAriaLabel: "toolbarAriaLabel", fetchChildren: "fetchChildren", hasChildren: "hasChildren", dependencies: "dependencies", sortable: "sortable", sort: "sort", filterable: "filterable", filter: "filter", workDayStart: "workDayStart", workDayEnd: "workDayEnd", workWeekStart: "workWeekStart", workWeekEnd: "workWeekEnd", navigable: "navigable", timelinePaneOptions: "timelinePaneOptions", treeListPaneOptions: "treeListPaneOptions", taskClass: "taskClass", rowClass: "rowClass", isExpanded: "isExpanded", columnsAutoSize: "columnsAutoSize", columnMenu: "columnMenu", columnsReorderable: "columnsReorderable", columnsResizable: "columnsResizable", dragScrollSettings: "dragScrollSettings" }, outputs: { selectionChange: "selectionChange", rowExpand: "rowExpand", taskDblClick: "taskDblClick", cellDblClick: "cellDblClick", cellClose: "cellClose", taskDelete: "taskDelete", rowCollapse: "rowCollapse", remove: "remove", cancel: "cancel", save: "save", taskAdd: "taskAdd", dependencyAdd: "dependencyAdd", sortChange: "sortChange", filterChange: "filterChange", dataStateChange: "dataStateChange", treeListPaneCollapsedChange: "treeListPaneCollapsedChange", timelinePaneCollapsedChange: "timelinePaneCollapsedChange", timelinePaneSizeChange: "timelinePaneSizeChange", activeViewChange: "activeViewChange", columnResize: "columnResize", columnReorder: "columnReorder", columnVisibilityChange: "columnVisibilityChange", columnLockedChange: "columnLockedChange", cellClick: "cellClick", taskClick: "taskClick" }, host: { properties: { "attr.aria-roledescription": "this.hostRoleDescriptionAttr", "attr.role": "this.hostRoleAttr", "class.k-gantt": "this.hostClasses", "attr.dir": "this.dir" } }, providers: [
6013
6092
  GanttLocalizationService,
6014
6093
  LocalizationService,
6015
6094
  {
@@ -6239,6 +6318,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6239
6318
  columnsReset="Reset"></ng-container>
6240
6319
  <kendo-gantt-toolbar
6241
6320
  *ngIf="showToolbar('top')"
6321
+ [attr.aria-label]="toolbarAriaLabel"
6242
6322
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
6243
6323
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
6244
6324
  [toolbarTemplate]="toolbarTemplate"
@@ -6246,6 +6326,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6246
6326
  [activeView]="activeView"
6247
6327
  class="k-gantt-header k-toolbar k-gantt-toolbar"
6248
6328
  position="top"
6329
+ [navigable]="navigable"
6249
6330
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
6250
6331
  <div class="k-gantt-content">
6251
6332
  <kendo-splitter [style.border]="0">
@@ -6378,11 +6459,13 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6378
6459
  </div>
6379
6460
  <kendo-gantt-toolbar
6380
6461
  *ngIf="showToolbar('bottom')"
6462
+ [attr.aria-label]="toolbarAriaLabel"
6381
6463
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
6382
6464
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
6383
6465
  [toolbarTemplate]="toolbarTemplate"
6384
6466
  [views]="viewTypes"
6385
6467
  [activeView]="activeView"
6468
+ [navigable]="navigable"
6386
6469
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
6387
6470
  position="bottom"></kendo-gantt-toolbar>
6388
6471
  <kendo-gantt-edit-dialog
@@ -6402,7 +6485,7 @@ GanttComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version
6402
6485
  <button kendoButton (click)="handleConfirmationDialogClose()">{{ getText('cancelButtonText') }}</button>
6403
6486
  </kendo-dialog-actions>
6404
6487
  </kendo-dialog>
6405
- `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "position"], outputs: ["activeViewChange"] }, { type: i5$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6488
+ `, isInline: true, components: [{ type: ToolbarComponent, selector: "kendo-gantt-toolbar", inputs: ["showAddTask", "showViewSelector", "views", "activeView", "toolbarTemplate", "navigable", "position"], outputs: ["activeViewChange"] }, { type: i5$1.SplitterComponent, selector: "kendo-splitter", inputs: ["orientation", "resizeStep"], outputs: ["layoutChange"], exportAs: ["kendoSplitter"] }, { type: i5$1.SplitterPaneComponent, selector: "kendo-splitter-pane", inputs: ["order", "size", "separatorLabel", "min", "max", "resizable", "collapsible", "scrollable", "collapsed", "orientation", "containsSplitter", "overlayContent"], outputs: ["sizeChange", "collapsedChange"], exportAs: ["kendoSplitterPane"] }, { type: i11.TreeListComponent, selector: "kendo-treelist", inputs: ["aria-label", "data", "pageSize", "height", "rowHeight", "skip", "scrollable", "sort", "trackBy", "filter", "virtualColumns", "filterable", "sortable", "pageable", "navigable", "navigatable", "autoSize", "rowClass", "resizable", "reorderable", "loading", "columnMenu", "hideHeader", "idField", "selectable", "isSelected", "columns", "fetchChildren", "hasChildren", "isExpanded"], outputs: ["selectionChange", "filterChange", "pageChange", "sortChange", "dataStateChange", "edit", "cancel", "save", "remove", "add", "cellClose", "cellClick", "pdfExport", "excelExport", "columnResize", "columnReorder", "columnVisibilityChange", "columnLockedChange", "scrollBottom", "contentScroll", "expand", "collapse", "expandStateChange"], exportAs: ["kendoTreeList"] }, { type: i11.CustomMessagesComponent, selector: "kendo-treelist-messages" }, { type: GanttTimelineComponent, selector: "kendo-gantt-timeline", inputs: ["rows", "slots", "groupSlots", "tableWidth", "activeView", "taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "taskClass", "renderDependencyDragClues", "dragScrollSettings", "selectable", "isTaskSelected", "isExpanded", "dependencies"], outputs: ["timelineContainerPress", "timelineContainerDrag", "timelineContainerRelease"] }, { type: EditDialogComponent, selector: "kendo-gantt-edit-dialog", inputs: ["data"] }, { type: i4$2.DialogComponent, selector: "kendo-dialog", inputs: ["actions", "actionsLayout", "autoFocusedElement", "title", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "animation", "themeColor"], outputs: ["action", "close"], exportAs: ["kendoDialog"] }, { type: i4$2.DialogActionsComponent, selector: "kendo-dialog-actions", inputs: ["actions", "layout"], outputs: ["action"] }, { type: i11.TreeListSpacerComponent, selector: "kendo-treelist-spacer, kendo-treelist-pager-spacer", inputs: ["width"] }, { type: i2.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoGanttLocalizedMessages]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }] });
6406
6489
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GanttComponent, decorators: [{
6407
6490
  type: Component,
6408
6491
  args: [{
@@ -6639,6 +6722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6639
6722
  columnsReset="Reset"></ng-container>
6640
6723
  <kendo-gantt-toolbar
6641
6724
  *ngIf="showToolbar('top')"
6725
+ [attr.aria-label]="toolbarAriaLabel"
6642
6726
  [showAddTask]="toolbarSettings.addTaskTool === 'top' || toolbarSettings.addTaskTool === 'both'"
6643
6727
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'top' || toolbarSettings.viewSelectorTool === 'both'"
6644
6728
  [toolbarTemplate]="toolbarTemplate"
@@ -6646,6 +6730,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6646
6730
  [activeView]="activeView"
6647
6731
  class="k-gantt-header k-toolbar k-gantt-toolbar"
6648
6732
  position="top"
6733
+ [navigable]="navigable"
6649
6734
  (activeViewChange)="changeActiveView($event)"></kendo-gantt-toolbar>
6650
6735
  <div class="k-gantt-content">
6651
6736
  <kendo-splitter [style.border]="0">
@@ -6778,11 +6863,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6778
6863
  </div>
6779
6864
  <kendo-gantt-toolbar
6780
6865
  *ngIf="showToolbar('bottom')"
6866
+ [attr.aria-label]="toolbarAriaLabel"
6781
6867
  [showAddTask]="toolbarSettings.addTaskTool === 'bottom' || toolbarSettings.addTaskTool === 'both'"
6782
6868
  [showViewSelector]="toolbarSettings.viewSelectorTool === 'bottom' || toolbarSettings.viewSelectorTool === 'both'"
6783
6869
  [toolbarTemplate]="toolbarTemplate"
6784
6870
  [views]="viewTypes"
6785
6871
  [activeView]="activeView"
6872
+ [navigable]="navigable"
6786
6873
  class="k-gantt-footer k-toolbar k-gantt-toolbar"
6787
6874
  position="bottom"></kendo-gantt-toolbar>
6788
6875
  <kendo-gantt-edit-dialog
@@ -6864,6 +6951,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
6864
6951
  type: Input
6865
6952
  }], toolbarSettings: [{
6866
6953
  type: Input
6954
+ }], toolbarAriaLabel: [{
6955
+ type: Input
6867
6956
  }], fetchChildren: [{
6868
6957
  type: Input
6869
6958
  }], hasChildren: [{
package/gantt.component.d.ts CHANGED
@@ -244,6 +244,11 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
244
244
  */
245
245
  set toolbarSettings(value: ToolbarSettings);
246
246
  get toolbarSettings(): ToolbarSettings;
247
+ /**
248
+ * Allows setting the toolbar(s) `aria-label` attribute value as necessary to comply with accessibility requirements.
249
+ * Typically, toolbars need an `aria-label` when there is more than one toolbar in the application.
250
+ */
251
+ toolbarAriaLabel: string;
247
252
  /**
248
253
  * Gets or sets the callback function that retrieves the child items for a particular item.
249
254
  */
@@ -746,5 +751,5 @@ export declare class GanttComponent implements AfterContentInit, OnChanges, OnDe
746
751
  private defaultValidateNewDependencyCallback;
747
752
  private handleKeydown;
748
753
  static ɵfac: i0.ɵɵFactoryDeclaration<GanttComponent, never>;
749
- static ɵcmp: i0.ɵɵComponentDeclaration<GanttComponent, "kendo-gantt", ["kendoGantt"], { "roleDescription": "aria-roledescription"; "role": "role"; "taskModelFields": "taskModelFields"; "dependencyModelFields": "dependencyModelFields"; "activeView": "activeView"; "data": "data"; "isSelected": "isSelected"; "validateNewDependency": "validateNewDependency"; "selectable": "selectable"; "toolbarSettings": "toolbarSettings"; "fetchChildren": "fetchChildren"; "hasChildren": "hasChildren"; "dependencies": "dependencies"; "sortable": "sortable"; "sort": "sort"; "filterable": "filterable"; "filter": "filter"; "workDayStart": "workDayStart"; "workDayEnd": "workDayEnd"; "workWeekStart": "workWeekStart"; "workWeekEnd": "workWeekEnd"; "navigable": "navigable"; "timelinePaneOptions": "timelinePaneOptions"; "treeListPaneOptions": "treeListPaneOptions"; "taskClass": "taskClass"; "rowClass": "rowClass"; "isExpanded": "isExpanded"; "columnsAutoSize": "columnsAutoSize"; "columnMenu": "columnMenu"; "columnsReorderable": "columnsReorderable"; "columnsResizable": "columnsResizable"; "dragScrollSettings": "dragScrollSettings"; }, { "selectionChange": "selectionChange"; "rowExpand": "rowExpand"; "taskDblClick": "taskDblClick"; "cellDblClick": "cellDblClick"; "cellClose": "cellClose"; "taskDelete": "taskDelete"; "rowCollapse": "rowCollapse"; "remove": "remove"; "cancel": "cancel"; "save": "save"; "taskAdd": "taskAdd"; "dependencyAdd": "dependencyAdd"; "sortChange": "sortChange"; "filterChange": "filterChange"; "dataStateChange": "dataStateChange"; "treeListPaneCollapsedChange": "treeListPaneCollapsedChange"; "timelinePaneCollapsedChange": "timelinePaneCollapsedChange"; "timelinePaneSizeChange": "timelinePaneSizeChange"; "activeViewChange": "activeViewChange"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "columnVisibilityChange": "columnVisibilityChange"; "columnLockedChange": "columnLockedChange"; "cellClick": "cellClick"; "taskClick": "taskClick"; }, ["taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "toolbarTemplateChildren", "columns", "views"], never>;
754
+ static ɵcmp: i0.ɵɵComponentDeclaration<GanttComponent, "kendo-gantt", ["kendoGantt"], { "roleDescription": "aria-roledescription"; "role": "role"; "taskModelFields": "taskModelFields"; "dependencyModelFields": "dependencyModelFields"; "activeView": "activeView"; "data": "data"; "isSelected": "isSelected"; "validateNewDependency": "validateNewDependency"; "selectable": "selectable"; "toolbarSettings": "toolbarSettings"; "toolbarAriaLabel": "toolbarAriaLabel"; "fetchChildren": "fetchChildren"; "hasChildren": "hasChildren"; "dependencies": "dependencies"; "sortable": "sortable"; "sort": "sort"; "filterable": "filterable"; "filter": "filter"; "workDayStart": "workDayStart"; "workDayEnd": "workDayEnd"; "workWeekStart": "workWeekStart"; "workWeekEnd": "workWeekEnd"; "navigable": "navigable"; "timelinePaneOptions": "timelinePaneOptions"; "treeListPaneOptions": "treeListPaneOptions"; "taskClass": "taskClass"; "rowClass": "rowClass"; "isExpanded": "isExpanded"; "columnsAutoSize": "columnsAutoSize"; "columnMenu": "columnMenu"; "columnsReorderable": "columnsReorderable"; "columnsResizable": "columnsResizable"; "dragScrollSettings": "dragScrollSettings"; }, { "selectionChange": "selectionChange"; "rowExpand": "rowExpand"; "taskDblClick": "taskDblClick"; "cellDblClick": "cellDblClick"; "cellClose": "cellClose"; "taskDelete": "taskDelete"; "rowCollapse": "rowCollapse"; "remove": "remove"; "cancel": "cancel"; "save": "save"; "taskAdd": "taskAdd"; "dependencyAdd": "dependencyAdd"; "sortChange": "sortChange"; "filterChange": "filterChange"; "dataStateChange": "dataStateChange"; "treeListPaneCollapsedChange": "treeListPaneCollapsedChange"; "timelinePaneCollapsedChange": "timelinePaneCollapsedChange"; "timelinePaneSizeChange": "timelinePaneSizeChange"; "activeViewChange": "activeViewChange"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "columnVisibilityChange": "columnVisibilityChange"; "columnLockedChange": "columnLockedChange"; "cellClick": "cellClick"; "taskClick": "taskClick"; }, ["taskContentTemplate", "taskTemplate", "summaryTaskTemplate", "toolbarTemplateChildren", "columns", "views"], never>;
750
755
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@progress/kendo-angular-gantt",
3
- "version": "11.2.0-develop.18",
3
+ "version": "11.2.0-develop.19",
4
4
  "description": "Kendo UI Angular Gantt",
5
5
  "license": "SEE LICENSE IN LICENSE.md",
6
6
  "author": "Progress",
@@ -24,22 +24,22 @@
24
24
  "@angular/platform-browser": "13 - 15",
25
25
  "@progress/kendo-data-query": "^1.5.5",
26
26
  "@progress/kendo-licensing": "^1.0.2",
27
- "@progress/kendo-angular-buttons": "11.2.0-develop.18",
28
- "@progress/kendo-angular-common": "11.2.0-develop.18",
29
- "@progress/kendo-angular-dialog": "11.2.0-develop.18",
30
- "@progress/kendo-angular-dropdowns": "11.2.0-develop.18",
31
- "@progress/kendo-angular-grid": "11.2.0-develop.18",
32
- "@progress/kendo-angular-icons": "11.2.0-develop.18",
33
- "@progress/kendo-angular-intl": "11.2.0-develop.18",
34
- "@progress/kendo-angular-l10n": "11.2.0-develop.18",
35
- "@progress/kendo-angular-layout": "11.2.0-develop.18",
36
- "@progress/kendo-angular-popup": "11.2.0-develop.18",
37
- "@progress/kendo-angular-treelist": "11.2.0-develop.18",
27
+ "@progress/kendo-angular-buttons": "11.2.0-develop.19",
28
+ "@progress/kendo-angular-common": "11.2.0-develop.19",
29
+ "@progress/kendo-angular-dialog": "11.2.0-develop.19",
30
+ "@progress/kendo-angular-dropdowns": "11.2.0-develop.19",
31
+ "@progress/kendo-angular-grid": "11.2.0-develop.19",
32
+ "@progress/kendo-angular-icons": "11.2.0-develop.19",
33
+ "@progress/kendo-angular-intl": "11.2.0-develop.19",
34
+ "@progress/kendo-angular-l10n": "11.2.0-develop.19",
35
+ "@progress/kendo-angular-layout": "11.2.0-develop.19",
36
+ "@progress/kendo-angular-popup": "11.2.0-develop.19",
37
+ "@progress/kendo-angular-treelist": "11.2.0-develop.19",
38
38
  "rxjs": "^6.5.3 || ^7.0.0"
39
39
  },
40
40
  "dependencies": {
41
41
  "tslib": "^2.3.1",
42
- "@progress/kendo-angular-schematics": "11.2.0-develop.18",
42
+ "@progress/kendo-angular-schematics": "11.2.0-develop.19",
43
43
  "@progress/kendo-common": "^0.2.1",
44
44
  "@progress/kendo-date-math": "^1.5.2",
45
45
  "@progress/kendo-draggable": "^3.0.0"
package/schematics/ngAdd/index.js CHANGED
@@ -7,19 +7,19 @@ function default_1(options) {
7
7
  // See https://github.com/telerik/kendo-schematics/issues/28
8
8
  peerDependencies: {
9
9
  // peer deps of the treelist
10
- '@progress/kendo-angular-dateinputs': '11.2.0-develop.18',
11
- '@progress/kendo-angular-dropdowns': '11.2.0-develop.18',
12
- '@progress/kendo-angular-excel-export': '11.2.0-develop.18',
13
- '@progress/kendo-angular-inputs': '11.2.0-develop.18',
14
- '@progress/kendo-angular-l10n': '11.2.0-develop.18',
15
- '@progress/kendo-angular-label': '11.2.0-develop.18',
16
- '@progress/kendo-angular-pdf-export': '11.2.0-develop.18',
17
- '@progress/kendo-angular-popup': '11.2.0-develop.18',
10
+ '@progress/kendo-angular-dateinputs': '11.2.0-develop.19',
11
+ '@progress/kendo-angular-dropdowns': '11.2.0-develop.19',
12
+ '@progress/kendo-angular-excel-export': '11.2.0-develop.19',
13
+ '@progress/kendo-angular-inputs': '11.2.0-develop.19',
14
+ '@progress/kendo-angular-l10n': '11.2.0-develop.19',
15
+ '@progress/kendo-angular-label': '11.2.0-develop.19',
16
+ '@progress/kendo-angular-pdf-export': '11.2.0-develop.19',
17
+ '@progress/kendo-angular-popup': '11.2.0-develop.19',
18
18
  '@progress/kendo-drawing': '^1.0.0',
19
19
  // peer dep of the dropdowns
20
- '@progress/kendo-angular-treeview': '11.2.0-develop.18',
20
+ '@progress/kendo-angular-treeview': '11.2.0-develop.19',
21
21
  // peer dep of the layout
22
- '@progress/kendo-angular-progressbar': '11.2.0-develop.18',
22
+ '@progress/kendo-angular-progressbar': '11.2.0-develop.19',
23
23
  // peer dep of the icons
24
24
  '@progress/kendo-svg-icons': '^1.0.0'
25
25
  } });
package/toolbar/toolbar-navigation.service.d.ts ADDED
@@ -0,0 +1,18 @@
1
+ /**-----------------------------------------------------------------------------------------
2
+ * Copyright © 2023 Progress Software Corporation. All rights reserved.
3
+ * Licensed under commercial license. See LICENSE.md in the project root for more information
4
+ *-------------------------------------------------------------------------------------------*/
5
+ import { Renderer2 } from '@angular/core';
6
+ import * as i0 from "@angular/core";
7
+ /**
8
+ * @hidden
9
+ */
10
+ export declare class ToolbarNavigationService {
11
+ private renderer;
12
+ focusableContent: any[];
13
+ focusIndex: number;
14
+ constructor(renderer: Renderer2);
15
+ updateFocus(): void;
16
+ static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarNavigationService, never>;
17
+ static ɵprov: i0.ɵɵInjectableDeclaration<ToolbarNavigationService>;
18
+ }
package/toolbar/toolbar.component.d.ts CHANGED
@@ -3,28 +3,37 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { ToolbarTemplateDirective } from './toolbar-template.directive';
6
- import { TemplateRef, EventEmitter } from '@angular/core';
6
+ import { TemplateRef, EventEmitter, ElementRef } from '@angular/core';
7
7
  import { TimelineViewType } from './../models/timeline-view';
8
+ import { ToolbarNavigationService } from './toolbar-navigation.service';
8
9
  import * as i0 from "@angular/core";
9
10
  /**
10
11
  * @hidden
11
12
  */
12
13
  export declare class ToolbarComponent {
14
+ private hostEl;
15
+ private navigationService;
13
16
  context: any;
14
17
  role: string;
15
18
  toolbarSizingClass: boolean;
19
+ clickHandler(ev: MouseEvent): void;
20
+ arrowLeftListener(): void;
21
+ arrowRightListener(): void;
16
22
  activeViewChange: EventEmitter<TimelineViewType>;
17
23
  showAddTask: boolean;
18
24
  showViewSelector: boolean;
19
25
  views: TimelineViewType[];
20
26
  activeView: TimelineViewType;
21
27
  toolbarTemplate: ToolbarTemplateDirective;
28
+ navigable: boolean;
22
29
  set position(value: 'top' | 'bottom');
23
30
  get position(): 'top' | 'bottom';
24
31
  get toolbarTemplateRef(): TemplateRef<any>;
25
32
  get renderTemplate(): boolean;
26
33
  private _position;
34
+ constructor(hostEl: ElementRef, navigationService: ToolbarNavigationService);
27
35
  handleViewChange(view: TimelineViewType): void;
36
+ ngAfterViewInit(): void;
28
37
  static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
29
- static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "kendo-gantt-toolbar", never, { "showAddTask": "showAddTask"; "showViewSelector": "showViewSelector"; "views": "views"; "activeView": "activeView"; "toolbarTemplate": "toolbarTemplate"; "position": "position"; }, { "activeViewChange": "activeViewChange"; }, never, never>;
38
+ static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "kendo-gantt-toolbar", never, { "showAddTask": "showAddTask"; "showViewSelector": "showViewSelector"; "views": "views"; "activeView": "activeView"; "toolbarTemplate": "toolbarTemplate"; "navigable": "navigable"; "position": "position"; }, { "activeViewChange": "activeViewChange"; }, never, never>;
30
39
  }