@syncfusion/ej2-angular-ribbon 34.2.8-ngcc → 35.1.37

package/CHANGELOG.md

@@ -0,0 +1,93 @@
+# Changelog
+
+## [Unreleased]
+
+## 25.1.35 (2024-03-15)
+
+### Ribbon
+
+#### Features
+
+- **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/angular/demos/#/material3/ribbon/gallery).
+
+- **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/angular/demos/#/material3/ribbon/contextual).
+
+- **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/angular/demos/#/material3/ribbon/keytip).
+
+## 24.1.41 (2023-12-18)
+
+### Ribbon
+
+#### Features
+
+- Enhanced the popups UI with added label/header support for items displayed in overflow popups. Check out the demo [here](https://ej2.syncfusion.com/angular/demos/#/material3/ribbon/resize).
+
+#### Bug Fixes
+
+- `#F185735` - Issue with 'selected' property not updating properly when selecting an item from Ribbon GroupButton has been resolved.
+
+## 23.2.7 (2023-12-05)
+
+### Ribbon
+
+#### Features
+
+`#I512188` - Provided overflow popup open/close event support for the Ribbon overflow popup.
+
+## 23.2.5 (2023-11-23)
+
+### Ribbon
+
+#### Bug Fixes
+
+`#I516350` - Now the issue with overflow popup button when the items showing inside are in hidden state has been resolved.
+
+## 23.1.44 (2023-11-07)
+
+### Ribbon
+
+#### Bug Fixes
+
+`#I509963` - Now the issue with hide/disable method not working properly with the tab items that are not loaded in initial rendering has been resolved.
+
+`#I510661` - Now the script issue raised with the createPopupOnClick property enabled in the dropdown item overflow popup has been resolved.
+
+## 23.1.43 (2023-10-31)
+
+### Ribbon
+
+#### Features
+
+`#I510343` - Provided custom HTML attributes support for the Ribbon items
+
+## 23.1.38 (2023-09-26)
+
+### Ribbon
+
+#### Bug Fixes
+
+`#I499031` - Now, the issue with overflow popup items are arranged in reversal order when being resized is resolved.
+
+## 21.1.35 (2023-03-23)
+
+### Ribbon
+
+The Ribbon provides a structured and easy-to-use user interface for users to access different features and functions through series of tabs, improving user experience and efficiency.
+
+**Key features**
+
+- **Built-in items** - Several built-in support items, such as buttons, checkboxes, drop-down buttons, split buttons, combo boxes, and color pickers that can be customized and used to execute specific actions.
+
+- **Modes** - Offers the classic mode that organizes items and groups in a traditional form, and simplified mode that organizes items and groups into a single row for improved usability and reduced clutter.
+
+- **Tooltip** - Provide additional information when a user hovers over a ribbon item, improving user experience and increasing the usability of the application.
+
+- **File menu** - A built-in menu that to add file related actions easily.
+
+- **Templates** - Customize ribbon items and the help pane content using templates.

package/README.md

@@ -1,5 +1,19 @@
 # Angular Ribbon Component
 
+> **Using this package with an AI coding agent**
+>
+> Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
+>
+> ```text
+> Set up this project for Syncfusion before generating code. Fetch
+> and follow the official instructions at https://ai.syncfusion.com,
+> then report the detected platform, installed skill pack, MCP
+> status, and any required licensing action.
+> ```
+> The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
+>
+> **Platform reference:** [https://ai.syncfusion.com/angular/llms.txt](https://ai.syncfusion.com/angular/llms.txt)
+
 The [Angular Ribbon](https://www.syncfusion.com/angular-components/angular-ribbon?utm_source=npm&utm_medium=listing&utm_campaign=angular-navigation-npm) component provides a structured and easy-to-use user interface for users to access different features and functions through series of tabs, improving the overall user experience and making your application more efficient.
 
 <p align="center">

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

@@ -0,0 +1,536 @@
+import * as i0 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';
+
+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;
+        setValue('currentInstance', this, this.viewContainerRef);
+        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 });
+}
+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,
+                    standalone: true,
+                    queries: {
+                        itemTemplate: new ContentChild('itemTemplate')
+                    }
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }] });
+Template()(RibbonItemDirective.prototype, 'itemTemplate');
+/**
+ * RibbonItem Array Directive
+ * @private
+ */
+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 });
+}
+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: () => [] });
+
+let input$3 = ['cssClass', 'id', 'items'];
+let outputs$4 = [];
+class RibbonCollectionDirective extends ComplexBase {
+    viewContainerRef;
+    directivePropList;
+    tags = ['items'];
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        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 });
+}
+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: () => [{ type: i0.ViewContainerRef }] });
+/**
+ * RibbonCollection Array Directive
+ * @private
+ */
+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 });
+}
+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: () => [] });
+
+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;
+        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 });
+}
+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: () => [{ type: i0.ViewContainerRef }] });
+/**
+ * RibbonGroup Array Directive
+ * @private
+ */
+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 });
+}
+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: () => [] });
+
+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;
+        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 });
+}
+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: () => [{ type: i0.ViewContainerRef }] });
+/**
+ * RibbonTab Array Directive
+ * @private
+ */
+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 });
+}
+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: () => [] });
+
+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 {
+    viewContainerRef;
+    directivePropList;
+    tags = ['tabs'];
+    constructor(viewContainerRef) {
+        super();
+        this.viewContainerRef = viewContainerRef;
+        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 });
+}
+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: () => [{ type: i0.ViewContainerRef }] });
+/**
+ * RibbonContextualTab Array Directive
+ * @private
+ */
+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 });
+}
+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: () => [] });
+
+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'];
+const twoWays = [''];
+/**
+ * Represents the Essential JS 2 Angular Ribbon Component.
+ * ```html
+ * <ejs-ribbon></ejs-ribbon>
+ * ```
+ */
+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.element = this.ngEle.nativeElement;
+        this.injectedModules = this.injectedModules || [];
+        try {
+            let mod = this.injector.get('RibbonRibbonButton');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonDropDown');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonSplitButton');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonCheckBox');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonColorPicker');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonComboBox');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonGroupButton');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonFileMenu');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        catch { }
+        try {
+            let mod = this.injector.get('RibbonRibbonBackstage');
+            if (this.injectedModules.indexOf(mod) === -1) {
+                this.injectedModules.push(mod);
+            }
+        }
+        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);
+        this.containerContext = new ComponentBase();
+    }
+    ngOnInit() {
+        this.containerContext.ngOnInit(this);
+    }
+    ngAfterViewInit() {
+        this.containerContext.ngAfterViewInit(this);
+    }
+    ngOnDestroy() {
+        this.containerContext.ngOnDestroy(this);
+    }
+    ngAfterContentChecked() {
+        this.tagObjects[0].instance = this.childTabs;
+        if (this.childContextualTabs) {
+            this.tagObjects[1].instance = this.childContextualTabs;
+        }
+        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 = __decorate([
+    ComponentMixins([ComponentBase])
+], RibbonComponent);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ejs-ribbon',
+                    inputs: inputs,
+                    outputs: outputs,
+                    template: `<ng-content select='div'></ng-content>`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    standalone: true,
+                    queries: {
+                        childTabs: new ContentChild(RibbonTabsDirective),
+                        childContextualTabs: new ContentChild(RibbonContextualTabsDirective),
+                        helpPaneTemplate: new ContentChild('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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...RIBBON_DIRECTIVES],
+                    exports: [...RIBBON_DIRECTIVES]
+                }]
+        }] });
+
+const RibbonButtonService = { provide: 'RibbonRibbonButton', useValue: RibbonButton };
+const RibbonDropDownService = { provide: 'RibbonRibbonDropDown', useValue: RibbonDropDown };
+const RibbonSplitButtonService = { provide: 'RibbonRibbonSplitButton', useValue: RibbonSplitButton };
+const RibbonCheckBoxService = { provide: 'RibbonRibbonCheckBox', useValue: RibbonCheckBox };
+const RibbonColorPickerService = { provide: 'RibbonRibbonColorPicker', useValue: RibbonColorPicker };
+const RibbonComboBoxService = { provide: 'RibbonRibbonComboBox', useValue: RibbonComboBox };
+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.
+ */
+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] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.0", ngImport: i0, type: RibbonAllModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, RibbonModule],
+                    exports: [
+                        RibbonModule
+                    ],
+                    providers: [
+                        RibbonButtonService,
+                        RibbonDropDownService,
+                        RibbonSplitButtonService,
+                        RibbonCheckBoxService,
+                        RibbonColorPickerService,
+                        RibbonComboBoxService,
+                        RibbonGroupButtonService,
+                        RibbonFileMenuService,
+                        RibbonBackstageService,
+                        RibbonKeyTipService,
+                        RibbonContextualTabService,
+                        RibbonGalleryService
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+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