bootstrap 5.0.0 → 5.1.1

Sign up to get free protection for your applications and to get access to all the features.
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