@syncfusion/ej2-ribbon 23.2.7 → 24.1.44

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

@@ -88,6 +88,15 @@ var RibbonColorPicker = /** @class */ (function () {
      */
     RibbonColorPicker.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label && this.parent.activeLayout === 'Simplified') {
+            var label = this.parent.createElement('div', {
+                className: 'e-ribbon-colorpicker-label',
+                id: item.id + '_label',
+                innerHTML: colorPickerSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         colorPickerEle.setAttribute('data-control', item.type.toString());
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
@@ -118,6 +127,13 @@ var RibbonColorPicker = /** @class */ (function () {
      */
     RibbonColorPicker.prototype.removeOverFlowEvents = function (item, itemEle) {
         var _this = this;
+        var colorPickerSettings = item.colorPickerSettings;
+        if (colorPickerSettings.label) {
+            var label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         var colorPickerEle = itemEle.querySelector('#' + item.id);
         var colorPickerObj = getComponent(colorPickerEle, ColorPicker);
         var cssClass = colorPickerObj.cssClass.split(SPACE);

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

@@ -83,6 +83,15 @@ var RibbonComboBox = /** @class */ (function () {
      */
     RibbonComboBox.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label && this.parent.activeLayout === 'Simplified') {
+            var label = this.parent.createElement('div', {
+                className: 'e-ribbon-combobox-label',
+                id: item.id + '_label',
+                innerHTML: comboBoxSettings.label
+            });
+            itemEle.insertBefore(label, itemEle.firstChild);
+        }
         var inputEle = itemEle.querySelector('#' + item.id);
         inputEle.setAttribute('data-control', item.type.toString());
         var comboBoxObj = getComponent(inputEle, ComboBox);
@@ -107,6 +116,13 @@ var RibbonComboBox = /** @class */ (function () {
      */
     RibbonComboBox.prototype.removeOverFlowEvents = function (item, itemEle) {
         var _this = this;
+        var comboBoxSettings = item.comboBoxSettings;
+        if (comboBoxSettings.label) {
+            var label = itemEle.querySelector('#' + item.id + '_label');
+            if (label) {
+                label.remove();
+            }
+        }
         var inputEle = itemEle.querySelector('#' + item.id);
         var comboBoxObj = getComponent(inputEle, ComboBox);
         var cssClass = comboBoxObj.cssClass.split(SPACE);

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

@@ -164,7 +164,9 @@ var RibbonDropDown = /** @class */ (function () {
         return dropdown;
     };
     RibbonDropDown.prototype.keyActionHandler = function (e, target) {
-        var items = target.querySelectorAll('.e-control');
+        var controlElements = Array.prototype.slice.call(target.querySelectorAll('.e-control'));
+        var templateElements = Array.prototype.slice.call(target.querySelectorAll('.e-ribbon-template'));
+        var items = controlElements.concat(templateElements);
         var comboBoxElements = target.querySelectorAll('.e-combobox');
         var comboBoxEle;
         if (comboBoxElements) {
@@ -183,7 +185,7 @@ var RibbonDropDown = /** @class */ (function () {
                 }
             }
         }
-        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-launcher-icon') ||
+        if (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template') || e.target.classList.contains('e-ribbon-launcher-icon') ||
             e.target.classList.contains('e-ribbon-last-item') || e.target.classList.contains('e-ribbon-first-item')) {
             if (e.key === 'ArrowRight' || (!e.shiftKey && e.key === 'Tab')) {
                 this.handleNavigation(e, !this.enableRtl, items);
@@ -206,7 +208,7 @@ var RibbonDropDown = /** @class */ (function () {
             }
             if (!e.target.classList.contains('e-combobox') && !e.target.classList.contains('e-ribbon-last-item') &&
                 !e.target.classList.contains('e-ribbon-group-container') && (e.target.classList.contains('e-ribbon-first-item')
-                || this.itemIndex !== 0) && e.target.classList.contains('e-control')) {
+                || this.itemIndex !== 0) && (e.target.classList.contains('e-control') || e.target.classList.contains('e-ribbon-template'))) {
                 this.itemIndex++;
                 this.updateItemIndex(e, items, true);
             }

package/src/ribbon/items/ribbon-groupbutton.d.ts

@@ -1,5 +1,6 @@
 import { Ribbon } from '../base/ribbon';
 import { RibbonItemModel } from '../models';
+import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 /**
  * Defines the items of Ribbon.
  */
@@ -30,6 +31,8 @@ export declare class RibbonGroupButton {
      * @hidden
      */
     switchGroupButton(item: RibbonItemModel, itemElement: HTMLElement): void;
+    private handleFocusState;
+    private addGroupButtonHeader;
     private handleGroupButtonNavigation;
     /**
      * Adds the additional event handlers as the item moved into overflow popup.
@@ -39,7 +42,7 @@ export declare class RibbonGroupButton {
      * @returns {void}
      * @hidden
      */
-    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement): void;
+    addOverFlowEvents(item: RibbonItemModel, itemEle: HTMLElement, overflowButton: DropDownButton): void;
     /**
      * Removes the additional event handlers as the item moved into overflow popup.
      *

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

@@ -113,18 +113,19 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 count++;
             }
-            new DropDownButton({
+            var dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: btnContainerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                var dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = function () {
-                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
-                    document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + 0).focus();
-                    _this.grpBtnIndex = 0;
-                }
+                _this.handleFocusState(item, itemElement);
             };
             btnContainerEle.onkeydown = function (e) {
                 if (_this.parent.activeLayout === 'Simplified') {
@@ -136,7 +137,9 @@ var RibbonGroupButton = /** @class */ (function () {
         }
     };
     RibbonGroupButton.prototype.groupButtonClicked = function (itemIndex, item, grpBtnSettings) {
-        var previousItems = [], selectingItems = [], selectedItems = [];
+        var previousItems = [];
+        var selectingItems = [];
+        var selectedItems = [];
         var groupButtonEle;
         var dropdown;
         for (var j = 0; j < grpBtnSettings.items.length; j++) {
@@ -167,9 +170,11 @@ var RibbonGroupButton = /** @class */ (function () {
                 for (var j = 0; j < grpBtnSettings.items.length; j++) {
                     if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j) && document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j).classList.contains('e-active')) {
                         document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + j).classList.remove('e-active');
+                        grpBtnSettings.items[parseInt(j.toString(), 10)].selected = false;
                     }
                 }
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
                 if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active') && this.parent.activeLayout === 'Simplified') {
                     this.grpBtnIndex = itemIndex;
                     groupButtonEle = document.querySelector('#' + item.id);
@@ -185,6 +190,12 @@ var RibbonGroupButton = /** @class */ (function () {
                     document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID).classList.add(constants.RIBBON_MULTIPLE_BUTTON_SELECTION);
                 }
                 document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.toggle('e-active');
+                if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + itemIndex).classList.contains('e-active')) {
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = true;
+                }
+                else {
+                    grpBtnSettings.items[parseInt(itemIndex.toString(), 10)].selected = false;
+                }
                 var activeEleCount = 0;
                 for (var n = 0; n < grpBtnSettings.items.length; n++) {
                     if (document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + n) && document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + n).classList.contains('e-active') && this.parent.activeLayout === 'Simplified' && n !== itemIndex) {
@@ -273,18 +284,19 @@ var RibbonGroupButton = /** @class */ (function () {
                 }
                 itemsCount++;
             }
-            new DropDownButton({
+            var dropdown = new DropDownButton({
                 iconCss: dropdownIcon,
                 target: containerEle,
                 enableRtl: this.parent.enableRtl,
                 cssClass: 'e-ribbon-dropdown-group-button',
                 disabled: item.disabled
             }, buttonEle);
+            if (groupBtnSettings.header) {
+                var dropDownPopup = dropdown.dropDown;
+                this.addGroupButtonHeader(item.id, groupBtnSettings, dropDownPopup.element);
+            }
             buttonEle.onclick = buttonEle.onkeydown = function () {
-                if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
-                    document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + 0).focus();
-                    _this.grpBtnIndex = 0;
-                }
+                _this.handleFocusState(item, itemElement);
             };
             containerEle.onkeydown = function (e) {
                 if (_this.parent.activeLayout === 'Simplified') {
@@ -303,6 +315,26 @@ var RibbonGroupButton = /** @class */ (function () {
             }
         }
     };
+    RibbonGroupButton.prototype.handleFocusState = function (item, itemElement) {
+        if (itemElement.querySelector('#' + item.id).classList.contains('e-active')) {
+            var defaultSelectedBtn = document.querySelector('#' + item.id + '_grpbtn').querySelector('.' + constants.RIBBON_GROUP_BUTTON + '.e-active');
+            if (defaultSelectedBtn) {
+                defaultSelectedBtn.focus();
+            }
+            else {
+                document.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + 0).focus();
+            }
+            this.grpBtnIndex = 0;
+        }
+    };
+    RibbonGroupButton.prototype.addGroupButtonHeader = function (itemID, groupBtnSettings, popupEle) {
+        var groupButtonHeader = this.parent.createElement('div', {
+            className: 'e-ribbon-groupbutton-header',
+            id: itemID + constants.HEADER_ID,
+            innerHTML: groupBtnSettings.header
+        });
+        popupEle.insertBefore(groupButtonHeader, popupEle.firstChild);
+    };
     RibbonGroupButton.prototype.handleGroupButtonNavigation = function (e, item) {
         var groupButtonEle = document.querySelector('#' + item.id);
         var dropdown = getComponent(groupButtonEle, DropDownButton);
@@ -368,16 +400,29 @@ var RibbonGroupButton = /** @class */ (function () {
      * @returns {void}
      * @hidden
      */
-    RibbonGroupButton.prototype.addOverFlowEvents = function (item, itemEle) {
+    RibbonGroupButton.prototype.addOverFlowEvents = function (item, itemEle, overflowButton) {
         var _this = this;
+        var groupBtnSettings = item.groupButtonSettings;
+        var isIconOnly = true;
         var groupButtonEle = itemEle.querySelector('#' + item.id);
         var dropdown = getComponent(groupButtonEle, DropDownButton);
-        dropdown.setProperties({ cssClass: dropdown.cssClass + constants.SPACE + constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP });
+        dropdown.setProperties({ cssClass: dropdown.cssClass + constants.SPACE + constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP, content: groupBtnSettings.header ? groupBtnSettings.header : '' });
         var targetEle = dropdown.target;
+        if (targetEle.children.length) {
+            for (var i = 0; i < targetEle.children.length; i++) {
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].content) {
+                    isIconOnly = false;
+                    break;
+                }
+            }
+            if (isIconOnly) {
+                targetEle.classList.add('e-icon-btn');
+            }
+        }
         targetEle.onclick = function () {
             if (_this.parent.activeLayout === 'Simplified' && targetEle.closest('.e-ribbon-dropdown-group-button').classList.contains(constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP)) {
-                dropdown.element.focus();
                 dropdown.toggle();
+                overflowButton.toggle();
             }
         };
     };
@@ -393,9 +438,13 @@ var RibbonGroupButton = /** @class */ (function () {
         var groupButtonEle = itemEle.querySelector('#' + item.id);
         if (groupButtonEle) {
             var dropdown = getComponent(groupButtonEle, DropDownButton);
+            var targetEle = dropdown.target;
+            if (targetEle.classList.contains('e-icon-btn')) {
+                targetEle.classList.remove('e-icon-btn');
+            }
             var cssClass = dropdown.cssClass.split(constants.SPACE);
             cssClass = cssClass.filter(function (value) { return value !== constants.RIBBON_GROUP_BUTTON_OVERFLOW_POPUP; });
-            dropdown.setProperties({ cssClass: cssClass.join(constants.SPACE) });
+            dropdown.setProperties({ cssClass: cssClass.join(constants.SPACE), content: '' });
         }
     };
     /**

package/src/ribbon/models/ribbon-colorpicker-settings-model.d.ts

@@ -19,6 +19,13 @@ export interface RibbonColorPickerSettingsModel {
      */
     cssClass?: string;
 
+    /**
+     * Specifies the label text for the overflow item.
+     *
+     * @default ''
+     */
+    label?: string;
+
     /**
      * Defines whether to enable the opacity option in the color picker.
      *
@@ -29,7 +36,7 @@ export interface RibbonColorPickerSettingsModel {
     /**
      * Defines the rendering mode of the color picker.
      *
-     * @default 'Picker'
+     * @default 'Palette'
      */
     mode?: ColorPickerMode;
 

package/src/ribbon/models/ribbon-colorpicker-settings.d.ts

@@ -16,6 +16,12 @@ export declare class RibbonColorPickerSettings extends ChildProperty<RibbonColor
      * @default ''
      */
     cssClass: string;
+    /**
+     * Specifies the label text for the overflow item.
+     *
+     * @default ''
+     */
+    label: string;
     /**
      * Defines whether to enable the opacity option in the color picker.
      *
@@ -25,7 +31,7 @@ export declare class RibbonColorPickerSettings extends ChildProperty<RibbonColor
     /**
      * Defines the rendering mode of the color picker.
      *
-     * @default 'Picker'
+     * @default 'Palette'
      */
     mode: ColorPickerMode;
     /**

package/src/ribbon/models/ribbon-colorpicker-settings.js

@@ -41,11 +41,14 @@ var RibbonColorPickerSettings = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], RibbonColorPickerSettings.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], RibbonColorPickerSettings.prototype, "label", void 0);
     __decorate([
         Property(true)
     ], RibbonColorPickerSettings.prototype, "enableOpacity", void 0);
     __decorate([
-        Property('Picker')
+        Property('Palette')
     ], RibbonColorPickerSettings.prototype, "mode", void 0);
     __decorate([
         Property(true)

package/src/ribbon/models/ribbon-combobox-settings-model.d.ts

@@ -29,6 +29,13 @@ export interface RibbonComboBoxSettingsModel {
      */
     cssClass?: string;
 
+    /**
+     * Specifies the label text for the overflow item.
+     *
+     * @default ''
+     */
+    label?: string;
+
     /**
      * Defines the list of items to shown in the combobox.
      *

package/src/ribbon/models/ribbon-combobox-settings.d.ts

@@ -26,6 +26,12 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * @default ''
      */
     cssClass: string;
+    /**
+     * Specifies the label text for the overflow item.
+     *
+     * @default ''
+     */
+    label: string;
     /**
      * Defines the list of items to shown in the combobox.
      *

package/src/ribbon/models/ribbon-combobox-settings.js

@@ -45,6 +45,9 @@ var RibbonComboBoxSettings = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], RibbonComboBoxSettings.prototype, "cssClass", void 0);
+    __decorate([
+        Property('')
+    ], RibbonComboBoxSettings.prototype, "label", void 0);
     __decorate([
         Property([])
     ], RibbonComboBoxSettings.prototype, "dataSource", void 0);

package/src/ribbon/models/ribbon-group-button-settings-model.d.ts

@@ -5,6 +5,13 @@ import { ChildProperty, Collection, Property } from '@syncfusion/ej2-base';
  */
 export interface RibbonGroupButtonSettingsModel {
 
+    /**
+     * Specifies the header for the groupbutton popup in Simplified layout.
+     *
+     * @default ''
+     */
+    header?: string;
+
     /**
      * Defines options for Selection Type.
      *

package/src/ribbon/models/ribbon-group-button-settings.d.ts

@@ -5,6 +5,12 @@ import { RibbonGroupButtonItemModel } from './ribbon-group-button-item-model';
  * Defines the ribbon group button settings.
  */
 export declare class RibbonGroupButtonSettings extends ChildProperty<RibbonGroupButtonSettings> {
+    /**
+     * Specifies the header for the groupbutton popup in Simplified layout.
+     *
+     * @default ''
+     */
+    header: string;
     /**
      * Defines options for Selection Type.
      *

package/src/ribbon/models/ribbon-group-button-settings.js

@@ -27,6 +27,9 @@ var RibbonGroupButtonSettings = /** @class */ (function (_super) {
     function RibbonGroupButtonSettings() {
         return _super !== null && _super.apply(this, arguments) || this;
     }
+    __decorate([
+        Property('')
+    ], RibbonGroupButtonSettings.prototype, "header", void 0);
     __decorate([
         Property('Single')
     ], RibbonGroupButtonSettings.prototype, "selection", void 0);

package/src/ribbon/models/ribbon-group-model.d.ts

@@ -73,6 +73,13 @@ export interface RibbonGroupModel {
      */
     orientation?: ItemOrientation | string;
 
+    /**
+     * Defines the header shown in overflow popup of Ribbon group.
+     *
+     * @default ''
+     */
+    overflowHeader?: string;
+
     /**
      * Defines the priority order at which the group should be collapsed or expanded.
      * For collapsing value is fetched in ascending order and for expanding value is fetched in descending order.

package/src/ribbon/models/ribbon-group.d.ts

@@ -64,6 +64,12 @@ export declare class RibbonGroup extends ChildProperty<RibbonGroup> {
      * @aspType ItemOrientation
      */
     orientation: ItemOrientation | string;
+    /**
+     * Defines the header shown in overflow popup of Ribbon group.
+     *
+     * @default ''
+     */
+    overflowHeader: string;
     /**
      * Defines the priority order at which the group should be collapsed or expanded.
      * For collapsing value is fetched in ascending order and for expanding value is fetched in descending order.

package/src/ribbon/models/ribbon-group.js

@@ -63,6 +63,9 @@ var RibbonGroup = /** @class */ (function (_super) {
     __decorate([
         Property('Column')
     ], RibbonGroup.prototype, "orientation", void 0);
+    __decorate([
+        Property('')
+    ], RibbonGroup.prototype, "overflowHeader", void 0);
     __decorate([
         Property(0)
     ], RibbonGroup.prototype, "priority", void 0);

package/src/ribbon/modules/ribbon-backstage.js

@@ -383,6 +383,9 @@ var RibbonBackstage = /** @class */ (function (_super) {
                         this.closeBtn.setProperties(commonProp);
                     }
                 }
+                if (this.footerMenuCtrl) {
+                    this.footerMenuCtrl.setProperties(commonProp);
+                }
             }
         }
     };