@syncfusion/ej2-angular-ribbon 34.2.8 → 35.1.43

package/CHANGELOG.md

@@ -2,15 +2,11 @@
 
 ## [Unreleased]
 
-## 34.1.31 (2026-07-14)
-
 ### Ribbon
 
 #### Bug Fixes
 
-- `#I831643` - Now the issue with Ribbon component `SplitButton` and `DropdownButton` popups render behind the Angular CDK Dialog overlay has been resolved.
-
-- Now the issue with gallery popup position misalignment in overflow state has been resolved.
+`#I882501` - Now, keytips work properly for all remaining Ribbon instances after one of multiple Ribbon instances, created with `enableKeyTips` enabled, is destroyed.
 
 ## 25.1.35 (2024-03-15)
 

package/{fesm2020 → fesm2022}/syncfusion-ej2-angular-ribbon.mjs

@@ -1,7 +1,7 @@
-import { __decorate } from 'tslib';
 import * as i0 from '@angular/core';
-import { Directive, ContentChild, ContentChildren, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { ContentChild, Directive, ContentChildren, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { ComplexBase, setValue, Template, ArrayBase, ComponentBase, ComponentMixins } from '@syncfusion/ej2-angular-base';
+import { __decorate } from 'tslib';
 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';
@@ -9,6 +9,8 @@ import { CommonModule } from '@angular/common';
 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 {
+    viewContainerRef;
+    directivePropList;
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
@@ -16,24 +18,22 @@ class RibbonItemDirective extends ComplexBase {
         this.registerEvents(outputs$5);
         this.directivePropList = input$4;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonItemDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonItemDirective, isStandalone: true, 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 });
 }
-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", 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);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-item',
                     inputs: input$4,
                     outputs: outputs$5,
-                    queries: {}
+                    standalone: true,
+                    queries: {
+                        itemTemplate: new ContentChild('itemTemplate')
+                    }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; }, propDecorators: { itemTemplate: [{
-                type: ContentChild,
-                args: ['itemTemplate']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+Template()(RibbonItemDirective.prototype, 'itemTemplate');
 /**
  * RibbonItem Array Directive
  * @private
@@ -42,44 +42,48 @@ class RibbonItemsDirective extends ArrayBase {
     constructor() {
         super('items');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonItemsDirective, isStandalone: true, selector: "e-ribbon-items", queries: [{ propertyName: "children", predicate: RibbonItemDirective }], usesInheritance: true, ngImport: i0 });
 }
-RibbonItemsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonItemsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-RibbonItemsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonItemsDirective, selector: "e-ribbon-items", queries: [{ propertyName: "children", predicate: RibbonItemDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonItemsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonItemsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-items',
+                    standalone: true,
                     queries: {
                         children: new ContentChildren(RibbonItemDirective)
                     },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 let input$3 = ['cssClass', 'id', 'items'];
 let outputs$4 = [];
 class RibbonCollectionDirective extends ComplexBase {
+    viewContainerRef;
+    directivePropList;
+    tags = ['items'];
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
-        this.tags = ['items'];
         setValue('currentInstance', this, this.viewContainerRef);
         this.registerEvents(outputs$4);
         this.directivePropList = input$3;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonCollectionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonCollectionDirective, isStandalone: true, selector: "e-ribbon-collection", inputs: { cssClass: "cssClass", id: "id", items: "items" }, queries: [{ propertyName: "childItems", first: true, predicate: RibbonItemsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
 }
-RibbonCollectionDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonCollectionDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-RibbonCollectionDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonCollectionDirective, selector: "e-ribbon-collection", inputs: { cssClass: "cssClass", id: "id", items: "items" }, queries: [{ propertyName: "childItems", first: true, predicate: RibbonItemsDirective, descendants: true }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonCollectionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonCollectionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-collection',
                     inputs: input$3,
                     outputs: outputs$4,
+                    standalone: true,
                     queries: {
                         childItems: new ContentChild(RibbonItemsDirective)
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 /**
  * RibbonCollection Array Directive
  * @private
@@ -88,44 +92,48 @@ class RibbonCollectionsDirective extends ArrayBase {
     constructor() {
         super('collections');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonCollectionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonCollectionsDirective, isStandalone: true, selector: "e-ribbon-collections", queries: [{ propertyName: "children", predicate: RibbonCollectionDirective }], usesInheritance: true, ngImport: i0 });
 }
-RibbonCollectionsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonCollectionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-RibbonCollectionsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonCollectionsDirective, selector: "e-ribbon-collections", queries: [{ propertyName: "children", predicate: RibbonCollectionDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonCollectionsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonCollectionsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-collections',
+                    standalone: true,
                     queries: {
                         children: new ContentChildren(RibbonCollectionDirective)
                     },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 let input$2 = ['collections', 'cssClass', 'enableGroupOverflow', 'groupIconCss', 'header', 'id', 'isCollapsed', 'isCollapsible', 'keyTip', 'launcherIconKeyTip', 'orientation', 'overflowHeader', 'priority', 'showLauncherIcon'];
 let outputs$3 = [];
 class RibbonGroupDirective extends ComplexBase {
+    viewContainerRef;
+    directivePropList;
+    tags = ['collections'];
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
-        this.tags = ['collections'];
         setValue('currentInstance', this, this.viewContainerRef);
         this.registerEvents(outputs$3);
         this.directivePropList = input$2;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonGroupDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonGroupDirective, isStandalone: true, 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 });
 }
-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", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-group',
                     inputs: input$2,
                     outputs: outputs$3,
+                    standalone: true,
                     queries: {
                         childCollections: new ContentChild(RibbonCollectionsDirective)
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 /**
  * RibbonGroup Array Directive
  * @private
@@ -134,44 +142,48 @@ class RibbonGroupsDirective extends ArrayBase {
     constructor() {
         super('groups');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonGroupsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonGroupsDirective, isStandalone: true, selector: "e-ribbon-groups", queries: [{ propertyName: "children", predicate: RibbonGroupDirective }], usesInheritance: true, ngImport: i0 });
 }
-RibbonGroupsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonGroupsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-RibbonGroupsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonGroupsDirective, selector: "e-ribbon-groups", queries: [{ propertyName: "children", predicate: RibbonGroupDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonGroupsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonGroupsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-groups',
+                    standalone: true,
                     queries: {
                         children: new ContentChildren(RibbonGroupDirective)
                     },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 let input$1 = ['cssClass', 'groups', 'header', 'id', 'keyTip'];
 let outputs$2 = [];
 class RibbonTabDirective extends ComplexBase {
+    viewContainerRef;
+    directivePropList;
+    tags = ['groups'];
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
-        this.tags = ['groups'];
         setValue('currentInstance', this, this.viewContainerRef);
         this.registerEvents(outputs$2);
         this.directivePropList = input$1;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonTabDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonTabDirective, isStandalone: true, 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 });
 }
-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", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-tab',
                     inputs: input$1,
                     outputs: outputs$2,
+                    standalone: true,
                     queries: {
                         childGroups: new ContentChild(RibbonGroupsDirective)
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 /**
  * RibbonTab Array Directive
  * @private
@@ -180,18 +192,19 @@ class RibbonTabsDirective extends ArrayBase {
     constructor() {
         super('tabs');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonTabsDirective, isStandalone: true, selector: "e-ribbon-tabs", queries: [{ propertyName: "children", predicate: RibbonTabDirective }], usesInheritance: true, ngImport: i0 });
 }
-RibbonTabsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-RibbonTabsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: RibbonTabsDirective, selector: "e-ribbon-tabs", queries: [{ propertyName: "children", predicate: RibbonTabDirective }], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonTabsDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonTabsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-tabs',
+                    standalone: true,
                     queries: {
                         children: new ContentChildren(RibbonTabDirective)
                     },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 let input = ['isSelected', 'tabs', 'visible'];
 let outputs$1 = [];
@@ -208,28 +221,31 @@ let outputs$1 = [];
  * ```
  */
 class RibbonContextualTabDirective extends ComplexBase {
+    viewContainerRef;
+    directivePropList;
+    tags = ['tabs'];
     constructor(viewContainerRef) {
         super();
         this.viewContainerRef = viewContainerRef;
-        this.tags = ['tabs'];
         setValue('currentInstance', this, this.viewContainerRef);
         this.registerEvents(outputs$1);
         this.directivePropList = input;
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonContextualTabDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonContextualTabDirective, isStandalone: true, 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 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonContextualTabDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-contextual-tab',
                     inputs: input,
                     outputs: outputs$1,
+                    standalone: true,
                     queries: {
                         childTabs: new ContentChild(RibbonTabsDirective)
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ViewContainerRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
 /**
  * RibbonContextualTab Array Directive
  * @private
@@ -238,18 +254,19 @@ class RibbonContextualTabsDirective extends ArrayBase {
     constructor() {
         super('contextualtabs');
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonContextualTabsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.0", type: RibbonContextualTabsDirective, isStandalone: true, selector: "e-ribbon-contextual-tabs", queries: [{ propertyName: "children", predicate: RibbonContextualTabDirective }], usesInheritance: true, ngImport: i0 });
 }
-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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonContextualTabsDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'e-ribbon-contextual-tabs',
+                    standalone: true,
                     queries: {
                         children: new ContentChildren(RibbonContextualTabDirective)
                     },
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 
 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', 'ribbonLayoutSwitched', 'tabSelected', 'tabSelecting'];
@@ -261,13 +278,17 @@ const twoWays = [''];
  * ```
  */
 let RibbonComponent = class RibbonComponent extends Ribbon {
+    ngEle;
+    srenderer;
+    viewContainerRef;
+    injector;
+    tags = ['tabs', 'contextualTabs'];
     constructor(ngEle, srenderer, viewContainerRef, injector) {
         super();
         this.ngEle = ngEle;
         this.srenderer = srenderer;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
-        this.tags = ['tabs', 'contextualTabs'];
         this.element = this.ngEle.nativeElement;
         this.injectedModules = this.injectedModules || [];
         try {
@@ -375,16 +396,13 @@ let RibbonComponent = class RibbonComponent extends Ribbon {
         }
         this.containerContext.ngAfterContentChecked(this);
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.0", type: RibbonComponent, isStandalone: true, 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", ribbonLayoutSwitched: "ribbonLayoutSwitched", tabSelected: "tabSelected", tabSelecting: "tabSelecting" }, queries: [{ propertyName: "childTabs", first: true, predicate: RibbonTabsDirective, descendants: true }, { propertyName: "childContextualTabs", first: true, predicate: RibbonContextualTabsDirective, descendants: true }, { propertyName: "helpPaneTemplate", first: true, predicate: ["helpPaneTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select='div'></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 };
-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", 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", ribbonLayoutSwitched: "ribbonLayoutSwitched", 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);
 RibbonComponent = __decorate([
     ComponentMixins([ComponentBase])
 ], RibbonComponent);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ejs-ribbon',
@@ -392,74 +410,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImpor
                     outputs: outputs,
                     template: `<ng-content select='div'></ng-content>`,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
                     queries: {
                         childTabs: new ContentChild(RibbonTabsDirective),
-                        childContextualTabs: new ContentChild(RibbonContextualTabsDirective)
+                        childContextualTabs: new ContentChild(RibbonContextualTabsDirective),
+                        helpPaneTemplate: new ContentChild('helpPaneTemplate')
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { helpPaneTemplate: [{
-                type: ContentChild,
-                args: ['helpPaneTemplate']
-            }] } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ViewContainerRef }, { type: i0.Injector }] });
+Template()(RibbonComponent.prototype, 'helpPaneTemplate');
 
+const RIBBON_DIRECTIVES = [
+    RibbonComponent,
+    RibbonItemDirective,
+    RibbonItemsDirective,
+    RibbonCollectionDirective,
+    RibbonCollectionsDirective,
+    RibbonGroupDirective,
+    RibbonGroupsDirective,
+    RibbonTabDirective,
+    RibbonTabsDirective,
+    RibbonContextualTabDirective,
+    RibbonContextualTabsDirective
+];
 /**
  * NgModule definition for the Ribbon component.
+ * Re-exports standalone Ribbon component and directives so existing apps can keep using:
+ * `imports: [RibbonModule]`
  */
 class RibbonModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: RibbonModule, imports: [CommonModule, RibbonComponent,
+            RibbonItemDirective,
+            RibbonItemsDirective,
+            RibbonCollectionDirective,
+            RibbonCollectionsDirective,
+            RibbonGroupDirective,
+            RibbonGroupsDirective,
+            RibbonTabDirective,
+            RibbonTabsDirective,
+            RibbonContextualTabDirective,
+            RibbonContextualTabsDirective], exports: [RibbonComponent,
+            RibbonItemDirective,
+            RibbonItemsDirective,
+            RibbonCollectionDirective,
+            RibbonCollectionsDirective,
+            RibbonGroupDirective,
+            RibbonGroupsDirective,
+            RibbonTabDirective,
+            RibbonTabsDirective,
+            RibbonContextualTabDirective,
+            RibbonContextualTabsDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonModule, imports: [CommonModule] });
 }
-RibbonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RibbonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonModule, declarations: [RibbonComponent,
-        RibbonItemDirective,
-        RibbonItemsDirective,
-        RibbonCollectionDirective,
-        RibbonCollectionsDirective,
-        RibbonGroupDirective,
-        RibbonGroupsDirective,
-        RibbonTabDirective,
-        RibbonTabsDirective,
-        RibbonContextualTabDirective,
-        RibbonContextualTabsDirective], imports: [CommonModule], exports: [RibbonComponent,
-        RibbonItemDirective,
-        RibbonItemsDirective,
-        RibbonCollectionDirective,
-        RibbonCollectionsDirective,
-        RibbonGroupDirective,
-        RibbonGroupsDirective,
-        RibbonTabDirective,
-        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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
-                    declarations: [
-                        RibbonComponent,
-                        RibbonItemDirective,
-                        RibbonItemsDirective,
-                        RibbonCollectionDirective,
-                        RibbonCollectionsDirective,
-                        RibbonGroupDirective,
-                        RibbonGroupsDirective,
-                        RibbonTabDirective,
-                        RibbonTabsDirective,
-                        RibbonContextualTabDirective,
-                        RibbonContextualTabsDirective
-                    ],
-                    exports: [
-                        RibbonComponent,
-                        RibbonItemDirective,
-                        RibbonItemsDirective,
-                        RibbonCollectionDirective,
-                        RibbonCollectionsDirective,
-                        RibbonGroupDirective,
-                        RibbonGroupsDirective,
-                        RibbonTabDirective,
-                        RibbonTabsDirective,
-                        RibbonContextualTabDirective,
-                        RibbonContextualTabsDirective
-                    ]
+                    imports: [CommonModule, ...RIBBON_DIRECTIVES],
+                    exports: [...RIBBON_DIRECTIVES]
                 }]
         }] });
 
@@ -479,24 +487,24 @@ const RibbonGalleryService = { provide: 'RibbonRibbonGallery', useValue: RibbonG
  * NgModule definition for the Ribbon component with providers.
  */
 class RibbonAllModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.0", ngImport: i0, type: RibbonAllModule, imports: [CommonModule, RibbonModule], exports: [RibbonModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonAllModule, providers: [
+            RibbonButtonService,
+            RibbonDropDownService,
+            RibbonSplitButtonService,
+            RibbonCheckBoxService,
+            RibbonColorPickerService,
+            RibbonComboBoxService,
+            RibbonGroupButtonService,
+            RibbonFileMenuService,
+            RibbonBackstageService,
+            RibbonKeyTipService,
+            RibbonContextualTabService,
+            RibbonGalleryService
+        ], imports: [CommonModule, RibbonModule, RibbonModule] });
 }
-RibbonAllModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonAllModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RibbonAllModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonAllModule, imports: [CommonModule, RibbonModule], exports: [RibbonModule] });
-RibbonAllModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonAllModule, providers: [
-        RibbonButtonService,
-        RibbonDropDownService,
-        RibbonSplitButtonService,
-        RibbonCheckBoxService,
-        RibbonColorPickerService,
-        RibbonComboBoxService,
-        RibbonGroupButtonService,
-        RibbonFileMenuService,
-        RibbonBackstageService,
-        RibbonKeyTipService,
-        RibbonContextualTabService,
-        RibbonGalleryService
-    ], imports: [[CommonModule, RibbonModule], RibbonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: RibbonAllModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonAllModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, RibbonModule],