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

package/drawer/drawer.component.d.ts

@@ -154,6 +154,10 @@ export declare class DrawerComponent implements OnDestroy {
      * @hidden
      */
     itemTemplate: DrawerItemTemplateDirective;
+    /**
+     * @hidden
+     */
+    showLicenseWatermark: boolean;
     viewItems: DrawerViewItem[];
     private animationEnd;
     private dynamicRTLSubscription;

package/drawer.module.d.ts

@@ -14,12 +14,13 @@ import * as i8 from "./drawer/template-directives/footer-template.directive";
 import * as i9 from "./drawer/template-directives/item-template.directive";
 import * as i10 from "@angular/common";
 import * as i11 from "@progress/kendo-angular-icons";
+import * as i12 from "@progress/kendo-angular-common";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Drawer component.
  */
 export declare class DrawerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DrawerModule, [typeof i1.DrawerItemComponent, typeof i2.DrawerListComponent, typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective], [typeof i10.CommonModule, typeof i11.IconsModule], [typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DrawerModule, [typeof i1.DrawerItemComponent, typeof i2.DrawerListComponent, typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective], [typeof i10.CommonModule, typeof i11.IconsModule, typeof i12.WatermarkModule], [typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DrawerModule>;
 }

package/esm2020/drawer/drawer.component.mjs

@@ -13,12 +13,14 @@ import { AnimationBuilder } from '@angular/animations';
 import { collapseAnimation, expandAnimation } from './animations';
 import { take } from 'rxjs/operators';
 import { L10N_PREFIX, LocalizationService } from '@progress/kendo-angular-l10n';
+import { shouldShowValidationUI } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/animations";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./drawer.service";
 import * as i4 from "./list.component";
-import * as i5 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-common";
+import * as i6 from "@angular/common";
 const DEFAULT_ANIMATION = { type: 'slide', duration: 200 };
 /**
  * Represents the [Kendo UI Drawer component for Angular]({% slug overview_drawer %}).
@@ -133,9 +135,14 @@ export 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';
@@ -309,7 +316,9 @@ DrawerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [ngTemplateOutlet]="drawerTemplate?.templateRef">
             </ng-template>
         </div>
-    `, isInline: true, components: [{ type: i4.DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i4.DrawerListComponent, selector: "[kendoDrawerList]", inputs: ["itemTemplate", "mini", "expanded", "view"], outputs: ["select"] }, { type: i5.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: DrawerComponent, decorators: [{
             type: Component,
             args: [{
@@ -350,6 +359,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.AnimationBuilder }, { type: i2.LocalizationService }, { type: i3.DrawerService }]; }, propDecorators: { hostClasses: [{

package/esm2020/drawer.module.mjs

@@ -10,6 +10,7 @@ import { DrawerContentComponent } from './drawer/drawer-content.component';
 import { DrawerItemComponent } from './drawer/item.component';
 import { DrawerListComponent } from './drawer/list.component';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { WatermarkModule } from '@progress/kendo-angular-common';
 import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './drawer/template-directives';
 import * as i0 from "@angular/core";
 const templateDirectives = [
@@ -42,18 +43,18 @@ 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],
                     exports: [exportedModules],
-                    imports: [CommonModule, IconsModule]
+                    imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export 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'
 };

package/esm2020/panelbar/panelbar.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ContentChild, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, Output, QueryList, ViewChildren, isDevMode } from '@angular/core';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { Keys } from '@progress/kendo-angular-common';
+import { Keys, shouldShowValidationUI } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { PanelBarExpandMode } from './panelbar-expand-mode';
@@ -18,7 +18,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "./panelbar.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "./panelbar-item.component";
-import * as i4 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-common";
+import * as i5 from "@angular/common";
 /**
  * Represents the [Kendo UI PanelBar component for Angular]({% slug overview_panelbar %}).
  */
@@ -74,10 +75,14 @@ export 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;
@@ -93,7 +98,8 @@ export 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;
@@ -483,7 +489,7 @@ export class PanelBarComponent {
     }
 }
 PanelBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PanelBarComponent, deps: [{ token: i0.ElementRef }, { token: i1.PanelBarService }, { token: i2.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,
         {
@@ -511,7 +517,9 @@ PanelBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
                 </kendo-panelbar-item>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i3.PanelBarItemComponent, selector: "kendo-panelbar-item", inputs: ["title", "id", "icon", "iconClass", "svgIcon", "imageUrl", "disabled", "expanded", "selected", "content", "items", "template"], exportAs: ["kendoPanelbarItem"] }, { type: i4.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.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: [{
@@ -546,6 +554,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: i1.PanelBarService }, { type: i2.LocalizationService }]; }, propDecorators: { expandMode: [{
@@ -568,15 +578,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']

package/esm2020/panelbar.module.mjs

@@ -10,6 +10,7 @@ import { PanelBarContentDirective } from './panelbar/panelbar-content.directive'
 import { PanelBarItemTemplateDirective } from './panelbar/panelbar-item-template.directive';
 import { PanelBarItemTitleDirective } from './panelbar/panelbar-item-title.directive';
 import { IconsModule } from '@progress/kendo-angular-icons';
+import { WatermarkModule } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 const exportedModules = [
     PanelBarComponent,
@@ -39,17 +40,17 @@ 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],
                     exports: [exportedModules],
-                    imports: [CommonModule, IconsModule]
+                    imports: [CommonModule, IconsModule, WatermarkModule]
                 }]
         }] });

package/esm2020/tabstrip/tabstrip.component.mjs

@@ -18,7 +18,7 @@ import { normalizeScrollableSettings } from './models/scrollable-settings';
 import { TabScrollEvent } from './events/tabscroll-event';
 import { TabStripScrollableButtonComponent } from './scrollable-button.component';
 import { take } from 'rxjs/operators';
-import { guid, isDocumentAvailable } from '@progress/kendo-angular-common';
+import { guid, isDocumentAvailable, shouldShowValidationUI } from '@progress/kendo-angular-common';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./tabstrip.service";
@@ -84,16 +84,21 @@ export 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) => {
@@ -384,7 +389,7 @@ export 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: i2.TabStripService }, { token: i3.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,
@@ -492,7 +497,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: i4.TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: i5.TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i7.LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
+        <div kendoWatermarkOverlay *ngIf="showLicenseWatermark"></div>
+    `, isInline: true, components: [{ type: i4.TabStripScrollableButtonComponent, selector: "[kendoTabStripScrollableButton]", inputs: ["prev", "tabPosition", "scrollable"], outputs: ["tabScroll", "onClick"] }, { type: i5.TabComponent, selector: "[kendoTabStripTab]", inputs: ["tab", "index", "tabStripClosable", "tabStripCloseIcon", "customTabstripCloseIcon", "closeSVGIcon"], outputs: ["tabClose"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: i6.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i7.LocalizedTabStripMessagesDirective, selector: "[kendoTabStripLocalizedMessages]" }, { type: i8.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], animations: [
         trigger('state', [
             state('active', style({ opacity: 1 })),
             transition('* => active', [
@@ -624,6 +630,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: i2.TabStripService }, { type: i3.ScrollService }, { type: i0.NgZone }]; }, propDecorators: { height: [{
@@ -652,9 +659,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']

package/esm2020/tabstrip.module.mjs

@@ -11,7 +11,7 @@ import { TabContentDirective } from './tabstrip/directives/tab-content.directive
 import { TabTitleDirective } from './tabstrip/directives/tab-title.directive';
 import { TabStripCustomMessagesComponent } from './tabstrip/localization/custom-messages.component';
 import { LocalizedTabStripMessagesDirective } from './tabstrip/localization/localized-messages.directive';
-import { ResizeSensorModule } from '@progress/kendo-angular-common';
+import { ResizeSensorModule, WatermarkModule } from '@progress/kendo-angular-common';
 import { TabStripScrollableButtonComponent } from './tabstrip/scrollable-button.component';
 import { IconsModule } from '@progress/kendo-angular-icons';
 import { ButtonModule } from '@progress/kendo-angular-buttons';
@@ -48,19 +48,19 @@ 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],
                     exports: [exportedModules],
-                    imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule]
+                    imports: [CommonModule, ResizeSensorModule, IconsModule, ButtonModule, WatermarkModule]
                 }]
         }] });

package/esm2020/tilelayout/dragging-service.mjs

@@ -94,8 +94,8 @@ export 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
@@ -106,7 +106,7 @@ export 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(() => {
@@ -244,8 +244,8 @@ export 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();
     }

package/esm2020/tilelayout/tilelayout.component.mjs

@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
 import { Draggable } from '@progress/kendo-draggable';
 import { TileLayoutItemComponent } from './tilelayout-item.component';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
-import { hasObservers, isChanged } from '@progress/kendo-angular-common';
+import { hasObservers, isChanged, shouldShowValidationUI } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';
 import { isPresent } from '../common/util';
@@ -17,6 +17,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./dragging-service";
 import * as i3 from "./keyboard-navigation.service";
+import * as i4 from "@progress/kendo-angular-common";
+import * as i5 from "@angular/common";
 const autoFlowClasses = {
     column: 'k-grid-flow-col',
     row: 'k-grid-flow-row',
@@ -91,12 +93,17 @@ export 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.
@@ -248,7 +255,7 @@ export 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: i2.TileLayoutDraggingService }, { token: i3.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,
@@ -265,8 +272,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: i4.WatermarkOverlayComponent, selector: "div[kendoWatermarkOverlay]" }], directives: [{ type: i5.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: [{
@@ -289,7 +298,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: i2.TileLayoutDraggingService }, { type: i3.TileLayoutKeyboardNavigationService }]; }, propDecorators: { columns: [{
@@ -315,6 +326,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']

package/esm2020/tilelayout.module.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { WatermarkModule } from '@progress/kendo-angular-common';
 import { TileLayoutComponent } from './tilelayout/tilelayout.component';
 import { TileLayoutItemComponent } from './tilelayout/tilelayout-item.component';
 import { TileLayoutItemHeaderComponent } from './tilelayout/tilelayout-item-header.component';
@@ -37,17 +38,17 @@ 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],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, WatermarkModule]
                 }]
         }] });