@progress/kendo-angular-layout 21.4.1-develop.1 → 22.0.0-develop.1

package/esm2022/tilelayout/reorder-event.mjs

@@ -1,43 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
-/**
- * Arguments for the `reorder` event.
- * The event fires when you change the order or starting positions of items through the UI.
- * You can prevent this event to cancel the reorder operation.
- */
-export class TileLayoutReorderEvent extends PreventableEvent {
-    item;
-    items;
-    newIndex;
-    oldIndex;
-    newCol;
-    oldCol;
-    newRow;
-    oldRow;
-    /**
-     * Constructs the event arguments for the `reorder` event.
-     * @param item - The TileLayoutItem being reordered.
-     * @param items - The TileLayoutItem collection that holds the currently rendered items and their internal state.
-     * @param newIndex - The new order index of the reordered item used to determine its positioning relative to the other items.
-     * @param oldIndex - The initial order index of the reordered item used to determine its positioning relative to the other items.
-     * @param newCol - The new start column of the reordered item.
-     * @param oldCol - The initial start column of the reordered item.
-     * @param newRow - The new start row of the reordered item.
-     * @param oldRow - The initial start row of the reordered item.
-     * @hidden
-     */
-    constructor(item, items, newIndex, oldIndex, newCol, oldCol, newRow, oldRow) {
-        super();
-        this.item = item;
-        this.items = items;
-        this.newIndex = newIndex;
-        this.oldIndex = oldIndex;
-        this.newCol = newCol;
-        this.oldCol = oldCol;
-        this.newRow = newRow;
-        this.oldRow = oldRow;
-    }
-}

package/esm2022/tilelayout/resize-event.mjs

@@ -1,37 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { PreventableEvent } from '@progress/kendo-angular-common';
-/**
- * Arguments for the `resize` event.
- * The `resize` event fires when you change any item size through the UI.
- * You can prevent this event to stop the resize operation.
- */
-export class TileLayoutResizeEvent extends PreventableEvent {
-    item;
-    items;
-    newRowSpan;
-    oldRowSpan;
-    newColSpan;
-    oldColSpan;
-    /**
-     * Constructs the event arguments for the `resize` event.
-     * @param item - The TileLayoutItem being resized
-     * @param items - The TileLayoutItem collection
-     * @param newRowSpan - The new rowSpan of the resized item
-     * @param oldRowSpan - The initial rowSpan of the resized item
-     * @param newColSpan - The new colSpan of the resized item
-     * @param oldColSpan - The initial colSpan of the resized item
-     * @hidden
-     */
-    constructor(item, items, newRowSpan, oldRowSpan, newColSpan, oldColSpan) {
-        super();
-        this.item = item;
-        this.items = items;
-        this.newRowSpan = newRowSpan;
-        this.oldRowSpan = oldRowSpan;
-        this.newColSpan = newColSpan;
-        this.oldColSpan = oldColSpan;
-    }
-}

package/esm2022/tilelayout/tilelayout-item-body.component.mjs

@@ -1,45 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Contains the main content of the `TileLayoutItem` component.
- *
- * @example
- * ```html
- * <kendo-tilelayout-item>
- *   <kendo-tilelayout-item-body>
- *     <p>Main content goes here</p>
- *   </kendo-tilelayout-item-body>
- * </kendo-tilelayout-item>
- * ```
- */
-export class TileLayoutItemBodyComponent {
-    hostClass = true;
-    minHeight = 0;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutItemBodyComponent, isStandalone: true, selector: "kendo-tilelayout-item-body", host: { properties: { "class.k-tilelayout-item-body": "this.hostClass", "class.k-card-body": "this.hostClass", "style.min-height": "this.minHeight" } }, ngImport: i0, template: `
-        <ng-content></ng-content>
-    `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-tilelayout-item-body',
-                    template: `
-        <ng-content></ng-content>
-    `,
-                    standalone: true
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-tilelayout-item-body']
-            }, {
-                type: HostBinding,
-                args: ['class.k-card-body']
-            }], minHeight: [{
-                type: HostBinding,
-                args: ['style.min-height']
-            }] } });

package/esm2022/tilelayout/tilelayout-item-header.component.mjs

@@ -1,43 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, HostBinding } from '@angular/core';
-import * as i0 from "@angular/core";
-/**
- * Contains the header content of the `TileLayoutItem` component.
- * You can drag this area to reorder items when reordering is enabled.
- *
- * @example
- * ```html
- * <kendo-tilelayout-item>
- *   <kendo-tilelayout-item-header>
- *     <h3>Custom Header</h3>
- *   </kendo-tilelayout-item-header>
- *   <p>Item content</p>
- * </kendo-tilelayout-item>
- * ```
- */
-export class TileLayoutItemHeaderComponent {
-    hostClass = true;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutItemHeaderComponent, isStandalone: true, selector: "kendo-tilelayout-item-header", host: { properties: { "class.k-tilelayout-item-header": "this.hostClass", "class.k-card-header": "this.hostClass" } }, ngImport: i0, template: `
-        <ng-content></ng-content>
-    `, isInline: true });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemHeaderComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-tilelayout-item-header',
-                    template: `
-        <ng-content></ng-content>
-    `,
-                    standalone: true
-                }]
-        }], propDecorators: { hostClass: [{
-                type: HostBinding,
-                args: ['class.k-tilelayout-item-header']
-            }, {
-                type: HostBinding,
-                args: ['class.k-card-header']
-            }] } });

package/esm2022/tilelayout/tilelayout-item.component.mjs

@@ -1,322 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Component, ContentChildren, ElementRef, HostBinding, Input, NgZone, QueryList, Renderer2 } from '@angular/core';
-import { LocalizationService } from '@progress/kendo-angular-l10n';
-import { Subscription } from 'rxjs';
-import { TileLayoutDraggingService } from './dragging-service';
-import { TileLayoutKeyboardNavigationService } from './keyboard-navigation.service';
-import { isPresent } from './../common/util';
-import { RESIZE_DIRECTIONS, RTL_RESIZE_DIRECTIONS } from './constants';
-import { TileLayoutItemHeaderComponent } from './tilelayout-item-header.component';
-import { getId } from './util';
-import { TileLayoutResizeHandleDirective } from './tilelayout-resize-handle.directive';
-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";
-/**
- * Represents a tile item within the TileLayoutComponent.
- *
- * @example
- * ```html
- * <kendo-tilelayout>
- *   <kendo-tilelayout-item [title]="'Item 1'" [colSpan]="2">
- *     <p>Item content goes here</p>
- *   </kendo-tilelayout-item>
- * </kendo-tilelayout>
- * ```
- * @remarks
- * Supported children components are: {@link TileLayoutItemBodyComponent}, {@link TileLayoutItemHeaderComponent}.
- */
-export class TileLayoutItemComponent {
-    elem;
-    zone;
-    renderer;
-    localization;
-    draggingService;
-    keyboardNavigationService;
-    /**
-     * Sets the title text that appears in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
-     */
-    title;
-    /**
-     * Sets how many rows the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
-     * @default 1
-     */
-    rowSpan = 1;
-    /**
-     *  Sets how many columns the tile item spans ([see example](slug:resizing_tilelayout#programmatic-resizing)).
-     * @default 1
-     */
-    colSpan = 1;
-    /**
-     * Sets the order of the tile item within the TileLayout.
-     * When not set, items receive increasing order values based on their DOM position.
-     */
-    set order(value) {
-        this._order = value;
-        this.renderer.setStyle(this.elem.nativeElement, 'order', `${this._order}`);
-    }
-    get order() {
-        return this._order;
-    }
-    /**
-     * Sets the starting column position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
-     */
-    col;
-    /**
-     * Sets the starting row position of the item ([see example](slug:tiles_tilelayout#size-and-position)).
-     */
-    row;
-    /**
-     * Enables or disables individual item reordering.
-     *
-     * @default true
-     */
-    reorderable = true;
-    /**
-     * Enables or disables individual item resizing.
-     * @default true
-     */
-    resizable = true;
-    itemClass = true;
-    hostRole = 'listitem';
-    get hostDropEffect() {
-        return this.isResizable || this.isReorderable ? 'execute' : undefined;
-    }
-    get hostTabindex() {
-        return this.isNavigable ? '0' : undefined;
-    }
-    get ariaKeyShortcuts() {
-        return this.isNavigable ? 'Enter' : undefined;
-    }
-    get hostGrabbed() {
-        return this.isResizable || this.isReorderable;
-    }
-    get hostLabelledBy() {
-        return this.title ? this.titleId : undefined;
-    }
-    get colEnd() {
-        return `span ${this.colSpan}`;
-    }
-    get rowEnd() {
-        return `span ${this.rowSpan}`;
-    }
-    get colStart() {
-        return isPresent(this.col) ? this.col.toString() : undefined;
-    }
-    get rowStart() {
-        return isPresent(this.row) ? this.row.toString() : undefined;
-    }
-    /**
-     * @hidden
-     */
-    get isReorderable() {
-        return this.reorderable && this.draggingService.reorderable.getValue();
-    }
-    /**
-     * @hidden
-     */
-    get isNavigable() {
-        return this.keyboardNavigationService.navigable.getValue();
-    }
-    /**
-     * @hidden
-     */
-    get isResizable() {
-        return this.resizable && this.draggingService.resizable.getValue();
-    }
-    /**
-     * @hidden
-     */
-    resizeDirections;
-    /**
-     * @hidden
-     */
-    rtl;
-    headers;
-    /**
-     * @hidden
-     */
-    titleId = '';
-    subs = new Subscription();
-    keyboardNavigationSubs;
-    focusableItems;
-    _order;
-    constructor(elem, zone, renderer, localization, draggingService, keyboardNavigationService) {
-        this.elem = elem;
-        this.zone = zone;
-        this.renderer = renderer;
-        this.localization = localization;
-        this.draggingService = draggingService;
-        this.keyboardNavigationService = keyboardNavigationService;
-        this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
-            this.rtl = rtl;
-        }));
-        this.subs.add(this.draggingService.resizable.subscribe(resizable => {
-            this.resizeDirections = resizable && this.resizable ?
-                this.rtl ? RTL_RESIZE_DIRECTIONS : RESIZE_DIRECTIONS : undefined;
-        }));
-        this.titleId = getId('k-tilelayout-title');
-    }
-    ngAfterViewInit() {
-        const elem = this.elem.nativeElement;
-        const keyboardNavigation = this.keyboardNavigationService;
-        this.subs.add(this.draggingService.reorderable.subscribe(reorderable => {
-            this.toggleCursorClass(reorderable && this.reorderable);
-        }));
-        this.subs.add(keyboardNavigation.navigable.subscribe(isNavigable => {
-            if (isNavigable) {
-                this.keyboardNavigationSubs = new Subscription();
-                this.focusableItems = keyboardNavigation.getAllFocusableChildren(elem);
-                this.zone.runOutsideAngular(() => {
-                    keyboardNavigation.changeTabIndex('-1', elem, this.focusableItems);
-                    this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'keydown', event => keyboardNavigation.onKeyDown(event, elem, this.focusableItems, this.draggingService.tileLayoutSettings)));
-                    this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'mousedown', event => keyboardNavigation.onMousedown(event, elem, this.focusableItems, this)));
-                    this.keyboardNavigationSubs.add(this.renderer.listen(elem, 'focusout', event => keyboardNavigation.onFocusOut(event, elem, this.focusableItems)));
-                });
-            }
-            else if (this.focusableItems) {
-                this.focusableItems.forEach((focusItem) => {
-                    this.renderer.setAttribute(focusItem, 'tabindex', '0');
-                });
-                this.keyboardNavigationSubs.unsubscribe();
-            }
-        }));
-    }
-    ngOnChanges(changes) {
-        if (changes['reorderable'] && !changes['reorderable'].firstChange) {
-            this.toggleCursorClass(changes['reorderable'].currentValue && this.draggingService.reorderable.getValue());
-        }
-        if (changes['resizable']) {
-            this.resizeDirections = this.resizable && this.draggingService.resizable.getValue() ?
-                this.rtl ? RTL_RESIZE_DIRECTIONS : RESIZE_DIRECTIONS : undefined;
-        }
-    }
-    ngOnDestroy() {
-        this.subs.unsubscribe();
-        if (this.keyboardNavigationSubs) {
-            this.keyboardNavigationSubs.unsubscribe();
-        }
-    }
-    /**
-     * @hidden
-     */
-    focus() {
-        this.elem.nativeElement.focus();
-    }
-    toggleCursorClass(isReorderable) {
-        const headerEl = this.elem.nativeElement.querySelector('.k-tilelayout-item-header');
-        if (!headerEl) {
-            return;
-        }
-        if (isReorderable) {
-            this.renderer.addClass(headerEl, 'k-cursor-move');
-        }
-        else {
-            this.renderer.removeClass(headerEl, 'k-cursor-move');
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: i2.TileLayoutDraggingService }, { token: i3.TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: TileLayoutItemComponent, isStandalone: true, selector: "kendo-tilelayout-item", inputs: { title: "title", rowSpan: "rowSpan", colSpan: "colSpan", order: "order", col: "col", row: "row", reorderable: "reorderable", resizable: "resizable" }, host: { properties: { "class.k-tilelayout-item": "this.itemClass", "class.k-card": "this.itemClass", "attr.role": "this.hostRole", "attr.aria-dropeffect": "this.hostDropEffect", "attr.tabindex": "this.hostTabindex", "attr.aria-keyshortcuts": "this.ariaKeyShortcuts", "attr.aria-grabbed": "this.hostGrabbed", "attr.aria-labelledby": "this.hostLabelledBy", "style.grid-column-end": "this.colEnd", "style.grid-row-end": "this.rowEnd", "style.grid-column-start": "this.colStart", "style.grid-row-start": "this.rowStart" } }, queries: [{ propertyName: "headers", predicate: TileLayoutItemHeaderComponent }], usesOnChanges: true, ngImport: i0, template: `
-        @if (title) {
-          <kendo-tilelayout-item-header>
-            <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-          </kendo-tilelayout-item-header>
-        }
-        <ng-content></ng-content>
-        @if (resizable) {
-          @for (dir of resizeDirections; track dir) {
-            <div
-              class="k-resize-handle k-cursor-{{dir}}-resize"
-              kendoTileLayoutResizeHandle
-              [rtl]="rtl"
-              [resizeDirection]="dir">
-            </div>
-          }
-        }
-        `, isInline: true, dependencies: [{ kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'kendo-tilelayout-item',
-                    template: `
-        @if (title) {
-          <kendo-tilelayout-item-header>
-            <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
-          </kendo-tilelayout-item-header>
-        }
-        <ng-content></ng-content>
-        @if (resizable) {
-          @for (dir of resizeDirections; track dir) {
-            <div
-              class="k-resize-handle k-cursor-{{dir}}-resize"
-              kendoTileLayoutResizeHandle
-              [rtl]="rtl"
-              [resizeDirection]="dir">
-            </div>
-          }
-        }
-        `,
-                    standalone: true,
-                    imports: [TileLayoutItemHeaderComponent, TileLayoutResizeHandleDirective]
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: i2.TileLayoutDraggingService }, { type: i3.TileLayoutKeyboardNavigationService }], propDecorators: { title: [{
-                type: Input
-            }], rowSpan: [{
-                type: Input
-            }], colSpan: [{
-                type: Input
-            }], order: [{
-                type: Input
-            }], col: [{
-                type: Input
-            }], row: [{
-                type: Input
-            }], reorderable: [{
-                type: Input
-            }], resizable: [{
-                type: Input
-            }], itemClass: [{
-                type: HostBinding,
-                args: ['class.k-tilelayout-item']
-            }, {
-                type: HostBinding,
-                args: ['class.k-card']
-            }], hostRole: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], hostDropEffect: [{
-                type: HostBinding,
-                args: ['attr.aria-dropeffect']
-            }], hostTabindex: [{
-                type: HostBinding,
-                args: ['attr.tabindex']
-            }], ariaKeyShortcuts: [{
-                type: HostBinding,
-                args: ['attr.aria-keyshortcuts']
-            }], hostGrabbed: [{
-                type: HostBinding,
-                args: ['attr.aria-grabbed']
-            }], hostLabelledBy: [{
-                type: HostBinding,
-                args: ['attr.aria-labelledby']
-            }], colEnd: [{
-                type: HostBinding,
-                args: ['style.grid-column-end']
-            }], rowEnd: [{
-                type: HostBinding,
-                args: ['style.grid-row-end']
-            }], colStart: [{
-                type: HostBinding,
-                args: ['style.grid-column-start']
-            }], rowStart: [{
-                type: HostBinding,
-                args: ['style.grid-row-start']
-            }], headers: [{
-                type: ContentChildren,
-                args: [TileLayoutItemHeaderComponent]
-            }] } });

package/esm2022/tilelayout/tilelayout-resize-handle.directive.mjs

@@ -1,61 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2026 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the project root for more information
-*-------------------------------------------------------------------------------------------*/
-import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
-import { RESIZE_HANDLE_DIMENSIONS } from './constants';
-import * as i0 from "@angular/core";
-/**
- * @hidden
- */
-export class TileLayoutResizeHandleDirective {
-    el;
-    renderer;
-    resizeDirection;
-    rtl;
-    constructor(el, renderer) {
-        this.el = el;
-        this.renderer = renderer;
-    }
-    ngOnInit() {
-        this.sizeHandle();
-    }
-    setHorizontalPosition(element) {
-        this.renderer.setStyle(element, this.rtl ? 'left' : 'right', -RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].overlapX + 'px');
-    }
-    setBottom(element) {
-        this.renderer.setStyle(element, 'bottom', -RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].overlapY + 'px');
-    }
-    sizeHandle() {
-        const element = this.el.nativeElement;
-        const handleWidth = RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].width ?
-            `${RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].width}px` : '100%';
-        const handleHeight = RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].height ?
-            `${RESIZE_HANDLE_DIMENSIONS[this.resizeDirection].height}px` : '100%';
-        this.renderer.setStyle(element, 'width', handleWidth);
-        this.renderer.setStyle(element, 'height', handleHeight);
-        if (this.resizeDirection === 'ew') {
-            this.setHorizontalPosition(element);
-        }
-        else if (this.resizeDirection === 'ns') {
-            this.setBottom(element);
-        }
-        else {
-            this.setHorizontalPosition(element);
-            this.setBottom(element);
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutResizeHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TileLayoutResizeHandleDirective, isStandalone: true, selector: "[kendoTileLayoutResizeHandle]", inputs: { resizeDirection: "resizeDirection", rtl: "rtl" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TileLayoutResizeHandleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoTileLayoutResizeHandle]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { resizeDirection: [{
-                type: Input
-            }], rtl: [{
-                type: Input
-            }] } });