@coreui/coreui 4.0.4 → 4.1.1

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 (144) hide show
  1. package/README.md +5 -8
  2. package/dist/css/coreui-grid.css +254 -205
  3. package/dist/css/coreui-grid.css.map +1 -1
  4. package/dist/css/coreui-grid.min.css +2 -2
  5. package/dist/css/coreui-grid.min.css.map +1 -1
  6. package/dist/css/coreui-grid.rtl.css +411 -362
  7. package/dist/css/coreui-grid.rtl.css.map +1 -1
  8. package/dist/css/coreui-grid.rtl.min.css +3 -3
  9. package/dist/css/coreui-grid.rtl.min.css.map +1 -1
  10. package/dist/css/coreui-reboot.css +63 -8
  11. package/dist/css/coreui-reboot.css.map +1 -1
  12. package/dist/css/coreui-reboot.min.css +2 -2
  13. package/dist/css/coreui-reboot.min.css.map +1 -1
  14. package/dist/css/coreui-reboot.rtl.css +64 -9
  15. package/dist/css/coreui-reboot.rtl.css.map +1 -1
  16. package/dist/css/coreui-reboot.rtl.min.css +3 -3
  17. package/dist/css/coreui-reboot.rtl.min.css.map +1 -1
  18. package/dist/css/coreui-utilities.css +181 -81
  19. package/dist/css/coreui-utilities.css.map +1 -1
  20. package/dist/css/coreui-utilities.min.css +2 -2
  21. package/dist/css/coreui-utilities.min.css.map +1 -1
  22. package/dist/css/coreui-utilities.rtl.css +380 -280
  23. package/dist/css/coreui-utilities.rtl.css.map +1 -1
  24. package/dist/css/coreui-utilities.rtl.min.css +3 -3
  25. package/dist/css/coreui-utilities.rtl.min.css.map +1 -1
  26. package/dist/css/coreui.css +712 -345
  27. package/dist/css/coreui.css.map +1 -1
  28. package/dist/css/coreui.min.css +2 -2
  29. package/dist/css/coreui.min.css.map +1 -1
  30. package/dist/css/coreui.rtl.css +893 -541
  31. package/dist/css/coreui.rtl.css.map +1 -1
  32. package/dist/css/coreui.rtl.min.css +3 -3
  33. package/dist/css/coreui.rtl.min.css.map +1 -1
  34. package/dist/js/coreui.bundle.js +855 -746
  35. package/dist/js/coreui.bundle.js.map +1 -1
  36. package/dist/js/coreui.bundle.min.js +3 -3
  37. package/dist/js/coreui.bundle.min.js.map +1 -1
  38. package/dist/js/coreui.esm.js +708 -644
  39. package/dist/js/coreui.esm.js.map +1 -1
  40. package/dist/js/coreui.esm.min.js +3 -3
  41. package/dist/js/coreui.esm.min.js.map +1 -1
  42. package/dist/js/coreui.js +718 -656
  43. package/dist/js/coreui.js.map +1 -1
  44. package/dist/js/coreui.min.js +3 -3
  45. package/dist/js/coreui.min.js.map +1 -1
  46. package/js/dist/alert.js +82 -49
  47. package/js/dist/alert.js.map +1 -1
  48. package/js/dist/base-component.js +26 -18
  49. package/js/dist/base-component.js.map +1 -1
  50. package/js/dist/button.js +23 -13
  51. package/js/dist/button.js.map +1 -1
  52. package/js/dist/carousel.js +95 -50
  53. package/js/dist/carousel.js.map +1 -1
  54. package/js/dist/collapse.js +125 -139
  55. package/js/dist/collapse.js.map +1 -1
  56. package/js/dist/dom/data.js +6 -6
  57. package/js/dist/dom/data.js.map +1 -1
  58. package/js/dist/dom/event-handler.js +15 -6
  59. package/js/dist/dom/event-handler.js.map +1 -1
  60. package/js/dist/dom/manipulator.js +7 -7
  61. package/js/dist/dom/manipulator.js.map +1 -1
  62. package/js/dist/dom/selector-engine.js +74 -9
  63. package/js/dist/dom/selector-engine.js.map +1 -1
  64. package/js/dist/dropdown.js +125 -112
  65. package/js/dist/dropdown.js.map +1 -1
  66. package/js/dist/modal.js +270 -93
  67. package/js/dist/modal.js.map +1 -1
  68. package/js/dist/offcanvas.js +231 -62
  69. package/js/dist/offcanvas.js.map +1 -1
  70. package/js/dist/popover.js +29 -59
  71. package/js/dist/popover.js.map +1 -1
  72. package/js/dist/scrollspy.js +45 -35
  73. package/js/dist/scrollspy.js.map +1 -1
  74. package/js/dist/tab.js +45 -23
  75. package/js/dist/tab.js.map +1 -1
  76. package/js/dist/toast.js +132 -34
  77. package/js/dist/toast.js.map +1 -1
  78. package/js/dist/tooltip.js +127 -109
  79. package/js/dist/tooltip.js.map +1 -1
  80. package/js/src/alert.js +21 -47
  81. package/js/src/base-component.js +3 -3
  82. package/js/src/button.js +1 -1
  83. package/js/src/carousel.js +10 -4
  84. package/js/src/collapse.js +66 -119
  85. package/js/src/dom/data.js +1 -1
  86. package/js/src/dom/event-handler.js +1 -2
  87. package/js/src/dom/manipulator.js +3 -3
  88. package/js/src/dom/selector-engine.js +18 -1
  89. package/js/src/dropdown.js +53 -68
  90. package/js/src/modal.js +24 -35
  91. package/js/src/navigation.js +6 -4
  92. package/js/src/offcanvas.js +16 -18
  93. package/js/src/popover.js +7 -49
  94. package/js/src/scrollspy.js +1 -1
  95. package/js/src/sidebar.js +23 -27
  96. package/js/src/tab.js +1 -1
  97. package/js/src/toast.js +11 -11
  98. package/js/src/tooltip.js +66 -50
  99. package/js/src/util/backdrop.js +6 -5
  100. package/js/src/util/component-functions.js +34 -0
  101. package/js/src/util/focustrap.js +105 -0
  102. package/js/src/util/index.js +39 -11
  103. package/js/src/util/sanitizer.js +21 -22
  104. package/js/src/util/scrollbar.js +1 -1
  105. package/package.json +54 -55
  106. package/scss/_buttons.scss +1 -2
  107. package/scss/_card.scss +2 -1
  108. package/scss/_dropdown.scss +1 -1
  109. package/scss/_functions.scss +51 -12
  110. package/scss/_grid.scss +0 -23
  111. package/scss/_helpers.scss +2 -0
  112. package/scss/_mixins.scss +1 -0
  113. package/scss/_modal.scss +2 -12
  114. package/scss/_nav.scss +1 -2
  115. package/scss/_navbar.scss +30 -1
  116. package/scss/_offcanvas.scss +6 -2
  117. package/scss/_placeholders.scss +51 -0
  118. package/scss/_reboot.scss +12 -8
  119. package/scss/_root.scss +36 -7
  120. package/scss/_tables.scss +9 -5
  121. package/scss/_toasts.scss +2 -2
  122. package/scss/_transitions.scss +6 -0
  123. package/scss/_utilities.scss +31 -8
  124. package/scss/_variables.scss +188 -13
  125. package/scss/coreui-grid.rtl.scss +1 -1
  126. package/scss/coreui-grid.scss +3 -1
  127. package/scss/coreui-reboot.rtl.scss +1 -1
  128. package/scss/coreui-reboot.scss +2 -4
  129. package/scss/coreui-utilities.rtl.scss +1 -1
  130. package/scss/coreui-utilities.scss +1 -1
  131. package/scss/coreui.rtl.scss +1 -1
  132. package/scss/coreui.scss +2 -1
  133. package/scss/forms/_form-control.scss +1 -1
  134. package/scss/forms/_form-select.scss +2 -0
  135. package/scss/helpers/_stacks.scss +15 -0
  136. package/scss/helpers/_vr.scss +8 -0
  137. package/scss/mixins/_backdrop.scss +14 -0
  138. package/scss/mixins/_grid.scss +26 -7
  139. package/scss/mixins/_ltr-rtl.scss +21 -0
  140. package/scss/mixins/_reset-text.scss +1 -1
  141. package/scss/mixins/_utilities.scss +27 -39
  142. package/scss/mixins/_visually-hidden.scss +1 -1
  143. package/scss/sidebar/_sidebar-nav.scss +1 -0
  144. package/scss/sidebar/_sidebar.scss +17 -17
package/js/dist/modal.js CHANGED
@@ -1,30 +1,39 @@
1
1
  /*!
2
- * CoreUI modal.js v4.0.4 (https://coreui.io)
3
- * Copyright 2021 The CoreUI Team (https://github.com/orgs/coreui/people)
2
+ * CoreUI modal.js v4.1.1 (https://coreui.io)
3
+ * Copyright 2022 The CoreUI Team (https://github.com/orgs/coreui/people)
4
4
  * Licensed under MIT (https://coreui.io)
5
5
  */
6
6
  (function (global, factory) {
7
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/selector-engine.js'), require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./base-component.js')) :
8
- typeof define === 'function' && define.amd ? define(['./dom/selector-engine', './dom/event-handler', './dom/manipulator', './base-component'], factory) :
9
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.SelectorEngine, global.EventHandler, global.Manipulator, global.Base));
10
- }(this, (function (SelectorEngine, EventHandler, Manipulator, BaseComponent) { 'use strict';
7
+ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/event-handler.js'), require('./dom/manipulator.js'), require('./dom/selector-engine.js'), require('./base-component.js')) :
8
+ typeof define === 'function' && define.amd ? define(['./dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
9
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
10
+ })(this, (function (EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
11
11
 
12
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
12
+ const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
13
13
 
14
- var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
15
- var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
16
- var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
17
- var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
14
+ const EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
15
+ const Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
16
+ const SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
17
+ const BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
18
18
 
19
+ /**
20
+ * --------------------------------------------------------------------------
21
+ * CoreUI (v4.1.1): alert.js
22
+ * Licensed under MIT (https://coreui.io/license)
23
+ *
24
+ * This component is a modified version of the Bootstrap's util/index.js
25
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
26
+ * --------------------------------------------------------------------------
27
+ */
19
28
  const MILLISECONDS_MULTIPLIER = 1000;
20
29
  const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
21
30
 
22
- const toType = obj => {
23
- if (obj === null || obj === undefined) {
24
- return `${obj}`;
31
+ const toType = object => {
32
+ if (object === null || object === undefined) {
33
+ return `${object}`;
25
34
  }
26
35
 
27
- return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase();
36
+ return Object.prototype.toString.call(object).match(/\s([a-z]+)/i)[1].toLowerCase();
28
37
  };
29
38
 
30
39
  const getSelector = element => {
@@ -102,7 +111,7 @@
102
111
  }
103
112
 
104
113
  if (typeof obj === 'string' && obj.length > 0) {
105
- return SelectorEngine__default['default'].findOne(obj);
114
+ return document.querySelector(obj);
106
115
  }
107
116
 
108
117
  return null;
@@ -125,10 +134,58 @@
125
134
  return false;
126
135
  }
127
136
 
128
- return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
137
+ const elementIsVisible = getComputedStyle(element).getPropertyValue('visibility') === 'visible'; // Handle `details` element as its content may falsie appear visible when it is closed
138
+
139
+ const closedDetails = element.closest('details:not([open])');
140
+
141
+ if (!closedDetails) {
142
+ return elementIsVisible;
143
+ }
144
+
145
+ if (closedDetails !== element) {
146
+ const summary = element.closest('summary');
147
+
148
+ if (summary && summary.parentNode !== closedDetails) {
149
+ return false;
150
+ }
151
+
152
+ if (summary === null) {
153
+ return false;
154
+ }
155
+ }
156
+
157
+ return elementIsVisible;
158
+ };
159
+
160
+ const isDisabled = element => {
161
+ if (!element || element.nodeType !== Node.ELEMENT_NODE) {
162
+ return true;
163
+ }
164
+
165
+ if (element.classList.contains('disabled')) {
166
+ return true;
167
+ }
168
+
169
+ if (typeof element.disabled !== 'undefined') {
170
+ return element.disabled;
171
+ }
172
+
173
+ return element.hasAttribute('disabled') && element.getAttribute('disabled') !== 'false';
129
174
  };
175
+ /**
176
+ * Trick to restart an element's animation
177
+ *
178
+ * @param {HTMLElement} element
179
+ * @return void
180
+ *
181
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
182
+ */
183
+
130
184
 
131
- const reflow = element => element.offsetHeight;
185
+ const reflow = element => {
186
+ // eslint-disable-next-line no-unused-expressions
187
+ element.offsetHeight;
188
+ };
132
189
 
133
190
  const getjQuery = () => {
134
191
  const {
@@ -218,7 +275,7 @@
218
275
 
219
276
  /**
220
277
  * --------------------------------------------------------------------------
221
- * Bootstrap (v5.0.2): util/scrollBar.js
278
+ * Bootstrap (v5.1.3): util/scrollBar.js
222
279
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
223
280
  * --------------------------------------------------------------------------
224
281
  */
@@ -287,18 +344,18 @@
287
344
  const actualValue = element.style[styleProp];
288
345
 
289
346
  if (actualValue) {
290
- Manipulator__default['default'].setDataAttribute(element, styleProp, actualValue);
347
+ Manipulator__default.default.setDataAttribute(element, styleProp, actualValue);
291
348
  }
292
349
  }
293
350
 
294
351
  _resetElementAttributes(selector, styleProp) {
295
352
  const manipulationCallBack = element => {
296
- const value = Manipulator__default['default'].getDataAttribute(element, styleProp);
353
+ const value = Manipulator__default.default.getDataAttribute(element, styleProp);
297
354
 
298
355
  if (typeof value === 'undefined') {
299
356
  element.style.removeProperty(styleProp);
300
357
  } else {
301
- Manipulator__default['default'].removeDataAttribute(element, styleProp);
358
+ Manipulator__default.default.removeDataAttribute(element, styleProp);
302
359
  element.style[styleProp] = value;
303
360
  }
304
361
  };
@@ -310,7 +367,7 @@
310
367
  if (isElement(selector)) {
311
368
  callBack(selector);
312
369
  } else {
313
- SelectorEngine__default['default'].find(selector, this._element).forEach(callBack);
370
+ SelectorEngine__default.default.find(selector, this._element).forEach(callBack);
314
371
  }
315
372
  }
316
373
 
@@ -322,11 +379,12 @@
322
379
 
323
380
  /**
324
381
  * --------------------------------------------------------------------------
325
- * Bootstrap (v5.0.2): util/backdrop.js
326
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
382
+ * Bootstrap (v5.1.3): util/backdrop.js
383
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
327
384
  * --------------------------------------------------------------------------
328
385
  */
329
- const Default$1 = {
386
+ const Default$2 = {
387
+ className: 'modal-backdrop',
330
388
  isVisible: true,
331
389
  // if false, we use the backdrop helper without adding any element to the dom
332
390
  isAnimated: false,
@@ -334,17 +392,17 @@
334
392
  // give the choice to place backdrop under different elements
335
393
  clickCallback: null
336
394
  };
337
- const DefaultType$1 = {
395
+ const DefaultType$2 = {
396
+ className: 'string',
338
397
  isVisible: 'boolean',
339
398
  isAnimated: 'boolean',
340
399
  rootElement: '(element|string)',
341
400
  clickCallback: '(function|null)'
342
401
  };
343
- const NAME$1 = 'backdrop';
344
- const CLASS_NAME_BACKDROP = 'modal-backdrop';
402
+ const NAME$2 = 'backdrop';
345
403
  const CLASS_NAME_FADE$1 = 'fade';
346
404
  const CLASS_NAME_SHOW$1 = 'show';
347
- const EVENT_MOUSEDOWN = `mousedown.coreui.${NAME$1}`;
405
+ const EVENT_MOUSEDOWN = `mousedown.coreui.${NAME$2}`;
348
406
 
349
407
  class Backdrop {
350
408
  constructor(config) {
@@ -390,7 +448,7 @@
390
448
  _getElement() {
391
449
  if (!this._element) {
392
450
  const backdrop = document.createElement('div');
393
- backdrop.className = CLASS_NAME_BACKDROP;
451
+ backdrop.className = this._config.className;
394
452
 
395
453
  if (this._config.isAnimated) {
396
454
  backdrop.classList.add(CLASS_NAME_FADE$1);
@@ -403,12 +461,12 @@
403
461
  }
404
462
 
405
463
  _getConfig(config) {
406
- config = { ...Default$1,
464
+ config = { ...Default$2,
407
465
  ...(typeof config === 'object' ? config : {})
408
466
  }; // use getElement() with the default "body" to get a fresh Element on each instantiation
409
467
 
410
468
  config.rootElement = getElement(config.rootElement);
411
- typeCheckConfig(NAME$1, config, DefaultType$1);
469
+ typeCheckConfig(NAME$2, config, DefaultType$2);
412
470
  return config;
413
471
  }
414
472
 
@@ -417,9 +475,9 @@
417
475
  return;
418
476
  }
419
477
 
420
- this._config.rootElement.appendChild(this._getElement());
478
+ this._config.rootElement.append(this._getElement());
421
479
 
422
- EventHandler__default['default'].on(this._getElement(), EVENT_MOUSEDOWN, () => {
480
+ EventHandler__default.default.on(this._getElement(), EVENT_MOUSEDOWN, () => {
423
481
  execute(this._config.clickCallback);
424
482
  });
425
483
  this._isAppended = true;
@@ -430,7 +488,7 @@
430
488
  return;
431
489
  }
432
490
 
433
- EventHandler__default['default'].off(this._element, EVENT_MOUSEDOWN);
491
+ EventHandler__default.default.off(this._element, EVENT_MOUSEDOWN);
434
492
 
435
493
  this._element.remove();
436
494
 
@@ -445,7 +503,136 @@
445
503
 
446
504
  /**
447
505
  * --------------------------------------------------------------------------
448
- * CoreUI (v4.0.4): modal.js
506
+ * Bootstrap (v5.1.3): util/focustrap.js
507
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
508
+ * --------------------------------------------------------------------------
509
+ */
510
+ const Default$1 = {
511
+ trapElement: null,
512
+ // The element to trap focus inside of
513
+ autofocus: true
514
+ };
515
+ const DefaultType$1 = {
516
+ trapElement: 'element',
517
+ autofocus: 'boolean'
518
+ };
519
+ const NAME$1 = 'focustrap';
520
+ const DATA_KEY$1 = 'coreui.focustrap';
521
+ const EVENT_KEY$1 = `.${DATA_KEY$1}`;
522
+ const EVENT_FOCUSIN = `focusin${EVENT_KEY$1}`;
523
+ const EVENT_KEYDOWN_TAB = `keydown.tab${EVENT_KEY$1}`;
524
+ const TAB_KEY = 'Tab';
525
+ const TAB_NAV_FORWARD = 'forward';
526
+ const TAB_NAV_BACKWARD = 'backward';
527
+
528
+ class FocusTrap {
529
+ constructor(config) {
530
+ this._config = this._getConfig(config);
531
+ this._isActive = false;
532
+ this._lastTabNavDirection = null;
533
+ }
534
+
535
+ activate() {
536
+ const {
537
+ trapElement,
538
+ autofocus
539
+ } = this._config;
540
+
541
+ if (this._isActive) {
542
+ return;
543
+ }
544
+
545
+ if (autofocus) {
546
+ trapElement.focus();
547
+ }
548
+
549
+ EventHandler__default.default.off(document, EVENT_KEY$1); // guard against infinite focus loop
550
+
551
+ EventHandler__default.default.on(document, EVENT_FOCUSIN, event => this._handleFocusin(event));
552
+ EventHandler__default.default.on(document, EVENT_KEYDOWN_TAB, event => this._handleKeydown(event));
553
+ this._isActive = true;
554
+ }
555
+
556
+ deactivate() {
557
+ if (!this._isActive) {
558
+ return;
559
+ }
560
+
561
+ this._isActive = false;
562
+ EventHandler__default.default.off(document, EVENT_KEY$1);
563
+ } // Private
564
+
565
+
566
+ _handleFocusin(event) {
567
+ const {
568
+ target
569
+ } = event;
570
+ const {
571
+ trapElement
572
+ } = this._config;
573
+
574
+ if (target === document || target === trapElement || trapElement.contains(target)) {
575
+ return;
576
+ }
577
+
578
+ const elements = SelectorEngine__default.default.focusableChildren(trapElement);
579
+
580
+ if (elements.length === 0) {
581
+ trapElement.focus();
582
+ } else if (this._lastTabNavDirection === TAB_NAV_BACKWARD) {
583
+ elements[elements.length - 1].focus();
584
+ } else {
585
+ elements[0].focus();
586
+ }
587
+ }
588
+
589
+ _handleKeydown(event) {
590
+ if (event.key !== TAB_KEY) {
591
+ return;
592
+ }
593
+
594
+ this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD;
595
+ }
596
+
597
+ _getConfig(config) {
598
+ config = { ...Default$1,
599
+ ...(typeof config === 'object' ? config : {})
600
+ };
601
+ typeCheckConfig(NAME$1, config, DefaultType$1);
602
+ return config;
603
+ }
604
+
605
+ }
606
+
607
+ /**
608
+ * --------------------------------------------------------------------------
609
+ * Bootstrap (v5.1.3): util/component-functions.js
610
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
611
+ * --------------------------------------------------------------------------
612
+ */
613
+
614
+ const enableDismissTrigger = (component, method = 'hide') => {
615
+ const clickEvent = `click.dismiss${component.EVENT_KEY}`;
616
+ const name = component.NAME;
617
+ EventHandler__default.default.on(document, clickEvent, `[data-coreui-dismiss="${name}"]`, function (event) {
618
+ if (['A', 'AREA'].includes(this.tagName)) {
619
+ event.preventDefault();
620
+ }
621
+
622
+ if (isDisabled(this)) {
623
+ return;
624
+ }
625
+
626
+ const target = getElementFromSelector(this) || this.closest(`.${name}`);
627
+ const instance = component.getOrCreateInstance(target); // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
628
+
629
+ instance[method]();
630
+ });
631
+ };
632
+
633
+ /**
634
+ * --------------------------------------------------------------------------
635
+ * CoreUI (v4.1.1): modal.js
449
636
  * Licensed under MIT (https://coreui.io/license)
450
637
  *
451
638
  * This component is a modified version of the Bootstrap's modal.js
@@ -478,7 +665,6 @@
478
665
  const EVENT_HIDDEN = `hidden${EVENT_KEY}`;
479
666
  const EVENT_SHOW = `show${EVENT_KEY}`;
480
667
  const EVENT_SHOWN = `shown${EVENT_KEY}`;
481
- const EVENT_FOCUSIN = `focusin${EVENT_KEY}`;
482
668
  const EVENT_RESIZE = `resize${EVENT_KEY}`;
483
669
  const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`;
484
670
  const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`;
@@ -489,22 +675,23 @@
489
675
  const CLASS_NAME_FADE = 'fade';
490
676
  const CLASS_NAME_SHOW = 'show';
491
677
  const CLASS_NAME_STATIC = 'modal-static';
678
+ const OPEN_SELECTOR = '.modal.show';
492
679
  const SELECTOR_DIALOG = '.modal-dialog';
493
680
  const SELECTOR_MODAL_BODY = '.modal-body';
494
681
  const SELECTOR_DATA_TOGGLE = '[data-coreui-toggle="modal"]';
495
- const SELECTOR_DATA_DISMISS = '[data-coreui-dismiss="modal"]';
496
682
  /**
497
683
  * ------------------------------------------------------------------------
498
684
  * Class Definition
499
685
  * ------------------------------------------------------------------------
500
686
  */
501
687
 
502
- class Modal extends BaseComponent__default['default'] {
688
+ class Modal extends BaseComponent__default.default {
503
689
  constructor(element, config) {
504
690
  super(element);
505
691
  this._config = this._getConfig(config);
506
- this._dialog = SelectorEngine__default['default'].findOne(SELECTOR_DIALOG, this._element);
692
+ this._dialog = SelectorEngine__default.default.findOne(SELECTOR_DIALOG, this._element);
507
693
  this._backdrop = this._initializeBackDrop();
694
+ this._focustrap = this._initializeFocusTrap();
508
695
  this._isShown = false;
509
696
  this._ignoreBackdropClick = false;
510
697
  this._isTransitioning = false;
@@ -530,7 +717,7 @@
530
717
  return;
531
718
  }
532
719
 
533
- const showEvent = EventHandler__default['default'].trigger(this._element, EVENT_SHOW, {
720
+ const showEvent = EventHandler__default.default.trigger(this._element, EVENT_SHOW, {
534
721
  relatedTarget
535
722
  });
536
723
 
@@ -554,9 +741,8 @@
554
741
 
555
742
  this._setResizeEvent();
556
743
 
557
- EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, event => this.hide(event));
558
- EventHandler__default['default'].on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
559
- EventHandler__default['default'].one(this._element, EVENT_MOUSEUP_DISMISS, event => {
744
+ EventHandler__default.default.on(this._dialog, EVENT_MOUSEDOWN_DISMISS, () => {
745
+ EventHandler__default.default.one(this._element, EVENT_MOUSEUP_DISMISS, event => {
560
746
  if (event.target === this._element) {
561
747
  this._ignoreBackdropClick = true;
562
748
  }
@@ -566,16 +752,12 @@
566
752
  this._showBackdrop(() => this._showElement(relatedTarget));
567
753
  }
568
754
 
569
- hide(event) {
570
- if (event && ['A', 'AREA'].includes(event.target.tagName)) {
571
- event.preventDefault();
572
- }
573
-
755
+ hide() {
574
756
  if (!this._isShown || this._isTransitioning) {
575
757
  return;
576
758
  }
577
759
 
578
- const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE);
760
+ const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE);
579
761
 
580
762
  if (hideEvent.defaultPrevented) {
581
763
  return;
@@ -593,29 +775,24 @@
593
775
 
594
776
  this._setResizeEvent();
595
777
 
596
- EventHandler__default['default'].off(document, EVENT_FOCUSIN);
778
+ this._focustrap.deactivate();
597
779
 
598
780
  this._element.classList.remove(CLASS_NAME_SHOW);
599
781
 
600
- EventHandler__default['default'].off(this._element, EVENT_CLICK_DISMISS);
601
- EventHandler__default['default'].off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
782
+ EventHandler__default.default.off(this._element, EVENT_CLICK_DISMISS);
783
+ EventHandler__default.default.off(this._dialog, EVENT_MOUSEDOWN_DISMISS);
602
784
 
603
785
  this._queueCallback(() => this._hideModal(), this._element, isAnimated);
604
786
  }
605
787
 
606
788
  dispose() {
607
- [window, this._dialog].forEach(htmlElement => EventHandler__default['default'].off(htmlElement, EVENT_KEY));
789
+ [window, this._dialog].forEach(htmlElement => EventHandler__default.default.off(htmlElement, EVENT_KEY));
608
790
 
609
791
  this._backdrop.dispose();
610
792
 
611
- super.dispose();
612
- /**
613
- * `document` has 2 events `EVENT_FOCUSIN` and `EVENT_CLICK_DATA_API`
614
- * Do not move `document` in `htmlElements` array
615
- * It will remove `EVENT_CLICK_DATA_API` event that should remain
616
- */
793
+ this._focustrap.deactivate();
617
794
 
618
- EventHandler__default['default'].off(document, EVENT_FOCUSIN);
795
+ super.dispose();
619
796
  }
620
797
 
621
798
  handleUpdate() {
@@ -631,9 +808,15 @@
631
808
  });
632
809
  }
633
810
 
811
+ _initializeFocusTrap() {
812
+ return new FocusTrap({
813
+ trapElement: this._element
814
+ });
815
+ }
816
+
634
817
  _getConfig(config) {
635
818
  config = { ...Default,
636
- ...Manipulator__default['default'].getDataAttributes(this._element),
819
+ ...Manipulator__default.default.getDataAttributes(this._element),
637
820
  ...(typeof config === 'object' ? config : {})
638
821
  };
639
822
  typeCheckConfig(NAME, config, DefaultType);
@@ -643,11 +826,11 @@
643
826
  _showElement(relatedTarget) {
644
827
  const isAnimated = this._isAnimated();
645
828
 
646
- const modalBody = SelectorEngine__default['default'].findOne(SELECTOR_MODAL_BODY, this._dialog);
829
+ const modalBody = SelectorEngine__default.default.findOne(SELECTOR_MODAL_BODY, this._dialog);
647
830
 
648
831
  if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
649
832
  // Don't move modal's DOM position
650
- document.body.appendChild(this._element);
833
+ document.body.append(this._element);
651
834
  }
652
835
 
653
836
  this._element.style.display = 'block';
@@ -670,17 +853,13 @@
670
853
 
671
854
  this._element.classList.add(CLASS_NAME_SHOW);
672
855
 
673
- if (this._config.focus) {
674
- this._enforceFocus();
675
- }
676
-
677
856
  const transitionComplete = () => {
678
857
  if (this._config.focus) {
679
- this._element.focus();
858
+ this._focustrap.activate();
680
859
  }
681
860
 
682
861
  this._isTransitioning = false;
683
- EventHandler__default['default'].trigger(this._element, EVENT_SHOWN, {
862
+ EventHandler__default.default.trigger(this._element, EVENT_SHOWN, {
684
863
  relatedTarget
685
864
  });
686
865
  };
@@ -688,19 +867,9 @@
688
867
  this._queueCallback(transitionComplete, this._dialog, isAnimated);
689
868
  }
690
869
 
691
- _enforceFocus() {
692
- EventHandler__default['default'].off(document, EVENT_FOCUSIN); // guard against infinite focus loop
693
-
694
- EventHandler__default['default'].on(document, EVENT_FOCUSIN, event => {
695
- if (document !== event.target && this._element !== event.target && !this._element.contains(event.target)) {
696
- this._element.focus();
697
- }
698
- });
699
- }
700
-
701
870
  _setEscapeEvent() {
702
871
  if (this._isShown) {
703
- EventHandler__default['default'].on(this._element, EVENT_KEYDOWN_DISMISS, event => {
872
+ EventHandler__default.default.on(this._element, EVENT_KEYDOWN_DISMISS, event => {
704
873
  if (this._config.keyboard && event.key === ESCAPE_KEY) {
705
874
  event.preventDefault();
706
875
  this.hide();
@@ -709,15 +878,15 @@
709
878
  }
710
879
  });
711
880
  } else {
712
- EventHandler__default['default'].off(this._element, EVENT_KEYDOWN_DISMISS);
881
+ EventHandler__default.default.off(this._element, EVENT_KEYDOWN_DISMISS);
713
882
  }
714
883
  }
715
884
 
716
885
  _setResizeEvent() {
717
886
  if (this._isShown) {
718
- EventHandler__default['default'].on(window, EVENT_RESIZE, () => this._adjustDialog());
887
+ EventHandler__default.default.on(window, EVENT_RESIZE, () => this._adjustDialog());
719
888
  } else {
720
- EventHandler__default['default'].off(window, EVENT_RESIZE);
889
+ EventHandler__default.default.off(window, EVENT_RESIZE);
721
890
  }
722
891
  }
723
892
 
@@ -739,12 +908,12 @@
739
908
 
740
909
  this._scrollBar.reset();
741
910
 
742
- EventHandler__default['default'].trigger(this._element, EVENT_HIDDEN);
911
+ EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
743
912
  });
744
913
  }
745
914
 
746
915
  _showBackdrop(callback) {
747
- EventHandler__default['default'].on(this._element, EVENT_CLICK_DISMISS, event => {
916
+ EventHandler__default.default.on(this._element, EVENT_CLICK_DISMISS, event => {
748
917
  if (this._ignoreBackdropClick) {
749
918
  this._ignoreBackdropClick = false;
750
919
  return;
@@ -769,7 +938,7 @@
769
938
  }
770
939
 
771
940
  _triggerBackdropTransition() {
772
- const hideEvent = EventHandler__default['default'].trigger(this._element, EVENT_HIDE_PREVENTED);
941
+ const hideEvent = EventHandler__default.default.trigger(this._element, EVENT_HIDE_PREVENTED);
773
942
 
774
943
  if (hideEvent.defaultPrevented) {
775
944
  return;
@@ -854,28 +1023,36 @@
854
1023
  */
855
1024
 
856
1025
 
857
- EventHandler__default['default'].on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
1026
+ EventHandler__default.default.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
858
1027
  const target = getElementFromSelector(this);
859
1028
 
860
1029
  if (['A', 'AREA'].includes(this.tagName)) {
861
1030
  event.preventDefault();
862
1031
  }
863
1032
 
864
- EventHandler__default['default'].one(target, EVENT_SHOW, showEvent => {
1033
+ EventHandler__default.default.one(target, EVENT_SHOW, showEvent => {
865
1034
  if (showEvent.defaultPrevented) {
866
1035
  // only register focus restorer if modal will actually get shown
867
1036
  return;
868
1037
  }
869
1038
 
870
- EventHandler__default['default'].one(target, EVENT_HIDDEN, () => {
1039
+ EventHandler__default.default.one(target, EVENT_HIDDEN, () => {
871
1040
  if (isVisible(this)) {
872
1041
  this.focus();
873
1042
  }
874
1043
  });
875
- });
1044
+ }); // avoid conflict when clicking moddal toggler while another one is open
1045
+
1046
+ const allReadyOpen = SelectorEngine__default.default.findOne(OPEN_SELECTOR);
1047
+
1048
+ if (allReadyOpen) {
1049
+ Modal.getInstance(allReadyOpen).hide();
1050
+ }
1051
+
876
1052
  const data = Modal.getOrCreateInstance(target);
877
1053
  data.toggle(this);
878
1054
  });
1055
+ enableDismissTrigger(Modal);
879
1056
  /**
880
1057
  * ------------------------------------------------------------------------
881
1058
  * jQuery
@@ -887,5 +1064,5 @@
887
1064
 
888
1065
  return Modal;
889
1066
 
890
- })));
1067
+ }));
891
1068
  //# sourceMappingURL=modal.js.map