bootstrap-italia 2.12.0 → 2.13.0

package/src/js/plugins/input-number.js

@@ -1,6 +1,14 @@
-import BaseComponent from 'bootstrap/js/src/base-component'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
 
 import InputLabel from './input-label'
 
@@ -127,7 +135,7 @@ const createInput = (element) => {
   return null
 }
 
-if (typeof document !== 'undefined') {
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   document.addEventListener('DOMContentLoaded', function () {
     var frmel = document.querySelectorAll(SELECTOR_INPUT + ', label')
     frmel.forEach(function (item) {

package/src/js/plugins/input-password.js

@@ -1,7 +1,15 @@
-import BaseComponent from 'bootstrap/js/src/base-component'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
-import Manipulator from 'bootstrap/js/src/dom/manipulator'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import Manipulator from './dom/manipulator'
 
 import InputLabel from './input-label'
 
@@ -439,42 +447,44 @@ class InputPassword extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const createInput = (element) => {
-  if (element && element.matches(SELECTOR_PASSWORD)) {
-    return InputPassword.getOrCreateInstance(element)
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  const createInput = (element) => {
+    if (element && element.matches(SELECTOR_PASSWORD)) {
+      return InputPassword.getOrCreateInstance(element)
+    }
+    return null
   }
-  return null
-}
 
-const initInputPassword = () => {
-  const element = SelectorEngine.findOne(SELECTOR_PASSWORD)
-  if (element) {
-    InputPassword.getOrCreateInstance(element)
+  const initInputPassword = () => {
+    const element = SelectorEngine.findOne(SELECTOR_PASSWORD)
+    if (element) {
+      InputPassword.getOrCreateInstance(element)
+    }
   }
-}
 
-if (document.readyState !== 'loading') {
-  initInputPassword()
-} else {
-  document.addEventListener('DOMContentLoaded', initInputPassword)
-}
-
-EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_PASSWORD + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  createInput(target)
-})
-EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_PASSWORD + ', label', function () {
-  const target = InputLabel.getInputFromLabel(this) || this
-  const element = createInput(target)
-  if (element && element._label) {
-    element._label._labelOut()
+  if (document.readyState !== 'loading') {
+    initInputPassword()
+  } else {
+    document.addEventListener('DOMContentLoaded', initInputPassword)
   }
-})
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BTN_SHOW_PWD, function () {
-  const target = this.parentNode && this.parentNode.querySelector(SELECTOR_PASSWORD)
-  if (target) {
-    InputPassword.getOrCreateInstance(target)
-  }
-})
+
+  EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_PASSWORD + ', label', function () {
+    const target = InputLabel.getInputFromLabel(this) || this
+    createInput(target)
+  })
+  EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_PASSWORD + ', label', function () {
+    const target = InputLabel.getInputFromLabel(this) || this
+    const element = createInput(target)
+    if (element && element._label) {
+      element._label._labelOut()
+    }
+  })
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BTN_SHOW_PWD, function () {
+    const target = this.parentNode && this.parentNode.querySelector(SELECTOR_PASSWORD)
+    if (target) {
+      InputPassword.getOrCreateInstance(target)
+    }
+  })
+}
 
 export default InputPassword

package/src/js/plugins/input-search-autocomplete.js

@@ -1,9 +1,13 @@
-//import BaseComponent from 'bootstrap/js/src/base-component.js'
-
-import BaseComponent from 'bootstrap/js/src/base-component'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
+import BaseComponent from './base-component'
+import EventHandler from './dom/event-handler'
 import InputLabel from './input-label'
 
 const NAME = 'inputsearchautocomplete'
@@ -125,14 +129,6 @@ class InputSearch extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-/*const inputs = SelectorEngine.find(SELECTOR_SEARCH)
-inputs.forEach((input) => {
-  EventHandler.one(input, EVENT_KEYUP_DATA_API, () => {
-    const searchInput = InputSearch.getOrCreateInstance(input)
-    searchInput.search()
-  })
-})*/
-
 const createInput = (element) => {
   if (element && element.matches(SELECTOR_SEARCH)) {
     return InputSearch.getOrCreateInstance(element)

package/src/js/plugins/input.js

@@ -1,7 +1,15 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
 
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
 
 import InputLabel from './input-label'
 

package/src/js/plugins/list.js

@@ -1,7 +1,15 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
-import EventHandler from 'bootstrap/js/src/dom/event-handler'
+import BaseComponent from './base-component.js'
+
+import SelectorEngine from './dom/selector-engine'
+import EventHandler from './dom/event-handler'
 
 const NAME = 'list'
 const DATA_KEY = 'bs.list'
@@ -63,16 +71,18 @@ class List extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_LIST).forEach((list) => {
-  SelectorEngine.find(SELECTOR_ITEM_CHECKBOX, list).forEach((checkbox) => {
-    EventHandler.one(checkbox.closest('a'), EVENT_CLICK_DATA_API, (evt) => {
-      if (!List.getInstance(list)) {
-        evt.preventDefault()
-        const listObj = List.getOrCreateInstance(list)
-        listObj.toggleCheckbox(evt.currentTarget)
-      }
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  SelectorEngine.find(SELECTOR_LIST).forEach((list) => {
+    SelectorEngine.find(SELECTOR_ITEM_CHECKBOX, list).forEach((checkbox) => {
+      EventHandler.one(checkbox.closest('a'), EVENT_CLICK_DATA_API, (evt) => {
+        if (!List.getInstance(list)) {
+          evt.preventDefault()
+          const listObj = List.getOrCreateInstance(list)
+          listObj.toggleCheckbox(evt.currentTarget)
+        }
+      })
     })
   })
-})
+}
 
 export default List

package/src/js/plugins/masonry.js

@@ -1,14 +1,19 @@
-import BaseComponent from 'bootstrap/js/src/base-component.js'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import BaseComponent from './base-component.js'
 
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
-import Manipulator from 'bootstrap/js/src/dom/manipulator'
+import SelectorEngine from './dom/selector-engine'
+import Manipulator from './dom/manipulator'
 
-import MasonryPlugin from 'masonry-layout'
+import MiniMasonry from 'minimasonry/src/minimasonry'
 
 const NAME = 'masonry'
-//const DATA_KEY = 'bs.masonry'
-//const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
 
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_LOADER = 'masonry-loader'
@@ -24,13 +29,13 @@ class Masonry extends BaseComponent {
   constructor(element, config) {
     super(element)
 
-    this._config = this._getConfig(config)
-    this._masonry = null
-
-    this._images = SelectorEngine.find('img', this._element)
-    this._loadCounter = 0
-
-    this._init()
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+      this._config = this._getConfig(config)
+      this._masonry = null
+      this._images = SelectorEngine.find('img', this._element)
+      this._loadCounter = 0
+      this._init()
+    }
   }
 
   // Getters
@@ -61,8 +66,6 @@ class Masonry extends BaseComponent {
 
   _init() {
     if (this._images.length > 0) {
-      //this._showLoader()
-
       this._images.forEach((img) => {
         const imgDummy = new Image()
         imgDummy.onload = () => this._onLoadEnd()
@@ -76,13 +79,14 @@ class Masonry extends BaseComponent {
   _onLoadEnd() {
     this._loadCounter++
     if (this._loadCounter >= this._images.length) {
-      //this._hideLoader()
       this._initMasonry()
     }
   }
 
   _initMasonry() {
-    this._masonry = new MasonryPlugin(this._element, this._config)
+    const config = this._config
+    config.container = this._element
+    this._masonry = new MiniMasonry(config) //new MasonryPlugin(this._element, this._config)
   }
 
   _createLoader() {
@@ -123,18 +127,13 @@ class Masonry extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const masonries = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
-if (masonries.length > 0) {
-  /*if (!MASONRY_EXISTS) {
-    console.warn('[Masonry] Masonry component needs Masonry library to work properly')
-  } else {
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  const masonries = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
+  if (masonries.length > 0) {
     masonries.forEach((masonry) => {
       Masonry.getOrCreateInstance(masonry)
     })
-  }*/
-  masonries.forEach((masonry) => {
-    Masonry.getOrCreateInstance(masonry)
-  })
+  }
 }
 
 export default Masonry

package/src/js/plugins/modal.js

@@ -1,5 +1,360 @@
-import { default as BSModal } from 'bootstrap/js/src/modal'
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap Italia (https://italia.github.io/bootstrap-italia/)
+ * Authors: https://github.com/italia/bootstrap-italia/blob/main/AUTHORS
+ * Licensed under BSD-3-Clause license (https://github.com/italia/bootstrap-italia/blob/main/LICENSE)
+ * This a fork of Bootstrap: Initial license and original file name below
+ * Bootstrap (v5.2.3): modal.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
 
-class Modal extends BSModal {}
+import { getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
+import EventHandler from './dom/event-handler'
+import SelectorEngine from './dom/selector-engine'
+import ScrollBarHelper from './util/scrollbar'
+import BaseComponent from './base-component'
+import Backdrop from './util/backdrop'
+import FocusTrap from './util/focustrap'
+import { enableDismissTrigger } from './util/component-functions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'modal'
+const DATA_KEY = 'bs.modal'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+const ESCAPE_KEY = 'Escape'
+
+const EVENT_HIDE = `hide${EVENT_KEY}`
+const EVENT_HIDE_PREVENTED = `hidePrevented${EVENT_KEY}`
+const EVENT_HIDDEN = `hidden${EVENT_KEY}`
+const EVENT_SHOW = `show${EVENT_KEY}`
+const EVENT_SHOWN = `shown${EVENT_KEY}`
+const EVENT_RESIZE = `resize${EVENT_KEY}`
+const EVENT_CLICK_DISMISS = `click.dismiss${EVENT_KEY}`
+const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}`
+const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+
+const CLASS_NAME_OPEN = 'modal-open'
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_STATIC = 'modal-static'
+
+const OPEN_SELECTOR = '.modal.show'
+const SELECTOR_DIALOG = '.modal-dialog'
+const SELECTOR_MODAL_BODY = '.modal-body'
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
+
+const Default = {
+  backdrop: true,
+  focus: true,
+  keyboard: true,
+}
+
+const DefaultType = {
+  backdrop: '(boolean|string)',
+  focus: 'boolean',
+  keyboard: 'boolean',
+}
+
+/**
+ * Class definition
+ */
+
+class Modal extends BaseComponent {
+  constructor(element, config) {
+    super(element, config)
+
+    this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
+    this._backdrop = this._initializeBackDrop()
+    this._focustrap = this._initializeFocusTrap()
+    this._isShown = false
+    this._isTransitioning = false
+    this._scrollBar = new ScrollBarHelper()
+
+    this._addEventListeners()
+  }
+
+  // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
+
+  static get NAME() {
+    return NAME
+  }
+
+  // Public
+  toggle(relatedTarget) {
+    return this._isShown ? this.hide() : this.show(relatedTarget)
+  }
+
+  show(relatedTarget) {
+    if (this._isShown || this._isTransitioning) {
+      return
+    }
+
+    const showEvent = EventHandler.trigger(this._element, EVENT_SHOW, {
+      relatedTarget,
+    })
+
+    if (showEvent.defaultPrevented) {
+      return
+    }
+
+    this._isShown = true
+    this._isTransitioning = true
+
+    this._scrollBar.hide()
+
+    document.body.classList.add(CLASS_NAME_OPEN)
+
+    this._adjustDialog()
+
+    this._backdrop.show(() => this._showElement(relatedTarget))
+  }
+
+  hide() {
+    if (!this._isShown || this._isTransitioning) {
+      return
+    }
+
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE)
+
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    this._isShown = false
+    this._isTransitioning = true
+    this._focustrap.deactivate()
+
+    this._element.classList.remove(CLASS_NAME_SHOW)
+
+    this._queueCallback(() => this._hideModal(), this._element, this._isAnimated())
+  }
+
+  dispose() {
+    for (const htmlElement of [window, this._dialog]) {
+      EventHandler.off(htmlElement, EVENT_KEY)
+    }
+
+    this._backdrop.dispose()
+    this._focustrap.deactivate()
+    super.dispose()
+  }
+
+  handleUpdate() {
+    this._adjustDialog()
+  }
+
+  // Private
+  _initializeBackDrop() {
+    return new Backdrop({
+      isVisible: Boolean(this._config.backdrop), // 'static' option will be translated to true, and booleans will keep their value,
+      isAnimated: this._isAnimated(),
+    })
+  }
+
+  _initializeFocusTrap() {
+    return new FocusTrap({
+      trapElement: this._element,
+    })
+  }
+
+  _showElement(relatedTarget) {
+    // try to append dynamic modal
+    if (!document.body.contains(this._element)) {
+      document.body.append(this._element)
+    }
+
+    this._element.style.display = 'block'
+    this._element.removeAttribute('aria-hidden')
+    this._element.setAttribute('aria-modal', true)
+    this._element.setAttribute('role', 'dialog')
+    this._element.scrollTop = 0
+
+    const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
+    if (modalBody) {
+      modalBody.scrollTop = 0
+    }
+
+    reflow(this._element)
+
+    this._element.classList.add(CLASS_NAME_SHOW)
+
+    const transitionComplete = () => {
+      if (this._config.focus) {
+        this._focustrap.activate()
+      }
+
+      this._isTransitioning = false
+      EventHandler.trigger(this._element, EVENT_SHOWN, {
+        relatedTarget,
+      })
+    }
+
+    this._queueCallback(transitionComplete, this._dialog, this._isAnimated())
+  }
+
+  _addEventListeners() {
+    EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, (event) => {
+      if (event.key !== ESCAPE_KEY) {
+        return
+      }
+
+      if (this._config.keyboard) {
+        event.preventDefault()
+        this.hide()
+        return
+      }
+
+      this._triggerBackdropTransition()
+    })
+
+    EventHandler.on(window, EVENT_RESIZE, () => {
+      if (this._isShown && !this._isTransitioning) {
+        this._adjustDialog()
+      }
+    })
+
+    EventHandler.on(this._element, EVENT_MOUSEDOWN_DISMISS, (event) => {
+      // a bad trick to segregate clicks that may start inside dialog but end outside, and avoid listen to scrollbar clicks
+      EventHandler.one(this._element, EVENT_CLICK_DISMISS, (event2) => {
+        if (this._element !== event.target || this._element !== event2.target) {
+          return
+        }
+
+        if (this._config.backdrop === 'static') {
+          this._triggerBackdropTransition()
+          return
+        }
+
+        if (this._config.backdrop) {
+          this.hide()
+        }
+      })
+    })
+  }
+
+  _hideModal() {
+    this._element.style.display = 'none'
+    this._element.setAttribute('aria-hidden', true)
+    this._element.removeAttribute('aria-modal')
+    this._element.removeAttribute('role')
+    this._isTransitioning = false
+
+    this._backdrop.hide(() => {
+      document.body.classList.remove(CLASS_NAME_OPEN)
+      this._resetAdjustments()
+      this._scrollBar.reset()
+      EventHandler.trigger(this._element, EVENT_HIDDEN)
+    })
+  }
+
+  _isAnimated() {
+    return this._element.classList.contains(CLASS_NAME_FADE)
+  }
+
+  _triggerBackdropTransition() {
+    const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
+    if (hideEvent.defaultPrevented) {
+      return
+    }
+
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const initialOverflowY = this._element.style.overflowY
+    // return if the following background transition hasn't yet completed
+    if (initialOverflowY === 'hidden' || this._element.classList.contains(CLASS_NAME_STATIC)) {
+      return
+    }
+
+    if (!isModalOverflowing) {
+      this._element.style.overflowY = 'hidden'
+    }
+
+    this._element.classList.add(CLASS_NAME_STATIC)
+    this._queueCallback(() => {
+      this._element.classList.remove(CLASS_NAME_STATIC)
+      this._queueCallback(() => {
+        this._element.style.overflowY = initialOverflowY
+      }, this._dialog)
+    }, this._dialog)
+
+    this._element.focus()
+  }
+
+  /**
+   * The following methods are used to handle overflowing modals
+   */
+
+  _adjustDialog() {
+    const isModalOverflowing = this._element.scrollHeight > document.documentElement.clientHeight
+    const scrollbarWidth = this._scrollBar.getWidth()
+    const isBodyOverflowing = scrollbarWidth > 0
+
+    if (isBodyOverflowing && !isModalOverflowing) {
+      const property = isRTL() ? 'paddingLeft' : 'paddingRight'
+      this._element.style[property] = `${scrollbarWidth}px`
+    }
+
+    if (!isBodyOverflowing && isModalOverflowing) {
+      const property = isRTL() ? 'paddingRight' : 'paddingLeft'
+      this._element.style[property] = `${scrollbarWidth}px`
+    }
+  }
+
+  _resetAdjustments() {
+    this._element.style.paddingLeft = ''
+    this._element.style.paddingRight = ''
+  }
+}
+
+/**
+ * Data API implementation
+ */
+
+if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+  EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
+    const target = getElementFromSelector(this)
+
+    if (['A', 'AREA'].includes(this.tagName)) {
+      event.preventDefault()
+    }
+
+    EventHandler.one(target, EVENT_SHOW, (showEvent) => {
+      if (showEvent.defaultPrevented) {
+        // only register focus restorer if modal will actually get shown
+        return
+      }
+
+      EventHandler.one(target, EVENT_HIDDEN, () => {
+        if (isVisible(this)) {
+          this.focus()
+        }
+      })
+    })
+
+    // avoid conflict when clicking modal toggler while another one is open
+    const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
+    if (alreadyOpen) {
+      Modal.getInstance(alreadyOpen).hide()
+    }
+
+    const data = Modal.getOrCreateInstance(target)
+
+    data.toggle(this)
+  })
+
+  enableDismissTrigger(Modal)
+}
 
 export default Modal