bootstrap-italia 2.9.1 → 2.10.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.1'
+const BOOTSTRAP_ITALIA_VERSION = '2.10.0'
 export default BOOTSTRAP_ITALIA_VERSION

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

@@ -103,19 +103,22 @@ input[type='url'],
 textarea {
   border: none;
   border-bottom: 1px solid $input-border;
-  border-radius: 0;
   padding: $input-spacing-y $input-spacing-x;
   outline: 0;
-  width: 100%;
   box-shadow: none;
   transition: none;
   -webkit-appearance: none;
-  -webkit-border-radius: 0;
   &::placeholder {
     color: $input-color-placeholder;
   }
 }
 
+input[type='date'],
+input[type='datetime-local'],
+input[type='time'] {
+  display: flex;
+}
+
 textarea {
   border: 1px solid $input-border;
   height: auto;
@@ -142,12 +145,12 @@ textarea {
   }
   .was-validated &:valid,
   &.is-valid {
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
   }
 
   .was-validated &:invalid,
   &.is-invalid {
-    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
   }
 
   &.warning {

package/src/scss/custom/_just-validate.scss

@@ -33,6 +33,7 @@ button:has(~ .is-invalid),
   padding-right: calc(1.5em + 0.75rem) !important;
   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 192 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
 }
+
 .input-group-text:has(~ .just-validate-success-field),
 .just-validate-success-field ~ .input-group-text,
 button:has(~ .just-validate-success-field),
@@ -70,13 +71,7 @@ textarea {
     border-bottom-width: 1px;
   }
 }
-input[type='date'] {
-  &.is-invalid {
-    border-bottom: 1px solid #d9364f;
-    padding-right: calc(1.5em + 0.75rem) !important;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E");
-  }
-}
+
 input[type='checkbox'],
 input[type='radio'] {
   &.just-validate-success-field {
@@ -85,6 +80,7 @@ input[type='radio'] {
     }
   }
 }
+
 select {
   &.is-invalid {
     border-bottom: 1px solid #d9364f;

package/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.9.1';
+  --bootstrap-italia-version: '2.10.0';
 }

package/src/svg/it-map-marker-minus.svg

@@ -1,9 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
-<g>
-	<path d="M17.7,5.3C16,2.2,12,1.1,8.9,2.8s-4.3,5.7-2.5,8.8L12,22l5.7-10.4c0.5-1,0.8-2,0.8-3.1S18.2,6.3,17.7,5.3z M16.8,11.1
-		L12,19.9l-4.8-8.8c-0.5-0.8-0.7-1.7-0.7-2.7C6.5,5.4,9,3,12,3s5.5,2.5,5.5,5.5C17.5,9.4,17.3,10.3,16.8,11.1z"/>
-</g>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L6.31001 11.63C4.99676 9.25198 5.30085 6.30809 7.07246 4.24872C8.84407 2.18935 11.7095 1.4489 14.257 2.39217C16.8045 3.33544 18.4968 5.76346 18.5 8.48C18.4997 9.57513 18.2209 10.6522 17.69 11.61L12 22ZM12 3C10.0517 2.99538 8.24688 4.02372 7.25751 5.70214C6.26815 7.38057 6.24246 9.45762 7.19 11.16L12 19.94L16.82 11.13C17.2627 10.3166 17.4963 9.40602 17.5 8.48C17.4835 5.45253 15.0275 3.00545 12 3ZM8.5 9V8H15.5V9H8.5Z" />
 </svg>