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

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

@@ -7,7 +7,7 @@ import { Directive, Optional, Injectable, 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: 1694174837,
-    version: '13.4.1-develop.4',
+    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'
 };
 
@@ -1036,10 +1036,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;
@@ -1055,7 +1059,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;
@@ -1445,7 +1450,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,
         {
@@ -1473,7 +1478,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: [{
@@ -1508,6 +1515,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: [{
@@ -1530,15 +1539,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']
@@ -3585,16 +3597,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) => {
@@ -3885,7 +3902,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,
@@ -3993,7 +4010,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', [
@@ -4125,6 +4143,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: [{
@@ -4153,9 +4172,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']
@@ -5017,9 +5039,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';
@@ -5193,7 +5220,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: [{
@@ -5234,6 +5263,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: [{
@@ -8323,8 +8354,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
@@ -8335,7 +8366,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(() => {
@@ -8473,8 +8504,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();
     }
@@ -9194,12 +9225,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.
@@ -9351,7 +9387,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,
@@ -9368,8 +9404,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: [{
@@ -9392,7 +9430,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: [{
@@ -9418,6 +9458,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']
@@ -9575,19 +9618,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]
                 }]
         }] });
 
@@ -9646,18 +9689,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]
                 }]
         }] });
 
@@ -9777,20 +9820,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]
                 }]
         }] });
 
@@ -9821,18 +9864,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]
                 }]
         }] });