@syncfusion/ej2-ribbon 31.2.12 → 32.1.24

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 31.2.12
+*  version : 32.1.24
 *  Copyright Syncfusion Inc. 2001 - 2025. 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,6 +1,6 @@
 {
   "name": "@syncfusion/ej2-ribbon",
-  "version": "31.2.12",
+  "version": "32.1.24",
   "description": "Essential JS 2 Component",
   "author": "Syncfusion Inc.",
   "license": "SEE LICENSE IN license",
@@ -9,13 +9,13 @@
   "es2015": "./dist/es6/ej2-ribbon.es5.js",
   "typings": "index.d.ts",
   "dependencies": {
-    "@syncfusion/ej2-base": "~31.2.12",
-    "@syncfusion/ej2-buttons": "~31.2.12",
-    "@syncfusion/ej2-dropdowns": "~31.2.12",
-    "@syncfusion/ej2-lists": "~31.2.12",
-    "@syncfusion/ej2-navigations": "~31.2.12",
-    "@syncfusion/ej2-popups": "~31.2.12",
-    "@syncfusion/ej2-splitbuttons": "~31.2.12"
+    "@syncfusion/ej2-base": "~32.1.24",
+    "@syncfusion/ej2-buttons": "~32.1.24",
+    "@syncfusion/ej2-dropdowns": "~32.1.24",
+    "@syncfusion/ej2-lists": "~32.1.24",
+    "@syncfusion/ej2-navigations": "~32.1.24",
+    "@syncfusion/ej2-popups": "~32.1.24",
+    "@syncfusion/ej2-splitbuttons": "~32.1.24"
   },
   "devDependencies": {},
   "keywords": [

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, 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 { ColorPicker } from '@syncfusion/ej2-inputs';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 { ColorPicker } from '@syncfusion/ej2-inputs';import { CheckBox } from '@syncfusion/ej2-buttons';import { RibbonContextualTab } from '../modules/ribbon-contextualtab';import { RibbonGallery } from '../items/ribbon-gallery';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**

package/src/ribbon/base/ribbon.js

@@ -27,8 +27,8 @@ import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonSpl
 import { destroyControl, getCollection, getGroup, getIndex, getItem, getItemElement, updateCommonProperty, updateControlDisabled, isTooltipPresent, getTemplateFunction, createTooltip, destroyTooltip, updateTooltipProp } from './utils';
 import * as constants from './constant';
 import { Popup } from '@syncfusion/ej2-popups';
-import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
+import { ColorPicker } from '@syncfusion/ej2-inputs';
 import { CheckBox } from '@syncfusion/ej2-buttons';
 /**
  * The Ribbon Component is a structured layout to manage tools with tabs and groups.
@@ -3325,7 +3325,7 @@ var Ribbon = /** @class */ (function (_super) {
      * @returns {void}
      */
     Ribbon.prototype.selectTab = function (tabId) {
-        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        var index = this.tabObj.getItemIndex(tabId);
         this.setProperties({ selectedTab: index });
     };
     /**
@@ -3351,7 +3351,7 @@ var Ribbon = /** @class */ (function (_super) {
         this.showHideTab(tabId, true, isContextual);
     };
     Ribbon.prototype.showHideTab = function (tabId, value, isContextual) {
-        var index = getIndex(this.tabs, function (e) { return e.id === tabId; });
+        var index = this.tabObj.getItemIndex(tabId);
         if (index === -1) {
             return;
         }

package/styles/bds-lite.css

@@ -297,6 +297,10 @@
   content: "\e729";
 }
 
+
+
+
+
 .e-ribbon.e-rbn {
   display: block;
   border-radius: unset;
@@ -1706,6 +1710,10 @@
   border-radius: 2px;
 }
 
+
+
+
+
 .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
   background: var(--color-sf-bg-secondary);
 }

package/styles/bds-lite.scss

@@ -1,18 +1,17 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bds-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bds-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-navigations/styles/menu/bds-definition.scss';
-@import 'ej2-navigations/styles/tab/bds-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bds-definition.scss';
-@import 'ribbon/bds-definition.scss';
-@import 'ribbon/icons/bds.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bds-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bds-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bds-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bds-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-navigations/styles/menu/bds-definition' as *;
+@use 'ej2-navigations/styles/tab/bds-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bds-definition' as *;
+@use 'ribbon/bds-definition' as *;
+@use 'ribbon/icons/bds' as *;
+@use 'ribbon/all.bds' as *;

package/styles/bds.css

@@ -297,6 +297,10 @@
   content: "\e729";
 }
 
+
+
+
+
 .e-ribbon.e-rbn {
   display: block;
   border-radius: unset;
@@ -1706,6 +1710,10 @@
   border-radius: 2px;
 }
 
+
+
+
+
 .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
   background: var(--color-sf-bg-secondary);
 }
@@ -2518,6 +2526,10 @@
   background: var(--color-sf-border-secondary);
 }
 
+
+
+
+
 .e-bigger.e-ribbon.e-rbn .e-ribbon-group,
 .e-bigger .e-ribbon.e-rbn .e-ribbon-group {
   height: 150px;

package/styles/bds.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bds.scss';
-@import 'ej2-popups/styles/tooltip/bds-definition.scss';
-@import 'ej2-buttons/styles/button/bds-definition.scss';
-@import 'ej2-buttons/styles/check-box/bds-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bds-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bds-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bds-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bds-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bds-definition.scss';
-@import 'ej2-navigations/styles/menu/bds-definition.scss';
-@import 'ej2-navigations/styles/tab/bds-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bds-definition.scss';
-@import 'ribbon/bds-definition.scss';
-@import 'ribbon/icons/bds.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-popups/styles/tooltip/bds-definition' as *;
+@use 'ej2-buttons/styles/button/bds-definition' as *;
+@use 'ej2-buttons/styles/check-box/bds-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bds-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bds-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bds-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bds-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bds-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bds-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bds-definition' as *;
+@use 'ej2-navigations/styles/menu/bds-definition' as *;
+@use 'ej2-navigations/styles/tab/bds-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bds-definition' as *;
+@use 'ribbon/bds-definition' as *;
+@use 'ribbon/icons/bds' as *;
+@use 'ribbon/all.bds' as *;
+@use 'ribbon/bigger.bds' as *;

package/styles/bootstrap-dark-lite.scss

@@ -1,18 +1,17 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap-dark-definition.scss';
-@import 'ribbon/bootstrap-dark-definition.scss';
-@import 'ribbon/icons/bootstrap-dark.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap-dark-definition' as *;
+@use 'ribbon/bootstrap-dark-definition' as *;
+@use 'ribbon/icons/bootstrap-dark' as *;
+@use 'ribbon/all.bootstrap-dark' as *;

package/styles/bootstrap-dark.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap-dark.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap-dark-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap-dark-definition.scss';
-@import 'ribbon/bootstrap-dark-definition.scss';
-@import 'ribbon/icons/bootstrap-dark.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap-dark-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap-dark-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap-dark-definition' as *;
+@use 'ribbon/bootstrap-dark-definition' as *;
+@use 'ribbon/icons/bootstrap-dark' as *;
+@use 'ribbon/all.bootstrap-dark' as *;
+@use 'ribbon/bigger.bootstrap-dark' as *;

package/styles/bootstrap-lite.scss

@@ -1,18 +1,17 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap-definition.scss';
-@import 'ribbon/bootstrap-definition.scss';
-@import 'ribbon/icons/bootstrap.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap-definition' as *;
+@use 'ribbon/bootstrap-definition' as *;
+@use 'ribbon/icons/bootstrap' as *;
+@use 'ribbon/all.bootstrap' as *;

package/styles/bootstrap.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap-definition.scss';
-@import 'ribbon/bootstrap-definition.scss';
-@import 'ribbon/icons/bootstrap.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap-definition' as *;
+@use 'ribbon/bootstrap-definition' as *;
+@use 'ribbon/icons/bootstrap' as *;
+@use 'ribbon/all.bootstrap' as *;
+@use 'ribbon/bigger.bootstrap' as *;

package/styles/bootstrap4-lite.scss

@@ -1,18 +1,17 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap4-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap4-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap4-definition.scss';
-@import 'ribbon/bootstrap4-definition.scss';
-@import 'ribbon/icons/bootstrap4.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap4-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap4-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap4-definition' as *;
+@use 'ribbon/bootstrap4-definition' as *;
+@use 'ribbon/icons/bootstrap4' as *;
+@use 'ribbon/all.bootstrap4' as *;

package/styles/bootstrap4.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap4.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap4-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap4-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap4-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap4-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap4-definition.scss';
-@import 'ribbon/bootstrap4-definition.scss';
-@import 'ribbon/icons/bootstrap4.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap4-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap4-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap4-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap4-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap4-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap4-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap4-definition' as *;
+@use 'ribbon/bootstrap4-definition' as *;
+@use 'ribbon/icons/bootstrap4' as *;
+@use 'ribbon/all.bootstrap4' as *;
+@use 'ribbon/bigger.bootstrap4' as *;

package/styles/bootstrap5-dark-lite.scss

@@ -1,18 +1,17 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap5-dark-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition.scss';
-@import 'ribbon/bootstrap5-dark-definition.scss';
-@import 'ribbon/icons/bootstrap5-dark.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap5-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap5-dark-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition' as *;
+@use 'ribbon/bootstrap5-dark-definition' as *;
+@use 'ribbon/icons/bootstrap5-dark' as *;
+@use 'ribbon/all.bootstrap5-dark' as *;

package/styles/bootstrap5-dark.scss

@@ -1,19 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap5-dark.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-dark-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-dark-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap5-dark-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap5-dark-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition.scss';
-@import 'ribbon/bootstrap5-dark-definition.scss';
-@import 'ribbon/icons/bootstrap5-dark.scss';
-@import 'ribbon/all.scss';
-@import 'ribbon/bigger.scss';
+@use 'ej2-popups/styles/tooltip/bootstrap5-dark-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-dark-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-dark-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap5-dark-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap5-dark-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap5-dark-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap5-dark-definition' as *;
+@use 'ribbon/bootstrap5-dark-definition' as *;
+@use 'ribbon/icons/bootstrap5-dark' as *;
+@use 'ribbon/all.bootstrap5-dark' as *;
+@use 'ribbon/bigger.bootstrap5-dark' as *;

package/styles/bootstrap5-lite.scss

@@ -1,18 +1,18 @@
-@import 'ej2-base/styles/definition/bootstrap5.scss';
-@import 'ej2-popups/styles/tooltip/bootstrap5-definition.scss';
-@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
-@import 'ej2-buttons/styles/check-box/bootstrap5-definition.scss';
-@import 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-base/bootstrap5-definition.scss';
-@import 'ej2-dropdowns/styles/drop-down-list/bootstrap5-definition.scss';
-@import 'ej2-dropdowns/styles/combo-box/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/h-scroll/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/v-scroll/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/context-menu/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/toolbar/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/menu/bootstrap5-definition.scss';
-@import 'ej2-navigations/styles/tab/bootstrap5-definition.scss';
-@import 'ej2-inputs/styles/color-picker/bootstrap5-definition.scss';
-@import 'ribbon/bootstrap5-definition.scss';
-@import 'ribbon/icons/bootstrap5.scss';
-@import 'ribbon/all.scss';
+@use 'ej2-base/styles/definition/bootstrap5' as *;
+@use 'ej2-popups/styles/tooltip/bootstrap5-definition' as *;
+@use 'ej2-buttons/styles/button/bootstrap5-definition' as *;
+@use 'ej2-buttons/styles/check-box/bootstrap5-definition' as *;
+@use 'ej2-splitbuttons/styles/drop-down-button/bootstrap5-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-base/bootstrap5-definition' as *;
+@use 'ej2-dropdowns/styles/drop-down-list/bootstrap5-definition' as *;
+@use 'ej2-dropdowns/styles/combo-box/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/h-scroll/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/v-scroll/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/context-menu/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/toolbar/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/menu/bootstrap5-definition' as *;
+@use 'ej2-navigations/styles/tab/bootstrap5-definition' as *;
+@use 'ej2-inputs/styles/color-picker/bootstrap5-definition' as *;
+@use 'ribbon/bootstrap5-definition' as *;
+@use 'ribbon/icons/bootstrap5' as *;
+@use 'ribbon/all.bootstrap5' as *;