bootstrap-italia 2.13.4 → 2.15.0

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

@@ -33,11 +33,8 @@ const SELECTOR_BTN = 'button[class^="input-number-"]'
 class InputNumber extends BaseComponent {
   constructor(element) {
     super(element)
-
     this._wrapperElement = this._element.closest(SELECTOR_WRAPPER)
-
     this._label = new InputLabel(element)
-
     this._init()
     this._bindEvents()
   }
@@ -48,8 +45,6 @@ class InputNumber extends BaseComponent {
     return NAME
   }
 
-  // Public
-
   // Private
   _init() {
     if (this._wrapperElement) {
@@ -83,7 +78,10 @@ class InputNumber extends BaseComponent {
   }
 
   _incrDecr(isDecr) {
-    var inputVal = 0
+    let inputVal = 0
+    if (this._element.disabled || this._element.readonly) {
+      return
+    }
     if (this._element.value !== '') inputVal = parseFloat(this._element.value)
 
     if (!isNaN(inputVal)) {
@@ -137,7 +135,7 @@ const createInput = (element) => {
 
 if (typeof window !== 'undefined' && typeof document !== 'undefined') {
   document.addEventListener('DOMContentLoaded', function () {
-    var frmel = document.querySelectorAll(SELECTOR_INPUT + ', label')
+    let frmel = document.querySelectorAll(SELECTOR_INPUT + ', label')
     frmel.forEach(function (item) {
       const target = InputLabel.getInputFromLabel(item) || item
       createInput(target)

package/src/js/plugins/masonry.js

@@ -54,6 +54,13 @@ class Masonry extends BaseComponent {
     super.dispose()
   }
 
+  // Public
+  layout() {
+    if (this._masonry) {
+      this._masonry.layout()
+    }
+  }
+
   // Private
   _getConfig(config) {
     config = {
@@ -86,7 +93,7 @@ class Masonry extends BaseComponent {
   _initMasonry() {
     const config = this._config
     config.container = this._element
-    this._masonry = new MiniMasonry(config) //new MasonryPlugin(this._element, this._config)
+    this._masonry = new MiniMasonry(config)
   }
 
   _createLoader() {

package/src/js/plugins/navbar-collapsible.js

@@ -7,14 +7,13 @@
  */
 
 import BaseComponent from './base-component.js'
-
 import { getElementFromSelector, isVisible, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import SelectorEngine from './dom/selector-engine'
-
 import { isScreenMobile } from './util/device'
-import { getElementIndex } from './util/dom'
-import { disablePageScroll, enablePageScroll } from './util/pageScroll'
+import ScrollBarHelper from './util/scrollbar'
+import FocusTrap from './util/focustrap'
+import Backdrop from './util/backdrop'
 
 const NAME = 'navbarcollapsible'
 const DATA_KEY = 'bs.navbarcollapsible'
@@ -23,7 +22,6 @@ const DATA_API_KEY = '.data-api'
 
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_CLICK = `click${EVENT_KEY}`
-const EVENT_KEYUP = `keyup${EVENT_KEY}`
 const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
@@ -31,54 +29,88 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_RESIZE = `resize${EVENT_KEY}`
 
-const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_OPEN = 'navbar-open'
 const CLASS_NAME_SHOW = 'show'
 const CLASS_NAME_EXPANDED = 'expanded'
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="navbarcollapsible"]'
-
-//const SELECTOR_NAVBAR = '.navbar-collapsable'
 const SELECTOR_BTN_CLOSE = '.close-div button'
 const SELECTOR_BTN_MENU_CLOSE = '.close-menu'
 const SELECTOR_BTN_BACK = '.it-back-button'
-const SELECTOR_OVERLAY = '.overlay'
 const SELECTOR_MENU_WRAPPER = '.menu-wrapper'
 const SELECTOR_NAVLINK = '.nav-link'
 const SELECTOR_MEGAMENUNAVLINK = '.nav-item .list-item'
 const SELECTOR_HEADINGLINK = '.it-heading-link'
 const SELECTOR_FOOTERLINK = '.it-footer-link'
 
+const Default = {
+  backdrop: true,
+  focus: true,
+}
+
+const DefaultType = {
+  backdrop: '(boolean|string)',
+  focus: 'boolean',
+}
+
 class NavBarCollapsible extends BaseComponent {
-  constructor(element) {
-    super(element)
+  constructor(element, config) {
+    super(element, config)
+
+    this._mainElement = SelectorEngine.findOne('main')
+    this._isNavbarOutsideMain = this._mainElement && !this._mainElement.contains(this._element)
+    this._parentElement = this._element.parentNode
 
     this._isShown = this._element.classList.contains(CLASS_NAME_EXPANDED)
-    this._isTransitioning = false
 
-    this._isMobile = isScreenMobile()
-    this._isKeyShift = false
+    if (!this._element.getAttribute('tabindex')) {
+      this._element.setAttribute('tabindex', '-1')
+    }
 
-    this._currItemIdx = 0
+    this._backdrop = this._initializeBackDrop()
+    this._focustrap = this._initializeFocusTrap()
+    this._scrollBar = new ScrollBarHelper()
+    this._isTransitioning = false
+    this._isMobile = isScreenMobile()
 
     this._btnClose = SelectorEngine.findOne(SELECTOR_BTN_CLOSE, this._element)
     this._btnBack = SelectorEngine.findOne(SELECTOR_BTN_BACK, this._element)
     this._menuWrapper = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, this._element)
-    this._overlay = null
-    this._setOverlay()
+
     this._menuItems = SelectorEngine.find(
       [SELECTOR_NAVLINK, SELECTOR_MEGAMENUNAVLINK, SELECTOR_HEADINGLINK, SELECTOR_FOOTERLINK, SELECTOR_BTN_MENU_CLOSE].join(','),
       this._element
     )
 
+    this._toggleButton =
+      SelectorEngine.findOne(`${SELECTOR_DATA_TOGGLE}[data-bs-target="#${this._element.id}"]`) ||
+      SelectorEngine.findOne(`${SELECTOR_DATA_TOGGLE}[href="#${this._element.id}"]`)
+
+    if (this._toggleButton) {
+      if (!this._toggleButton.getAttribute('aria-expanded')) {
+        this._toggleButton.setAttribute('aria-expanded', this._isShown ? 'true' : 'false')
+      }
+    }
     this._bindEvents()
   }
+
   // Getters
+  static get Default() {
+    return Default
+  }
+
+  static get DefaultType() {
+    return DefaultType
+  }
 
   static get NAME() {
     return NAME
   }
 
   // Public
+  toggle(relatedTarget) {
+    this._isShown ? this.hide() : this.show(relatedTarget)
+  }
 
   show(relatedTarget) {
     if (this._isShown || this._isTransitioning) {
@@ -93,14 +125,22 @@ class NavBarCollapsible extends BaseComponent {
       return
     }
 
+    this._isShown = true
+    this._isTransitioning = true
+    this._scrollBar.hide()
+
     if (this._btnBack) {
       this._btnBack.classList.add(CLASS_NAME_SHOW)
     }
 
-    this._isShown = true
+    document.body.classList.add(CLASS_NAME_OPEN)
 
-    disablePageScroll()
+    this._backdrop.show()
     this._showElement()
+
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute('aria-expanded', 'true')
+    }
   }
 
   hide() {
@@ -116,45 +156,64 @@ class NavBarCollapsible extends BaseComponent {
 
     this._isShown = false
 
-    const isAnimated = this._isAnimated()
-
-    if (isAnimated) {
-      this._isTransitioning = true
-    }
+    this._isTransitioning = true
+    this._focustrap.deactivate()
 
     if (this._btnBack) {
       this._btnBack.classList.remove(CLASS_NAME_SHOW)
     }
-    if (this._overlay) {
-      this._overlay.classList.remove(CLASS_NAME_SHOW)
-    }
 
     this._element.classList.remove(CLASS_NAME_EXPANDED)
 
-    enablePageScroll()
-    this._queueCallback(() => this._hideElement(), this._menuWrapper, isAnimated)
-  }
+    this._backdrop.hide()
 
-  toggle(relatedTarget) {
-    this._isShown ? this.hide() : this.show(relatedTarget)
+    this._queueCallback(() => this._hideElement(), this._menuWrapper, this._isAnimated())
+
+    if (this._toggleButton) {
+      this._toggleButton.setAttribute('aria-expanded', 'false')
+    }
   }
 
   dispose() {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       EventHandler.off(window, EVENT_RESIZE)
-      super.dispose()
+      EventHandler.off(document, EVENT_KEYDOWN)
     }
+    this._backdrop.dispose()
+
+    this._focustrap.deactivate()
+    super.dispose()
   }
 
-  // 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(),
+      className: 'navbar-backdrop',
+      rootElement: this._parentElement,
+      clickCallback: () => {
+        this.hide()
+      },
+    })
+  }
+
+  _initializeFocusTrap() {
+    return new FocusTrap({
+      trapElement: this._element,
+      initialFocus: () => this._btnClose || this._element.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'),
+    })
+  }
 
+  // Private
   _bindEvents() {
     if (typeof window !== 'undefined' && typeof document !== 'undefined') {
       EventHandler.on(window, EVENT_RESIZE, () => this._onResize())
+      EventHandler.on(document, EVENT_KEYDOWN, (evt) => {
+        if (this._isShown && evt.key === 'Escape') {
+          this.hide()
+        }
+      })
 
-      if (this._overlay) {
-        EventHandler.on(this._overlay, EVENT_CLICK, () => this.hide())
-      }
       EventHandler.on(this._btnClose, EVENT_CLICK, (evt) => {
         evt.preventDefault()
         this.hide()
@@ -163,11 +222,8 @@ class NavBarCollapsible extends BaseComponent {
         evt.preventDefault()
         this.hide()
       })
-
       this._menuItems.forEach((item) => {
         EventHandler.on(item, EVENT_KEYDOWN, (evt) => this._isMobile && this._onMenuItemKeyDown(evt))
-        EventHandler.on(item, EVENT_KEYUP, (evt) => this._isMobile && this._onMenuItemKeyUp(evt))
-        EventHandler.on(item, EVENT_CLICK, (evt) => this._isMobile && this._onMenuItemClick(evt))
       })
     }
   }
@@ -176,30 +232,14 @@ class NavBarCollapsible extends BaseComponent {
     this._isMobile = isScreenMobile()
   }
 
-  _onMenuItemKeyUp(evt) {
-    if (evt.key === 'Shift') {
-      this._isKeyShift = false
-    }
-  }
   _onMenuItemKeyDown(evt) {
-    if (evt.key === 'Shift') {
-      this._isKeyShift = true
-    }
-    if (evt.key === 'Tab') {
-      evt.preventDefault()
-      this._focusNext()
+    if (evt.key === 'Escape') {
+      this.hide()
     }
   }
-  /**
-   * Update the last focused element when an interactive element is clicked
-   */
-  _onMenuItemClick(evt) {
-    this.currItemIdx = getElementIndex(evt.currentTarget, this._menuItems)
-  }
 
   _isAnimated() {
-    //there's no an animation css class you can toggle with a "show" css class, so it is supposed true
-    return true //this._element.classList.contains(CLASS_NAME_EXPANDED)
+    return true
   }
 
   _isElementHidden(element) {
@@ -207,108 +247,47 @@ class NavBarCollapsible extends BaseComponent {
   }
 
   _showElement() {
-    const isAnimated = this._isAnimated()
-
     this._element.style.display = 'block'
-    this._element.removeAttribute('aria-hidden')
-    this._element.setAttribute('aria-expanded', true)
-    //this._element.setAttribute('role', 'dialog')
-    if (this._overlay) {
-      this._overlay.style.display = 'block'
+    if (!this._element.getAttribute('aria-label') && !this._element.getAttribute('aria-labelledby')) {
+      this._element.setAttribute('aria-label', 'Menu')
     }
+    this._element.setAttribute('aria-modal', true)
+    this._element.setAttribute('role', 'dialog')
 
-    if (isAnimated) {
-      reflow(this._element)
+    if (this._mainElement && this._isNavbarOutsideMain) {
+      this._mainElement.setAttribute('inert', '')
     }
 
+    reflow(this._element)
+
     this._element.classList.add(CLASS_NAME_EXPANDED)
-    if (this._overlay) {
-      this._overlay.classList.add(CLASS_NAME_SHOW)
-    }
 
     const transitionComplete = () => {
-      this._isTransitioning = false
-      const firstItem = this._getNextVisibleItem(0) //at pos 0 there's the close button
-      if (firstItem.item) {
-        firstItem.item.focus()
-        this._currItemIdx = firstItem.index
+      if (this._config.focus) {
+        this._focustrap.activate()
       }
+      this._isTransitioning = false
       EventHandler.trigger(this._element, EVENT_SHOWN)
     }
 
-    this._queueCallback(transitionComplete, this._menuWrapper, isAnimated)
+    this._queueCallback(transitionComplete, this._menuWrapper, this._isAnimated())
   }
 
   _hideElement() {
-    if (this._overlay) {
-      this._overlay.style.display = 'none'
-    }
-
     this._element.style.display = 'none'
-    this._element.setAttribute('aria-hidden', true)
-    this._element.removeAttribute('aria-expanded')
-    //this._element.removeAttribute('aria-modal')
-    //this._element.removeAttribute('role')
-    this._isTransitioning = false
-    EventHandler.trigger(this._element, EVENT_HIDDEN)
-  }
+    this._element.removeAttribute('aria-modal')
+    this._element.removeAttribute('role')
 
-  _setOverlay() {
-    this._overlay = SelectorEngine.findOne(SELECTOR_OVERLAY, this._element)
-    if (this._isAnimated) {
-      this._overlay.classList.add(CLASS_NAME_FADE)
-    }
-  }
+    document.body.classList.remove(CLASS_NAME_OPEN)
 
-  /**
-   * Moves focus to the next focusable element based on the DOM exploration direction
-   */
-  _focusNext() {
-    let nextIdx = this._currItemIdx + (this._isKeyShift ? -1 : 1)
-    if (nextIdx < 0) {
-      nextIdx = this._menuItems.length - 1
-    } else if (nextIdx >= this._menuItems.length) {
-      nextIdx = 0
-    }
-    const target = this._getNextVisibleItem(nextIdx, this._isKeyShift)
-    if (target.item) {
-      target.item.focus()
-      this._currItemIdx = target.index
-    }
-  }
-  /**
-   * Get the next focusable element from a starting point
-   * @param {int} start - the index of the array of the elements as starting point (included)
-   * @param {boolean} wayTop - the array search direction (true: bottom to top, false: top to bottom)
-   * @returns {Object} the item found and its index in the array
-   */
-  _getNextVisibleItem(start, wayTop) {
-    let found = null
-    let foundIdx = null
-
-    let i = start
-    let incr = wayTop ? -1 : 1
-    let firstCheck = false
-    while (!found && (i != start || !firstCheck)) {
-      if (i == start) {
-        firstCheck = true
-      }
-      if (!this._isElementHidden(this._menuItems[i])) {
-        found = this._menuItems[i]
-        foundIdx = i
-      }
-      i = i + incr
-      if (i < 0) {
-        i = this._menuItems.length - 1
-      } else if (i >= this._menuItems.length) {
-        i = 0
-      }
+    if (this._mainElement && this._isNavbarOutsideMain) {
+      this._mainElement.removeAttribute('inert')
     }
 
-    return {
-      item: found,
-      index: foundIdx,
-    }
+    this._scrollBar.reset()
+    this._isTransitioning = false
+
+    EventHandler.trigger(this._element, EVENT_HIDDEN)
   }
 }
 

package/src/js/plugins/navscroll.js

@@ -25,6 +25,7 @@ const SELECTOR_TOGGLER = '.custom-navbar-toggler'
 const SELECTOR_TOGGLER_ICON = '.it-list'
 const SELECTOR_COLLAPSIBLE = '.navbar-collapsable'
 const SELECTOR_PROGRESS_BAR = '.it-navscroll-progressbar'
+const SELECTOR_MENU_WRAPPER = '.menu-wrapper'
 
 const Default = {
   scrollPadding: 10,
@@ -44,6 +45,11 @@ class NavScroll extends BaseComponent {
     this._callbackQueue = []
     this._scrollCb = null
 
+    const menuWrapper = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, this._element)
+    if (menuWrapper && !menuWrapper.hasAttribute('tabindex')) {
+      menuWrapper.setAttribute('tabindex', '-1')
+    }
+
     this._bindEvents()
   }
   // Getters
@@ -147,13 +153,31 @@ class NavScroll extends BaseComponent {
   }
 
   _scrollToHash(hash) {
-    const target = SelectorEngine.findOne(hash, this._sectionContainer)
+    if (!hash || hash === '#') {
+      // Validate hash to prevent errors
+      return
+    }
+    const target = this._sectionContainer // Fallback: when container is null, omit the second parameter entirely
+      ? SelectorEngine.findOne(hash, this._sectionContainer)
+      : SelectorEngine.findOne(hash)
     if (target) {
       documentScrollTo(target.offsetTop - this._getScrollPadding(), {
         duration: this._config.duration,
         easing: this._config.easing,
-        /*complete: () => {
-        },*/
+        complete: () => {
+          const isHeading = target.matches('h1, h2, h3, h4, h5, h6')
+          const needsTabIndex = !target.hasAttribute('tabindex')
+          if (needsTabIndex) {
+            target.setAttribute('tabindex', '-1')
+          }
+          target.focus({ preventScroll: true }) // preventScroll to avoid double scrolling
+          if (needsTabIndex && isHeading) {
+            // remove tabIndex for headings after 500ms
+            setTimeout(() => {
+              target.removeAttribute('tabindex')
+            }, 500)
+          }
+        },
       })
 
       if (history.pushState) {

package/src/js/plugins/select-autocomplete.js

@@ -6,30 +6,43 @@
  * --------------------------------------------------------------------------
  */
 
-import accessibleAutocomplete from 'accessible-autocomplete'
+import accessibleAutocomplete from './vendor/accessible-autocomplete'
 
 import BaseComponent from './base-component.js'
 
+import InputLabel from './input-label'
+
 const NAME = 'selectautocomplete'
 
 function onClassChange(element, callback) {
   const observer = new MutationObserver((mutations) => {
     mutations.forEach((mutation) => {
       if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
-        callback(mutation.target)
+        callback(mutation.oldValue, mutation.target)
       }
     })
   })
-  observer.observe(element, { attributes: true })
+  observer.observe(element, { attributes: true, attributeOldValue: true })
   return observer.disconnect
 }
 
 class SelectAutocomplete extends BaseComponent {
   constructor(element, config) {
     super(element)
-    this._hasFormControl = element.classList.contains('form-control')
-    this.element_original_id = this._element.id
-    this._config = config
+
+    this._config = config || {}
+    this._config.inputClasses = 'form-control'
+    this._config.showNoOptionsFound = true
+    this._config.hintClasses = 'app-hint'
+    this._config.autoselect = false
+    this._config.showAllValues = false
+    this._config.templates = undefined
+    this._config.confirmOnBlur = false
+    this._config.menuAttributes = {}
+    this._config.menuClasses = null
+
+    this._extraClasses = []
+
     if (!this._config.tAssistiveHint)
       this._config.tAssistiveHint = () =>
         'Quando i risultati del completamento automatico sono disponibili, usa le frecce su e giù per rivedere e Invio per selezionare. Utenti di dispositivi touch, esplora tramite tocco o con gesti di scorrimento'
@@ -39,7 +52,7 @@ class SelectAutocomplete extends BaseComponent {
     if (!this._config.tStatusNoResults) this._config.tStatusNoResults = () => 'Nessun risultato di ricerca'
     if (!this._config.tStatusSelectedOption)
       this._config.tStatusSelectedOption = (selectedOption, length, index) => `${selectedOption} ${index + 1} di ${length} è sottolineato`
-    if (!this._config.tStatusResults)
+    if (!this._config.tStatusResults) {
       this._config.tStatusResults = (length, contentSelectedOption) => {
         const words = {
           result: length === 1 ? 'risultato' : 'risultati',
@@ -49,7 +62,10 @@ class SelectAutocomplete extends BaseComponent {
 
         return `${length} ${words.result} ${words.is} ${words.available}. ${contentSelectedOption}`
       }
-    this._enhance()
+    }
+    if (typeof document !== 'undefined') {
+      this._enhance()
+    }
   }
 
   // Getters
@@ -60,20 +76,54 @@ class SelectAutocomplete extends BaseComponent {
 
   // Private
   _enhance() {
-    accessibleAutocomplete.enhanceSelectElement(Object.assign({}, { selectElement: this._element }, this._config))
+    const inputId = this._config.id
+    const originalConfirm = this._config.onConfirm
+
+    this._config.onConfirm = (value) => {
+      document.getElementById(inputId).value = value
+      document.getElementById(inputId).dispatchEvent(new Event('input'))
+      if (originalConfirm) {
+        originalConfirm(value)
+      }
+    }
+
+    accessibleAutocomplete(
+      Object.assign(
+        {},
+        {
+          element: this._element,
+          id: inputId,
+        },
+        this._config
+      )
+    )
     setTimeout(() => {
-      if (this._hasFormControl) {
-        if (typeof document === 'undefined') {
+      this._inputField = document.getElementById(inputId)
+      this._label = new InputLabel(this._inputField)
+      this._inputField.addEventListener('focus', () => {
+        this._extraClasses.forEach((cls) => {
+          this._inputField.classList.add(cls)
+        })
+        this._extraClasses = []
+      })
+      this._inputField.addEventListener('blur', () => {
+        this._extraClasses.forEach((cls) => {
+          this._inputField.classList.add(cls)
+        })
+        this._extraClasses = []
+      })
+
+      onClassChange(this._inputField, (oldClasses) => {
+        this._extraClasses = []
+        if (oldClasses === this._inputField.classList.value) {
           return
         }
-        const inputField = document.getElementById(this.element_original_id)
-        inputField.classList.add('form-control')
-        onClassChange(inputField, (node) => {
-          if (!node.classList.contains('form-control')) {
-            node.classList.add('form-control')
+        oldClasses.split(' ').forEach((cls) => {
+          if (!cls.startsWith('autocomplete')) {
+            this._extraClasses.push(cls)
           }
         })
-      }
+      })
     }, 100)
   }
 }

package/src/js/plugins/tooltip.js

@@ -226,6 +226,16 @@ class Tooltip extends BaseComponent {
       }
     }
 
+    document.addEventListener(
+      'keyup',
+      (event) => {
+        if (event.key === 'Escape') {
+          this.hide()
+        }
+      },
+      { once: true }
+    )
+
     const complete = () => {
       EventHandler.trigger(this._element, this.constructor.eventName(EVENT_SHOWN))