@progress/kendo-angular-layout 17.0.0-develop.9 → 17.0.0

package/{esm2020 → esm2022}/tilelayout/tilelayout-item.component.mjs

@@ -21,50 +21,26 @@ import * as i3 from "./keyboard-navigation.service";
  * Represents a tile item within the TileLayoutComponent.
  */
 export class TileLayoutItemComponent {
-    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;
-        /**
-         * Determines how many rows will the tile item span ([see example](slug:tiles_tilelayout#toc-programmatic-resizing)).
-         * @default 1
-         */
-        this.rowSpan = 1;
-        /**
-         * Determines how many columns will the tile item span ([see example](slug:tiles_tilelayout#toc-programmatic-resizing)).
-         * @default 1
-         */
-        this.colSpan = 1;
-        /**
-         * Determines whether the item can be reordered. By default all items are reorderable when the [reorderable]({% slug api_layout_tilelayoutcomponent %}#toc-reorderable) property of the TileLayoutComponent is set to `true` ([see example]({% slug reordering_tilelayout %}#toc-disabling-reordering)).
-         *
-         * @default true
-         */
-        this.reorderable = true;
-        /**
-         * Determines whether the item can be resized. By default all items are resizable when the [resizable]({% slug api_layout_tilelayoutcomponent %}#resizable) property of the TileLayoutComponent is set to `true` ([see example](slug:resizing_tilelayout#toc-disabling-resizing)).
-         * @default true
-         */
-        this.resizable = true;
-        this.itemClass = true;
-        this.hostRole = 'listitem';
-        /**
-         * @hidden
-         */
-        this.titleId = '';
-        this.subs = new Subscription();
-        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');
-    }
+    elem;
+    zone;
+    renderer;
+    localization;
+    draggingService;
+    keyboardNavigationService;
+    /**
+     * The title that will be rendered in the item header ([see example]({% slug tiles_tilelayout %}#toc-tiles-configuration)).
+     */
+    title;
+    /**
+     * Determines how many rows will the tile item span ([see example](slug:tiles_tilelayout#toc-programmatic-resizing)).
+     * @default 1
+     */
+    rowSpan = 1;
+    /**
+     * Determines how many columns will the tile item span ([see example](slug:tiles_tilelayout#toc-programmatic-resizing)).
+     * @default 1
+     */
+    colSpan = 1;
     /**
      * Determines the order of the tile items within the TileLayout.
      * If not set, the items will receive increasing sequential order in accordance with
@@ -77,6 +53,27 @@ export class TileLayoutItemComponent {
     get order() {
         return this._order;
     }
+    /**
+     * Sets the starting column of the item ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
+     */
+    col;
+    /**
+     * Sets the starting row of the item ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
+     */
+    row;
+    /**
+     * Determines whether the item can be reordered. By default all items are reorderable when the [reorderable]({% slug api_layout_tilelayoutcomponent %}#toc-reorderable) property of the TileLayoutComponent is set to `true` ([see example]({% slug reordering_tilelayout %}#toc-disabling-reordering)).
+     *
+     * @default true
+     */
+    reorderable = true;
+    /**
+     * Determines whether the item can be resized. By default all items are resizable when the [resizable]({% slug api_layout_tilelayoutcomponent %}#resizable) property of the TileLayoutComponent is set to `true` ([see example](slug:resizing_tilelayout#toc-disabling-resizing)).
+     * @default true
+     */
+    resizable = true;
+    itemClass = true;
+    hostRole = 'listitem';
     get hostDropEffect() {
         return this.isResizable || this.isReorderable ? 'execute' : undefined;
     }
@@ -122,14 +119,44 @@ export class TileLayoutItemComponent {
     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);
-            if (this.headers?.first) {
-                this.headers.first.reorderable = reorderable && this.reorderable;
-            }
         }));
         this.subs.add(keyboardNavigation.navigable.subscribe(isNavigable => {
             if (isNavigable) {
@@ -171,42 +198,42 @@ export class TileLayoutItemComponent {
             return;
         }
         if (isReorderable) {
-            this.renderer.addClass(headerEl, 'k-cursor-grab');
+            this.renderer.addClass(headerEl, 'k-cursor-move');
         }
         else {
-            this.renderer.removeClass(headerEl, 'k-cursor-grab');
+            this.renderer.removeClass(headerEl, 'k-cursor-move');
         }
     }
-}
-TileLayoutItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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 });
-TileLayoutItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
-        <kendo-tilelayout-item-header [reorderable]="isReorderable" *ngIf="title">
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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: "14.0.0", version: "16.2.12", 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: `
+        <kendo-tilelayout-item-header *ngIf="title">
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
         </kendo-tilelayout-item-header>
         <ng-content></ng-content>
         <ng-container *ngIf="resizable">
             <div
                 *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize k-touch-action-none"
+                class="k-resize-handle k-cursor-{{dir}}-resize"
                 kendoTileLayoutResizeHandle
                 [rtl]="rtl"
                 [resizeDirection]="dir">
             </div>
         </ng-container>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header", inputs: ["reorderable"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
+    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TileLayoutItemHeaderComponent, selector: "kendo-tilelayout-item-header" }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: TileLayoutResizeHandleDirective, selector: "[kendoTileLayoutResizeHandle]", inputs: ["resizeDirection", "rtl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item',
                     template: `
-        <kendo-tilelayout-item-header [reorderable]="isReorderable" *ngIf="title">
+        <kendo-tilelayout-item-header *ngIf="title">
             <h5 [id]="titleId" class="k-card-title">{{ title }}</h5>
         </kendo-tilelayout-item-header>
         <ng-content></ng-content>
         <ng-container *ngIf="resizable">
             <div
                 *ngFor="let dir of resizeDirections"
-                class="k-resize-handle k-cursor-{{dir}}-resize k-touch-action-none"
+                class="k-resize-handle k-cursor-{{dir}}-resize"
                 kendoTileLayoutResizeHandle
                 [rtl]="rtl"
                 [resizeDirection]="dir">

package/{esm2020 → esm2022}/tilelayout/tilelayout-resize-handle.directive.mjs

@@ -9,6 +9,10 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TileLayoutResizeHandleDirective {
+    el;
+    renderer;
+    resizeDirection;
+    rtl;
     constructor(el, renderer) {
         this.el = el;
         this.renderer = renderer;
@@ -41,10 +45,10 @@ export class TileLayoutResizeHandleDirective {
             this.setBottom(element);
         }
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutResizeHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutResizeHandleDirective, isStandalone: true, selector: "[kendoTileLayoutResizeHandle]", inputs: { resizeDirection: "resizeDirection", rtl: "rtl" }, ngImport: i0 });
 }
-TileLayoutResizeHandleDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutResizeHandleDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-TileLayoutResizeHandleDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TileLayoutResizeHandleDirective, isStandalone: true, selector: "[kendoTileLayoutResizeHandle]", inputs: { resizeDirection: "resizeDirection", rtl: "rtl" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutResizeHandleDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutResizeHandleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTileLayoutResizeHandle]',

package/{esm2020 → esm2022}/tilelayout/tilelayout.component.mjs

@@ -28,82 +28,22 @@ const autoFlowClasses = {
  * Represents the [Kendo UI TileLayout component for Angular]({% slug overview_tilelayout %})
  */
 export class TileLayoutComponent {
-    constructor(zone, elem, renderer, localization, draggingService, navigationService) {
-        this.zone = zone;
-        this.elem = elem;
-        this.renderer = renderer;
-        this.localization = localization;
-        this.draggingService = draggingService;
-        this.navigationService = navigationService;
-        /**
-         * Defines the number of columns ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
-         * @default 1
-         */
-        this.columns = 1;
-        /**
-         * Determines the width of the columns. Numeric values are treated as pixels ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
-         * @default '1fr'
-         */
-        this.columnWidth = '1fr';
-        /**
-         * Determines whether the reordering functionality will be enabled ([see example]({% slug reordering_tilelayout %})).
-         * @default false
-         */
-        this.reorderable = false;
-        /**
-         * Determines whether the resizing functionality will be enabled ([see example]({% slug resizing_tilelayout %})).
-         * @default false
-         */
-        this.resizable = false;
-        /**
-         * Determines the height of the rows. Numeric values are treated as pixels ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
-         * @default '1fr'
-         */
-        this.rowHeight = '1fr';
-        /**
-         * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
-         * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
-         *
-         * The possible values are:
-         * * (Default) `column`
-         * * `row`
-         * * `row dense`
-         * * `column dense`
-         * * `none`
-         *
-         */
-        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.
-         */
-        this.reorder = new EventEmitter();
-        /**
-         * Fires when the user completes the resizing of the item ([see example]({% slug resizing_tilelayout %})).
-         * This event is preventable. If you cancel it, the item will not be resized.
-         */
-        this.resize = new EventEmitter();
-        this.hostClass = true;
-        this.hostRole = 'list';
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this.subs = new Subscription();
-        this._gap = {
-            rows: 16,
-            columns: 16
-        };
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-    }
+    zone;
+    elem;
+    renderer;
+    localization;
+    draggingService;
+    navigationService;
+    /**
+     * Defines the number of columns ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
+     * @default 1
+     */
+    columns = 1;
+    /**
+     * Determines the width of the columns. Numeric values are treated as pixels ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
+     * @default '1fr'
+     */
+    columnWidth = '1fr';
     /**
      * The numeric values which determine the spacing in pixels between the layout items horizontally and vertically.
      * Properties:
@@ -118,9 +58,57 @@ export class TileLayoutComponent {
     get gap() {
         return this._gap;
     }
+    /**
+     * Determines whether the reordering functionality will be enabled ([see example]({% slug reordering_tilelayout %})).
+     * @default false
+     */
+    reorderable = false;
+    /**
+     * Determines whether the resizing functionality will be enabled ([see example]({% slug resizing_tilelayout %})).
+     * @default false
+     */
+    resizable = false;
+    /**
+     * Determines the height of the rows. Numeric values are treated as pixels ([see example]({% slug tiles_tilelayout %}#toc-tile-size-and-position)).
+     * @default '1fr'
+     */
+    rowHeight = '1fr';
+    /**
+     * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items are flowed in the TileLayout ([see example]({% slug tiles_autoflow_tilelayout %})).
+     * For further reference, check the [grid-auto-flow CSS article](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
+     *
+     * The possible values are:
+     * * (Default) `column`
+     * * `row`
+     * * `row dense`
+     * * `column dense`
+     * * `none`
+     *
+     */
+    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
+     */
+    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.
+     */
+    reorder = new EventEmitter();
+    /**
+     * Fires when the user completes the resizing of the item ([see example]({% slug resizing_tilelayout %})).
+     * This event is preventable. If you cancel it, the item will not be resized.
+     */
+    resize = new EventEmitter();
+    hostClass = true;
+    hostRole = 'list';
     get gapStyle() {
         return `${this.gap.rows}px ${this.gap.columns}px`;
     }
+    direction;
     get currentColStart() {
         return this.draggingService.colStart;
     }
@@ -133,6 +121,31 @@ export class TileLayoutComponent {
     get targetOrder() {
         return this.draggingService.order;
     }
+    /**
+     * A query list of all declared [TileLayoutItemComponent]({% slug api_layout_tilelayoutitemcomponent %}) items.
+     */
+    items;
+    hint;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    draggable;
+    subs = new Subscription();
+    _gap = {
+        rows: 16,
+        columns: 16
+    };
+    constructor(zone, elem, renderer, localization, draggingService, navigationService) {
+        this.zone = zone;
+        this.elem = elem;
+        this.renderer = renderer;
+        this.localization = localization;
+        this.draggingService = draggingService;
+        this.navigationService = navigationService;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+    }
     ngOnInit() {
         this.applyColStyling();
         this.applyRowStyling();
@@ -252,19 +265,18 @@ export class TileLayoutComponent {
             }
         });
     }
-}
-TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", 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: "14.0.0", version: "15.2.10", type: TileLayoutComponent, isStandalone: true, 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-tilelayout": "this.hostClass", "class.k-pos-relative": "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'
-        }
-    ], queries: [{ propertyName: "items", predicate: TileLayoutItemComponent }], viewQueries: [{ propertyName: "hint", first: true, predicate: ["hint"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TileLayoutComponent, isStandalone: true, 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-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'
+            }
+        ], queries: [{ propertyName: "items", predicate: TileLayoutItemComponent }], viewQueries: [{ propertyName: "hint", first: true, predicate: ["hint"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <ng-content></ng-content>
-        <div #hint class="k-layout-item-hint k-layout-item-hint-reorder"
+        <div #hint class="k-layout-item-hint"
             [style.display]="'none'"
             [style.order]="targetOrder"
             [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
@@ -275,7 +287,8 @@ TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         </div>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout',
@@ -290,7 +303,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     ],
                     template: `
         <ng-content></ng-content>
-        <div #hint class="k-layout-item-hint k-layout-item-hint-reorder"
+        <div #hint class="k-layout-item-hint"
             [style.display]="'none'"
             [style.order]="targetOrder"
             [style.gridColumnEnd]="draggedItemWrapper?.style.gridColumnEnd"
@@ -327,9 +340,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-tilelayout']
-            }, {
-                type: HostBinding,
-                args: ['class.k-pos-relative']
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']

package/{esm2020 → esm2022}/tilelayout.module.mjs

@@ -21,11 +21,11 @@ import * as i4 from "./tilelayout/tilelayout-item-header.component";
  * - `TileLayoutItemBodyComponent`—The `TileLayoutItemBodyComponent` component class.
  */
 export class TileLayoutModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, imports: [i1.TileLayoutComponent, i2.TileLayoutItemBodyComponent, i3.TileLayoutItemComponent, i4.TileLayoutItemHeaderComponent], exports: [i1.TileLayoutComponent, i2.TileLayoutItemBodyComponent, i3.TileLayoutItemComponent, i4.TileLayoutItemHeaderComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, imports: [i1.TileLayoutComponent] });
 }
-TileLayoutModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, imports: [i1.TileLayoutComponent, i2.TileLayoutItemBodyComponent, i3.TileLayoutItemComponent, i4.TileLayoutItemHeaderComponent], exports: [i1.TileLayoutComponent, i2.TileLayoutItemBodyComponent, i3.TileLayoutItemComponent, i4.TileLayoutItemHeaderComponent] });
-TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, imports: [KENDO_TILELAYOUT] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TILELAYOUT],

package/{esm2020 → esm2022}/timeline/localization/custom-messages.component.mjs

@@ -11,6 +11,7 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * Custom component messages override default component messages.
  */
 export class TimelineCustomMessagesComponent extends TimelineMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
@@ -18,15 +19,15 @@ export class TimelineCustomMessagesComponent extends TimelineMessages {
     get override() {
         return true;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimelineCustomMessagesComponent, isStandalone: true, selector: "kendo-timeline-messages", providers: [
+            {
+                provide: TimelineMessages,
+                useExisting: forwardRef(() => TimelineCustomMessagesComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
 }
-TimelineCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-TimelineCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCustomMessagesComponent, isStandalone: true, selector: "kendo-timeline-messages", providers: [
-        {
-            provide: TimelineMessages,
-            useExisting: forwardRef(() => TimelineCustomMessagesComponent),
-        },
-    ], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/timeline/localization/localized-messages.directive.mjs

@@ -11,19 +11,20 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class LocalizedTimelineMessagesDirective extends TimelineMessages {
+    service;
     constructor(service) {
         super();
         this.service = service;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedTimelineMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: LocalizedTimelineMessagesDirective, isStandalone: true, selector: "[kendoTimelineLocalizedMessages]", providers: [
+            {
+                provide: TimelineMessages,
+                useExisting: forwardRef(() => LocalizedTimelineMessagesDirective),
+            },
+        ], usesInheritance: true, ngImport: i0 });
 }
-LocalizedTimelineMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTimelineMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedTimelineMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LocalizedTimelineMessagesDirective, isStandalone: true, selector: "[kendoTimelineLocalizedMessages]", providers: [
-        {
-            provide: TimelineMessages,
-            useExisting: forwardRef(() => LocalizedTimelineMessagesDirective),
-        },
-    ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LocalizedTimelineMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocalizedTimelineMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [

package/{esm2020 → esm2022}/timeline/localization/messages.mjs

@@ -9,10 +9,18 @@ import * as i0 from "@angular/core";
  * @hidden
  */
 export class TimelineMessages extends ComponentMessages {
+    /**
+     * The title of the previous button in horizontal orientation.
+     */
+    previous;
+    /**
+     * The title of the next button in horizontal orientation.
+     */
+    next;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimelineMessages, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
 }
-TimelineMessages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMessages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-TimelineMessages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineMessages, selector: "kendo-timeline-messages-base", inputs: { previous: "previous", next: "next" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineMessages, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineMessages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector

package/{esm2020 → esm2022}/timeline/templates/timeline-card-actions.directive.mjs

@@ -13,13 +13,14 @@ import * as i0 from "@angular/core";
  * - `let-index="index"` (`number`) - The current event index.
  */
 export class TimelineCardActionsTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimelineCardActionsTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardActionsTemplate]", ngImport: i0 });
 }
-TimelineCardActionsTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardActionsTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TimelineCardActionsTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardActionsTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardActionsTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardActionsTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardActionsTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTimelineCardActionsTemplate]',

package/{esm2020 → esm2022}/timeline/templates/timeline-card-body.directive.mjs

@@ -13,13 +13,14 @@ import * as i0 from "@angular/core";
  * - `let-index="index"` (`number`) - The current event index.
  */
 export class TimelineCardBodyTemplateDirective {
+    templateRef;
     constructor(templateRef) {
         this.templateRef = templateRef;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: TimelineCardBodyTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardBodyTemplate]", ngImport: i0 });
 }
-TimelineCardBodyTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardBodyTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-TimelineCardBodyTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TimelineCardBodyTemplateDirective, isStandalone: true, selector: "[kendoTimelineCardBodyTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimelineCardBodyTemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimelineCardBodyTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoTimelineCardBodyTemplate]',