@keenthemes/ktui 1.0.25 → 1.0.27

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 (85) hide show
  1. package/dist/ktui.js +335 -36
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +216 -13
  5. package/examples/datatable/checkbox-events-test.html +400 -0
  6. package/examples/datatable/credentials-test.html +423 -0
  7. package/examples/datatable/remote-checkbox-test.html +365 -0
  8. package/examples/modal/persistent.html +205 -0
  9. package/examples/modal/remote-select-dropdown.html +166 -0
  10. package/examples/modal/select-dropdown-container.html +129 -0
  11. package/examples/select/formdata-remote.html +161 -0
  12. package/examples/select/modal-positioning-test.html +338 -0
  13. package/lib/cjs/components/datatable/datatable-checkbox.js +16 -3
  14. package/lib/cjs/components/datatable/datatable-checkbox.js.map +1 -1
  15. package/lib/cjs/components/datatable/datatable.js +3 -5
  16. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  17. package/lib/cjs/components/image-input/image-input.js.map +1 -1
  18. package/lib/cjs/components/modal/modal.js +16 -2
  19. package/lib/cjs/components/modal/modal.js.map +1 -1
  20. package/lib/cjs/components/select/config.js +5 -0
  21. package/lib/cjs/components/select/config.js.map +1 -1
  22. package/lib/cjs/components/select/dropdown.js +54 -3
  23. package/lib/cjs/components/select/dropdown.js.map +1 -1
  24. package/lib/cjs/components/select/select.js +241 -23
  25. package/lib/cjs/components/select/select.js.map +1 -1
  26. package/lib/cjs/components/select/templates.js.map +1 -1
  27. package/lib/esm/components/datatable/datatable-checkbox.js +16 -3
  28. package/lib/esm/components/datatable/datatable-checkbox.js.map +1 -1
  29. package/lib/esm/components/datatable/datatable.js +3 -5
  30. package/lib/esm/components/datatable/datatable.js.map +1 -1
  31. package/lib/esm/components/image-input/image-input.js.map +1 -1
  32. package/lib/esm/components/modal/modal.js +16 -2
  33. package/lib/esm/components/modal/modal.js.map +1 -1
  34. package/lib/esm/components/select/config.js +5 -0
  35. package/lib/esm/components/select/config.js.map +1 -1
  36. package/lib/esm/components/select/dropdown.js +54 -3
  37. package/lib/esm/components/select/dropdown.js.map +1 -1
  38. package/lib/esm/components/select/select.js +241 -23
  39. package/lib/esm/components/select/select.js.map +1 -1
  40. package/lib/esm/components/select/templates.js.map +1 -1
  41. package/package.json +1 -1
  42. package/src/components/datatable/datatable-checkbox.ts +18 -3
  43. package/src/components/datatable/datatable.ts +3 -0
  44. package/src/components/datatable/types.ts +1 -0
  45. package/src/components/image-input/image-input.ts +12 -15
  46. package/src/components/modal/modal.ts +20 -2
  47. package/src/components/select/config.ts +6 -0
  48. package/src/components/select/dropdown.ts +69 -4
  49. package/src/components/select/select.ts +306 -36
  50. package/src/components/select/templates.ts +2 -1
  51. package/lib/cjs/components/config.js +0 -26
  52. package/lib/cjs/components/config.js.map +0 -1
  53. package/lib/cjs/components/config.umd.js +0 -23
  54. package/lib/cjs/components/config.umd.js.map +0 -1
  55. package/lib/cjs/components/menu/index.js +0 -6
  56. package/lib/cjs/components/menu/index.js.map +0 -1
  57. package/lib/cjs/components/menu/menu.js +0 -1021
  58. package/lib/cjs/components/menu/menu.js.map +0 -1
  59. package/lib/cjs/components/menu/types.js +0 -3
  60. package/lib/cjs/components/menu/types.js.map +0 -1
  61. package/lib/cjs/components/theme/index.js +0 -6
  62. package/lib/cjs/components/theme/index.js.map +0 -1
  63. package/lib/cjs/components/theme/theme.js +0 -147
  64. package/lib/cjs/components/theme/theme.js.map +0 -1
  65. package/lib/cjs/components/theme/types.js +0 -3
  66. package/lib/cjs/components/theme/types.js.map +0 -1
  67. package/lib/esm/components/config.js +0 -24
  68. package/lib/esm/components/config.js.map +0 -1
  69. package/lib/esm/components/config.umd.js +0 -23
  70. package/lib/esm/components/config.umd.js.map +0 -1
  71. package/lib/esm/components/menu/index.js +0 -2
  72. package/lib/esm/components/menu/index.js.map +0 -1
  73. package/lib/esm/components/menu/menu.js +0 -1018
  74. package/lib/esm/components/menu/menu.js.map +0 -1
  75. package/lib/esm/components/menu/types.js +0 -2
  76. package/lib/esm/components/menu/types.js.map +0 -1
  77. package/lib/esm/components/theme/index.js +0 -2
  78. package/lib/esm/components/theme/index.js.map +0 -1
  79. package/lib/esm/components/theme/theme.js +0 -144
  80. package/lib/esm/components/theme/theme.js.map +0 -1
  81. package/lib/esm/components/theme/types.js +0 -2
  82. package/lib/esm/components/theme/types.js.map +0 -1
  83. /package/examples/select/{dark-mode-test.html → dark-mode.html} +0 -0
  84. /package/examples/select/{dropdowncontainer-test.html → dropdowncontainer.html} +0 -0
  85. /package/examples/select/{global-config-test.html → global-config.html} +0 -0
@@ -1,1021 +0,0 @@
1
- "use strict";
2
- var __extends = (this && this.__extends) || (function () {
3
- var extendStatics = function (d, b) {
4
- extendStatics = Object.setPrototypeOf ||
5
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
6
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
7
- return extendStatics(d, b);
8
- };
9
- return function (d, b) {
10
- if (typeof b !== "function" && b !== null)
11
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
12
- extendStatics(d, b);
13
- function __() { this.constructor = d; }
14
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
15
- };
16
- })();
17
- Object.defineProperty(exports, "__esModule", { value: true });
18
- exports.KTMenu = void 0;
19
- var core_1 = require("@popperjs/core");
20
- var dom_1 = require("../../helpers/dom");
21
- var utils_1 = require("../../helpers/utils");
22
- var data_1 = require("../../helpers/data");
23
- var event_handler_1 = require("../../helpers/event-handler");
24
- var component_1 = require("../component");
25
- var constants_1 = require("../constants");
26
- var dropdown_1 = require("../dropdown");
27
- var KTMenu = /** @class */ (function (_super) {
28
- __extends(KTMenu, _super);
29
- function KTMenu(element, config) {
30
- var _this = _super.call(this) || this;
31
- _this._name = 'menu';
32
- _this._defaultConfig = {
33
- dropdownZindex: '105',
34
- dropdownHoverTimeout: 200,
35
- accordionExpandAll: false
36
- };
37
- _this._config = _this._defaultConfig;
38
- _this._disabled = false;
39
- if (data_1.default.has(element, _this._name))
40
- return _this;
41
- _this._init(element);
42
- _this._buildConfig(config);
43
- _this._update();
44
- return _this;
45
- }
46
- KTMenu.prototype._click = function (element, event) {
47
- if (element.hasAttribute('href') && element.getAttribute('href') !== '#') {
48
- return;
49
- }
50
- event.preventDefault();
51
- event.stopPropagation();
52
- if (this._disabled === true) {
53
- return;
54
- }
55
- var itemElement = this._getItemElement(element);
56
- if (!itemElement)
57
- return;
58
- if (this._getItemOption(itemElement, 'trigger') !== 'click') {
59
- return;
60
- }
61
- if (this._getItemOption(itemElement, 'toggle') === false) {
62
- this._show(itemElement);
63
- }
64
- else {
65
- this._toggle(itemElement);
66
- }
67
- };
68
- KTMenu.prototype._link = function (element, event) {
69
- if (this._disabled === true) {
70
- return;
71
- }
72
- var payload = {
73
- cancel: false,
74
- element: element,
75
- event: event
76
- };
77
- this._fireEvent('link.click', payload);
78
- this._dispatchEvent('link.click', payload);
79
- if (payload.cancel === true) {
80
- return;
81
- }
82
- var itemElement = this._getItemElement(element);
83
- if (this._isItemDropdownPermanent(itemElement) === false) {
84
- KTMenu.hide();
85
- }
86
- payload = {
87
- element: element,
88
- event: event
89
- };
90
- this._fireEvent('link.clicked', payload);
91
- this._dispatchEvent('link.clicked', payload);
92
- };
93
- KTMenu.prototype._dismiss = function (element) {
94
- var _this = this;
95
- var itemElement = this._getItemElement(element);
96
- if (!itemElement)
97
- return;
98
- var itemElements = this._getItemChildElements(itemElement);
99
- if (itemElement !== null &&
100
- this._getItemToggleMode(itemElement) === 'dropdown') {
101
- // hide items dropdown
102
- this._hide(itemElement);
103
- // Hide all child elements as well
104
- itemElements.forEach(function (each) {
105
- if (_this._getItemToggleMode(each) === 'dropdown') {
106
- _this._hide(each);
107
- }
108
- });
109
- }
110
- };
111
- KTMenu.prototype._mouseover = function (element) {
112
- var itemElement = this._getItemElement(element);
113
- if (!itemElement)
114
- return;
115
- if (this._disabled === true) {
116
- return;
117
- }
118
- if (itemElement === null) {
119
- return;
120
- }
121
- if (this._getItemOption(itemElement, 'trigger') !== 'hover') {
122
- return;
123
- }
124
- if (data_1.default.get(itemElement, 'hover') === '1') {
125
- clearTimeout(data_1.default.get(itemElement, 'timeout'));
126
- data_1.default.remove(itemElement, 'hover');
127
- data_1.default.remove(itemElement, 'timeout');
128
- }
129
- this._show(itemElement);
130
- };
131
- KTMenu.prototype._mouseout = function (element) {
132
- var _this = this;
133
- var itemElement = this._getItemElement(element);
134
- if (!itemElement)
135
- return;
136
- if (this._disabled === true) {
137
- return;
138
- }
139
- if (this._getItemOption(itemElement, 'trigger') !== 'hover') {
140
- return;
141
- }
142
- var timeout = setTimeout(function () {
143
- if (data_1.default.get(itemElement, 'hover') === '1') {
144
- _this._hide(itemElement);
145
- }
146
- }, parseInt(this._getOption('dropdownHoverTimeout')));
147
- data_1.default.set(itemElement, 'hover', '1');
148
- data_1.default.set(itemElement, 'timeout', timeout);
149
- };
150
- KTMenu.prototype._toggle = function (itemElement) {
151
- if (this._isItemSubShown(itemElement) === true) {
152
- this._hide(itemElement);
153
- }
154
- else {
155
- this._show(itemElement);
156
- }
157
- };
158
- KTMenu.prototype._show = function (itemElement) {
159
- if (this._isItemSubShown(itemElement) === true) {
160
- return;
161
- }
162
- if (this._getItemToggleMode(itemElement) === 'dropdown') {
163
- this._showDropdown(itemElement);
164
- }
165
- else if (this._getItemToggleMode(itemElement) === 'accordion') {
166
- this._showAccordion(itemElement);
167
- }
168
- // Remember last submenu type
169
- data_1.default.set(itemElement, 'toggle', this._getItemToggleMode(itemElement));
170
- };
171
- KTMenu.prototype._hide = function (itemElement) {
172
- if (this._isItemSubShown(itemElement) === false) {
173
- return;
174
- }
175
- if (this._getItemToggleMode(itemElement) === 'dropdown') {
176
- this._hideDropdown(itemElement);
177
- }
178
- else if (this._getItemToggleMode(itemElement) === 'accordion') {
179
- this._hideAccordion(itemElement);
180
- }
181
- };
182
- KTMenu.prototype._reset = function (itemElement) {
183
- if (this._hasItemSub(itemElement) === false) {
184
- return;
185
- }
186
- var subElement = this._getItemSubElement(itemElement);
187
- // Reset sub state if sub type is changed during the window resize
188
- if (data_1.default.has(itemElement, 'toggle') &&
189
- data_1.default.get(itemElement, 'toggle') !== this._getItemToggleMode(itemElement)) {
190
- itemElement.classList.remove('show');
191
- subElement === null || subElement === void 0 ? void 0 : subElement.classList.remove('show');
192
- }
193
- };
194
- KTMenu.prototype._update = function () {
195
- var _this = this;
196
- if (!this._element)
197
- return;
198
- var itemElements = this._element.querySelectorAll('.menu-item[data-menu-item-trigger]');
199
- itemElements.forEach(function (itemElement) {
200
- _this._updateItemSubType(itemElement);
201
- _this._reset(itemElement);
202
- });
203
- };
204
- KTMenu.prototype._updateItemSubType = function (itemElement) {
205
- var subElement = this._getItemSubElement(itemElement);
206
- if (subElement) {
207
- if (this._getItemToggleMode(itemElement) === 'dropdown') {
208
- itemElement.classList.remove('menu-item-accordion');
209
- itemElement.classList.add('menu-item-dropdown');
210
- subElement.classList.remove('menu-accordion');
211
- subElement.classList.add('menu-dropdown');
212
- }
213
- else {
214
- itemElement.classList.remove('menu-item-dropdown');
215
- itemElement.classList.add('menu-item-accordion');
216
- subElement.classList.remove('menu-dropdown');
217
- subElement.classList.add('menu-accordion');
218
- }
219
- }
220
- };
221
- KTMenu.prototype._isItemSubShown = function (itemElement) {
222
- var subElement = this._getItemSubElement(itemElement);
223
- if (subElement !== null) {
224
- if (this._getItemToggleMode(itemElement) === 'dropdown') {
225
- if (subElement.classList.contains('show') === true &&
226
- subElement.hasAttribute('data-popper-placement') === true) {
227
- return true;
228
- }
229
- else {
230
- return false;
231
- }
232
- }
233
- else {
234
- return itemElement.classList.contains('show');
235
- }
236
- }
237
- else {
238
- return false;
239
- }
240
- };
241
- KTMenu.prototype._isItemDropdownPermanent = function (itemElement) {
242
- return this._getItemOption(itemElement, 'permanent');
243
- };
244
- KTMenu.prototype._isItemParentShown = function (itemElement) {
245
- var parents = dom_1.default.parents(itemElement, '.menu-item.show');
246
- return parents && parents.length > 0 ? true : false;
247
- };
248
- KTMenu.prototype._isItemSubElement = function (itemElement) {
249
- return itemElement.classList.contains('menu-dropdown') || itemElement.classList.contains('menu-accordion');
250
- };
251
- KTMenu.prototype._hasItemSub = function (itemElement) {
252
- return (itemElement.classList.contains('menu-item') &&
253
- itemElement.hasAttribute('data-menu-item-trigger'));
254
- };
255
- KTMenu.prototype._getItemLinkElement = function (itemElement) {
256
- return dom_1.default.child(itemElement, '.menu-link, .menu-toggle');
257
- };
258
- KTMenu.prototype._getItemSubElement = function (itemElement) {
259
- if (itemElement.classList.contains('menu-dropdown') === true || itemElement.classList.contains('menu-accordion') === true) {
260
- return itemElement;
261
- }
262
- else if (data_1.default.has(itemElement, 'sub')) {
263
- return data_1.default.get(itemElement, 'sub');
264
- }
265
- else {
266
- return dom_1.default.child(itemElement, '.menu-dropdown, .menu-accordion');
267
- }
268
- };
269
- KTMenu.prototype._getItemToggleMode = function (itemElement) {
270
- var itemEl = this._getItemElement(itemElement);
271
- if (this._getItemOption(itemEl, 'toggle') === 'dropdown') {
272
- return 'dropdown';
273
- }
274
- else {
275
- return 'accordion';
276
- }
277
- };
278
- KTMenu.prototype._getItemElement = function (element) {
279
- if (element.classList.contains('menu-item') && element.hasAttribute('data-menu-item-toggle')) {
280
- return element;
281
- }
282
- // Element has item DOM reference in it's data storage
283
- if (data_1.default.has(element, 'item')) {
284
- return data_1.default.get(element, 'item');
285
- }
286
- // Item is parent of element
287
- var itemElement = element.closest('.menu-item[data-menu-item-toggle]');
288
- if (itemElement) {
289
- return itemElement;
290
- }
291
- // Element's parent has item DOM reference in it's data storage
292
- var subElement = element.closest('.menu-dropdown, .menu-accordion');
293
- if (subElement) {
294
- if (data_1.default.has(subElement, 'item') === true) {
295
- return data_1.default.get(subElement, 'item');
296
- }
297
- }
298
- return null;
299
- };
300
- KTMenu.prototype._getItemParentElement = function (itemElement) {
301
- var subElement = itemElement.closest('.menu-dropdown, .menu-accordion');
302
- var parentItem;
303
- if (subElement && data_1.default.has(subElement, 'item')) {
304
- return data_1.default.get(subElement, 'item');
305
- }
306
- if (subElement &&
307
- (parentItem = subElement.closest('.menu-item[data-menu-item-trigger]'))) {
308
- return parentItem;
309
- }
310
- return null;
311
- };
312
- KTMenu.prototype._getItemParentElements = function (itemElement) {
313
- var parentElements = [];
314
- var parentElement;
315
- var i = 0;
316
- do {
317
- parentElement = this._getItemParentElement(itemElement);
318
- if (parentElement) {
319
- parentElements.push(parentElement);
320
- itemElement = parentElement;
321
- }
322
- i++;
323
- } while (parent !== null && i < 20);
324
- return parentElements;
325
- };
326
- KTMenu.prototype._getItemChildElement = function (itemElement) {
327
- var selector = itemElement;
328
- var element;
329
- if (data_1.default.has(itemElement, 'sub')) {
330
- selector = data_1.default.get(itemElement, 'sub');
331
- }
332
- if (selector !== null) {
333
- //element = selector.querySelector('.show.menu-item[data-menu-trigger]');
334
- element = selector.querySelector('.menu-item[data-menu-item-trigger]');
335
- if (element) {
336
- return element;
337
- }
338
- else {
339
- return null;
340
- }
341
- }
342
- else {
343
- return null;
344
- }
345
- };
346
- KTMenu.prototype._getItemChildElements = function (itemElement) {
347
- var children = [];
348
- var child;
349
- var i = 0;
350
- var buffer = itemElement;
351
- do {
352
- child = this._getItemChildElement(buffer);
353
- if (child) {
354
- children.push(child);
355
- buffer = child;
356
- }
357
- i++;
358
- } while (child !== null && i < 20);
359
- return children;
360
- };
361
- KTMenu.prototype._showDropdown = function (itemElement) {
362
- var payload = { cancel: false };
363
- this._fireEvent('dropdown.show', payload);
364
- this._dispatchEvent('dropdown.show', payload);
365
- if (payload.cancel === true) {
366
- return;
367
- }
368
- // Hide all currently shown dropdowns except current one
369
- KTMenu.hide(itemElement);
370
- dropdown_1.KTDropdown.hide(itemElement);
371
- var subElement = this._getItemSubElement(itemElement);
372
- if (!subElement)
373
- return;
374
- var width = this._getItemOption(itemElement, 'width');
375
- var height = this._getItemOption(itemElement, 'height');
376
- // Set z=index
377
- var zindex = parseInt(this._getOption('dropdownZindex'));
378
- if (parseInt(dom_1.default.getCssProp(subElement, 'z-index')) > zindex) {
379
- zindex = parseInt(dom_1.default.getCssProp(subElement, 'z-index'));
380
- }
381
- if (dom_1.default.getHighestZindex(itemElement) > zindex) {
382
- zindex = dom_1.default.getHighestZindex(itemElement) + 1;
383
- }
384
- subElement.style.zIndex = String(zindex);
385
- // end
386
- if (width) {
387
- subElement.style.width = width;
388
- }
389
- if (height) {
390
- subElement.style.height = height;
391
- }
392
- subElement.style.display = '';
393
- subElement.style.overflow = '';
394
- // Init popper(new)
395
- this._initDropdownPopper(itemElement, subElement);
396
- itemElement.classList.add('show');
397
- itemElement.classList.add('menu-item-dropdown');
398
- subElement.classList.add('show');
399
- // Append the sub the the root of the menu
400
- if (this._getItemOption(itemElement, 'overflow') === true) {
401
- document.body.appendChild(subElement);
402
- subElement.setAttribute('data-menu-sub-overflow', 'true');
403
- data_1.default.set(itemElement, 'sub', subElement);
404
- data_1.default.set(subElement, 'item', itemElement);
405
- data_1.default.set(subElement, 'menu', this);
406
- }
407
- else {
408
- data_1.default.set(subElement, 'item', itemElement);
409
- }
410
- // Handle dropdown shown event
411
- this._fireEvent('dropdown.shown');
412
- this._dispatchEvent('dropdown.shown');
413
- };
414
- KTMenu.prototype._hideDropdown = function (itemElement) {
415
- var payload = { cancel: false };
416
- this._fireEvent('dropdown.hide', payload);
417
- this._dispatchEvent('dropdown.hide', payload);
418
- if (payload.cancel === true) {
419
- return;
420
- }
421
- var subElement = this._getItemSubElement(itemElement);
422
- if (!subElement)
423
- return;
424
- subElement.style.zIndex = '';
425
- subElement.style.width = '';
426
- subElement.style.height = '';
427
- itemElement.classList.remove('show');
428
- itemElement.classList.remove('menu-item-dropdown');
429
- subElement.classList.remove('show');
430
- // Append the sub back to it's parent
431
- if (this._getItemOption(itemElement, 'overflow') === true) {
432
- subElement.removeAttribute('data-menu-sub-overflow');
433
- if (itemElement.classList.contains('menu-item')) {
434
- itemElement.appendChild(subElement);
435
- }
436
- else {
437
- if (!this._element)
438
- return;
439
- dom_1.default.insertAfter(this._element, itemElement);
440
- }
441
- data_1.default.remove(itemElement, 'sub');
442
- data_1.default.remove(subElement, 'item');
443
- data_1.default.remove(subElement, 'menu');
444
- }
445
- // Destroy popper(new)
446
- this._destroyDropdownPopper(itemElement);
447
- // Handle dropdown hidden event
448
- this._fireEvent('dropdown.hidden');
449
- this._dispatchEvent('dropdown.hidden');
450
- };
451
- KTMenu.prototype._initDropdownPopper = function (itemElement, subElement) {
452
- // Setup popper instance
453
- var reference;
454
- var attach = this._getItemOption(itemElement, 'attach');
455
- if (attach) {
456
- if (attach === 'parent') {
457
- reference = itemElement.parentNode;
458
- }
459
- else {
460
- reference = document.querySelector(attach);
461
- }
462
- }
463
- else {
464
- reference = itemElement;
465
- }
466
- if (reference) {
467
- var popper = (0, core_1.createPopper)(reference, subElement, this._getDropdownPopperConfig(itemElement));
468
- data_1.default.set(itemElement, 'popper', popper);
469
- }
470
- };
471
- KTMenu.prototype._destroyDropdownPopper = function (itemElement) {
472
- if (data_1.default.has(itemElement, 'popper')) {
473
- data_1.default.get(itemElement, 'popper').destroy();
474
- data_1.default.remove(itemElement, 'popper');
475
- }
476
- };
477
- KTMenu.prototype._getDropdownPopperConfig = function (itemElement) {
478
- // Placement
479
- var placement = this._getItemOption(itemElement, 'placement');
480
- if (!placement) {
481
- placement = 'right';
482
- }
483
- // Offset
484
- var offsetValue = this._getItemOption(itemElement, 'offset');
485
- var offset = offsetValue ? offsetValue.toString().split(',').map(function (value) { return parseInt(value.trim(), 10); }) : [0, 0];
486
- // Strategy
487
- var strategy = this._getItemOption(itemElement, 'overflow') === true ? 'absolute' : 'fixed';
488
- var altAxis = this._getItemOption(itemElement, 'flip') !== false ? true : false;
489
- var popperConfig = {
490
- placement: placement,
491
- strategy: strategy,
492
- modifiers: [
493
- {
494
- name: 'offset',
495
- options: {
496
- offset: offset
497
- }
498
- },
499
- {
500
- name: 'preventOverflow',
501
- options: {
502
- altAxis: altAxis
503
- }
504
- },
505
- {
506
- name: 'flip',
507
- options: {
508
- flipVariations: false
509
- }
510
- }
511
- ]
512
- };
513
- return popperConfig;
514
- };
515
- KTMenu.prototype._showAccordion = function (itemElement) {
516
- var _this = this;
517
- var payload = { cancel: false };
518
- this._fireEvent('accordion.show', payload);
519
- this._dispatchEvent('accordion.show', payload);
520
- if (payload.cancel === true) {
521
- return;
522
- }
523
- var subElement = this._getItemSubElement(itemElement);
524
- if (!subElement)
525
- return;
526
- var expandAll = this._getOption('accordionExpandAll');
527
- if (this._getItemOption(itemElement, 'expandAll') === true) {
528
- expandAll = true;
529
- }
530
- else if (this._getItemOption(itemElement, 'expandAll') === false) {
531
- expandAll = false;
532
- }
533
- else if (this._element && this._getItemOption(this._element, 'expandAll') === true) {
534
- expandAll = true;
535
- }
536
- if (expandAll === false) {
537
- this._hideAccordions(itemElement);
538
- }
539
- if (data_1.default.has(itemElement, 'popper') === true) {
540
- this._hideDropdown(itemElement);
541
- }
542
- itemElement.classList.add('transitioning');
543
- subElement.style.height = '0px';
544
- dom_1.default.reflow(subElement);
545
- subElement.style.display = 'flex';
546
- subElement.style.overflow = 'hidden';
547
- subElement.style.height = "".concat(subElement.scrollHeight, "px");
548
- itemElement.classList.add('show');
549
- dom_1.default.transitionEnd(subElement, function () {
550
- itemElement.classList.remove('transitioning');
551
- subElement.classList.add('show');
552
- subElement.style.height = '';
553
- subElement.style.display = '';
554
- subElement.style.overflow = '';
555
- // Handle accordion hidden event
556
- _this._fireEvent('accordion.shown', payload);
557
- _this._dispatchEvent('accordion.shown', payload);
558
- });
559
- };
560
- KTMenu.prototype._hideAccordion = function (itemElement) {
561
- var _this = this;
562
- var payload = { cancel: false };
563
- this._fireEvent('accordion.hide', payload);
564
- this._dispatchEvent('accordion.hide', payload);
565
- if (payload.cancel === true) {
566
- return;
567
- }
568
- var subElement = this._getItemSubElement(itemElement);
569
- if (!subElement)
570
- return;
571
- itemElement.classList.add('transitioning');
572
- itemElement.classList.remove('show');
573
- subElement.style.height = "".concat(subElement.scrollHeight, "px");
574
- dom_1.default.reflow(subElement);
575
- subElement.style.height = '0px';
576
- subElement.style.overflow = 'hidden';
577
- dom_1.default.transitionEnd(subElement, function () {
578
- subElement.style.overflow = '';
579
- itemElement.classList.remove('transitioning');
580
- subElement.classList.remove('show');
581
- // Handle accordion hidden event
582
- _this._fireEvent('accordion.hidden');
583
- _this._dispatchEvent('accordion.hidden');
584
- });
585
- };
586
- KTMenu.prototype._setActiveLink = function (linkElement) {
587
- var _this = this;
588
- var itemElement = this._getItemElement(linkElement);
589
- if (!itemElement)
590
- return;
591
- if (!this._element)
592
- return;
593
- var parentItems = this._getItemParentElements(itemElement);
594
- var activeLinks = this._element.querySelectorAll('.menu-link.active');
595
- var activeParentItems = this._element.querySelectorAll('.menu-item.here, .menu-item.show');
596
- if (this._getItemToggleMode(itemElement) === 'accordion') {
597
- this._showAccordion(itemElement);
598
- }
599
- else {
600
- itemElement.classList.add('here');
601
- }
602
- parentItems === null || parentItems === void 0 ? void 0 : parentItems.forEach(function (parentItem) {
603
- if (_this._getItemToggleMode(parentItem) === 'accordion') {
604
- _this._showAccordion(parentItem);
605
- }
606
- else {
607
- parentItem.classList.add('here');
608
- }
609
- });
610
- activeLinks === null || activeLinks === void 0 ? void 0 : activeLinks.forEach(function (activeLink) {
611
- activeLink.classList.remove('active');
612
- });
613
- activeParentItems === null || activeParentItems === void 0 ? void 0 : activeParentItems.forEach(function (activeParentItem) {
614
- if (activeParentItem.contains(itemElement) === false) {
615
- activeParentItem.classList.remove('here');
616
- activeParentItem.classList.remove('show');
617
- }
618
- });
619
- linkElement.classList.add('active');
620
- };
621
- KTMenu.prototype._getLinkByAttribute = function (value, name) {
622
- if (name === void 0) { name = 'href'; }
623
- if (!this._element)
624
- return null;
625
- var linkElement = this._element.querySelector("'.menu-link[".concat(name, "=\"").concat(value, "\"]"));
626
- return linkElement && null;
627
- };
628
- KTMenu.prototype._hideAccordions = function (itemElement) {
629
- var _this = this;
630
- if (!this._element)
631
- return;
632
- var itemsToHide = this._element.querySelectorAll('.show[data-menu-item-trigger]');
633
- itemsToHide.forEach(function (itemToHide) {
634
- if (_this._getItemToggleMode(itemToHide) === 'accordion' &&
635
- itemToHide !== itemElement &&
636
- (itemElement === null || itemElement === void 0 ? void 0 : itemElement.contains(itemToHide)) === false &&
637
- itemToHide.contains(itemElement) === false) {
638
- _this._hideAccordion(itemToHide);
639
- }
640
- });
641
- };
642
- KTMenu.prototype._getItemOption = function (element, name) {
643
- var attr;
644
- var value = null;
645
- if (element && element.hasAttribute("data-menu-item-".concat(name))) {
646
- attr = element.getAttribute("data-menu-item-".concat(name));
647
- if (!attr)
648
- return null;
649
- value = this._getResponsiveOption(attr);
650
- }
651
- return value;
652
- };
653
- // General Methods
654
- KTMenu.prototype.getItemTriggerMode = function (itemElement) {
655
- return this._getItemOption(itemElement, 'trigger');
656
- };
657
- KTMenu.prototype.getItemToggleMode = function (element) {
658
- return this._getItemToggleMode(element);
659
- };
660
- KTMenu.prototype.click = function (element, event) {
661
- this._click(element, event);
662
- };
663
- KTMenu.prototype.link = function (element, event) {
664
- this._link(element, event);
665
- };
666
- KTMenu.prototype.dismiss = function (element) {
667
- this._dismiss(element);
668
- };
669
- KTMenu.prototype.mouseover = function (element) {
670
- this._mouseover(element);
671
- };
672
- KTMenu.prototype.mouseout = function (element) {
673
- this._mouseout(element);
674
- };
675
- KTMenu.prototype.show = function (itemElement) {
676
- return this._show(itemElement);
677
- };
678
- KTMenu.prototype.hide = function (itemElement) {
679
- this._hide(itemElement);
680
- };
681
- KTMenu.prototype.toggle = function (itemElement) {
682
- this._toggle(itemElement);
683
- };
684
- KTMenu.prototype.reset = function (itemElement) {
685
- this._reset(itemElement);
686
- };
687
- KTMenu.prototype.update = function () {
688
- this._update();
689
- };
690
- KTMenu.prototype.setActiveLink = function (link) {
691
- this._setActiveLink(link);
692
- };
693
- KTMenu.prototype.getLinkByAttribute = function (value, name) {
694
- if (name === void 0) { name = 'href'; }
695
- return this._getLinkByAttribute(value, name);
696
- };
697
- KTMenu.prototype.getItemLinkElement = function (itemElement) {
698
- return this._getItemLinkElement(itemElement);
699
- };
700
- KTMenu.prototype.getItemElement = function (element) {
701
- return this._getItemElement(element);
702
- };
703
- KTMenu.prototype.getItemSubElement = function (itemElement) {
704
- return this._getItemSubElement(itemElement);
705
- };
706
- KTMenu.prototype.getItemParentElements = function (itemElement) {
707
- return this._getItemParentElements(itemElement);
708
- };
709
- KTMenu.prototype.isItemSubShown = function (itemElement) {
710
- return this._isItemSubShown(itemElement);
711
- };
712
- KTMenu.prototype.isItemParentShown = function (itemElement) {
713
- return this._isItemParentShown(itemElement);
714
- };
715
- KTMenu.prototype.isItemDropdownPermanent = function (itemElement) {
716
- return this._isItemDropdownPermanent(itemElement);
717
- };
718
- KTMenu.prototype.disable = function () {
719
- this._disabled = true;
720
- };
721
- KTMenu.prototype.enable = function () {
722
- this._disabled = false;
723
- };
724
- KTMenu.prototype.hideAccordions = function (itemElement) {
725
- this._hideAccordions(itemElement);
726
- };
727
- // Statics methods
728
- KTMenu.getInstance = function (element) {
729
- if (!element) {
730
- return null;
731
- }
732
- // Element has menu DOM reference in it's DATA storage
733
- if (data_1.default.has(element, 'menu')) {
734
- return data_1.default.get(element, 'menu');
735
- }
736
- // Element has .menu parent
737
- var menuElement = element.closest('.menu');
738
- if (menuElement && data_1.default.has(menuElement, 'menu')) {
739
- return data_1.default.get(menuElement, 'menu');
740
- }
741
- else if (menuElement && menuElement.getAttribute("data-menu") === "true") {
742
- return new KTMenu(menuElement);
743
- }
744
- var subElement = element.closest('[data-menu-sub-overflow="true"]');
745
- if (subElement && data_1.default.has(subElement, 'menu')) {
746
- return data_1.default.get(subElement, 'menu');
747
- }
748
- // Element has a parent with DOM reference to .menu in it's DATA storage
749
- if (element.classList.contains('menu-link') || element.classList.contains('menu-toggle')) {
750
- var subElement_1 = (element.closest('.menu-dropdown') || element.closest('.menu-accordion'));
751
- if (data_1.default.has(subElement_1, 'menu')) {
752
- return data_1.default.get(subElement_1, 'menu');
753
- }
754
- }
755
- return null;
756
- };
757
- KTMenu.getOrCreateInstance = function (element, config) {
758
- return this.getInstance(element) || new KTMenu(element, config);
759
- };
760
- KTMenu.hide = function (skipElement) {
761
- var itemElements = document.querySelectorAll('.show.menu-item-dropdown[data-menu-item-trigger]');
762
- itemElements.forEach(function (itemElement) {
763
- var _a;
764
- var menu = KTMenu.getInstance(itemElement);
765
- if (menu && menu.getItemToggleMode(itemElement) === 'dropdown') {
766
- if (skipElement) {
767
- if (itemElement &&
768
- ((_a = menu.getItemSubElement(itemElement)) === null || _a === void 0 ? void 0 : _a.contains(skipElement)) === false &&
769
- itemElement.contains(skipElement) === false &&
770
- itemElement !== skipElement) {
771
- menu.hide(itemElement);
772
- }
773
- }
774
- else {
775
- menu.hide(itemElement);
776
- }
777
- }
778
- });
779
- };
780
- KTMenu.updateDropdowns = function () {
781
- var itemElements = document.querySelectorAll('.show.menu-item-dropdown[data-menu-item-trigger]');
782
- itemElements.forEach(function (itemElement) {
783
- if (data_1.default.has(itemElement, 'popper')) {
784
- data_1.default.get(itemElement, 'popper').forceUpdate();
785
- }
786
- });
787
- };
788
- KTMenu.updateByLinkAttribute = function (value, name) {
789
- if (name === void 0) { name = 'href'; }
790
- var elements = document.querySelectorAll('[data-menu]');
791
- elements.forEach(function (element) {
792
- var menu = KTMenu.getInstance(element);
793
- if (menu) {
794
- var link = menu.getLinkByAttribute(value, name);
795
- if (link) {
796
- menu.setActiveLink(link);
797
- }
798
- }
799
- });
800
- };
801
- KTMenu.handleClickAway = function () {
802
- document.addEventListener('click', function (event) {
803
- var itemElements = document.querySelectorAll('.show.menu-item-dropdown[data-menu-item-trigger]:not([data-menu-item-static="true"])');
804
- itemElements.forEach(function (itemElement) {
805
- var menu = KTMenu.getInstance(itemElement);
806
- if (menu &&
807
- menu.getItemToggleMode(itemElement) === 'dropdown') {
808
- var subElement = menu.getItemSubElement(itemElement);
809
- if (itemElement === event.target ||
810
- itemElement.contains(event.target)) {
811
- return;
812
- }
813
- if (subElement && (subElement === event.target || subElement.contains(event.target))) {
814
- return;
815
- }
816
- menu.hide(itemElement);
817
- }
818
- });
819
- });
820
- };
821
- KTMenu.findFocused = function () {
822
- var linkElement = document.querySelector('.menu-link:focus, .menu-toggle:focus');
823
- if (linkElement && dom_1.default.isVisible(linkElement)) {
824
- return linkElement;
825
- }
826
- else {
827
- return null;
828
- }
829
- };
830
- KTMenu.getFocusLink = function (linkElement, direction, preFocus) {
831
- if (preFocus === void 0) { preFocus = false; }
832
- if (!linkElement)
833
- return null;
834
- var itemElement = linkElement.parentElement;
835
- if (!itemElement || !itemElement.classList.contains('menu-item'))
836
- return null;
837
- if (direction === 'next') {
838
- var nextElement = linkElement.nextElementSibling;
839
- if (nextElement && (nextElement.matches('.menu-accordion' + (!preFocus ? '.show' : '')) || nextElement.matches('.menu-dropdown' + (!preFocus ? '.show' : '')))) {
840
- var itemElement2 = dom_1.default.child(nextElement, '.menu-item');
841
- return dom_1.default.child(itemElement2, '.menu-link');
842
- }
843
- else {
844
- var nextElement2 = itemElement.nextElementSibling;
845
- if (nextElement2 && nextElement2.classList.contains('menu-item')) {
846
- var nextLink = dom_1.default.child(nextElement2, '.menu-link');
847
- if (nextLink) {
848
- return nextLink;
849
- }
850
- }
851
- }
852
- }
853
- else {
854
- var prevElement = itemElement.previousElementSibling;
855
- if (prevElement) {
856
- if (prevElement && prevElement.classList.contains('menu-item')) {
857
- var nextLink = dom_1.default.child(prevElement, '.menu-link');
858
- if (nextLink) {
859
- return nextLink;
860
- }
861
- }
862
- }
863
- else {
864
- var parentElement = itemElement.parentElement;
865
- if (parentElement && (parentElement.matches('.menu-accordion' + (!preFocus ? '.show' : '')) || parentElement.matches('.menu-dropdown' + (!preFocus ? '.show' : '')))) {
866
- var prevElement2 = parentElement.previousElementSibling;
867
- if (prevElement2.classList.contains('menu-link')) {
868
- return prevElement2;
869
- }
870
- }
871
- }
872
- }
873
- return null;
874
- };
875
- KTMenu.handleKeyboard = function () {
876
- var _this = this;
877
- document.addEventListener('keydown', function (event) {
878
- if (constants_1.KT_ACCESSIBILITY_KEYS.includes(event.key) && !(event.ctrlKey || event.altKey || event.shiftKey)) {
879
- var currentFocused = _this.findFocused();
880
- if (!currentFocused)
881
- return;
882
- if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
883
- var direction = ['ArrowDown', 'ArrowRight'].includes(event.key) ? 'next' : 'previouse';
884
- var newFocusLink = _this.getFocusLink(currentFocused, direction);
885
- event.preventDefault();
886
- if (newFocusLink) {
887
- newFocusLink.focus();
888
- newFocusLink.classList.add('focus');
889
- }
890
- }
891
- if (event.key === 'Enter') {
892
- var menu = _this.getInstance(currentFocused);
893
- var itemElement = menu.getItemElement(currentFocused);
894
- var subShown = menu.isItemSubShown(itemElement);
895
- if (!menu)
896
- return;
897
- if (menu.getItemToggleMode(itemElement) === 'accordion') {
898
- currentFocused.dispatchEvent(new MouseEvent('click', {
899
- bubbles: true
900
- }));
901
- }
902
- if (menu.getItemToggleMode(itemElement) === 'dropdown') {
903
- if (menu.getItemTriggerMode(itemElement) === 'click') {
904
- currentFocused.dispatchEvent(new MouseEvent('click', {
905
- bubbles: true
906
- }));
907
- }
908
- else {
909
- if (subShown) {
910
- currentFocused.dispatchEvent(new MouseEvent('mouseout', {
911
- bubbles: true
912
- }));
913
- }
914
- else {
915
- currentFocused.dispatchEvent(new MouseEvent('mouseover', {
916
- bubbles: true
917
- }));
918
- }
919
- }
920
- }
921
- if (subShown) {
922
- var subFocus = _this.getFocusLink(currentFocused, 'next', true);
923
- if (subFocus) {
924
- subFocus.focus();
925
- }
926
- }
927
- else {
928
- currentFocused.focus();
929
- }
930
- event.preventDefault();
931
- }
932
- if (event.key === 'Escape') {
933
- var items = document.querySelectorAll('.show.menu-item-dropdown[data-menu-item-trigger]:not([data-menu-item-static="true"])');
934
- items.forEach(function (item) {
935
- var menu = KTMenu.getInstance(item);
936
- if (menu &&
937
- menu.getItemToggleMode(item) === 'dropdown') {
938
- menu.hide(item);
939
- }
940
- });
941
- }
942
- }
943
- }, false);
944
- };
945
- KTMenu.handleMouseover = function () {
946
- event_handler_1.default.on(document.body, '[data-menu-item-trigger], .menu-dropdown', 'mouseover', function (event, target) {
947
- var menu = KTMenu.getInstance(target);
948
- if (menu !== null && menu.getItemToggleMode(target) === 'dropdown') {
949
- return menu.mouseover(target);
950
- }
951
- });
952
- };
953
- KTMenu.handleMouseout = function () {
954
- event_handler_1.default.on(document.body, '[data-menu-item-trigger], .menu-dropdown', 'mouseout', function (event, target) {
955
- var menu = KTMenu.getInstance(target);
956
- if (menu !== null && menu.getItemToggleMode(target) === 'dropdown') {
957
- return menu.mouseout(target);
958
- }
959
- });
960
- };
961
- KTMenu.handleClick = function () {
962
- event_handler_1.default.on(document.body, '.menu-item[data-menu-item-trigger] > .menu-link, .menu-item[data-menu-item-trigger] > .menu-toggle, .menu-item[data-menu-item-trigger] > .menu-label .menu-toggle, [data-menu-item-trigger]:not(.menu-item):not([data-menu-item-trigger="auto"])', 'click', function (event, target) {
963
- var menu = KTMenu.getInstance(target);
964
- if (menu !== null) {
965
- return menu.click(target, event);
966
- }
967
- });
968
- event_handler_1.default.on(document.body, '.menu-item:not([data-menu-item-trigger]) > .menu-link', 'click', function (event, target) {
969
- var menu = KTMenu.getInstance(target);
970
- if (menu !== null) {
971
- return menu.link(target, event);
972
- }
973
- });
974
- };
975
- KTMenu.handleDismiss = function () {
976
- event_handler_1.default.on(document.body, '[data-menu-dismiss="true"]', 'click', function (event, target) {
977
- var menu = KTMenu.getInstance(target);
978
- if (menu !== null) {
979
- return menu.dismiss(target);
980
- }
981
- });
982
- };
983
- KTMenu.handleResize = function () {
984
- window.addEventListener('resize', function () {
985
- var timer;
986
- utils_1.default.throttle(timer, function () {
987
- // Locate and update Offcanvas instances on window resize
988
- var elements = document.querySelectorAll('[data-menu]');
989
- elements.forEach(function (element) {
990
- var _a;
991
- (_a = KTMenu.getInstance(element)) === null || _a === void 0 ? void 0 : _a.update();
992
- });
993
- }, 200);
994
- });
995
- };
996
- KTMenu.initHandlers = function () {
997
- this.handleClickAway();
998
- this.handleKeyboard();
999
- this.handleMouseover();
1000
- this.handleMouseout();
1001
- this.handleClick();
1002
- this.handleDismiss();
1003
- this.handleResize();
1004
- };
1005
- KTMenu.createInstances = function () {
1006
- var elements = document.querySelectorAll('[data-menu="true"]');
1007
- elements.forEach(function (element) {
1008
- new KTMenu(element);
1009
- });
1010
- };
1011
- KTMenu.init = function () {
1012
- KTMenu.createInstances();
1013
- if (window.KT_MENU_INITIALIZED !== true) {
1014
- KTMenu.initHandlers();
1015
- window.KT_MENU_INITIALIZED = true;
1016
- }
1017
- };
1018
- return KTMenu;
1019
- }(component_1.default));
1020
- exports.KTMenu = KTMenu;
1021
- //# sourceMappingURL=menu.js.map