@syncfusion/ej2-ribbon 24.2.3 → 25.1.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/CHANGELOG.md +7 -5
  2. package/README.md +3 -0
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/ej2-ribbon.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-ribbon.es2015.js +2053 -138
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +2182 -147
  8. package/dist/es6/ej2-ribbon.es5.js.map +1 -1
  9. package/dist/global/ej2-ribbon.min.js +2 -2
  10. package/dist/global/ej2-ribbon.min.js.map +1 -1
  11. package/dist/global/index.d.ts +1 -1
  12. package/package.json +13 -13
  13. package/src/global.js +1 -1
  14. package/src/ribbon/base/constant.d.ts +8 -0
  15. package/src/ribbon/base/constant.js +8 -0
  16. package/src/ribbon/base/interface.d.ts +114 -1
  17. package/src/ribbon/base/interface.js +4 -0
  18. package/src/ribbon/base/ribbon-model.d.ts +22 -1
  19. package/src/ribbon/base/ribbon.d.ts +67 -5
  20. package/src/ribbon/base/ribbon.js +459 -77
  21. package/src/ribbon/base/utils.d.ts +3 -2
  22. package/src/ribbon/base/utils.js +3 -2
  23. package/src/ribbon/items/index.d.ts +1 -0
  24. package/src/ribbon/items/index.js +1 -0
  25. package/src/ribbon/items/ribbon-colorpicker.js +6 -1
  26. package/src/ribbon/items/ribbon-gallery.d.ts +87 -0
  27. package/src/ribbon/items/ribbon-gallery.js +712 -0
  28. package/src/ribbon/items/ribbon-groupbutton.js +3 -0
  29. package/src/ribbon/models/index.d.ts +8 -0
  30. package/src/ribbon/models/index.js +4 -0
  31. package/src/ribbon/models/ribbon-back-stage-settings-model.d.ts +7 -0
  32. package/src/ribbon/models/ribbon-back-stage-settings.d.ts +6 -0
  33. package/src/ribbon/models/ribbon-back-stage-settings.js +3 -0
  34. package/src/ribbon/models/ribbon-backstage-item-model.d.ts +7 -0
  35. package/src/ribbon/models/ribbon-backstage-item.d.ts +6 -0
  36. package/src/ribbon/models/ribbon-backstage-item.js +3 -0
  37. package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts +30 -0
  38. package/src/ribbon/models/ribbon-contextual-tab-settings.d.ts +33 -0
  39. package/src/ribbon/models/ribbon-contextual-tab-settings.js +50 -0
  40. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +7 -0
  41. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +6 -0
  42. package/src/ribbon/models/ribbon-file-menu-settings.js +3 -0
  43. package/src/ribbon/models/ribbon-gallery-group-model.d.ts +44 -0
  44. package/src/ribbon/models/ribbon-gallery-group.d.ts +38 -0
  45. package/src/ribbon/models/ribbon-gallery-group.js +47 -0
  46. package/src/ribbon/models/ribbon-gallery-item-model.d.ts +43 -0
  47. package/src/ribbon/models/ribbon-gallery-item.d.ts +38 -0
  48. package/src/ribbon/models/ribbon-gallery-item.js +46 -0
  49. package/src/ribbon/models/ribbon-gallery-settings-model.d.ts +108 -0
  50. package/src/ribbon/models/ribbon-gallery-settings.d.ts +95 -0
  51. package/src/ribbon/models/ribbon-gallery-settings.js +71 -0
  52. package/src/ribbon/models/ribbon-group-button-item-model.d.ts +7 -0
  53. package/src/ribbon/models/ribbon-group-button-item.d.ts +6 -0
  54. package/src/ribbon/models/ribbon-group-button-item.js +3 -0
  55. package/src/ribbon/models/ribbon-group-model.d.ts +14 -0
  56. package/src/ribbon/models/ribbon-group.d.ts +12 -0
  57. package/src/ribbon/models/ribbon-group.js +6 -0
  58. package/src/ribbon/models/ribbon-item-model.d.ts +15 -1
  59. package/src/ribbon/models/ribbon-item.d.ts +13 -0
  60. package/src/ribbon/models/ribbon-item.js +7 -0
  61. package/src/ribbon/models/ribbon-tab-model.d.ts +7 -0
  62. package/src/ribbon/models/ribbon-tab.d.ts +6 -0
  63. package/src/ribbon/models/ribbon-tab.js +3 -0
  64. package/src/ribbon/modules/index.d.ts +2 -0
  65. package/src/ribbon/modules/index.js +2 -0
  66. package/src/ribbon/modules/ribbon-backstage.d.ts +2 -0
  67. package/src/ribbon/modules/ribbon-backstage.js +37 -0
  68. package/src/ribbon/modules/ribbon-contextualtab.d.ts +27 -0
  69. package/src/ribbon/modules/ribbon-contextualtab.js +90 -0
  70. package/src/ribbon/modules/ribbon-filemenu.d.ts +2 -0
  71. package/src/ribbon/modules/ribbon-filemenu.js +19 -0
  72. package/src/ribbon/modules/ribbon-keytip.d.ts +54 -0
  73. package/src/ribbon/modules/ribbon-keytip.js +554 -0
  74. package/styles/bootstrap-dark.css +398 -24
  75. package/styles/bootstrap.css +389 -15
  76. package/styles/bootstrap4.css +398 -24
  77. package/styles/bootstrap5-dark.css +391 -17
  78. package/styles/bootstrap5.css +391 -17
  79. package/styles/fabric-dark.css +390 -16
  80. package/styles/fabric.css +387 -13
  81. package/styles/fluent-dark.css +389 -15
  82. package/styles/fluent.css +389 -15
  83. package/styles/highcontrast-light.css +381 -7
  84. package/styles/highcontrast.css +390 -16
  85. package/styles/material-dark.css +391 -17
  86. package/styles/material.css +391 -17
  87. package/styles/material3-dark.css +389 -15
  88. package/styles/material3.css +389 -15
  89. package/styles/ribbon/_bds-definition.scss +360 -0
  90. package/styles/ribbon/_bootstrap-dark-definition.scss +81 -6
  91. package/styles/ribbon/_bootstrap-definition.scss +81 -6
  92. package/styles/ribbon/_bootstrap4-definition.scss +82 -7
  93. package/styles/ribbon/_bootstrap5-definition.scss +81 -6
  94. package/styles/ribbon/_fabric-dark-definition.scss +79 -4
  95. package/styles/ribbon/_fabric-definition.scss +78 -3
  96. package/styles/ribbon/_fluent-definition.scss +80 -5
  97. package/styles/ribbon/_fusionnew-definition.scss +76 -1
  98. package/styles/ribbon/_highcontrast-definition.scss +80 -5
  99. package/styles/ribbon/_highcontrast-light-definition.scss +76 -1
  100. package/styles/ribbon/_layout.scss +344 -38
  101. package/styles/ribbon/_material-dark-definition.scss +80 -5
  102. package/styles/ribbon/_material-definition.scss +81 -6
  103. package/styles/ribbon/_material3-definition.scss +80 -5
  104. package/styles/ribbon/_tailwind-definition.scss +80 -5
  105. package/styles/ribbon/_theme.scss +71 -0
  106. package/styles/ribbon/bootstrap-dark.css +398 -24
  107. package/styles/ribbon/bootstrap.css +389 -15
  108. package/styles/ribbon/bootstrap4.css +398 -24
  109. package/styles/ribbon/bootstrap5-dark.css +391 -17
  110. package/styles/ribbon/bootstrap5.css +391 -17
  111. package/styles/ribbon/fabric-dark.css +390 -16
  112. package/styles/ribbon/fabric.css +387 -13
  113. package/styles/ribbon/fluent-dark.css +389 -15
  114. package/styles/ribbon/fluent.css +389 -15
  115. package/styles/ribbon/highcontrast-light.css +381 -7
  116. package/styles/ribbon/highcontrast.css +390 -16
  117. package/styles/ribbon/icons/_bds.scss +9 -0
  118. package/styles/ribbon/material-dark.css +391 -17
  119. package/styles/ribbon/material.css +391 -17
  120. package/styles/ribbon/material3-dark.css +389 -15
  121. package/styles/ribbon/material3.css +389 -15
  122. package/styles/ribbon/tailwind-dark.css +390 -16
  123. package/styles/ribbon/tailwind.css +390 -16
  124. package/styles/tailwind-dark.css +390 -16
  125. package/styles/tailwind.css +390 -16
  126. package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -60
  127. package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -37
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 24.2.3
3
+ * version : 25.1.35
4
4
  * Copyright Syncfusion Inc. 2001 - 2023. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-ribbon@*",
3
- "_id": "@syncfusion/ej2-ribbon@24.1.44",
3
+ "_id": "@syncfusion/ej2-ribbon@21.29.0",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-ATh/cX903EDYFrNVGVp8WJf5Bb+cgft1xqTXF6tsKxUuEKCfm+5EAjXQWWu5qB/gJsX4rOu/zImTbZMgabhETA==",
5
+ "_integrity": "sha512-VYJvBTL4kiCK3QCcu6kdGp8ymjBNjEk1AaJVIZbqJdyp4r3sJCBqy6SAymQ9pM6woSvFMplL37Bj/IyIGe/yRw==",
6
6
  "_location": "/@syncfusion/ej2-ribbon",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -23,10 +23,10 @@
23
23
  "/@syncfusion/ej2-react-ribbon",
24
24
  "/@syncfusion/ej2-vue-ribbon"
25
25
  ],
26
- "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-24.1.44.tgz",
27
- "_shasum": "b14c7fceb54d1d85cb6e5b0a96a65596a2058705",
26
+ "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-release/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.29.0.tgz",
27
+ "_shasum": "62a1aec44f748a1b923e70e0b5a1bbf54e230458",
28
28
  "_spec": "@syncfusion/ej2-ribbon@*",
29
- "_where": "/jenkins/workspace/elease-automation_release_24.1.1/packages/included",
29
+ "_where": "/jenkins/workspace/elease-automation_release_25.1.1/packages/included",
30
30
  "author": {
31
31
  "name": "Syncfusion Inc."
32
32
  },
@@ -35,13 +35,13 @@
35
35
  },
36
36
  "bundleDependencies": false,
37
37
  "dependencies": {
38
- "@syncfusion/ej2-base": "~24.2.3",
39
- "@syncfusion/ej2-buttons": "~24.2.3",
40
- "@syncfusion/ej2-dropdowns": "~24.2.3",
41
- "@syncfusion/ej2-lists": "~24.2.3",
42
- "@syncfusion/ej2-navigations": "~24.2.3",
43
- "@syncfusion/ej2-popups": "~24.2.3",
44
- "@syncfusion/ej2-splitbuttons": "~24.2.3"
38
+ "@syncfusion/ej2-base": "~25.1.35",
39
+ "@syncfusion/ej2-buttons": "~25.1.35",
40
+ "@syncfusion/ej2-dropdowns": "~25.1.35",
41
+ "@syncfusion/ej2-lists": "~25.1.35",
42
+ "@syncfusion/ej2-navigations": "~25.1.35",
43
+ "@syncfusion/ej2-popups": "~25.1.35",
44
+ "@syncfusion/ej2-splitbuttons": "~25.1.35"
45
45
  },
46
46
  "deprecated": false,
47
47
  "description": "Essential JS 2 Component",
@@ -62,6 +62,6 @@
62
62
  "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
63
63
  },
64
64
  "typings": "index.d.ts",
65
- "version": "24.2.3",
65
+ "version": "25.1.35",
66
66
  "sideEffects": false
67
67
  }
package/src/global.js CHANGED
@@ -1,3 +1,3 @@
1
1
  import * as index from './index';
2
- index.Ribbon.Inject(index.RibbonButton, index.RibbonDropDown, index.RibbonSplitButton, index.RibbonCheckBox, index.RibbonColorPicker, index.RibbonComboBox, index.RibbonGroupButton, index.RibbonFileMenu, index.RibbonBackstage);
2
+ index.Ribbon.Inject(index.RibbonButton, index.RibbonDropDown, index.RibbonSplitButton, index.RibbonCheckBox, index.RibbonColorPicker, index.RibbonComboBox, index.RibbonGroupButton, index.RibbonFileMenu, index.RibbonBackstage, index.RibbonKeyTip, index.RibbonContextualTab, index.RibbonGallery);
3
3
  export * from './index';
@@ -24,6 +24,8 @@ export declare const RIBBON_POPUP_CONTROL: string;
24
24
  /** @hidden */
25
25
  export declare const RIBBON_POPUP_OPEN: string;
26
26
  /** @hidden */
27
+ export declare const RIBBON_KEYTIP: string;
28
+ /** @hidden */
27
29
  export declare const SPACE: string;
28
30
  /** @hidden */
29
31
  export declare const HORIZONTAL_SCROLLBAR: string;
@@ -32,6 +34,8 @@ export declare const HIDE_CSS: string;
32
34
  /** @hidden */
33
35
  export declare const RIBBON_TAB: string;
34
36
  /** @hidden */
37
+ export declare const RIBBON_CONTEXTUAL_TAB: string;
38
+ /** @hidden */
35
39
  export declare const RIBBON_TAB_ACTIVE: string;
36
40
  /** @hidden */
37
41
  export declare const RIBBON_TAB_ITEM: string;
@@ -64,6 +68,8 @@ export declare const RIBBON_GROUP_BUTTON: string;
64
68
  /** @hidden */
65
69
  export declare const RIBBON_GROUP_BUTTON_OVERFLOW_POPUP: string;
66
70
  /** @hidden */
71
+ export declare const RIBBON_GROUP_BUTTON_CONTENT: string;
72
+ /** @hidden */
67
73
  export declare const RIBBON_GROUP_CONTAINER: string;
68
74
  /** @hidden */
69
75
  export declare const RIBBON_OF_TAB_CONTAINER: string;
@@ -188,6 +194,8 @@ export declare const RIBBON_HELP_PANE_TEMPLATE_ID: string;
188
194
  /** @hidden */
189
195
  export declare const RIBBON_GROUP_BUTTON_ID: string;
190
196
  /** @hidden */
197
+ export declare const RIBBON_KEYTIP_ID: string;
198
+ /** @hidden */
191
199
  export declare const RIBBON_FILE_MENU_WIDTH: string;
192
200
  /** @hidden */
193
201
  export declare const RIBBON_HELP_PANE_TEMPLATE_WIDTH: string;
@@ -24,6 +24,8 @@ export var RIBBON_POPUP_CONTROL = 'e-ribbon-popup-control';
24
24
  /** @hidden */
25
25
  export var RIBBON_POPUP_OPEN = 'e-ribbon-open';
26
26
  /** @hidden */
27
+ export var RIBBON_KEYTIP = 'e-ribbon-keytip';
28
+ /** @hidden */
27
29
  export var SPACE = ' ';
28
30
  /** @hidden */
29
31
  export var HORIZONTAL_SCROLLBAR = 'e-hscroll-bar';
@@ -32,6 +34,8 @@ export var HIDE_CSS = 'e-ribbon-hide';
32
34
  /** @hidden */
33
35
  export var RIBBON_TAB = 'e-ribbon-tab';
34
36
  /** @hidden */
37
+ export var RIBBON_CONTEXTUAL_TAB = 'e-ribbon-contextual-tab';
38
+ /** @hidden */
35
39
  export var RIBBON_TAB_ACTIVE = 'e-ribbon-active';
36
40
  /** @hidden */
37
41
  export var RIBBON_TAB_ITEM = 'e-ribbon-tab-item';
@@ -64,6 +68,8 @@ export var RIBBON_GROUP_BUTTON = 'e-ribbon-group-button';
64
68
  /** @hidden */
65
69
  export var RIBBON_GROUP_BUTTON_OVERFLOW_POPUP = 'e-ribbon-group-button-overflow-popup';
66
70
  /** @hidden */
71
+ export var RIBBON_GROUP_BUTTON_CONTENT = 'e-ribbon-group-button-content';
72
+ /** @hidden */
67
73
  export var RIBBON_GROUP_CONTAINER = 'e-ribbon-group-container';
68
74
  /** @hidden */
69
75
  export var RIBBON_OF_TAB_CONTAINER = 'e-ribbon-of-tab';
@@ -188,6 +194,8 @@ export var RIBBON_HELP_PANE_TEMPLATE_ID = '_helppanetemplate';
188
194
  /** @hidden */
189
195
  export var RIBBON_GROUP_BUTTON_ID = '_grpbtn';
190
196
  /** @hidden */
197
+ export var RIBBON_KEYTIP_ID = '_keytip';
198
+ /** @hidden */
191
199
  export var RIBBON_FILE_MENU_WIDTH = '--fileMenuWidth';
192
200
  /** @hidden */
193
201
  export var RIBBON_HELP_PANE_TEMPLATE_WIDTH = '--helpTemplateWidth';
@@ -1,5 +1,5 @@
1
1
  import { BaseEventArgs } from '@syncfusion/ej2-base';
2
- import { RibbonCollectionModel, RibbonGroupButtonItemModel, RibbonGroupModel, RibbonItemModel, RibbonTooltipModel } from '../models';
2
+ import { RibbonCollectionModel, RibbonGalleryItemModel, RibbonGroupButtonItemModel, RibbonGroupModel, RibbonItemModel, RibbonTooltipModel } from '../models';
3
3
  /**
4
4
  * Defines the layout types of ribbon.
5
5
  */
@@ -100,6 +100,10 @@ export declare enum RibbonItemType {
100
100
  * Renders the group button content as ribbon item.
101
101
  */
102
102
  GroupButton = "GroupButton",
103
+ /**
104
+ * Renders the gallery as ribbon item.
105
+ */
106
+ Gallery = "Gallery",
103
107
  /**
104
108
  * Renders the template content as ribbon item.
105
109
  */
@@ -138,6 +142,10 @@ export interface TabSelectingEventArgs extends BaseEventArgs {
138
142
  * Defines the index of the selected tab.
139
143
  */
140
144
  selectedIndex: number;
145
+ /**
146
+ * Defines whether the tab is a contextual tab.
147
+ */
148
+ isContextual: boolean;
141
149
  }
142
150
  /**
143
151
  * Event triggers after selecting the tab item.
@@ -151,6 +159,10 @@ export interface TabSelectedEventArgs extends BaseEventArgs {
151
159
  * Defines the index of the selected tab.
152
160
  */
153
161
  selectedIndex: number;
162
+ /**
163
+ * Defines whether the tab is a contextual tab.
164
+ */
165
+ isContextual: boolean;
154
166
  }
155
167
  /**
156
168
  * Event triggers before expanding and before collapsing the ribbon.
@@ -217,6 +229,107 @@ export interface OverflowPopupEventArgs extends BaseEventArgs {
217
229
  */
218
230
  cancel?: boolean;
219
231
  }
232
+ /**
233
+ * Event triggers when the gallery popup open / close.
234
+ */
235
+ export interface GalleryPopupEventArgs extends BaseEventArgs {
236
+ /**
237
+ * Defines whether to cancel the gallery popup open or close.
238
+ */
239
+ cancel: boolean;
240
+ /**
241
+ * Provides the original event.
242
+ */
243
+ event: Event;
244
+ /**
245
+ * Specifies name of the event.
246
+ */
247
+ name: string;
248
+ }
249
+ /**
250
+ * Event triggers when a user hovers over a gallery item.
251
+ */
252
+ export interface GalleryHoverEventArgs extends BaseEventArgs {
253
+ /**
254
+ * Provides the original event.
255
+ */
256
+ event: Event;
257
+ /**
258
+ * Specifies name of the event.
259
+ */
260
+ name: string;
261
+ /**
262
+ * Provides gallery item.
263
+ */
264
+ item: RibbonGalleryItemModel;
265
+ }
266
+ /**
267
+ * Event triggers before rendering each gallery item.
268
+ */
269
+ export interface GalleryItemEventArgs extends BaseEventArgs {
270
+ /**
271
+ * Specifies name of the event.
272
+ */
273
+ name: string;
274
+ /**
275
+ * Provides gallery item.
276
+ */
277
+ item: RibbonGalleryItemModel;
278
+ }
279
+ /**
280
+ * Event triggers before selecting gallery item.
281
+ */
282
+ export interface GalleryBeforeSelectEventArgs extends BaseEventArgs {
283
+ /**
284
+ * Provides the previous selected gallery item.
285
+ */
286
+ previousItem: RibbonGalleryItemModel;
287
+ /**
288
+ * Provides the current selecting gallery item.
289
+ */
290
+ currentItem: RibbonGalleryItemModel;
291
+ /**
292
+ * Defines whether to cancel the selecting event or not.
293
+ */
294
+ cancel: boolean;
295
+ /**
296
+ * Specifies name of the event.
297
+ */
298
+ name: string;
299
+ /**
300
+ * Provides whether the change is triggered by user interaction.
301
+ */
302
+ isInteracted: boolean;
303
+ /**
304
+ * Provides the original event.
305
+ */
306
+ event: Event;
307
+ }
308
+ /**
309
+ * Event triggers after selected gallery item.
310
+ */
311
+ export interface GallerySelectEventArgs extends BaseEventArgs {
312
+ /**
313
+ * Provides the previous selected gallery item.
314
+ */
315
+ previousItem: RibbonGalleryItemModel;
316
+ /**
317
+ * Provides the current selected gallery item.
318
+ */
319
+ currentItem: RibbonGalleryItemModel;
320
+ /**
321
+ * Specifies name of the event.
322
+ */
323
+ name: string;
324
+ /**
325
+ * Provides whether the change is triggered by user interaction.
326
+ */
327
+ isInteracted: boolean;
328
+ /**
329
+ * Provides the original event.
330
+ */
331
+ event: Event;
332
+ }
220
333
  /** @hidden */
221
334
  export interface itemProps {
222
335
  item?: RibbonItemModel;
@@ -103,6 +103,10 @@ export var RibbonItemType;
103
103
  * Renders the group button content as ribbon item.
104
104
  */
105
105
  RibbonItemType["GroupButton"] = "GroupButton";
106
+ /**
107
+ * Renders the gallery as ribbon item.
108
+ */
109
+ RibbonItemType["Gallery"] = "Gallery";
106
110
  /**
107
111
  * Renders the template content as ribbon item.
108
112
  */
@@ -1,4 +1,4 @@
1
- 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 } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } 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 } 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';
1
+ 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, MouseEventArgs } 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, RibbonGallerySettingsModel, RibbonGallerySettings } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, OverflowPopupEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } 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';
2
2
  import {ComponentModel} from '@syncfusion/ej2-base';
3
3
 
4
4
  /**
@@ -25,6 +25,20 @@ export interface RibbonModel extends ComponentModel{
25
25
  */
26
26
  cssClass?: string;
27
27
 
28
+ /**
29
+ * Defines whether to enable the key tip or not.
30
+ *
31
+ * @default false
32
+ */
33
+ enableKeyTips?: boolean;
34
+
35
+ /**
36
+ * Defines the key tip text for the layoutSwitcher icon.
37
+ *
38
+ * @default ''
39
+ */
40
+ layoutSwitcherKeyTip?: string;
41
+
28
42
  /**
29
43
  * Defines the properties of ribbon file menu.
30
44
  *
@@ -82,6 +96,13 @@ export interface RibbonModel extends ComponentModel{
82
96
  */
83
97
  tabs?: RibbonTabModel[];
84
98
 
99
+ /**
100
+ * Defines the properties of ribbon contextual tab.
101
+ *
102
+ * @default []
103
+ */
104
+ contextualTabs?: RibbonContextualTabSettingsModel[];
105
+
85
106
  /**
86
107
  * Specifies the width of the ribbon.
87
108
  *
@@ -1,12 +1,14 @@
1
1
  import { Component, EmitType } from '@syncfusion/ej2-base';
2
2
  import { INotifyPropertyChanged, ModuleDeclaration } from '@syncfusion/ej2-base';
3
3
  import { Tab, TabAnimationSettingsModel } from '@syncfusion/ej2-navigations';
4
- import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel } from '../models/index';
4
+ import { RibbonTabModel, RibbonGroupModel, RibbonCollectionModel, RibbonItemModel, FileMenuSettingsModel, BackStageMenuModel, RibbonContextualTabSettingsModel } from '../models/index';
5
5
  import { RibbonModel } from './ribbon-model';
6
6
  import { ExpandCollapseEventArgs, LauncherClickEventArgs, OverflowPopupEventArgs, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';
7
7
  import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton, RibbonGroupButton } from '../items/index';
8
- import { RibbonFileMenu, RibbonBackstage } from '../modules/index';
8
+ import { RibbonFileMenu, RibbonBackstage, RibbonKeyTip } from '../modules/index';
9
9
  import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
10
+ import { RibbonContextualTab } from '../modules/ribbon-contextualtab';
11
+ import { RibbonGallery } from '../items/ribbon-gallery';
10
12
  /**
11
13
  * The Ribbon Component is a structured layout to manage tools with tabs and groups.
12
14
  */
@@ -28,6 +30,18 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
28
30
  * @default ''
29
31
  */
30
32
  cssClass: string;
33
+ /**
34
+ * Defines whether to enable the key tip or not.
35
+ *
36
+ * @default false
37
+ */
38
+ enableKeyTips: boolean;
39
+ /**
40
+ * Defines the key tip text for the layoutSwitcher icon.
41
+ *
42
+ * @default ''
43
+ */
44
+ layoutSwitcherKeyTip: string;
31
45
  /**
32
46
  * Defines the properties of ribbon file menu.
33
47
  *
@@ -77,6 +91,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
77
91
  * @default []
78
92
  */
79
93
  tabs: RibbonTabModel[];
94
+ /**
95
+ * Defines the properties of ribbon contextual tab.
96
+ *
97
+ * @default []
98
+ */
99
+ contextualTabs: RibbonContextualTabSettingsModel[];
80
100
  /**
81
101
  * Specifies the width of the ribbon.
82
102
  *
@@ -172,6 +192,10 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
172
192
  * The `ribbonComboBoxModule` is used to create and manipulate combobox in ribbon item.
173
193
  */
174
194
  ribbonComboBoxModule: RibbonComboBox;
195
+ /**
196
+ * The `ribbonGalleryModule` is used to create and manipulate gallery in ribbon item.
197
+ */
198
+ ribbonGalleryModule: RibbonGallery;
175
199
  /**
176
200
  * The `ribbonFileMenuModule` is used to create and manipulate the ribbon file menu.
177
201
  */
@@ -184,6 +208,14 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
184
208
  * The `ribbonGroupButtonModule` is used to create and manipulate group button in ribbon item.
185
209
  */
186
210
  ribbonGroupButtonModule: RibbonGroupButton;
211
+ /**
212
+ * The `ribbonContextualTabModule` is used to create and manipulate group button in ribbon item.
213
+ */
214
+ ribbonContextualTabModule: RibbonContextualTab;
215
+ /**
216
+ * The `ribbonKeytipModule` is used to create and manipulate the ribbon keytip.
217
+ */
218
+ ribbonKeyTipModule: RibbonKeyTip;
187
219
  private itemIndex;
188
220
  private idIndex;
189
221
  private isAddRemove;
@@ -197,6 +229,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
197
229
  private hiddenElements;
198
230
  private hiddenGroups;
199
231
  /** @hidden */
232
+ keysPress: string;
233
+ /** @hidden */
234
+ keyTipElements: {
235
+ [key: string]: object;
236
+ };
237
+ /** @hidden */
200
238
  overflowDDB: DropDownButton;
201
239
  /** @hidden */
202
240
  tabsInternal: RibbonTabModel[];
@@ -204,6 +242,8 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
204
242
  tabObj: Tab;
205
243
  /** @hidden */
206
244
  tooltipData: ribbonTooltipData[];
245
+ /** @hidden */
246
+ isKeytipOpen: boolean;
207
247
  /**
208
248
  * Constructor for creating the widget.
209
249
  *
@@ -245,12 +285,19 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
245
285
  private keyActionHandler;
246
286
  private handleNavigation;
247
287
  private resizeHandler;
288
+ private mouseEventHandler;
289
+ private keytipActionHandler;
290
+ private checkKeyTipPresent;
291
+ private removeKeytip;
292
+ private addKeyTip;
248
293
  private renderTabs;
249
294
  private minimize;
250
295
  private toggleLayout;
251
296
  private tabCreated;
252
297
  private ribbonTabSelected;
298
+ private updateSelectedState;
253
299
  private checkOverflow;
300
+ private addTabOverflowKeyTip;
254
301
  private checkSimplifiedItemShrinking;
255
302
  private checkSimplifiedItemExpanding;
256
303
  private createSimplfiedOverflow;
@@ -278,6 +325,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
278
325
  private getGroupResizeOrder;
279
326
  private destroyScroll;
280
327
  private clearOverflowDropDown;
328
+ private isContextualTab;
281
329
  private ribbonTabSelecting;
282
330
  private createTabItems;
283
331
  private renderInitialTab;
@@ -307,7 +355,14 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
307
355
  private removeLauncherIcon;
308
356
  private destroyTabItems;
309
357
  private destroyFunction;
310
- private getItemModuleName;
358
+ /**
359
+ * Gets the item module name.
360
+ *
361
+ * @param {RibbonItemModel} item - Gets the ribbon item model.
362
+ * @returns {void}
363
+ * @hidden
364
+ */
365
+ getItemModuleName(item: RibbonItemModel): string;
311
366
  private clearOverflowResize;
312
367
  /**
313
368
  * Refreshes the layout.
@@ -328,14 +383,14 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
328
383
  * @param {string} tabId - The ID of the tab to be shown.
329
384
  * @returns {void}
330
385
  */
331
- showTab(tabId: string): void;
386
+ showTab(tabId: string, isContextual?: boolean): void;
332
387
  /**
333
388
  * Hides a specific tab in the ribbon.
334
389
  *
335
390
  * @param {string} tabId - The ID of the tab to be hidden.
336
391
  * @returns {void}
337
392
  */
338
- hideTab(tabId: string): void;
393
+ hideTab(tabId: string, isContextual?: boolean): void;
339
394
  private showHideTab;
340
395
  /**
341
396
  * Enables a specific tab in the ribbon.
@@ -518,6 +573,13 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
518
573
  * @returns {void}
519
574
  */
520
575
  disableItem(itemId: string): void;
576
+ /**
577
+ * Gets the Ribbon item model associated with the specified item ID.
578
+ *
579
+ * @param {string} itemId - The unique ID of the Ribbon item.
580
+ * @returns {RibbonItemModel}
581
+ */
582
+ getItem(itemId: string): RibbonItemModel;
521
583
  private enableDisableItem;
522
584
  private unwireEvents;
523
585
  destroy(): void;