@syncfusion/ej2-ribbon 21.2.3 → 22.1.39

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 (102) hide show
  1. package/.eslintrc.json +1 -0
  2. package/CHANGELOG.md +8 -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 +1254 -165
  6. package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
  7. package/dist/es6/ej2-ribbon.es5.js +1275 -180
  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 +16 -13
  13. package/src/ribbon/base/interface.d.ts +6 -6
  14. package/src/ribbon/base/interface.js +6 -6
  15. package/src/ribbon/base/ribbon-model.d.ts +2 -2
  16. package/src/ribbon/base/ribbon.d.ts +43 -1
  17. package/src/ribbon/base/ribbon.js +1074 -163
  18. package/src/ribbon/base/utils.d.ts +2 -2
  19. package/src/ribbon/base/utils.js +16 -10
  20. package/src/ribbon/items/ribbon-button.js +1 -0
  21. package/src/ribbon/items/ribbon-checkbox.js +1 -0
  22. package/src/ribbon/items/ribbon-colorpicker.js +1 -0
  23. package/src/ribbon/items/ribbon-combobox.js +1 -0
  24. package/src/ribbon/items/ribbon-dropdown.d.ts +7 -1
  25. package/src/ribbon/items/ribbon-dropdown.js +152 -1
  26. package/src/ribbon/items/ribbon-splitbutton.js +24 -0
  27. package/src/ribbon/models/ribbon-combobox-settings-model.d.ts +10 -5
  28. package/src/ribbon/models/ribbon-combobox-settings.d.ts +10 -5
  29. package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +3 -1
  30. package/src/ribbon/models/ribbon-file-menu-settings.d.ts +3 -1
  31. package/src/ribbon/models/ribbon-item-model.d.ts +1 -1
  32. package/src/ribbon/models/ribbon-item.d.ts +1 -1
  33. package/styles/bootstrap-dark.css +27 -0
  34. package/styles/bootstrap.css +27 -0
  35. package/styles/bootstrap4.css +27 -0
  36. package/styles/bootstrap5-dark.css +27 -0
  37. package/styles/bootstrap5.css +27 -0
  38. package/styles/fabric-dark.css +27 -0
  39. package/styles/fabric.css +27 -0
  40. package/styles/fluent-dark.css +27 -0
  41. package/styles/fluent.css +27 -0
  42. package/styles/highcontrast-light.css +27 -0
  43. package/styles/highcontrast.css +31 -4
  44. package/styles/material-dark.css +27 -0
  45. package/styles/material.css +27 -0
  46. package/styles/material3-dark.css +1672 -0
  47. package/styles/material3-dark.scss +3 -0
  48. package/styles/material3.css +1728 -0
  49. package/styles/material3.scss +3 -0
  50. package/styles/ribbon/_bootstrap-dark-definition.scss +4 -0
  51. package/styles/ribbon/_bootstrap-definition.scss +4 -0
  52. package/styles/ribbon/_bootstrap4-definition.scss +4 -0
  53. package/styles/ribbon/_bootstrap5-definition.scss +4 -0
  54. package/styles/ribbon/_fabric-dark-definition.scss +4 -0
  55. package/styles/ribbon/_fabric-definition.scss +4 -0
  56. package/styles/ribbon/_fluent-definition.scss +4 -0
  57. package/styles/ribbon/_fusionnew-definition.scss +4 -0
  58. package/styles/ribbon/_highcontrast-definition.scss +6 -2
  59. package/styles/ribbon/_highcontrast-light-definition.scss +4 -0
  60. package/styles/ribbon/_layout.scss +28 -0
  61. package/styles/ribbon/_material-dark-definition.scss +4 -0
  62. package/styles/ribbon/_material-definition.scss +4 -0
  63. package/styles/ribbon/_material3-dark-definition.scss +1 -0
  64. package/styles/ribbon/_material3-definition.scss +210 -0
  65. package/styles/ribbon/_tailwind-definition.scss +4 -0
  66. package/styles/ribbon/bootstrap-dark.css +27 -0
  67. package/styles/ribbon/bootstrap-dark.scss +1 -0
  68. package/styles/ribbon/bootstrap.css +27 -0
  69. package/styles/ribbon/bootstrap.scss +1 -0
  70. package/styles/ribbon/bootstrap4.css +27 -0
  71. package/styles/ribbon/bootstrap4.scss +1 -0
  72. package/styles/ribbon/bootstrap5-dark.css +27 -0
  73. package/styles/ribbon/bootstrap5-dark.scss +1 -0
  74. package/styles/ribbon/bootstrap5.css +27 -0
  75. package/styles/ribbon/bootstrap5.scss +1 -0
  76. package/styles/ribbon/fabric-dark.css +27 -0
  77. package/styles/ribbon/fabric-dark.scss +1 -0
  78. package/styles/ribbon/fabric.css +27 -0
  79. package/styles/ribbon/fabric.scss +1 -0
  80. package/styles/ribbon/fluent-dark.css +27 -0
  81. package/styles/ribbon/fluent-dark.scss +1 -0
  82. package/styles/ribbon/fluent.css +27 -0
  83. package/styles/ribbon/fluent.scss +1 -0
  84. package/styles/ribbon/highcontrast-light.css +27 -0
  85. package/styles/ribbon/highcontrast-light.scss +1 -0
  86. package/styles/ribbon/highcontrast.css +31 -4
  87. package/styles/ribbon/highcontrast.scss +1 -0
  88. package/styles/ribbon/icons/_material3-dark.scss +1 -0
  89. package/styles/ribbon/material-dark.css +27 -0
  90. package/styles/ribbon/material-dark.scss +1 -0
  91. package/styles/ribbon/material.css +27 -0
  92. package/styles/ribbon/material.scss +1 -0
  93. package/styles/ribbon/material3-dark.css +1672 -0
  94. package/styles/ribbon/material3-dark.scss +19 -0
  95. package/styles/ribbon/material3.css +1728 -0
  96. package/styles/ribbon/material3.scss +19 -0
  97. package/styles/ribbon/tailwind-dark.css +27 -0
  98. package/styles/ribbon/tailwind-dark.scss +1 -0
  99. package/styles/ribbon/tailwind.css +27 -0
  100. package/styles/ribbon/tailwind.scss +1 -0
  101. package/styles/tailwind-dark.css +27 -0
  102. package/styles/tailwind.css +27 -0
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 21.2.3
3
+ * version : 22.1.39
4
4
  * Copyright Syncfusion Inc. 2001 - 2020. 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@21.1.37",
3
+ "_id": "@syncfusion/ej2-ribbon@22.1.34",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-gWwlbD+kTmoNDnyq+liFGtG0dXmxD7B5M/OMAWv8wXSJZWlzmdrVUIa8fSL80eQSFzyzU/fU8z0pjyXVu8VSXA==",
5
+ "_integrity": "sha512-nL9elUe3GZ+1VQIRiHoLW0y48W53JSNVhGF2Bw5zC5nCbmdiawRjDQgqSSMN/Y+HOhhbA58AjCx7/nRjfkHcDA==",
6
6
  "_location": "/@syncfusion/ej2-ribbon",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -18,10 +18,13 @@
18
18
  },
19
19
  "_requiredBy": [
20
20
  "/",
21
- "/@syncfusion/ej2"
21
+ "/@syncfusion/ej2",
22
+ "/@syncfusion/ej2-angular-ribbon",
23
+ "/@syncfusion/ej2-react-ribbon",
24
+ "/@syncfusion/ej2-vue-ribbon"
22
25
  ],
23
- "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-21.1.37.tgz",
24
- "_shasum": "724d27c29aa2886be6969a2149fc3c97645677e2",
26
+ "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-ribbon/-/ej2-ribbon-22.1.34.tgz",
27
+ "_shasum": "efd8b3974f9352dd444a984ba8070a9dcdf14d89",
25
28
  "_spec": "@syncfusion/ej2-ribbon@*",
26
29
  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
27
30
  "author": {
@@ -32,13 +35,13 @@
32
35
  },
33
36
  "bundleDependencies": false,
34
37
  "dependencies": {
35
- "@syncfusion/ej2-base": "~21.2.3",
36
- "@syncfusion/ej2-buttons": "~21.2.3",
37
- "@syncfusion/ej2-dropdowns": "~21.2.3",
38
- "@syncfusion/ej2-lists": "~21.2.3",
39
- "@syncfusion/ej2-navigations": "~21.2.3",
40
- "@syncfusion/ej2-popups": "~21.2.3",
41
- "@syncfusion/ej2-splitbuttons": "~21.2.3"
38
+ "@syncfusion/ej2-base": "~22.1.38",
39
+ "@syncfusion/ej2-buttons": "~22.1.39",
40
+ "@syncfusion/ej2-dropdowns": "~22.1.39",
41
+ "@syncfusion/ej2-lists": "~22.1.34",
42
+ "@syncfusion/ej2-navigations": "~22.1.39",
43
+ "@syncfusion/ej2-popups": "~22.1.38",
44
+ "@syncfusion/ej2-splitbuttons": "~22.1.37"
42
45
  },
43
46
  "deprecated": false,
44
47
  "description": "Essential JS 2 Component",
@@ -59,6 +62,6 @@
59
62
  "url": "git+https://github.com/syncfusion/ej2-ribbon-component.git"
60
63
  },
61
64
  "typings": "index.d.ts",
62
- "version": "21.2.3",
65
+ "version": "22.1.39",
63
66
  "sideEffects": false
64
67
  }
@@ -51,6 +51,10 @@ export declare enum RibbonItemSize {
51
51
  * @aspNumberEnum
52
52
  */
53
53
  export declare enum DisplayMode {
54
+ /**
55
+ * The item appears in the classic layout group.
56
+ */
57
+ Classic = 4,
54
58
  /**
55
59
  * The item appears in the simplified layout group.
56
60
  */
@@ -60,13 +64,9 @@ export declare enum DisplayMode {
60
64
  */
61
65
  Overflow = 1,
62
66
  /**
63
- * The item appears in both simplified layout group and overflow popup based on ribbon overflow state.
64
- */
65
- Auto = 3,
66
- /**
67
- * The item is hidden in simplified mode.
67
+ * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
68
68
  */
69
- None = 0
69
+ Auto = 7
70
70
  }
71
71
  /**
72
72
  * Defines the type of the ribbon item.
@@ -53,6 +53,10 @@ export var RibbonItemSize;
53
53
  */
54
54
  export var DisplayMode;
55
55
  (function (DisplayMode) {
56
+ /**
57
+ * The item appears in the classic layout group.
58
+ */
59
+ DisplayMode[DisplayMode["Classic"] = 4] = "Classic";
56
60
  /**
57
61
  * The item appears in the simplified layout group.
58
62
  */
@@ -62,13 +66,9 @@ export var DisplayMode;
62
66
  */
63
67
  DisplayMode[DisplayMode["Overflow"] = 1] = "Overflow";
64
68
  /**
65
- * The item appears in both simplified layout group and overflow popup based on ribbon overflow state.
66
- */
67
- DisplayMode[DisplayMode["Auto"] = 3] = "Auto";
68
- /**
69
- * The item is hidden in simplified mode.
69
+ * The item appears in classic layout group, simplified layout group, and overflow popup based on ribbon overflow state.
70
70
  */
71
- DisplayMode[DisplayMode["None"] = 0] = "None";
71
+ DisplayMode[DisplayMode["Auto"] = 7] = "Auto";
72
72
  })(DisplayMode || (DisplayMode = {}));
73
73
  /**
74
74
  * Defines the type of the ribbon item.
@@ -1,4 +1,4 @@
1
- import { addClass, append, Event, Collection, Complex, Component, EmitType, EventHandler, formatUnit, getInstance, getComponent, getUniqueID, closest } 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, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } 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 } from '../modules/index';import { RibbonTooltipModel } from '../models/ribbon-tooltip-model';import { Popup } from '@syncfusion/ej2-popups';import { BeforeOpenCloseMenuEventArgs, DropDownButton, SplitButton } from '@syncfusion/ej2-splitbuttons';
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, RibbonItem, RibbonCollection, RibbonGroup } from '../models/index';import { commonProperties, DisplayMode, ExpandCollapseEventArgs, itemProps, LauncherClickEventArgs, ribbonItemPropsList, RibbonLayout, ribbonTooltipData, TabSelectedEventArgs, TabSelectingEventArgs } from './interface';import { ItemOrientation, RibbonItemSize, RibbonItemType } from './interface';import { RibbonButton, RibbonComboBox, RibbonCheckBox, RibbonDropDown, RibbonColorPicker, RibbonSplitButton } 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 } 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';
2
2
  import {ComponentModel} from '@syncfusion/ej2-base';
3
3
 
4
4
  /**
@@ -89,7 +89,7 @@ export interface RibbonModel extends ComponentModel{
89
89
  * @default ''
90
90
  * @aspType string
91
91
  */
92
- helpPaneTemplate?: string | HTMLElement;
92
+ helpPaneTemplate?: string | HTMLElement | Function;
93
93
 
94
94
  /**
95
95
  * Event triggers before selecting the tab item.
@@ -84,7 +84,7 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
84
84
  * @default ''
85
85
  * @aspType string
86
86
  */
87
- helpPaneTemplate: string | HTMLElement;
87
+ helpPaneTemplate: string | HTMLElement | Function;
88
88
  /**
89
89
  * Event triggers before selecting the tab item.
90
90
  *
@@ -143,11 +143,15 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
143
143
  * The `ribbonFileMenuModule` is used to create and manipulate the ribbon file menu.
144
144
  */
145
145
  ribbonFileMenuModule: RibbonFileMenu;
146
+ private itemIndex;
146
147
  private idIndex;
147
148
  private isAddRemove;
148
149
  private collapseButton;
149
150
  private ribbonTempEle;
150
151
  private scrollModule;
152
+ private currentControlIndex;
153
+ private keyboardModuleRibbon;
154
+ private keyConfigs;
151
155
  /** @hidden */
152
156
  overflowDDB: DropDownButton;
153
157
  /** @hidden */
@@ -193,6 +197,9 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
193
197
  protected requiredModules(): ModuleDeclaration[];
194
198
  private initialize;
195
199
  private wireEvents;
200
+ private wireKeyboardEvent;
201
+ private keyActionHandler;
202
+ private handleNavigation;
196
203
  private resizeHandler;
197
204
  private renderTabs;
198
205
  private minimize;
@@ -209,6 +216,9 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
209
216
  private addOverflowEvents;
210
217
  private createOfTabContainer;
211
218
  private checkGroupShrinking;
219
+ private checkValidCollectionLength;
220
+ private checkClassicCollection;
221
+ private checkClassicItem;
212
222
  private checkLargeToMedium;
213
223
  private checkMediumToSmall;
214
224
  private checkGroupExpanding;
@@ -225,6 +235,8 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
225
235
  private createTabItems;
226
236
  private renderInitialTab;
227
237
  private addOverflowButton;
238
+ private upDownKeyHandler;
239
+ private findDisabledItem;
228
240
  private removeOverflowButton;
229
241
  private removeOverflowEvent;
230
242
  private createGroupContainer;
@@ -232,10 +244,12 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
232
244
  private removeExpandCollapse;
233
245
  private reRenderTabs;
234
246
  private switchLayout;
247
+ private createLauncherIcon;
235
248
  private launcherIconClicked;
236
249
  private createGroups;
237
250
  private validateItemSize;
238
251
  private createCollection;
252
+ private createRibbonItem;
239
253
  private createItems;
240
254
  private createHelpPaneTemplate;
241
255
  private createTemplateContent;
@@ -327,6 +341,34 @@ export declare class Ribbon extends Component<HTMLElement> implements INotifyPro
327
341
  * @returns {void}
328
342
  */
329
343
  removeItem(itemId: string): void;
344
+ /**
345
+ * tab - Gets the ribbon tab to be updated. The id of the tab is a required property. Other properties are optional.
346
+ *
347
+ * @param {RibbonTabModel} tab - Gets the ribbon tab model.
348
+ * @returns {void}
349
+ */
350
+ updateTab(tab: RibbonTabModel): void;
351
+ /**
352
+ * group - Gets the ribbon group to be updated. The id of the group is a required property. Other properties are optional.
353
+ *
354
+ * @param {RibbonGroupModel} group - Gets the ribbon group model.
355
+ * @returns {void}
356
+ */
357
+ updateGroup(group: RibbonGroupModel): void;
358
+ /**
359
+ * collection - Gets the ribbon collection to be updated. The id of the collection is a required property. Other properties are optional.
360
+ *
361
+ * @param {RibbonCollectionModel} collection - Gets the ribbon collection model.
362
+ * @returns {void}
363
+ */
364
+ updateCollection(collection: RibbonCollectionModel): void;
365
+ /**
366
+ * item - Gets the ribbon item to be updated. The id of the item is a required property. Other properties are optional.
367
+ *
368
+ * @param {RibbonItemModel} item - Gets the ribbon item model.
369
+ * @returns {void}
370
+ */
371
+ updateItem(item: RibbonItemModel): void;
330
372
  private removeItemElement;
331
373
  /**
332
374
  * Enables ribbon item.