@progress/kendo-angular-layout 7.1.6 → 7.2.0-dev.202211241203

package/esm2015/tilelayout/tilelayout.component.js

@@ -8,13 +8,15 @@ import { Subscription } from 'rxjs';
 import { Draggable } from '@progress/kendo-draggable';
 import { TileLayoutItemComponent } from './tilelayout-item.component';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { hasObservers } from '@progress/kendo-angular-common';
+import { hasObservers, isChanged } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { isPresent } from '../common/util';
+import { TileLayoutKeyboardNavigationService } from './keyboard-navigation.service';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./dragging-service";
+import * as i3 from "./keyboard-navigation.service";
 const autoFlowClasses = {
     column: 'k-grid-flow-col',
     row: 'k-grid-flow-row',
@@ -25,12 +27,13 @@ const autoFlowClasses = {
  * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
  */
 export class TileLayoutComponent {
-    constructor(elem, renderer, localization, draggingService, zone) {
+    constructor(zone, elem, renderer, localization, draggingService, navigationService) {
+        this.zone = zone;
         this.elem = elem;
         this.renderer = renderer;
         this.localization = localization;
         this.draggingService = draggingService;
-        this.zone = zone;
+        this.navigationService = navigationService;
         /**
          * Defines the number of columns ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
          * @default 1
@@ -69,6 +72,13 @@ export class TileLayoutComponent {
          *
          */
         this.autoFlow = 'column';
+        /**
+         * If set to true, the user can use dedicated shortcuts to interact with the TileLayout.
+         * By default, navigation is disabled and focusable TileLayout content is a part of the natural tab sequence of the page.
+         *
+         * @default false
+         */
+        this.navigable = false;
         /**
          * Fires when the user completes the reordering of the item ([see example]({% slug reordering_tilelayout %})).
          * This event is preventable. If you cancel it, the item will not be reordered.
@@ -80,6 +90,7 @@ export class TileLayoutComponent {
          */
         this.resize = new EventEmitter();
         this.hostClass = true;
+        this.hostRole = 'list';
         this.subs = new Subscription();
         this._gap = {
             rows: 16,
@@ -121,6 +132,7 @@ export class TileLayoutComponent {
         this.applyRowStyling();
         this.draggingService.reorderable.next(this.reorderable);
         this.draggingService.resizable.next(this.resizable);
+        this.navigationService.navigable.next(this.navigable);
         if (hasObservers(this.reorder)) {
             this.subs.add(this.draggingService.reorder.subscribe(e => this.reorder.emit(e)));
         }
@@ -159,10 +171,10 @@ export class TileLayoutComponent {
         if (changes.rowHeight) {
             this.applyRowStyling();
         }
-        if (changes.reorderable) {
+        if (isChanged('reorderable', changes)) {
             this.draggingService.reorderable.next(changes.reorderable.currentValue);
         }
-        if (changes.resizable) {
+        if (isChanged('resizable', changes)) {
             this.draggingService.resizable.next(changes.resizable.currentValue);
         }
         if (changes.gap || changes.autoFlow || changes.columns) {
@@ -171,6 +183,9 @@ export class TileLayoutComponent {
                 this.applyAutoFlow(autoFlowClasses[changes.autoFlow.previousValue] || '', autoFlowClasses[changes.autoFlow.currentValue]);
             }
         }
+        if (isChanged('navigable', changes)) {
+            this.navigationService.navigable.next(changes.navigable.currentValue);
+        }
     }
     ngOnDestroy() {
         if (this.draggable) {
@@ -232,10 +247,11 @@ export class TileLayoutComponent {
         });
     }
 }
-TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-widget": "this.hostClass", "class.k-tilelayout": "this.hostClass", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
+TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i3.TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
+TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.17", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-widget": "this.hostClass", "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         TileLayoutDraggingService,
+        TileLayoutKeyboardNavigationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.tilelayout.component'
@@ -251,13 +267,14 @@ TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [style.gridRowStart]="currentRowStart"
             [style.zIndex]="'1'"></div>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout',
                     providers: [
                         LocalizationService,
                         TileLayoutDraggingService,
+                        TileLayoutKeyboardNavigationService,
                         {
                             provide: L10N_PREFIX,
                             useValue: 'kendo.tilelayout.component'
@@ -275,7 +292,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [style.zIndex]="'1'"></div>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.TileLayoutDraggingService }, { type: i0.NgZone }]; }, propDecorators: { columns: [{
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.TileLayoutDraggingService }, { type: i3.TileLayoutKeyboardNavigationService }]; }, propDecorators: { columns: [{
                 type: Input
             }], columnWidth: [{
                 type: Input
@@ -289,6 +306,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], autoFlow: [{
                 type: Input
+            }], navigable: [{
+                type: Input
             }], reorder: [{
                 type: Output
             }], resize: [{
@@ -299,6 +318,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }, {
                 type: HostBinding,
                 args: ['class.k-tilelayout']
+            }], hostRole: [{
+                type: HostBinding,
+                args: ['attr.role']
             }], gapStyle: [{
                 type: HostBinding,
                 args: ['style.gap']

package/esm2015/tilelayout/util.js

@@ -2,8 +2,18 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
 import { isPresent } from '../common/util';
+/**
+ * @hidden
+ */
+let idx = 0;
+/**
+ * @hidden
+ */
+export const getId = (prefix) => {
+    return `${prefix}-${++idx}`;
+};
 /**
  * @hidden
  */
@@ -85,3 +95,43 @@ export const calculateOrderFromCell = (row, col, items, draggedItem, tileLayoutE
     });
     return order;
 };
+/**
+ * @hidden
+ */
+export const shouldResize = (keyCode, col, selectedTile, settings) => {
+    const resizeRight = keyCode === Keys.ArrowRight && col + selectedTile.colSpan <= settings.columns;
+    const resizeLeft = keyCode === Keys.ArrowLeft && selectedTile.colSpan > 1;
+    const resizeDown = keyCode === Keys.ArrowDown;
+    const resizeUp = keyCode === Keys.ArrowUp && selectedTile.rowSpan > 1;
+    return { resizeRight, resizeLeft, resizeDown, resizeUp };
+};
+/**
+ * @hidden
+ */
+export const shouldReorder = (keyCode, col, selectedTile, settings) => {
+    let reorderRight;
+    let reorderLeft;
+    if (selectedTile.col) {
+        reorderRight = keyCode === Keys.ArrowRight && selectedTile.colSpan + col <= settings.columns;
+        reorderLeft = keyCode === Keys.ArrowLeft && col > 1;
+    }
+    else {
+        reorderRight = keyCode === Keys.ArrowRight && selectedTile.colSpan + selectedTile.order < settings.items.length;
+        reorderLeft = keyCode === Keys.ArrowLeft && selectedTile.order > 0;
+    }
+    return { reorderLeft, reorderRight };
+};
+/**
+ * @hidden
+ */
+export const getCurrentCol = (selectedTile, settings, rtl) => {
+    const rects = selectedTile.elem.nativeElement.getBoundingClientRect();
+    const targetSize = {
+        rowSpan: selectedTile.rowSpan,
+        colSpan: selectedTile.colSpan
+    };
+    const width = (rects.width - ((targetSize.colSpan - 1) * settings.gap.columns)) / targetSize.colSpan;
+    const height = (rects.height - ((targetSize.rowSpan - 1) * settings.gap.rows)) / targetSize.rowSpan;
+    const { col } = calculateCellFromPosition({ x: rects.x, y: rects.y }, settings.tileLayoutElement, settings.gap, { width: width, height: height }, settings.columns, rtl);
+    return col;
+};

package/esm2015/tilelayout.module.js

@@ -32,8 +32,8 @@ const declarations = [
  */
 export class TileLayoutModule {
 }
-TileLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutModule, declarations: [TileLayoutComponent,
+TileLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutModule, declarations: [TileLayoutComponent,
         TileLayoutItemComponent,
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
@@ -42,8 +42,8 @@ TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
         TileLayoutResizeHandleDirective] });
-TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TileLayoutModule, decorators: [{
+TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.17", ngImport: i0, type: TileLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],