bootstrap-italia 2.9.2 → 2.11.0

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

@@ -3,7 +3,6 @@ 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'
 
-//import Input from './input'
 import InputLabel from './input-label'
 
 const NAME = 'inputpassword'
@@ -12,38 +11,45 @@ const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
 
 const Default = {
-  shortPass: 'Password molto debole',
-  badPass: 'Password debole',
-  goodPass: 'Password sicura',
-  strongPass: 'Password molto sicura',
-  enterPass: 'Inserisci almeno 8 caratteri e una lettera maiuscola',
-  alertCaps: 'CAPS LOCK inserito',
-  showText: true,
-  minimumLength: 4,
+  shortPass: 'Password troppo breve',
+  badPass: 'Password debole.',
+  goodPass: 'Password abbastanza sicura.',
+  strongPass: 'Password sicura.',
+  minimumLength: 8,
+  suggestionsLabel: 'Suggerimenti per una buona password:',
+  suggestionFollowed: 'suggerimenti seguito',
+  suggestionFollowedPlural: 'suggerimenti seguiti',
+  suggestionOf: 'di',
+  suggestionMetLabel: 'Soddisfatto: ',
+  suggestionMetIconPath: `
+    M9.6 16.9 4 11.4l.8-.7 4.8 4.8 8.5-8.4.7.7-9.2 9.1z
+  `,
+  suggestionLength: 'Almeno {minLength} caratteri.',
+  suggestionUppercase: 'Una o più maiuscole.',
+  suggestionLowercase: 'Una o più minuscole.',
+  suggestionNumber: 'Uno o più numeri.',
+  suggestionSpecial: 'Uno o più caratteri speciali.',
 }
 
 const EVENT_CLICK = `click${EVENT_KEY}`
 const EVENT_KEYUP = `keyup${EVENT_KEY}`
-const EVENT_KEYDOWN = `keydown${EVENT_KEY}`
-const EVENT_KEYPRESS = `keypress${EVENT_KEY}`
 const EVENT_SCORE = `score${EVENT_KEY}`
 const EVENT_TEXT = `text${EVENT_KEY}`
+const EVENT_SUGGS = `suggs${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_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'
+const SELECTOR_METER_TEXT = '.strength-meter-info'
+const SELECTOR_METER_SUGGS = '.strenght-meter-suggestions'
 
 class InputPassword extends BaseComponent {
   constructor(element, config) {
@@ -52,31 +58,54 @@ class InputPassword extends BaseComponent {
     this._config = this._getConfig(config)
     this._isCustom = this._element.classList.contains(CLASS_NAME_PASSWORD)
     this._meter = this._element.parentNode.querySelector(SELECTOR_METER)
-    this._isShiftPressed = false
-    this._isCapsOn = false
 
     this._grayBarElement = null
     this._colorBarElement = null
     this._textElement = null
-    this._capsElement = null
+    this._suggsElement = null
     this._showPwdElement = null
 
     this._text = {}
 
     this._label = new InputLabel(element)
 
+    this._suggestions = [
+      {
+        key: 'length',
+        text: (config) => config.suggestionLength.replace('{minLength}', config.minimumLength.toString()),
+        test: (password, config) => password.length >= config.minimumLength,
+      },
+      {
+        key: 'uppercase',
+        text: (config) => config.suggestionUppercase,
+        test: (password) => /[A-Z]/.test(password),
+      },
+      {
+        key: 'lowercase',
+        text: (config) => config.suggestionLowercase,
+        test: (password) => /[a-z]/.test(password),
+      },
+      {
+        key: 'number',
+        text: (config) => config.suggestionNumber,
+        test: (password) => /[0-9]/.test(password),
+      },
+      {
+        key: 'special',
+        text: (config) => config.suggestionSpecial,
+        test: (password) => /[^A-Za-z0-9]/.test(password),
+      },
+    ]
+
     this._init()
     this._bindEvents()
   }
 
   // Getters
-
   static get NAME() {
     return NAME
   }
 
-  // Public
-
   // Private
   _getConfig(config) {
     config = {
@@ -88,118 +117,174 @@ class InputPassword extends BaseComponent {
   }
 
   _init() {
-    if (this._meter) {
-      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 = this._element.parentNode.querySelector(SELECTOR_CAPS)
+      this._handleAutofill()
+      this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode)
+      if (this._meter) {
+        this._grayBarElement = this._meter.querySelector(SELECTOR_METER_GRAYBAR)
+        this._colorBarElement = this._meter.querySelector(SELECTOR_METER_COLBAR)
+        this._textElement = this._meter.querySelector(SELECTOR_METER_TEXT)
+        this._suggsElement = this._meter.querySelector(SELECTOR_METER_SUGGS)
+        if (this._textElement) {
+          this._config = Object.assign({}, this._config, { ...Manipulator.getDataAttributes(this._textElement) })
+        }
+        if (this._suggsElement) {
+          this._createsuggestionsList()
+        }
+      }
     }
-
-    this._showPwdElement = SelectorEngine.findOne(SELECTOR_BTN_SHOW_PWD, this._element.parentNode)
   }
 
   _bindEvents() {
-    if (this._meter) {
-      EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword())
-    }
-
     if (this._isCustom) {
-      EventHandler.on(this._element, EVENT_KEYDOWN, (evt) => {
-        if (evt.key === 'Shift') {
-          this._isShiftPressed = true
-        }
-      })
-      EventHandler.on(this._element, EVENT_KEYUP, (evt) => {
-        if (evt.key === 'Shift') {
-          this._isShiftPressed = false
-        }
-        if (evt.key === 'CapsLock') {
-          this._isCapsOn = !this._isCapsOn
-          if (this._isCapsOn) {
-            this._showCapsMsg()
-          } else {
-            this._hideCapsMsg()
-          }
-        }
-      })
-      EventHandler.on(this._element, EVENT_KEYPRESS, (evt) => {
-        const matches = evt.key.match(/[A-Z]$/) || []
-        if (matches.length > 0 && !this._isShiftPressed) {
-          this._isCapsOn = true
-          this._showCapsMsg()
-        } else if (this._isCapsOn) {
-          this._isCapsOn = false
-          this._hideCapsMsg()
-        }
-      })
-    }
-
-    if (this._showPwdElement) {
-      EventHandler.on(this._showPwdElement, EVENT_CLICK, () => this._toggleShowPassword())
+      if (this._showPwdElement) {
+        EventHandler.on(this._showPwdElement, EVENT_CLICK, () => this._toggleShowPassword())
+      }
+      if (this._meter) {
+        EventHandler.on(this._element, EVENT_KEYUP, () => this._checkPassword())
+        EventHandler.on(this._element, 'input', () => this._checkPassword())
+      }
     }
   }
 
-  _showCapsMsg() {
-    if (this._capsElement) {
-      this._capsElement.classList.add(CLASS_NAME_SHOW)
-    }
-  }
-  _hideCapsMsg() {
-    if (this._capsElement) {
-      this._capsElement.classList.remove(CLASS_NAME_SHOW)
+  _handleAutofill() {
+    const checkAndActivate = () => {
+      if (this._element.value !== '') {
+        this._label._labelOut()
+        this._checkPassword()
+      }
     }
+    checkAndActivate()
+    setTimeout(checkAndActivate, 100)
+    EventHandler.on(this._element, 'animationstart', (event) => {
+      if (event.animationName === 'onAutoFillStart') {
+        checkAndActivate()
+      }
+    })
   }
 
   _toggleShowPassword() {
     const toShow = this._element.getAttribute('type') === 'password'
     SelectorEngine.find('[class^="password-icon"]', this._showPwdElement).forEach((icon) => icon.classList.toggle('d-none'))
-    if (toShow) {
-      this._element.setAttribute('type', 'text')
-    } else {
-      this._element.setAttribute('type', 'password')
-    }
+    this._element.setAttribute('type', toShow ? 'text' : 'password')
+    this._showPwdElement.setAttribute('aria-checked', toShow.toString())
   }
 
   _checkPassword() {
-    const score = this._calculateScore(this._element.value)
-    const perc = score < 0 ? 0 : score
-
-    this._colorBarElement.classList.forEach((className) => {
-      if (className.match(/(^|\s)bg-\S+/g)) {
-        this._colorBarElement.classList.remove(className)
-      }
-    })
-    this._colorBarElement.classList.add('bg-' + this._scoreColor(score))
-    this._colorBarElement.style.width = perc + '%'
-    this._colorBarElement.setAttribute('aria-valuenow', perc)
+    const password = this._element.value
+    const score = this._calculateScore(password)
+    this._updateMeter(score)
+    this._updateText(score, password)
+    this._updateSuggestions(password)
+  }
 
+  _updateMeter(score) {
+    const perc = score < 0 ? 0 : score
+    if (this._colorBarElement) {
+      this._colorBarElement.classList.forEach((className) => {
+        if (className.match(/(^|\s)bg-\S+/g)) {
+          this._colorBarElement.classList.remove(className)
+        }
+      })
+      this._colorBarElement.classList.add(`bg-${this._scoreColor(score)}`)
+      this._colorBarElement.style.width = `${perc}%`
+      this._colorBarElement.setAttribute('aria-valuenow', perc)
+    }
     EventHandler.trigger(this._element, EVENT_SCORE)
+  }
 
+  _updateText(score, password) {
     if (this._textElement) {
       let text = this._scoreText(score)
-      if (this._element.value.length === 0 && score <= 0) {
-        text = this._config.enterPass
+      if (this._suggsElement) {
+        const { completedCount, totalCount } = this._getCompletedSuggestions(password)
+        const suggestionText = completedCount === 1 ? this._config.suggestionFollowed : this._config.suggestionFollowedPlural
+        text += ` ${completedCount} ${this._config.suggestionOf} ${totalCount} ${suggestionText}.`
       }
-
-      if (this._textElement.innerHTML.search(text) === -1) {
-        this._textElement.innerHTML = text
+      if (this._textElement.textContent !== text) {
+        this._textElement.textContent = text
         this._textElement.classList.forEach((className) => {
           if (className.match(/(^|\s)text-\S+/g)) {
             this._textElement.classList.remove(className)
           }
         })
-        this._textElement.classList.add('text-' + this._scoreColor(score))
+        this._textElement.classList.add(`text-${this._scoreColor(score)}`)
         EventHandler.trigger(this._element, EVENT_TEXT)
       }
     }
   }
 
+  _updateSuggestions(password) {
+    if (this._suggsElement) {
+      this._updateSuggestionsList(password)
+      EventHandler.trigger(this._element, EVENT_SUGGS)
+    }
+  }
+
+  _getCompletedSuggestions(password) {
+    let completedCount = 0
+    const totalCount = this._suggestions.length
+    this._suggestions.forEach((sugg) => {
+      if (sugg.test(password, this._config)) completedCount++
+    })
+    return { completedCount, totalCount }
+  }
+
+  _createsuggestionsList() {
+    if (this._suggsElement.querySelector('.password-suggestions')) {
+      return
+    }
+    const suggLabel = document.createElement('label')
+    suggLabel.className = 'visually-hidden'
+    suggLabel.htmlFor = 'suggestions'
+    suggLabel.textContent = Default.suggestionsLabel
+    const suggContainer = document.createElement('div')
+    suggContainer.id = 'suggestions'
+    suggContainer.className = 'password-suggestions'
+
+    this._suggestions.forEach((sugg) => {
+      const suggElement = document.createElement('div')
+      suggElement.className = 'suggestion'
+      suggElement.dataset.suggestion = sugg.key
+      const checkIcon = this._createIconCheck()
+      const textSpan = document.createElement('span')
+      textSpan.textContent = sugg.text(this._config)
+      suggElement.appendChild(checkIcon)
+      suggElement.appendChild(textSpan)
+      suggContainer.appendChild(suggElement)
+    })
+
+    this._suggsElement.appendChild(suggLabel)
+    this._suggsElement.appendChild(suggContainer)
+  }
+
+  _createIconCheck() {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+    svg.setAttribute('class', `icon icon-xs me-1 d-none`)
+    svg.setAttribute('aria-label', this._config.suggestionMetLabel)
+    svg.setAttribute('viewBox', '0 0 24 24')
+    svg.style.width = '1em'
+    svg.style.height = '1em'
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+    path.setAttribute('d', this._config.suggestionMetIconPath.trim())
+    svg.appendChild(path)
+    return svg
+  }
+
+  _updateSuggestionsList(password) {
+    if (!this._suggsElement) return
+    this._suggestions.forEach((sugg) => {
+      const suggElement = this._suggsElement.querySelector(`[data-suggestion="${sugg.key}"]`)
+      if (suggElement) {
+        const isMet = sugg.test(password, this._config)
+        const checkIcon = suggElement.querySelector('.icon')
+        if (checkIcon) {
+          checkIcon.classList.toggle('d-none', !isMet)
+        }
+      }
+    })
+  }
+
   /**
    * Returns strings based on the score given.
    *
@@ -211,10 +296,14 @@ class InputPassword extends BaseComponent {
       return this._config.shortPass
     }
 
+    if (score === -2) {
+      return ''
+    }
+
     score = score < 0 ? 0 : score
 
     if (score < 26) {
-      return this._config.shortPass
+      return this._config.badPass
     }
     if (score < 51) {
       return this._config.badPass
@@ -227,16 +316,7 @@ class InputPassword extends BaseComponent {
   }
 
   _scoreColor(score) {
-    if (score === -1) {
-      return 'danger'
-    }
-    if (score === -2) {
-      return 'muted'
-    }
-
-    score = score < 0 ? 0 : score
-
-    if (score < 26) {
+    if (score === -1 || score === -2 || score < 26) {
       return 'danger'
     }
     if (score < 51) {
@@ -245,7 +325,6 @@ class InputPassword extends BaseComponent {
     if (score < 76) {
       return 'success'
     }
-
     return 'success'
   }
 
@@ -281,7 +360,7 @@ class InputPassword extends BaseComponent {
       score += 5
     }
 
-    // password has at least 2 sybols
+    // password has at least 2 symbols
     var symbols = '.*[!,@,#,$,%,^,&,*,?,_,~]'
     symbols = new RegExp('(' + symbols + symbols + ')')
     if (password.match(symbols)) {
@@ -360,11 +439,6 @@ class InputPassword extends BaseComponent {
  * ------------------------------------------------------------------------
  */
 
-/*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)
@@ -372,6 +446,19 @@ const createInput = (element) => {
   return null
 }
 
+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)

package/src/js/version.js

@@ -1,5 +1,5 @@
 // bootstrap italia version variable
 // useful to check for the current version
 // eslint-disable-next-line no-unused-vars
-const BOOTSTRAP_ITALIA_VERSION = '2.9.2'
+const BOOTSTRAP_ITALIA_VERSION = '2.11.0'
 export default BOOTSTRAP_ITALIA_VERSION

package/src/scss/_variables.scss

@@ -268,7 +268,7 @@ $link-list-divider-height: 1px;
 $link-list-divider-distance: 8px;
 $link-list-h-pad: 24px;
 $link-list-v-pad: 0.25em;
-$link-list-paragraph-size: 0.75rem;
+$link-list-paragraph-size: 0.875rem;
 $link-list-left-icon-space: 8px;
 $link-list-avatar-radius: 50px;
 $link-list-avatar-margin: 8px;
@@ -551,25 +551,24 @@ $crs-landcape-bottom: 5px;
 // Gridlist **************
 $grid-item-df-proportion: 66.81222707423581%;
 $grid-item-df-double-proportion: 33.4061135371179%;
-$grid-item-text-size: 1rem;
-$grid-item-text-size-mob: 0.8rem;
+$grid-item-text-size: 0.75rem;
 $grid-item-text-color: $neutral-1 !default; // Missing in the UI kit - need more attention
 $grid-item-text-overlay-bg: $neutral-1-a10 !default; // Missing in the UI kit - need more attention
 $grid-list-default-gap: 2px;
 $grid-list-text-gap: $v-gap;
 $grid-item-sm-col: 50%;
 $grid-item-lg-col: 33.333333%;
-$grid-item-icon-mob-size: 24px;
-$grid-item-icon-size-desk: 32px;
+$grid-item-icon-size: 24px;
+$grid-item-overlay: hsla(210%, 54%, 20, 0.85);
 
 // list
 $list-font-size: 1rem;
 $list-text-padding: $v-gap * 2 0 $v-gap * 2 0;
 $list-border-color: $gray-border !default; // UI kit
 $list-metadata-color: $color-text-muted !default; // Missing in the UI kit but token applicable
-$list-metadata-size: 12px;
+$list-metadata-size: 0.75rem;
 $list-metadata-space: 0.5px;
-$list-sub-size: 14px;
+$list-sub-size: 0.875rem;
 $list-sub-color: $color-text-muted !default; // UI kit
 
 //chips

package/src/scss/custom/_figcaption.scss

@@ -1,3 +1,3 @@
 .figure-caption {
-  font-size: 90%;
+  font-size: 0.75rem;
 }

package/src/scss/custom/_form-password.scss

@@ -12,7 +12,7 @@
 }
 .password-meter {
   height: 4px;
-  left: 10px;
+  left: 7px;
   bottom: -6px;
   width: 100%;
   max-width: 180px;

package/src/scss/custom/_forms.scss

@@ -129,6 +129,7 @@ textarea {
   background-position: center right !important;
   background-repeat: no-repeat !important;
   background-size: 45px 45% !important;
+  border-radius: 0 !important;
   min-height: 2.5rem;
   &:disabled,
   &[readonly] {

package/src/scss/custom/_gridlist.scss

@@ -1,41 +1,47 @@
 //mobile
 .it-grid-item-wrapper {
   position: relative;
+
   // img default proportion
   .img-responsive-wrapper {
     border-radius: $border-radius;
+
     .img-responsive {
       padding-bottom: $grid-item-df-proportion;
     }
   }
+
   // text
   .it-griditem-text-wrapper {
     display: flex;
     justify-content: space-between;
-    padding: $v-gap;
     align-items: center;
+
     .it-griditem-text {
-      font-size: $grid-item-text-size-mob;
-      color: $grid-item-text-color;
-      font-weight: 600;
+      font-size: $grid-item-text-size;
+      font-weight: $font-weight-semibold;
     }
+
     .icon {
       flex-shrink: 0;
       position: relative;
-      right: -$v-gap;
       fill: $primary;
-      width: $grid-item-icon-mob-size;
-      height: $grid-item-icon-mob-size;
+      width: $grid-item-icon-size;
+      height: $grid-item-icon-size;
     }
   }
+
   // text overlay
   &.it-grid-item-overlay {
     position: relative;
+
     .img-responsive-wrapper {
+      position: relative;
+
       &:after {
         content: '';
         display: block;
-        background: rgba(0, 0, 0, 0.5);
+        background: $grid-item-overlay;
         position: absolute;
         left: 0;
         top: 0;
@@ -43,6 +49,7 @@
         height: 100%;
       }
     }
+
     .it-griditem-text-wrapper {
       position: absolute;
       left: 0;
@@ -59,7 +66,18 @@
         fill: #fff;
       }
     }
+
+    .figure-img {
+      margin-bottom: 0;
+    }
+
+    .figure-caption {
+      position: absolute;
+      z-index: 10;
+      color: #fff;
+    }
   }
+
   a {
     display: block;
     text-decoration: none;
@@ -85,24 +103,29 @@
 .it-grid-list-wrapper {
   padding-left: $grid-list-default-gap * 2;
   padding-right: $grid-list-default-gap * 2;
+
   // grid changes
   div[class^='col-'] {
     padding: 0 $grid-list-default-gap $grid-list-default-gap * 2 $grid-list-default-gap;
   }
+
   .grid-row {
     display: flex;
     margin-left: -$grid-list-default-gap;
     margin-right: -$grid-list-default-gap;
     flex-wrap: wrap;
   }
+
   // grid with label
   &.it-image-label-grid {
     padding-left: $grid-list-text-gap * 2;
     padding-right: $grid-list-text-gap * 2;
+
     // grid changes
     div[class^='col-'] {
       padding: 0 $grid-list-text-gap $grid-list-text-gap * 2 $grid-list-text-gap;
     }
+
     .grid-row {
       margin-left: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2));
       margin-right: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2));
@@ -117,12 +140,14 @@
       .img-responsive {
         padding-bottom: initial;
         height: auto;
+
         .img-wrapper {
           position: inherit;
           left: initial;
           right: initial;
           width: initial;
           height: initial;
+
           img {
             height: auto;
             object-fit: initial;
@@ -139,20 +164,11 @@
     &.it-grid-item-overlay {
       .it-griditem-text-wrapper {
         padding: $v-gap * 2 $v-gap * 3;
+
         .it-griditem-text {
           font-size: $grid-item-text-size;
         }
       }
     }
-    // text
-    .it-griditem-text-wrapper {
-      .it-griditem-text {
-        font-size: $grid-item-text-size;
-      }
-      .icon {
-        width: $grid-item-icon-size-desk;
-        height: $grid-item-icon-size-desk;
-      }
-    }
   }
 }