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