@syncfusion/ej2-ribbon 26.1.38 → 26.1.41

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 26.1.38
+*  version : 26.1.41
 *  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

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-ribbon@*",
-  "_id": "@syncfusion/ej2-ribbon@26.1.35",
+  "_id": "@syncfusion/ej2-ribbon@26.1.40",
   "_inBundle": false,
-  "_integrity": "sha512-tpMb40AqnWhXg2gQ+viQcCf2qNh4cJAG6C49T7mAONNzyEQ5JLL5I2QcH4kR7TxIqViazMA5cLmY1G+gWr+f+A==",
+  "_integrity": "sha512-fhwFQoEoGE07k2AAKX5WrdTgCNukNypTmyEHSDlN3GG55+Ll+DwKOmUdcH9cNIsUvUZ5N8KLwrL2ZNj2IhIasQ==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-26.1.35.tgz",
-  "_shasum": "81ed756f8413d14cad84c417974451321f3ac5c4",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-26.1.40.tgz",
+  "_shasum": "ce5e44a2feec5115d91aedb0417b8e1ebacb42a9",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_26.1.1/packages/included",
   "author": {
@@ -36,11 +36,11 @@
   "bundleDependencies": false,
   "dependencies": {
     "@syncfusion/ej2-base": "~26.1.37",
-    "@syncfusion/ej2-buttons": "~26.1.35",
-    "@syncfusion/ej2-dropdowns": "~26.1.38",
+    "@syncfusion/ej2-buttons": "~26.1.40",
+    "@syncfusion/ej2-dropdowns": "~26.1.41",
     "@syncfusion/ej2-lists": "~26.1.35",
-    "@syncfusion/ej2-navigations": "~26.1.38",
-    "@syncfusion/ej2-popups": "~26.1.38",
+    "@syncfusion/ej2-navigations": "~26.1.41",
+    "@syncfusion/ej2-popups": "~26.1.41",
     "@syncfusion/ej2-splitbuttons": "~26.1.35"
   },
   "deprecated": false,
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "26.1.38",
+  "version": "26.1.41",
   "sideEffects": false
 }

package/src/ribbon/base/interface.d.ts

@@ -173,6 +173,19 @@ export interface ExpandCollapseEventArgs extends BaseEventArgs {
      */
     cancel: boolean;
 }
+/**
+ * Event triggers when the ribbon layout is switched.
+ */
+export interface LayoutSwitchedEventArgs extends BaseEventArgs {
+    /**
+     *  Specifies the active layout of the ribbon.
+     */
+    activeLayout: string;
+    /**
+     *  Provides the actual native event.
+     */
+    event: Event;
+}
 /**
  * Event Triggers when the launcher icon is clicked.
  */

package/src/ribbon/base/ribbon-model.d.ts

@@ -1,4 +1,4 @@
-import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
+import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest, KeyboardEventArgs, KeyboardEvents } from '@syncfusion/ej2-base';import { INotifyPropertyChanged, isNullOrUndefined, isUndefined, ModuleDeclaration, NotifyPropertyChanges, Property, remove, removeClass } from '@syncfusion/ej2-base';import { Tab, TabAnimationSettings, TabAnimationSettingsModel, TabItemModel, SelectEventArgs, SelectingEventArgs, HScroll, Toolbar } from '@syncfusion/ej2-navigations';import { RibbonTab, RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettings, FileMenuSettingsModel, BackStageMenu, BackStageMenuModel, RibbonItem, RibbonCollection, RibbonGroup, RibbonContextualTabSettingsModel, RibbonContextualTabSettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType, KeyTipDataType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';import * as constants from './constant';import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -157,6 +157,13 @@ export interface RibbonModel extends ComponentModel{
      */
     ribbonCollapsing?: EmitType<ExpandCollapseEventArgs>;
 
+    /**
+     * Event triggers when the ribbon layout is switched.
+     *
+     * @event ribbonLayoutSwitched
+     */
+    ribbonLayoutSwitched?: EmitType<LayoutSwitchedEventArgs>;
+
     /**
      * Event triggers when the launcher icon of the group is clicked.
      *

package/src/ribbon/base/ribbon.d.ts

@@ -3,7 +3,7 @@ import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base'
 import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
 import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel, RibbonContextualTabSettingsModel } from '../models/index';
 import { RibbonModel } from './ribbon-model';
-import { ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
+import { ExpandCollapseEventArgs, LauncherClickEventArgs, LayoutSwitchedEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
 import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
 import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
@@ -144,6 +144,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
      * @event ribbonCollapsing
      */
     ribbonCollapsing: EmitType<ExpandCollapseEventArgs>;
+    /**
+     * Event triggers when the ribbon layout is switched.
+     *
+     * @event ribbonLayoutSwitched
+     */
+    ribbonLayoutSwitched: EmitType<LayoutSwitchedEventArgs>;
     /**
      * Event triggers when the launcher icon of the group is clicked.
      *

package/src/ribbon/base/ribbon.js

@@ -556,9 +556,11 @@ var Ribbon = /** @class */ (function (_super) {
             }
         });
     };
-    Ribbon.prototype.toggleLayout = function () {
+    Ribbon.prototype.toggleLayout = function (args) {
         this.setProperties({ activeLayout: this.activeLayout === 'Simplified' ? 'Classic' : 'Simplified' }, true);
         this.switchLayout();
+        var eventArgs = { activeLayout: this.activeLayout, event: args };
+        this.trigger('ribbonLayoutSwitched', eventArgs);
     };
     Ribbon.prototype.tabCreated = function () {
         if (!this.hideLayoutSwitcher) {
@@ -2320,10 +2322,10 @@ var Ribbon = /** @class */ (function (_super) {
             id: this.tabObj.element.id + constants.COLLAPSE_BUTTON_ID,
             attrs: { 'tabindex': '0', 'type': 'button', 'aria-label': 'Layout Switcher', 'role': 'button' }
         });
-        this.collapseButton.onclick = function () { _this.toggleLayout(); };
+        this.collapseButton.onclick = function (e) { _this.toggleLayout(e); };
         this.collapseButton.onkeydown = function (e) {
             if (e.key === 'Enter') {
-                _this.toggleLayout();
+                _this.toggleLayout(e);
             }
         };
         this.element.classList.add(constants.RIBBON_COLLAPSIBLE);
@@ -4978,6 +4980,9 @@ var Ribbon = /** @class */ (function (_super) {
     __decorate([
         Event()
     ], Ribbon.prototype, "ribbonCollapsing", void 0);
+    __decorate([
+        Event()
+    ], Ribbon.prototype, "ribbonLayoutSwitched", void 0);
     __decorate([
         Event()
     ], Ribbon.prototype, "launcherIconClick", void 0);

package/src/ribbon/items/ribbon-button.js

@@ -92,7 +92,9 @@ var RibbonButton = /** @class */ (function () {
             if (item.buttonSettings.clicked) {
                 item.buttonSettings.clicked.call(_this, e);
             }
-            overflowButton.toggle();
+            if (overflowButton.element.classList.contains('e-active')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**

package/src/ribbon/items/ribbon-checkbox.js

@@ -85,7 +85,9 @@ var RibbonCheckBox = /** @class */ (function () {
             if (item.checkBoxSettings.change) {
                 item.checkBoxSettings.change.call(_this, e);
             }
-            overflowButton.toggle();
+            if (overflowButton.element.classList.contains('e-active')) {
+                overflowButton.toggle();
+            }
         };
     };
     /**

package/src/ribbon/items/ribbon-colorpicker.js

@@ -133,7 +133,9 @@ var RibbonColorPicker = /** @class */ (function () {
         };
         splitBtn.close = function () {
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
-                overflowButton.toggle();
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
             }
         };
     };

package/src/ribbon/items/ribbon-combobox.js

@@ -120,7 +120,9 @@ var RibbonComboBox = /** @class */ (function () {
                 item.comboBoxSettings.close.call(_this, e);
             }
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
-                overflowButton.toggle();
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
             }
         };
     };

package/src/ribbon/items/ribbon-dropdown.js

@@ -109,7 +109,9 @@ var RibbonDropDown = /** @class */ (function () {
                 item.dropDownSettings.close.call(_this, e);
             }
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
-                overflowButton.toggle();
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
             }
         };
     };

package/src/ribbon/items/ribbon-groupbutton.js

@@ -433,7 +433,9 @@ var RibbonGroupButton = /** @class */ (function () {
         targetEle.onclick = function () {
             if (_this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
                 dropdown.toggle();
-                overflowButton.toggle();
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
             }
         };
     };

package/src/ribbon/items/ribbon-splitbutton.js

@@ -143,7 +143,9 @@ var RibbonSplitButton = /** @class */ (function () {
             if (item.splitButtonSettings.click) {
                 item.splitButtonSettings.click.call(_this, e);
             }
-            overflowButton.toggle();
+            if (overflowButton.element.classList.contains('e-active')) {
+                overflowButton.toggle();
+            }
         };
         splitbutton.close = function (e) {
             if (item.splitButtonSettings.close) {
@@ -151,7 +153,9 @@ var RibbonSplitButton = /** @class */ (function () {
             }
             splitbutton['wrapper'].classList.remove(RIBBON_POPUP_OPEN);
             if (target && !target.closest('.e-ribbon-group-overflow-ddb')) {
-                overflowButton.toggle();
+                if (overflowButton.element.classList.contains('e-active')) {
+                    overflowButton.toggle();
+                }
             }
         };
     };

package/styles/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1723,7 +1723,7 @@
   line-height: 14px;
   height: auto;
   min-height: auto;
-  padding: 9px 13px;
+  padding: 8px 9px;
   margin: 0;
   border: none;
   min-width: auto;

package/styles/ribbon/_fluent2-definition.scss

@@ -80,7 +80,7 @@ $ribbon-input-height: 18px !default;
 $ribbon-input-weight: $font-weight-normal !default;
 $ribbon-input-icon-size: $text-sm !default;
 $ribbon-input-icon-height: 14px !default;
-$ribbon-input-icon-padding: 9px 13px !default;
+$ribbon-input-icon-padding: 8px 9px !default;
 $ribbon-input-icon-weight: $font-weight-normal !default;
 $ribbon-input-group-border-radius: 4px !default;
 $ribbon-input-group-margin: 0 2px 4px !default;

package/styles/ribbon/fluent2.css

@@ -207,7 +207,7 @@
   --color-sf-info-outline: var(--color-sf-info-border-color);
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-content-bg-color-alt1);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -478,7 +478,7 @@
   --color-sf-success-bg-color: #218c21;
   --color-sf-success-border-color: var(--color-sf-success-bg-color);
   --color-sf-success-text: var(--color-sf-primary-text-color);
-  --color-sf-success-bg-color-hover: var(--color-sf-success-bg-color);
+  --color-sf-success-bg-color-hover: #0e700e;
   --color-sf-success-border-color-hover: var(--color-sf-success-bg-color-hover);
   --color-sf-success-text-hover: var(--color-sf-primary-text-color);
   --color-sf-success-bg-color-pressed: #052505;
@@ -496,7 +496,7 @@
   --color-sf-warning-bg-color: #f87528;
   --color-sf-warning-border-color: var(--color-sf-warning-bg-color);
   --color-sf-warning-text: #242424;
-  --color-sf-warning-bg-color-hover: var(--color-sf-warning-bg-color);
+  --color-sf-warning-bg-color-hover: #de590b;
   --color-sf-warning-border-color-hover: var(--color-sf-warning-bg-color-hover);
   --color-sf-warning-text-hover: var(--color-sf-primary-text-color);
   --color-sf-warning-bg-color-pressed: #4a1e04;
@@ -555,7 +555,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-tooltip-bg-color);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color-alt1);
   --color-sf-appbar-bg-color-alt1: var(--color-sf-content-bg-color-alt2);
@@ -897,7 +897,7 @@
   --color-sf-info-outline: #0099bc;
   --color-sf-tooltip-bg-color: var(--color-sf-content-bg-color-alt1);
   --color-sf-tooltip-border: var(--color-sf-border-light);
-  --color-sf-toooltip-text-color: var(--color-sf-content-text-color);
+  --color-sf-tooltip-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-text-color: var(--color-sf-content-text-color);
   --color-sf-toast-alt-text-color: var(--color-sf-content-text-color);
   --color-sf-appbar-bg-color-alt1: #fff;
@@ -1723,7 +1723,7 @@
   line-height: 14px;
   height: auto;
   min-height: auto;
-  padding: 9px 13px;
+  padding: 8px 9px;
   margin: 0;
   border: none;
   min-width: auto;