@progress/kendo-angular-layout 13.4.1-develop.3 → 13.5.0-develop.1

package/fesm2020/progress-kendo-angular-layout.mjs

@@ -7,7 +7,7 @@ import { Injectable, Directive, Optional, isDevMode, Component, SkipSelf, Host,
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
 import * as i1$1 from '@progress/kendo-angular-common';
-import { Keys, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI, PreventableEvent as PreventableEvent$1, isDocumentAvailable, guid, hasObservers, focusableSelector, isChanged, WatermarkModule, EventsModule, DraggableModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1$2 from '@angular/animations';
 import { trigger, state, style, transition, animate, AUTO_STYLE } from '@angular/animations';
@@ -31,8 +31,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1693394986,
-    version: '13.4.1-develop.3',
+    publishDate: 1694187013,
+    version: '13.5.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
 
@@ -1030,10 +1030,14 @@ class PanelBarComponent {
          * This event is preventable. If you cancel it, the item will remain expanded.
          */
         this.collapse = new EventEmitter();
+        this.hostClasses = true;
         this.tabIndex = 0;
         this.role = 'tree';
-        this.hostClass = true;
         this.activeDescendant = '';
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
         this.isViewInit = true;
         this.focused = false;
         this._keepItemContent = false;
@@ -1049,7 +1053,8 @@ class PanelBarComponent {
                 item.contentOverflow = contentOverflow;
             });
         };
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
         /* eslint-disable-line*/
         this.keyBindings = this.computedKeys;
         this.elementRef = elementRef;
@@ -1439,7 +1444,7 @@ class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: PanelBarService }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "class.k-panelbar": "this.hostClass", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
+PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PanelBarComponent, selector: "kendo-panelbar", inputs: { expandMode: "expandMode", selectable: "selectable", animate: "animate", height: "height", keepItemContent: "keepItemContent", items: "items" }, outputs: { stateChange: "stateChange", select: "select", expand: "expand", collapse: "collapse" }, host: { listeners: { "click": "onComponentClick($event)", "focus": "onComponentFocus()", "blur": "onComponentBlur()", "keydown": "onComponentKeyDown($event)" }, properties: { "class.k-panelbar": "this.hostClasses", "class.k-pos-relative": "this.hostClasses", "attr.tabIndex": "this.tabIndex", "attr.role": "this.role", "attr.aria-activedescendant": "this.activeDescendant", "style.height": "this.hostHeight", "style.overflow": "this.overflow", "attr.dir": "this.dir" } }, providers: [
         PanelBarService,
         LocalizationService,
         {
@@ -1467,7 +1472,9 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1502,6 +1509,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: PanelBarService }, { type: i1.LocalizationService }]; }, propDecorators: { expandMode: [{
@@ -1524,15 +1533,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], collapse: [{
                 type: Output
+            }], hostClasses: [{
+                type: HostBinding,
+                args: ['class.k-panelbar']
+            }, {
+                type: HostBinding,
+                args: ['class.k-pos-relative']
             }], tabIndex: [{
                 type: HostBinding,
                 args: ['attr.tabIndex']
             }], role: [{
                 type: HostBinding,
                 args: ['attr.role']
-            }], hostClass: [{
-                type: HostBinding,
-                args: ['class.k-panelbar']
             }], activeDescendant: [{
                 type: HostBinding,
                 args: ['attr.aria-activedescendant']
@@ -3575,16 +3587,21 @@ class TabStripComponent {
          * The event is preventable.
          */
         this.tabScroll = new EventEmitter();
-        this.hostClass = true;
+        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();
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.tabstripService.owner = this;
         this.scrollService.owner = this;
         this.subscriptions.add(this.scrollService.scrollButtonActiveStateChange.subscribe((activeButtonSettings) => {
@@ -3875,7 +3892,7 @@ class TabStripComponent {
     }
 }
 TabStripComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: TabStripService }, { token: ScrollService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClass", "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: [
+TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TabStripComponent, selector: "kendo-tabstrip", inputs: { height: "height", animate: "animate", tabAlignment: "tabAlignment", tabPosition: "tabPosition", keepTabContent: "keepTabContent", closable: "closable", scrollable: "scrollable", closeIcon: "closeIcon", closeIconClass: "closeIconClass", closeSVGIcon: "closeSVGIcon" }, outputs: { tabSelect: "tabSelect", tabClose: "tabClose", tabScroll: "tabScroll" }, host: { properties: { "class.k-tabstrip": "this.hostClasses", "class.k-pos-relative": "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,
@@ -3983,7 +4000,8 @@ TabStripComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </ng-template>
         </ng-template>
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('state', [
             state('active', style({ opacity: 1 })),
             transition('* => active', [
@@ -4115,6 +4133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             </ng-template>
         </ng-template>
         <kendo-resize-sensor *ngIf="isScrollable" (resize)="onResize()"></kendo-resize-sensor>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i0.Renderer2 }, { type: i0.ElementRef }, { type: TabStripService }, { type: ScrollService }, { type: i0.NgZone }]; }, propDecorators: { height: [{
@@ -4143,9 +4162,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 type: Output
             }], tabScroll: [{
                 type: Output
-            }], hostClass: [{
+            }], hostClasses: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip']
+            }, {
+                type: HostBinding,
+                args: ['class.k-pos-relative']
             }], tabsAtTop: [{
                 type: HostBinding,
                 args: ['class.k-tabstrip-top']
@@ -4998,9 +5020,14 @@ class DrawerComponent {
          * Used to provide a two-way binding for the `expanded` property.
          */
         this.expandedChange = new EventEmitter();
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
         this.animationEnd = new EventEmitter();
         this.rtl = false;
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
         this.dynamicRTLSubscription = this.localizationService.changes.subscribe(({ rtl }) => {
             this.rtl = rtl;
             this.direction = this.rtl ? 'rtl' : 'ltr';
@@ -5174,7 +5201,9 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
-    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5215,6 +5244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$2.AnimationBuilder }, { type: i1.LocalizationService }, { type: DrawerService }]; }, propDecorators: { hostClasses: [{
@@ -8296,8 +8327,8 @@ class TileLayoutDraggingService {
             };
         });
         setElementStyles(this.renderer, this.draggedItemWrapper, {
-            left: tileRect.left + window.pageXOffset + 'px',
-            top: tileRect.top + window.pageYOffset + 'px',
+            left: tileRect.left + window.pageXOffset - window.scrollX + 'px',
+            top: tileRect.top + window.pageYOffset - window.scrollY + 'px',
             width: tileRect.width + 'px',
             height: tileRect.height + 'px',
             zIndex: DRAGGED_ZINDEX
@@ -8308,7 +8339,7 @@ class TileLayoutDraggingService {
         });
         this.zone.run(() => this.targetOrder = this.draggedItem.order);
         setElementStyles(this.renderer, this.draggedItemWrapper, {
-            position: 'absolute'
+            position: 'fixed'
         });
         if (this.reorderable.getValue() && !resizing) {
             this.zone.run(() => {
@@ -8446,8 +8477,8 @@ class TileLayoutDraggingService {
             this.tileLayoutSettings.tileLayoutElement.appendChild(this.tileLayoutSettings.hintElement);
         }
         setElementStyles(this.renderer, this.draggedItemWrapper, {
-            top: (event.pageY - this.offset.top) + 'px',
-            left: (event.pageX - this.offset.left) + 'px'
+            top: (event.pageY - this.offset.top - window.scrollY) + 'px',
+            left: (event.pageX - this.offset.left - window.scrollX) + 'px'
         });
         this.cdr.markForCheck();
     }
@@ -9165,12 +9196,17 @@ class TileLayoutComponent {
         this.resize = new EventEmitter();
         this.hostClass = true;
         this.hostRole = 'list';
+        /**
+         * @hidden
+         */
+        this.showLicenseWatermark = false;
         this.subs = new Subscription();
         this._gap = {
             rows: 16,
             columns: 16
         };
-        validatePackage(packageMetadata);
+        const isValid = validatePackage(packageMetadata);
+        this.showLicenseWatermark = shouldShowValidationUI(isValid);
     }
     /**
      * The numeric values which determine the spacing in pixels between the layout items horizontally and vertically.
@@ -9322,7 +9358,7 @@ class TileLayoutComponent {
     }
 }
 TileLayoutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutComponent, deps: [{ token: i0.NgZone }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }, { token: TileLayoutDraggingService }, { token: TileLayoutKeyboardNavigationService }], target: i0.ɵɵFactoryTarget.Component });
-TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-tilelayout": "this.hostClass", "attr.role": "this.hostRole", "style.gap": "this.gapStyle", "style.padding": "this.gapStyle", "attr.dir": "this.direction" } }, providers: [
+TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: TileLayoutComponent, selector: "kendo-tilelayout", inputs: { columns: "columns", columnWidth: "columnWidth", gap: "gap", reorderable: "reorderable", resizable: "resizable", rowHeight: "rowHeight", autoFlow: "autoFlow", navigable: "navigable" }, outputs: { reorder: "reorder", resize: "resize" }, host: { properties: { "class.k-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,
@@ -9339,8 +9375,10 @@ TileLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
             [style.gridColumnStart]="currentColStart"
             [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'"></div>
-    `, isInline: true });
+            [style.zIndex]="'1'">
+        </div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i1$1.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutComponent, decorators: [{
             type: Component,
             args: [{
@@ -9363,7 +9401,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [style.gridRowEnd]="draggedItemWrapper?.style.gridRowEnd"
             [style.gridColumnStart]="currentColStart"
             [style.gridRowStart]="currentRowStart"
-            [style.zIndex]="'1'"></div>
+            [style.zIndex]="'1'">
+        </div>
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1.LocalizationService }, { type: TileLayoutDraggingService }, { type: TileLayoutKeyboardNavigationService }]; }, propDecorators: { columns: [{
@@ -9389,6 +9429,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], hostClass: [{
                 type: HostBinding,
                 args: ['class.k-tilelayout']
+            }, {
+                type: HostBinding,
+                args: ['class.k-pos-relative']
             }], hostRole: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -9546,19 +9589,19 @@ DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
-        DrawerItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [DrawerComponent,
+        DrawerItemTemplateDirective], imports: [CommonModule, IconsModule, WatermarkModule], exports: [DrawerComponent,
         DrawerContainerComponent,
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
         DrawerItemTemplateDirective] });
-DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, imports: [[CommonModule, IconsModule]] });
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, imports: [[CommonModule, IconsModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$8],
                     exports: [exportedModules$8],
-                    imports: [CommonModule, IconsModule]
+                    imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });
 
@@ -9617,18 +9660,18 @@ PanelBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         PanelBarItemComponent,
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
-        PanelBarItemTitleDirective], imports: [CommonModule, IconsModule], exports: [PanelBarComponent,
+        PanelBarItemTitleDirective], imports: [CommonModule, IconsModule, WatermarkModule], exports: [PanelBarComponent,
         PanelBarItemComponent,
         PanelBarContentDirective,
         PanelBarItemTemplateDirective,
         PanelBarItemTitleDirective] });
-PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, imports: [[CommonModule, IconsModule]] });
+PanelBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, imports: [[CommonModule, IconsModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$6],
                     exports: [exportedModules$6],
-                    imports: [CommonModule, IconsModule]
+                    imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });
 
@@ -9748,20 +9791,20 @@ TabStripModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
-        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule], exports: [TabStripComponent,
+        LocalizedTabStripMessagesDirective, TabStripScrollableButtonComponent], imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule], exports: [TabStripComponent,
         TabStripTabComponent,
         TabContentDirective,
         TabTitleDirective,
         TabComponent,
         TabStripCustomMessagesComponent,
         LocalizedTabStripMessagesDirective] });
-TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule]] });
+TabStripModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, imports: [[CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TabStripModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$3],
                     exports: [exportedModules$3],
-                    imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule]
+                    imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]
                 }]
         }] });
 
@@ -9792,18 +9835,18 @@ TileLayoutModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         TileLayoutItemComponent,
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
-        TileLayoutResizeHandleDirective], imports: [CommonModule], exports: [TileLayoutComponent,
+        TileLayoutResizeHandleDirective], imports: [CommonModule, WatermarkModule], exports: [TileLayoutComponent,
         TileLayoutItemComponent,
         TileLayoutItemHeaderComponent,
         TileLayoutItemBodyComponent,
         TileLayoutResizeHandleDirective] });
-TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, imports: [[CommonModule]] });
+TileLayoutModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, imports: [[CommonModule, WatermarkModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: TileLayoutModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$2],
                     exports: [exportedModules$2],
-                    imports: [CommonModule]
+                    imports: [CommonModule, WatermarkModule]
                 }]
         }] });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-layout",
-  "version": "13.4.1-develop.3",
+  "version": "13.5.0-develop.1",
   "description": "Kendo UI for Angular Layout Package - a collection of components to create professional application layoyts",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -39,16 +39,16 @@
     "@angular/core": "13 - 16",
     "@angular/platform-browser": "13 - 16",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "13.4.1-develop.3",
-    "@progress/kendo-angular-l10n": "13.4.1-develop.3",
-    "@progress/kendo-angular-progressbar": "13.4.1-develop.3",
-    "@progress/kendo-angular-icons": "13.4.1-develop.3",
-    "@progress/kendo-angular-buttons": "13.4.1-develop.3",
+    "@progress/kendo-angular-common": "13.5.0-develop.1",
+    "@progress/kendo-angular-l10n": "13.5.0-develop.1",
+    "@progress/kendo-angular-progressbar": "13.5.0-develop.1",
+    "@progress/kendo-angular-icons": "13.5.0-develop.1",
+    "@progress/kendo-angular-buttons": "13.5.0-develop.1",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "13.4.1-develop.3",
+    "@progress/kendo-angular-schematics": "13.5.0-develop.1",
     "@progress/kendo-draggable": "^3.0.2"
   },
   "schematics": "./schematics/collection.json",

package/panelbar/panelbar.component.d.ts

@@ -77,9 +77,9 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
      * This event is preventable. If you cancel it, the item will remain expanded.
      */
     collapse: EventEmitter<PanelBarCollapseEvent>;
+    hostClasses: boolean;
     tabIndex: number;
     role: string;
-    hostClass: boolean;
     activeDescendant: string;
     get hostHeight(): string;
     get overflow(): string;
@@ -88,6 +88,10 @@ export declare class PanelBarComponent implements AfterViewChecked, OnChanges, O
     contentItems: QueryList<PanelBarItemComponent>;
     contentChildItems: QueryList<PanelBarItemComponent>;
     viewChildItems: QueryList<PanelBarItemComponent>;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
     private localizationChangeSubscription;
     private allItems;
     private childrenItems;

package/panelbar.module.d.ts

@@ -10,6 +10,7 @@ import * as i4 from "./panelbar/panelbar-item-template.directive";
 import * as i5 from "./panelbar/panelbar-item-title.directive";
 import * as i6 from "@angular/common";
 import * as i7 from "@progress/kendo-angular-icons";
+import * as i8 from "@progress/kendo-angular-common";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the PanelBar component.
@@ -23,6 +24,6 @@ import * as i7 from "@progress/kendo-angular-icons";
  */
 export declare class PanelBarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<PanelBarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<PanelBarModule, [typeof i1.PanelBarComponent, typeof i2.PanelBarItemComponent, typeof i3.PanelBarContentDirective, typeof i4.PanelBarItemTemplateDirective, typeof i5.PanelBarItemTitleDirective], [typeof i6.CommonModule, typeof i7.IconsModule], [typeof i1.PanelBarComponent, typeof i2.PanelBarItemComponent, typeof i3.PanelBarContentDirective, typeof i4.PanelBarItemTemplateDirective, typeof i5.PanelBarItemTitleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<PanelBarModule, [typeof i1.PanelBarComponent, typeof i2.PanelBarItemComponent, typeof i3.PanelBarContentDirective, typeof i4.PanelBarItemTemplateDirective, typeof i5.PanelBarItemTitleDirective], [typeof i6.CommonModule, typeof i7.IconsModule, typeof i8.WatermarkModule], [typeof i1.PanelBarComponent, typeof i2.PanelBarItemComponent, typeof i3.PanelBarContentDirective, typeof i4.PanelBarItemTemplateDirective, typeof i5.PanelBarItemTitleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<PanelBarModule>;
 }

package/tabstrip/tabstrip.component.d.ts

@@ -101,7 +101,7 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      * The event is preventable.
      */
     tabScroll: EventEmitter<TabScrollEvent>;
-    hostClass: boolean;
+    hostClasses: boolean;
     get tabsAtTop(): boolean;
     get tabsAtRight(): boolean;
     get tabsAtBottom(): boolean;
@@ -132,6 +132,10 @@ export declare class TabStripComponent implements AfterViewInit, OnDestroy {
      * @hidden
      */
     localizationChangeSubscription: Subscription;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
     private _height;
     private _scrollableSettings;
     private subscriptions;

package/tabstrip.module.d.ts

@@ -27,6 +27,6 @@ import * as i12 from "@progress/kendo-angular-buttons";
  */
 export declare class TabStripModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TabStripModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TabStripModule, [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective, typeof i8.TabStripScrollableButtonComponent], [typeof i9.CommonModule, typeof i10.ResizeSensorModule, typeof i11.IconsModule, typeof i12.ButtonModule], [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TabStripModule, [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective, typeof i8.TabStripScrollableButtonComponent], [typeof i9.CommonModule, typeof i10.ResizeSensorModule, typeof i11.IconsModule, typeof i12.ButtonModule, typeof i10.WatermarkModule], [typeof i1.TabStripComponent, typeof i2.TabStripTabComponent, typeof i3.TabContentDirective, typeof i4.TabTitleDirective, typeof i5.TabComponent, typeof i6.TabStripCustomMessagesComponent, typeof i7.LocalizedTabStripMessagesDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TabStripModule>;
 }

package/tilelayout/tilelayout.component.d.ts

@@ -100,6 +100,10 @@ export declare class TileLayoutComponent implements OnInit, AfterViewInit, After
      */
     items: QueryList<TileLayoutItemComponent>;
     private hint;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
     private draggable;
     private subs;
     private _gap;

package/tilelayout.module.d.ts

@@ -9,6 +9,7 @@ import * as i3 from "./tilelayout/tilelayout-item-header.component";
 import * as i4 from "./tilelayout/tilelayout-item-body.component";
 import * as i5 from "./tilelayout/tilelayout-resize-handle.directive";
 import * as i6 from "@angular/common";
+import * as i7 from "@progress/kendo-angular-common";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the TileLayout component.
@@ -21,6 +22,6 @@ import * as i6 from "@angular/common";
  */
 export declare class TileLayoutModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<TileLayoutModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TileLayoutModule, [typeof i1.TileLayoutComponent, typeof i2.TileLayoutItemComponent, typeof i3.TileLayoutItemHeaderComponent, typeof i4.TileLayoutItemBodyComponent, typeof i5.TileLayoutResizeHandleDirective], [typeof i6.CommonModule], [typeof i1.TileLayoutComponent, typeof i2.TileLayoutItemComponent, typeof i3.TileLayoutItemHeaderComponent, typeof i4.TileLayoutItemBodyComponent, typeof i5.TileLayoutResizeHandleDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TileLayoutModule, [typeof i1.TileLayoutComponent, typeof i2.TileLayoutItemComponent, typeof i3.TileLayoutItemHeaderComponent, typeof i4.TileLayoutItemBodyComponent, typeof i5.TileLayoutResizeHandleDirective], [typeof i6.CommonModule, typeof i7.WatermarkModule], [typeof i1.TileLayoutComponent, typeof i2.TileLayoutItemComponent, typeof i3.TileLayoutItemHeaderComponent, typeof i4.TileLayoutItemBodyComponent, typeof i5.TileLayoutResizeHandleDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<TileLayoutModule>;
 }