@progress/kendo-vue-layout 6.0.0-develop.3 → 6.0.0-develop.4

package/index.d.mts

@@ -729,6 +729,10 @@ declare interface BaseMenuItem {
      * Represents any additional data that is associated with the Menu item.
      */
     data?: any;
+    /**
+     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
+     */
+    separator?: boolean;
 }
 
 /**
@@ -3606,6 +3610,10 @@ tabPosition: {
 type: PropType<string>;
 default: string;
 };
+tabAlignment: {
+type: PropType<string>;
+default: string;
+};
 tabs: {
 type: PropType<TabStripTabProperties[]>;
 default: any;
@@ -3641,6 +3649,10 @@ tabPosition: {
 type: PropType<string>;
 default: string;
 };
+tabAlignment: {
+type: PropType<string>;
+default: string;
+};
 tabs: {
 type: PropType<TabStripTabProperties[]>;
 default: any;
@@ -3652,6 +3664,7 @@ onSelect?: (...args: any[] | unknown[]) => any;
 }>, {
 tabs: TabStripTabProperties[];
 tabPosition: string;
+tabAlignment: string;
 animation: boolean;
 }, {}, {}, {}, string, () => {
 addRenderTitle: any;
@@ -3742,6 +3755,7 @@ tabs: PropType<any[]>;
 selected: PropType<number>;
 tabIndex: PropType<number>;
 tabPosition: PropType<string>;
+tabAlignment: PropType<string>;
 onSelect: PropType<(e: number) => void>;
 onKeydown: PropType<(e: number) => void>;
 }>, {}, {}, {
@@ -3750,10 +3764,7 @@ wrapperNavClasses(): {
 'k-hstack': boolean;
 'k-vstack': boolean;
 };
-navClasses(): {
-'k-tabstrip-items': boolean;
-'k-reset': boolean;
-};
+navClasses(): string;
 }, {
 onKeyDown(e: any): void;
 onNavigationItemSelect(idx: number): void;
@@ -3765,6 +3776,7 @@ tabs: PropType<any[]>;
 selected: PropType<number>;
 tabIndex: PropType<number>;
 tabPosition: PropType<string>;
+tabAlignment: PropType<string>;
 onSelect: PropType<(e: number) => void>;
 onKeydown: PropType<(e: number) => void>;
 }>> & Readonly<{
@@ -3938,6 +3950,10 @@ export declare interface TabStripNavigationProps {
      * @hidden
      */
     tabPosition?: string;
+    /**
+     * @hidden
+     */
+    tabAlignment?: string;
 }
 
 /**
@@ -3961,8 +3977,24 @@ export declare interface TabStripProps extends TabStripEmits {
      * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
      * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
      * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
+     *
+     * @default 'top'.
      */
     tabPosition?: string;
+    /**
+     * Sets the alignment of the tabs.
+     *
+     *
+     * The available options are:
+     * - `"start"`&mdash;Aligns the tabs at the start of the `TabStripNavigation`.
+     * - `"center"`&mdash;Aligns the tabs in the center of the `TabStripNavigation`.
+     * - `"end"`&mdash;Aligns the tabs at the end of the `TabStripNavigation`.
+     * - `"justify"`&mdash;Justifies the tabs inside the `TabStripNavigation`.
+     * - `"stretched"`&mdash;Stretches the tabs inside the `TabStripNavigation`.
+     *
+     * @default 'start'.
+     */
+    tabAlignment?: string;
     /**
      * Sets the array of tabs.
      */

package/index.d.ts

@@ -729,6 +729,10 @@ declare interface BaseMenuItem {
      * Represents any additional data that is associated with the Menu item.
      */
     data?: any;
+    /**
+     * Specifies if this is a separator item. If set to true only the `cssClass` and `cssStyle` props should be rendered along.
+     */
+    separator?: boolean;
 }
 
 /**
@@ -3606,6 +3610,10 @@ tabPosition: {
 type: PropType<string>;
 default: string;
 };
+tabAlignment: {
+type: PropType<string>;
+default: string;
+};
 tabs: {
 type: PropType<TabStripTabProperties[]>;
 default: any;
@@ -3641,6 +3649,10 @@ tabPosition: {
 type: PropType<string>;
 default: string;
 };
+tabAlignment: {
+type: PropType<string>;
+default: string;
+};
 tabs: {
 type: PropType<TabStripTabProperties[]>;
 default: any;
@@ -3652,6 +3664,7 @@ onSelect?: (...args: any[] | unknown[]) => any;
 }>, {
 tabs: TabStripTabProperties[];
 tabPosition: string;
+tabAlignment: string;
 animation: boolean;
 }, {}, {}, {}, string, () => {
 addRenderTitle: any;
@@ -3742,6 +3755,7 @@ tabs: PropType<any[]>;
 selected: PropType<number>;
 tabIndex: PropType<number>;
 tabPosition: PropType<string>;
+tabAlignment: PropType<string>;
 onSelect: PropType<(e: number) => void>;
 onKeydown: PropType<(e: number) => void>;
 }>, {}, {}, {
@@ -3750,10 +3764,7 @@ wrapperNavClasses(): {
 'k-hstack': boolean;
 'k-vstack': boolean;
 };
-navClasses(): {
-'k-tabstrip-items': boolean;
-'k-reset': boolean;
-};
+navClasses(): string;
 }, {
 onKeyDown(e: any): void;
 onNavigationItemSelect(idx: number): void;
@@ -3765,6 +3776,7 @@ tabs: PropType<any[]>;
 selected: PropType<number>;
 tabIndex: PropType<number>;
 tabPosition: PropType<string>;
+tabAlignment: PropType<string>;
 onSelect: PropType<(e: number) => void>;
 onKeydown: PropType<(e: number) => void>;
 }>> & Readonly<{
@@ -3938,6 +3950,10 @@ export declare interface TabStripNavigationProps {
      * @hidden
      */
     tabPosition?: string;
+    /**
+     * @hidden
+     */
+    tabAlignment?: string;
 }
 
 /**
@@ -3961,8 +3977,24 @@ export declare interface TabStripProps extends TabStripEmits {
      * - `"bottom"`&mdash;Renders the `TabStripNavigation` components to the bottom of the TabStrip.
      * - `"left"`&mdash;Renders the `TabStripNavigation` components to the left of the TabStrip.
      * - `"right"`&mdash;Renders the `TabStripNavigation` components to the right of the TabStrip.
+     *
+     * @default 'top'.
      */
     tabPosition?: string;
+    /**
+     * Sets the alignment of the tabs.
+     *
+     *
+     * The available options are:
+     * - `"start"`&mdash;Aligns the tabs at the start of the `TabStripNavigation`.
+     * - `"center"`&mdash;Aligns the tabs in the center of the `TabStripNavigation`.
+     * - `"end"`&mdash;Aligns the tabs at the end of the `TabStripNavigation`.
+     * - `"justify"`&mdash;Justifies the tabs inside the `TabStripNavigation`.
+     * - `"stretched"`&mdash;Stretches the tabs inside the `TabStripNavigation`.
+     *
+     * @default 'start'.
+     */
+    tabAlignment?: string;
     /**
      * Sets the array of tabs.
      */

package/menu/components/MenuItemInternal.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),O=require("@progress/kendo-vue-popup"),p=require("../utils/itemsIdsUtils.js"),l=require("../utils/misc.js"),w=require("./MenuItemLink.js"),N=require("./MenuItemArrow.js"),c=n.defineComponent({name:"KendoMenuItemInternal",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{item:Object,focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},created(){this.itemElement=null,this.prevFocusedItemId=this.$props.focusedItemId,this.isFirstRender=!0,this._anchor=s.guid()},data(){return{opened:!1}},mounted(){this.itemElement=s.getRef(this,"kendoAnchor");const e=this.$props.focusedItemId,t=this.$props.item.id;e&&e===t&&this.itemElement&&this.itemElement.focus(),this.isFirstRender=!1},watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t}},updated(){const e=this.$props.focusedItemId,t=this.$props.item.id;e?this.prevFocusedItemId!==e&&e===t&&!this.itemElement.contains(document.activeElement)&&this.itemElement.focus():document.activeElement===this.itemElement&&this.itemElement.blur()},computed:{hasItems(){return this.$props.item.items.length>0},currentItemRender(){return this.$props.item.render||this.$props.itemRender},currentLinkRender(){return this.$props.item.linkRender||this.$props.linkRender},contentRender(){return this.$props.item.contentParentItemId?this.$props.item.contentRender:null},currentOpened(){const e=this.$props;return this.hasItems&&p.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender},currentFocused(){const e=this.$props.focusedItemId,t=this.$props.item.id;return e===t},popupClassName(){return s.classNames({"k-menu-popup":!0,"k-rtl":this.$props.isDirectionRightToLeft,[this.item.popupClass]:this.item.popupClass})},menuItemClassName(){const e=this.$props.item;return{"k-item":!0,"k-menu-item":!0,"k-first":p.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled,[e.cssClass?e.cssClass:""]:e.cssClass}}},render(){const{icon:e,svgIcon:t,id:o,contentParentItemId:m,items:F,text:a,cssStyle:f,disabled:$,url:g}=this.$props.item,r=o,M=function(){const i=m,d=function(u){return s.getTemplate.call(this,{h:n.h,template:this.contentRender,additionalProps:u})};return n.createVNode("div",{class:"k-content",role:"presentation"},[d.call(this,{item:this.handleOriginalItemNeeded(i),itemId:i})])},k=function(){return e||t?n.createVNode(s.Icon,{name:s.getIconName(e),icon:t},null):null},b=function(){return this.hasItems?n.createVNode(N.MenuItemArrow,{itemId:o,verticalMenu:this.$props.isMenuVertical,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},h=this.$props.originalItemNeeded(o),v=function(){const i=n.createVNode("span",{class:"k-menu-link-text"},[a]),d=s.getTemplate.call(this,{h:n.h,template:this.currentItemRender,defaultRendering:i,additionalProps:{item:h,itemId:o,key:"1"}}),u=n.createVNode(w.MenuItemLink,{url:g,opened:this.currentOpened,focused:this.currentFocused},{default:()=>[[k.call(this),d,b.call(this)]]});return s.getTemplate.call(this,{h:n.h,template:this.currentLinkRender,defaultRendering:u,additionalProps:{item:h,itemId:o,opened:this.currentOpened,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},R=function(){const{anchorAlign:i,popupAlign:d,collision:u}=l.getPopupSettings(r,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return n.createVNode(O.Popup,{anchor:this._anchor,show:this.currentOpened,popupClass:this.popupClassName,anchorAlign:i,popupAlign:d,collision:u,animate:!1,key:"1"},{default:()=>[n.createVNode(I,{parentItemId:r,items:this.$props.item.items,menuGuid:this.$props.menuGuid,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,class:"k-group k-menu-group k-menu-group-md k-reset",onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleMouseDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleClick,onKeydown:this.handleKeyDown,originalItemNeeded:this.handleOriginalItemNeeded},null)]})};return n.createVNode("li",{class:this.menuItemClassName,style:f,tabindex:r===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:i=>this.handleMouseDown(i),onFocusout:()=>this.handleBlur(r),onFocusin:()=>this.handleFocus(r),onClick:i=>this.handleClick(i,r),onKeydown:this.handleKeyDown,role:"menuitem","aria-disabled":$?!0:void 0,"aria-haspopup":this.hasItems?!0:void 0,"aria-expanded":this.hasItems?this.currentOpened:void 0,"aria-label":a,"aria-owns":this.currentOpened?l.getDOMElementId(this.$props.menuGuid,r):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?M.call(this):v.call(this),R.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleClick(e,t){this.$emit("click",e,t)},handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},handleMouseDown(e){this.$emit("mousedown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},onMouseOver(e){this.$emit("mouseover",this.$props.item.id),e.stopPropagation()},onMouseLeave(e){this.$emit("mouseleave",this.$props.item.id),e.stopPropagation()}}}),I=n.defineComponent({name:"KendoMenuItemInternalsList",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{items:Array,parentItemId:{type:String,default:void 0},focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},render(){const e=this.$props.parentItemId,t=function(){return this.$props.items.length>0?this.$props.items.map(function(o,m){return n.createVNode(c,{item:o,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,menuGuid:this.$props.menuGuid,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleItemMouseDown,onKeydown:this.handleKeyDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleItemMouseClick,originalItemNeeded:this.handleOriginalItemNeeded,key:m},null)},this):null};return n.createVNode("ul",{role:e!==void 0?"menu":"menubar",id:e!==void 0?l.getDOMElementId(this.$props.menuGuid,e):void 0},[t.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseDown(e){this.$emit("mousedown",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleItemMouseClick(e,t){this.$emit("click",e,t)},onMouseOver(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseover",this.$props.parentItemId),e.stopPropagation())},onMouseLeave(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseleave",this.$props.parentItemId),e.stopPropagation())}}});exports.MenuItemInternal=c;exports.MenuItemInternalsList=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),s=require("@progress/kendo-vue-common"),N=require("@progress/kendo-vue-popup"),p=require("../utils/itemsIdsUtils.js"),l=require("../utils/misc.js"),F=require("./MenuItemLink.js"),L=require("./MenuItemArrow.js"),c=n.defineComponent({name:"KendoMenuItemInternal",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{item:Object,focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},created(){this.itemElement=null,this.prevFocusedItemId=this.$props.focusedItemId,this.isFirstRender=!0,this._anchor=s.guid()},data(){return{opened:!1}},mounted(){this.itemElement=s.getRef(this,"kendoAnchor");const e=this.$props.focusedItemId,t=this.$props.item.id;e&&e===t&&this.itemElement&&this.itemElement.focus(),this.isFirstRender=!1},watch:{focusedItemId:function(e,t){this.prevFocusedItemId=t}},updated(){const e=this.$props.focusedItemId,t=this.$props.item.id;e?this.prevFocusedItemId!==e&&e===t&&!this.itemElement.contains(document.activeElement)&&this.itemElement.focus():document.activeElement===this.itemElement&&this.itemElement.blur()},computed:{hasItems(){return this.$props.item.items.length>0},currentItemRender(){return this.$props.item.render||this.$props.itemRender},currentLinkRender(){return this.$props.item.linkRender||this.$props.linkRender},contentRender(){return this.$props.item.contentParentItemId?this.$props.item.contentRender:null},currentOpened(){const e=this.$props;return this.hasItems&&p.shouldOpenItem(e.item.id,e.lastItemIdToBeOpened)&&!this.isFirstRender},currentFocused(){const e=this.$props.focusedItemId,t=this.$props.item.id;return e===t},popupClassName(){return s.classNames({"k-menu-popup":!0,"k-overflow-visible":!0,"k-rtl":this.$props.isDirectionRightToLeft,[this.item.popupClass]:this.item.popupClass})},menuItemClassName(){const e=this.$props.item;return{"k-item":!0,"k-menu-item":!0,"k-first":p.isFirstItemFromSiblings(e.id),"k-last":e.isLastFromSiblings,"k-disabled":e.disabled,[e.cssClass?e.cssClass:""]:e.cssClass}}},render(){const{icon:e,svgIcon:t,id:o,contentParentItemId:m,items:y,text:a,cssStyle:f,disabled:$,url:g,separator:M}=this.$props.item,r=o,k=function(){const i=m,d=function(u){return s.getTemplate.call(this,{h:n.h,template:this.contentRender,additionalProps:u})};return n.createVNode("div",{class:"k-content",role:"presentation"},[d.call(this,{item:this.handleOriginalItemNeeded(i),itemId:i})])},b=function(){return e||t?n.createVNode(s.Icon,{name:s.getIconName(e),icon:t},null):null},v=function(){return this.hasItems?n.createVNode(L.MenuItemArrow,{itemId:o,verticalMenu:this.$props.isMenuVertical,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft),key:"2"},null):null},h=this.$props.originalItemNeeded(o),R=function(){const i=n.createVNode("span",{class:"k-menu-link-text"},[a]),d=s.getTemplate.call(this,{h:n.h,template:this.currentItemRender,defaultRendering:i,additionalProps:{item:h,itemId:o,key:"1"}}),u=n.createVNode(F.MenuItemLink,{url:g,opened:this.currentOpened,focused:this.currentFocused},{default:()=>[[b.call(this),d,v.call(this)]]});return s.getTemplate.call(this,{h:n.h,template:this.currentLinkRender,defaultRendering:u,additionalProps:{item:h,itemId:o,opened:this.currentOpened,dir:l.convertBoolDirectionToString(this.$props.isDirectionRightToLeft)}})},O=function(){const{anchorAlign:i,popupAlign:d,collision:u}=l.getPopupSettings(r,this.$props.isMenuVertical,this.$props.isDirectionRightToLeft);return n.createVNode(N.Popup,{anchor:this._anchor,show:this.currentOpened,popupClass:this.popupClassName,anchorAlign:i,popupAlign:d,collision:u,animate:!1,key:"1"},{default:()=>[n.createVNode(I,{parentItemId:r,items:this.$props.item.items,menuGuid:this.$props.menuGuid,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,class:"k-group k-menu-group k-menu-group-md k-reset",onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleMouseDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleClick,onKeydown:this.handleKeyDown,originalItemNeeded:this.handleOriginalItemNeeded},null)]})},w=n.createVNode("li",{class:"k-separator k-item","aria-hidden":!0,key:this.id},null);return M?w:n.createVNode("li",{class:this.menuItemClassName,style:f,tabindex:r===this.$props.tabbableItemId?0:-1,onMouseover:this.onMouseOver,onMouseleave:this.onMouseLeave,onMousedown:i=>this.handleMouseDown(i),onFocusout:()=>this.handleBlur(r),onFocusin:()=>this.handleFocus(r),onClick:i=>this.handleClick(i,r),onKeydown:this.handleKeyDown,role:"menuitem","aria-disabled":$?!0:void 0,"aria-haspopup":this.hasItems?!0:void 0,"aria-expanded":this.hasItems?this.currentOpened:void 0,"aria-label":a,"aria-owns":this.currentOpened?l.getDOMElementId(this.$props.menuGuid,r):void 0,ref:s.setRef(this,"kendoAnchor"),key:"0"},[this.contentRender?k.call(this):R.call(this),O.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleClick(e,t){this.$emit("click",e,t)},handleBlur(e){this.$emit("blur",e)},handleFocus(e){this.$emit("focus",e)},handleMouseDown(e){this.$emit("mousedown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},onMouseOver(e){this.$emit("mouseover",this.$props.item.id),e.stopPropagation()},onMouseLeave(e){this.$emit("mouseleave",this.$props.item.id),e.stopPropagation()}}}),I=n.defineComponent({name:"KendoMenuItemInternalsList",emits:{keydown:null,mouseover:null,mouseleave:null,blur:null,focus:null,click:null,mousedown:null},props:{items:Array,parentItemId:{type:String,default:void 0},focusedItemId:String,lastItemIdToBeOpened:String,tabbableItemId:String,itemRender:[String,Object,Function],linkRender:[String,Object,Function],isMenuVertical:Boolean,isDirectionRightToLeft:Boolean,menuGuid:String,originalItemNeeded:Function},render(){const e=this.$props.parentItemId,t=function(){return this.$props.items.length>0?this.$props.items.map(function(o,m){return n.createVNode(c,{item:o,isMenuVertical:this.$props.isMenuVertical,isDirectionRightToLeft:this.$props.isDirectionRightToLeft,focusedItemId:this.$props.focusedItemId,lastItemIdToBeOpened:this.$props.lastItemIdToBeOpened,tabbableItemId:this.$props.tabbableItemId,itemRender:this.$props.itemRender,linkRender:this.$props.linkRender,menuGuid:this.$props.menuGuid,onMouseover:this.handleItemMouseOver,onMouseleave:this.handleItemMouseLeave,onMousedown:this.handleItemMouseDown,onKeydown:this.handleKeyDown,onBlur:this.handleItemMouseBlur,onFocus:this.handleItemMouseFocus,onClick:this.handleItemMouseClick,originalItemNeeded:this.handleOriginalItemNeeded,key:m},null)},this):null};return n.createVNode("ul",{role:e!==void 0?"menu":"menubar",id:e!==void 0?l.getDOMElementId(this.$props.menuGuid,e):void 0},[t.call(this)])},methods:{handleKeyDown(e){this.$emit("keydown",e)},handleOriginalItemNeeded(e){return this.$props.originalItemNeeded(e)},handleItemMouseOver(e){this.$emit("mouseover",e)},handleItemMouseLeave(e){this.$emit("mouseleave",e)},handleItemMouseDown(e){this.$emit("mousedown",e)},handleItemMouseBlur(e){this.$emit("blur",e)},handleItemMouseFocus(e){this.$emit("focus",e)},handleItemMouseClick(e,t){this.$emit("click",e,t)},onMouseOver(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseover",this.$props.parentItemId),e.stopPropagation())},onMouseLeave(e){this.$props.parentItemId!==void 0&&(this.$emit("mouseleave",this.$props.parentItemId),e.stopPropagation())}}});exports.MenuItemInternal=c;exports.MenuItemInternalsList=I;

package/menu/components/MenuItemInternal.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as c, createVNode as i, h as u } from "vue";
-import { guid as O, getRef as w, classNames as F, setRef as L, getTemplate as m, Icon as D, getIconName as y } from "@progress/kendo-vue-common";
-import { Popup as C } from "@progress/kendo-vue-popup";
-import { shouldOpenItem as B, isFirstItemFromSiblings as N } from "../utils/itemsIdsUtils.mjs";
-import { getDOMElementId as I, convertBoolDirectionToString as p, getPopupSettings as T } from "../utils/misc.mjs";
-import { MenuItemLink as S } from "./MenuItemLink.mjs";
-import { MenuItemArrow as P } from "./MenuItemArrow.mjs";
-const A = /* @__PURE__ */ c({
+import { defineComponent as c, createVNode as n, h as u } from "vue";
+import { guid as F, getRef as L, classNames as y, setRef as D, getTemplate as m, Icon as C, getIconName as B } from "@progress/kendo-vue-common";
+import { Popup as N } from "@progress/kendo-vue-popup";
+import { shouldOpenItem as T, isFirstItemFromSiblings as S } from "../utils/itemsIdsUtils.mjs";
+import { getDOMElementId as I, convertBoolDirectionToString as p, getPopupSettings as P } from "../utils/misc.mjs";
+import { MenuItemLink as A } from "./MenuItemLink.mjs";
+import { MenuItemArrow as E } from "./MenuItemArrow.mjs";
+const K = /* @__PURE__ */ c({
   name: "KendoMenuItemInternal",
   emits: {
     keydown: null,
@@ -36,7 +36,7 @@ const A = /* @__PURE__ */ c({
     originalItemNeeded: Function
   },
   created() {
-    this.itemElement = null, this.prevFocusedItemId = this.$props.focusedItemId, this.isFirstRender = !0, this._anchor = O();
+    this.itemElement = null, this.prevFocusedItemId = this.$props.focusedItemId, this.isFirstRender = !0, this._anchor = F();
   },
   data() {
     return {
@@ -44,7 +44,7 @@ const A = /* @__PURE__ */ c({
     };
   },
   mounted() {
-    this.itemElement = w(this, "kendoAnchor");
+    this.itemElement = L(this, "kendoAnchor");
     const e = this.$props.focusedItemId, t = this.$props.item.id;
     e && e === t && this.itemElement && this.itemElement.focus(), this.isFirstRender = !1;
   },
@@ -72,7 +72,7 @@ const A = /* @__PURE__ */ c({
     },
     currentOpened() {
       const e = this.$props;
-      return this.hasItems && B(e.item.id, e.lastItemIdToBeOpened) && // HACK: Wait for the second render because otherwise the scenario of
+      return this.hasItems && T(e.item.id, e.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;
     },
@@ -81,8 +81,9 @@ const A = /* @__PURE__ */ c({
       return e === t;
     },
     popupClassName() {
-      return F({
+      return y({
         "k-menu-popup": !0,
+        "k-overflow-visible": !0,
         "k-rtl": this.$props.isDirectionRightToLeft,
         [this.item.popupClass]: this.item.popupClass
       });
@@ -92,7 +93,7 @@ const A = /* @__PURE__ */ c({
       return {
         "k-item": !0,
         "k-menu-item": !0,
-        "k-first": N(e.id),
+        "k-first": S(e.id),
         "k-last": e.isLastFromSiblings,
         "k-disabled": e.disabled,
         [e.cssClass ? e.cssClass : ""]: e.cssClass
@@ -105,14 +106,15 @@ const A = /* @__PURE__ */ c({
       svgIcon: t,
       id: s,
       contentParentItemId: l,
-      items: K,
+      items: G,
       text: a,
       cssStyle: f,
       disabled: $,
-      url: g
-    } = this.$props.item, o = s, M = function() {
-      const n = l;
-      return i("div", {
+      url: g,
+      separator: M
+    } = this.$props.item, o = s, k = function() {
+      const i = l;
+      return n("div", {
         class: "k-content",
         role: "presentation"
       }, [function(r) {
@@ -122,39 +124,39 @@ const A = /* @__PURE__ */ c({
           additionalProps: r
         });
       }.call(this, {
-        item: this.handleOriginalItemNeeded(n),
-        itemId: n
+        item: this.handleOriginalItemNeeded(i),
+        itemId: i
       })]);
-    }, k = function() {
-      return e || t ? i(D, {
-        name: y(e),
+    }, b = function() {
+      return e || t ? n(C, {
+        name: B(e),
         icon: t
       }, null) : null;
     }, R = function() {
-      return this.hasItems ? i(P, {
+      return this.hasItems ? n(E, {
         itemId: s,
         verticalMenu: this.$props.isMenuVertical,
         dir: p(this.$props.isDirectionRightToLeft),
         key: "2"
       }, null) : null;
-    }, h = this.$props.originalItemNeeded(s), b = function() {
-      const n = i("span", {
+    }, h = this.$props.originalItemNeeded(s), v = function() {
+      const i = n("span", {
         class: "k-menu-link-text"
       }, [a]), d = m.call(this, {
         h: u,
         template: this.currentItemRender,
-        defaultRendering: n,
+        defaultRendering: i,
         additionalProps: {
           item: h,
           itemId: s,
           key: "1"
         }
-      }), r = i(S, {
+      }), r = n(A, {
         url: g,
         opened: this.currentOpened,
         focused: this.currentFocused
       }, {
-        default: () => [[k.call(this), d, R.call(this)]]
+        default: () => [[b.call(this), d, R.call(this)]]
       });
       return m.call(this, {
         h: u,
@@ -167,23 +169,23 @@ const A = /* @__PURE__ */ c({
           dir: p(this.$props.isDirectionRightToLeft)
         }
       });
-    }, v = function() {
+    }, O = function() {
       const {
-        anchorAlign: n,
+        anchorAlign: i,
         popupAlign: d,
         collision: r
-      } = T(o, this.$props.isMenuVertical, this.$props.isDirectionRightToLeft);
-      return i(C, {
+      } = P(o, this.$props.isMenuVertical, this.$props.isDirectionRightToLeft);
+      return n(N, {
         anchor: this._anchor,
         show: this.currentOpened,
         popupClass: this.popupClassName,
-        anchorAlign: n,
+        anchorAlign: i,
         popupAlign: d,
         collision: r,
         animate: !1,
         key: "1"
       }, {
-        default: () => [i(E, {
+        default: () => [n(V, {
           parentItemId: o,
           items: this.$props.item.items,
           menuGuid: this.$props.menuGuid,
@@ -205,17 +207,21 @@ const A = /* @__PURE__ */ c({
           originalItemNeeded: this.handleOriginalItemNeeded
         }, null)]
       });
-    };
-    return i("li", {
+    }, w = n("li", {
+      class: "k-separator k-item",
+      "aria-hidden": !0,
+      key: this.id
+    }, null);
+    return M ? w : n("li", {
       class: this.menuItemClassName,
       style: f,
       tabindex: o === this.$props.tabbableItemId ? 0 : -1,
       onMouseover: this.onMouseOver,
       onMouseleave: this.onMouseLeave,
-      onMousedown: (n) => this.handleMouseDown(n),
+      onMousedown: (i) => this.handleMouseDown(i),
       onFocusout: () => this.handleBlur(o),
       onFocusin: () => this.handleFocus(o),
-      onClick: (n) => this.handleClick(n, o),
+      onClick: (i) => this.handleClick(i, o),
       onKeydown: this.handleKeyDown,
       role: "menuitem",
       "aria-disabled": $ ? !0 : void 0,
@@ -223,9 +229,9 @@ const A = /* @__PURE__ */ c({
       "aria-expanded": this.hasItems ? this.currentOpened : void 0,
       "aria-label": a,
       "aria-owns": this.currentOpened ? I(this.$props.menuGuid, o) : void 0,
-      ref: L(this, "kendoAnchor"),
+      ref: D(this, "kendoAnchor"),
       key: "0"
-    }, [this.contentRender ? M.call(this) : b.call(this), v.call(this)]);
+    }, [this.contentRender ? k.call(this) : v.call(this), O.call(this)]);
   },
   methods: {
     handleKeyDown(e) {
@@ -265,7 +271,7 @@ const A = /* @__PURE__ */ c({
       this.$emit("mouseleave", this.$props.item.id), e.stopPropagation();
     }
   }
-}), E = /* @__PURE__ */ c({
+}), V = /* @__PURE__ */ c({
   name: "KendoMenuItemInternalsList",
   emits: {
     keydown: null,
@@ -295,7 +301,7 @@ const A = /* @__PURE__ */ c({
   render() {
     const e = this.$props.parentItemId, t = function() {
       return this.$props.items.length > 0 ? this.$props.items.map(function(s, l) {
-        return i(A, {
+        return n(K, {
           item: s,
           isMenuVertical: this.$props.isMenuVertical,
           isDirectionRightToLeft: this.$props.isDirectionRightToLeft,
@@ -317,7 +323,7 @@ const A = /* @__PURE__ */ c({
         }, null);
       }, this) : null;
     };
-    return i("ul", {
+    return n("ul", {
       role: e !== void 0 ? "menu" : "menubar",
       id: e !== void 0 ? I(this.$props.menuGuid, e) : void 0
     }, [t.call(this)]);
@@ -356,6 +362,6 @@ const A = /* @__PURE__ */ c({
   }
 });
 export {
-  A as MenuItemInternal,
-  E as MenuItemInternalsList
+  K as MenuItemInternal,
+  V as MenuItemInternalsList
 };

package/menu/utils/prepareInputItemsForInternalWork.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("@progress/kendo-vue-common"),o=require("./itemsIdsUtils.js");function g(t){return t&&t.length>0?{items:m.call(this,t),inputItems:t}:{items:[],inputItems:[]}}function v(t){let e={};const{text:r,url:i,icon:l,svgIcon:n,disabled:c,cssClass:d,popupClass:a,cssStyle:u,render:f,linkRender:p,contentRender:I,data:h}=t;return r!==void 0&&(e.text=r),i!==void 0&&(e.url=i),l!==void 0&&(e.icon=l),n!==void 0&&(e.svgIcon=n),c!==void 0&&(e.disabled=c),d!==void 0&&(e.cssClass=d),a!==void 0&&(e.popupClass=a),u!==void 0&&(e.cssStyle=u),f!==void 0&&(e.render=s.templateRendering.call(this,f,s.getListeners.call(this))),p!==void 0&&(e.linkRender=s.templateRendering.call(this,p,s.getListeners.call(this))),I!==void 0&&(e.contentRender=s.templateRendering.call(this,I,s.getListeners.call(this))),h!==void 0&&(e.data=h),e}function m(t,e){const r=[];for(let i=0;i<t.length;i++){const l=t[i],n=v.call(this,l);n.id=o.createId(i.toString(),e),n.isLastFromSiblings=i===t.length-1,n.items=R.call(this,l,n),r.push(n)}return r}function R(t,e){return t.contentRender?[{contentParentItemId:e.id,id:o.createId(o.ZERO_LEVEL_ZERO_ITEM_ID,e.id),isLastFromSiblings:!0,contentRender:s.templateRendering.call(this,t.contentRender,s.getListeners.call(this)),items:[]}]:t.items?m.call(this,t.items,e.id):[]}exports.prepareInputItemsForInternalWork=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@progress/kendo-vue-common"),o=require("./itemsIdsUtils.js");function v(t){return t&&t.length>0?{items:g.call(this,t),inputItems:t}:{items:[],inputItems:[]}}function R(t){let e={};const{text:s,url:i,icon:l,svgIcon:n,disabled:c,cssClass:a,popupClass:d,cssStyle:u,separator:p,render:f,linkRender:I,contentRender:h,data:m}=t;return s!==void 0&&(e.text=s),i!==void 0&&(e.url=i),l!==void 0&&(e.icon=l),n!==void 0&&(e.svgIcon=n),c!==void 0&&(e.disabled=c),a!==void 0&&(e.cssClass=a),d!==void 0&&(e.popupClass=d),u!==void 0&&(e.cssStyle=u),p!==void 0&&(e.separator=p),f!==void 0&&(e.render=r.templateRendering.call(this,f,r.getListeners.call(this))),I!==void 0&&(e.linkRender=r.templateRendering.call(this,I,r.getListeners.call(this))),h!==void 0&&(e.contentRender=r.templateRendering.call(this,h,r.getListeners.call(this))),m!==void 0&&(e.data=m),e}function g(t,e){const s=[];for(let i=0;i<t.length;i++){const l=t[i],n=R.call(this,l);n.id=o.createId(i.toString(),e),n.isLastFromSiblings=i===t.length-1,n.items=C.call(this,l,n),s.push(n)}return s}function C(t,e){return t.contentRender?[{contentParentItemId:e.id,id:o.createId(o.ZERO_LEVEL_ZERO_ITEM_ID,e.id),isLastFromSiblings:!0,contentRender:r.templateRendering.call(this,t.contentRender,r.getListeners.call(this)),items:[]}]:t.items?g.call(this,t.items,e.id):[]}exports.prepareInputItemsForInternalWork=v;

package/menu/utils/prepareInputItemsForInternalWork.mjs

@@ -6,55 +6,56 @@
  *-------------------------------------------------------------------------------------------
  */
 import { templateRendering as l, getListeners as o } from "@progress/kendo-vue-common";
-import { createId as m, ZERO_LEVEL_ZERO_ITEM_ID as g } from "./itemsIdsUtils.mjs";
-function S(e) {
+import { createId as m, ZERO_LEVEL_ZERO_ITEM_ID as R } from "./itemsIdsUtils.mjs";
+function b(e) {
   return e && e.length > 0 ? {
-    items: v.call(this, e),
+    items: g.call(this, e),
     inputItems: e
   } : { items: [], inputItems: [] };
 }
-function R(e) {
+function C(e) {
   let t = {};
   const {
-    text: s,
+    text: r,
     url: i,
-    icon: r,
+    icon: s,
     svgIcon: n,
     disabled: c,
-    cssClass: d,
-    popupClass: a,
+    cssClass: a,
+    popupClass: d,
     cssStyle: f,
-    render: u,
-    linkRender: h,
-    contentRender: p,
+    separator: u,
+    render: h,
+    linkRender: p,
+    contentRender: v,
     data: I
   } = e;
-  return s !== void 0 && (t.text = s), i !== void 0 && (t.url = i), r !== void 0 && (t.icon = r), n !== void 0 && (t.svgIcon = n), c !== void 0 && (t.disabled = c), d !== void 0 && (t.cssClass = d), a !== void 0 && (t.popupClass = a), f !== void 0 && (t.cssStyle = f), u !== void 0 && (t.render = l.call(
-    this,
-    u,
-    o.call(this)
-  )), h !== void 0 && (t.linkRender = l.call(
+  return r !== void 0 && (t.text = r), i !== void 0 && (t.url = i), s !== void 0 && (t.icon = s), n !== void 0 && (t.svgIcon = n), c !== void 0 && (t.disabled = c), a !== void 0 && (t.cssClass = a), d !== void 0 && (t.popupClass = d), f !== void 0 && (t.cssStyle = f), u !== void 0 && (t.separator = u), h !== void 0 && (t.render = l.call(
     this,
     h,
     o.call(this)
-  )), p !== void 0 && (t.contentRender = l.call(
+  )), p !== void 0 && (t.linkRender = l.call(
     this,
     p,
     o.call(this)
+  )), v !== void 0 && (t.contentRender = l.call(
+    this,
+    v,
+    o.call(this)
   )), I !== void 0 && (t.data = I), t;
 }
-function v(e, t) {
-  const s = [];
+function g(e, t) {
+  const r = [];
   for (let i = 0; i < e.length; i++) {
-    const r = e[i], n = R.call(this, r);
-    n.id = m(i.toString(), t), n.isLastFromSiblings = i === e.length - 1, n.items = C.call(this, r, n), s.push(n);
+    const s = e[i], n = C.call(this, s);
+    n.id = m(i.toString(), t), n.isLastFromSiblings = i === e.length - 1, n.items = E.call(this, s, n), r.push(n);
   }
-  return s;
+  return r;
 }
-function C(e, t) {
+function E(e, t) {
   return e.contentRender ? [{
     contentParentItemId: t.id,
-    id: m(g, t.id),
+    id: m(R, t.id),
     isLastFromSiblings: !0,
     contentRender: l.call(
       this,
@@ -62,8 +63,8 @@ function C(e, t) {
       o.call(this)
     ),
     items: []
-  }] : e.items ? v.call(this, e.items, t.id) : [];
+  }] : e.items ? g.call(this, e.items, t.id) : [];
 }
 export {
-  S as prepareInputItemsForInternalWork
+  b as prepareInputItemsForInternalWork
 };

package/package-metadata.mjs

@@ -9,7 +9,7 @@ const e = {
   name: "@progress/kendo-vue-layout",
   productName: "Kendo UI for Vue",
   productCodes: ["KENDOUIVUE", "KENDOUICOMPLETE"],
-  publishDate: 1731406703,
+  publishDate: 1731424337,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-vue-ui/components/my-license/?utm_medium=product&utm_source=vue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-vue-layout",
-  "version": "6.0.0-develop.3",
+  "version": "6.0.0-develop.4",
   "description": "TODO",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -16,11 +16,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-vue-common": "6.0.0-develop.3",
-    "@progress/kendo-vue-animation": "6.0.0-develop.3",
-    "@progress/kendo-vue-intl": "6.0.0-develop.3",
-    "@progress/kendo-vue-popup": "6.0.0-develop.3",
-    "@progress/kendo-vue-progressbars": "6.0.0-develop.3",
+    "@progress/kendo-vue-common": "6.0.0-develop.4",
+    "@progress/kendo-vue-animation": "6.0.0-develop.4",
+    "@progress/kendo-vue-intl": "6.0.0-develop.4",
+    "@progress/kendo-vue-popup": "6.0.0-develop.4",
+    "@progress/kendo-vue-progressbars": "6.0.0-develop.4",
     "@progress/kendo-svg-icons": "^3.0.0",
     "vue": "^3.0.2"
   },

package/tabstrip/TabStrip.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("./TabStripNavigation.js"),u=require("./TabStripContent.js"),s=require("@progress/kendo-vue-common"),l=require("../package-metadata.js"),T=n.defineComponent({name:"KendoTabStrip",emits:{select:null},props:{animation:{type:Boolean,default:!0},selected:Number,tabPosition:{type:String,default:"top"},tabs:{type:Array,default:void 0},tabIndex:Number,dir:String},data(){return{currentShowAll:!0,currentTabs:[],showLicenseWatermark:!1}},computed:{compTabs(){return this.tabs!==void 0?this.tabs.map(function(e){const t=s.templateRendering.call(this,e.content,s.getListeners.call(this)),i=s.templateRendering.call(this,e.titleRender,s.getListeners.call(this));return{...e,content:t,titleRender:i}},this):this.currentTabs}},provide(){return{addRenderTitle:this.addRenderTitle,addTab:this.addTab,removeTab:this.removeTab}},created(){this.keyBinding={[s.Keys.left]:()=>this.prevNavigatableTab(),[s.Keys.right]:()=>this.nextNavigatableTab(),[s.Keys.down]:()=>this.nextNavigatableTab(),[s.Keys.up]:()=>this.prevNavigatableTab(),[s.Keys.home]:()=>0,[s.Keys.end]:()=>this.compTabs.length-1},s.validatePackage(l.packageMetadata),this.showLicenseWatermark=s.shouldShowValidationUI(l.packageMetadata)},watch:{selected(e,t){this.$props.animation&&(this.currentShowAll=!1,this.$nextTick(function(){this.currentShowAll=!0}))}},methods:{addRenderTitle(e,t){const i=this.compTabs.findIndex(a=>a.tabId===e);this.compTabs[i].titleRender=t},addTab(e){this.currentTabs.push(e)},removeTab(e){const t=this.currentTabs.findIndex(i=>i.tabId===e);this.currentTabs.splice(t,1)},onSelect(e){this.$props.selected!==e&&this.$emit("select",{selected:e})},onKeyDown(e){let t;switch(e.keyCode){case s.Keys.left:t=this.keyBinding[this.invertKeys(s.Keys.left,s.Keys.right)];break;case s.Keys.right:t=this.keyBinding[this.invertKeys(s.Keys.right,s.Keys.left)];break;case s.Keys.up:t=this.keyBinding[s.Keys.up];break;case s.Keys.down:t=this.keyBinding[s.Keys.down];break;case s.Keys.home:t=this.keyBinding[s.Keys.home];break;case s.Keys.end:t=this.keyBinding[s.Keys.end];break}t&&(e.preventDefault(),this.onSelect(t()))},invertKeys(e,t){return this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1?t:e},firstNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=0;t<e;t++)if(!this.compTabs[t].disabled)return t}},lastNavigatableTab(){const e=this.compTabs.length;if(e){for(let t=e-1;t>0;t--)if(!this.compTabs[t].disabled)return t}},prevNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,i=t?t-1:-1;if(i<0)return this.lastNavigatableTab();if(e)for(let a=i;a>-1;a--){if(!this.compTabs[a].disabled)return a;if(a===0)return this.lastNavigatableTab()}},nextNavigatableTab(){const e=this.compTabs.length,{selected:t}=this.$props,i=t?t+1:1;if(i>=e)return this.firstNavigatableTab();if(e)for(let a=i;a<e;a++){if(!this.compTabs[a].disabled)return a;if(a+1===e)return this.firstNavigatableTab()}}},render(){const{tabPosition:e,tabIndex:t=0}=this.$props,i=e==="bottom",a=s.classNames("k-widget","k-pos-relative","k-tabstrip",{"k-tabstrip-left":e==="left","k-tabstrip-right":e==="right","k-tabstrip-bottom":e==="bottom","k-tabstrip-top":e==="top"}),d=this.showLicenseWatermark?n.createVNode(s.WatermarkOverlay,null,null):null,c=function(h){const{selected:r}=h,b=s.getDefaultSlots(this),p={index:r,animation:this.$props.animation,tabs:this.compTabs,hasTabs:this.tabs!==void 0,selected:r,showAll:this.currentShowAll};return n.h(u.TabStripContent,{...p},b)};return n.createVNode("div",{dir:this.$props.dir,class:a},[!i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:t},null),c.call(this,this.$props),i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:t},null),d])}});exports.TabStrip=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),o=require("./TabStripNavigation.js"),u=require("./TabStripContent.js"),s=require("@progress/kendo-vue-common"),l=require("../package-metadata.js"),g=n.defineComponent({name:"KendoTabStrip",emits:{select:null},props:{animation:{type:Boolean,default:!0},selected:Number,tabPosition:{type:String,default:"top"},tabAlignment:{type:String,default:"start"},tabs:{type:Array,default:void 0},tabIndex:Number,dir:String},data(){return{currentShowAll:!0,currentTabs:[],showLicenseWatermark:!1}},computed:{compTabs(){return this.tabs!==void 0?this.tabs.map(function(t){const e=s.templateRendering.call(this,t.content,s.getListeners.call(this)),i=s.templateRendering.call(this,t.titleRender,s.getListeners.call(this));return{...t,content:e,titleRender:i}},this):this.currentTabs}},provide(){return{addRenderTitle:this.addRenderTitle,addTab:this.addTab,removeTab:this.removeTab}},created(){this.keyBinding={[s.Keys.left]:()=>this.prevNavigatableTab(),[s.Keys.right]:()=>this.nextNavigatableTab(),[s.Keys.down]:()=>this.nextNavigatableTab(),[s.Keys.up]:()=>this.prevNavigatableTab(),[s.Keys.home]:()=>0,[s.Keys.end]:()=>this.compTabs.length-1},s.validatePackage(l.packageMetadata),this.showLicenseWatermark=s.shouldShowValidationUI(l.packageMetadata)},watch:{selected(t,e){this.$props.animation&&(this.currentShowAll=!1,this.$nextTick(function(){this.currentShowAll=!0}))}},methods:{addRenderTitle(t,e){const i=this.compTabs.findIndex(a=>a.tabId===t);this.compTabs[i].titleRender=e},addTab(t){this.currentTabs.push(t)},removeTab(t){const e=this.currentTabs.findIndex(i=>i.tabId===t);this.currentTabs.splice(e,1)},onSelect(t){this.$props.selected!==t&&this.$emit("select",{selected:t})},onKeyDown(t){let e;switch(t.keyCode){case s.Keys.left:e=this.keyBinding[this.invertKeys(s.Keys.left,s.Keys.right)];break;case s.Keys.right:e=this.keyBinding[this.invertKeys(s.Keys.right,s.Keys.left)];break;case s.Keys.up:e=this.keyBinding[s.Keys.up];break;case s.Keys.down:e=this.keyBinding[s.Keys.down];break;case s.Keys.home:e=this.keyBinding[s.Keys.home];break;case s.Keys.end:e=this.keyBinding[s.Keys.end];break}e&&(t.preventDefault(),this.onSelect(e()))},invertKeys(t,e){return this.$el&&getComputedStyle(this.$el).direction==="rtl"||!1?e:t},firstNavigatableTab(){const t=this.compTabs.length;if(t){for(let e=0;e<t;e++)if(!this.compTabs[e].disabled)return e}},lastNavigatableTab(){const t=this.compTabs.length;if(t){for(let e=t-1;e>0;e--)if(!this.compTabs[e].disabled)return e}},prevNavigatableTab(){const t=this.compTabs.length,{selected:e}=this.$props,i=e?e-1:-1;if(i<0)return this.lastNavigatableTab();if(t)for(let a=i;a>-1;a--){if(!this.compTabs[a].disabled)return a;if(a===0)return this.lastNavigatableTab()}},nextNavigatableTab(){const t=this.compTabs.length,{selected:e}=this.$props,i=e?e+1:1;if(i>=t)return this.firstNavigatableTab();if(t)for(let a=i;a<t;a++){if(!this.compTabs[a].disabled)return a;if(a+1===t)return this.firstNavigatableTab()}}},render(){const{tabPosition:t,tabIndex:e=0}=this.$props,i=t==="bottom",a=s.classNames("k-widget","k-pos-relative","k-tabstrip",{"k-tabstrip-left":t==="left","k-tabstrip-right":t==="right","k-tabstrip-bottom":t==="bottom","k-tabstrip-top":t==="top"}),d=this.showLicenseWatermark?n.createVNode(s.WatermarkOverlay,null,null):null,c=function(h){const{selected:r}=h,b=s.getDefaultSlots(this),p={index:r,animation:this.$props.animation,tabs:this.compTabs,hasTabs:this.tabs!==void 0,selected:r,showAll:this.currentShowAll};return n.h(u.TabStripContent,{...p},b)};return n.createVNode("div",{dir:this.$props.dir,class:a},[!i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,selected:this.$props.selected,tabAlignment:this.$props.tabAlignment,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:e},null),c.call(this,this.$props),i&&n.createVNode(o.TabStripNavigation,{tabs:this.compTabs,tabAlignment:this.$props.tabAlignment,selected:this.$props.selected,onSelect:this.onSelect,onKeydown:this.onKeyDown,tabIndex:e},null),d])}});exports.TabStrip=g;