@syncfusion/ej2-ribbon 23.1.38 → 23.1.43

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 23.1.38
+*  version : 23.1.43
 *  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@23.1.36",
+  "_id": "@syncfusion/ej2-ribbon@23.1.41",
   "_inBundle": false,
-  "_integrity": "sha512-B1DZY4Vp7t4b8VuJyWI8481QkATx23V2c6f1CWIlwRgZMte0jnRf47jTvfhEpTlpN/bG4w/sc2o3qiXU8P8UYQ==",
+  "_integrity": "sha512-KTXgq4hhzbsAEO2xsUfoF0ZsRBK0Jnx3x9qpn8AcczeIqd87Gp09SiXnSSf+PGxOoAixSmkA9aLQzoyLmFMkoA==",
   "_location": "/@syncfusion/ej2-ribbon",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-ribbon",
     "/@syncfusion/ej2-vue-ribbon"
   ],
-  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.36.tgz",
-  "_shasum": "0e5222e8707a0aebdd62211cad981f8e02f45d83",
+  "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-23.1.41.tgz",
+  "_shasum": "f1ecd3e3fae61627bdb8f3b7cda411b45fac53ac",
   "_spec": "@syncfusion/ej2-ribbon@*",
   "_where": "/jenkins/workspace/elease-automation_release_23.1.1/packages/included",
   "author": {
@@ -35,13 +35,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~23.1.38",
-    "@syncfusion/ej2-buttons": "~23.1.36",
-    "@syncfusion/ej2-dropdowns": "~23.1.38",
-    "@syncfusion/ej2-lists": "~23.1.36",
-    "@syncfusion/ej2-navigations": "~23.1.36",
-    "@syncfusion/ej2-popups": "~23.1.38",
-    "@syncfusion/ej2-splitbuttons": "~23.1.36"
+    "@syncfusion/ej2-base": "~23.1.41",
+    "@syncfusion/ej2-buttons": "~23.1.43",
+    "@syncfusion/ej2-dropdowns": "~23.1.43",
+    "@syncfusion/ej2-lists": "~23.1.43",
+    "@syncfusion/ej2-navigations": "~23.1.43",
+    "@syncfusion/ej2-popups": "~23.1.43",
+    "@syncfusion/ej2-splitbuttons": "~23.1.43"
   },
   "deprecated": false,
   "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
     "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
   },
   "typings": "index.d.ts",
-  "version": "23.1.38",
+  "version": "23.1.43",
   "sideEffects": false
 }

package/src/ribbon/base/ribbon.js

@@ -1854,6 +1854,8 @@ var Ribbon = /** @class */ (function (_super) {
                 }
             }
         }
+        var activeContent = this.tabObj.element.querySelector('#' + this.tabs[this.selectedTab].id + constants.CONTENT_ID);
+        this.checkOverflow(this.selectedTab, activeContent);
     };
     Ribbon.prototype.switchLayout = function () {
         this.currentControlIndex = 0;

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

@@ -125,3 +125,14 @@ export declare function destroyTooltip(element: HTMLElement): void;
  * @hidden
  */
 export declare function updateTooltipProp(element: HTMLElement, prop: commonProperties): void;
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+export declare function setCustomAttributes(element: HTMLElement, attributes: {
+    [key: string]: string;
+}): void;

package/src/ribbon/base/utils.js

@@ -1,4 +1,4 @@
-import { compile, getComponent, select } from '@syncfusion/ej2-base';
+import { compile, getComponent, select, addClass } from '@syncfusion/ej2-base';
 import { Tooltip } from '@syncfusion/ej2-popups';
 import { DisplayMode, RibbonLayout } from './interface';
 import * as constants from './constant';
@@ -307,3 +307,29 @@ export function updateTooltipProp(element, prop) {
     var control = getComponent(element, Tooltip);
     control.setProperties(prop);
 }
+/**
+ * Sets the HTML attributes of an element
+ *
+ * @param {HTMLElement} element - The HTML element for which attributes are to be updated.
+ * @param {commonProperties} attributes - An object containing key-value pairs of attributes to be updated.
+ * @returns {void}
+ * @hidden
+ */
+export function setCustomAttributes(element, attributes) {
+    for (var key in attributes) {
+        if (key === 'class') {
+            var elementClass = attributes['class'].replace(/\s+/g, ' ').trim();
+            if (elementClass) {
+                addClass([element], elementClass.split(' '));
+            }
+        }
+        else if (key === 'style') {
+            var prevStyles = element.getAttribute('style') || '';
+            var value = "" + prevStyles + attributes["" + key];
+            element.setAttribute("" + key, value);
+        }
+        else {
+            element.setAttribute(key, attributes["" + key]);
+        }
+    }
+}

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

@@ -1,6 +1,6 @@
 import { getComponent, merge } from '@syncfusion/ej2-base';
 import { Button } from '@syncfusion/ej2-buttons';
-import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
 import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_POPUP_CONTROL, SPACE } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -43,6 +43,9 @@ var RibbonButton = /** @class */ (function () {
             isToggle: btnSettings.isToggle,
             created: btnSettings.created
         }, buttonEle);
+        if (btnSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, btnSettings.htmlAttributes);
+        }
         buttonEle.onclick = function (e) {
             if (btnSettings.clicked) {
                 btnSettings.clicked.call(_this, e);

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

@@ -39,6 +39,7 @@ var RibbonCheckBox = /** @class */ (function () {
             labelPosition: checkBoxSettings.labelPosition,
             disabled: item.disabled,
             created: checkBoxSettings.created,
+            htmlAttributes: checkBoxSettings.htmlAttributes,
             change: function (e) {
                 if (checkBoxSettings.change) {
                     checkBoxSettings.change.call(_this, e);

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

@@ -1,6 +1,6 @@
 import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
-import { getItem, getItemElement } from '../base/index';
+import { getItem, getItemElement, setCustomAttributes } from '../base/index';
 import { RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -62,6 +62,9 @@ var RibbonColorPicker = /** @class */ (function () {
             },
             select: colorPickerSettings.select
         }, inputEle);
+        if (colorPickerSettings.htmlAttributes) {
+            setCustomAttributes(inputEle, colorPickerSettings.htmlAttributes);
+        }
         var wrapper = colorPicker.element.parentElement;
         EventHandler.add(wrapper, 'mouseenter', this.toggleWrapperHover.bind(this, wrapper, true), this);
         EventHandler.add(wrapper, 'mouseleave', this.toggleWrapperHover.bind(this, wrapper, false), this);

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

@@ -60,6 +60,7 @@ var RibbonComboBox = /** @class */ (function () {
             width: comboBoxSettings.width,
             beforeOpen: comboBoxSettings.beforeOpen,
             open: comboBoxSettings.open,
+            htmlAttributes: comboBoxSettings.htmlAttributes,
             close: function (e) {
                 if (comboBoxSettings.close) {
                     comboBoxSettings.close.call(_this, e);

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

@@ -1,7 +1,7 @@
 import { closest, getComponent, isNullOrUndefined, merge, remove } from '@syncfusion/ej2-base';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Tooltip } from '@syncfusion/ej2-popups';
-import { getItem, getItemElement, RibbonItemSize, createTooltip } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, createTooltip, setCustomAttributes } from '../base/index';
 import { DROPDOWN_ID, ITEM_VERTICAL_CENTER, OVERFLOW_ID, RIBBON_CONTROL, RIBBON_GROUP_OVERFLOW_DDB, RIBBON_POPUP_CONTROL, SPACE, VERTICAL_DDB } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -62,6 +62,9 @@ var RibbonDropDown = /** @class */ (function () {
             open: dropDownSettings.open,
             select: dropDownSettings.select
         }).appendTo(buttonEle);
+        if (dropDownSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, dropDownSettings.htmlAttributes);
+        }
     };
     /**
      * Adds the additional event handlers as the item moved into overflow popup.

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

@@ -3,7 +3,7 @@ import * as constants from '../base/constant';
 import { Button } from '@syncfusion/ej2-buttons';
 import { RibbonGroupButtonSelection, RibbonItemSize } from '../base/interface';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
-import { createTooltip, isTooltipPresent } from '../base/utils';
+import { createTooltip, isTooltipPresent, setCustomAttributes } from '../base/utils';
 import { Tooltip } from '@syncfusion/ej2-popups';
 /**
  * Defines the items of Ribbon.
@@ -50,6 +50,9 @@ var RibbonGroupButton = /** @class */ (function () {
                     content: item.activeSize === RibbonItemSize.Small ? '' : groupBtnSettings.items[parseInt(i.toString(), 10)].content,
                     iconPosition: item.activeSize === RibbonItemSize.Large ? 'Top' : 'Left'
                 }, groupButtonEle);
+                if (groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes) {
+                    setCustomAttributes(groupButtonEle, groupBtnSettings.items[parseInt(i.toString(), 10)].htmlAttributes);
+                }
                 var buttonEle = itemElement.querySelector('#' + item.id + constants.RIBBON_GROUP_BUTTON_ID + i);
                 if (groupBtnSettings.selection === RibbonGroupButtonSelection.Single) {
                     btnContainerEle.classList.add(constants.RIBBON_SINGLE_BUTTON_SELECTION);

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

@@ -1,6 +1,6 @@
 import { EventHandler, getComponent, merge } from '@syncfusion/ej2-base';
 import { SplitButton } from '@syncfusion/ej2-splitbuttons';
-import { getItem, getItemElement, RibbonItemSize } from '../base/index';
+import { getItem, getItemElement, RibbonItemSize, setCustomAttributes } from '../base/index';
 import { ITEM_VERTICAL_CENTER, RIBBON_CONTROL, RIBBON_HOVER, RIBBON_POPUP_CONTROL, RIBBON_POPUP_OPEN, SPACE, VERTICAL_DDB } from '../base/constant';
 /**
  * Defines the items of Ribbon.
@@ -70,6 +70,9 @@ var RibbonSplitButton = /** @class */ (function () {
                 }
             }
         }, buttonEle);
+        if (splitButtonSettings.htmlAttributes) {
+            setCustomAttributes(buttonEle, splitButtonSettings.htmlAttributes);
+        }
         var dropdownEle = buttonEle.parentElement.querySelector('.e-dropdown-btn');
         dropdownEle.onkeydown = function (e) {
             if (e.key === 'Enter') {

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

@@ -40,6 +40,13 @@ export interface RibbonButtonSettingsModel {
      */
     isPrimary?: boolean;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the button.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Event triggers once the button is created.
      *

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

@@ -33,6 +33,14 @@ export declare class RibbonButtonSettings extends ChildProperty<RibbonButtonSett
      * @default false
      */
     isPrimary: boolean;
+    /**
+     * Specifies additional HTML attributes to be applied to the button.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Event triggers once the button is created.
      *

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

@@ -50,6 +50,9 @@ var RibbonButtonSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], RibbonButtonSettings.prototype, "isPrimary", void 0);
+    __decorate([
+        Property({})
+    ], RibbonButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonButtonSettings.prototype, "created", void 0);

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

@@ -33,6 +33,13 @@ export interface RibbonCheckBoxSettingsModel {
      */
     labelPosition?: LabelPosition;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the checkbox.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Event triggers once the checkbox is created.
      *

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

@@ -28,6 +28,14 @@ export declare class RibbonCheckBoxSettings extends ChildProperty<RibbonCheckBox
      * @default 'After'
      */
     labelPosition: LabelPosition;
+    /**
+     * Specifies additional HTML attributes to be applied to the checkbox.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Event triggers once the checkbox is created.
      *

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

@@ -47,6 +47,9 @@ var RibbonCheckBoxSettings = /** @class */ (function (_super) {
     __decorate([
         Property('After')
     ], RibbonCheckBoxSettings.prototype, "labelPosition", void 0);
+    __decorate([
+        Property({})
+    ], RibbonCheckBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonCheckBoxSettings.prototype, "created", void 0);

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

@@ -69,6 +69,13 @@ export interface RibbonColorPickerSettingsModel {
      */
     value?: string;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the color picker.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Event triggers before closing the ColorPicker popup.
      *

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

@@ -61,6 +61,14 @@ export declare class RibbonColorPickerSettings extends ChildProperty<RibbonColor
      * @default '#008000ff'
      */
     value: string;
+    /**
+     * Specifies additional HTML attributes to be applied to the color picker.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Event triggers before closing the ColorPicker popup.
      *

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

@@ -62,6 +62,9 @@ var RibbonColorPickerSettings = /** @class */ (function (_super) {
     __decorate([
         Property('#008000ff')
     ], RibbonColorPickerSettings.prototype, "value", void 0);
+    __decorate([
+        Property({})
+    ], RibbonColorPickerSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonColorPickerSettings.prototype, "beforeClose", void 0);

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

@@ -209,6 +209,13 @@ export interface RibbonComboBoxSettingsModel {
      */
     width?: string | number;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the combobox.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Event triggers before opening the popup.
      *

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

@@ -191,6 +191,14 @@ export declare class RibbonComboBoxSettings extends ChildProperty<RibbonComboBox
      * @aspType string
      */
     width: string | number;
+    /**
+     * Specifies additional HTML attributes to be applied to the combobox.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Event triggers before opening the popup.
      *

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

@@ -96,6 +96,9 @@ var RibbonComboBoxSettings = /** @class */ (function (_super) {
     __decorate([
         Property('150px')
     ], RibbonComboBoxSettings.prototype, "width", void 0);
+    __decorate([
+        Property({})
+    ], RibbonComboBoxSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonComboBoxSettings.prototype, "beforeOpen", void 0);

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

@@ -55,6 +55,13 @@ export interface RibbonDropDownSettingsModel {
      */
     createPopupOnClick?: boolean;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the DropDownButton.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Triggers before closing the DropDownButton popup.
      *

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

@@ -47,6 +47,14 @@ export declare class RibbonDropDownSettings extends ChildProperty<RibbonDropDown
      * @default false
      */
     createPopupOnClick: boolean;
+    /**
+     * Specifies additional HTML attributes to be applied to the DropDownButton.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Triggers before closing the DropDownButton popup.
      *

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

@@ -57,6 +57,9 @@ var RibbonDropDownSettings = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], RibbonDropDownSettings.prototype, "createPopupOnClick", void 0);
+    __decorate([
+        Property({})
+    ], RibbonDropDownSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonDropDownSettings.prototype, "beforeClose", void 0);

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

@@ -33,6 +33,13 @@ export interface RibbonGroupButtonItemModel {
      */
     selected?: boolean;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the group button item.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Triggers before clicking the button from group button.
      *

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

@@ -29,6 +29,14 @@ export declare class RibbonGroupButtonItem extends ChildProperty<RibbonGroupButt
      * @default false
      */
     selected: boolean;
+    /**
+     * Specifies additional HTML attributes to be applied to the group button item.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Triggers before clicking the button from group button.
      *

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

@@ -39,6 +39,9 @@ var RibbonGroupButtonItem = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], RibbonGroupButtonItem.prototype, "selected", void 0);
+    __decorate([
+        Property({})
+    ], RibbonGroupButtonItem.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonGroupButtonItem.prototype, "beforeClick", void 0);

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

@@ -48,6 +48,13 @@ export interface RibbonSplitButtonSettingsModel {
      */
     target?: string | HTMLElement;
 
+    /**
+     * Specifies additional HTML attributes to be applied to the SplitButton.
+     *
+     * @default {}
+     */
+    htmlAttributes?: { [key: string]: string };
+
     /**
      * Triggers before closing the SplitButton popup.
      *

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

@@ -41,6 +41,14 @@ export declare class RibbonSplitButtonSettings extends ChildProperty<RibbonSplit
      * @aspType string
      */
     target: string | HTMLElement;
+    /**
+     * Specifies additional HTML attributes to be applied to the SplitButton.
+     *
+     * @default {}
+     */
+    htmlAttributes: {
+        [key: string]: string;
+    };
     /**
      * Triggers before closing the SplitButton popup.
      *

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

@@ -54,6 +54,9 @@ var RibbonSplitButtonSettings = /** @class */ (function (_super) {
     __decorate([
         Property('')
     ], RibbonSplitButtonSettings.prototype, "target", void 0);
+    __decorate([
+        Property({})
+    ], RibbonSplitButtonSettings.prototype, "htmlAttributes", void 0);
     __decorate([
         Event()
     ], RibbonSplitButtonSettings.prototype, "beforeClose", void 0);

package/styles/bootstrap4.css

@@ -130,13 +130,24 @@
 }
 
 .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
-  font-size: 8px;
+  font-size: 12px;
+}
+
+.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
 }
 
-.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+.e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
 }
 
+.e-small.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 12px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
   font-size: 14px;
   line-height: 34px;

package/styles/ribbon/bootstrap4.css

@@ -130,13 +130,24 @@
 }
 
 .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
-  font-size: 8px;
+  font-size: 12px;
+}
+
+.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 14px;
 }
 
-.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+.e-small .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
   font-size: 10px;
 }
 
+.e-small.e-bigger .e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon,
+.e-small.e-bigger.e-input-group .e-control.e-dropdownlist ~ .e-ddl-icon {
+  font-size: 12px;
+}
+
 .e-bigger.e-small .e-ddl.e-popup .e-list-item, .e-bigger.e-small .e-ddl.e-popup .e-list-group-item, .e-bigger.e-small .e-ddl.e-popup .e-fixed-head {
   font-size: 14px;
   line-height: 34px;