@3t-transform/threeteeui 0.0.5 → 0.0.7
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/dist/cjs/{index-8a7479e4.js → index-253ca97c.js} +239 -415
- package/dist/cjs/loader.cjs.js +4 -3
- package/dist/cjs/tttx-button.cjs.entry.js +28 -0
- package/dist/cjs/tttx-checkbox.cjs.entry.js +28 -0
- package/dist/cjs/tttx-form.cjs.entry.js +58 -0
- package/dist/cjs/tttx-single-input.cjs.entry.js +44 -0
- package/dist/cjs/tttx-text-box.cjs.entry.js +38 -0
- package/dist/cjs/tttx.cjs.js +7 -3
- package/dist/collection/collection-manifest.json +7 -6
- package/dist/collection/components/atoms/tttx-button/tttx-button.css +61 -0
- package/dist/collection/components/atoms/tttx-button/tttx-button.js +93 -0
- package/dist/collection/components/atoms/tttx-button/tttx-button.stories.js +30 -0
- package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.css +142 -0
- package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.js +259 -0
- package/dist/collection/components/atoms/tttx-single-input/tttx-single-input.stories.js +92 -0
- package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.css +142 -0
- package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.js +150 -0
- package/dist/collection/components/atoms/tttx-text-box/tttx-text-box.stories.js +17 -0
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.css +138 -0
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.js +101 -0
- package/dist/collection/components/atoms/ttx-checkbox/tttx-checkbox.stories.js +13 -0
- package/dist/collection/components/molecules/tttx-form/tttx-form.js +109 -0
- package/dist/collection/components/molecules/tttx-form/tttx-form.stories.js +37 -0
- package/dist/collection/icons.js +2838 -0
- package/dist/components/index.d.ts +14 -4
- package/dist/components/index.js +6 -5
- package/dist/components/{tttx-page.d.ts → tttx-button.d.ts} +4 -4
- package/dist/components/tttx-button.js +45 -0
- package/dist/components/{tttx-worksheet.d.ts → tttx-checkbox.d.ts} +4 -4
- package/dist/components/tttx-checkbox.js +46 -0
- package/dist/components/{tttx-icon.d.ts → tttx-form.d.ts} +4 -4
- package/dist/components/tttx-form.js +75 -0
- package/dist/components/{qualifications-list.d.ts → tttx-single-input.d.ts} +4 -4
- package/dist/components/tttx-single-input.js +71 -0
- package/dist/components/tttx-text-box.d.ts +11 -0
- package/dist/components/tttx-text-box.js +59 -0
- package/dist/esm/{index-854ff56f.js → index-fcca6c58.js} +237 -416
- package/dist/esm/loader.js +4 -3
- package/dist/esm/polyfills/css-shim.js +1 -1
- package/dist/esm/tttx-button.entry.js +24 -0
- package/dist/esm/tttx-checkbox.entry.js +24 -0
- package/dist/esm/tttx-form.entry.js +54 -0
- package/dist/esm/tttx-single-input.entry.js +40 -0
- package/dist/esm/tttx-text-box.entry.js +34 -0
- package/dist/esm/tttx.js +4 -3
- package/dist/tttx/p-05d7d002.entry.js +1 -0
- package/dist/tttx/p-40709c59.entry.js +1 -0
- package/dist/tttx/p-64703252.entry.js +1 -0
- package/dist/tttx/p-8d1f2e5c.entry.js +1 -0
- package/dist/tttx/p-9bf836ed.entry.js +1 -0
- package/dist/tttx/p-a7b95fd2.js +2 -0
- package/dist/tttx/tttx.esm.js +1 -1
- package/dist/types/components/atoms/tttx-button/tttx-button.d.ts +9 -0
- package/dist/types/components/atoms/tttx-button/tttx-button.stories.d.ts +20 -0
- package/dist/types/components/atoms/tttx-single-input/tttx-single-input.d.ts +20 -0
- package/dist/types/components/atoms/tttx-single-input/tttx-single-input.stories.d.ts +27 -0
- package/dist/types/components/atoms/tttx-text-box/tttx-text-box.d.ts +14 -0
- package/dist/types/components/{patterns/qualifications-list/qualifications-list.stories.d.ts → atoms/tttx-text-box/tttx-text-box.stories.d.ts} +1 -0
- package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.d.ts +9 -0
- package/dist/types/components/atoms/ttx-checkbox/tttx-checkbox.stories.d.ts +6 -0
- package/dist/types/components/molecules/tttx-form/tttx-form.d.ts +11 -0
- package/dist/types/components/molecules/tttx-form/tttx-form.stories.d.ts +6 -0
- package/dist/types/components.d.ts +120 -56
- package/dist/types/icons.d.ts +2 -0
- package/dist/types/stencil-public-runtime.d.ts +59 -3
- package/loader/index.d.ts +9 -0
- package/package.json +58 -59
- package/readme.md +1 -6
- package/dist/cjs/qualifications-list.cjs.entry.js +0 -7149
- package/dist/cjs/toolbar-02115550.js +0 -864
- package/dist/cjs/tttx-icon.cjs.entry.js +0 -21
- package/dist/cjs/tttx-page.cjs.entry.js +0 -928
- package/dist/cjs/tttx-worksheet.cjs.entry.js +0 -48
- package/dist/cjs/ui.popover-27780a1d.js +0 -33576
- package/dist/collection/components/components/tttx-icon/tttx-icon.css +0 -89
- package/dist/collection/components/components/tttx-icon/tttx-icon.js +0 -59
- package/dist/collection/components/components/tttx-icon/tttx-icon.stories.js +0 -40
- package/dist/collection/components/patterns/qualifications-list/qualifications-list.js +0 -32
- package/dist/collection/components/patterns/qualifications-list/qualifications-list.stories.js +0 -7
- package/dist/collection/components/patterns/tttx-page/tttx-page.css +0 -162
- package/dist/collection/components/patterns/tttx-page/tttx-page.js +0 -213
- package/dist/collection/components/patterns/tttx-page/tttx-page.stories.js +0 -80
- package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.css +0 -134
- package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.js +0 -70
- package/dist/collection/components/patterns/tttx-worksheet/tttx-worksheet.stories.js +0 -44
- package/dist/components/qualifications-list.js +0 -7162
- package/dist/components/tttx-icon.js +0 -37
- package/dist/components/tttx-page.js +0 -954
- package/dist/components/tttx-worksheet.js +0 -6
- package/dist/components/tttx-worksheet2.js +0 -918
- package/dist/components/ui.popover.js +0 -33449
- package/dist/esm/qualifications-list.entry.js +0 -7145
- package/dist/esm/toolbar-b147a3aa.js +0 -862
- package/dist/esm/tttx-icon.entry.js +0 -17
- package/dist/esm/tttx-page.entry.js +0 -924
- package/dist/esm/tttx-worksheet.entry.js +0 -44
- package/dist/esm/ui.popover-0c8f8d79.js +0 -33449
- package/dist/tttx/p-4f4963aa.entry.js +0 -1
- package/dist/tttx/p-69ca02f6.entry.js +0 -1
- package/dist/tttx/p-7244abd4.entry.js +0 -1
- package/dist/tttx/p-7eb8146c.entry.js +0 -1
- package/dist/tttx/p-81cad444.js +0 -1
- package/dist/tttx/p-955d89ac.js +0 -1
- package/dist/tttx/p-ddfeb0ba.js +0 -2
- package/dist/tttx/tttx.css +0 -1
- package/dist/types/components/components/tttx-icon/tttx-icon.d.ts +0 -5
- package/dist/types/components/components/tttx-icon/tttx-icon.stories.d.ts +0 -24
- package/dist/types/components/patterns/qualifications-list/qualifications-list.d.ts +0 -6
- package/dist/types/components/patterns/tttx-page/tttx-page.d.ts +0 -21
- package/dist/types/components/patterns/tttx-page/tttx-page.stories.d.ts +0 -48
- package/dist/types/components/patterns/tttx-worksheet/tttx-worksheet.d.ts +0 -9
- package/dist/types/components/patterns/tttx-worksheet/tttx-worksheet.stories.d.ts +0 -23
|
@@ -1,918 +0,0 @@
|
|
|
1
|
-
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
|
|
2
|
-
import { a6 as ListBase, aO as each, $, d as registerComponent, W as Widget, e as extend, S as devices, L as isMaterial, b4 as ChildDefaultTemplate, aa as Button, ae as Popover, as as getHeight, a7 as setHeight, b2 as DataHelperMixin, K as getWindow, aZ as ListSearch, aw as domAdapter, b0 as compileGetter, b5 as ToolbarBase, b6 as deferRender, Y as getWidth, g as getOuterWidth, b7 as grep } from './ui.popover.js';
|
|
3
|
-
|
|
4
|
-
/**
|
|
5
|
-
* DevExtreme (esm/ui/toolbar/ui.toolbar.menu.js)
|
|
6
|
-
* Version: 22.1.6
|
|
7
|
-
* Build date: Tue Oct 18 2022
|
|
8
|
-
*
|
|
9
|
-
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
|
|
10
|
-
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
|
|
11
|
-
*/
|
|
12
|
-
var TOOLBAR_MENU_ACTION_CLASS = "dx-toolbar-menu-action";
|
|
13
|
-
var TOOLBAR_HIDDEN_BUTTON_CLASS = "dx-toolbar-hidden-button";
|
|
14
|
-
var TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS = "dx-toolbar-hidden-button-group";
|
|
15
|
-
var TOOLBAR_MENU_SECTION_CLASS = "dx-toolbar-menu-section";
|
|
16
|
-
var TOOLBAR_MENU_LAST_SECTION_CLASS = "dx-toolbar-menu-last-section";
|
|
17
|
-
var ToolbarMenu = ListBase.inherit({
|
|
18
|
-
_activeStateUnit: "." + TOOLBAR_MENU_ACTION_CLASS,
|
|
19
|
-
_initMarkup: function() {
|
|
20
|
-
this._renderSections();
|
|
21
|
-
this.callBase();
|
|
22
|
-
},
|
|
23
|
-
_getSections: function() {
|
|
24
|
-
return this._itemContainer().children()
|
|
25
|
-
},
|
|
26
|
-
_itemElements: function() {
|
|
27
|
-
return this._getSections().children(this._itemSelector())
|
|
28
|
-
},
|
|
29
|
-
_renderSections: function() {
|
|
30
|
-
var that = this;
|
|
31
|
-
var $container = this._itemContainer();
|
|
32
|
-
each(["before", "center", "after", "menu"], (function() {
|
|
33
|
-
var sectionName = "_$" + this + "Section";
|
|
34
|
-
var $section = that[sectionName];
|
|
35
|
-
if (!$section) {
|
|
36
|
-
that[sectionName] = $section = $("<div>").addClass(TOOLBAR_MENU_SECTION_CLASS);
|
|
37
|
-
}
|
|
38
|
-
$section.appendTo($container);
|
|
39
|
-
}));
|
|
40
|
-
},
|
|
41
|
-
_renderItems: function() {
|
|
42
|
-
this.callBase.apply(this, arguments);
|
|
43
|
-
this._updateSections();
|
|
44
|
-
},
|
|
45
|
-
_updateSections: function() {
|
|
46
|
-
var $sections = this.$element().find("." + TOOLBAR_MENU_SECTION_CLASS);
|
|
47
|
-
$sections.removeClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
|
|
48
|
-
$sections.not(":empty").eq(-1).addClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
|
|
49
|
-
},
|
|
50
|
-
_renderItem: function(index, item, itemContainer, $after) {
|
|
51
|
-
var location = item.location || "menu";
|
|
52
|
-
var $container = this["_$" + location + "Section"];
|
|
53
|
-
var itemElement = this.callBase(index, item, $container, $after);
|
|
54
|
-
if (this._getItemTemplateName({
|
|
55
|
-
itemData: item
|
|
56
|
-
})) {
|
|
57
|
-
itemElement.addClass("dx-toolbar-menu-custom");
|
|
58
|
-
}
|
|
59
|
-
if ("menu" === location || "dxButton" === item.widget || "dxButtonGroup" === item.widget || item.isAction) {
|
|
60
|
-
itemElement.addClass(TOOLBAR_MENU_ACTION_CLASS);
|
|
61
|
-
}
|
|
62
|
-
if ("dxButton" === item.widget) {
|
|
63
|
-
itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_CLASS);
|
|
64
|
-
}
|
|
65
|
-
if ("dxButtonGroup" === item.widget) {
|
|
66
|
-
itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS);
|
|
67
|
-
}
|
|
68
|
-
itemElement.addClass(item.cssClass);
|
|
69
|
-
return itemElement
|
|
70
|
-
},
|
|
71
|
-
_getItemTemplateName: function(args) {
|
|
72
|
-
var template = this.callBase(args);
|
|
73
|
-
var data = args.itemData;
|
|
74
|
-
var menuTemplate = data && data.menuItemTemplate;
|
|
75
|
-
return menuTemplate || template
|
|
76
|
-
},
|
|
77
|
-
_itemClickHandler: function(e, args, config) {
|
|
78
|
-
if ($(e.target).closest("." + TOOLBAR_MENU_ACTION_CLASS).length) {
|
|
79
|
-
this.callBase(e, args, config);
|
|
80
|
-
}
|
|
81
|
-
},
|
|
82
|
-
_clean: function() {
|
|
83
|
-
this._getSections().empty();
|
|
84
|
-
this.callBase();
|
|
85
|
-
}
|
|
86
|
-
});
|
|
87
|
-
registerComponent("dxToolbarMenu", ToolbarMenu);
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* DevExtreme (esm/ui/toolbar/ui.toolbar.utils.js)
|
|
91
|
-
* Version: 22.1.6
|
|
92
|
-
* Build date: Tue Oct 18 2022
|
|
93
|
-
*
|
|
94
|
-
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
|
|
95
|
-
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
|
|
96
|
-
*/
|
|
97
|
-
var BUTTON_GROUP_CLASS = "dx-buttongroup";
|
|
98
|
-
var TOOLBAR_ITEMS = ["dxAutocomplete", "dxButton", "dxCheckBox", "dxDateBox", "dxMenu", "dxSelectBox", "dxTabs", "dxTextBox", "dxButtonGroup", "dxDropDownButton"];
|
|
99
|
-
var getItemInstance = function($element) {
|
|
100
|
-
var itemData = $element.data && $element.data();
|
|
101
|
-
var dxComponents = itemData && itemData.dxComponents;
|
|
102
|
-
var widgetName = dxComponents && dxComponents[0];
|
|
103
|
-
return widgetName && itemData[widgetName]
|
|
104
|
-
};
|
|
105
|
-
function toggleItemFocusableElementTabIndex(context, item) {
|
|
106
|
-
var _itemData$options;
|
|
107
|
-
if (!context) {
|
|
108
|
-
return
|
|
109
|
-
}
|
|
110
|
-
var $item = context._findItemElementByItem(item);
|
|
111
|
-
if (!$item.length) {
|
|
112
|
-
return
|
|
113
|
-
}
|
|
114
|
-
var itemData = context._getItemData($item);
|
|
115
|
-
var isItemNotFocusable = !!(null !== (_itemData$options = itemData.options) && void 0 !== _itemData$options && _itemData$options.disabled || itemData.disabled || context.option("disabled"));
|
|
116
|
-
var {
|
|
117
|
-
widget: widget
|
|
118
|
-
} = itemData;
|
|
119
|
-
if (widget && -1 !== TOOLBAR_ITEMS.indexOf(widget)) {
|
|
120
|
-
var $widget = $item.find(widget.toLowerCase().replace("dx", ".dx-"));
|
|
121
|
-
if ($widget.length) {
|
|
122
|
-
var _itemInstance$_focusT, _itemData$options2;
|
|
123
|
-
var itemInstance = getItemInstance($widget);
|
|
124
|
-
var $focusTarget = "dxDropDownButton" === widget ? itemInstance._focusTarget().find(".".concat(BUTTON_GROUP_CLASS)) : (null === itemInstance || void 0 === itemInstance ? void 0 : null === (_itemInstance$_focusT = itemInstance._focusTarget) || void 0 === _itemInstance$_focusT ? void 0 : _itemInstance$_focusT.call(itemInstance)) || $(itemInstance.element());
|
|
125
|
-
var tabIndex = null === (_itemData$options2 = itemData.options) || void 0 === _itemData$options2 ? void 0 : _itemData$options2.tabIndex;
|
|
126
|
-
if (isItemNotFocusable) {
|
|
127
|
-
$focusTarget.attr("tabIndex", -1);
|
|
128
|
-
} else {
|
|
129
|
-
$focusTarget.attr("tabIndex", tabIndex ? tabIndex : 0);
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
/**
|
|
136
|
-
* DevExtreme (esm/ui/drop_down_menu.js)
|
|
137
|
-
* Version: 22.1.6
|
|
138
|
-
* Build date: Tue Oct 18 2022
|
|
139
|
-
*
|
|
140
|
-
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
|
|
141
|
-
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
|
|
142
|
-
*/
|
|
143
|
-
var window = getWindow();
|
|
144
|
-
var DROP_DOWN_MENU_CLASS = "dx-dropdownmenu";
|
|
145
|
-
var DROP_DOWN_MENU_POPUP_CLASS = "dx-dropdownmenu-popup";
|
|
146
|
-
var DROP_DOWN_MENU_POPUP_WRAPPER_CLASS = "dx-dropdownmenu-popup-wrapper";
|
|
147
|
-
var DROP_DOWN_MENU_LIST_CLASS = "dx-dropdownmenu-list";
|
|
148
|
-
var DROP_DOWN_MENU_BUTTON_CLASS = "dx-dropdownmenu-button";
|
|
149
|
-
var POPUP_OPTION_MAP = {
|
|
150
|
-
popupWidth: "width",
|
|
151
|
-
popupHeight: "height",
|
|
152
|
-
popupMaxHeight: "maxHeight",
|
|
153
|
-
popupAutoResizeEnabled: "autoResizeEnabled"
|
|
154
|
-
};
|
|
155
|
-
var BUTTON_OPTION_MAP = {
|
|
156
|
-
buttonIcon: "icon",
|
|
157
|
-
buttonText: "text",
|
|
158
|
-
buttonWidth: "width",
|
|
159
|
-
buttonHeight: "height",
|
|
160
|
-
buttonTemplate: "template"
|
|
161
|
-
};
|
|
162
|
-
var DropDownMenu = Widget.inherit({
|
|
163
|
-
_supportedKeys: function() {
|
|
164
|
-
var extension = {};
|
|
165
|
-
if (!this.option("opened") || !this._list.option("focusedElement")) {
|
|
166
|
-
extension = this._button._supportedKeys();
|
|
167
|
-
}
|
|
168
|
-
return extend(this.callBase(), extension, {
|
|
169
|
-
tab: function() {
|
|
170
|
-
this._popup && this._popup.hide();
|
|
171
|
-
}
|
|
172
|
-
})
|
|
173
|
-
},
|
|
174
|
-
_getDefaultOptions: function() {
|
|
175
|
-
return extend(this.callBase(), {
|
|
176
|
-
items: [],
|
|
177
|
-
onItemClick: null,
|
|
178
|
-
dataSource: null,
|
|
179
|
-
itemTemplate: "item",
|
|
180
|
-
buttonText: "",
|
|
181
|
-
buttonIcon: "overflow",
|
|
182
|
-
buttonWidth: void 0,
|
|
183
|
-
buttonHeight: void 0,
|
|
184
|
-
buttonTemplate: "content",
|
|
185
|
-
onButtonClick: null,
|
|
186
|
-
usePopover: false,
|
|
187
|
-
popupWidth: "auto",
|
|
188
|
-
popupHeight: "auto",
|
|
189
|
-
activeStateEnabled: true,
|
|
190
|
-
hoverStateEnabled: true,
|
|
191
|
-
opened: false,
|
|
192
|
-
selectionMode: "none",
|
|
193
|
-
selectedItemKeys: [],
|
|
194
|
-
deferRendering: false,
|
|
195
|
-
popupPosition: {
|
|
196
|
-
my: "top center",
|
|
197
|
-
at: "bottom center",
|
|
198
|
-
collision: "fit flip",
|
|
199
|
-
offset: {
|
|
200
|
-
v: 1
|
|
201
|
-
}
|
|
202
|
-
},
|
|
203
|
-
popupAnimation: void 0,
|
|
204
|
-
onItemRendered: null,
|
|
205
|
-
menuWidget: ListSearch,
|
|
206
|
-
popupMaxHeight: void 0,
|
|
207
|
-
closeOnClick: true,
|
|
208
|
-
useInkRipple: false,
|
|
209
|
-
container: void 0,
|
|
210
|
-
popupAutoResizeEnabled: false
|
|
211
|
-
})
|
|
212
|
-
},
|
|
213
|
-
_defaultOptionsRules: function() {
|
|
214
|
-
return this.callBase().concat([{
|
|
215
|
-
device: {
|
|
216
|
-
platform: "ios"
|
|
217
|
-
},
|
|
218
|
-
options: {
|
|
219
|
-
usePopover: true
|
|
220
|
-
}
|
|
221
|
-
}, {
|
|
222
|
-
device: {
|
|
223
|
-
platform: "generic"
|
|
224
|
-
},
|
|
225
|
-
options: {
|
|
226
|
-
popupPosition: {
|
|
227
|
-
offset: {
|
|
228
|
-
v: 4
|
|
229
|
-
}
|
|
230
|
-
}
|
|
231
|
-
}
|
|
232
|
-
}, {
|
|
233
|
-
device: function() {
|
|
234
|
-
return "desktop" === devices.real().deviceType && !devices.isSimulator()
|
|
235
|
-
},
|
|
236
|
-
options: {
|
|
237
|
-
focusStateEnabled: true
|
|
238
|
-
}
|
|
239
|
-
}, {
|
|
240
|
-
device: {
|
|
241
|
-
platform: "android"
|
|
242
|
-
},
|
|
243
|
-
options: {
|
|
244
|
-
popupPosition: {
|
|
245
|
-
my: "top " + (this.option("rtlEnabled") ? "left" : "right"),
|
|
246
|
-
at: "top " + (this.option("rtlEnabled") ? "left" : "right"),
|
|
247
|
-
collision: "flipfit"
|
|
248
|
-
},
|
|
249
|
-
popupAnimation: {
|
|
250
|
-
show: {
|
|
251
|
-
type: "pop",
|
|
252
|
-
duration: 200,
|
|
253
|
-
from: {
|
|
254
|
-
scale: 0
|
|
255
|
-
},
|
|
256
|
-
to: {
|
|
257
|
-
scale: 1
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
hide: {
|
|
261
|
-
type: "pop",
|
|
262
|
-
duration: 200,
|
|
263
|
-
from: {
|
|
264
|
-
scale: 1
|
|
265
|
-
},
|
|
266
|
-
to: {
|
|
267
|
-
scale: 0
|
|
268
|
-
}
|
|
269
|
-
}
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
}, {
|
|
273
|
-
device: function() {
|
|
274
|
-
return isMaterial()
|
|
275
|
-
},
|
|
276
|
-
options: {
|
|
277
|
-
useInkRipple: true
|
|
278
|
-
}
|
|
279
|
-
}])
|
|
280
|
-
},
|
|
281
|
-
_initOptions: function(options) {
|
|
282
|
-
if ("android" === devices.current().platform) {
|
|
283
|
-
if (!options.popupPosition) {
|
|
284
|
-
options.popupPosition = {
|
|
285
|
-
at: (options.usePopover ? "bottom " : "top ") + (options.rtlEnabled ? "left" : "right")
|
|
286
|
-
};
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
this.callBase(options);
|
|
290
|
-
},
|
|
291
|
-
_dataSourceOptions: function() {
|
|
292
|
-
return {
|
|
293
|
-
paginate: false
|
|
294
|
-
}
|
|
295
|
-
},
|
|
296
|
-
_init: function() {
|
|
297
|
-
this.callBase();
|
|
298
|
-
this.$element().addClass(DROP_DOWN_MENU_CLASS);
|
|
299
|
-
this._initDataSource();
|
|
300
|
-
this._initItemClickAction();
|
|
301
|
-
this._initButtonClickAction();
|
|
302
|
-
},
|
|
303
|
-
_initItemClickAction: function() {
|
|
304
|
-
this._itemClickAction = this._createActionByOption("onItemClick");
|
|
305
|
-
},
|
|
306
|
-
_initButtonClickAction: function() {
|
|
307
|
-
this._buttonClickAction = this._createActionByOption("onButtonClick");
|
|
308
|
-
},
|
|
309
|
-
_initTemplates: function() {
|
|
310
|
-
this._templateManager.addDefaultTemplates({
|
|
311
|
-
content: new ChildDefaultTemplate("content")
|
|
312
|
-
});
|
|
313
|
-
this.callBase();
|
|
314
|
-
},
|
|
315
|
-
_initMarkup: function() {
|
|
316
|
-
this._renderButton();
|
|
317
|
-
this.callBase();
|
|
318
|
-
},
|
|
319
|
-
_render: function() {
|
|
320
|
-
this.callBase();
|
|
321
|
-
this.setAria({
|
|
322
|
-
role: "menubar",
|
|
323
|
-
haspopup: true,
|
|
324
|
-
expanded: this.option("opened")
|
|
325
|
-
});
|
|
326
|
-
},
|
|
327
|
-
_renderContentImpl: function() {
|
|
328
|
-
if (this.option("opened")) {
|
|
329
|
-
this._renderPopup();
|
|
330
|
-
}
|
|
331
|
-
},
|
|
332
|
-
_clean: function() {
|
|
333
|
-
this._cleanFocusState();
|
|
334
|
-
if (this._popup) {
|
|
335
|
-
this._popup.$element().remove();
|
|
336
|
-
delete this._$popup;
|
|
337
|
-
}
|
|
338
|
-
},
|
|
339
|
-
_renderButton: function() {
|
|
340
|
-
var $button = this.$element().addClass(DROP_DOWN_MENU_BUTTON_CLASS);
|
|
341
|
-
var config = this._buttonOptions();
|
|
342
|
-
this._button = this._createComponent($button, Button, config);
|
|
343
|
-
},
|
|
344
|
-
_toggleActiveState: function($element, value, e) {
|
|
345
|
-
this._button._toggleActiveState($element, value, e);
|
|
346
|
-
},
|
|
347
|
-
_buttonOptions: function() {
|
|
348
|
-
return {
|
|
349
|
-
text: this.option("buttonText"),
|
|
350
|
-
icon: this.option("buttonIcon"),
|
|
351
|
-
width: this.option("buttonWidth"),
|
|
352
|
-
height: this.option("buttonHeight"),
|
|
353
|
-
useInkRipple: this.option("useInkRipple"),
|
|
354
|
-
template: this.option("buttonTemplate"),
|
|
355
|
-
hoverStateEnabled: false,
|
|
356
|
-
focusStateEnabled: false,
|
|
357
|
-
onClick: function(e) {
|
|
358
|
-
this.option("opened", !this.option("opened"));
|
|
359
|
-
this._buttonClickAction(e);
|
|
360
|
-
}.bind(this)
|
|
361
|
-
}
|
|
362
|
-
},
|
|
363
|
-
_toggleMenuVisibility: function(opened) {
|
|
364
|
-
var state = void 0 === opened ? !this._popup.option("visible") : opened;
|
|
365
|
-
if (opened) {
|
|
366
|
-
this._renderPopup();
|
|
367
|
-
}
|
|
368
|
-
this._popup.toggle(state);
|
|
369
|
-
this.setAria("expanded", state);
|
|
370
|
-
},
|
|
371
|
-
_renderPopup: function() {
|
|
372
|
-
if (this._$popup) {
|
|
373
|
-
return
|
|
374
|
-
}
|
|
375
|
-
var $popup = this._$popup = $("<div>").appendTo(this.$element());
|
|
376
|
-
var config = this._popupOptions();
|
|
377
|
-
this._popup = this._createComponent($popup, Popover, config);
|
|
378
|
-
},
|
|
379
|
-
_popupOptions: function() {
|
|
380
|
-
var usePopup = !this.option("usePopover");
|
|
381
|
-
return {
|
|
382
|
-
onInitialized: function(args) {
|
|
383
|
-
args.component.$wrapper().addClass(DROP_DOWN_MENU_POPUP_WRAPPER_CLASS).toggleClass(DROP_DOWN_MENU_POPUP_CLASS, usePopup);
|
|
384
|
-
},
|
|
385
|
-
deferRendering: false,
|
|
386
|
-
contentTemplate: function(contentElement) {
|
|
387
|
-
this._renderList(contentElement);
|
|
388
|
-
}.bind(this),
|
|
389
|
-
position: this.option("popupPosition"),
|
|
390
|
-
animation: this.option("popupAnimation"),
|
|
391
|
-
onOptionChanged: function(args) {
|
|
392
|
-
if ("visible" === args.name) {
|
|
393
|
-
this.option("opened", args.value);
|
|
394
|
-
}
|
|
395
|
-
}.bind(this),
|
|
396
|
-
target: this.$element(),
|
|
397
|
-
height: this.option("popupHeight"),
|
|
398
|
-
width: this.option("popupWidth"),
|
|
399
|
-
maxHeight: this.option("popupMaxHeight"),
|
|
400
|
-
container: this.option("container"),
|
|
401
|
-
autoResizeEnabled: this.option("popupAutoResizeEnabled")
|
|
402
|
-
}
|
|
403
|
-
},
|
|
404
|
-
_renderList: function(contentElement) {
|
|
405
|
-
var $content = $(contentElement);
|
|
406
|
-
var listConfig = this._listOptions();
|
|
407
|
-
$content.addClass(DROP_DOWN_MENU_LIST_CLASS);
|
|
408
|
-
this._list = this._createComponent($content, this.option("menuWidget"), listConfig);
|
|
409
|
-
this._list._getAriaTarget = function() {
|
|
410
|
-
return this.$element()
|
|
411
|
-
}.bind(this);
|
|
412
|
-
this._setListDataSource();
|
|
413
|
-
var listMaxHeight = .5 * getHeight(window);
|
|
414
|
-
if (getHeight($content) > listMaxHeight) {
|
|
415
|
-
setHeight($content, listMaxHeight);
|
|
416
|
-
}
|
|
417
|
-
},
|
|
418
|
-
_itemOptionChanged: function(item, property, value) {
|
|
419
|
-
var _this$_list;
|
|
420
|
-
null === (_this$_list = this._list) || void 0 === _this$_list ? void 0 : _this$_list._itemOptionChanged(item, property, value);
|
|
421
|
-
toggleItemFocusableElementTabIndex(this._list, item);
|
|
422
|
-
},
|
|
423
|
-
_listOptions: function() {
|
|
424
|
-
return {
|
|
425
|
-
pageLoadMode: "scrollBottom",
|
|
426
|
-
indicateLoading: false,
|
|
427
|
-
noDataText: "",
|
|
428
|
-
selectionMode: this.option("selectionMode"),
|
|
429
|
-
selectedItemKeys: this.option("selectedItemKeys"),
|
|
430
|
-
itemTemplate: this.option("itemTemplate"),
|
|
431
|
-
onItemClick: function(e) {
|
|
432
|
-
if (this.option("closeOnClick")) {
|
|
433
|
-
this.option("opened", false);
|
|
434
|
-
}
|
|
435
|
-
this._itemClickAction(e);
|
|
436
|
-
}.bind(this),
|
|
437
|
-
tabIndex: -1,
|
|
438
|
-
focusStateEnabled: this.option("focusStateEnabled"),
|
|
439
|
-
activeStateEnabled: this.option("activeStateEnabled"),
|
|
440
|
-
onItemRendered: this.option("onItemRendered"),
|
|
441
|
-
_itemAttributes: {
|
|
442
|
-
role: "menuitem"
|
|
443
|
-
}
|
|
444
|
-
}
|
|
445
|
-
},
|
|
446
|
-
_setListDataSource: function() {
|
|
447
|
-
if (this._list) {
|
|
448
|
-
this._list.option("dataSource", this._dataSource || this.option("items"));
|
|
449
|
-
}
|
|
450
|
-
delete this._deferRendering;
|
|
451
|
-
},
|
|
452
|
-
_getKeyboardListeners() {
|
|
453
|
-
return this.callBase().concat([this._list])
|
|
454
|
-
},
|
|
455
|
-
_toggleVisibility: function(visible) {
|
|
456
|
-
this.callBase(visible);
|
|
457
|
-
this._button.option("visible", visible);
|
|
458
|
-
},
|
|
459
|
-
_optionChanged: function(args) {
|
|
460
|
-
var name = args.name;
|
|
461
|
-
var value = args.value;
|
|
462
|
-
switch (name) {
|
|
463
|
-
case "items":
|
|
464
|
-
case "dataSource":
|
|
465
|
-
if (this.option("deferRendering") && !this.option("opened")) {
|
|
466
|
-
this._deferRendering = true;
|
|
467
|
-
} else {
|
|
468
|
-
this._refreshDataSource();
|
|
469
|
-
this._setListDataSource();
|
|
470
|
-
}
|
|
471
|
-
break;
|
|
472
|
-
case "itemTemplate":
|
|
473
|
-
if (this._list) {
|
|
474
|
-
this._list.option(name, this._getTemplate(value));
|
|
475
|
-
}
|
|
476
|
-
break;
|
|
477
|
-
case "onItemClick":
|
|
478
|
-
this._initItemClickAction();
|
|
479
|
-
break;
|
|
480
|
-
case "onButtonClick":
|
|
481
|
-
this._buttonClickAction();
|
|
482
|
-
break;
|
|
483
|
-
case "buttonIcon":
|
|
484
|
-
case "buttonText":
|
|
485
|
-
case "buttonWidth":
|
|
486
|
-
case "buttonHeight":
|
|
487
|
-
case "buttonTemplate":
|
|
488
|
-
this._button.option(BUTTON_OPTION_MAP[name], value);
|
|
489
|
-
this._renderPopup();
|
|
490
|
-
break;
|
|
491
|
-
case "popupWidth":
|
|
492
|
-
case "popupHeight":
|
|
493
|
-
case "popupMaxHeight":
|
|
494
|
-
case "popupAutoResizeEnabled":
|
|
495
|
-
this._popup.option(POPUP_OPTION_MAP[name], value);
|
|
496
|
-
break;
|
|
497
|
-
case "usePopover":
|
|
498
|
-
case "menuWidget":
|
|
499
|
-
case "useInkRipple":
|
|
500
|
-
this._invalidate();
|
|
501
|
-
break;
|
|
502
|
-
case "focusStateEnabled":
|
|
503
|
-
case "activeStateEnabled":
|
|
504
|
-
if (this._list) {
|
|
505
|
-
this._list.option(name, value);
|
|
506
|
-
}
|
|
507
|
-
this.callBase(args);
|
|
508
|
-
break;
|
|
509
|
-
case "selectionMode":
|
|
510
|
-
case "selectedItemKeys":
|
|
511
|
-
case "onItemRendered":
|
|
512
|
-
if (this._list) {
|
|
513
|
-
this._list.option(name, value);
|
|
514
|
-
}
|
|
515
|
-
break;
|
|
516
|
-
case "opened":
|
|
517
|
-
if (this._deferRendering) {
|
|
518
|
-
this._refreshDataSource();
|
|
519
|
-
this._setListDataSource();
|
|
520
|
-
}
|
|
521
|
-
this._toggleMenuVisibility(value);
|
|
522
|
-
this._updateFocusableItemsTabIndex();
|
|
523
|
-
break;
|
|
524
|
-
case "deferRendering":
|
|
525
|
-
case "popupPosition":
|
|
526
|
-
case "closeOnClick":
|
|
527
|
-
break;
|
|
528
|
-
case "container":
|
|
529
|
-
this._popup && this._popup.option(args.name, args.value);
|
|
530
|
-
break;
|
|
531
|
-
case "disabled":
|
|
532
|
-
if (this._list) {
|
|
533
|
-
this._updateFocusableItemsTabIndex();
|
|
534
|
-
}
|
|
535
|
-
break;
|
|
536
|
-
default:
|
|
537
|
-
this.callBase(args);
|
|
538
|
-
}
|
|
539
|
-
},
|
|
540
|
-
_updateFocusableItemsTabIndex() {
|
|
541
|
-
this.option("items").forEach(item => toggleItemFocusableElementTabIndex(this._list, item));
|
|
542
|
-
},
|
|
543
|
-
open: function() {
|
|
544
|
-
this.option("opened", true);
|
|
545
|
-
},
|
|
546
|
-
close: function() {
|
|
547
|
-
this.option("opened", false);
|
|
548
|
-
}
|
|
549
|
-
}).include(DataHelperMixin);
|
|
550
|
-
registerComponent("dxDropDownMenu", DropDownMenu);
|
|
551
|
-
|
|
552
|
-
/**
|
|
553
|
-
* DevExtreme (esm/ui/toolbar/ui.toolbar.drop_down_menu.js)
|
|
554
|
-
* Version: 22.1.6
|
|
555
|
-
* Build date: Tue Oct 18 2022
|
|
556
|
-
*
|
|
557
|
-
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
|
|
558
|
-
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
|
|
559
|
-
*/
|
|
560
|
-
var MENU_INVISIBLE_CLASS = "dx-state-invisible";
|
|
561
|
-
var TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
|
|
562
|
-
var POPOVER_BOUNDARY_OFFSET = 10;
|
|
563
|
-
class ToolbarDropDownMenu {
|
|
564
|
-
constructor(toolbar) {
|
|
565
|
-
this._toolbar = toolbar;
|
|
566
|
-
}
|
|
567
|
-
render() {
|
|
568
|
-
if (!this._hasVisibleMenuItems()) {
|
|
569
|
-
return
|
|
570
|
-
}
|
|
571
|
-
this._renderMenuButtonContainer();
|
|
572
|
-
var $menu = $("<div>").appendTo(this._dropDownMenuContainer());
|
|
573
|
-
this._dropDownMenu = this._toolbar._createComponent($menu, DropDownMenu, this._dropDownMenuOptions());
|
|
574
|
-
this.renderMenuItems();
|
|
575
|
-
}
|
|
576
|
-
renderMenuItems() {
|
|
577
|
-
if (!this._dropDownMenu) {
|
|
578
|
-
this.render();
|
|
579
|
-
}
|
|
580
|
-
this._dropDownMenu && this._dropDownMenu.option("items", this._getMenuItems());
|
|
581
|
-
if (this._dropDownMenu && !this._dropDownMenu.option("items").length) {
|
|
582
|
-
this._dropDownMenu.close();
|
|
583
|
-
}
|
|
584
|
-
}
|
|
585
|
-
_renderMenuButtonContainer() {
|
|
586
|
-
var $afterSection = this._toolbar._$afterSection;
|
|
587
|
-
this._$menuButtonContainer = $("<div>").appendTo($afterSection).addClass(this._toolbar._buttonClass()).addClass(TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS);
|
|
588
|
-
}
|
|
589
|
-
_getMenuItemTemplate() {
|
|
590
|
-
return this._toolbar._getTemplateByOption("menuItemTemplate")
|
|
591
|
-
}
|
|
592
|
-
_dropDownMenuOptions() {
|
|
593
|
-
var itemClickAction = this._toolbar._createActionByOption("onItemClick");
|
|
594
|
-
var topAndBottomOffset = 2 * POPOVER_BOUNDARY_OFFSET;
|
|
595
|
-
return {
|
|
596
|
-
disabled: this._toolbar.option("disabled"),
|
|
597
|
-
itemTemplate: this._getMenuItemTemplate.bind(this),
|
|
598
|
-
onItemClick: function(e) {
|
|
599
|
-
itemClickAction(e);
|
|
600
|
-
}.bind(this),
|
|
601
|
-
deferRendering: true,
|
|
602
|
-
container: this._toolbar.option("menuContainer"),
|
|
603
|
-
popupMaxHeight: "android" === devices.current().platform ? domAdapter.getDocumentElement().clientHeight - topAndBottomOffset : void 0,
|
|
604
|
-
menuWidget: ToolbarMenu,
|
|
605
|
-
onOptionChanged: _ref => {
|
|
606
|
-
var {
|
|
607
|
-
name: name,
|
|
608
|
-
value: value
|
|
609
|
-
} = _ref;
|
|
610
|
-
if ("opened" === name) {
|
|
611
|
-
this._toolbar.option("overflowMenuVisible", value);
|
|
612
|
-
}
|
|
613
|
-
if ("items" === name) {
|
|
614
|
-
this._updateMenuVisibility(value);
|
|
615
|
-
}
|
|
616
|
-
},
|
|
617
|
-
popupPosition: {
|
|
618
|
-
at: "bottom right",
|
|
619
|
-
my: "top right"
|
|
620
|
-
}
|
|
621
|
-
}
|
|
622
|
-
}
|
|
623
|
-
_updateMenuVisibility(menuItems) {
|
|
624
|
-
var items = menuItems || this._getMenuItems();
|
|
625
|
-
var isMenuVisible = items.length && this._hasVisibleMenuItems(items);
|
|
626
|
-
this._toggleMenuVisibility(isMenuVisible);
|
|
627
|
-
}
|
|
628
|
-
_getMenuItems() {
|
|
629
|
-
return this._toolbar._getMenuItems()
|
|
630
|
-
}
|
|
631
|
-
_hasVisibleMenuItems(items) {
|
|
632
|
-
var menuItems = items || this._toolbar.option("items");
|
|
633
|
-
var result = false;
|
|
634
|
-
var optionGetter = compileGetter("visible");
|
|
635
|
-
var overflowGetter = compileGetter("locateInMenu");
|
|
636
|
-
each(menuItems, (function(index, item) {
|
|
637
|
-
var itemVisible = optionGetter(item, {
|
|
638
|
-
functionsAsIs: true
|
|
639
|
-
});
|
|
640
|
-
var itemOverflow = overflowGetter(item, {
|
|
641
|
-
functionsAsIs: true
|
|
642
|
-
});
|
|
643
|
-
if (false !== itemVisible && ("auto" === itemOverflow || "always" === itemOverflow) || "menu" === item.location) {
|
|
644
|
-
result = true;
|
|
645
|
-
}
|
|
646
|
-
}));
|
|
647
|
-
return result
|
|
648
|
-
}
|
|
649
|
-
_toggleMenuVisibility(value) {
|
|
650
|
-
if (!this._dropDownMenuContainer()) {
|
|
651
|
-
return
|
|
652
|
-
}
|
|
653
|
-
this._dropDownMenuContainer().toggleClass(MENU_INVISIBLE_CLASS, !value);
|
|
654
|
-
}
|
|
655
|
-
_dropDownMenuContainer() {
|
|
656
|
-
return this._$menuButtonContainer
|
|
657
|
-
}
|
|
658
|
-
widgetOption(name, value) {
|
|
659
|
-
this._dropDownMenu && this._dropDownMenu.option(name, value);
|
|
660
|
-
}
|
|
661
|
-
itemOption(item, property, value) {
|
|
662
|
-
if ("disabled" === property || "options.disabled" === property) {
|
|
663
|
-
var _this$_dropDownMenu;
|
|
664
|
-
null === (_this$_dropDownMenu = this._dropDownMenu) || void 0 === _this$_dropDownMenu ? void 0 : _this$_dropDownMenu._itemOptionChanged(item, property, value);
|
|
665
|
-
} else {
|
|
666
|
-
this.renderMenuItems();
|
|
667
|
-
}
|
|
668
|
-
}
|
|
669
|
-
}
|
|
670
|
-
|
|
671
|
-
/**
|
|
672
|
-
* DevExtreme (esm/ui/toolbar.js)
|
|
673
|
-
* Version: 22.1.6
|
|
674
|
-
* Build date: Tue Oct 18 2022
|
|
675
|
-
*
|
|
676
|
-
* Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
|
|
677
|
-
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
|
|
678
|
-
*/
|
|
679
|
-
var TOOLBAR_AUTO_HIDE_ITEM_CLASS = "dx-toolbar-item-auto-hide";
|
|
680
|
-
var TOOLBAR_AUTO_HIDE_TEXT_CLASS = "dx-toolbar-text-auto-hide";
|
|
681
|
-
var TOOLBAR_HIDDEN_ITEM = "dx-toolbar-item-invisible";
|
|
682
|
-
var Toolbar = ToolbarBase.inherit({
|
|
683
|
-
_getDefaultOptions: function() {
|
|
684
|
-
return extend(this.callBase(), {
|
|
685
|
-
menuItemTemplate: "menuItem",
|
|
686
|
-
menuContainer: void 0,
|
|
687
|
-
overflowMenuVisible: false
|
|
688
|
-
})
|
|
689
|
-
},
|
|
690
|
-
updateDimensions: function() {
|
|
691
|
-
this._dimensionChanged();
|
|
692
|
-
},
|
|
693
|
-
_dimensionChanged: function(dimension) {
|
|
694
|
-
if ("height" === dimension) {
|
|
695
|
-
return
|
|
696
|
-
}
|
|
697
|
-
this.callBase();
|
|
698
|
-
this._menu.renderMenuItems();
|
|
699
|
-
},
|
|
700
|
-
_initTemplates: function() {
|
|
701
|
-
this.callBase();
|
|
702
|
-
this._templateManager.addDefaultTemplates({
|
|
703
|
-
actionSheetItem: new ChildDefaultTemplate("item")
|
|
704
|
-
});
|
|
705
|
-
},
|
|
706
|
-
_initMarkup: function() {
|
|
707
|
-
this.callBase();
|
|
708
|
-
this._updateFocusableItemsTabIndex();
|
|
709
|
-
this._renderMenu();
|
|
710
|
-
},
|
|
711
|
-
_postProcessRenderItems: function() {
|
|
712
|
-
this._hideOverflowItems();
|
|
713
|
-
this._menu._updateMenuVisibility();
|
|
714
|
-
this.callBase();
|
|
715
|
-
deferRender(() => {
|
|
716
|
-
this._menu.renderMenuItems();
|
|
717
|
-
});
|
|
718
|
-
},
|
|
719
|
-
_renderItem: function(index, item, itemContainer, $after) {
|
|
720
|
-
var itemElement = this.callBase(index, item, itemContainer, $after);
|
|
721
|
-
if ("auto" === item.locateInMenu) {
|
|
722
|
-
itemElement.addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS);
|
|
723
|
-
}
|
|
724
|
-
if ("dxButton" === item.widget && "inMenu" === item.showText) {
|
|
725
|
-
itemElement.toggleClass(TOOLBAR_AUTO_HIDE_TEXT_CLASS);
|
|
726
|
-
}
|
|
727
|
-
return itemElement
|
|
728
|
-
},
|
|
729
|
-
_getItemsWidth: function() {
|
|
730
|
-
return this._getSummaryItemsWidth([this._$beforeSection, this._$centerSection, this._$afterSection])
|
|
731
|
-
},
|
|
732
|
-
_hideOverflowItems: function(elementWidth) {
|
|
733
|
-
var overflowItems = this.$element().find("." + TOOLBAR_AUTO_HIDE_ITEM_CLASS);
|
|
734
|
-
if (!overflowItems.length) {
|
|
735
|
-
return
|
|
736
|
-
}
|
|
737
|
-
elementWidth = elementWidth || getWidth(this.$element());
|
|
738
|
-
$(overflowItems).removeClass(TOOLBAR_HIDDEN_ITEM);
|
|
739
|
-
var itemsWidth = this._getItemsWidth();
|
|
740
|
-
while (overflowItems.length && elementWidth < itemsWidth) {
|
|
741
|
-
var $item = overflowItems.eq(-1);
|
|
742
|
-
itemsWidth -= getOuterWidth($item);
|
|
743
|
-
$item.addClass(TOOLBAR_HIDDEN_ITEM);
|
|
744
|
-
overflowItems.splice(-1, 1);
|
|
745
|
-
}
|
|
746
|
-
},
|
|
747
|
-
_getMenuItems: function() {
|
|
748
|
-
var that = this;
|
|
749
|
-
var menuItems = grep(this.option("items") || [], (function(item) {
|
|
750
|
-
return that._isMenuItem(item)
|
|
751
|
-
}));
|
|
752
|
-
var $hiddenItems = this._itemContainer().children("." + TOOLBAR_AUTO_HIDE_ITEM_CLASS + "." + TOOLBAR_HIDDEN_ITEM).not(".dx-state-invisible");
|
|
753
|
-
this._restoreItems = this._restoreItems || [];
|
|
754
|
-
var overflowItems = [].slice.call($hiddenItems).map(item => {
|
|
755
|
-
var itemData = that._getItemData(item);
|
|
756
|
-
var $itemContainer = $(item);
|
|
757
|
-
var $itemMarkup = $itemContainer.children();
|
|
758
|
-
return extend({
|
|
759
|
-
menuItemTemplate: function() {
|
|
760
|
-
that._restoreItems.push({
|
|
761
|
-
container: $itemContainer,
|
|
762
|
-
item: $itemMarkup
|
|
763
|
-
});
|
|
764
|
-
var $container = $("<div>").addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS);
|
|
765
|
-
return $container.append($itemMarkup)
|
|
766
|
-
}
|
|
767
|
-
}, itemData)
|
|
768
|
-
});
|
|
769
|
-
return [...overflowItems, ...menuItems]
|
|
770
|
-
},
|
|
771
|
-
_getToolbarItems: function() {
|
|
772
|
-
var that = this;
|
|
773
|
-
return grep(this.option("items") || [], (function(item) {
|
|
774
|
-
return !that._isMenuItem(item)
|
|
775
|
-
}))
|
|
776
|
-
},
|
|
777
|
-
_renderMenu: function() {
|
|
778
|
-
this._renderMenuStrategy();
|
|
779
|
-
deferRender(() => {
|
|
780
|
-
this._menu.render();
|
|
781
|
-
});
|
|
782
|
-
},
|
|
783
|
-
_renderMenuStrategy: function() {
|
|
784
|
-
if (!this._menu) {
|
|
785
|
-
this._menu = new ToolbarDropDownMenu(this);
|
|
786
|
-
}
|
|
787
|
-
},
|
|
788
|
-
_arrangeItems: function() {
|
|
789
|
-
if (this.$element().is(":hidden")) {
|
|
790
|
-
return
|
|
791
|
-
}
|
|
792
|
-
this._$centerSection.css({
|
|
793
|
-
margin: "0 auto",
|
|
794
|
-
float: "none"
|
|
795
|
-
});
|
|
796
|
-
each(this._restoreItems || [], (function(_, obj) {
|
|
797
|
-
$(obj.container).append(obj.item);
|
|
798
|
-
}));
|
|
799
|
-
this._restoreItems = [];
|
|
800
|
-
var elementWidth = getWidth(this.$element());
|
|
801
|
-
this._hideOverflowItems(elementWidth);
|
|
802
|
-
this.callBase(elementWidth);
|
|
803
|
-
},
|
|
804
|
-
_itemOptionChanged: function(item, property, value) {
|
|
805
|
-
if (this._isMenuItem(item)) {
|
|
806
|
-
this._menu.itemOption(item, property, value);
|
|
807
|
-
} else if (this._isToolbarItem(item)) {
|
|
808
|
-
this.callBase(item, property, value);
|
|
809
|
-
} else {
|
|
810
|
-
this.callBase(item, property, value);
|
|
811
|
-
this._menu.renderMenuItems();
|
|
812
|
-
}
|
|
813
|
-
if ("disabled" === property || "options.disabled" === property) {
|
|
814
|
-
toggleItemFocusableElementTabIndex(this, item);
|
|
815
|
-
}
|
|
816
|
-
if ("location" === property) {
|
|
817
|
-
this.repaint();
|
|
818
|
-
}
|
|
819
|
-
},
|
|
820
|
-
_updateFocusableItemsTabIndex() {
|
|
821
|
-
this._getToolbarItems().forEach(item => toggleItemFocusableElementTabIndex(this, item));
|
|
822
|
-
},
|
|
823
|
-
_isMenuItem: function(itemData) {
|
|
824
|
-
return "menu" === itemData.location || "always" === itemData.locateInMenu
|
|
825
|
-
},
|
|
826
|
-
_isToolbarItem: function(itemData) {
|
|
827
|
-
return void 0 === itemData.location || "never" === itemData.locateInMenu
|
|
828
|
-
},
|
|
829
|
-
_optionChanged: function(args) {
|
|
830
|
-
var {
|
|
831
|
-
name: name,
|
|
832
|
-
value: value
|
|
833
|
-
} = args;
|
|
834
|
-
switch (name) {
|
|
835
|
-
case "menuItemTemplate":
|
|
836
|
-
this._changeMenuOption("itemTemplate", this._getTemplate(value));
|
|
837
|
-
break;
|
|
838
|
-
case "onItemClick":
|
|
839
|
-
this._changeMenuOption(name, value);
|
|
840
|
-
this.callBase.apply(this, arguments);
|
|
841
|
-
break;
|
|
842
|
-
case "menuContainer":
|
|
843
|
-
this._changeMenuOption("container", value);
|
|
844
|
-
break;
|
|
845
|
-
case "overflowMenuVisible":
|
|
846
|
-
this._changeMenuOption("opened", value);
|
|
847
|
-
break;
|
|
848
|
-
case "disabled":
|
|
849
|
-
this._changeMenuOption("disabled", value);
|
|
850
|
-
this.callBase.apply(this, arguments);
|
|
851
|
-
this._updateFocusableItemsTabIndex();
|
|
852
|
-
break;
|
|
853
|
-
default:
|
|
854
|
-
this.callBase.apply(this, arguments);
|
|
855
|
-
}
|
|
856
|
-
},
|
|
857
|
-
_changeMenuOption: function(name, value) {
|
|
858
|
-
this._menu.widgetOption(name, value);
|
|
859
|
-
}
|
|
860
|
-
});
|
|
861
|
-
registerComponent("dxToolbar", Toolbar);
|
|
862
|
-
|
|
863
|
-
const tttxWorksheetCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto&display=swap\");*{box-sizing:border-box}.flex-start{justify-content:start}.flex-end{justify-content:end}.flex-centre{justify-content:center}[class^=col-]{display:flex;padding-left:8px !important;padding-right:8px !important}h1,h2,h3,h4,h5,h6,p,label,small{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p,label{display:block}*{font-family:\"Roboto\", sans-serif}html,body{font-weight:normal;font-size:16px}h1{font-weight:700;font-size:24px}h2{font-weight:700;font-size:20px}h3{font-weight:700;font-size:18px}h4{font-weight:normal;font-size:14px;text-transform:uppercase}button{font-weight:500;font-size:14px;text-transform:uppercase}small{font-weight:normal;font-size:14px}label{font-weight:700;font-size:16px}:host{display:block}.worksheet__container,.worksheet__container--large,.worksheet__container--medium,.worksheet__container--small{position:absolute;top:104px;bottom:8px;left:0px;right:0px;overflow:auto;background-color:#ffffff;clear:both}.worksheet__container,.worksheet__container--medium,.worksheet__container--small,.worksheet__footer--medium,.worksheet__footer--small{margin:0px auto}.worksheet__container--large{margin:0px 16px}.worksheet__container--medium{width:900px}.worksheet__container--small{width:600px}.worksheet__footer--medium.dx-toolbar,.worksheet__footer--small.dx-toolbar{position:fixed;bottom:0px;left:0px;right:0px;padding:0 8px}.worksheet__footer--medium.dx-toolbar{width:900px}.worksheet__footer--small.dx-toolbar{width:600px}";
|
|
864
|
-
|
|
865
|
-
const TttxWorksheet = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
|
|
866
|
-
constructor() {
|
|
867
|
-
super();
|
|
868
|
-
this.__registerHost();
|
|
869
|
-
this.pageSize = 'large';
|
|
870
|
-
}
|
|
871
|
-
componentDidLoad() {
|
|
872
|
-
this.footer();
|
|
873
|
-
}
|
|
874
|
-
pageSizeIsNumeric() {
|
|
875
|
-
return /^\d+$/.test(this.pageSize);
|
|
876
|
-
}
|
|
877
|
-
pageSizeClasses(baseClassName) {
|
|
878
|
-
return this.pageSizeIsNumeric() ? baseClassName : `${baseClassName}--${this.pageSize}`;
|
|
879
|
-
}
|
|
880
|
-
footer() {
|
|
881
|
-
if (!['medium', 'small'].includes(this.pageSize)) {
|
|
882
|
-
return;
|
|
883
|
-
}
|
|
884
|
-
new Toolbar(this.footerBar, {
|
|
885
|
-
items: [
|
|
886
|
-
{
|
|
887
|
-
location: 'after',
|
|
888
|
-
widget: Button,
|
|
889
|
-
options: {
|
|
890
|
-
text: 'save'
|
|
891
|
-
}
|
|
892
|
-
}
|
|
893
|
-
]
|
|
894
|
-
});
|
|
895
|
-
}
|
|
896
|
-
render() {
|
|
897
|
-
const customPageWidth = this.pageSizeIsNumeric() ? { width: `${this.pageSize}px` } : {};
|
|
898
|
-
return (h(Host, null, h("div", { class: this.pageSizeClasses('worksheet__container'), style: Object.assign({}, customPageWidth) }, h("slot", null), h("div", { class: `worksheet__footer--${this.pageSize}`, ref: el => (this.footerBar = el) }))));
|
|
899
|
-
}
|
|
900
|
-
static get style() { return tttxWorksheetCss; }
|
|
901
|
-
}, [4, "tttx-worksheet", {
|
|
902
|
-
"pageSize": [1, "page-size"]
|
|
903
|
-
}]);
|
|
904
|
-
function defineCustomElement() {
|
|
905
|
-
if (typeof customElements === "undefined") {
|
|
906
|
-
return;
|
|
907
|
-
}
|
|
908
|
-
const components = ["tttx-worksheet"];
|
|
909
|
-
components.forEach(tagName => { switch (tagName) {
|
|
910
|
-
case "tttx-worksheet":
|
|
911
|
-
if (!customElements.get(tagName)) {
|
|
912
|
-
customElements.define(tagName, TttxWorksheet);
|
|
913
|
-
}
|
|
914
|
-
break;
|
|
915
|
-
} });
|
|
916
|
-
}
|
|
917
|
-
|
|
918
|
-
export { Toolbar as T, TttxWorksheet as a, defineCustomElement as d };
|