bootstrap-italia 2.1.1 → 2.2.0

package/src/js/plugins/header-sticky.js

@@ -1,8 +1,13 @@
 import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import { isVisible } from 'bootstrap/js/src/util'
 
+import Sticky from './sticky'
+
+import onDocumentScroll from './util/on-document-scroll'
+
 const CLASS_NAME_CLONED_HEADER = 'cloned-element'
 const CLASS_NAME_SHOW = 'show'
+const CLASS_NAME_ISTICKY = 'is-sticky'
 
 const SELECTOR_HEADER = '.it-header-sticky'
 const SELECTOR_TOGGLER = '.custom-navbar-toggler'
@@ -12,35 +17,69 @@ const SELECTOR_SEARCH_WRAPPER = '.it-search-wrapper'
 const SELECTOR_USER_WRAPPER = '.it-user-wrapper'
 const SELECTOR_CLONED = `.${CLASS_NAME_CLONED_HEADER}`
 
-const toggleClonedElement = (targetHeader, toAdd = true) => {
-  const isDesktop = !isVisible(SelectorEngine.findOne(SELECTOR_TOGGLER, targetHeader))
+// eslint-disable-next-line no-undef
+const dataSet = new Map()
 
-  if (isDesktop) {
-    const target = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, targetHeader)
+class HeaderSticky {
+  //HeaderSticky uses Sticky so it can't be a Bootstrap BaseComponent
+  constructor(element) {
+    if (dataSet.get(element)) {
+      return null
+    }
 
-    if (toAdd) {
-      const elBrand = SelectorEngine.findOne(SELECTOR_BRAND_WRAPPER, targetHeader)
-      const elSearch = SelectorEngine.findOne(SELECTOR_SEARCH_WRAPPER, targetHeader)
-      const elUser = SelectorEngine.findOne(SELECTOR_USER_WRAPPER, targetHeader)
+    this._element = element
+    this._elementObj = Sticky.getOrCreateInstance(element)
 
-      const clonedBrand = elBrand ? elBrand.cloneNode(true) : null
-      const clonedSearch = elSearch ? elSearch.cloneNode(true) : null
-      const clonedUser = elUser ? elUser.cloneNode(true) : null
+    dataSet.set(element, this._elementObj)
 
-      if (clonedBrand) {
-        target.insertBefore(clonedBrand, target.childNodes[0]).classList.add(CLASS_NAME_CLONED_HEADER)
-      }
-      if (clonedSearch) {
-        target.appendChild(clonedSearch).classList.add(CLASS_NAME_CLONED_HEADER)
-      }
-      if (clonedUser) {
-        target.appendChild(clonedUser).classList.add(CLASS_NAME_CLONED_HEADER)
-        target.appendChild(clonedUser).classList.remove(CLASS_NAME_SHOW)
+    this._bindEvents()
+
+    this._toggleClonedElement(this._element.classList.contains(CLASS_NAME_ISTICKY))
+  }
+
+  //Static
+
+  static getOrCreateInstance(element) {
+    return dataSet.get(element) || new this(element)
+  }
+
+  //Private
+
+  _bindEvents() {
+    this._element.addEventListener('on.bs.sticky', () => this._toggleClonedElement(true))
+    this._element.addEventListener('off.bs.sticky', () => this._toggleClonedElement(false))
+  }
+
+  _toggleClonedElement(toAdd = true) {
+    const isDesktop = !isVisible(SelectorEngine.findOne(SELECTOR_TOGGLER, this._element))
+
+    if (isDesktop) {
+      const target = SelectorEngine.findOne(SELECTOR_MENU_WRAPPER, this._element)
+
+      if (toAdd) {
+        const elBrand = SelectorEngine.findOne(SELECTOR_BRAND_WRAPPER, this._element)
+        const elSearch = SelectorEngine.findOne(SELECTOR_SEARCH_WRAPPER, this._element)
+        const elUser = SelectorEngine.findOne(SELECTOR_USER_WRAPPER, this._element)
+
+        const clonedBrand = elBrand ? elBrand.cloneNode(true) : null
+        const clonedSearch = elSearch ? elSearch.cloneNode(true) : null
+        const clonedUser = elUser ? elUser.cloneNode(true) : null
+
+        if (clonedBrand) {
+          target.insertBefore(clonedBrand, target.childNodes[0]).classList.add(CLASS_NAME_CLONED_HEADER)
+        }
+        if (clonedSearch) {
+          target.appendChild(clonedSearch).classList.add(CLASS_NAME_CLONED_HEADER)
+        }
+        if (clonedUser) {
+          target.appendChild(clonedUser).classList.add(CLASS_NAME_CLONED_HEADER)
+          target.appendChild(clonedUser).classList.remove(CLASS_NAME_SHOW)
+        }
+      } else {
+        SelectorEngine.find(SELECTOR_CLONED, this._element).forEach((item) => {
+          item.parentElement.removeChild(item)
+        })
       }
-    } else {
-      SelectorEngine.find(SELECTOR_CLONED, targetHeader).forEach((item) => {
-        item.parentElement.removeChild(item)
-      })
     }
   }
 
@@ -51,11 +90,17 @@ const toggleClonedElement = (targetHeader, toAdd = true) => {
   }*/
 }
 
-const init = (targetHeader) => {
-  targetHeader.addEventListener('on.bs.sticky', () => toggleClonedElement(targetHeader, true))
-  targetHeader.addEventListener('off.bs.sticky', () => toggleClonedElement(targetHeader, false))
-}
+/**
+ * ------------------------------------------------------------------------
+ * Data Api implementation
+ * ------------------------------------------------------------------------
+ */
 
-SelectorEngine.find(SELECTOR_HEADER).forEach((header) => {
-  init(header)
+onDocumentScroll(() => {
+  const stickies = SelectorEngine.find(SELECTOR_HEADER)
+  stickies.map((sticky) => {
+    HeaderSticky.getOrCreateInstance(sticky)
+  })
 })
+
+export default HeaderSticky

package/src/js/plugins/history-back.js

@@ -1,7 +1,7 @@
 import BaseComponent from 'bootstrap/js/src/base-component.js'
 
 import EventHandler from 'bootstrap/js/src/dom/event-handler'
-import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
+//import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 const NAME = 'historyback'
 const DATA_KEY = 'bs.historyback'
@@ -46,13 +46,19 @@ class HistoryBack extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
+/*const toggles = SelectorEngine.find(SELECTOR_TOGGLE)
 toggles.forEach((toggle) => {
   EventHandler.one(toggle, EVENT_CLICK_DATA_API, (evt) => {
     evt.preventDefault()
     const historyBack = HistoryBack.getOrCreateInstance(toggle)
     historyBack.back()
   })
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_TOGGLE, function (evt) {
+  evt.preventDefault()
+  const historyBack = HistoryBack.getOrCreateInstance(this)
+  historyBack.back()
 })
 
 export default HistoryBack

package/src/js/plugins/init.js

@@ -0,0 +1,14 @@
+import TrackFocus from './track-focus'
+
+import BOOTSTRAP_ITALIA_VERSION from '../version'
+
+const init = () => {
+  if (!window.BOOTSTRAP_ITALIA_VERSION) {
+    new TrackFocus()
+    window.BOOTSTRAP_ITALIA_VERSION = BOOTSTRAP_ITALIA_VERSION
+  }
+}
+
+export default init
+
+init()

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

@@ -25,6 +25,10 @@ class InputLabel {
     return NAME
   }
 
+  static getInputFromLabel = (labelElement) => {
+    return document.querySelector('#' + labelElement.getAttribute('for'))
+  }
+
   // Public
 
   // Private

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

@@ -12,18 +12,21 @@ const DATA_API_KEY = '.data-api'
 
 const EVENT_CLICK = `click${EVENT_KEY}`
 const EVENT_CHANGE = `change${EVENT_KEY}`
-const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
+
+//const EVENT_FOCUS_DATA_API = `focus${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_ADAPTIVE = 'input-number-adaptive'
 const CLASS_NAME_PERCENTAGE = 'input-number-percentage'
 const CLASS_NAME_CURRENCY = 'input-number-currency'
-const CLASS_NAME_INCREMENT = 'input-number-add'
+//const CLASS_NAME_INCREMENT = 'input-number-add'
 const CLASS_NAME_DECREMENT = 'input-number-sub'
 
 const SELECTOR_WRAPPER = '.input-number'
 const SELECTOR_INPUT = 'input[data-bs-input][type="number"]'
-const SELECTOR_BTN = 'button'
+const SELECTOR_BTN = 'button[class^="input-number-"]'
 
 class InputNumber extends BaseComponent {
   constructor(element) {
@@ -129,14 +132,8 @@ class InputNumber extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const inputs = SelectorEngine.find(SELECTOR_INPUT)
+/*const inputs = SelectorEngine.find(SELECTOR_INPUT)
 inputs.forEach((input) => {
-  /*const prevInst = BaseComponent.getInstance(input)
-  if (prevInst.NAME === 'input') {
-    prevInst.dispose()
-  }
-  InputNumber.getOrCreateInstance(input)*/
-
   EventHandler.one(input, EVENT_FOCUS_DATA_API, (evt) => {
     evt.preventDefault()
     InputNumber.getOrCreateInstance(input)
@@ -162,6 +159,34 @@ inputsButtons.forEach((button) => {
       }
     }
   })
+})*/
+
+const createInput = (element) => {
+  if (element && element.matches(SELECTOR_INPUT) && element.parentNode.querySelector(SELECTOR_BTN)) {
+    return InputNumber.getOrCreateInstance(element)
+  }
+  return null
+}
+
+EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_INPUT + ', label', function () {
+  const target = InputLabel.getInputFromLabel(this) || this
+  createInput(target)
+})
+EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_INPUT + ', 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, function () {
+  const wrapper = this.closest(SELECTOR_WRAPPER)
+  if (wrapper) {
+    const input = SelectorEngine.findOne(SELECTOR_INPUT, wrapper)
+    if (input) {
+      InputNumber.getOrCreateInstance(input)
+    }
+  }
 })
 
 export default InputNumber

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

@@ -9,7 +9,7 @@ import InputLabel from './input-label'
 const NAME = 'inputpassword'
 const DATA_KEY = 'bs.inputpassword'
 const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_API_KEY = '.data-api'
 
 const Default = {
   shortPass: 'Password molto debole',
@@ -29,11 +29,21 @@ const EVENT_KEYPRESS = `keypress${EVENT_KEY}`
 const EVENT_SCORE = `score${EVENT_KEY}`
 const EVENT_TEXT = `text${EVENT_KEY}`
 
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
+
 const CLASS_NAME_PASSWORD = 'input-password'
-const CLASS_NAME_METER = 'input-password-strength-meter'
+//const CLASS_NAME_METER = 'input-password-strength-meter'
+const CLASS_NAME_SHOW = 'show'
 
 const SELECTOR_PASSWORD = 'input[data-bs-input][type="password"]'
 const SELECTOR_BTN_SHOW_PWD = '.password-icon'
+const SELECTOR_METER = '.password-strength-meter'
+const SELECTOR_METER_GRAYBAR = '.password-meter'
+const SELECTOR_METER_COLBAR = '.progress-bar'
+const SELECTOR_CAPS = '.password-caps'
+const SELECTOR_TEXT = '.form-text'
 
 class InputPassword extends BaseComponent {
   constructor(element, config) {
@@ -41,7 +51,7 @@ class InputPassword extends BaseComponent {
 
     this._config = this._getConfig(config)
     this._isCustom = this._element.classList.contains(CLASS_NAME_PASSWORD)
-    this._hasMeter = this._element.classList.contains(CLASS_NAME_METER)
+    this._meter = this._element.parentNode.querySelector(SELECTOR_METER)
     this._isShiftPressed = false
     this._isCapsOn = false
 
@@ -51,6 +61,8 @@ class InputPassword extends BaseComponent {
     this._capsElement = null
     this._showPwdElement = null
 
+    this._text = {}
+
     this._label = new InputLabel(element)
 
     this._init()
@@ -76,8 +88,8 @@ class InputPassword extends BaseComponent {
   }
 
   _init() {
-    if (this._hasMeter) {
-      this._grayBarElement = document.createElement('div')
+    if (this._meter) {
+      /*this._grayBarElement = document.createElement('div')
       this._grayBarElement.classList.add('password-meter', 'progress', 'rounded-0', 'position-absolute')
       this._grayBarElement.innerHTML = `<div class="row position-absolute w-100 m-0">
           <div class="col-3 border-start border-end border-white"></div>
@@ -107,22 +119,32 @@ class InputPassword extends BaseComponent {
 
       wrapper.appendChild(this._grayBarElement)
 
-      this._element.parentNode.insertBefore(wrapper, this._element.nextSibling)
+      this._element.parentNode.insertBefore(wrapper, this._element.nextSibling)*/
+
+      this._grayBarElement = this._meter.querySelector(SELECTOR_METER_GRAYBAR)
+      this._colorBarElement = this._meter.querySelector(SELECTOR_METER_COLBAR)
+      this._textElement = this._meter.querySelector(SELECTOR_TEXT)
+
+      if (this._textElement) {
+        this._config = Object.assign({}, this._config, { ...Manipulator.getDataAttributes(this._textElement) }, { enterPass: this._textElement.innerText })
+      }
     }
     if (this._isCustom) {
-      this._capsElement = document.createElement('small')
+      /*this._capsElement = document.createElement('small')
       this._capsElement.style.display = 'none'
       this._capsElement.classList.add('password-caps', 'form-text', 'text-warning', 'position-absolute', 'bg-white', 'w-100')
       this._capsElement.innerHTML = this._config.alertCaps
 
-      this._element.parentNode.appendChild(this._capsElement)
+      this._element.parentNode.appendChild(this._capsElement)*/
+
+      this._capsElement = this._element.parentNode.querySelector(SELECTOR_CAPS)
     }
 
     this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode)
   }
 
   _bindEvents() {
-    if (this._hasMeter) {
+    if (this._meter) {
       EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword())
     }
 
@@ -163,10 +185,14 @@ class InputPassword extends BaseComponent {
   }
 
   _showCapsMsg() {
-    this._capsElement.style.display = 'block'
+    if (this._capsElement) {
+      this._capsElement.classList.add(CLASS_NAME_SHOW)
+    }
   }
   _hideCapsMsg() {
-    this._capsElement.style.display = 'none'
+    if (this._capsElement) {
+      this._capsElement.classList.remove(CLASS_NAME_SHOW)
+    }
   }
 
   _toggleShowPassword() {
@@ -194,7 +220,7 @@ class InputPassword extends BaseComponent {
 
     EventHandler.trigger(this._element, EVENT_SCORE)
 
-    if (this._config.showText) {
+    if (this._textElement) {
       let text = this._scoreText(score)
       if (this._element.value.length === 0 && score <= 0) {
         text = this._config.enterPass
@@ -373,9 +399,34 @@ class InputPassword extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const inputs = SelectorEngine.find(SELECTOR_PASSWORD)
+/*const inputs = SelectorEngine.find(SELECTOR_PASSWORD)
 inputs.forEach((input) => {
   InputPassword.getOrCreateInstance(input)
+})*/
+
+const createInput = (element) => {
+  if (element && element.matches(SELECTOR_PASSWORD)) {
+    return InputPassword.getOrCreateInstance(element)
+  }
+  return null
+}
+
+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

@@ -2,7 +2,7 @@
 
 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 SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 
 import InputLabel from './input-label'
 
@@ -17,6 +17,7 @@ const Default = {
 
 const EVENT_KEYUP = `keyup${EVENT_KEY}`
 const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
 
 const CLASS_NAME_SHOW = 'autocomplete-list-show'
 const CLASS_NAME_AUTOCOMPLETE = 'autocomplete'
@@ -121,12 +122,31 @@ class InputSearch extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const inputs = SelectorEngine.find(SELECTOR_SEARCH)
+/*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)
+  }
+  return null
+}
+
+EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, SELECTOR_SEARCH + ', label', function () {
+  const target = InputLabel.getInputFromLabel(this) || this
+  createInput(target)
+})
+EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_SEARCH + ', label', function () {
+  const target = InputLabel.getInputFromLabel(this) || this
+  const element = createInput(target)
+  if (element && element._label) {
+    element._label._labelOut()
+  }
 })
 
 export default InputSearch

package/src/js/plugins/input.js

@@ -8,9 +8,10 @@ import InputLabel from './input-label'
 const NAME = 'input'
 const DATA_KEY = 'bs.input'
 const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_API_KEY = '.data-api'
 
-//const SELECTOR_INPUT = 'input[data-bs-input]'
+const EVENT_MOUSEDOWN_DATA_API = `mousedown${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 
 const EVENT_CHANGE = `change${EVENT_KEY}`
 
@@ -66,13 +67,14 @@ class Input extends BaseComponent {
  */
 const excludes = [
   'select',
-  'input[data-bs-input][type="number"]',
+  //'input[data-bs-input][type="number"]',
   'input[data-bs-input][type="password"]',
+  'input.input-password[data-bs-input]',
   'input[data-bs-autocomplete][type="search"]',
   'input[type="time"]',
 ]
 
-const inputs = SelectorEngine.find('input, textarea').filter((input) => {
+/*const inputs = SelectorEngine.find('input, textarea').filter((input) => {
   let result = true
   excludes.forEach((selector) => {
     if (input.matches(selector)) {
@@ -83,6 +85,27 @@ const inputs = SelectorEngine.find('input, textarea').filter((input) => {
 })
 inputs.forEach((input) => {
   Input.getOrCreateInstance(input)
+})*/
+
+const createInput = (element) => {
+  const toExclude = !!excludes.find((selector) => element.matches(selector))
+  const isInputNumber = !!(element.getAttribute('type') === 'number' && element.parentNode.querySelector('button[class^="input-number-"]')) //check if it's a InputNumber component
+  if (!toExclude && !isInputNumber) {
+    return Input.getOrCreateInstance(element)
+  }
+  return null
+}
+
+EventHandler.on(document, EVENT_MOUSEDOWN_DATA_API, 'input, textarea, label', function () {
+  const target = InputLabel.getInputFromLabel(this) || this
+  createInput(target)
+})
+EventHandler.on(document, EVENT_KEYUP_DATA_API, 'input, textarea, label', function () {
+  const target = InputLabel.getInputFromLabel(this) || this
+  const element = createInput(target)
+  if (element && element._label) {
+    element._label._labelOut()
+  }
 })
 
 export default Input

package/src/js/plugins/navscroll.js

@@ -242,12 +242,11 @@ class NavScroll extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const dataApiCb = onDocumentScroll(() => {
+onDocumentScroll(() => {
   const navs = SelectorEngine.find(SELECTOR_NAVSCROLL)
-  navs.forEach((nav) => {
+  navs.map((nav) => {
     NavScroll.getOrCreateInstance(nav)
   })
-  dataApiCb.dispose()
 })
 
 export default NavScroll

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

@@ -1,4 +1,3 @@
-import 'accessible-autocomplete/dist/accessible-autocomplete.min.css'
 import accessibleAutocomplete from 'accessible-autocomplete'
 
 import BaseComponent from 'bootstrap/js/src/base-component.js'

package/src/js/plugins/sticky.js

@@ -243,12 +243,11 @@ class Sticky extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-const dataApiCb = onDocumentScroll(() => {
+onDocumentScroll(() => {
   const stickies = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
-  stickies.forEach((sticky) => {
+  stickies.map((sticky) => {
     Sticky.getOrCreateInstance(sticky)
   })
-  dataApiCb.dispose()
 })
 
 export default Sticky

package/src/js/plugins/transfer.js

@@ -15,8 +15,10 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 const NAME = 'transfer'
 const DATA_KEY = 'bs.transfer'
 const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_API_KEY = '.data-api'
 
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
+const EVENT_KEYUP_DATA_API = `keyup${EVENT_KEY}${DATA_API_KEY}`
 //const EVENT_SCROLL = `scroll${EVENT_KEY}`
 const EVENT_CLICK = `click${EVENT_KEY}`
 
@@ -258,8 +260,15 @@ class Transfer extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_BLOCK).forEach((block) => {
+/*SelectorEngine.find(SELECTOR_BLOCK).forEach((block) => {
   Transfer.getOrCreateInstance(block)
+})*/
+
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_BLOCK + ' .form-check label', function () {
+  Transfer.getOrCreateInstance(this.closest(SELECTOR_BLOCK))
+})
+EventHandler.on(document, EVENT_KEYUP_DATA_API, SELECTOR_BLOCK + ' .form-check label', function () {
+  Transfer.getOrCreateInstance(this.closest(SELECTOR_BLOCK))
 })
 
 export default Transfer

package/src/js/plugins/upload-dragdrop.js

@@ -6,9 +6,11 @@ import SelectorEngine from 'bootstrap/js/src/dom/selector-engine'
 import ProgressDonut from './progress-donut'
 
 const NAME = 'upload'
-//const DATA_KEY = 'bs.upload'
-//const EVENT_KEY = `.${DATA_KEY}`
-//const DATA_API_KEY = '.data-api'
+const DATA_KEY = 'bs.upload'
+const EVENT_KEY = `.${DATA_KEY}`
+const DATA_API_KEY = '.data-api'
+
+const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 
 const EVENT_DRAG = `drag`
 const EVENT_DRAG_START = `dragstart`
@@ -120,8 +122,23 @@ class UploadDragDrop extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-SelectorEngine.find(SELECTOR_FORM).forEach((form) => {
+/*SelectorEngine.find(SELECTOR_FORM).forEach((form) => {
   UploadDragDrop.getOrCreateInstance(form)
+})*/
+
+const createInput = (element) => {
+  let found = element.matches && element.matches(SELECTOR_FORM) ? element : element.closest ? element.closest(SELECTOR_FORM) : null
+  if (found) {
+    UploadDragDrop.getOrCreateInstance(found)
+  }
+  return null
+}
+
+document.addEventListener('dragenter', function (evt) {
+  createInput(evt.target)
+})
+EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM + ' label', function () {
+  createInput(this)
 })
 
 export default UploadDragDrop