bootstrap 5.0.0 → 5.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 (65) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/assets/javascripts/bootstrap/alert.js +77 -106
  4. data/assets/javascripts/bootstrap/base-component.js +126 -7
  5. data/assets/javascripts/bootstrap/button.js +24 -24
  6. data/assets/javascripts/bootstrap/carousel.js +115 -128
  7. data/assets/javascripts/bootstrap/collapse.js +119 -176
  8. data/assets/javascripts/bootstrap/dom/data.js +2 -2
  9. data/assets/javascripts/bootstrap/dom/event-handler.js +3 -4
  10. data/assets/javascripts/bootstrap/dom/manipulator.js +4 -4
  11. data/assets/javascripts/bootstrap/dom/selector-engine.js +47 -5
  12. data/assets/javascripts/bootstrap/dropdown.js +142 -130
  13. data/assets/javascripts/bootstrap/modal.js +376 -171
  14. data/assets/javascripts/bootstrap/offcanvas.js +328 -133
  15. data/assets/javascripts/bootstrap/popover.js +27 -59
  16. data/assets/javascripts/bootstrap/scrollspy.js +51 -56
  17. data/assets/javascripts/bootstrap/tab.js +39 -66
  18. data/assets/javascripts/bootstrap/toast.js +175 -86
  19. data/assets/javascripts/bootstrap/tooltip.js +141 -185
  20. data/assets/javascripts/bootstrap-sprockets.js +6 -6
  21. data/assets/javascripts/bootstrap.js +1031 -1026
  22. data/assets/javascripts/bootstrap.min.js +2 -2
  23. data/assets/stylesheets/_bootstrap-grid.scss +3 -1
  24. data/assets/stylesheets/_bootstrap-reboot.scss +2 -4
  25. data/assets/stylesheets/_bootstrap.scss +2 -1
  26. data/assets/stylesheets/bootstrap/_card.scss +7 -6
  27. data/assets/stylesheets/bootstrap/_carousel.scss +2 -2
  28. data/assets/stylesheets/bootstrap/_dropdown.scss +4 -4
  29. data/assets/stylesheets/bootstrap/_functions.scss +100 -3
  30. data/assets/stylesheets/bootstrap/_grid.scss +11 -0
  31. data/assets/stylesheets/bootstrap/_helpers.scss +2 -0
  32. data/assets/stylesheets/bootstrap/_images.scss +1 -1
  33. data/assets/stylesheets/bootstrap/_list-group.scss +5 -5
  34. data/assets/stylesheets/bootstrap/_mixins.scss +1 -0
  35. data/assets/stylesheets/bootstrap/_modal.scss +7 -26
  36. data/assets/stylesheets/bootstrap/_navbar.scss +30 -1
  37. data/assets/stylesheets/bootstrap/_offcanvas.scss +8 -2
  38. data/assets/stylesheets/bootstrap/_placeholders.scss +51 -0
  39. data/assets/stylesheets/bootstrap/_popover.scss +10 -10
  40. data/assets/stylesheets/bootstrap/_reboot.scss +12 -8
  41. data/assets/stylesheets/bootstrap/_root.scss +40 -2
  42. data/assets/stylesheets/bootstrap/_tables.scss +1 -0
  43. data/assets/stylesheets/bootstrap/_toasts.scss +3 -3
  44. data/assets/stylesheets/bootstrap/_tooltip.scss +4 -4
  45. data/assets/stylesheets/bootstrap/_transitions.scss +6 -0
  46. data/assets/stylesheets/bootstrap/_utilities.scss +44 -8
  47. data/assets/stylesheets/bootstrap/_variables.scss +200 -25
  48. data/assets/stylesheets/bootstrap/bootstrap-utilities.scss +1 -1
  49. data/assets/stylesheets/bootstrap/forms/_floating-labels.scss +3 -1
  50. data/assets/stylesheets/bootstrap/forms/_form-check.scss +1 -1
  51. data/assets/stylesheets/bootstrap/forms/_form-control.scss +6 -6
  52. data/assets/stylesheets/bootstrap/forms/_form-range.scss +1 -1
  53. data/assets/stylesheets/bootstrap/forms/_form-select.scss +3 -0
  54. data/assets/stylesheets/bootstrap/helpers/_stacks.scss +15 -0
  55. data/assets/stylesheets/bootstrap/helpers/_vr.scss +8 -0
  56. data/assets/stylesheets/bootstrap/mixins/_backdrop.scss +14 -0
  57. data/assets/stylesheets/bootstrap/mixins/_buttons.scss +1 -1
  58. data/assets/stylesheets/bootstrap/mixins/_forms.scss +8 -1
  59. data/assets/stylesheets/bootstrap/mixins/_grid.scss +33 -8
  60. data/assets/stylesheets/bootstrap/mixins/_utilities.scss +27 -6
  61. data/assets/stylesheets/bootstrap/vendor/_rfs.scss +55 -13
  62. data/bootstrap.gemspec +3 -3
  63. data/lib/bootstrap/version.rb +2 -2
  64. data/tasks/updater/js.rb +6 -2
  65. metadata +12 -8
@@ -1,17 +1,16 @@
1
1
  /*!
2
- * Bootstrap carousel.js v5.0.0 (https://getbootstrap.com/)
2
+ * Bootstrap carousel.js v5.1.1 (https://getbootstrap.com/)
3
3
  * Copyright 2011-2021 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
4
4
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
5
  */
6
6
  (function (global, factory) {
7
- typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./dom/data.js'), 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/data', './dom/event-handler', './dom/manipulator', './dom/selector-engine', './base-component'], factory) :
9
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Carousel = factory(global.Data, global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
10
- }(this, (function (Data, EventHandler, Manipulator, SelectorEngine, 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.Carousel = factory(global.EventHandler, global.Manipulator, global.SelectorEngine, global.Base));
10
+ }(this, (function (EventHandler, Manipulator, SelectorEngine, BaseComponent) { 'use strict';
11
11
 
12
12
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
13
13
 
14
- var Data__default = /*#__PURE__*/_interopDefaultLegacy(Data);
15
14
  var EventHandler__default = /*#__PURE__*/_interopDefaultLegacy(EventHandler);
16
15
  var Manipulator__default = /*#__PURE__*/_interopDefaultLegacy(Manipulator);
17
16
  var SelectorEngine__default = /*#__PURE__*/_interopDefaultLegacy(SelectorEngine);
@@ -19,11 +18,10 @@
19
18
 
20
19
  /**
21
20
  * --------------------------------------------------------------------------
22
- * Bootstrap (v5.0.0): util/index.js
21
+ * Bootstrap (v5.1.1): util/index.js
23
22
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
24
23
  * --------------------------------------------------------------------------
25
24
  */
26
- const MILLISECONDS_MULTIPLIER = 1000;
27
25
  const TRANSITION_END = 'transitionend'; // Shoutout AngusCroll (https://goo.gl/pxwQGp)
28
26
 
29
27
  const toType = obj => {
@@ -63,51 +61,20 @@
63
61
  return selector ? document.querySelector(selector) : null;
64
62
  };
65
63
 
66
- const getTransitionDurationFromElement = element => {
67
- if (!element) {
68
- return 0;
69
- } // Get transition-duration of the element
70
-
71
-
72
- let {
73
- transitionDuration,
74
- transitionDelay
75
- } = window.getComputedStyle(element);
76
- const floatTransitionDuration = Number.parseFloat(transitionDuration);
77
- const floatTransitionDelay = Number.parseFloat(transitionDelay); // Return 0 if element or transition duration is not found
78
-
79
- if (!floatTransitionDuration && !floatTransitionDelay) {
80
- return 0;
81
- } // If multiple durations are defined, take the first
82
-
83
-
84
- transitionDuration = transitionDuration.split(',')[0];
85
- transitionDelay = transitionDelay.split(',')[0];
86
- return (Number.parseFloat(transitionDuration) + Number.parseFloat(transitionDelay)) * MILLISECONDS_MULTIPLIER;
87
- };
88
-
89
64
  const triggerTransitionEnd = element => {
90
65
  element.dispatchEvent(new Event(TRANSITION_END));
91
66
  };
92
67
 
93
- const isElement = obj => (obj[0] || obj).nodeType;
94
-
95
- const emulateTransitionEnd = (element, duration) => {
96
- let called = false;
97
- const durationPadding = 5;
98
- const emulatedDuration = duration + durationPadding;
68
+ const isElement = obj => {
69
+ if (!obj || typeof obj !== 'object') {
70
+ return false;
71
+ }
99
72
 
100
- function listener() {
101
- called = true;
102
- element.removeEventListener(TRANSITION_END, listener);
73
+ if (typeof obj.jquery !== 'undefined') {
74
+ obj = obj[0];
103
75
  }
104
76
 
105
- element.addEventListener(TRANSITION_END, listener);
106
- setTimeout(() => {
107
- if (!called) {
108
- triggerTransitionEnd(element);
109
- }
110
- }, emulatedDuration);
77
+ return typeof obj.nodeType !== 'undefined';
111
78
  };
112
79
 
113
80
  const typeCheckConfig = (componentName, config, configTypes) => {
@@ -123,20 +90,26 @@
123
90
  };
124
91
 
125
92
  const isVisible = element => {
126
- if (!element) {
93
+ if (!isElement(element) || element.getClientRects().length === 0) {
127
94
  return false;
128
95
  }
129
96
 
130
- if (element.style && element.parentNode && element.parentNode.style) {
131
- const elementStyle = getComputedStyle(element);
132
- const parentNodeStyle = getComputedStyle(element.parentNode);
133
- return elementStyle.display !== 'none' && parentNodeStyle.display !== 'none' && elementStyle.visibility !== 'hidden';
134
- }
135
-
136
- return false;
97
+ return getComputedStyle(element).getPropertyValue('visibility') === 'visible';
137
98
  };
99
+ /**
100
+ * Trick to restart an element's animation
101
+ *
102
+ * @param {HTMLElement} element
103
+ * @return void
104
+ *
105
+ * @see https://www.charistheo.io/blog/2021/02/restart-a-css-animation-with-javascript/#restarting-a-css-animation
106
+ */
138
107
 
139
- const reflow = element => element.offsetHeight;
108
+
109
+ const reflow = element => {
110
+ // eslint-disable-next-line no-unused-expressions
111
+ element.offsetHeight;
112
+ };
140
113
 
141
114
  const getjQuery = () => {
142
115
  const {
@@ -150,9 +123,18 @@
150
123
  return null;
151
124
  };
152
125
 
126
+ const DOMContentLoadedCallbacks = [];
127
+
153
128
  const onDOMContentLoaded = callback => {
154
129
  if (document.readyState === 'loading') {
155
- document.addEventListener('DOMContentLoaded', callback);
130
+ // add listener on the first call when the document is in loading state
131
+ if (!DOMContentLoadedCallbacks.length) {
132
+ document.addEventListener('DOMContentLoaded', () => {
133
+ DOMContentLoadedCallbacks.forEach(callback => callback());
134
+ });
135
+ }
136
+
137
+ DOMContentLoadedCallbacks.push(callback);
156
138
  } else {
157
139
  callback();
158
140
  }
@@ -160,12 +142,13 @@
160
142
 
161
143
  const isRTL = () => document.documentElement.dir === 'rtl';
162
144
 
163
- const defineJQueryPlugin = (name, plugin) => {
145
+ const defineJQueryPlugin = plugin => {
164
146
  onDOMContentLoaded(() => {
165
147
  const $ = getjQuery();
166
148
  /* istanbul ignore if */
167
149
 
168
150
  if ($) {
151
+ const name = plugin.NAME;
169
152
  const JQUERY_NO_CONFLICT = $.fn[name];
170
153
  $.fn[name] = plugin.jQueryInterface;
171
154
  $.fn[name].Constructor = plugin;
@@ -177,10 +160,37 @@
177
160
  }
178
161
  });
179
162
  };
163
+ /**
164
+ * Return the previous/next element of a list.
165
+ *
166
+ * @param {array} list The list of elements
167
+ * @param activeElement The active element
168
+ * @param shouldGetNext Choose to get next or previous element
169
+ * @param isCycleAllowed
170
+ * @return {Element|elem} The proper element
171
+ */
172
+
173
+
174
+ const getNextActiveElement = (list, activeElement, shouldGetNext, isCycleAllowed) => {
175
+ let index = list.indexOf(activeElement); // if the element does not exist in the list return an element depending on the direction and if cycle is allowed
176
+
177
+ if (index === -1) {
178
+ return list[!shouldGetNext && isCycleAllowed ? list.length - 1 : 0];
179
+ }
180
+
181
+ const listLength = list.length;
182
+ index += shouldGetNext ? 1 : -1;
183
+
184
+ if (isCycleAllowed) {
185
+ index = (index + listLength) % listLength;
186
+ }
187
+
188
+ return list[Math.max(0, Math.min(index, listLength - 1))];
189
+ };
180
190
 
181
191
  /**
182
192
  * --------------------------------------------------------------------------
183
- * Bootstrap (v5.0.0): carousel.js
193
+ * Bootstrap (v5.1.1): carousel.js
184
194
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
185
195
  * --------------------------------------------------------------------------
186
196
  */
@@ -219,6 +229,10 @@
219
229
  const ORDER_PREV = 'prev';
220
230
  const DIRECTION_LEFT = 'left';
221
231
  const DIRECTION_RIGHT = 'right';
232
+ const KEY_TO_DIRECTION = {
233
+ [ARROW_LEFT_KEY]: DIRECTION_RIGHT,
234
+ [ARROW_RIGHT_KEY]: DIRECTION_LEFT
235
+ };
222
236
  const EVENT_SLIDE = `slide${EVENT_KEY}`;
223
237
  const EVENT_SLID = `slid${EVENT_KEY}`;
224
238
  const EVENT_KEYDOWN = `keydown${EVENT_KEY}`;
@@ -281,15 +295,13 @@
281
295
  return Default;
282
296
  }
283
297
 
284
- static get DATA_KEY() {
285
- return DATA_KEY;
298
+ static get NAME() {
299
+ return NAME;
286
300
  } // Public
287
301
 
288
302
 
289
303
  next() {
290
- if (!this._isSliding) {
291
- this._slide(ORDER_NEXT);
292
- }
304
+ this._slide(ORDER_NEXT);
293
305
  }
294
306
 
295
307
  nextWhenVisible() {
@@ -301,9 +313,7 @@
301
313
  }
302
314
 
303
315
  prev() {
304
- if (!this._isSliding) {
305
- this._slide(ORDER_PREV);
306
- }
316
+ this._slide(ORDER_PREV);
307
317
  }
308
318
 
309
319
  pause(event) {
@@ -360,23 +370,13 @@
360
370
  const order = index > activeIndex ? ORDER_NEXT : ORDER_PREV;
361
371
 
362
372
  this._slide(order, this._items[index]);
363
- }
364
-
365
- dispose() {
366
- this._items = null;
367
- this._config = null;
368
- this._interval = null;
369
- this._isPaused = null;
370
- this._isSliding = null;
371
- this._activeElement = null;
372
- this._indicatorsElement = null;
373
- super.dispose();
374
373
  } // Private
375
374
 
376
375
 
377
376
  _getConfig(config) {
378
377
  config = { ...Default,
379
- ...config
378
+ ...Manipulator__default['default'].getDataAttributes(this._element),
379
+ ...(typeof config === 'object' ? config : {})
380
380
  };
381
381
  typeCheckConfig(NAME, config, DefaultType);
382
382
  return config;
@@ -415,8 +415,12 @@
415
415
  }
416
416
 
417
417
  _addTouchEventListeners() {
418
+ const hasPointerPenTouch = event => {
419
+ return this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH);
420
+ };
421
+
418
422
  const start = event => {
419
- if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) {
423
+ if (hasPointerPenTouch(event)) {
420
424
  this.touchStartX = event.clientX;
421
425
  } else if (!this._pointerEvent) {
422
426
  this.touchStartX = event.touches[0].clientX;
@@ -429,7 +433,7 @@
429
433
  };
430
434
 
431
435
  const end = event => {
432
- if (this._pointerEvent && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)) {
436
+ if (hasPointerPenTouch(event)) {
433
437
  this.touchDeltaX = event.clientX - this.touchStartX;
434
438
  }
435
439
 
@@ -474,14 +478,12 @@
474
478
  return;
475
479
  }
476
480
 
477
- if (event.key === ARROW_LEFT_KEY) {
478
- event.preventDefault();
481
+ const direction = KEY_TO_DIRECTION[event.key];
479
482
 
480
- this._slide(DIRECTION_RIGHT);
481
- } else if (event.key === ARROW_RIGHT_KEY) {
483
+ if (direction) {
482
484
  event.preventDefault();
483
485
 
484
- this._slide(DIRECTION_LEFT);
486
+ this._slide(direction);
485
487
  }
486
488
  }
487
489
 
@@ -492,20 +494,7 @@
492
494
 
493
495
  _getItemByOrder(order, activeElement) {
494
496
  const isNext = order === ORDER_NEXT;
495
- const isPrev = order === ORDER_PREV;
496
-
497
- const activeIndex = this._getItemIndex(activeElement);
498
-
499
- const lastItemIndex = this._items.length - 1;
500
- const isGoingToWrap = isPrev && activeIndex === 0 || isNext && activeIndex === lastItemIndex;
501
-
502
- if (isGoingToWrap && !this._config.wrap) {
503
- return activeElement;
504
- }
505
-
506
- const delta = isPrev ? -1 : 1;
507
- const itemIndex = (activeIndex + delta) % this._items.length;
508
- return itemIndex === -1 ? this._items[this._items.length - 1] : this._items[itemIndex];
497
+ return getNextActiveElement(this._items, activeElement, isNext, this._config.wrap);
509
498
  }
510
499
 
511
500
  _triggerSlideEvent(relatedTarget, eventDirectionName) {
@@ -578,6 +567,10 @@
578
567
  return;
579
568
  }
580
569
 
570
+ if (this._isSliding) {
571
+ return;
572
+ }
573
+
581
574
  const slideEvent = this._triggerSlideEvent(nextElement, eventDirectionName);
582
575
 
583
576
  if (slideEvent.defaultPrevented) {
@@ -599,37 +592,35 @@
599
592
 
600
593
  this._activeElement = nextElement;
601
594
 
595
+ const triggerSlidEvent = () => {
596
+ EventHandler__default['default'].trigger(this._element, EVENT_SLID, {
597
+ relatedTarget: nextElement,
598
+ direction: eventDirectionName,
599
+ from: activeElementIndex,
600
+ to: nextElementIndex
601
+ });
602
+ };
603
+
602
604
  if (this._element.classList.contains(CLASS_NAME_SLIDE)) {
603
605
  nextElement.classList.add(orderClassName);
604
606
  reflow(nextElement);
605
607
  activeElement.classList.add(directionalClassName);
606
608
  nextElement.classList.add(directionalClassName);
607
- const transitionDuration = getTransitionDurationFromElement(activeElement);
608
- EventHandler__default['default'].one(activeElement, 'transitionend', () => {
609
+
610
+ const completeCallBack = () => {
609
611
  nextElement.classList.remove(directionalClassName, orderClassName);
610
612
  nextElement.classList.add(CLASS_NAME_ACTIVE);
611
613
  activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName);
612
614
  this._isSliding = false;
613
- setTimeout(() => {
614
- EventHandler__default['default'].trigger(this._element, EVENT_SLID, {
615
- relatedTarget: nextElement,
616
- direction: eventDirectionName,
617
- from: activeElementIndex,
618
- to: nextElementIndex
619
- });
620
- }, 0);
621
- });
622
- emulateTransitionEnd(activeElement, transitionDuration);
615
+ setTimeout(triggerSlidEvent, 0);
616
+ };
617
+
618
+ this._queueCallback(completeCallBack, activeElement, true);
623
619
  } else {
624
620
  activeElement.classList.remove(CLASS_NAME_ACTIVE);
625
621
  nextElement.classList.add(CLASS_NAME_ACTIVE);
626
622
  this._isSliding = false;
627
- EventHandler__default['default'].trigger(this._element, EVENT_SLID, {
628
- relatedTarget: nextElement,
629
- direction: eventDirectionName,
630
- from: activeElementIndex,
631
- to: nextElementIndex
632
- });
623
+ triggerSlidEvent();
633
624
  }
634
625
 
635
626
  if (isCycling) {
@@ -663,10 +654,10 @@
663
654
 
664
655
 
665
656
  static carouselInterface(element, config) {
666
- let data = Data__default['default'].get(element, DATA_KEY);
667
- let _config = { ...Default,
668
- ...Manipulator__default['default'].getDataAttributes(element)
669
- };
657
+ const data = Carousel.getOrCreateInstance(element, config);
658
+ let {
659
+ _config
660
+ } = data;
670
661
 
671
662
  if (typeof config === 'object') {
672
663
  _config = { ..._config,
@@ -676,10 +667,6 @@
676
667
 
677
668
  const action = typeof config === 'string' ? config : _config.slide;
678
669
 
679
- if (!data) {
680
- data = new Carousel(element, _config);
681
- }
682
-
683
670
  if (typeof config === 'number') {
684
671
  data.to(config);
685
672
  } else if (typeof action === 'string') {
@@ -719,7 +706,7 @@
719
706
  Carousel.carouselInterface(target, config);
720
707
 
721
708
  if (slideIndex) {
722
- Data__default['default'].get(target, DATA_KEY).to(slideIndex);
709
+ Carousel.getInstance(target).to(slideIndex);
723
710
  }
724
711
 
725
712
  event.preventDefault();
@@ -738,7 +725,7 @@
738
725
  const carousels = SelectorEngine__default['default'].find(SELECTOR_DATA_RIDE);
739
726
 
740
727
  for (let i = 0, len = carousels.length; i < len; i++) {
741
- Carousel.carouselInterface(carousels[i], Data__default['default'].get(carousels[i], DATA_KEY));
728
+ Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i]));
742
729
  }
743
730
  });
744
731
  /**
@@ -748,7 +735,7 @@
748
735
  * add .Carousel to jQuery only if jQuery is present
749
736
  */
750
737
 
751
- defineJQueryPlugin(NAME, Carousel);
738
+ defineJQueryPlugin(Carousel);
752
739
 
753
740
  return Carousel;
754
741