@syncfusion/ej2-angular-ribbon 24.2.8-ngcc → 25.1.35-ngcc

package/README.md

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

package/dist/ej2-angular-ribbon.umd.js

@@ -1,6 +1,6 @@
 /*!
 *  filename: ej2-angular-ribbon.umd.js
-*  version : 24.2.8
+*  version : 25.1.35
 *  Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing
@@ -37,32 +37,8 @@ var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var input = ['activeSize', 'allowedSizes', 'buttonSettings', 'checkBoxSettings', 'colorPickerSettings', 'comboBoxSettings', 'cssClass', 'disabled', 'displayOptions', 'dropDownSettings', 'groupButtonSettings', 'id', 'itemTemplate', 'ribbonTooltipSettings', 'splitButtonSettings', 'type'];
+var input = ['activeSize', 'allowedSizes', 'buttonSettings', 'checkBoxSettings', 'colorPickerSettings', 'comboBoxSettings', 'cssClass', 'disabled', 'displayOptions', 'dropDownSettings', 'gallerySettings', 'groupButtonSettings', 'id', 'itemTemplate', 'keyTip', 'ribbonTooltipSettings', 'splitButtonSettings', 'type'];
 var outputs = [];
-/**
- * `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>
- * ```
- */
 var RibbonItemDirective = /** @class */ (function (_super) {
     __extends(RibbonItemDirective, _super);
     /**
@@ -123,26 +99,6 @@ RibbonItemsDirective.decorators = [
 RibbonItemsDirective.ctorParameters = function () { return []; };
 var input$1 = ['cssClass', 'id', 'items'];
 var outputs$1 = [];
-/**
- * `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>
- * ```
- */
 var RibbonCollectionDirective = /** @class */ (function (_super) {
     __extends(RibbonCollectionDirective, _super);
     /**
@@ -197,24 +153,8 @@ RibbonCollectionsDirective.decorators = [
  * @nocollapse
  */
 RibbonCollectionsDirective.ctorParameters = function () { return []; };
-var input$2 = ['collections', 'cssClass', 'enableGroupOverflow', 'groupIconCss', 'header', 'id', 'isCollapsed', 'isCollapsible', 'orientation', 'overflowHeader', 'priority', 'showLauncherIcon'];
+var input$2 = ['collections', 'cssClass', 'enableGroupOverflow', 'groupIconCss', 'header', 'id', 'isCollapsed', 'isCollapsible', 'keyTip', 'launcherIconKeyTip', 'orientation', 'overflowHeader', 'priority', 'showLauncherIcon'];
 var 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>
- * ```
- */
 var RibbonGroupDirective = /** @class */ (function (_super) {
     __extends(RibbonGroupDirective, _super);
     /**
@@ -269,20 +209,8 @@ RibbonGroupsDirective.decorators = [
  * @nocollapse
  */
 RibbonGroupsDirective.ctorParameters = function () { return []; };
-var input$3 = ['cssClass', 'groups', 'header', 'id'];
+var input$3 = ['cssClass', 'groups', 'header', 'id', 'keyTip'];
 var outputs$3 = [];
-/**
- * `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>
- * ```
- */
 var RibbonTabDirective = /** @class */ (function (_super) {
     __extends(RibbonTabDirective, _super);
     /**
@@ -337,6 +265,74 @@ RibbonTabsDirective.decorators = [
  * @nocollapse
  */
 RibbonTabsDirective.ctorParameters = function () { return []; };
+var input$4 = ['isSelected', 'tabs', 'visible'];
+var outputs$4 = [];
+/**
+ * `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>
+ * ```
+ */
+var RibbonContextualTabDirective = /** @class */ (function (_super) {
+    __extends(RibbonContextualTabDirective, _super);
+    /**
+     * @param {?} viewContainerRef
+     */
+    function RibbonContextualTabDirective(viewContainerRef) {
+        var _this = _super.call(this) || this;
+        _this.viewContainerRef = viewContainerRef;
+        _this.tags = ['tabs'];
+        ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
+        _this.registerEvents(outputs$4);
+        _this.directivePropList = input$4;
+        return _this;
+    }
+    return RibbonContextualTabDirective;
+}(ej2AngularBase.ComplexBase));
+RibbonContextualTabDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-ribbon-contextual-tab',
+                inputs: input$4,
+                outputs: outputs$4,
+                queries: {
+                    childTabs: new core.ContentChild(RibbonTabsDirective)
+                }
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RibbonContextualTabDirective.ctorParameters = function () { return [
+    { type: core.ViewContainerRef, },
+]; };
+/**
+ * RibbonContextualTab Array Directive
+ */
+var RibbonContextualTabsDirective = /** @class */ (function (_super) {
+    __extends(RibbonContextualTabsDirective, _super);
+    function RibbonContextualTabsDirective() {
+        return _super.call(this, 'contextualtabs') || this;
+    }
+    return RibbonContextualTabsDirective;
+}(ej2AngularBase.ArrayBase));
+RibbonContextualTabsDirective.decorators = [
+    { type: core.Directive, args: [{
+                selector: 'e-ribbon-contextual-tabs',
+                queries: {
+                    children: new core.ContentChildren(RibbonContextualTabDirective)
+                },
+            },] },
+];
+/**
+ * @nocollapse
+ */
+RibbonContextualTabsDirective.ctorParameters = function () { return []; };
 var __decorate$1 = (this && this.__decorate) || function (decorators, target, key, desc) {
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
@@ -351,8 +347,8 @@ var __metadata$1 = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
         return Reflect.metadata(k, v);
 };
-var inputs = ['activeLayout', 'backStageMenu', 'cssClass', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width'];
-var outputs$4 = ['created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
+var inputs = ['activeLayout', 'backStageMenu', 'contextualTabs', 'cssClass', 'enableKeyTips', 'enablePersistence', 'enableRtl', 'fileMenu', 'helpPaneTemplate', 'hideLayoutSwitcher', 'isMinimized', 'launcherIconCss', 'layoutSwitcherKeyTip', 'locale', 'selectedTab', 'tabAnimation', 'tabs', 'width'];
+var outputs$5 = ['created', 'launcherIconClick', 'overflowPopupClose', 'overflowPopupOpen', 'ribbonCollapsing', 'ribbonExpanding', 'tabSelected', 'tabSelecting'];
 var twoWays = [''];
 /**
  * Represents the Essential JS 2 Angular Ribbon Component.
@@ -374,7 +370,7 @@ exports.RibbonComponent = /** @class */ (function (_super) {
         _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 {
@@ -440,7 +436,28 @@ exports.RibbonComponent = /** @class */ (function (_super) {
             }
         }
         catch (_j) { }
-        _this.registerEvents(outputs$4);
+        try {
+            var mod = _this.injector.get('RibbonRibbonKeyTip');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_k) { }
+        try {
+            var mod = _this.injector.get('RibbonRibbonContextualTab');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_l) { }
+        try {
+            var mod = _this.injector.get('RibbonRibbonGallery');
+            if (_this.injectedModules.indexOf(mod) === -1) {
+                _this.injectedModules.push(mod);
+            }
+        }
+        catch (_m) { }
+        _this.registerEvents(outputs$5);
         _this.addTwoWay.call(_this, twoWays);
         ej2AngularBase.setValue('currentInstance', _this, _this.viewContainerRef);
         _this.containerContext = new ej2AngularBase.ComponentBase();
@@ -469,6 +486,9 @@ exports.RibbonComponent = /** @class */ (function (_super) {
      */
     RibbonComponent.prototype.ngAfterContentChecked = function () {
         this.tagObjects[0].instance = this.childTabs;
+        if (this.childContextualTabs) {
+            this.tagObjects[1].instance = /** @type {?} */ (this.childContextualTabs);
+        }
         this.containerContext.ngAfterContentChecked(this);
     };
     return RibbonComponent;
@@ -477,11 +497,12 @@ exports.RibbonComponent.decorators = [
     { type: core.Component, args: [{
                 selector: 'ejs-ribbon',
                 inputs: inputs,
-                outputs: outputs$4,
+                outputs: outputs$5,
                 template: "<ng-content select='div'></ng-content>",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 queries: {
-                    childTabs: new core.ContentChild(RibbonTabsDirective)
+                    childTabs: new core.ContentChild(RibbonTabsDirective),
+                    childContextualTabs: new core.ContentChild(RibbonContextualTabsDirective)
                 }
             },] },
 ];
@@ -528,7 +549,9 @@ RibbonModule.decorators = [
                     RibbonGroupDirective,
                     RibbonGroupsDirective,
                     RibbonTabDirective,
-                    RibbonTabsDirective
+                    RibbonTabsDirective,
+                    RibbonContextualTabDirective,
+                    RibbonContextualTabsDirective
                 ],
                 exports: [
                     exports.RibbonComponent,
@@ -539,7 +562,9 @@ RibbonModule.decorators = [
                     RibbonGroupDirective,
                     RibbonGroupsDirective,
                     RibbonTabDirective,
-                    RibbonTabsDirective
+                    RibbonTabsDirective,
+                    RibbonContextualTabDirective,
+                    RibbonContextualTabsDirective
                 ]
             },] },
 ];
@@ -556,6 +581,9 @@ var RibbonComboBoxService = { provide: 'RibbonRibbonComboBox', useValue: ej2Ribb
 var RibbonGroupButtonService = { provide: 'RibbonRibbonGroupButton', useValue: ej2Ribbon.RibbonGroupButton };
 var RibbonFileMenuService = { provide: 'RibbonRibbonFileMenu', useValue: ej2Ribbon.RibbonFileMenu };
 var RibbonBackstageService = { provide: 'RibbonRibbonBackstage', useValue: ej2Ribbon.RibbonBackstage };
+var RibbonKeyTipService = { provide: 'RibbonRibbonKeyTip', useValue: ej2Ribbon.RibbonKeyTip };
+var RibbonContextualTabService = { provide: 'RibbonRibbonContextualTab', useValue: ej2Ribbon.RibbonContextualTab };
+var RibbonGalleryService = { provide: 'RibbonRibbonGallery', useValue: ej2Ribbon.RibbonGallery };
 /**
  * NgModule definition for the Ribbon component with providers.
  */
@@ -579,7 +607,10 @@ RibbonAllModule.decorators = [
                     RibbonComboBoxService,
                     RibbonGroupButtonService,
                     RibbonFileMenuService,
-                    RibbonBackstageService
+                    RibbonBackstageService,
+                    RibbonKeyTipService,
+                    RibbonContextualTabService,
+                    RibbonGalleryService
                 ]
             },] },
 ];
@@ -596,6 +627,8 @@ exports.RibbonGroupDirective = RibbonGroupDirective;
 exports.RibbonGroupsDirective = RibbonGroupsDirective;
 exports.RibbonTabDirective = RibbonTabDirective;
 exports.RibbonTabsDirective = RibbonTabsDirective;
+exports.RibbonContextualTabDirective = RibbonContextualTabDirective;
+exports.RibbonContextualTabsDirective = RibbonContextualTabsDirective;
 exports.RibbonModule = RibbonModule;
 exports.RibbonAllModule = RibbonAllModule;
 exports.RibbonButtonService = RibbonButtonService;
@@ -607,8 +640,11 @@ exports.RibbonComboBoxService = RibbonComboBoxService;
 exports.RibbonGroupButtonService = RibbonGroupButtonService;
 exports.RibbonFileMenuService = RibbonFileMenuService;
 exports.RibbonBackstageService = RibbonBackstageService;
+exports.RibbonKeyTipService = RibbonKeyTipService;
+exports.RibbonContextualTabService = RibbonContextualTabService;
+exports.RibbonGalleryService = RibbonGalleryService;
 exports.ɵa = inputs;
-exports.ɵb = outputs$4;
+exports.ɵb = outputs$5;
 exports.Ribbon = ej2Ribbon.Ribbon;
 exports.RibbonLayout = ej2Ribbon.RibbonLayout;
 exports.ItemOrientation = ej2Ribbon.ItemOrientation;
@@ -627,10 +663,12 @@ exports.RIBBON_HOVER = ej2Ribbon.RIBBON_HOVER;
 exports.RIBBON_CONTROL = ej2Ribbon.RIBBON_CONTROL;
 exports.RIBBON_POPUP_CONTROL = ej2Ribbon.RIBBON_POPUP_CONTROL;
 exports.RIBBON_POPUP_OPEN = ej2Ribbon.RIBBON_POPUP_OPEN;
+exports.RIBBON_KEYTIP = ej2Ribbon.RIBBON_KEYTIP;
 exports.SPACE = ej2Ribbon.SPACE;
 exports.HORIZONTAL_SCROLLBAR = ej2Ribbon.HORIZONTAL_SCROLLBAR;
 exports.HIDE_CSS = ej2Ribbon.HIDE_CSS;
 exports.RIBBON_TAB = ej2Ribbon.RIBBON_TAB;
+exports.RIBBON_CONTEXTUAL_TAB = ej2Ribbon.RIBBON_CONTEXTUAL_TAB;
 exports.RIBBON_TAB_ACTIVE = ej2Ribbon.RIBBON_TAB_ACTIVE;
 exports.RIBBON_TAB_ITEM = ej2Ribbon.RIBBON_TAB_ITEM;
 exports.RIBBON_COLLAPSE_BUTTON = ej2Ribbon.RIBBON_COLLAPSE_BUTTON;
@@ -647,6 +685,7 @@ exports.RIBBON_SINGLE_BUTTON_SELECTION = ej2Ribbon.RIBBON_SINGLE_BUTTON_SELECTIO
 exports.RIBBON_MULTIPLE_BUTTON_SELECTION = ej2Ribbon.RIBBON_MULTIPLE_BUTTON_SELECTION;
 exports.RIBBON_GROUP_BUTTON = ej2Ribbon.RIBBON_GROUP_BUTTON;
 exports.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = ej2Ribbon.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP;
+exports.RIBBON_GROUP_BUTTON_CONTENT = ej2Ribbon.RIBBON_GROUP_BUTTON_CONTENT;
 exports.RIBBON_GROUP_CONTAINER = ej2Ribbon.RIBBON_GROUP_CONTAINER;
 exports.RIBBON_OF_TAB_CONTAINER = ej2Ribbon.RIBBON_OF_TAB_CONTAINER;
 exports.RIBBON_OF_GROUP_CONTAINER = ej2Ribbon.RIBBON_OF_GROUP_CONTAINER;
@@ -709,6 +748,7 @@ exports.RIBBON_MENU_LIST = ej2Ribbon.RIBBON_MENU_LIST;
 exports.RIBBON_FOOTER_MENU_LIST = ej2Ribbon.RIBBON_FOOTER_MENU_LIST;
 exports.RIBBON_HELP_PANE_TEMPLATE_ID = ej2Ribbon.RIBBON_HELP_PANE_TEMPLATE_ID;
 exports.RIBBON_GROUP_BUTTON_ID = ej2Ribbon.RIBBON_GROUP_BUTTON_ID;
+exports.RIBBON_KEYTIP_ID = ej2Ribbon.RIBBON_KEYTIP_ID;
 exports.RIBBON_FILE_MENU_WIDTH = ej2Ribbon.RIBBON_FILE_MENU_WIDTH;
 exports.RIBBON_HELP_PANE_TEMPLATE_WIDTH = ej2Ribbon.RIBBON_HELP_PANE_TEMPLATE_WIDTH;
 exports.getIndex = ej2Ribbon.getIndex;
@@ -743,6 +783,10 @@ exports.BackstageItem = ej2Ribbon.BackstageItem;
 exports.RibbonTooltip = ej2Ribbon.RibbonTooltip;
 exports.RibbonGroupButtonSettings = ej2Ribbon.RibbonGroupButtonSettings;
 exports.RibbonGroupButtonItem = ej2Ribbon.RibbonGroupButtonItem;
+exports.RibbonContextualTabSettings = ej2Ribbon.RibbonContextualTabSettings;
+exports.RibbonGalleryGroup = ej2Ribbon.RibbonGalleryGroup;
+exports.RibbonGalleryItem = ej2Ribbon.RibbonGalleryItem;
+exports.RibbonGallerySettings = ej2Ribbon.RibbonGallerySettings;
 exports.RibbonButton = ej2Ribbon.RibbonButton;
 exports.RibbonCheckBox = ej2Ribbon.RibbonCheckBox;
 exports.RibbonColorPicker = ej2Ribbon.RibbonColorPicker;
@@ -750,8 +794,11 @@ exports.RibbonComboBox = ej2Ribbon.RibbonComboBox;
 exports.RibbonDropDown = ej2Ribbon.RibbonDropDown;
 exports.RibbonSplitButton = ej2Ribbon.RibbonSplitButton;
 exports.RibbonGroupButton = ej2Ribbon.RibbonGroupButton;
+exports.RibbonGallery = ej2Ribbon.RibbonGallery;
 exports.RibbonFileMenu = ej2Ribbon.RibbonFileMenu;
 exports.RibbonBackstage = ej2Ribbon.RibbonBackstage;
+exports.RibbonContextualTab = ej2Ribbon.RibbonContextualTab;
+exports.RibbonKeyTip = ej2Ribbon.RibbonKeyTip;
 
 Object.defineProperty(exports, '__esModule', { value: true });