@progress/kendo-vue-layout 3.13.0 → 3.14.0-dev.202309120835

package/dist/esm/menu/models/BaseMenuItem.d.ts

@@ -11,9 +11,13 @@ export interface BaseMenuItem {
      */
     url?: string;
     /**
-     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     * Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
      */
     icon?: string;
+    /**
+     * Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
+     */
+    svgIcon?: string;
     /**
      * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
      */

package/dist/esm/menu/utils/prepareInputItemsForInternalWork.js

@@ -16,7 +16,7 @@ export function prepareInputItemsForInternalWork(models) {
 }
 function copyInputItemWithoutChildren(inputModel) {
     var result = {};
-    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
+    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, svgIcon = inputModel.svgIcon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
     if (text !== undefined) {
         result.text = text;
     }
@@ -26,6 +26,9 @@ function copyInputItemWithoutChildren(inputModel) {
     if (icon !== undefined) {
         result.icon = icon;
     }
+    if (svgIcon !== undefined) {
+        result.svgIcon = svgIcon;
+    }
     if (disabled !== undefined) {
         result.disabled = disabled;
     }

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1693312682,
+    publishDate: 1694507215,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/panelbar/PanelBar.js

@@ -27,7 +27,7 @@ var isV3 = allVue.version && allVue.version[0] === '3';
 import { PanelBarItem } from './PanelBarItem.js';
 import { renderChildren, getInitialState, flatVisibleChildren, flatChildren, isArrayEqual, getFirstId } from './util.js';
 import { classNames, Keys } from '@progress/kendo-vue-common';
-import { validatePackage } from '@progress/kendo-vue-common';
+import { validatePackage, shouldShowValidationUI, WatermarkOverlay } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { NavigationAction } from './interfaces/NavigationAction.js';
 /**
@@ -66,6 +66,7 @@ var PanelBarVue2 = {
   created: function created() {
     this.activeDescendant = null;
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     var initialState = getInitialState(this.$props, this.expandMode);
@@ -115,7 +116,8 @@ var PanelBarVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    var className = classNames('k-panelbar', this.$props.className);
+    var className = classNames('k-panelbar', 'k-pos-relative', this.$props.className);
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     return h("ul", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -144,7 +146,7 @@ var PanelBarVue2 = {
       }, item), {
         item: item
       }));
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     handleSelect: function handleSelect(event) {

package/dist/esm/tabstrip/TabStrip.js

@@ -19,7 +19,7 @@ var ref = allVue.ref;
 var inject = allVue.inject;
 import { TabStripNavigation } from './TabStripNavigation.js';
 import { TabStripContent } from './TabStripContent.js';
-import { Keys, classNames, getDefaultSlots, validatePackage, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { Keys, classNames, getDefaultSlots, validatePackage, shouldShowValidationUI, WatermarkOverlay, templateRendering, getListeners } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 /**
  * @hidden
@@ -51,7 +51,8 @@ var TabStripVue2 = {
   data: function data() {
     return {
       currentShowAll: true,
-      currentTabs: []
+      currentTabs: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -90,6 +91,7 @@ var TabStripVue2 = {
       return _this.compTabs.length - 1;
     }, _a);
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   watch: {
     selected: function selected(_prevIndex, _nextIndex) {
@@ -235,7 +237,8 @@ var TabStripVue2 = {
       _c = _b.tabIndex,
       tabIndex = _c === void 0 ? 0 : _c;
     var bottom = tabPosition === 'bottom';
-    var componentClasses = classNames('k-widget', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var componentClasses = classNames('k-widget', 'k-pos-relative', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     var renderContent = function renderContent(currentTabProps) {
       var selected = currentTabProps.selected,
         tabContentStyle = currentTabProps.tabContentStyle;
@@ -299,7 +302,7 @@ var TabStripVue2 = {
       },
       onKeydown: this.onKeyDown,
       tabIndex: tabIndex
-    })]);
+    }), watermark]);
   }
 };
 /**

package/dist/esm/tilelayout/TileLayout.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getListeners, getTemplate, getter, templateRendering, validatePackage, guid } from '@progress/kendo-vue-common';
+import { getListeners, getTemplate, getter, templateRendering, validatePackage, shouldShowValidationUI, WatermarkOverlay, guid } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 import { Tile } from './Tile.js';
 /**
@@ -42,10 +42,12 @@ var TileLayoutVue2 = {
   },
   created: function created() {
     validatePackage(packageMetadata);
+    this.showLicenseWatermark = shouldShowValidationUI(packageMetadata);
   },
   data: function data() {
     return {
-      currentPositions: []
+      currentPositions: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -80,7 +82,8 @@ var TileLayoutVue2 = {
       var _a;
       var autoFlow = this.$props.autoFlow;
       return _a = {
-        'k-tilelayout': true
+        'k-tilelayout': true,
+        'k-pos-relative': true
       }, _a[AUTO_FLOW_CLASSES[autoFlow]] = true, _a;
     }
   },
@@ -110,6 +113,7 @@ var TileLayoutVue2 = {
       gap: gapValue,
       padding: gapValue
     };
+    var watermark = this.showLicenseWatermark ? h(WatermarkOverlay) : null;
     return h("div", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -213,7 +217,7 @@ var TileLayoutVue2 = {
           "class": 'k-tilelayout-item-body k-card-body'
         }, [tile.body ? bodyContent : tile.bodyText])]])
       );
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     focus: function focus() {

package/dist/npm/drawer/Drawer.js

@@ -67,6 +67,7 @@ var DrawerVue2 = {
   },
   created: function created() {
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.showLicenseWatermark = (0, kendo_vue_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
   },
   data: function data() {
     var _a = this.$props,
@@ -93,7 +94,8 @@ var DrawerVue2 = {
         miniWidth: miniWidth,
         items: items,
         item: itemRender
-      }
+      },
+      showLicenseWatermark: false
     };
   },
   mounted: function mounted() {
@@ -183,8 +185,10 @@ var DrawerVue2 = {
       },
       item: itemRender,
       attrs: this.v3 ? undefined : {
-        item: itemRender
-      }
+        item: itemRender,
+        showLicenseWatermark: this.showLicenseWatermark
+      },
+      showLicenseWatermark: this.showLicenseWatermark
     }), defaultSlot]);
   },
   methods: {

package/dist/npm/drawer/DrawerNavigation.js

@@ -52,7 +52,8 @@ var DrawerNavigationVue2 = {
   name: 'KendoDrawerNavigation',
   props: {
     item: [Object],
-    tabIndex: Number
+    tabIndex: Number,
+    showLicenseWatermark: Boolean
   },
   inject: {
     kendoDrawer: {
@@ -128,6 +129,7 @@ var DrawerNavigationVue2 = {
       WebkitTransitionDuration: (customSettings && customSettings.duration) + 'ms',
       transitionDuration: (customSettings && customSettings.duration) + 'ms'
     };
+    var watermark = this.showLicenseWatermark ? h(kendo_vue_common_1.WatermarkOverlay) : null;
     var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
     var drawerItems = items && h("ul", {
       "class": 'k-drawer-items',
@@ -181,7 +183,7 @@ var DrawerNavigationVue2 = {
         }
       });
       return itemRendering;
-    }, this)]);
+    }, this), watermark]);
     var drawerNavigation = h("div", {
       style: drawerAnimation,
       "class": this.navigationClassNames

package/dist/npm/menu/components/MenuItemInternal.d.ts

@@ -32,6 +32,7 @@ export interface MenuItemInternalComputed {
     currentFocused: boolean;
     popupClassName: string;
     menuItemClassName: object;
+    hasItems: boolean;
 }
 /**
  * @hidden

package/dist/npm/menu/components/MenuItemInternal.js

@@ -88,6 +88,9 @@ var MenuItemInternalVue2 = {
     }
   },
   computed: {
+    hasItems: function hasItems() {
+      return this.$props.item.items.length > 0;
+    },
     currentItemRender: function currentItemRender() {
       return this.$props.item.render || this.$props.itemRender;
     },
@@ -99,7 +102,7 @@ var MenuItemInternalVue2 = {
     },
     currentOpened: function currentOpened() {
       var props = this.$props;
-      return props.item.items.length > 0 && (0, itemsIdsUtils_1.shouldOpenItem)(props.item.id, props.lastItemIdToBeOpened) &&
+      return this.hasItems && (0, itemsIdsUtils_1.shouldOpenItem)(props.item.id, props.lastItemIdToBeOpened) &&
       // HACK: Wait for the second render because otherwise the scenario of
       // popup inside popup throws an error (for example, hover of item with id '0_0').
       !this.isFirstRender;
@@ -140,10 +143,19 @@ var MenuItemInternalVue2 = {
   render: function render(createElement) {
     var _this = this;
     var h = gh || createElement;
-    var item = this.$props.item;
-    var itemId = item.id;
+    var _a = this.$props.item,
+      icon = _a.icon,
+      svgIcon = _a.svgIcon,
+      id = _a.id,
+      contentParentItemId = _a.contentParentItemId,
+      items = _a.items,
+      text = _a.text,
+      cssStyle = _a.cssStyle,
+      disabled = _a.disabled,
+      url = _a.url;
+    var itemId = id;
     var renderContent = function renderContent() {
-      var parentItemId = this.$props.item.contentParentItemId;
+      var parentItemId = contentParentItemId;
       var contentRender = function contentRender(args) {
         return kendo_vue_common_1.getTemplate.call(this, {
           h: h,
@@ -163,21 +175,22 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h(kendo_vue_common_1.Icon, {
-        name: this.$props.item.icon,
+      return icon || svgIcon ? h(kendo_vue_common_1.Icon, {
+        name: (0, kendo_vue_common_1.getIconName)(icon),
         attrs: this.v3 ? undefined : {
-          name: this.$props.item.icon
+          name: (0, kendo_vue_common_1.getIconName)(icon),
+          icon: svgIcon
         },
-        key: "0"
+        icon: svgIcon
       }) : null;
     };
     var renderArrowIfApplicable = function renderArrowIfApplicable() {
-      return this.$props.item.items.length > 0 ?
+      return this.hasItems ?
       // @ts-ignore
       h(MenuItemArrow_1.MenuItemArrow, {
-        itemId: this.$props.item.id,
+        itemId: id,
         attrs: this.v3 ? undefined : {
-          itemId: this.$props.item.id,
+          itemId: id,
           verticalMenu: this.$props.isMenuVertical,
           dir: (0, misc_1.convertBoolDirectionToString)(this.$props.isDirectionRightToLeft)
         },
@@ -186,28 +199,28 @@ var MenuItemInternalVue2 = {
         key: "2"
       }) : null;
     };
-    var originalItem = this.$props.originalItemNeeded(item.id);
+    var originalItem = this.$props.originalItemNeeded(id);
     var renderMenuItemLink = function renderMenuItemLink() {
       var _this2 = this;
       var defaultItemRender = h("span", {
         "class": "k-menu-link-text"
-      }, [item.text]);
+      }, [text]);
       var textOrItemRender = kendo_vue_common_1.getTemplate.call(this, {
         h: h,
         template: this.currentItemRender,
         defaultRendering: defaultItemRender,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           key: '1'
         }
       });
       var defaultLink =
       // @ts-ignore function children
       h(MenuItemLink_1.MenuItemLink, {
-        url: item.url,
+        url: url,
         attrs: this.v3 ? undefined : {
-          url: item.url,
+          url: url,
           opened: this.currentOpened,
           focused: this.currentFocused
         },
@@ -222,7 +235,7 @@ var MenuItemInternalVue2 = {
         defaultRendering: defaultLink,
         additionalProps: {
           item: originalItem,
-          itemId: item.id,
+          itemId: id,
           opened: this.currentOpened,
           dir: (0, misc_1.convertBoolDirectionToString)(this.$props.isDirectionRightToLeft)
         }
@@ -347,15 +360,15 @@ var MenuItemInternalVue2 = {
     };
     return h("li", {
       "class": this.menuItemClassName,
-      style: item.cssStyle,
+      style: cssStyle,
       tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
       attrs: this.v3 ? undefined : {
         tabindex: itemId === this.$props.tabbableItemId ? 0 : -1,
         role: "menuitem",
-        "aria-disabled": item.disabled ? true : undefined,
-        "aria-haspopup": item.items.length > 0 ? true : undefined,
-        "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-        "aria-label": item.text,
+        "aria-disabled": disabled ? true : undefined,
+        "aria-haspopup": this.hasItems ? true : undefined,
+        "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+        "aria-label": text,
         "aria-owns": this.currentOpened ? (0, misc_1.getDOMElementId)(this.$props.menuGuid, itemId) : undefined
       },
       onMouseover: this.onMouseOver,
@@ -391,10 +404,10 @@ var MenuItemInternalVue2 = {
       },
       onKeydown: this.handleKeyDown,
       role: "menuitem",
-      "aria-disabled": item.disabled ? true : undefined,
-      "aria-haspopup": item.items.length > 0 ? true : undefined,
-      "aria-expanded": item.items.length > 0 ? this.currentOpened : undefined,
-      "aria-label": item.text,
+      "aria-disabled": disabled ? true : undefined,
+      "aria-haspopup": this.hasItems ? true : undefined,
+      "aria-expanded": this.hasItems ? this.currentOpened : undefined,
+      "aria-label": text,
       "aria-owns": this.currentOpened ? (0, misc_1.getDOMElementId)(this.$props.menuGuid, itemId) : undefined,
       ref: (0, kendo_vue_common_1.setRef)(this, 'kendoAnchor', this._anchor),
       key: "0"

package/dist/npm/menu/models/BaseMenuItem.d.ts

@@ -11,9 +11,13 @@ export interface BaseMenuItem {
      */
     url?: string;
     /**
-     * Specifies the name of the [font icon]({% slug icons %}#toc-list-of-font-icons) that will be rendered for the item ([see example]({% slug itemproperties_menu %}#toc-icon)).
+     * Specifies the name of the [FontIcon]({% slug overview_icon %}) that will be rendered for the item).
      */
     icon?: string;
+    /**
+     * Specifies the name of the [SVGIcon]({% slug overview_svgicon %}) that will be rendered for the item).
+     */
+    svgIcon?: string;
     /**
      * Specifies if the item is disabled ([see example]({% slug itemproperties_menu %}#toc-disabled-state)).
      */

package/dist/npm/menu/utils/prepareInputItemsForInternalWork.js

@@ -20,7 +20,7 @@ function prepareInputItemsForInternalWork(models) {
 exports.prepareInputItemsForInternalWork = prepareInputItemsForInternalWork;
 function copyInputItemWithoutChildren(inputModel) {
     var result = {};
-    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
+    var text = inputModel.text, url = inputModel.url, icon = inputModel.icon, svgIcon = inputModel.svgIcon, disabled = inputModel.disabled, cssClass = inputModel.cssClass, popupClass = inputModel.popupClass, cssStyle = inputModel.cssStyle, render = inputModel.render, linkRender = inputModel.linkRender, contentRender = inputModel.contentRender, data = inputModel.data;
     if (text !== undefined) {
         result.text = text;
     }
@@ -30,6 +30,9 @@ function copyInputItemWithoutChildren(inputModel) {
     if (icon !== undefined) {
         result.icon = icon;
     }
+    if (svgIcon !== undefined) {
+        result.svgIcon = svgIcon;
+    }
     if (disabled !== undefined) {
         result.disabled = disabled;
     }

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1693312682,
+    publishDate: 1694507215,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/panelbar/PanelBar.js

@@ -72,6 +72,7 @@ var PanelBarVue2 = {
   created: function created() {
     this.activeDescendant = null;
     (0, kendo_vue_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    this.showLicenseWatermark = (0, kendo_vue_common_2.shouldShowValidationUI)(package_metadata_1.packageMetadata);
   },
   data: function data() {
     var initialState = (0, util_1.getInitialState)(this.$props, this.expandMode);
@@ -121,7 +122,8 @@ var PanelBarVue2 = {
   // @ts-ignore
   render: function render(createElement) {
     var h = gh || createElement;
-    var className = (0, kendo_vue_common_1.classNames)('k-panelbar', this.$props.className);
+    var className = (0, kendo_vue_common_1.classNames)('k-panelbar', 'k-pos-relative', this.$props.className);
+    var watermark = this.showLicenseWatermark ? h(kendo_vue_common_2.WatermarkOverlay) : null;
     return h("ul", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -150,7 +152,7 @@ var PanelBarVue2 = {
       }, item), {
         item: item
       }));
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     handleSelect: function handleSelect(event) {

package/dist/npm/tabstrip/TabStrip.js

@@ -57,7 +57,8 @@ var TabStripVue2 = {
   data: function data() {
     return {
       currentShowAll: true,
-      currentTabs: []
+      currentTabs: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -96,6 +97,7 @@ var TabStripVue2 = {
       return _this.compTabs.length - 1;
     }, _a);
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.showLicenseWatermark = (0, kendo_vue_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
   },
   watch: {
     selected: function selected(_prevIndex, _nextIndex) {
@@ -241,7 +243,8 @@ var TabStripVue2 = {
       _c = _b.tabIndex,
       tabIndex = _c === void 0 ? 0 : _c;
     var bottom = tabPosition === 'bottom';
-    var componentClasses = (0, kendo_vue_common_1.classNames)('k-widget', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var componentClasses = (0, kendo_vue_common_1.classNames)('k-widget', 'k-pos-relative', 'k-tabstrip', (_a = {}, _a['k-tabstrip-left'] = tabPosition === 'left', _a['k-tabstrip-right'] = tabPosition === 'right', _a['k-tabstrip-bottom'] = tabPosition === 'bottom', _a['k-tabstrip-top'] = tabPosition === 'top', _a));
+    var watermark = this.showLicenseWatermark ? h(kendo_vue_common_1.WatermarkOverlay) : null;
     var renderContent = function renderContent(currentTabProps) {
       var selected = currentTabProps.selected,
         tabContentStyle = currentTabProps.tabContentStyle;
@@ -305,7 +308,7 @@ var TabStripVue2 = {
       },
       onKeydown: this.onKeyDown,
       tabIndex: tabIndex
-    })]);
+    }), watermark]);
   }
 };
 exports.TabStripVue2 = TabStripVue2;

package/dist/npm/tilelayout/TileLayout.js

@@ -48,10 +48,12 @@ var TileLayoutVue2 = {
   },
   created: function created() {
     (0, kendo_vue_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    this.showLicenseWatermark = (0, kendo_vue_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
   },
   data: function data() {
     return {
-      currentPositions: []
+      currentPositions: [],
+      showLicenseWatermark: false
     };
   },
   computed: {
@@ -86,7 +88,8 @@ var TileLayoutVue2 = {
       var _a;
       var autoFlow = this.$props.autoFlow;
       return _a = {
-        'k-tilelayout': true
+        'k-tilelayout': true,
+        'k-pos-relative': true
       }, _a[AUTO_FLOW_CLASSES[autoFlow]] = true, _a;
     }
   },
@@ -116,6 +119,7 @@ var TileLayoutVue2 = {
       gap: gapValue,
       padding: gapValue
     };
+    var watermark = this.showLicenseWatermark ? h(kendo_vue_common_1.WatermarkOverlay) : null;
     return h("div", {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
@@ -219,7 +223,7 @@ var TileLayoutVue2 = {
           "class": 'k-tilelayout-item-body k-card-body'
         }, [tile.body ? bodyContent : tile.bodyText])]])
       );
-    }, this)]);
+    }, this), watermark]);
   },
   methods: {
     focus: function focus() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-layout",
   "description": "Kendo UI for Vue Layouts package",
-  "version": "3.13.0",
+  "version": "3.14.0-dev.202309120835",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -45,9 +45,9 @@
     "vue": "^2.6.12 || ^3.0.2"
   },
   "dependencies": {
-    "@progress/kendo-vue-animation": "3.13.0",
-    "@progress/kendo-vue-common": "3.13.0",
-    "@progress/kendo-vue-popup": "3.13.0"
+    "@progress/kendo-vue-animation": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-common": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-popup": "3.14.0-dev.202309120835"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.5.0",
@@ -55,15 +55,15 @@
     "@progress/kendo-drawing": "^1.8.0",
     "@progress/kendo-licensing": "^1.3.0",
     "@progress/kendo-svg-icons": "^1.0.0",
-    "@progress/kendo-vue-buttons": "3.13.0",
-    "@progress/kendo-vue-charts": "3.13.0",
-    "@progress/kendo-vue-dateinputs": "3.13.0",
-    "@progress/kendo-vue-dropdowns": "3.13.0",
-    "@progress/kendo-vue-grid": "3.13.0",
-    "@progress/kendo-vue-indicators": "3.13.0",
-    "@progress/kendo-vue-inputs": "3.13.0",
-    "@progress/kendo-vue-intl": "3.13.0",
-    "@progress/kendo-vue-progressbars": "3.13.0"
+    "@progress/kendo-vue-buttons": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-charts": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-dateinputs": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-dropdowns": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-grid": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-indicators": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-inputs": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-intl": "3.14.0-dev.202309120835",
+    "@progress/kendo-vue-progressbars": "3.14.0-dev.202309120835"
   },
   "@progress": {
     "friendlyName": "Layouts",