@syncfusion/ej2-vue-ribbon 24.2.3 → 25.1.35

package/CHANGELOG.md

@@ -2,14 +2,17 @@
 
 ## [Unreleased]
 
-## 24.1.44 (2024-01-03)
-
 ### Ribbon
 
-#### Bug Fixes
+#### Features
 
-`#I526346` - Fixed the issue with rendering item calculations in a simplified layout when some items are in a hidden state.
+- **Gallery item** - In addition to the existing built-in items, a new item, gallery, has been added to the Ribbon control. It allows users to perform specific actions by displaying a collection of related items, including icons, content, or images. Check out the demo [here](https://ej2.syncfusion.com/demos/#/material3/ribbon/gallery.html).
+- **Contextual tabs** - The Ribbon control now supports addition of contextual tabs, allows users to display the ribbon tabs on demand based on their needs. Similar to the normal ribbon tabs, it supports adding all built-in and custom ribbon items to execute specific actions. Check out the demo [here](https://ej2.syncfusion.com/demos/#/material3/ribbon/contextual-tab.html).
+- **KeyTips support** - The KeyTips feature enables users to quickly access the tabs or ribbon items by using defined unique key tips (up to 3 characters). To show the KeyTips, press Alt + Windows/Command keys, and close or traverse back by pressing the Esc key.  Check out the demo [here](https://ej2.syncfusion.com/demos/#/material3/ribbon/keytip.html).
 
+- **Gallery item** - In addition to the existing built-in items, a new item, gallery, has been added to the Ribbon component. It allows users to perform specific actions by displaying a collection of related items, including icons, content, or images. Check out the demo [here](https://ej2.syncfusion.com/vue/demos/#/material3/ribbon/gallery.html).
+- **Contextual tabs** - The Ribbon component now supports addition of contextual tabs, allows users to display the ribbon tabs on demand based on their needs. Similar to the normal ribbon tabs, it supports adding all built-in and custom ribbon items to execute specific actions. Check out the demo [here](https://ej2.syncfusion.com/vue/demos/#/material3/ribbon/contextual-tab.html).
+- **KeyTips support** - The KeyTips feature enables users to quickly access the tabs or ribbon items by using defined unique key tips (up to 3 characters). To show the KeyTips, press Alt + Windows/Command keys, and close or traverse back by pressing the Esc key.  Check out the demo [here](https://ej2.syncfusion.com/vue/demos/#/material3/ribbon/keytip.html).
 
 ## 24.1.41 (2023-12-18)
 

package/README.md

@@ -18,7 +18,7 @@ Trusted by the world's leading companies
     <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Bootstrap logo">
   </a>
 </p>
-
+  
 ## Setup
 
 To install the Ribbon and its dependent packages, use the following command.
@@ -41,6 +41,9 @@ Ribbon component is also offered in the following list of frameworks.
 * [Tooltip](https://ej2.syncfusion.com/vue/documentation/ribbon/tooltip): Provide additional information when a user hovers over a ribbon item, improving user experience and increasing the usability of the application.
 * [File menu](https://ej2.syncfusion.com/vue/documentation/ribbon/file-menu): A built-in menu that to add file related actions easily.
 * [Backstage](https://ej2.syncfusion.com/vue/documentation/ribbon/backstage): It is an extension of traditional file menu for displaying information, based on the user interactions with backstage options.
+* `Gallery`: In addition to the existing items, a new item gallery has been added to the Ribbon component which allows users to perform specific actions by displaying a collection of related items including icons, content, or images.
+* `Contextual Tabs`: It allows users to show ribbon tabs on demand when needed, by adding built-in and custom items to perform specific actions just like regular ribbon tabs.
+* `KeyTips`: It enables users to quickly access the tabs or ribbon items by using unique key tips (up to 3 characters), activated with `Alt + Windows/Command keys` and closed or navigated back with the `Esc` key.
 * [Templates](https://ej2.syncfusion.com/vue/documentation/ribbon/help-pane-template): Customize ribbon items and the help pane content using templates.
 
 ## Support
@@ -62,3 +65,4 @@ Product support is available through the following mediums.
 See [LICENSE FILE](https://github.com/syncfusion/ej2-vue-ui-components/blob/master/license) for more info.
 
 © Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
+

package/dist/ej2-vue-ribbon.umd.min.js

@@ -1,11 +1,11 @@
 /*!
 *  filename: ej2-vue-ribbon.umd.min.js
-*  version : 24.2.3
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
 *  licensing@syncfusion.com. Any infringement will be prosecuted under
 *  applicable laws. 
 */
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("@syncfusion/ej2-ribbon"),require("@syncfusion/ej2-vue-base"),require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-ribbon","@syncfusion/ej2-vue-base","@syncfusion/ej2-base"],n):n(e.ej={},e.ej2Ribbon,e.ej2VueBase,e.ej2Base)}(this,function(e,n,t,i){"use strict";var s=t.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!t.isExecute){var n=t.isExecute?e:t.gh,s=null;return i.isNullOrUndefined(this.$slots.default)||(s=t.isExecute?this.$slots.default:this.$slots.default()),n("div",{class:"e-directive"},s)}},updated:function(){!t.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-items"}}}),o={name:"e-ribbon-items",install:function(e){e.component(o.name,s)}},u=t.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-item"}}}),r={name:"e-ribbon-item",install:function(e){e.component(r.name,u)}},a=t.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!t.isExecute){var n=t.isExecute?e:t.gh,s=null;return i.isNullOrUndefined(this.$slots.default)||(s=t.isExecute?this.$slots.default:this.$slots.default()),n("div",{class:"e-directive"},s)}},updated:function(){!t.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-collections"}}}),c={name:"e-ribbon-collections",install:function(e){e.component(c.name,a)}},l=t.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-collection"}}}),b={name:"e-ribbon-collection",install:function(e){e.component(b.name,l)}},d=t.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!t.isExecute){var n=t.isExecute?e:t.gh,s=null;return i.isNullOrUndefined(this.$slots.default)||(s=t.isExecute?this.$slots.default:this.$slots.default()),n("div",{class:"e-directive"},s)}},updated:function(){!t.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-groups"}}}),m={name:"e-ribbon-groups",install:function(e){e.component(m.name,d)}},f=t.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-group"}}}),h={name:"e-ribbon-group",install:function(e){e.component(h.name,f)}},p=t.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!t.isExecute){var n=t.isExecute?e:t.gh,s=null;return i.isNullOrUndefined(this.$slots.default)||(s=t.isExecute?this.$slots.default:this.$slots.default()),n("div",{class:"e-directive"},s)}},updated:function(){!t.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-tabs"}}}),v={name:"e-ribbon-tabs",install:function(e){e.component(v.name,p)}},j=t.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-tab"}}}),I={name:"e-ribbon-tab",install:function(e){e.component(I.name,j)}},g=["isLazyUpdate","plugins","activeLayout","backStageMenu","cssClass","enablePersistence","enableRtl","fileMenu","helpPaneTemplate","hideLayoutSwitcher","isMinimized","launcherIconCss","locale","selectedTab","tabAnimation","tabs","width","created","launcherIconClick","overflowPopupClose","overflowPopupOpen","ribbonCollapsing","ribbonExpanding","tabSelected","tabSelecting"],T=[],C=t.getProps({props:g}),x=C[0],P=C[1],y=Object.keys(P);y.push("modelchanged","update:modelValue");for(var R=0,E=T;R<E.length;R++){var $=E[R];y.push("update:"+$)}var D=t.vueDefineComponent({name:"RibbonComponent",mixins:[t.ComponentBase],props:x,watch:P,emits:y,provide:function(){return{custom:this.custom}},data:function(){return{ej2Instances:new n.Ribbon({}),propKeys:g,models:T,hasChildDirective:!0,hasInjectedModules:!0,tagMapper:{"e-ribbon-tabs":{"e-ribbon-tab":{"e-ribbon-groups":{"e-ribbon-group":{"e-ribbon-collections":{"e-ribbon-collection":{"e-ribbon-items":"e-ribbon-item"}}}}}}},tagNameMapper:{"e-ribbon-items":"e-items","e-ribbon-collections":"e-collections","e-ribbon-groups":"e-groups","e-ribbon-tabs":"e-tabs"},isVue3:!t.isExecute,templateCollection:{}}},created:function(){this.bindProperties(),this.ej2Instances._setProperties=this.ej2Instances.setProperties,this.ej2Instances.setProperties=this.setProperties,this.ej2Instances.clearTemplate=this.clearTemplate,this.updated=this.updated},render:function(e){var n=t.isExecute?e:t.gh,s=null;return i.isNullOrUndefined(this.$slots.default)||(s=t.isExecute?this.$slots.default:this.$slots.default()),n("div",s)},methods:{clearTemplate:function(e){if(e||(e=Object.keys(this.templateCollection||{})),e.length&&this.templateCollection)for(var n=0,t=e;n<t.length;n++){var s=t[n],o=this.templateCollection[s];if(o&&o.length){for(var u=0,r=o;u<r.length;u++){var a=r[u];i.getValue("__vue__.$destroy",a)&&a.__vue__.$destroy(),a.innerHTML&&(a.innerHTML="")}delete this.templateCollection[s]}}},setProperties:function(e,n){var t=this;this.isVue3&&(this.models=this.models?this.models:this.ej2Instances.referModels),this.ej2Instances&&this.ej2Instances._setProperties&&this.ej2Instances._setProperties(e,n),e&&this.models&&this.models.length&&Object.keys(e).map(function(n){t.models.map(function(i){n!==i||/datasource/i.test(n)||(t.isVue3?t.ej2Instances.vueInstance.$emit("update:"+n,e[n]):(t.$emit("update:"+n,e[n]),t.$emit("modelchanged",e[n])))})})},custom:function(){this.updated()},addCollection:function(e,n,t,i){return this.ej2Instances.addCollection(e,n,t,i)},addGroup:function(e,n,t,i){return this.ej2Instances.addGroup(e,n,t,i)},addItem:function(e,n,t,i){return this.ej2Instances.addItem(e,n,t,i)},addTab:function(e,n,t){return this.ej2Instances.addTab(e,n,t)},disableGroup:function(e){return this.ej2Instances.disableGroup(e)},disableItem:function(e){return this.ej2Instances.disableItem(e)},disableTab:function(e){return this.ej2Instances.disableTab(e)},enableGroup:function(e){return this.ej2Instances.enableGroup(e)},enableItem:function(e){return this.ej2Instances.enableItem(e)},enableTab:function(e){return this.ej2Instances.enableTab(e)},hideGroup:function(e){return this.ej2Instances.hideGroup(e)},hideItem:function(e){return this.ej2Instances.hideItem(e)},hideTab:function(e){return this.ej2Instances.hideTab(e)},refreshLayout:function(){return this.ej2Instances.refreshLayout()},removeCollection:function(e){return this.ej2Instances.removeCollection(e)},removeGroup:function(e){return this.ej2Instances.removeGroup(e)},removeItem:function(e){return this.ej2Instances.removeItem(e)},removeTab:function(e){return this.ej2Instances.removeTab(e)},selectTab:function(e){return this.ej2Instances.selectTab(e)},showGroup:function(e){return this.ej2Instances.showGroup(e)},showItem:function(e){return this.ej2Instances.showItem(e)},showTab:function(e){return this.ej2Instances.showTab(e)},updateCollection:function(e){return this.ej2Instances.updateCollection(e)},updateGroup:function(e){return this.ej2Instances.updateGroup(e)},updateItem:function(e){return this.ej2Instances.updateItem(e)},updateTab:function(e){return this.ej2Instances.updateTab(e)}}}),G={name:"ejs-ribbon",install:function(e){e.component(G.name,D),e.component(I.name,j),e.component(v.name,p),e.component(h.name,f),e.component(m.name,d),e.component(b.name,l),e.component(c.name,a),e.component(r.name,u),e.component(o.name,s)}};e.RibbonItemsDirective=s,e.RibbonItemDirective=u,e.RibbonItemsPlugin=o,e.RibbonItemPlugin=r,e.RibbonCollectionsDirective=a,e.RibbonCollectionDirective=l,e.RibbonCollectionsPlugin=c,e.RibbonCollectionPlugin=b,e.RibbonGroupsDirective=d,e.RibbonGroupDirective=f,e.RibbonGroupsPlugin=m,e.RibbonGroupPlugin=h,e.RibbonTabsDirective=p,e.RibbonTabDirective=j,e.RibbonTabsPlugin=v,e.RibbonTabPlugin=I,e.RibbonComponent=D,e.RibbonPlugin=G,Object.keys(n).forEach(function(t){e[t]=n[t]}),Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@syncfusion/ej2-ribbon"),require("@syncfusion/ej2-vue-base"),require("@syncfusion/ej2-base")):"function"==typeof define&&define.amd?define(["exports","@syncfusion/ej2-ribbon","@syncfusion/ej2-vue-base","@syncfusion/ej2-base"],t):t(e.ej={},e.ej2Ribbon,e.ej2VueBase,e.ej2Base)}(this,function(e,t,n,i){"use strict";var o=n.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!n.isExecute){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",{class:"e-directive"},o)}},updated:function(){!n.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-items"}}}),s={name:"e-ribbon-items",install:function(e){e.component(s.name,o)}},u=n.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-item"}}}),a={name:"e-ribbon-item",install:function(e){e.component(a.name,u)}},r=n.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!n.isExecute){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",{class:"e-directive"},o)}},updated:function(){!n.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-collections"}}}),c={name:"e-ribbon-collections",install:function(e){e.component(c.name,r)}},l=n.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-collection"}}}),b={name:"e-ribbon-collection",install:function(e){e.component(b.name,l)}},m=n.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!n.isExecute){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",{class:"e-directive"},o)}},updated:function(){!n.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-groups"}}}),d={name:"e-ribbon-groups",install:function(e){e.component(d.name,m)}},f=n.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-group"}}}),h={name:"e-ribbon-group",install:function(e){e.component(h.name,f)}},p=n.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!n.isExecute){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",{class:"e-directive"},o)}},updated:function(){!n.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-tabs"}}}),g={name:"e-ribbon-tabs",install:function(e){e.component(g.name,p)}},v=n.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-tab"}}}),I={name:"e-ribbon-tab",install:function(e){e.component(I.name,v)}},j=n.vueDefineComponent({inject:{custom:{default:null}},render:function(e){if(!n.isExecute){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",{class:"e-directive"},o)}},updated:function(){!n.isExecute&&this.custom&&this.custom()},methods:{getTag:function(){return"e-ribbon-contextual-tabs"}}}),T={name:"e-ribbon-contextual-tabs",install:function(e){e.component(T.name,j)}},x=n.vueDefineComponent({render:function(){},methods:{getTag:function(){return"e-ribbon-contextual-tab"}}}),C={name:"e-ribbon-contextual-tab",install:function(e){e.component(C.name,x)}},R=["isLazyUpdate","plugins","activeLayout","backStageMenu","contextualTabs","cssClass","enableKeyTips","enablePersistence","enableRtl","fileMenu","helpPaneTemplate","hideLayoutSwitcher","isMinimized","launcherIconCss","layoutSwitcherKeyTip","locale","selectedTab","tabAnimation","tabs","width","created","launcherIconClick","overflowPopupClose","overflowPopupOpen","ribbonCollapsing","ribbonExpanding","tabSelected","tabSelecting"],y=[],E=n.getProps({props:R}),P=E[0],$=E[1],D=Object.keys($);D.push("modelchanged","update:modelValue");for(var G=0,w=y;G<w.length;G++){var _=w[G];D.push("update:"+_)}var O=n.vueDefineComponent({name:"RibbonComponent",mixins:[n.ComponentBase],props:P,watch:$,emits:D,provide:function(){return{custom:this.custom}},data:function(){return{ej2Instances:new t.Ribbon({}),propKeys:R,models:y,hasChildDirective:!0,hasInjectedModules:!0,tagMapper:{"e-ribbon-tabs":{"e-ribbon-tab":{"e-ribbon-groups":{"e-ribbon-group":{"e-ribbon-collections":{"e-ribbon-collection":{"e-ribbon-items":"e-ribbon-item"}}}}}},"e-ribbon-contextual-tabs":{"e-ribbon-contextual-tab":{"e-ribbon-tabs":{"e-ribbon-tab":{"e-ribbon-groups":{"e-ribbon-group":{"e-ribbon-collections":{"e-ribbon-collection":{"e-ribbon-items":"e-ribbon-item"}}}}}}}}},tagNameMapper:{"e-ribbon-items":"e-items","e-ribbon-collections":"e-collections","e-ribbon-groups":"e-groups","e-ribbon-tabs":"e-tabs","e-ribbon-contextual-tabs":"e-contextualTabs"},isVue3:!n.isExecute,templateCollection:{}}},created:function(){this.bindProperties(),this.ej2Instances._setProperties=this.ej2Instances.setProperties,this.ej2Instances.setProperties=this.setProperties,this.ej2Instances.clearTemplate=this.clearTemplate,this.updated=this.updated},render:function(e){var t=n.isExecute?e:n.gh,o=null;return i.isNullOrUndefined(this.$slots.default)||(o=n.isExecute?this.$slots.default:this.$slots.default()),t("div",o)},methods:{clearTemplate:function(e){if(e||(e=Object.keys(this.templateCollection||{})),e.length&&this.templateCollection)for(var t=0,n=e;t<n.length;t++){var o=n[t],s=this.templateCollection[o];if(s&&s.length){for(var u=0,a=s;u<a.length;u++){var r=a[u];i.getValue("__vue__.$destroy",r)&&r.__vue__.$destroy(),r.innerHTML&&(r.innerHTML="")}delete this.templateCollection[o]}}},setProperties:function(e,t){var n=this;this.isVue3&&(this.models=this.models?this.models:this.ej2Instances.referModels),this.ej2Instances&&this.ej2Instances._setProperties&&this.ej2Instances._setProperties(e,t),e&&this.models&&this.models.length&&Object.keys(e).map(function(t){n.models.map(function(i){t!==i||/datasource/i.test(t)||(n.isVue3?n.ej2Instances.vueInstance.$emit("update:"+t,e[t]):(n.$emit("update:"+t,e[t]),n.$emit("modelchanged",e[t])))})})},custom:function(){this.updated()},addCollection:function(e,t,n,i){return this.ej2Instances.addCollection(e,t,n,i)},addGroup:function(e,t,n,i){return this.ej2Instances.addGroup(e,t,n,i)},addItem:function(e,t,n,i){return this.ej2Instances.addItem(e,t,n,i)},addTab:function(e,t,n){return this.ej2Instances.addTab(e,t,n)},disableGroup:function(e){return this.ej2Instances.disableGroup(e)},disableItem:function(e){return this.ej2Instances.disableItem(e)},disableTab:function(e){return this.ej2Instances.disableTab(e)},enableGroup:function(e){return this.ej2Instances.enableGroup(e)},enableItem:function(e){return this.ej2Instances.enableItem(e)},enableTab:function(e){return this.ej2Instances.enableTab(e)},getItem:function(e){return this.ej2Instances.getItem(e)},hideGroup:function(e){return this.ej2Instances.hideGroup(e)},hideItem:function(e){return this.ej2Instances.hideItem(e)},hideTab:function(e,t){return this.ej2Instances.hideTab(e,t)},refreshLayout:function(){return this.ej2Instances.refreshLayout()},removeCollection:function(e){return this.ej2Instances.removeCollection(e)},removeGroup:function(e){return this.ej2Instances.removeGroup(e)},removeItem:function(e){return this.ej2Instances.removeItem(e)},removeTab:function(e){return this.ej2Instances.removeTab(e)},selectTab:function(e){return this.ej2Instances.selectTab(e)},showGroup:function(e){return this.ej2Instances.showGroup(e)},showItem:function(e){return this.ej2Instances.showItem(e)},showTab:function(e,t){return this.ej2Instances.showTab(e,t)},updateCollection:function(e){return this.ej2Instances.updateCollection(e)},updateGroup:function(e){return this.ej2Instances.updateGroup(e)},updateItem:function(e){return this.ej2Instances.updateItem(e)},updateTab:function(e){return this.ej2Instances.updateTab(e)}}}),M={name:"ejs-ribbon",install:function(e){e.component(M.name,O),e.component(I.name,v),e.component(g.name,p),e.component(h.name,f),e.component(d.name,m),e.component(b.name,l),e.component(c.name,r),e.component(a.name,u),e.component(s.name,o),e.component(C.name,x),e.component(T.name,j)}};e.RibbonItemsDirective=o,e.RibbonItemDirective=u,e.RibbonItemsPlugin=s,e.RibbonItemPlugin=a,e.RibbonCollectionsDirective=r,e.RibbonCollectionDirective=l,e.RibbonCollectionsPlugin=c,e.RibbonCollectionPlugin=b,e.RibbonGroupsDirective=m,e.RibbonGroupDirective=f,e.RibbonGroupsPlugin=d,e.RibbonGroupPlugin=h,e.RibbonTabsDirective=p,e.RibbonTabDirective=v,e.RibbonTabsPlugin=g,e.RibbonTabPlugin=I,e.RibbonContextualTabsDirective=j,e.RibbonContextualTabDirective=x,e.RibbonContextualTabsPlugin=T,e.RibbonContextualTabPlugin=C,e.RibbonComponent=O,e.RibbonPlugin=M,Object.keys(t).forEach(function(n){e[n]=t[n]}),Object.defineProperty(e,"__esModule",{value:!0})});
 //# sourceMappingURL=ej2-vue-ribbon.umd.min.js.map

package/dist/ej2-vue-ribbon.umd.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"ej2-vue-ribbon.umd.min.js","sources":["../src/ribbon/items.directive.js","../src/ribbon/collections.directive.js","../src/ribbon/groups.directive.js","../src/ribbon/tabs.directive.js","../src/ribbon/ribbon.component.js"],"sourcesContent":["import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonItemsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-items';\n        }\n    }\n});\nexport var RibbonItemsPlugin = {\n    name: 'e-ribbon-items',\n    install: function (Vue) {\n        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);\n    }\n};\n/**\n * `e-ribbon-item` directive represent a item in the VueJS Ribbon.\n * ```vue\n * <ejs-ribbon>\n *   <e-ribbon-tabs>\n *    <e-ribbon-tab></e-ribbon-tab>\n *    <e-ribbon-tab>\n *       <e-ribbon-groups>\n *         <e-ribbon-group>\n *             <e-ribbon-collections>\n *                 <e-ribbon-collection>\n *                     <e-ribbon-items>\n *                         <e-ribbon-item></e-ribbon-item>\n *                         <e-ribbon-item></e-ribbon-item>\n *                     </e-ribbon-items>\n *                 </e-ribbon-collection>\n *             </e-ribbon-collections>\n *         </e-ribbon-group>\n *       </e-ribbon-groups>\n *    </e-ribbon-tab>\n *   </e-ribbon-tabs>\n * </ejs-ribbon>\n * ```\n */\nexport var RibbonItemDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-item';\n        }\n    }\n});\nexport var RibbonItemPlugin = {\n    name: 'e-ribbon-item',\n    install: function (Vue) {\n        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonCollectionsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-collections';\n        }\n    }\n});\nexport var RibbonCollectionsPlugin = {\n    name: 'e-ribbon-collections',\n    install: function (Vue) {\n        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);\n    }\n};\n/**\n * `e-ribbon-collection` directive represent a collection in the VueJS Ribbon.\n * ```vue\n * <ejs-ribbon>\n *   <e-ribbon-tabs>\n *    <e-ribbon-tab></e-ribbon-tab>\n *    <e-ribbon-tab>\n *       <e-ribbon-groups>\n *         <e-ribbon-group>\n *             <e-ribbon-collections>\n *                 <e-ribbon-collection></e-ribbon-collection>\n *                 <e-ribbon-collection></e-ribbon-collection>\n *             </e-ribbon-collections>\n *         </e-ribbon-group>\n *       </e-ribbon-groups>\n *    </e-ribbon-tab>\n *   </e-ribbon-tabs>\n * </ejs-ribbon>\n * ```\n */\nexport var RibbonCollectionDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-collection';\n        }\n    }\n});\nexport var RibbonCollectionPlugin = {\n    name: 'e-ribbon-collection',\n    install: function (Vue) {\n        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonGroupsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-groups';\n        }\n    }\n});\nexport var RibbonGroupsPlugin = {\n    name: 'e-ribbon-groups',\n    install: function (Vue) {\n        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);\n    }\n};\n/**\n * `e-ribbon-group` directive represent a group in the VueJS Ribbon.\n * ```vue\n * <ejs-ribbon>\n *   <e-ribbon-tabs>\n *    <e-ribbon-tab></e-ribbon-tab>\n *    <e-ribbon-tab>\n *       <e-ribbon-groups>\n *         <e-ribbon-group></e-ribbon-group>\n *         <e-ribbon-group></e-ribbon-group>\n *       </e-ribbon-groups>\n *    </e-ribbon-tab>\n *   </e-ribbon-tabs>\n * </ejs-ribbon>\n * ```\n */\nexport var RibbonGroupDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-group';\n        }\n    }\n});\nexport var RibbonGroupPlugin = {\n    name: 'e-ribbon-group',\n    install: function (Vue) {\n        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonTabsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-tabs';\n        }\n    }\n});\nexport var RibbonTabsPlugin = {\n    name: 'e-ribbon-tabs',\n    install: function (Vue) {\n        Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);\n    }\n};\n/**\n * `e-ribbon-tab` directive represent a column of the VueJS Ribbon.\n * It must be contained in a Ribbon component(`ejs-ribbon`).\n * ```vue\n * <ejs-ribbon>\n *   <e-ribbon-tabs>\n *    <e-ribbon-tab></e-ribbon-tab>\n *    <e-ribbon-tab></e-ribbon-tab>\n *   </e-ribbon-tabs>\n * </ejs-ribbon>\n * ```\n */\nexport var RibbonTabDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-tab';\n        }\n    }\n});\nexport var RibbonTabPlugin = {\n    name: 'e-ribbon-tab',\n    install: function (Vue) {\n        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);\n    }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './items.directive';\nimport { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './collections.directive';\nimport { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './groups.directive';\nimport { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './tabs.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'activeLayout', 'backStageMenu', 'cssClass', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width', 'created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n    var props_1 = modelProps_1[_i];\n    emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the Essential JS 2 VueJS Ribbon Component\n * ```vue\n * <ejs-ribbon></ejs-ribbon>\n * ```\n */\nexport var RibbonComponent = vueDefineComponent({\n    name: 'RibbonComponent',\n    mixins: [ComponentBase],\n    props: props,\n    watch: watch,\n    emits: emitProbs,\n    provide: function () { return { custom: this.custom }; },\n    data: function () {\n        return {\n            ej2Instances: new Ribbon({}),\n            propKeys: properties,\n            models: modelProps,\n            hasChildDirective: true,\n            hasInjectedModules: true,\n            tagMapper: { \"e-ribbon-tabs\": { \"e-ribbon-tab\": { \"e-ribbon-groups\": { \"e-ribbon-group\": { \"e-ribbon-collections\": { \"e-ribbon-collection\": { \"e-ribbon-items\": \"e-ribbon-item\" } } } } } } },\n            tagNameMapper: { \"e-ribbon-items\": \"e-items\", \"e-ribbon-collections\": \"e-collections\", \"e-ribbon-groups\": \"e-groups\", \"e-ribbon-tabs\": \"e-tabs\" },\n            isVue3: !isExecute,\n            templateCollection: {},\n        };\n    },\n    created: function () {\n        this.bindProperties();\n        this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n        this.ej2Instances.setProperties = this.setProperties;\n        this.ej2Instances.clearTemplate = this.clearTemplate;\n        this.updated = this.updated;\n    },\n    render: function (createElement) {\n        var h = !isExecute ? gh : createElement;\n        var slots = null;\n        if (!isNullOrUndefined(this.$slots.default)) {\n            slots = !isExecute ? this.$slots.default() : this.$slots.default;\n        }\n        return h('div', slots);\n    },\n    methods: {\n        clearTemplate: function (templateNames) {\n            if (!templateNames) {\n                templateNames = Object.keys(this.templateCollection || {});\n            }\n            if (templateNames.length && this.templateCollection) {\n                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n                    var tempName = templateNames_1[_i];\n                    var elementCollection = this.templateCollection[tempName];\n                    if (elementCollection && elementCollection.length) {\n                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n                            var ele = elementCollection_1[_a];\n                            var destroy = getValue('__vue__.$destroy', ele);\n                            if (destroy) {\n                                ele.__vue__.$destroy();\n                            }\n                            if (ele.innerHTML) {\n                                ele.innerHTML = '';\n                            }\n                        }\n                        delete this.templateCollection[tempName];\n                    }\n                }\n            }\n        },\n        setProperties: function (prop, muteOnChange) {\n            var _this = this;\n            if (this.isVue3) {\n                this.models = !this.models ? this.ej2Instances.referModels : this.models;\n            }\n            if (this.ej2Instances && this.ej2Instances._setProperties) {\n                this.ej2Instances._setProperties(prop, muteOnChange);\n            }\n            if (prop && this.models && this.models.length) {\n                Object.keys(prop).map(function (key) {\n                    _this.models.map(function (model) {\n                        if ((key === model) && !(/datasource/i.test(key))) {\n                            if (_this.isVue3) {\n                                _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n                            }\n                            else {\n                                _this.$emit('update:' + key, prop[key]);\n                                _this.$emit('modelchanged', prop[key]);\n                            }\n                        }\n                    });\n                });\n            }\n        },\n        custom: function () {\n            this.updated();\n        },\n        addCollection: function (groupId, collection, targetId, isAfter) {\n            return this.ej2Instances.addCollection(groupId, collection, targetId, isAfter);\n        },\n        addGroup: function (tabId, group, targetId, isAfter) {\n            return this.ej2Instances.addGroup(tabId, group, targetId, isAfter);\n        },\n        addItem: function (collectionId, item, targetId, isAfter) {\n            return this.ej2Instances.addItem(collectionId, item, targetId, isAfter);\n        },\n        addTab: function (tab, targetId, isAfter) {\n            return this.ej2Instances.addTab(tab, targetId, isAfter);\n        },\n        disableGroup: function (groupID) {\n            return this.ej2Instances.disableGroup(groupID);\n        },\n        disableItem: function (itemId) {\n            return this.ej2Instances.disableItem(itemId);\n        },\n        disableTab: function (tabId) {\n            return this.ej2Instances.disableTab(tabId);\n        },\n        enableGroup: function (groupID) {\n            return this.ej2Instances.enableGroup(groupID);\n        },\n        enableItem: function (itemId) {\n            return this.ej2Instances.enableItem(itemId);\n        },\n        enableTab: function (tabId) {\n            return this.ej2Instances.enableTab(tabId);\n        },\n        hideGroup: function (groupID) {\n            return this.ej2Instances.hideGroup(groupID);\n        },\n        hideItem: function (itemId) {\n            return this.ej2Instances.hideItem(itemId);\n        },\n        hideTab: function (tabId) {\n            return this.ej2Instances.hideTab(tabId);\n        },\n        refreshLayout: function () {\n            return this.ej2Instances.refreshLayout();\n        },\n        removeCollection: function (collectionId) {\n            return this.ej2Instances.removeCollection(collectionId);\n        },\n        removeGroup: function (groupId) {\n            return this.ej2Instances.removeGroup(groupId);\n        },\n        removeItem: function (itemId) {\n            return this.ej2Instances.removeItem(itemId);\n        },\n        removeTab: function (tabId) {\n            return this.ej2Instances.removeTab(tabId);\n        },\n        selectTab: function (tabId) {\n            return this.ej2Instances.selectTab(tabId);\n        },\n        showGroup: function (groupID) {\n            return this.ej2Instances.showGroup(groupID);\n        },\n        showItem: function (itemId) {\n            return this.ej2Instances.showItem(itemId);\n        },\n        showTab: function (tabId) {\n            return this.ej2Instances.showTab(tabId);\n        },\n        updateCollection: function (collection) {\n            return this.ej2Instances.updateCollection(collection);\n        },\n        updateGroup: function (group) {\n            return this.ej2Instances.updateGroup(group);\n        },\n        updateItem: function (item) {\n            return this.ej2Instances.updateItem(item);\n        },\n        updateTab: function (tab) {\n            return this.ej2Instances.updateTab(tab);\n        },\n    }\n});\nexport var RibbonPlugin = {\n    name: 'ejs-ribbon',\n    install: function (Vue) {\n        Vue.component(RibbonPlugin.name, RibbonComponent);\n        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);\n        Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);\n        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);\n        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);\n        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);\n        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);\n        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);\n        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);\n    }\n};\n"],"names":["RibbonItemsDirective","vueDefineComponent","inject","custom","default","render","createElement","isExecute","h","gh","slots","isNullOrUndefined","this","$slots","class","updated","methods","getTag","RibbonItemsPlugin","name","install","Vue","component","RibbonItemDirective","RibbonItemPlugin","RibbonCollectionsDirective","RibbonCollectionsPlugin","RibbonCollectionDirective","RibbonCollectionPlugin","RibbonGroupsDirective","RibbonGroupsPlugin","RibbonGroupDirective","RibbonGroupPlugin","RibbonTabsDirective","RibbonTabsPlugin","RibbonTabDirective","RibbonTabPlugin","properties","modelProps","testProp","getProps","props","watch","emitProbs","Object","keys","push","_i","modelProps_1","length","props_1","RibbonComponent","mixins","ComponentBase","emits","provide","data","ej2Instances","Ribbon","propKeys","models","hasChildDirective","hasInjectedModules","tagMapper","e-ribbon-tabs","e-ribbon-tab","e-ribbon-groups","e-ribbon-group","e-ribbon-collections","e-ribbon-collection","e-ribbon-items","tagNameMapper","isVue3","templateCollection","created","bindProperties","_setProperties","setProperties","clearTemplate","templateNames","templateNames_1","tempName","elementCollection","_a","elementCollection_1","ele","getValue","__vue__","$destroy","innerHTML","prop","muteOnChange","_this","referModels","map","key","model","test","vueInstance","$emit","addCollection","groupId","collection","targetId","isAfter","addGroup","tabId","group","addItem","collectionId","item","addTab","tab","disableGroup","groupID","disableItem","itemId","disableTab","enableGroup","enableItem","enableTab","hideGroup","hideItem","hideTab","refreshLayout","removeCollection","removeGroup","removeItem","removeTab","selectTab","showGroup","showItem","showTab","updateCollection","updateGroup","updateItem","updateTab","RibbonPlugin"],"mappings":"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"}
+{"version":3,"file":"ej2-vue-ribbon.umd.min.js","sources":["../src/ribbon/items.directive.js","../src/ribbon/collections.directive.js","../src/ribbon/groups.directive.js","../src/ribbon/tabs.directive.js","../src/ribbon/contextualtabs.directive.js","../src/ribbon/ribbon.component.js"],"sourcesContent":["import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonItemsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-items';\n        }\n    }\n});\nexport var RibbonItemsPlugin = {\n    name: 'e-ribbon-items',\n    install: function (Vue) {\n        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);\n    }\n};\nexport var RibbonItemDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-item';\n        }\n    }\n});\nexport var RibbonItemPlugin = {\n    name: 'e-ribbon-item',\n    install: function (Vue) {\n        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonCollectionsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-collections';\n        }\n    }\n});\nexport var RibbonCollectionsPlugin = {\n    name: 'e-ribbon-collections',\n    install: function (Vue) {\n        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);\n    }\n};\nexport var RibbonCollectionDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-collection';\n        }\n    }\n});\nexport var RibbonCollectionPlugin = {\n    name: 'e-ribbon-collection',\n    install: function (Vue) {\n        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonGroupsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-groups';\n        }\n    }\n});\nexport var RibbonGroupsPlugin = {\n    name: 'e-ribbon-groups',\n    install: function (Vue) {\n        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);\n    }\n};\nexport var RibbonGroupDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-group';\n        }\n    }\n});\nexport var RibbonGroupPlugin = {\n    name: 'e-ribbon-group',\n    install: function (Vue) {\n        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonTabsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-tabs';\n        }\n    }\n});\nexport var RibbonTabsPlugin = {\n    name: 'e-ribbon-tabs',\n    install: function (Vue) {\n        Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);\n    }\n};\nexport var RibbonTabDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-tab';\n        }\n    }\n});\nexport var RibbonTabPlugin = {\n    name: 'e-ribbon-tab',\n    install: function (Vue) {\n        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);\n    }\n};\n","import { gh, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined } from '@syncfusion/ej2-base';\nexport var RibbonContextualTabsDirective = vueDefineComponent({\n    inject: { custom: { default: null } },\n    render: function (createElement) {\n        if (!isExecute) {\n            var h = !isExecute ? gh : createElement;\n            var slots = null;\n            if (!isNullOrUndefined(this.$slots.default)) {\n                slots = !isExecute ? this.$slots.default() : this.$slots.default;\n            }\n            return h('div', { class: 'e-directive' }, slots);\n        }\n        return;\n    },\n    updated: function () {\n        if (!isExecute && this.custom) {\n            this.custom();\n        }\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-contextual-tabs';\n        }\n    }\n});\nexport var RibbonContextualTabsPlugin = {\n    name: 'e-ribbon-contextual-tabs',\n    install: function (Vue) {\n        Vue.component(RibbonContextualTabsPlugin.name, RibbonContextualTabsDirective);\n    }\n};\n/**\n * `e-ribbon-contextual-tab` directive represent a contextual tab of the VueJS Ribbon.\n * It must be contained in a Ribbon component(`ejs-ribbon`).\n * ```vue\n * <ejs-ribbon>\n *   <e-ribbon-contextual-tabs>\n *    <e-ribbon-contextual-tab></e-ribbon-contextual-tab>\n *    <e-ribbon-contextual-tab></e-ribbon-contextual-tab>\n *   </e-ribbon-contextual-tabs>\n * </ejs-ribbon>\n * ```\n */\nexport var RibbonContextualTabDirective = vueDefineComponent({\n    render: function () {\n        return;\n    },\n    methods: {\n        getTag: function () {\n            return 'e-ribbon-contextual-tab';\n        }\n    }\n});\nexport var RibbonContextualTabPlugin = {\n    name: 'e-ribbon-contextual-tab',\n    install: function (Vue) {\n        Vue.component(RibbonContextualTabPlugin.name, RibbonContextualTabDirective);\n    }\n};\n","import { ComponentBase, gh, getProps, isExecute, vueDefineComponent } from '@syncfusion/ej2-vue-base';\nimport { isNullOrUndefined, getValue } from '@syncfusion/ej2-base';\nimport { Ribbon } from '@syncfusion/ej2-ribbon';\nimport { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin } from './items.directive';\nimport { RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin } from './collections.directive';\nimport { RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin } from './groups.directive';\nimport { RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin } from './tabs.directive';\nimport { RibbonContextualTabsDirective, RibbonContextualTabDirective, RibbonContextualTabsPlugin, RibbonContextualTabPlugin } from './contextualtabs.directive';\nexport var properties = ['isLazyUpdate', 'plugins', 'activeLayout', 'backStageMenu', 'contextualTabs', 'cssClass', 'enableKeyTips', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'layoutSwitcherKeyTip', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width', 'created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];\nexport var modelProps = [];\nexport var testProp = getProps({ props: properties });\nexport var props = testProp[0], watch = testProp[1], emitProbs = Object.keys(watch);\nemitProbs.push('modelchanged', 'update:modelValue');\nfor (var _i = 0, modelProps_1 = modelProps; _i < modelProps_1.length; _i++) {\n    var props_1 = modelProps_1[_i];\n    emitProbs.push('update:' + props_1);\n}\n/**\n * Represents the Essential JS 2 VueJS Ribbon Component\n * ```vue\n * <ejs-ribbon></ejs-ribbon>\n * ```\n */\nexport var RibbonComponent = vueDefineComponent({\n    name: 'RibbonComponent',\n    mixins: [ComponentBase],\n    props: props,\n    watch: watch,\n    emits: emitProbs,\n    provide: function () { return { custom: this.custom }; },\n    data: function () {\n        return {\n            ej2Instances: new Ribbon({}),\n            propKeys: properties,\n            models: modelProps,\n            hasChildDirective: true,\n            hasInjectedModules: true,\n            tagMapper: { \"e-ribbon-tabs\": { \"e-ribbon-tab\": { \"e-ribbon-groups\": { \"e-ribbon-group\": { \"e-ribbon-collections\": { \"e-ribbon-collection\": { \"e-ribbon-items\": \"e-ribbon-item\" } } } } } }, \"e-ribbon-contextual-tabs\": { \"e-ribbon-contextual-tab\": { \"e-ribbon-tabs\": { \"e-ribbon-tab\": { \"e-ribbon-groups\": { \"e-ribbon-group\": { \"e-ribbon-collections\": { \"e-ribbon-collection\": { \"e-ribbon-items\": \"e-ribbon-item\" } } } } } } } } },\n            tagNameMapper: { \"e-ribbon-items\": \"e-items\", \"e-ribbon-collections\": \"e-collections\", \"e-ribbon-groups\": \"e-groups\", \"e-ribbon-tabs\": \"e-tabs\", \"e-ribbon-contextual-tabs\": \"e-contextualTabs\" },\n            isVue3: !isExecute,\n            templateCollection: {},\n        };\n    },\n    created: function () {\n        this.bindProperties();\n        this.ej2Instances._setProperties = this.ej2Instances.setProperties;\n        this.ej2Instances.setProperties = this.setProperties;\n        this.ej2Instances.clearTemplate = this.clearTemplate;\n        this.updated = this.updated;\n    },\n    render: function (createElement) {\n        var h = !isExecute ? gh : createElement;\n        var slots = null;\n        if (!isNullOrUndefined(this.$slots.default)) {\n            slots = !isExecute ? this.$slots.default() : this.$slots.default;\n        }\n        return h('div', slots);\n    },\n    methods: {\n        clearTemplate: function (templateNames) {\n            if (!templateNames) {\n                templateNames = Object.keys(this.templateCollection || {});\n            }\n            if (templateNames.length && this.templateCollection) {\n                for (var _i = 0, templateNames_1 = templateNames; _i < templateNames_1.length; _i++) {\n                    var tempName = templateNames_1[_i];\n                    var elementCollection = this.templateCollection[tempName];\n                    if (elementCollection && elementCollection.length) {\n                        for (var _a = 0, elementCollection_1 = elementCollection; _a < elementCollection_1.length; _a++) {\n                            var ele = elementCollection_1[_a];\n                            var destroy = getValue('__vue__.$destroy', ele);\n                            if (destroy) {\n                                ele.__vue__.$destroy();\n                            }\n                            if (ele.innerHTML) {\n                                ele.innerHTML = '';\n                            }\n                        }\n                        delete this.templateCollection[tempName];\n                    }\n                }\n            }\n        },\n        setProperties: function (prop, muteOnChange) {\n            var _this = this;\n            if (this.isVue3) {\n                this.models = !this.models ? this.ej2Instances.referModels : this.models;\n            }\n            if (this.ej2Instances && this.ej2Instances._setProperties) {\n                this.ej2Instances._setProperties(prop, muteOnChange);\n            }\n            if (prop && this.models && this.models.length) {\n                Object.keys(prop).map(function (key) {\n                    _this.models.map(function (model) {\n                        if ((key === model) && !(/datasource/i.test(key))) {\n                            if (_this.isVue3) {\n                                _this.ej2Instances.vueInstance.$emit('update:' + key, prop[key]);\n                            }\n                            else {\n                                _this.$emit('update:' + key, prop[key]);\n                                _this.$emit('modelchanged', prop[key]);\n                            }\n                        }\n                    });\n                });\n            }\n        },\n        custom: function () {\n            this.updated();\n        },\n        addCollection: function (groupId, collection, targetId, isAfter) {\n            return this.ej2Instances.addCollection(groupId, collection, targetId, isAfter);\n        },\n        addGroup: function (tabId, group, targetId, isAfter) {\n            return this.ej2Instances.addGroup(tabId, group, targetId, isAfter);\n        },\n        addItem: function (collectionId, item, targetId, isAfter) {\n            return this.ej2Instances.addItem(collectionId, item, targetId, isAfter);\n        },\n        addTab: function (tab, targetId, isAfter) {\n            return this.ej2Instances.addTab(tab, targetId, isAfter);\n        },\n        disableGroup: function (groupID) {\n            return this.ej2Instances.disableGroup(groupID);\n        },\n        disableItem: function (itemId) {\n            return this.ej2Instances.disableItem(itemId);\n        },\n        disableTab: function (tabId) {\n            return this.ej2Instances.disableTab(tabId);\n        },\n        enableGroup: function (groupID) {\n            return this.ej2Instances.enableGroup(groupID);\n        },\n        enableItem: function (itemId) {\n            return this.ej2Instances.enableItem(itemId);\n        },\n        enableTab: function (tabId) {\n            return this.ej2Instances.enableTab(tabId);\n        },\n        getItem: function (itemId) {\n            return this.ej2Instances.getItem(itemId);\n        },\n        hideGroup: function (groupID) {\n            return this.ej2Instances.hideGroup(groupID);\n        },\n        hideItem: function (itemId) {\n            return this.ej2Instances.hideItem(itemId);\n        },\n        hideTab: function (tabId, isContextual) {\n            return this.ej2Instances.hideTab(tabId, isContextual);\n        },\n        refreshLayout: function () {\n            return this.ej2Instances.refreshLayout();\n        },\n        removeCollection: function (collectionId) {\n            return this.ej2Instances.removeCollection(collectionId);\n        },\n        removeGroup: function (groupId) {\n            return this.ej2Instances.removeGroup(groupId);\n        },\n        removeItem: function (itemId) {\n            return this.ej2Instances.removeItem(itemId);\n        },\n        removeTab: function (tabId) {\n            return this.ej2Instances.removeTab(tabId);\n        },\n        selectTab: function (tabId) {\n            return this.ej2Instances.selectTab(tabId);\n        },\n        showGroup: function (groupID) {\n            return this.ej2Instances.showGroup(groupID);\n        },\n        showItem: function (itemId) {\n            return this.ej2Instances.showItem(itemId);\n        },\n        showTab: function (tabId, isContextual) {\n            return this.ej2Instances.showTab(tabId, isContextual);\n        },\n        updateCollection: function (collection) {\n            return this.ej2Instances.updateCollection(collection);\n        },\n        updateGroup: function (group) {\n            return this.ej2Instances.updateGroup(group);\n        },\n        updateItem: function (item) {\n            return this.ej2Instances.updateItem(item);\n        },\n        updateTab: function (tab) {\n            return this.ej2Instances.updateTab(tab);\n        },\n    }\n});\nexport var RibbonPlugin = {\n    name: 'ejs-ribbon',\n    install: function (Vue) {\n        Vue.component(RibbonPlugin.name, RibbonComponent);\n        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);\n        Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);\n        Vue.component(RibbonGroupPlugin.name, RibbonGroupDirective);\n        Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);\n        Vue.component(RibbonCollectionPlugin.name, RibbonCollectionDirective);\n        Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);\n        Vue.component(RibbonItemPlugin.name, RibbonItemDirective);\n        Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);\n        Vue.component(RibbonContextualTabPlugin.name, RibbonContextualTabDirective);\n        Vue.component(RibbonContextualTabsPlugin.name, RibbonContextualTabsDirective);\n    }\n};\n"],"names":["RibbonItemsDirective","vueDefineComponent","inject","custom","default","render","createElement","isExecute","h","gh","slots","isNullOrUndefined","this","$slots","class","updated","methods","getTag","RibbonItemsPlugin","name","install","Vue","component","RibbonItemDirective","RibbonItemPlugin","RibbonCollectionsDirective","RibbonCollectionsPlugin","RibbonCollectionDirective","RibbonCollectionPlugin","RibbonGroupsDirective","RibbonGroupsPlugin","RibbonGroupDirective","RibbonGroupPlugin","RibbonTabsDirective","RibbonTabsPlugin","RibbonTabDirective","RibbonTabPlugin","RibbonContextualTabsDirective","RibbonContextualTabsPlugin","RibbonContextualTabDirective","RibbonContextualTabPlugin","properties","modelProps","testProp","getProps","props","watch","emitProbs","Object","keys","push","_i","modelProps_1","length","props_1","RibbonComponent","mixins","ComponentBase","emits","provide","data","ej2Instances","Ribbon","propKeys","models","hasChildDirective","hasInjectedModules","tagMapper","e-ribbon-tabs","e-ribbon-tab","e-ribbon-groups","e-ribbon-group","e-ribbon-collections","e-ribbon-collection","e-ribbon-items","e-ribbon-contextual-tabs","e-ribbon-contextual-tab","tagNameMapper","isVue3","templateCollection","created","bindProperties","_setProperties","setProperties","clearTemplate","templateNames","templateNames_1","tempName","elementCollection","_a","elementCollection_1","ele","getValue","__vue__","$destroy","innerHTML","prop","muteOnChange","_this","referModels","map","key","model","test","vueInstance","$emit","addCollection","groupId","collection","targetId","isAfter","addGroup","tabId","group","addItem","collectionId","item","addTab","tab","disableGroup","groupID","disableItem","itemId","disableTab","enableGroup","enableItem","enableTab","getItem","hideGroup","hideItem","hideTab","isContextual","refreshLayout","removeCollection","removeGroup","removeItem","removeTab","selectTab","showGroup","showItem","showTab","updateCollection","updateGroup","updateItem","updateTab","RibbonPlugin"],"mappings":"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"}

package/dist/es6/ej2-vue-ribbon.es2015.js

@@ -32,30 +32,6 @@ const RibbonItemsPlugin = {
         Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);
     }
 };
-/**
- * `e-ribbon-item` directive represent a item in the VueJS Ribbon.
- * ```vue
- * <ejs-ribbon>
- *   <e-ribbon-tabs>
- *    <e-ribbon-tab></e-ribbon-tab>
- *    <e-ribbon-tab>
- *       <e-ribbon-groups>
- *         <e-ribbon-group>
- *             <e-ribbon-collections>
- *                 <e-ribbon-collection>
- *                     <e-ribbon-items>
- *                         <e-ribbon-item></e-ribbon-item>
- *                         <e-ribbon-item></e-ribbon-item>
- *                     </e-ribbon-items>
- *                 </e-ribbon-collection>
- *             </e-ribbon-collections>
- *         </e-ribbon-group>
- *       </e-ribbon-groups>
- *    </e-ribbon-tab>
- *   </e-ribbon-tabs>
- * </ejs-ribbon>
- * ```
- */
 let RibbonItemDirective = vueDefineComponent({
     render() {
         return;
@@ -103,26 +79,6 @@ const RibbonCollectionsPlugin = {
         Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);
     }
 };
-/**
- * `e-ribbon-collection` directive represent a collection in the VueJS Ribbon.
- * ```vue
- * <ejs-ribbon>
- *   <e-ribbon-tabs>
- *    <e-ribbon-tab></e-ribbon-tab>
- *    <e-ribbon-tab>
- *       <e-ribbon-groups>
- *         <e-ribbon-group>
- *             <e-ribbon-collections>
- *                 <e-ribbon-collection></e-ribbon-collection>
- *                 <e-ribbon-collection></e-ribbon-collection>
- *             </e-ribbon-collections>
- *         </e-ribbon-group>
- *       </e-ribbon-groups>
- *    </e-ribbon-tab>
- *   </e-ribbon-tabs>
- * </ejs-ribbon>
- * ```
- */
 let RibbonCollectionDirective = vueDefineComponent({
     render() {
         return;
@@ -170,22 +126,6 @@ const RibbonGroupsPlugin = {
         Vue.component(RibbonGroupsPlugin.name, RibbonGroupsDirective);
     }
 };
-/**
- * `e-ribbon-group` directive represent a group in the VueJS Ribbon.
- * ```vue
- * <ejs-ribbon>
- *   <e-ribbon-tabs>
- *    <e-ribbon-tab></e-ribbon-tab>
- *    <e-ribbon-tab>
- *       <e-ribbon-groups>
- *         <e-ribbon-group></e-ribbon-group>
- *         <e-ribbon-group></e-ribbon-group>
- *       </e-ribbon-groups>
- *    </e-ribbon-tab>
- *   </e-ribbon-tabs>
- * </ejs-ribbon>
- * ```
- */
 let RibbonGroupDirective = vueDefineComponent({
     render() {
         return;
@@ -233,36 +173,83 @@ const RibbonTabsPlugin = {
         Vue.component(RibbonTabsPlugin.name, RibbonTabsDirective);
     }
 };
+let RibbonTabDirective = vueDefineComponent({
+    render() {
+        return;
+    },
+    methods: {
+        getTag() {
+            return 'e-ribbon-tab';
+        }
+    }
+});
+const RibbonTabPlugin = {
+    name: 'e-ribbon-tab',
+    install(Vue) {
+        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);
+    }
+};
+
+let RibbonContextualTabsDirective = vueDefineComponent({
+    inject: { custom: { default: null } },
+    render(createElement) {
+        if (!isExecute) {
+            let h = !isExecute ? gh : createElement;
+            let slots = null;
+            if (!isNullOrUndefined(this.$slots.default)) {
+                slots = !isExecute ? this.$slots.default() : this.$slots.default;
+            }
+            return h('div', { class: 'e-directive' }, slots);
+        }
+        return;
+    },
+    updated() {
+        if (!isExecute && this.custom) {
+            this.custom();
+        }
+    },
+    methods: {
+        getTag() {
+            return 'e-ribbon-contextual-tabs';
+        }
+    }
+});
+const RibbonContextualTabsPlugin = {
+    name: 'e-ribbon-contextual-tabs',
+    install(Vue) {
+        Vue.component(RibbonContextualTabsPlugin.name, RibbonContextualTabsDirective);
+    }
+};
 /**
- * `e-ribbon-tab` directive represent a column of the VueJS Ribbon.
+ * `e-ribbon-contextual-tab` directive represent a contextual tab of the VueJS Ribbon.
  * It must be contained in a Ribbon component(`ejs-ribbon`).
  * ```vue
  * <ejs-ribbon>
- *   <e-ribbon-tabs>
- *    <e-ribbon-tab></e-ribbon-tab>
- *    <e-ribbon-tab></e-ribbon-tab>
- *   </e-ribbon-tabs>
+ *   <e-ribbon-contextual-tabs>
+ *    <e-ribbon-contextual-tab></e-ribbon-contextual-tab>
+ *    <e-ribbon-contextual-tab></e-ribbon-contextual-tab>
+ *   </e-ribbon-contextual-tabs>
  * </ejs-ribbon>
  * ```
  */
-let RibbonTabDirective = vueDefineComponent({
+let RibbonContextualTabDirective = vueDefineComponent({
     render() {
         return;
     },
     methods: {
         getTag() {
-            return 'e-ribbon-tab';
+            return 'e-ribbon-contextual-tab';
         }
     }
 });
-const RibbonTabPlugin = {
-    name: 'e-ribbon-tab',
+const RibbonContextualTabPlugin = {
+    name: 'e-ribbon-contextual-tab',
     install(Vue) {
-        Vue.component(RibbonTabPlugin.name, RibbonTabDirective);
+        Vue.component(RibbonContextualTabPlugin.name, RibbonContextualTabDirective);
     }
 };
 
-const properties = ['isLazyUpdate', 'plugins', 'activeLayout', 'backStageMenu', 'cssClass', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width', 'created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
+const properties = ['isLazyUpdate', 'plugins', 'activeLayout', 'backStageMenu', 'contextualTabs', 'cssClass', 'enableKeyTips', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'layoutSwitcherKeyTip', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width', 'created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
 const modelProps = [];
 const testProp = getProps({ props: properties });
 const props = testProp[0];
@@ -292,8 +279,8 @@ let RibbonComponent = vueDefineComponent({
             models: modelProps,
             hasChildDirective: true,
             hasInjectedModules: true,
-            tagMapper: { "e-ribbon-tabs": { "e-ribbon-tab": { "e-ribbon-groups": { "e-ribbon-group": { "e-ribbon-collections": { "e-ribbon-collection": { "e-ribbon-items": "e-ribbon-item" } } } } } } },
-            tagNameMapper: { "e-ribbon-items": "e-items", "e-ribbon-collections": "e-collections", "e-ribbon-groups": "e-groups", "e-ribbon-tabs": "e-tabs" },
+            tagMapper: { "e-ribbon-tabs": { "e-ribbon-tab": { "e-ribbon-groups": { "e-ribbon-group": { "e-ribbon-collections": { "e-ribbon-collection": { "e-ribbon-items": "e-ribbon-item" } } } } } }, "e-ribbon-contextual-tabs": { "e-ribbon-contextual-tab": { "e-ribbon-tabs": { "e-ribbon-tab": { "e-ribbon-groups": { "e-ribbon-group": { "e-ribbon-collections": { "e-ribbon-collection": { "e-ribbon-items": "e-ribbon-item" } } } } } } } } },
+            tagNameMapper: { "e-ribbon-items": "e-items", "e-ribbon-collections": "e-collections", "e-ribbon-groups": "e-groups", "e-ribbon-tabs": "e-tabs", "e-ribbon-contextual-tabs": "e-contextualTabs" },
             isVue3: !isExecute,
             templateCollection: {},
         };
@@ -392,14 +379,17 @@ let RibbonComponent = vueDefineComponent({
         enableTab(tabId) {
             return this.ej2Instances.enableTab(tabId);
         },
+        getItem(itemId) {
+            return this.ej2Instances.getItem(itemId);
+        },
         hideGroup(groupID) {
             return this.ej2Instances.hideGroup(groupID);
         },
         hideItem(itemId) {
             return this.ej2Instances.hideItem(itemId);
         },
-        hideTab(tabId) {
-            return this.ej2Instances.hideTab(tabId);
+        hideTab(tabId, isContextual) {
+            return this.ej2Instances.hideTab(tabId, isContextual);
         },
         refreshLayout() {
             return this.ej2Instances.refreshLayout();
@@ -425,8 +415,8 @@ let RibbonComponent = vueDefineComponent({
         showItem(itemId) {
             return this.ej2Instances.showItem(itemId);
         },
-        showTab(tabId) {
-            return this.ej2Instances.showTab(tabId);
+        showTab(tabId, isContextual) {
+            return this.ej2Instances.showTab(tabId, isContextual);
         },
         updateCollection(collection) {
             return this.ej2Instances.updateCollection(collection);
@@ -454,9 +444,11 @@ const RibbonPlugin = {
         Vue.component(RibbonCollectionsPlugin.name, RibbonCollectionsDirective);
         Vue.component(RibbonItemPlugin.name, RibbonItemDirective);
         Vue.component(RibbonItemsPlugin.name, RibbonItemsDirective);
+        Vue.component(RibbonContextualTabPlugin.name, RibbonContextualTabDirective);
+        Vue.component(RibbonContextualTabsPlugin.name, RibbonContextualTabsDirective);
     }
 };
 
-export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin, RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin, RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin, RibbonComponent, RibbonPlugin };
+export { RibbonItemsDirective, RibbonItemDirective, RibbonItemsPlugin, RibbonItemPlugin, RibbonCollectionsDirective, RibbonCollectionDirective, RibbonCollectionsPlugin, RibbonCollectionPlugin, RibbonGroupsDirective, RibbonGroupDirective, RibbonGroupsPlugin, RibbonGroupPlugin, RibbonTabsDirective, RibbonTabDirective, RibbonTabsPlugin, RibbonTabPlugin, RibbonContextualTabsDirective, RibbonContextualTabDirective, RibbonContextualTabsPlugin, RibbonContextualTabPlugin, RibbonComponent, RibbonPlugin };
 export * from '@syncfusion/ej2-ribbon';
 //# sourceMappingURL=ej2-vue-ribbon.es2015.js.map