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

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

@@ -30,94 +30,12 @@ import * as i3 from "./tabstrip-scroll.service";
  * Represents the [Kendo UI TabStrip component for Angular]({% slug overview_tabstrip %}).
  */
 export class TabStripComponent {
-    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
-        this.localization = localization;
-        this.renderer = renderer;
-        this.wrapper = wrapper;
-        this.tabstripService = tabstripService;
-        this.scrollService = scrollService;
-        this.ngZone = ngZone;
-        /**
-         * Enables the tab animation.
-         *
-         * @default true
-         */
-        this.animate = true;
-        /**
-         * Sets the alignment of the tabs.
-         *
-         * @default: 'start'
-         */
-        this.tabAlignment = 'start';
-        /**
-         * Sets the position of the tabs. Defaults to `top`.
-         *
-         * @default 'top'
-         */
-        this.tabPosition = 'top';
-        /**
-         * When set to `true`, the component renders all tabs and they are persisted in the DOM.
-         * By default, `keepTabContent` is `false`.
-         *
-         * @default false
-         */
-        this.keepTabContent = false;
-        /**
-         * When set to `true`, a close button will be rendered inside each tab.
-         * By default, `closable` is `false`.
-         *
-         * @default false
-         */
-        this.closable = false;
-        /**
-         * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
-         */
-        this.closeIcon = 'x';
-        /**
-         * Determines whether the content associated with each tab will be rendered.
-         *
-         * @default true
-         */
-        this.showContentArea = true;
-        /**
-         * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
-         * The event data contains the index of the selected tab and its title.
-         */
-        this.tabSelect = new EventEmitter();
-        /**
-         * Fires each time the user closes a tab.
-         * The event data contains the index of the closed tab and its instance.
-         */
-        this.tabClose = new EventEmitter();
-        /**
-         * Fires each time the user scrolls the TabStrip list.
-         * The event is preventable.
-         */
-        this.tabScroll = new EventEmitter();
-        this.hostClasses = true;
-        /**
-         * A query list of all declared tabs.
-         */
-        this.tabs = new QueryList();
-        /**
-         * @hidden
-         */
-        this.showLicenseWatermark = false;
-        this._scrollableSettings = normalizeScrollableSettings(false);
-        this.subscriptions = new Subscription();
-        this.subscriptionsArePresent = false;
-        this.tabStripId = guid();
-        const isValid = validatePackage(packageMetadata);
-        this.showLicenseWatermark = shouldShowValidationUI(isValid);
-        this.tabstripService.owner = this;
-        this.scrollService.owner = this;
-        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
-            if (this.hasScrollButtons) {
-                const action = activeButtonSettings.active ? 'remove' : 'add';
-                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
-            }
-        }));
-    }
+    localization;
+    renderer;
+    wrapper;
+    tabstripService;
+    scrollService;
+    ngZone;
     /**
      * Sets the height of the TabStrip.
      */
@@ -128,6 +46,38 @@ export class TabStripComponent {
     get height() {
         return this._height;
     }
+    /**
+     * Enables the tab animation.
+     *
+     * @default true
+     */
+    animate = true;
+    /**
+     * Sets the alignment of the tabs.
+     *
+     * @default: 'start'
+     */
+    tabAlignment = 'start';
+    /**
+     * Sets the position of the tabs. Defaults to `top`.
+     *
+     * @default 'top'
+     */
+    tabPosition = 'top';
+    /**
+     * When set to `true`, the component renders all tabs and they are persisted in the DOM.
+     * By default, `keepTabContent` is `false`.
+     *
+     * @default false
+     */
+    keepTabContent = false;
+    /**
+     * When set to `true`, a close button will be rendered inside each tab.
+     * By default, `closable` is `false`.
+     *
+     * @default false
+     */
+    closable = false;
     /**
      * Enables the scrolling of the tab list. When set to `true` and the total size of all tabs
      * is greater than the size of the TabStrip container, scroll buttons will be rendered on each end of the tab list.
@@ -146,6 +96,14 @@ export class TabStripComponent {
     get scrollable() {
         return this._scrollableSettings;
     }
+    /**
+     * Defines the name for an existing font icon in the Kendo UI theme for the close icon.
+     */
+    closeIcon = 'x';
+    /**
+     * Allows defining a custom CSS class, or multiple classes separated by spaces, which will be applied to the close button.
+     */
+    closeIconClass;
     /**
      * Defines an SVGIcon to be rendered for the close icon.
      * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
@@ -159,6 +117,28 @@ export class TabStripComponent {
     get closeSVGIcon() {
         return this._closeSVGIcon;
     }
+    /**
+     * Determines whether the content associated with each tab will be rendered.
+     *
+     * @default true
+     */
+    showContentArea = true;
+    /**
+     * Fires each time the user selects a tab ([see example](slug:events_tabstrip)).
+     * The event data contains the index of the selected tab and its title.
+     */
+    tabSelect = new EventEmitter();
+    /**
+     * Fires each time the user closes a tab.
+     * The event data contains the index of the closed tab and its instance.
+     */
+    tabClose = new EventEmitter();
+    /**
+     * Fires each time the user scrolls the TabStrip list.
+     * The event is preventable.
+     */
+    tabScroll = new EventEmitter();
+    hostClasses = true;
     get tabsAtTop() {
         return this.tabPosition === 'top';
     }
@@ -177,6 +157,60 @@ export class TabStripComponent {
     get tabStripScrollable() {
         return this._scrollableSettings.enabled;
     }
+    /**
+     * A query list of all declared tabs.
+     */
+    tabs = new QueryList();
+    /**
+     * @hidden
+     */
+    tablist;
+    /**
+     * @hidden
+     */
+    tabHeaderContainers;
+    /**
+     * @hidden
+     */
+    prevScrollButton;
+    /**
+     * @hidden
+     */
+    nextScrollButton;
+    /**
+     * @hidden
+     */
+    localizationChangeSubscription;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark = false;
+    _height;
+    _scrollableSettings = normalizeScrollableSettings(false);
+    subscriptions = new Subscription();
+    subscriptionsArePresent = false;
+    _closeSVGIcon;
+    tabStripId = guid();
+    tabsChangesSub;
+    activeStateChangeSub;
+    constructor(localization, renderer, wrapper, tabstripService, scrollService, ngZone) {
+        this.localization = localization;
+        this.renderer = renderer;
+        this.wrapper = wrapper;
+        this.tabstripService = tabstripService;
+        this.scrollService = scrollService;
+        this.ngZone = ngZone;
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
+        this.tabstripService.owner = this;
+        this.scrollService.owner = this;
+        this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
+            if (this.hasScrollButtons) {
+                const action = activeButtonSettings.active ? 'remove' : 'add';
+                this.renderer[`${action}Class`](this[`${activeButtonSettings.buttonType}ScrollButton`].host.nativeElement, 'k-disabled');
+            }
+        }));
+    }
     ngAfterViewInit() {
         if (!isDocumentAvailable()) {
             return;
@@ -386,17 +420,16 @@ export class TabStripComponent {
             }));
         });
     }
-}
-TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
-        TabStripService,
-        ScrollService,
-        LocalizationService,
-        {
-            provide: L10N_PREFIX,
-            useValue: 'kendo.tabstrip'
-        }
-    ], queries: [{ propertyName: "tabs", predicate: TabStripTabComponent }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true }, { propertyName: "tabHeaderContainers", predicate: ["tabHeaderContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoTabStrip"], usesOnChanges: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i2.TabStripService }, { token: i3.ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TabStripComponent, isStandalone: true, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon", showContentArea: "showContentArea" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-header": "this.hostClasses", "class.k-tabstrip-top": "this.tabsAtTop", "class.k-tabstrip-right": "this.tabsAtRight", "class.k-tabstrip-bottom": "this.tabsAtBottom", "class.k-tabstrip-left": "this.tabsAtLeft", "attr.dir": "this.dir", "class.k-tabstrip-scrollable": "this.tabStripScrollable" } }, providers: [
+            TabStripService,
+            ScrollService,
+            LocalizationService,
+            {
+                provide: L10N_PREFIX,
+                useValue: 'kendo.tabstrip'
+            }
+        ], queries: [{ propertyName: "tabs", predicate: TabStripTabComponent }], viewQueries: [{ propertyName: "tablist", first: true, predicate: ["tablist"], descendants: true }, { propertyName: "prevScrollButton", first: true, predicate: ["prevScrollButton"], descendants: true }, { propertyName: "nextScrollButton", first: true, predicate: ["nextScrollButton"], descendants: true }, { propertyName: "tabHeaderContainers", predicate: ["tabHeaderContainer"], descendants: true, read: ElementRef }], exportAs: ["kendoTabStrip"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoTabStripLocalizedMessages
             i18n-closeTitle="kendo.tabstrip.closeTitle|The title for the **Close** button in the TabStrip tab."
             closeTitle="Close"
@@ -433,7 +466,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
@@ -478,7 +511,7 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>
@@ -503,15 +536,16 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
         <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `, isInline: true, dependencies: [{ kind: "directive", type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { kind: "component", type: WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], animations: [
-        trigger('state', [
-            state('active', style({ opacity: 1 })),
-            transition('* => active', [
-                style({ opacity: 0 }),
-                animate('400ms ease-in')
+            trigger('state', [
+                state('active', style({ opacity: 1 })),
+                transition('* => active', [
+                    style({ opacity: 0 }),
+                    animate('400ms ease-in')
+                ])
             ])
-        ])
-    ] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripComponent, decorators: [{
+        ] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripComponent, decorators: [{
             type: Component,
             args: [{
                     animations: [
@@ -571,7 +605,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [prev]="true"
                     [title]="localization.get('previousTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)">
                 </span>
                 <ul role="tablist" #tablist
@@ -616,7 +650,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
                     [prev]="false"
                     [title]="localization.get('nextTabButton')"
                     (tabScroll)="tabScroll.emit($event)"
-                    class="k-icon-button k-button k-button-md k-rounded-md k-button-flat k-button-flat-base"
+                    class="k-icon-button k-button k-button-md k-button-flat k-button-flat-base"
                     (onClick)="onScrollButtonClick($event)"></span>
             </div>
         </ng-template>

package/{esm2020 → esm2022}/tabstrip/tabstrip.service.mjs

@@ -14,6 +14,9 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TabStripService {
+    localization;
+    ngZone;
+    owner;
     constructor(localization, ngZone) {
         this.localization = localization;
         this.ngZone = ngZone;
@@ -143,9 +146,9 @@ export class TabStripService {
         }
         return selectedIndex + 1;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService });
 }
-TabStripService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, deps: [{ token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
-TabStripService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.NgZone }]; } });

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

@@ -22,11 +22,11 @@ import * as i5 from "./tabstrip/localization/custom-messages.component";
  * - `TabTitleDirective`&mdash;The tab title directive used on the `<ng-template>` tag.
  */
 export class TabStripModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent] });
 }
-TabStripModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent], exports: [i1.TabStripComponent, i2.TabStripTabComponent, i3.TabContentDirective, i4.TabTitleDirective, i5.TabStripCustomMessagesComponent] });
-TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, imports: [i1.TabStripComponent, i2.TabStripTabComponent, i5.TabStripCustomMessagesComponent] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabStripModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [...KENDO_TABSTRIP],

package/{esm2020 → esm2022}/tilelayout/dragging-service.mjs

@@ -16,21 +16,15 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TileLayoutDraggingService {
-    constructor(zone, renderer, cdr, localization) {
-        this.zone = zone;
-        this.renderer = renderer;
-        this.cdr = cdr;
-        this.localization = localization;
-        this.reorderable = new BehaviorSubject(null);
-        this.resizable = new BehaviorSubject(null);
-        this.reorder = new Subject();
-        this.resize = new Subject();
-        this.lastDragCursorOffset = {
-            x: 0,
-            y: 0
-        };
-        this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
-    }
+    zone;
+    renderer;
+    cdr;
+    localization;
+    reorderable = new BehaviorSubject(null);
+    resizable = new BehaviorSubject(null);
+    reorder = new Subject();
+    resize = new Subject();
+    tileLayoutSettings;
     get colStart() {
         return this.currentColStart;
     }
@@ -43,6 +37,33 @@ export class TileLayoutDraggingService {
     get order() {
         return this.targetOrder;
     }
+    draggedItem;
+    draggedItemWrapper;
+    reordering;
+    resizing;
+    offset;
+    targetSize;
+    cellSize;
+    targetOrder;
+    currentColStart;
+    currentRowStart;
+    startingPoint;
+    currentResizingColSpan;
+    currentResizingRowSpan;
+    direction;
+    lastDragCursorOffset = {
+        x: 0,
+        y: 0
+    };
+    localizationSubscription;
+    rtl;
+    constructor(zone, renderer, cdr, localization) {
+        this.zone = zone;
+        this.renderer = renderer;
+        this.cdr = cdr;
+        this.localization = localization;
+        this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
+    }
     ngOnDestroy() {
         this.localizationSubscription.unsubscribe();
     }
@@ -114,8 +135,6 @@ export class TileLayoutDraggingService {
                 this.currentColStart = this.draggedItem.colStart;
                 this.currentRowStart = this.draggedItem.rowStart;
             });
-            const headerEl = this.draggedItem.elem.nativeElement.querySelector('.k-tilelayout-item-header');
-            this.renderer.addClass(headerEl, 'k-cursor-grabbing');
             this.cdr.markForCheck();
         }
         else if (this.resizable && resizing) {
@@ -335,10 +354,6 @@ export class TileLayoutDraggingService {
         this.resizing = this.reordering = false;
         this.direction = null;
         if (this.draggedItemWrapper) {
-            const grabHandle = this.draggedItemWrapper.querySelector('.k-cursor-grab');
-            if (grabHandle) {
-                this.renderer.removeClass(grabHandle, 'k-cursor-grabbing');
-            }
             setElementStyles(this.renderer, this.draggedItemWrapper, {
                 top: '',
                 left: '',
@@ -396,9 +411,9 @@ export class TileLayoutDraggingService {
         const hintHeight = totalHintCellsHeight + totalHintGapsHeight - HINT_BORDERS_HEIGHT;
         return hintHeight;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService });
 }
-TileLayoutDraggingService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-TileLayoutDraggingService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutDraggingService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i1.LocalizationService }]; } });

package/{esm2020 → esm2022}/tilelayout/keyboard-navigation.service.mjs

@@ -15,11 +15,16 @@ import * as i1 from "@progress/kendo-angular-l10n";
  * @hidden
  */
 export class TileLayoutKeyboardNavigationService {
+    zone;
+    renderer;
+    localization;
+    navigable = new BehaviorSubject(false);
+    localizationSubscription;
+    rtl;
     constructor(zone, renderer, localization) {
         this.zone = zone;
         this.renderer = renderer;
         this.localization = localization;
-        this.navigable = new BehaviorSubject(false);
         this.localizationSubscription = this.localization.changes.subscribe(({ rtl }) => this.rtl = rtl);
     }
     ngOnDestroy() {
@@ -138,9 +143,9 @@ export class TileLayoutKeyboardNavigationService {
     targetTile(focusedTile, items, offset) {
         return items.find(item => item.order === focusedTile.order + offset);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService });
 }
-TileLayoutKeyboardNavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService, deps: [{ token: i0.NgZone }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Injectable });
-TileLayoutKeyboardNavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutKeyboardNavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.Renderer2 }, { type: i1.LocalizationService }]; } });

package/{esm2020 → esm2022}/tilelayout/reorder-event.mjs

@@ -8,6 +8,14 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
  * positions of the items is changed via the UI. If you prevent the event, the change is canceled ([see example]({% slug reordering_tilelayout %}#toc-handling-the-reorder-event)).
  */
 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.

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

@@ -8,6 +8,12 @@ import { PreventableEvent } from '@progress/kendo-angular-common';
  * is changed from the UI. If you cancel the event, the change is prevented ([see example]({% slug resizing_tilelayout %}#toc-handling-the-resize-event)).
  */
 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

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

@@ -8,16 +8,14 @@ import * as i0 from "@angular/core";
  * Holds the main content of the TileLayoutItem component.
  */
 export class TileLayoutItemBodyComponent {
-    constructor() {
-        this.hostClass = true;
-        this.minHeight = 0;
-    }
-}
-TileLayoutItemBodyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutItemBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: `
+    hostClass = true;
+    minHeight = 0;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "15.2.10", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-tilelayout-item-body',

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

@@ -0,0 +1,33 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2024 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";
+/**
+ * Holds the content of the header section of the TileLayoutItem component.
+ * This is the area which can be dragged to reorder the items if reordering is enabled for this item.
+ */
+export class TileLayoutItemHeaderComponent {
+    hostClass = true;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TileLayoutItemHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", 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: "16.2.12", 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']
+            }] } });