@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.
- package/README.md +5 -8
- package/dist/css/coreui-grid.css +254 -205
- package/dist/css/coreui-grid.css.map +1 -1
- package/dist/css/coreui-grid.min.css +2 -2
- package/dist/css/coreui-grid.min.css.map +1 -1
- package/dist/css/coreui-grid.rtl.css +411 -362
- package/dist/css/coreui-grid.rtl.css.map +1 -1
- package/dist/css/coreui-grid.rtl.min.css +3 -3
- package/dist/css/coreui-grid.rtl.min.css.map +1 -1
- package/dist/css/coreui-reboot.css +63 -8
- package/dist/css/coreui-reboot.css.map +1 -1
- package/dist/css/coreui-reboot.min.css +2 -2
- package/dist/css/coreui-reboot.min.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.css +64 -9
- package/dist/css/coreui-reboot.rtl.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.min.css +3 -3
- package/dist/css/coreui-reboot.rtl.min.css.map +1 -1
- package/dist/css/coreui-utilities.css +181 -81
- package/dist/css/coreui-utilities.css.map +1 -1
- package/dist/css/coreui-utilities.min.css +2 -2
- package/dist/css/coreui-utilities.min.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.css +380 -280
- package/dist/css/coreui-utilities.rtl.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.min.css +3 -3
- package/dist/css/coreui-utilities.rtl.min.css.map +1 -1
- package/dist/css/coreui.css +712 -345
- package/dist/css/coreui.css.map +1 -1
- package/dist/css/coreui.min.css +2 -2
- package/dist/css/coreui.min.css.map +1 -1
- package/dist/css/coreui.rtl.css +893 -541
- package/dist/css/coreui.rtl.css.map +1 -1
- package/dist/css/coreui.rtl.min.css +3 -3
- package/dist/css/coreui.rtl.min.css.map +1 -1
- package/dist/js/coreui.bundle.js +855 -746
- package/dist/js/coreui.bundle.js.map +1 -1
- package/dist/js/coreui.bundle.min.js +3 -3
- package/dist/js/coreui.bundle.min.js.map +1 -1
- package/dist/js/coreui.esm.js +708 -644
- package/dist/js/coreui.esm.js.map +1 -1
- package/dist/js/coreui.esm.min.js +3 -3
- package/dist/js/coreui.esm.min.js.map +1 -1
- package/dist/js/coreui.js +718 -656
- package/dist/js/coreui.js.map +1 -1
- package/dist/js/coreui.min.js +3 -3
- package/dist/js/coreui.min.js.map +1 -1
- package/js/dist/alert.js +82 -49
- package/js/dist/alert.js.map +1 -1
- package/js/dist/base-component.js +26 -18
- package/js/dist/base-component.js.map +1 -1
- package/js/dist/button.js +23 -13
- package/js/dist/button.js.map +1 -1
- package/js/dist/carousel.js +95 -50
- package/js/dist/carousel.js.map +1 -1
- package/js/dist/collapse.js +125 -139
- package/js/dist/collapse.js.map +1 -1
- package/js/dist/dom/data.js +6 -6
- package/js/dist/dom/data.js.map +1 -1
- package/js/dist/dom/event-handler.js +15 -6
- package/js/dist/dom/event-handler.js.map +1 -1
- package/js/dist/dom/manipulator.js +7 -7
- package/js/dist/dom/manipulator.js.map +1 -1
- package/js/dist/dom/selector-engine.js +74 -9
- package/js/dist/dom/selector-engine.js.map +1 -1
- package/js/dist/dropdown.js +125 -112
- package/js/dist/dropdown.js.map +1 -1
- package/js/dist/modal.js +270 -93
- package/js/dist/modal.js.map +1 -1
- package/js/dist/offcanvas.js +231 -62
- package/js/dist/offcanvas.js.map +1 -1
- package/js/dist/popover.js +29 -59
- package/js/dist/popover.js.map +1 -1
- package/js/dist/scrollspy.js +45 -35
- package/js/dist/scrollspy.js.map +1 -1
- package/js/dist/tab.js +45 -23
- package/js/dist/tab.js.map +1 -1
- package/js/dist/toast.js +132 -34
- package/js/dist/toast.js.map +1 -1
- package/js/dist/tooltip.js +127 -109
- package/js/dist/tooltip.js.map +1 -1
- package/js/src/alert.js +21 -47
- package/js/src/base-component.js +3 -3
- package/js/src/button.js +1 -1
- package/js/src/carousel.js +10 -4
- package/js/src/collapse.js +66 -119
- package/js/src/dom/data.js +1 -1
- package/js/src/dom/event-handler.js +1 -2
- package/js/src/dom/manipulator.js +3 -3
- package/js/src/dom/selector-engine.js +18 -1
- package/js/src/dropdown.js +53 -68
- package/js/src/modal.js +24 -35
- package/js/src/navigation.js +6 -4
- package/js/src/offcanvas.js +16 -18
- package/js/src/popover.js +7 -49
- package/js/src/scrollspy.js +1 -1
- package/js/src/sidebar.js +23 -27
- package/js/src/tab.js +1 -1
- package/js/src/toast.js +11 -11
- package/js/src/tooltip.js +66 -50
- package/js/src/util/backdrop.js +6 -5
- package/js/src/util/component-functions.js +34 -0
- package/js/src/util/focustrap.js +105 -0
- package/js/src/util/index.js +39 -11
- package/js/src/util/sanitizer.js +21 -22
- package/js/src/util/scrollbar.js +1 -1
- package/package.json +54 -55
- package/scss/_buttons.scss +1 -2
- package/scss/_card.scss +2 -1
- package/scss/_dropdown.scss +1 -1
- package/scss/_functions.scss +51 -12
- package/scss/_grid.scss +0 -23
- package/scss/_helpers.scss +2 -0
- package/scss/_mixins.scss +1 -0
- package/scss/_modal.scss +2 -12
- package/scss/_nav.scss +1 -2
- package/scss/_navbar.scss +30 -1
- package/scss/_offcanvas.scss +6 -2
- package/scss/_placeholders.scss +51 -0
- package/scss/_reboot.scss +12 -8
- package/scss/_root.scss +36 -7
- package/scss/_tables.scss +9 -5
- package/scss/_toasts.scss +2 -2
- package/scss/_transitions.scss +6 -0
- package/scss/_utilities.scss +31 -8
- package/scss/_variables.scss +188 -13
- package/scss/coreui-grid.rtl.scss +1 -1
- package/scss/coreui-grid.scss +3 -1
- package/scss/coreui-reboot.rtl.scss +1 -1
- package/scss/coreui-reboot.scss +2 -4
- package/scss/coreui-utilities.rtl.scss +1 -1
- package/scss/coreui-utilities.scss +1 -1
- package/scss/coreui.rtl.scss +1 -1
- package/scss/coreui.scss +2 -1
- package/scss/forms/_form-control.scss +1 -1
- package/scss/forms/_form-select.scss +2 -0
- package/scss/helpers/_stacks.scss +15 -0
- package/scss/helpers/_vr.scss +8 -0
- package/scss/mixins/_backdrop.scss +14 -0
- package/scss/mixins/_grid.scss +26 -7
- package/scss/mixins/_ltr-rtl.scss +21 -0
- package/scss/mixins/_reset-text.scss +1 -1
- package/scss/mixins/_utilities.scss +27 -39
- package/scss/mixins/_visually-hidden.scss +1 -1
- package/scss/sidebar/_sidebar-nav.scss +1 -0
- package/scss/sidebar/_sidebar.scss +17 -17
package/js/dist/modal.js
CHANGED
|
@@ -1,30 +1,39 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI modal.js v4.
|
|
3
|
-
* Copyright
|
|
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/
|
|
8
|
-
typeof define === 'function' && define.amd ? define(['./dom/
|
|
9
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Modal = factory(global.
|
|
10
|
-
}(this, (function (
|
|
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
|
-
|
|
12
|
+
const _interopDefaultLegacy = e => e && typeof e === 'object' && 'default' in e ? e : { default: e };
|
|
13
13
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
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 =
|
|
23
|
-
if (
|
|
24
|
-
return `${
|
|
31
|
+
const toType = object => {
|
|
32
|
+
if (object === null || object === undefined) {
|
|
33
|
+
return `${object}`;
|
|
25
34
|
}
|
|
26
35
|
|
|
27
|
-
return
|
|
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
|
|
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
|
-
|
|
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 =>
|
|
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.
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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.
|
|
326
|
-
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/
|
|
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$
|
|
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$
|
|
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$
|
|
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$
|
|
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 =
|
|
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$
|
|
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$
|
|
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.
|
|
478
|
+
this._config.rootElement.append(this._getElement());
|
|
421
479
|
|
|
422
|
-
EventHandler__default
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
|
558
|
-
|
|
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(
|
|
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
|
|
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
|
-
|
|
778
|
+
this._focustrap.deactivate();
|
|
597
779
|
|
|
598
780
|
this._element.classList.remove(CLASS_NAME_SHOW);
|
|
599
781
|
|
|
600
|
-
EventHandler__default
|
|
601
|
-
EventHandler__default
|
|
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
|
|
789
|
+
[window, this._dialog].forEach(htmlElement => EventHandler__default.default.off(htmlElement, EVENT_KEY));
|
|
608
790
|
|
|
609
791
|
this._backdrop.dispose();
|
|
610
792
|
|
|
611
|
-
|
|
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
|
-
|
|
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
|
|
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
|
|
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.
|
|
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.
|
|
858
|
+
this._focustrap.activate();
|
|
680
859
|
}
|
|
681
860
|
|
|
682
861
|
this._isTransitioning = false;
|
|
683
|
-
EventHandler__default
|
|
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
|
|
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
|
|
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
|
|
887
|
+
EventHandler__default.default.on(window, EVENT_RESIZE, () => this._adjustDialog());
|
|
719
888
|
} else {
|
|
720
|
-
EventHandler__default
|
|
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
|
|
911
|
+
EventHandler__default.default.trigger(this._element, EVENT_HIDDEN);
|
|
743
912
|
});
|
|
744
913
|
}
|
|
745
914
|
|
|
746
915
|
_showBackdrop(callback) {
|
|
747
|
-
EventHandler__default
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
|