@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.
- package/CHANGELOG.md +7 -5
- package/README.md +3 -0
- package/dist/ej2-ribbon.umd.min.js +2 -2
- package/dist/ej2-ribbon.umd.min.js.map +1 -1
- package/dist/es6/ej2-ribbon.es2015.js +2053 -138
- package/dist/es6/ej2-ribbon.es2015.js.map +1 -1
- package/dist/es6/ej2-ribbon.es5.js +2182 -147
- package/dist/es6/ej2-ribbon.es5.js.map +1 -1
- package/dist/global/ej2-ribbon.min.js +2 -2
- package/dist/global/ej2-ribbon.min.js.map +1 -1
- package/dist/global/index.d.ts +1 -1
- package/package.json +13 -13
- package/src/global.js +1 -1
- package/src/ribbon/base/constant.d.ts +8 -0
- package/src/ribbon/base/constant.js +8 -0
- package/src/ribbon/base/interface.d.ts +114 -1
- package/src/ribbon/base/interface.js +4 -0
- package/src/ribbon/base/ribbon-model.d.ts +22 -1
- package/src/ribbon/base/ribbon.d.ts +67 -5
- package/src/ribbon/base/ribbon.js +459 -77
- package/src/ribbon/base/utils.d.ts +3 -2
- package/src/ribbon/base/utils.js +3 -2
- package/src/ribbon/items/index.d.ts +1 -0
- package/src/ribbon/items/index.js +1 -0
- package/src/ribbon/items/ribbon-colorpicker.js +6 -1
- package/src/ribbon/items/ribbon-gallery.d.ts +87 -0
- package/src/ribbon/items/ribbon-gallery.js +712 -0
- package/src/ribbon/items/ribbon-groupbutton.js +3 -0
- package/src/ribbon/models/index.d.ts +8 -0
- package/src/ribbon/models/index.js +4 -0
- package/src/ribbon/models/ribbon-back-stage-settings-model.d.ts +7 -0
- package/src/ribbon/models/ribbon-back-stage-settings.d.ts +6 -0
- package/src/ribbon/models/ribbon-back-stage-settings.js +3 -0
- package/src/ribbon/models/ribbon-backstage-item-model.d.ts +7 -0
- package/src/ribbon/models/ribbon-backstage-item.d.ts +6 -0
- package/src/ribbon/models/ribbon-backstage-item.js +3 -0
- package/src/ribbon/models/ribbon-contextual-tab-settings-model.d.ts +30 -0
- package/src/ribbon/models/ribbon-contextual-tab-settings.d.ts +33 -0
- package/src/ribbon/models/ribbon-contextual-tab-settings.js +50 -0
- package/src/ribbon/models/ribbon-file-menu-settings-model.d.ts +7 -0
- package/src/ribbon/models/ribbon-file-menu-settings.d.ts +6 -0
- package/src/ribbon/models/ribbon-file-menu-settings.js +3 -0
- package/src/ribbon/models/ribbon-gallery-group-model.d.ts +44 -0
- package/src/ribbon/models/ribbon-gallery-group.d.ts +38 -0
- package/src/ribbon/models/ribbon-gallery-group.js +47 -0
- package/src/ribbon/models/ribbon-gallery-item-model.d.ts +43 -0
- package/src/ribbon/models/ribbon-gallery-item.d.ts +38 -0
- package/src/ribbon/models/ribbon-gallery-item.js +46 -0
- package/src/ribbon/models/ribbon-gallery-settings-model.d.ts +108 -0
- package/src/ribbon/models/ribbon-gallery-settings.d.ts +95 -0
- package/src/ribbon/models/ribbon-gallery-settings.js +71 -0
- package/src/ribbon/models/ribbon-group-button-item-model.d.ts +7 -0
- package/src/ribbon/models/ribbon-group-button-item.d.ts +6 -0
- package/src/ribbon/models/ribbon-group-button-item.js +3 -0
- package/src/ribbon/models/ribbon-group-model.d.ts +14 -0
- package/src/ribbon/models/ribbon-group.d.ts +12 -0
- package/src/ribbon/models/ribbon-group.js +6 -0
- package/src/ribbon/models/ribbon-item-model.d.ts +15 -1
- package/src/ribbon/models/ribbon-item.d.ts +13 -0
- package/src/ribbon/models/ribbon-item.js +7 -0
- package/src/ribbon/models/ribbon-tab-model.d.ts +7 -0
- package/src/ribbon/models/ribbon-tab.d.ts +6 -0
- package/src/ribbon/models/ribbon-tab.js +3 -0
- package/src/ribbon/modules/index.d.ts +2 -0
- package/src/ribbon/modules/index.js +2 -0
- package/src/ribbon/modules/ribbon-backstage.d.ts +2 -0
- package/src/ribbon/modules/ribbon-backstage.js +37 -0
- package/src/ribbon/modules/ribbon-contextualtab.d.ts +27 -0
- package/src/ribbon/modules/ribbon-contextualtab.js +90 -0
- package/src/ribbon/modules/ribbon-filemenu.d.ts +2 -0
- package/src/ribbon/modules/ribbon-filemenu.js +19 -0
- package/src/ribbon/modules/ribbon-keytip.d.ts +54 -0
- package/src/ribbon/modules/ribbon-keytip.js +554 -0
- package/styles/bootstrap-dark.css +398 -24
- package/styles/bootstrap.css +389 -15
- package/styles/bootstrap4.css +398 -24
- package/styles/bootstrap5-dark.css +391 -17
- package/styles/bootstrap5.css +391 -17
- package/styles/fabric-dark.css +390 -16
- package/styles/fabric.css +387 -13
- package/styles/fluent-dark.css +389 -15
- package/styles/fluent.css +389 -15
- package/styles/highcontrast-light.css +381 -7
- package/styles/highcontrast.css +390 -16
- package/styles/material-dark.css +391 -17
- package/styles/material.css +391 -17
- package/styles/material3-dark.css +389 -15
- package/styles/material3.css +389 -15
- package/styles/ribbon/_bds-definition.scss +360 -0
- package/styles/ribbon/_bootstrap-dark-definition.scss +81 -6
- package/styles/ribbon/_bootstrap-definition.scss +81 -6
- package/styles/ribbon/_bootstrap4-definition.scss +82 -7
- package/styles/ribbon/_bootstrap5-definition.scss +81 -6
- package/styles/ribbon/_fabric-dark-definition.scss +79 -4
- package/styles/ribbon/_fabric-definition.scss +78 -3
- package/styles/ribbon/_fluent-definition.scss +80 -5
- package/styles/ribbon/_fusionnew-definition.scss +76 -1
- package/styles/ribbon/_highcontrast-definition.scss +80 -5
- package/styles/ribbon/_highcontrast-light-definition.scss +76 -1
- package/styles/ribbon/_layout.scss +344 -38
- package/styles/ribbon/_material-dark-definition.scss +80 -5
- package/styles/ribbon/_material-definition.scss +81 -6
- package/styles/ribbon/_material3-definition.scss +80 -5
- package/styles/ribbon/_tailwind-definition.scss +80 -5
- package/styles/ribbon/_theme.scss +71 -0
- package/styles/ribbon/bootstrap-dark.css +398 -24
- package/styles/ribbon/bootstrap.css +389 -15
- package/styles/ribbon/bootstrap4.css +398 -24
- package/styles/ribbon/bootstrap5-dark.css +391 -17
- package/styles/ribbon/bootstrap5.css +391 -17
- package/styles/ribbon/fabric-dark.css +390 -16
- package/styles/ribbon/fabric.css +387 -13
- package/styles/ribbon/fluent-dark.css +389 -15
- package/styles/ribbon/fluent.css +389 -15
- package/styles/ribbon/highcontrast-light.css +381 -7
- package/styles/ribbon/highcontrast.css +390 -16
- package/styles/ribbon/icons/_bds.scss +9 -0
- package/styles/ribbon/material-dark.css +391 -17
- package/styles/ribbon/material.css +391 -17
- package/styles/ribbon/material3-dark.css +389 -15
- package/styles/ribbon/material3.css +389 -15
- package/styles/ribbon/tailwind-dark.css +390 -16
- package/styles/ribbon/tailwind.css +390 -16
- package/styles/tailwind-dark.css +390 -16
- package/styles/tailwind.css +390 -16
- package/.github/PULL_REQUEST_TEMPLATE/Bug.md +0 -60
- package/.github/PULL_REQUEST_TEMPLATE/feature.md +0 -37
package/dist/global/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
2
|
* filename: index.d.ts
|
|
3
|
-
* version :
|
|
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@
|
|
3
|
+
"_id": "@syncfusion/ej2-ribbon@21.29.0",
|
|
4
4
|
"_inBundle": false,
|
|
5
|
-
"_integrity": "sha512-
|
|
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.
|
|
27
|
-
"_shasum": "
|
|
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-
|
|
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": "~
|
|
39
|
-
"@syncfusion/ej2-buttons": "~
|
|
40
|
-
"@syncfusion/ej2-dropdowns": "~
|
|
41
|
-
"@syncfusion/ej2-lists": "~
|
|
42
|
-
"@syncfusion/ej2-navigations": "~
|
|
43
|
-
"@syncfusion/ej2-popups": "~
|
|
44
|
-
"@syncfusion/ej2-splitbuttons": "~
|
|
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": "
|
|
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
|
-
|
|
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;
|