@progress/kendo-angular-gantt 11.2.0-develop.8 → 11.2.0

package/esm2020/timeline/view-base.mjs

@@ -34,9 +34,9 @@ export class ViewBase {
         }
     }
 }
-ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewBase, deps: [{ token: i1.OptionChangesService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
-ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewBase, decorators: [{
+ViewBase.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, deps: [{ token: i1.OptionChangesService }, { token: i2.DependencyDomService }], target: i0.ɵɵFactoryTarget.Directive });
+ViewBase.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ViewBase, selector: "kendo-gantt-view-base", inputs: { slotWidth: "slotWidth" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewBase, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/esm2020/toolbar/toolbar-navigation.service.mjs

@@ -0,0 +1,27 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the project root for more information
+*-------------------------------------------------------------------------------------------*/
+import { Injectable, Renderer2 } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * @hidden
+ */
+export class ToolbarNavigationService {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.focusIndex = 0;
+    }
+    updateFocus() {
+        this.focusableContent.forEach(el => {
+            this.renderer.setAttribute(el, 'tabindex', '-1');
+        });
+        this.renderer.setAttribute(this.focusableContent[this.focusIndex], 'tabindex', '0');
+        this.focusableContent[this.focusIndex].focus();
+    }
+}
+ToolbarNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Injectable });
+ToolbarNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarNavigationService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; } });

package/esm2020/toolbar/toolbar-template.directive.mjs

@@ -112,9 +112,9 @@ export class ToolbarTemplateDirective {
         return this._position;
     }
 }
-ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
+ToolbarTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ToolbarTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.12", type: ToolbarTemplateDirective, selector: "[kendoGanttToolbarTemplate]", inputs: { position: "position" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoGanttToolbarTemplate]'

package/esm2020/toolbar/toolbar.component.mjs

@@ -3,21 +3,55 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ToolbarTemplateDirective } from './toolbar-template.directive';
-import { Component, Input, HostBinding, Output, EventEmitter } from '@angular/core';
+import { Component, Input, HostBinding, Output, EventEmitter, HostListener, ElementRef } from '@angular/core';
+import { ToolbarNavigationService } from './toolbar-navigation.service';
+import { closest, focusableSelector, isDocumentAvailable, isFocusable, isVisible } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
-import * as i1 from "../editing/add-task.component";
-import * as i2 from "./view-selector.component";
-import * as i3 from "@angular/common";
+import * as i1 from "./toolbar-navigation.service";
+import * as i2 from "../editing/add-task.component";
+import * as i3 from "./view-selector.component";
+import * as i4 from "@angular/common";
 /**
  * @hidden
  */
 export class ToolbarComponent {
-    constructor() {
+    constructor(hostEl, navigationService) {
+        this.hostEl = hostEl;
+        this.navigationService = navigationService;
         this.context = {};
         this.role = 'toolbar';
         this.toolbarSizingClass = true;
         this.activeViewChange = new EventEmitter();
     }
+    clickHandler(ev) {
+        if (this.navigable) {
+            const closestFocusable = closest(ev.target, isFocusable);
+            const targetIndex = this.navigationService.focusableContent.indexOf(closestFocusable);
+            if (targetIndex > -1) {
+                this.navigationService.focusIndex = targetIndex;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    ;
+    arrowLeftListener() {
+        if (this.navigable && isDocumentAvailable()) {
+            this.navigationService.focusIndex--;
+            if (this.navigationService.focusIndex < 0) {
+                this.navigationService.focusIndex = this.navigationService.focusableContent.length - 1;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
+    arrowRightListener() {
+        if (this.navigable && isDocumentAvailable()) {
+            this.navigationService.focusIndex++;
+            if (this.navigationService.focusIndex >= this.navigationService.focusableContent.length) {
+                this.navigationService.focusIndex = 0;
+            }
+            this.navigationService.updateFocus();
+        }
+    }
     set position(value) {
         this.context.position = this._position = value;
     }
@@ -35,9 +69,18 @@ export class ToolbarComponent {
     handleViewChange(view) {
         this.activeViewChange.emit(view);
     }
+    ngAfterViewInit() {
+        if (isDocumentAvailable()) {
+            const focusableElements = Array.from(this.hostEl.nativeElement.querySelectorAll(focusableSelector) || [])
+                .filter(el => isVisible(el));
+            if (focusableElements.length) {
+                this.navigationService.focusableContent = focusableElements;
+            }
+        }
+    }
 }
-ToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", 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: `
+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 });
+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: `
         <ng-container *ngIf="!renderTemplate">
             <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
             <span class="k-spacer k-toolbar-spacer"></span>
@@ -53,11 +96,12 @@ ToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [ngTemplateOutletContext]="context"
             >
         </ng-template>
-    `, 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolbarComponent, decorators: [{
+    `, 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"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-toolbar',
+                    providers: [ToolbarNavigationService],
                     template: `
         <ng-container *ngIf="!renderTemplate">
             <kendo-gantt-add-task *ngIf="showAddTask"></kendo-gantt-add-task>
@@ -76,12 +120,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-template>
     `
                 }]
-        }], propDecorators: { role: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.ToolbarNavigationService }]; }, propDecorators: { role: [{
                 type: HostBinding,
                 args: ['attr.role']
             }], toolbarSizingClass: [{
                 type: HostBinding,
                 args: ['class.k-toolbar-md']
+            }], clickHandler: [{
+                type: HostListener,
+                args: ['click', ['$event']]
+            }], arrowLeftListener: [{
+                type: HostListener,
+                args: ['keydown.arrowleft', ['$event']]
+            }], arrowRightListener: [{
+                type: HostListener,
+                args: ['keydown.arrowright', ['$event']]
             }], activeViewChange: [{
                 type: Output
             }], showAddTask: [{
@@ -94,6 +147,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], toolbarTemplate: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], position: [{
                 type: Input
             }] } });

package/esm2020/toolbar/view-selector.component.mjs

@@ -47,8 +47,8 @@ export class ViewSelectorComponent {
         this.activeViewChange.emit(event.target.value);
     }
 }
-ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
+ViewSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewSelectorComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ViewSelectorComponent, selector: "kendo-gantt-view-selector", inputs: { views: "views", activeView: "activeView" }, outputs: { activeViewChange: "activeViewChange" }, host: { properties: { "class.k-gantt-views-wrapper": "this.hostClass" } }, ngImport: i0, template: `
         <select
             class="k-dropdownlist k-picker k-rounded-md k-views-dropdown"
             aria-label="View Selector"
@@ -56,7 +56,7 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
             (change)="onActiveViewChange($event)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
         </select>
-        <kendo-buttongroup class="k-gantt-views" selection="single">
+        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
             <button *ngFor="let view of views"
                 kendoButton
                 type="button"
@@ -64,7 +64,7 @@ ViewSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (click)="onClick(view)">{{getViewTypeText(view)}}</button>
         </kendo-buttongroup>
     `, isInline: true, components: [{ type: i2.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ViewSelectorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-gantt-view-selector',
@@ -76,7 +76,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (change)="onActiveViewChange($event)">
             <option *ngFor="let view of views" [value]="view">{{getViewTypeText(view)}}</option>
         </select>
-        <kendo-buttongroup class="k-gantt-views" selection="single">
+        <kendo-buttongroup class="k-gantt-views" selection="single" [navigable]="false">
             <button *ngFor="let view of views"
                 kendoButton
                 type="button"