@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,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 };