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