@progress/kendo-react-layout 5.16.0-dev.202307201227 → 5.16.0-dev.202307211637

package/dist/es/drawer/DrawerNavigation.js

@@ -14,6 +14,8 @@ import * as PropTypes from 'prop-types';
 import { DrawerContext } from './context/DrawerContext';
 import { DrawerItem } from './DrawerItem';
 import { classNames } from '@progress/kendo-react-common';
+import { packageMetadata } from '../package-metadata';
+import { shouldShowValidationUI, validatePackage, WatermarkOverlay } from '@progress/kendo-react-common';
 /**
  * @hidden
  */
@@ -65,6 +67,8 @@ var NO_ANIMATION = { type: 'slide', duration: 0 };
  */
 export var DrawerNavigation = React.forwardRef(function (props, target) {
     var children = props.children, className = props.className, style = props.style;
+    validatePackage(packageMetadata);
+    var showLicenseWatermark = shouldShowValidationUI(packageMetadata);
     var _a = React.useContext(DrawerContext), animation = _a.animation, expanded = _a.expanded, mode = _a.mode, position = _a.position, onOverlayClick = _a.onOverlayClick, mini = _a.mini, dir = _a.dir, width = _a.width, miniWidth = _a.miniWidth, items = _a.items, item = _a.item, onSelect = _a.onSelect;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
@@ -131,7 +135,8 @@ export var DrawerNavigation = React.forwardRef(function (props, target) {
         return (React.createElement(ItemComp, __assign({ key: index }, drawerItemProps)));
     }))));
     var drawerNavigation = (React.createElement("div", { style: customSettings ? __assign(__assign({}, drawerAnimation), style) : style, className: navigationClassNames, ref: elementRef },
-        React.createElement("div", { className: 'k-drawer-wrapper', style: !expanded && mini && mode === 'overlay' ? { width: navMiniWidth } : { width: navWidth } }, drawerItems || children)));
+        React.createElement("div", { className: 'k-drawer-wrapper', style: !expanded && mini && mode === 'overlay' ? { width: navMiniWidth } : { width: navWidth } }, drawerItems || children),
+        showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
     return (mode === 'overlay' ?
         (React.createElement(React.Fragment, null,
             expanded && React.createElement("div", { className: "k-overlay", onClick: onOverlayClick }),

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1689853239,
+    publishDate: 1689955136,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/es/panelbar/PanelBar.d.ts

@@ -43,6 +43,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     readonly state: PanelBarState;
     private activeDescendant?;
     private _element;
+    private showLicenseWatermark;
     private nextTickId;
     private get expandMode();
     private get selectedItem();

package/dist/es/panelbar/PanelBar.js

@@ -37,8 +37,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { PanelBarItem } from './PanelBarItem';
 import { renderChildren, getInitialState, flatVisibleChildren, flatChildren, isArrayEqual, getFirstId } from './util';
-import { classNames, Keys } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
+import { classNames, Keys, validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { NavigationAction } from './interfaces/NavigationAction';
 var PanelBar = /** @class */ (function (_super) {
@@ -46,6 +45,7 @@ var PanelBar = /** @class */ (function (_super) {
     function PanelBar(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
+        _this.showLicenseWatermark = false;
         /**
          * @hidden
          */
@@ -180,6 +180,7 @@ var PanelBar = /** @class */ (function (_super) {
             }
         };
         validatePackage(packageMetadata);
+        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
         var initialState = getInitialState(props, _this.expandMode);
         if (!initialState.focused) {
             initialState.focused = getFirstId(props);
@@ -234,8 +235,10 @@ var PanelBar = /** @class */ (function (_super) {
         var ariaProps = {
             'aria-activedescendant': this.activeDescendant
         };
-        var className = classNames('k-panelbar', this.props.className);
-        return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), this.children));
+        var className = classNames('k-panelbar', 'k-pos-relative', this.props.className);
+        return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps),
+            this.children,
+            this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
     };
     PanelBar.prototype.nextTick = function (f) {
         this.nextTickId = window.setTimeout(function () { return f(); });

package/dist/es/tabstrip/TabStrip.d.ts

@@ -122,6 +122,7 @@ export declare class TabStrip extends React.Component<TabStripProps, {}> {
         mouseScrollSpeed: number;
     };
     private _element;
+    private showLicenseWatermark;
     private keyBinding;
     constructor(props: TabStripProps);
     /**

package/dist/es/tabstrip/TabStrip.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { TabStripNavigation } from './TabStripNavigation';
 import { TabStripContent } from './TabStripContent';
-import { Keys, classNames, validatePackage } from '@progress/kendo-react-common';
+import { Keys, classNames, validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 var TabStrip = /** @class */ (function (_super) {
     __extends(TabStrip, _super);
@@ -36,6 +36,7 @@ var TabStrip = /** @class */ (function (_super) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this._element = null;
+        _this.showLicenseWatermark = false;
         _this.keyBinding = (_a = {},
             _a[Keys.left] = function () { return _this.prevNavigatableTab(); },
             _a[Keys.right] = function () { return _this.nextNavigatableTab(); },
@@ -156,6 +157,7 @@ var TabStrip = /** @class */ (function (_super) {
             }
         };
         validatePackage(packageMetadata);
+        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
         return _this;
     }
     /**
@@ -166,7 +168,7 @@ var TabStrip = /** @class */ (function (_super) {
         var tabProps = __assign(__assign({}, this.props), { children: this.children(), onKeyDown: this.onKeyDown, onSelect: this.onSelect });
         var tabPosition = tabProps.tabPosition, _a = tabProps.tabIndex, tabIndex = _a === void 0 ? 0 : _a;
         var bottom = tabPosition === 'bottom';
-        var componentClasses = classNames('k-tabstrip', {
+        var componentClasses = classNames('k-tabstrip k-pos-relative', {
             'k-tabstrip-left': tabPosition === 'left',
             'k-tabstrip-right': tabPosition === 'right',
             'k-tabstrip-bottom': tabPosition === 'bottom',
@@ -176,7 +178,8 @@ var TabStrip = /** @class */ (function (_super) {
         return (React.createElement("div", { id: this.props.id, ref: function (div) { return _this._element = div; }, dir: this.props.dir, className: componentClasses, style: this.props.style },
             !bottom && React.createElement(TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
             this.renderContent(tabProps),
-            bottom && React.createElement(TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex }))));
+            bottom && React.createElement(TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
+            this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
     };
     TabStrip.prototype.invertKeys = function (original, inverted) {
         var rtl = this._element && (getComputedStyle(this._element).direction === 'rtl') || false;

package/dist/es/tilelayout/TileLayout.d.ts

@@ -121,6 +121,8 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
             colSpan: number;
         } & TilePosition)[];
     };
+    private showLicenseWatermark;
+    constructor(props: TileLayoutProps);
     /**
      * Gets the HTML element of the TileLayout component.
      */

package/dist/es/tilelayout/TileLayout.js

@@ -26,8 +26,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { getter, classNames, dispatchEvent } from '@progress/kendo-react-common';
+import { getter, classNames, dispatchEvent, WatermarkOverlay, shouldShowValidationUI, validatePackage } from '@progress/kendo-react-common';
 import { InternalTile } from './InternalTile';
+import { packageMetadata } from '../package-metadata';
 /**
  * @hidden
  */
@@ -43,8 +44,8 @@ var AUTO_FLOW_CLASSES = {
  */
 var TileLayout = /** @class */ (function (_super) {
     __extends(TileLayout, _super);
-    function TileLayout() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function TileLayout(props) {
+        var _this = _super.call(this, props) || this;
         /**
          * @hidden
          */
@@ -53,6 +54,7 @@ var TileLayout = /** @class */ (function (_super) {
          * @hidden
          */
         _this.state = { positions: (_this.props.items || []).map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); }) };
+        _this.showLicenseWatermark = false;
         /**
          * @hidden
          */
@@ -101,6 +103,8 @@ var TileLayout = /** @class */ (function (_super) {
                 dispatchEvent(_this.props.onReposition, {}, _this, { value: positions });
             }
         };
+        validatePackage(packageMetadata);
+        _this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
         return _this;
     }
     Object.defineProperty(TileLayout.prototype, "element", {
@@ -138,10 +142,12 @@ var TileLayout = /** @class */ (function (_super) {
             ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns)
             : 16;
         var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"), gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"), gap: gapValue, padding: gapValue }, style);
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: classNames('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(InternalTile, { key: _this.props.dataItemKey ? getter(_this.props.dataItemKey)(tile) : index, update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
-                    React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))));
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: classNames('k-tilelayout k-pos-relative', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
+                return (React.createElement(React.Fragment, { key: _this.props.dataItemKey ? getter(_this.props.dataItemKey)(tile) : index },
+                    React.createElement(InternalTile, { update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
+                        React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))),
+                    _this.showLicenseWatermark && React.createElement(WatermarkOverlay, null)));
             }) }));
     };
     /**

package/dist/npm/drawer/DrawerNavigation.js

@@ -17,6 +17,8 @@ var PropTypes = require("prop-types");
 var DrawerContext_1 = require("./context/DrawerContext");
 var DrawerItem_1 = require("./DrawerItem");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
+var package_metadata_1 = require("../package-metadata");
+var kendo_react_common_2 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
@@ -68,6 +70,8 @@ var NO_ANIMATION = { type: 'slide', duration: 0 };
  */
 exports.DrawerNavigation = React.forwardRef(function (props, target) {
     var children = props.children, className = props.className, style = props.style;
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var showLicenseWatermark = (0, kendo_react_common_2.shouldShowValidationUI)(package_metadata_1.packageMetadata);
     var _a = React.useContext(DrawerContext_1.DrawerContext), animation = _a.animation, expanded = _a.expanded, mode = _a.mode, position = _a.position, onOverlayClick = _a.onOverlayClick, mini = _a.mini, dir = _a.dir, width = _a.width, miniWidth = _a.miniWidth, items = _a.items, item = _a.item, onSelect = _a.onSelect;
     var elementRef = React.useRef(null);
     var focusElement = React.useCallback(function () {
@@ -134,7 +138,8 @@ exports.DrawerNavigation = React.forwardRef(function (props, target) {
         return (React.createElement(ItemComp, __assign({ key: index }, drawerItemProps)));
     }))));
     var drawerNavigation = (React.createElement("div", { style: customSettings ? __assign(__assign({}, drawerAnimation), style) : style, className: navigationClassNames, ref: elementRef },
-        React.createElement("div", { className: 'k-drawer-wrapper', style: !expanded && mini && mode === 'overlay' ? { width: navMiniWidth } : { width: navWidth } }, drawerItems || children)));
+        React.createElement("div", { className: 'k-drawer-wrapper', style: !expanded && mini && mode === 'overlay' ? { width: navMiniWidth } : { width: navWidth } }, drawerItems || children),
+        showLicenseWatermark && React.createElement(kendo_react_common_2.WatermarkOverlay, null)));
     return (mode === 'overlay' ?
         (React.createElement(React.Fragment, null,
             expanded && React.createElement("div", { className: "k-overlay", onClick: onOverlayClick }),

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-layout',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1689853239,
+    publishDate: 1689955136,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/PanelBar.d.ts

@@ -43,6 +43,7 @@ export declare class PanelBar extends React.Component<PanelBarProps, PanelBarSta
     readonly state: PanelBarState;
     private activeDescendant?;
     private _element;
+    private showLicenseWatermark;
     private nextTickId;
     private get expandMode();
     private get selectedItem();

package/dist/npm/panelbar/PanelBar.js

@@ -41,7 +41,6 @@ var PropTypes = require("prop-types");
 var PanelBarItem_1 = require("./PanelBarItem");
 var util_1 = require("./util");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var NavigationAction_1 = require("./interfaces/NavigationAction");
 var PanelBar = /** @class */ (function (_super) {
@@ -49,6 +48,7 @@ var PanelBar = /** @class */ (function (_super) {
     function PanelBar(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
+        _this.showLicenseWatermark = false;
         /**
          * @hidden
          */
@@ -182,7 +182,8 @@ var PanelBar = /** @class */ (function (_super) {
                 }
             }
         };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+        _this.showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
         var initialState = (0, util_1.getInitialState)(props, _this.expandMode);
         if (!initialState.focused) {
             initialState.focused = (0, util_1.getFirstId)(props);
@@ -237,8 +238,10 @@ var PanelBar = /** @class */ (function (_super) {
         var ariaProps = {
             'aria-activedescendant': this.activeDescendant
         };
-        var className = (0, kendo_react_common_1.classNames)('k-panelbar', this.props.className);
-        return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps), this.children));
+        var className = (0, kendo_react_common_1.classNames)('k-panelbar', 'k-pos-relative', this.props.className);
+        return (React.createElement("ul", __assign({ ref: function (div) { _this._element = div; }, dir: this.props.dir, role: 'tree', tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleWrapperFocus, onBlur: this.handleWrapperBlur, className: className, style: this.props.style }, ariaProps),
+            this.children,
+            this.showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
     };
     PanelBar.prototype.nextTick = function (f) {
         this.nextTickId = window.setTimeout(function () { return f(); });

package/dist/npm/tabstrip/TabStrip.d.ts

@@ -122,6 +122,7 @@ export declare class TabStrip extends React.Component<TabStripProps, {}> {
         mouseScrollSpeed: number;
     };
     private _element;
+    private showLicenseWatermark;
     private keyBinding;
     constructor(props: TabStripProps);
     /**

package/dist/npm/tabstrip/TabStrip.js

@@ -39,6 +39,7 @@ var TabStrip = /** @class */ (function (_super) {
         var _a;
         var _this = _super.call(this, props) || this;
         _this._element = null;
+        _this.showLicenseWatermark = false;
         _this.keyBinding = (_a = {},
             _a[kendo_react_common_1.Keys.left] = function () { return _this.prevNavigatableTab(); },
             _a[kendo_react_common_1.Keys.right] = function () { return _this.nextNavigatableTab(); },
@@ -159,6 +160,7 @@ var TabStrip = /** @class */ (function (_super) {
             }
         };
         (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+        _this.showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
         return _this;
     }
     /**
@@ -169,7 +171,7 @@ var TabStrip = /** @class */ (function (_super) {
         var tabProps = __assign(__assign({}, this.props), { children: this.children(), onKeyDown: this.onKeyDown, onSelect: this.onSelect });
         var tabPosition = tabProps.tabPosition, _a = tabProps.tabIndex, tabIndex = _a === void 0 ? 0 : _a;
         var bottom = tabPosition === 'bottom';
-        var componentClasses = (0, kendo_react_common_1.classNames)('k-tabstrip', {
+        var componentClasses = (0, kendo_react_common_1.classNames)('k-tabstrip k-pos-relative', {
             'k-tabstrip-left': tabPosition === 'left',
             'k-tabstrip-right': tabPosition === 'right',
             'k-tabstrip-bottom': tabPosition === 'bottom',
@@ -179,7 +181,8 @@ var TabStrip = /** @class */ (function (_super) {
         return (React.createElement("div", { id: this.props.id, ref: function (div) { return _this._element = div; }, dir: this.props.dir, className: componentClasses, style: this.props.style },
             !bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
             this.renderContent(tabProps),
-            bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex }))));
+            bottom && React.createElement(TabStripNavigation_1.TabStripNavigation, __assign({}, tabProps, { tabIndex: tabIndex })),
+            this.showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
     };
     TabStrip.prototype.invertKeys = function (original, inverted) {
         var rtl = this._element && (getComputedStyle(this._element).direction === 'rtl') || false;

package/dist/npm/tilelayout/TileLayout.d.ts

@@ -121,6 +121,8 @@ export declare class TileLayout extends React.Component<TileLayoutProps, TileLay
             colSpan: number;
         } & TilePosition)[];
     };
+    private showLicenseWatermark;
+    constructor(props: TileLayoutProps);
     /**
      * Gets the HTML element of the TileLayout component.
      */

package/dist/npm/tilelayout/TileLayout.js

@@ -31,6 +31,7 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var InternalTile_1 = require("./InternalTile");
+var package_metadata_1 = require("../package-metadata");
 /**
  * @hidden
  */
@@ -46,8 +47,8 @@ var AUTO_FLOW_CLASSES = {
  */
 var TileLayout = /** @class */ (function (_super) {
     __extends(TileLayout, _super);
-    function TileLayout() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+    function TileLayout(props) {
+        var _this = _super.call(this, props) || this;
         /**
          * @hidden
          */
@@ -56,6 +57,7 @@ var TileLayout = /** @class */ (function (_super) {
          * @hidden
          */
         _this.state = { positions: (_this.props.items || []).map(function (p, i) { return (Object.assign({ order: i, rowSpan: 1, colSpan: 1 }, p.defaultPosition)); }) };
+        _this.showLicenseWatermark = false;
         /**
          * @hidden
          */
@@ -104,6 +106,8 @@ var TileLayout = /** @class */ (function (_super) {
                 (0, kendo_react_common_1.dispatchEvent)(_this.props.onReposition, {}, _this, { value: positions });
             }
         };
+        (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+        _this.showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(TileLayout.prototype, "element", {
@@ -141,10 +145,12 @@ var TileLayout = /** @class */ (function (_super) {
             ? "".concat(typeof gap.rows === 'number' ? gap.rows + 'px' : gap.rows) + ' ' + "".concat(typeof gap.columns === 'number' ? gap.columns + 'px' : gap.columns)
             : 16;
         var tileLayoutStyles = __assign({ gridTemplateColumns: "repeat(".concat(columns, ", minmax(0px, ").concat(typeof columnWidth === 'number' ? columnWidth + 'px' : columnWidth, "))"), gridAutoRows: "minmax(0px, ".concat(typeof rowHeight === 'number' ? rowHeight + 'px' : rowHeight, ")"), gap: gapValue, padding: gapValue }, style);
-        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-tilelayout', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
-                return (React.createElement(InternalTile_1.InternalTile, { key: _this.props.dataItemKey ? (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(tile) : index, update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
-                    React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))));
+        return (React.createElement("div", { ref: function (el) { _this._element = el; }, dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-tilelayout k-pos-relative', AUTO_FLOW_CLASSES[autoFlow], className), style: tileLayoutStyles, id: this.props.id, children: items.map(function (tile, index) {
+                return (React.createElement(React.Fragment, { key: _this.props.dataItemKey ? (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(tile) : index },
+                    React.createElement(InternalTile_1.InternalTile, { update: _this.update, defaultPosition: _this.state.positions[index], index: index, resizable: tile.resizable, reorderable: tile.reorderable, style: tile.style, className: tile.className, hintClassName: tile.hintClassName, hintStyle: tile.hintStyle, ignoreDrag: _this.props.ignoreDrag }, tile.item ? tile.item : (React.createElement(React.Fragment, null,
+                        React.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, React.isValidElement(tile.header) ? tile.header : React.createElement("h5", { className: 'k-card-title' }, tile.header)),
+                        React.createElement("div", { className: 'k-tilelayout-item-body k-card-body' }, tile.body)))),
+                    _this.showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
             }) }));
     };
     /**