@syncfusion/ej2-angular-ribbon 24.2.8 → 25.1.35

package/fesm2020/syncfusion-ej2-angular-ribbon.mjs

@@ -2,47 +2,23 @@ import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
 import { Directive, ContentChild, ContentChildren, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import { ComplexBase, setValue, Template, ArrayBase, ComponentBase, ComponentMixins } from '@syncfusion/ej2-angular-base';
-import { Ribbon, RibbonButton, RibbonDropDown, RibbonSplitButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonGroupButton, RibbonFileMenu, RibbonBackstage } from '@syncfusion/ej2-ribbon';
+import { Ribbon, RibbonButton, RibbonDropDown, RibbonSplitButton, RibbonCheckBox, RibbonColorPicker, RibbonComboBox, RibbonGroupButton, RibbonFileMenu, RibbonBackstage, RibbonKeyTip, RibbonContextualTab, RibbonGallery } from '@syncfusion/ej2-ribbon';
 export * from '@syncfusion/ej2-ribbon';
 import { CommonModule } from '@angular/common';
 
-let input$3 = ['activeSize', 'allowedSizes', 'buttonSettings', 'checkBoxSettings', 'colorPickerSettings', 'comboBoxSettings', 'cssClass', 'disabled', 'displayOptions', 'dropDownSettings', 'groupButtonSettings', 'id', 'itemTemplate', 'ribbonTooltipSettings', 'splitButtonSettings', 'type'];
-let outputs$4 = [];
-/**
- * `e-ribbon-item` directive represent a item in the Angular Ribbon.
- * ```html
- * <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 input$4 = ['activeSize', 'allowedSizes', 'buttonSettings', 'checkBoxSettings', 'colorPickerSettings', 'comboBoxSettings', 'cssClass', 'disabled', 'displayOptions', 'dropDownSettings', 'gallerySettings', 'groupButtonSettings', 'id', 'itemTemplate', 'keyTip', 'ribbonTooltipSettings', 'splitButtonSettings', 'type'];
+let outputs$5 = [];
 class RibbonItemDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$4);
-        this.directivePropList = input$3;
+        this.registerEvents(outputs$5);
+        this.directivePropList = input$4;
     }
 }
 RibbonItemDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-RibbonItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonItemDirective, selector: "e-ribbon-item", inputs: { activeSize: "activeSize", allowedSizes: "allowedSizes", buttonSettings: "buttonSettings", checkBoxSettings: "checkBoxSettings", colorPickerSettings: "colorPickerSettings", comboBoxSettings: "comboBoxSettings", cssClass: "cssClass", disabled: "disabled", displayOptions: "displayOptions", dropDownSettings: "dropDownSettings", groupButtonSettings: "groupButtonSettings", id: "id", itemTemplate: "itemTemplate", ribbonTooltipSettings: "ribbonTooltipSettings", splitButtonSettings: "splitButtonSettings", type: "type" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0 });
+RibbonItemDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonItemDirective, selector: "e-ribbon-item", inputs: { activeSize: "activeSize", allowedSizes: "allowedSizes", buttonSettings: "buttonSettings", checkBoxSettings: "checkBoxSettings", colorPickerSettings: "colorPickerSettings", comboBoxSettings: "comboBoxSettings", cssClass: "cssClass", disabled: "disabled", displayOptions: "displayOptions", dropDownSettings: "dropDownSettings", gallerySettings: "gallerySettings", groupButtonSettings: "groupButtonSettings", id: "id", itemTemplate: "itemTemplate", keyTip: "keyTip", ribbonTooltipSettings: "ribbonTooltipSettings", splitButtonSettings: "splitButtonSettings", type: "type" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], usesInheritance: true, ngImport: i0 });
 __decorate([
     Template()
 ], RibbonItemDirective.prototype, "itemTemplate", void 0);
@@ -50,8 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-ribbon-item',
-                    inputs: input$3,
-                    outputs: outputs$4,
+                    inputs: input$4,
+                    outputs: outputs$5,
                     queries: {}
                 }]
         }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { itemTemplate: [{
@@ -79,36 +55,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$2 = ['cssClass', 'id', 'items'];
-let outputs$3 = [];
-/**
- * `e-ribbon-collection` directive represent a collection in the Angular Ribbon.
- * ```html
- * <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 input$3 = ['cssClass', 'id', 'items'];
+let outputs$4 = [];
 class RibbonCollectionDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         this.tags = ['items'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$3);
-        this.directivePropList = input$2;
+        this.registerEvents(outputs$4);
+        this.directivePropList = input$3;
     }
 }
 RibbonCollectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonCollectionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
@@ -117,8 +73,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
             type: Directive,
             args: [{
                     selector: 'e-ribbon-collection',
-                    inputs: input$2,
-                    outputs: outputs$3,
+                    inputs: input$3,
+                    outputs: outputs$4,
                     queries: {
                         childItems: new ContentChild(RibbonItemsDirective)
                     }
@@ -145,42 +101,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input$1 = ['collections', 'cssClass', 'enableGroupOverflow', 'groupIconCss', 'header', 'id', 'isCollapsed', 'isCollapsible', 'orientation', 'overflowHeader', 'priority', 'showLauncherIcon'];
-let outputs$2 = [];
-/**
- * `e-ribbon-group` directive represent a group in the Angular Ribbon.
- * ```html
- * <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 input$2 = ['collections', 'cssClass', 'enableGroupOverflow', 'groupIconCss', 'header', 'id', 'isCollapsed', 'isCollapsible', 'keyTip', 'launcherIconKeyTip', 'orientation', 'overflowHeader', 'priority', 'showLauncherIcon'];
+let outputs$3 = [];
 class RibbonGroupDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         this.tags = ['collections'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$2);
-        this.directivePropList = input$1;
+        this.registerEvents(outputs$3);
+        this.directivePropList = input$2;
     }
 }
 RibbonGroupDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonGroupDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-RibbonGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonGroupDirective, selector: "e-ribbon-group", inputs: { collections: "collections", cssClass: "cssClass", enableGroupOverflow: "enableGroupOverflow", groupIconCss: "groupIconCss", header: "header", id: "id", isCollapsed: "isCollapsed", isCollapsible: "isCollapsible", orientation: "orientation", overflowHeader: "overflowHeader", priority: "priority", showLauncherIcon: "showLauncherIcon" }, queries: [{ propertyName: "childCollections", first: true, predicate: RibbonCollectionsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+RibbonGroupDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonGroupDirective, selector: "e-ribbon-group", inputs: { collections: "collections", cssClass: "cssClass", enableGroupOverflow: "enableGroupOverflow", groupIconCss: "groupIconCss", header: "header", id: "id", isCollapsed: "isCollapsed", isCollapsible: "isCollapsible", keyTip: "keyTip", launcherIconKeyTip: "launcherIconKeyTip", orientation: "orientation", overflowHeader: "overflowHeader", priority: "priority", showLauncherIcon: "showLauncherIcon" }, queries: [{ propertyName: "childCollections", first: true, predicate: RibbonCollectionsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-group',
-                    inputs: input$1,
-                    outputs: outputs$2,
+                    inputs: input$2,
+                    outputs: outputs$3,
                     queries: {
                         childCollections: new ContentChild(RibbonCollectionsDirective)
                     }
@@ -207,38 +147,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-let input = ['cssClass', 'groups', 'header', 'id'];
-let outputs$1 = [];
-/**
- * `e-ribbon-tab` directive represent a tab of the Angular Ribbon.
- * It must be contained in a Ribbon component(`ejs-ribbon`).
- * ```html
- * <ejs-ribbon>
- *   <e-ribbon-tabs>
- *    <e-ribbon-tab></e-ribbon-tab>
- *    <e-ribbon-tab></e-ribbon-tab>
- *   </e-ribbon-tabs>
- * </ejs-ribbon>
- * ```
- */
+let input$1 = ['cssClass', 'groups', 'header', 'id', 'keyTip'];
+let outputs$2 = [];
 class RibbonTabDirective extends ComplexBase {
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
         this.tags = ['groups'];
         setValue('currentInstance', this, this.viewContainerRef);
-        this.registerEvents(outputs$1);
-        this.directivePropList = input;
+        this.registerEvents(outputs$2);
+        this.directivePropList = input$1;
     }
 }
 RibbonTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonTabDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-RibbonTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonTabDirective, selector: "e-ribbon-tab", inputs: { cssClass: "cssClass", groups: "groups", header: "header", id: "id" }, queries: [{ propertyName: "childGroups", first: true, predicate: RibbonGroupsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+RibbonTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonTabDirective, selector: "e-ribbon-tab", inputs: { cssClass: "cssClass", groups: "groups", header: "header", id: "id", keyTip: "keyTip" }, queries: [{ propertyName: "childGroups", first: true, predicate: RibbonGroupsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-tab',
-                    inputs: input,
-                    outputs: outputs$1,
+                    inputs: input$1,
+                    outputs: outputs$2,
                     queries: {
                         childGroups: new ContentChild(RibbonGroupsDirective)
                     }
@@ -265,7 +193,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
-const inputs = ['activeLayout', 'backStageMenu', 'cssClass', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width'];
+let input = ['isSelected', 'tabs', 'visible'];
+let outputs$1 = [];
+/**
+ * `e-ribbon-contextual-tab` directive represent a contextual tab of the Angular Ribbon.
+ * It must be contained in a Ribbon component(`ejs-ribbon`).
+ * ```html
+ * <ejs-ribbon>
+ *   <e-ribbon-contextual-tabs>
+ *    <e-ribbon-contextual-tab>
+ *    </e-ribbon-contextual-tab>
+ *   </e-ribbon-contextual-tabs>
+ * </ejs-ribbon>
+ * ```
+ */
+class RibbonContextualTabDirective extends ComplexBase {
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        this.tags = ['tabs'];
+        setValue('currentInstance', this, this.viewContainerRef);
+        this.registerEvents(outputs$1);
+        this.directivePropList = input;
+    }
+}
+RibbonContextualTabDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonContextualTabDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+RibbonContextualTabDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonContextualTabDirective, selector: "e-ribbon-contextual-tab", inputs: { isSelected: "isSelected", tabs: "tabs", visible: "visible" }, queries: [{ propertyName: "childTabs", first: true, predicate: RibbonTabsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonContextualTabDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'e-ribbon-contextual-tab',
+                    inputs: input,
+                    outputs: outputs$1,
+                    queries: {
+                        childTabs: new ContentChild(RibbonTabsDirective)
+                    }
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+/**
+ * RibbonContextualTab Array Directive
+ * @private
+ */
+class RibbonContextualTabsDirective extends ArrayBase {
+    constructor() {
+        super('contextualtabs');
+    }
+}
+RibbonContextualTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonContextualTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+RibbonContextualTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonContextualTabsDirective, selector: "e-ribbon-contextual-tabs", queries: [{ propertyName: "children", predicate: RibbonContextualTabDirective }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonContextualTabsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'e-ribbon-contextual-tabs',
+                    queries: {
+                        children: new ContentChildren(RibbonContextualTabDirective)
+                    },
+                }]
+        }], ctorParameters: function () { return []; } });
+
+const inputs = ['activeLayout', 'backStageMenu', 'contextualTabs', 'cssClass', 'enableKeyTips', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'layoutSwitcherKeyTip', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width'];
 const outputs = ['created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
 const twoWays = [''];
 /**
@@ -281,7 +267,7 @@ let RibbonComponent = class RibbonComponent extends Ribbon {
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
-        this.tags = ['tabs'];
+        this.tags = ['tabs', 'contextualTabs'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
         try {
@@ -347,6 +333,27 @@ let RibbonComponent = class RibbonComponent extends Ribbon {
             }
         }
         catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonKeyTip');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonContextualTab');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonGallery');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
         this.registerEvents(outputs);
         this.addTwoWay.call(this, twoWays);
         setValue('currentInstance', this, this.viewContainerRef);
@@ -363,11 +370,14 @@ let RibbonComponent = class RibbonComponent extends Ribbon {
     }
     ngAfterContentChecked() {
         this.tagObjects[0].instance = this.childTabs;
+        if (this.childContextualTabs) {
+            this.tagObjects[1].instance = this.childContextualTabs;
+        }
         this.containerContext.ngAfterContentChecked(this);
     }
 };
 RibbonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-RibbonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RibbonComponent, selector: "ejs-ribbon", inputs: { activeLayout: "activeLayout", backStageMenu: "backStageMenu", cssClass: "cssClass", enablePersistence: "enablePersistence", enableRtl: "enableRtl", fileMenu: "fileMenu", helpPaneTemplate: "helpPaneTemplate", hideLayoutSwitcher: "hideLayoutSwitcher", isMinimized: "isMinimized", launcherIconCss: "launcherIconCss", locale: "locale", selectedTab: "selectedTab", tabAnimation: "tabAnimation", tabs: "tabs", width: "width" }, outputs: { created: "created", launcherIconClick: "launcherIconClick", overflowPopupClose: "overflowPopupClose", overflowPopupOpen: "overflowPopupOpen", ribbonCollapsing: "ribbonCollapsing", ribbonExpanding: "ribbonExpanding", tabSelected: "tabSelected", tabSelecting: "tabSelecting" }, queries: [{ propertyName: "helpPaneTemplate", first: true, predicate: ["helpPaneTemplate"], descendants: true }, { propertyName: "childTabs", first: true, predicate: RibbonTabsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select='div'></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+RibbonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: RibbonComponent, selector: "ejs-ribbon", inputs: { activeLayout: "activeLayout", backStageMenu: "backStageMenu", contextualTabs: "contextualTabs", cssClass: "cssClass", enableKeyTips: "enableKeyTips", enablePersistence: "enablePersistence", enableRtl: "enableRtl", fileMenu: "fileMenu", helpPaneTemplate: "helpPaneTemplate", hideLayoutSwitcher: "hideLayoutSwitcher", isMinimized: "isMinimized", launcherIconCss: "launcherIconCss", layoutSwitcherKeyTip: "layoutSwitcherKeyTip", locale: "locale", selectedTab: "selectedTab", tabAnimation: "tabAnimation", tabs: "tabs", width: "width" }, outputs: { created: "created", launcherIconClick: "launcherIconClick", overflowPopupClose: "overflowPopupClose", overflowPopupOpen: "overflowPopupOpen", ribbonCollapsing: "ribbonCollapsing", ribbonExpanding: "ribbonExpanding", tabSelected: "tabSelected", tabSelecting: "tabSelecting" }, queries: [{ propertyName: "helpPaneTemplate", first: true, predicate: ["helpPaneTemplate"], descendants: true }, { propertyName: "childTabs", first: true, predicate: RibbonTabsDirective, descendants: true }, { propertyName: "childContextualTabs", first: true, predicate: RibbonContextualTabsDirective, descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select='div'></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 __decorate([
     Template()
 ], RibbonComponent.prototype, "helpPaneTemplate", void 0);
@@ -383,7 +393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     queries: {
-                        childTabs: new ContentChild(RibbonTabsDirective)
+                        childTabs: new ContentChild(RibbonTabsDirective),
+                        childContextualTabs: new ContentChild(RibbonContextualTabsDirective)
                     }
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { helpPaneTemplate: [{
@@ -405,7 +416,9 @@ RibbonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RibbonGroupDirective,
         RibbonGroupsDirective,
         RibbonTabDirective,
-        RibbonTabsDirective], imports: [CommonModule], exports: [RibbonComponent,
+        RibbonTabsDirective,
+        RibbonContextualTabDirective,
+        RibbonContextualTabsDirective], imports: [CommonModule], exports: [RibbonComponent,
         RibbonItemDirective,
         RibbonItemsDirective,
         RibbonCollectionDirective,
@@ -413,7 +426,9 @@ RibbonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         RibbonGroupDirective,
         RibbonGroupsDirective,
         RibbonTabDirective,
-        RibbonTabsDirective] });
+        RibbonTabsDirective,
+        RibbonContextualTabDirective,
+        RibbonContextualTabsDirective] });
 RibbonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonModule, imports: [[CommonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonModule, decorators: [{
             type: NgModule,
@@ -428,7 +443,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         RibbonGroupDirective,
                         RibbonGroupsDirective,
                         RibbonTabDirective,
-                        RibbonTabsDirective
+                        RibbonTabsDirective,
+                        RibbonContextualTabDirective,
+                        RibbonContextualTabsDirective
                     ],
                     exports: [
                         RibbonComponent,
@@ -439,7 +456,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         RibbonGroupDirective,
                         RibbonGroupsDirective,
                         RibbonTabDirective,
-                        RibbonTabsDirective
+                        RibbonTabsDirective,
+                        RibbonContextualTabDirective,
+                        RibbonContextualTabsDirective
                     ]
                 }]
         }] });
@@ -453,6 +472,9 @@ const RibbonComboBoxService = { provide: 'RibbonRibbonComboBox', useValue: Ribbo
 const RibbonGroupButtonService = { provide: 'RibbonRibbonGroupButton', useValue: RibbonGroupButton };
 const RibbonFileMenuService = { provide: 'RibbonRibbonFileMenu', useValue: RibbonFileMenu };
 const RibbonBackstageService = { provide: 'RibbonRibbonBackstage', useValue: RibbonBackstage };
+const RibbonKeyTipService = { provide: 'RibbonRibbonKeyTip', useValue: RibbonKeyTip };
+const RibbonContextualTabService = { provide: 'RibbonRibbonContextualTab', useValue: RibbonContextualTab };
+const RibbonGalleryService = { provide: 'RibbonRibbonGallery', useValue: RibbonGallery };
 /**
  * NgModule definition for the Ribbon component with providers.
  */
@@ -469,7 +491,10 @@ RibbonAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version
         RibbonComboBoxService,
         RibbonGroupButtonService,
         RibbonFileMenuService,
-        RibbonBackstageService
+        RibbonBackstageService,
+        RibbonKeyTipService,
+        RibbonContextualTabService,
+        RibbonGalleryService
     ], imports: [[CommonModule, RibbonModule], RibbonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonAllModule, decorators: [{
             type: NgModule,
@@ -487,7 +512,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                         RibbonComboBoxService,
                         RibbonGroupButtonService,
                         RibbonFileMenuService,
-                        RibbonBackstageService
+                        RibbonBackstageService,
+                        RibbonKeyTipService,
+                        RibbonContextualTabService,
+                        RibbonGalleryService
                     ]
                 }]
         }] });
@@ -498,5 +526,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { RibbonAllModule, RibbonBackstageService, RibbonButtonService, RibbonCheckBoxService, RibbonCollectionDirective, RibbonCollectionsDirective, RibbonColorPickerService, RibbonComboBoxService, RibbonComponent, RibbonDropDownService, RibbonFileMenuService, RibbonGroupButtonService, RibbonGroupDirective, RibbonGroupsDirective, RibbonItemDirective, RibbonItemsDirective, RibbonModule, RibbonSplitButtonService, RibbonTabDirective, RibbonTabsDirective };
+export { RibbonAllModule, RibbonBackstageService, RibbonButtonService, RibbonCheckBoxService, RibbonCollectionDirective, RibbonCollectionsDirective, RibbonColorPickerService, RibbonComboBoxService, RibbonComponent, RibbonContextualTabDirective, RibbonContextualTabService, RibbonContextualTabsDirective, RibbonDropDownService, RibbonFileMenuService, RibbonGalleryService, RibbonGroupButtonService, RibbonGroupDirective, RibbonGroupsDirective, RibbonItemDirective, RibbonItemsDirective, RibbonKeyTipService, RibbonModule, RibbonSplitButtonService, RibbonTabDirective, RibbonTabsDirective };
 //# sourceMappingURL=syncfusion-ej2-angular-ribbon.mjs.map