aw-front-helpers 2.4.0 → 2.4.2

package/classes/formControl.js

@@ -1,9 +1,11 @@
-import { gsap }       from 'gsap/all';
+import {
+  gsap
+} from 'gsap/all';
 import ScrollToPlugin from 'gsap/ScrollToPlugin';
-gsap.registerPlugin( ScrollToPlugin );
-import create             from 'dom-create-element';
-import getClosest         from '../utils/dom/getClosest';
-import regex_email        from '../utils/regex/email';
+gsap.registerPlugin(ScrollToPlugin);
+import create from 'dom-create-element';
+import getClosest from '../utils/dom/getClosest';
+import regex_email from '../utils/regex/email';
 
 const defaultOptions = {
   selectorGroup: '.form-group',
@@ -40,14 +42,17 @@ export default class FormControl {
    * @param {Object} options.i18n.checkbox - The employee's department.
    * @param {Object} options.i18n.radio - The employee's department.
    * @param {Object} options.i18n.pattern - The employee's department.
-  **/
+   **/
   constructor(form, options = {}) {
     /** @private */
     this._form = form;
     /** @private */
     this._dom = {};
     /** @private */
-    this._options = {...defaultOptions, ...options};
+    this._options = {
+      ...defaultOptions,
+      ...options
+    };
 
     this._form.setAttribute('novalidate', 'novalidate');
     this._formCreateBound();
@@ -85,10 +90,10 @@ export default class FormControl {
   // -
   destroy() {
     this._form.removeEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
+    this._domForm.inputs.forEach(input => {
       input.removeEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach( input => {
+    this._domForm.choices.forEach(input => {
       input.removeEventListener('change', this._onChange);
     });
   }
@@ -99,9 +104,9 @@ export default class FormControl {
 
   setError(element, message = null) {
     const parent = getClosest(element, this._options.selectorGroup);
-    if( parent) {
+    if (parent) {
       let error = parent.querySelector(`.${this._options.classErrorElement}`);
-      if(!error)  {
+      if (!error) {
         error = create({
           selector: 'ul',
           styles: this._options.classErrorElement
@@ -111,10 +116,10 @@ export default class FormControl {
       parent.classList.add(this._options.classIsError);
 
       const previousErrors = [...error.querySelectorAll('li')];
-      for(let i = 0; i < previousErrors.length; i++) {
-        if(previousErrors[i].innerHTML === message) return;
+      for (let i = 0; i < previousErrors.length; i++) {
+        if (previousErrors[i].innerHTML === message) return;
       }
-      if(message) {
+      if (message) {
         const errorElement = document.createElement('li');
         errorElement.innerHTML = message;
         error.appendChild(errorElement);
@@ -124,13 +129,20 @@ export default class FormControl {
 
   //________________________________________________________ events
   // -
-  /** @private */
-  _onFormSubmit(pEvt) {
+  /** @protected */
+  onFormSubmit(pEvt) {
     if (!this._isValid()) {
       pEvt.preventDefault();
     }
   }
 
+  /**
+   * @deprecated use onFormSubmit
+   */
+  _onFormSubmit(pEvt) {
+    this.onFormSubmit(pEvt);
+  }
+
   /** @private */
   _onChange(pEvt) {
     const el = pEvt.target;
@@ -141,13 +153,13 @@ export default class FormControl {
   // -
   /** @private */
   _formCreateBound() {
-    ['_onChange', '_onFormSubmit']
-      .forEach((fn) => this[fn] = this[fn].bind(this));
+    ['_onChange', '_onFormSubmit', 'onFormSubmit']
+    .forEach((fn) => this[fn] = this[fn].bind(this));
   }
 
   /** @private */
   _removeError(el = null) {
-    if(el) {
+    if (el) {
       const group = getClosest(el, this._options.selectorGroup);
       group.classList.remove(this._options.classIsError);
       const currentErrors = [...group.querySelectorAll(`.${this._options.classErrorElement}`)];
@@ -174,22 +186,22 @@ export default class FormControl {
     if (el.getAttribute('disabled') !== null) return false;
 
     let invalid = false;
-    if( !testRequired(el, this._form) ) {
+    if (!testRequired(el, this._form)) {
       invalid = true;
       const type = el.getAttribute('type');
-      if(type === 'radio') this.setError(el, this._options.i18n.radio);
-      else if(type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
-      else if(type !== 'hidden') this.setError(el, this._options.i18n.empty);
+      if (type === 'radio') this.setError(el, this._options.i18n.radio);
+      else if (type === 'checkbox') this.setError(el, this._options.i18n.checkbox);
+      else if (type !== 'hidden') this.setError(el, this._options.i18n.empty);
     }
-    if( !testEmail(el, this._form) ) {
+    if (!testEmail(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.email);
     }
-    if( !testPattern(el, this._form) ) {
+    if (!testPattern(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.pattern);
     }
-    if( !testSame(el, this._form) ) {
+    if (!testSame(el, this._form)) {
       invalid = true;
       this.setError(el, this._options.i18n.same);
     }
@@ -199,13 +211,14 @@ export default class FormControl {
 
   /** @private */
   _isValid() {
-    let isValid = true, firstErrorElement = null;
+    let isValid = true,
+      firstErrorElement = null;
     this._removeError();
 
     for (let i = 0; i < this._domForm.els.length; i++) {
       const el = this._domForm.els[i];
       const error = this._checkError(el);
-      if( !error ) continue;
+      if (!error) continue;
       else isValid = false;
       if (!isValid && firstErrorElement === null) firstErrorElement = el;
     }
@@ -231,10 +244,10 @@ export default class FormControl {
   /** @private */
   _formAddEvents() {
     this._form.addEventListener('submit', this._onFormSubmit);
-    this._domForm.inputs.forEach( input => {
+    this._domForm.inputs.forEach(input => {
       input.addEventListener('keyup', this._onChange);
     });
-    this._domForm.choices.forEach( input => {
+    this._domForm.choices.forEach(input => {
       input.addEventListener('change', this._onChange);
     });
   }
@@ -251,13 +264,13 @@ export function testRequired(el, form) {
   if (isRequired === null) return true;
 
   const type = el.getAttribute('type');
-  if(type === 'radio') {
+  if (type === 'radio') {
     const radios = [...form.querySelectorAll(`input[type="radio"][name="${el.getAttribute('name')}"]`)];
     for (let i = 0; i < radios.length; i++) {
       if (radios[i].checked) return true;
     }
     return false;
-  } else if( type === 'checkbox') return el.checked;
+  } else if (type === 'checkbox') return el.checked;
   return el.value !== '';
 }
 
@@ -269,8 +282,8 @@ export function testRequired(el, form) {
  */
 export function testEmail(el, form) {
   const type = el.getAttribute('type');
-  if(type !== 'email') return true;
-  return el.value === '' && !regex_email(el.value);
+  if (type !== 'email' || el.value === '') return true;
+  return regex_email(el.value);
 }
 
 /**
@@ -281,7 +294,7 @@ export function testEmail(el, form) {
  */
 export function testSame(el, form) {
   const hasSame = el.getAttribute('data-formvalidate-same');
-  if(hasSame === null) return true;
+  if (hasSame === null) return true;
   const twinEl = form.querySelector(`[data-formvalidate-same=${el.getAttribute('data-formvalidate-same')}]`);
   return twinEl.value === el.value;
 }
@@ -294,7 +307,7 @@ export function testSame(el, form) {
  */
 export function testPattern(el, form) {
   const pattern = el.getAttribute('pattern');
-  if(pattern === null) return true;
+  if (pattern === null || el.value === '') return true;
   const rgx = new RegExp(pattern);
-  return el.value === '' && !rgx.test(el.value);
+  return rgx.test(el.value);
 }

package/icons/facebook.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+<path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>

package/icons/google-plus.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+<path d="M386.061 228.496c1.834 9.692 3.143 19.384 3.143 31.956C389.204 370.205 315.599 448 204.8 448c-106.084 0-192-85.915-192-192s85.916-192 192-192c51.864 0 95.083 18.859 128.611 50.292l-52.126 50.03c-14.145-13.621-39.028-29.599-76.485-29.599-65.484 0-118.92 54.221-118.92 121.277 0 67.056 53.436 121.277 118.92 121.277 75.961 0 104.513-54.745 108.965-82.773H204.8v-66.009h181.261zm185.406 6.437V179.2h-56.001v55.733h-55.733v56.001h55.733v55.733h56.001v-55.733H627.2v-56.001h-55.733z"/></svg>

package/icons/instagram.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>

package/icons/linkedin.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></svg>

package/icons/pinterest.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+<path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></svg>

package/icons/square-facebook.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"/></svg>

package/icons/square-google-plus.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM164 356c-55.3 0-100-44.7-100-100s44.7-100 100-100c27 0 49.5 9.8 67 26.2l-27.1 26.1c-7.4-7.1-20.3-15.4-39.8-15.4-34.1 0-61.9 28.2-61.9 63.2 0 34.9 27.8 63.2 61.9 63.2 39.6 0 54.4-28.5 56.8-43.1H164v-34.4h94.4c1 5 1.6 10.1 1.6 16.6 0 57.1-38.3 97.6-96 97.6zm220-81.8h-29v29h-29.2v-29h-29V245h29v-29H355v29h29v29.2z"/></svg>

package/icons/square-instagram.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z"/></svg>

package/icons/square-linkedin.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/></svg>

package/icons/square-pinterest.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M448 80v352c0 26.5-21.5 48-48 48H154.4c9.8-16.4 22.4-40 27.4-59.3 3-11.5 15.3-58.4 15.3-58.4 8 15.3 31.4 28.2 56.3 28.2 74.1 0 127.4-68.1 127.4-152.7 0-81.1-66.2-141.8-151.4-141.8-106 0-162.2 71.1-162.2 148.6 0 36 19.2 80.8 49.8 95.1 4.7 2.2 7.1 1.2 8.2-3.3.8-3.4 5-20.1 6.8-27.8.6-2.5.3-4.6-1.7-7-10.1-12.3-18.3-34.9-18.3-56 0-54.2 41-106.6 110.9-106.6 60.3 0 102.6 41.1 102.6 99.9 0 66.4-33.5 112.4-77.2 112.4-24.1 0-42.1-19.9-36.4-44.4 6.9-29.2 20.3-60.7 20.3-81.8 0-53-75.5-45.7-75.5 25 0 21.7 7.3 36.5 7.3 36.5-31.4 132.8-36.1 134.5-29.6 192.6l2.2.8H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"/></svg>

package/icons/square-tumblr.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-82.3 364.2c-8.5 9.1-31.2 19.8-60.9 19.8-75.5 0-91.9-55.5-91.9-87.9v-90h-29.7c-3.4 0-6.2-2.8-6.2-6.2v-42.5c0-4.5 2.8-8.5 7.1-10 38.8-13.7 50.9-47.5 52.7-73.2.5-6.9 4.1-10.2 10-10.2h44.3c3.4 0 6.2 2.8 6.2 6.2v72h51.9c3.4 0 6.2 2.8 6.2 6.2v51.1c0 3.4-2.8 6.2-6.2 6.2h-52.1V321c0 21.4 14.8 33.5 42.5 22.4 3-1.2 5.6-2 8-1.4 2.2.5 3.6 2.1 4.6 4.9l13.8 40.2c1 3.2 2 6.7-.3 9.1z"/></svg>

package/icons/square-twitter.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"/></svg>

package/icons/square-viadeo.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zM280.7 381.2c-42.4 46.2-120 46.6-162.4 0-68-73.6-19.8-196.1 81.2-196.1 13.3 0 26.6 2.1 39.1 6.7-4.3 8.4-7.3 17.6-8.4 27.1-9.7-4.1-20.2-6-30.7-6-48.8 0-84.6 41.7-84.6 88.9 0 43 28.5 78.7 69.5 85.9 61.5-24 72.9-117.6 72.9-175 0-7.3 0-14.8-.6-22.1-11.2-32.9-26.6-64.6-44.2-94.5 27.1 18.3 41.9 62.5 44.2 94.1v.4c7.7 22.5 11.8 46.2 11.8 70 0 54.1-21.9 99-68.3 128.2l-2.4.2c50 1 86.2-38.6 86.2-87.2 0-12.2-2.1-24.3-6.9-35.7 9.5-1.9 18.5-5.6 26.4-10.5 15.3 36.6 12.6 87.3-22.8 125.6zM309 233.7c-13.3 0-25.1-7.1-34.4-16.1 21.9-12 49.6-30.7 62.3-53 1.5-3 4.1-8.6 4.5-12-12.5 27.9-44.2 49.8-73.9 56.7-4.7-7.3-7.5-15.5-7.5-24.3 0-10.3 5.2-24.1 12.9-31.6 21.6-20.5 53-8.5 72.4-50 32.5 46.2 13.1 130.3-36.3 130.3z"/></svg>

package/icons/square-vimeo.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M403.2 32H44.8C20.1 32 0 52.1 0 76.8v358.4C0 459.9 20.1 480 44.8 480h358.4c24.7 0 44.8-20.1 44.8-44.8V76.8c0-24.7-20.1-44.8-44.8-44.8zM377 180.8c-1.4 31.5-23.4 74.7-66 129.4-44 57.2-81.3 85.8-111.7 85.8-18.9 0-34.8-17.4-47.9-52.3-25.5-93.3-36.4-148-57.4-148-2.4 0-10.9 5.1-25.4 15.2l-15.2-19.6c37.3-32.8 72.9-69.2 95.2-71.2 25.2-2.4 40.7 14.8 46.5 51.7 20.7 131.2 29.9 151 67.6 91.6 13.5-21.4 20.8-37.7 21.8-48.9 3.5-33.2-25.9-30.9-45.8-22.4 15.9-52.1 46.3-77.4 91.2-76 33.3.9 49 22.5 47.1 64.7z"/></svg>

package/icons/square-youtube.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"/></svg>

package/icons/tiktok-brands.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/></svg>

package/icons/tumblr-brands.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+<path d="M309.8 480.3c-13.6 14.5-50 31.7-97.4 31.7-120.8 0-147-88.8-147-140.6v-144H17.9c-5.5 0-10-4.5-10-10v-68c0-7.2 4.5-13.6 11.3-16 62-21.8 81.5-76 84.3-117.1.8-11 6.5-16.3 16.1-16.3h70.9c5.5 0 10 4.5 10 10v115.2h83c5.5 0 10 4.4 10 9.9v81.7c0 5.5-4.5 10-10 10h-83.4V360c0 34.2 23.7 53.6 68 35.8 4.8-1.9 9-3.2 12.7-2.2 3.5.9 5.8 3.4 7.4 7.9l22 64.3c1.8 5 3.3 10.6-.4 14.5z"/></svg>

package/icons/twitter-brands.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>

package/icons/viadeo-brands.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M276.2 150.5v.7C258.3 98.6 233.6 47.8 205.4 0c43.3 29.2 67 100 70.8 150.5zm32.7 121.7c7.6 18.2 11 37.5 11 57 0 77.7-57.8 141-137.8 139.4l3.8-.3c74.2-46.7 109.3-118.6 109.3-205.1 0-38.1-6.5-75.9-18.9-112 1 11.7 1 23.7 1 35.4 0 91.8-18.1 241.6-116.6 280C95 455.2 49.4 398 49.4 329.2c0-75.6 57.4-142.3 135.4-142.3 16.8 0 33.7 3.1 49.1 9.6 1.7-15.1 6.5-29.9 13.4-43.3-19.9-7.2-41.2-10.7-62.5-10.7-161.5 0-238.7 195.9-129.9 313.7 67.9 74.6 192 73.9 259.8 0 56.6-61.3 60.9-142.4 36.4-201-12.7 8-27.1 13.9-42.2 17zM418.1 11.7c-31 66.5-81.3 47.2-115.8 80.1-12.4 12-20.6 34-20.6 50.5 0 14.1 4.5 27.1 12 38.8 47.4-11 98.3-46 118.2-90.7-.7 5.5-4.8 14.4-7.2 19.2-20.3 35.7-64.6 65.6-99.7 84.9 14.8 14.4 33.7 25.8 55 25.8 79 0 110.1-134.6 58.1-208.6z"/></svg>

package/icons/vimeo.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+<path d="M447.8 153.6c-2 43.6-32.4 103.3-91.4 179.1-60.9 79.2-112.4 118.8-154.6 118.8-26.1 0-48.2-24.1-66.3-72.3C100.3 250 85.3 174.3 56.2 174.3c-3.4 0-15.1 7.1-35.2 21.1L0 168.2c51.6-45.3 100.9-95.7 131.8-98.5 34.9-3.4 56.3 20.5 64.4 71.5 28.7 181.5 41.4 208.9 93.6 126.7 18.7-29.6 28.8-52.1 30.2-67.6 4.8-45.9-35.8-42.8-63.3-31 22-72.1 64.1-107.1 126.2-105.1 45.8 1.2 67.5 31.1 64.9 89.4z"/></svg>

package/icons/weibo.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<path d="M407 177.6c7.6-24-13.4-46.8-37.4-41.7-22 4.8-28.8-28.1-7.1-32.8 50.1-10.9 92.3 37.1 76.5 84.8-6.8 21.2-38.8 10.8-32-10.3zM214.8 446.7C108.5 446.7 0 395.3 0 310.4c0-44.3 28-95.4 76.3-143.7C176 67 279.5 65.8 249.9 161c-4 13.1 12.3 5.7 12.3 6 79.5-33.6 140.5-16.8 114 51.4-3.7 9.4 1.1 10.9 8.3 13.1 135.7 42.3 34.8 215.2-169.7 215.2zm143.7-146.3c-5.4-55.7-78.5-94-163.4-85.7-84.8 8.6-148.8 60.3-143.4 116s78.5 94 163.4 85.7c84.8-8.6 148.8-60.3 143.4-116zM347.9 35.1c-25.9 5.6-16.8 43.7 8.3 38.3 72.3-15.2 134.8 52.8 111.7 124-7.4 24.2 29.1 37 37.4 12 31.9-99.8-55.1-195.9-157.4-174.3zm-78.5 311c-17.1 38.8-66.8 60-109.1 46.3-40.8-13.1-58-53.4-40.3-89.7 17.7-35.4 63.1-55.4 103.4-45.1 42 10.8 63.1 50.2 46 88.5zm-86.3-30c-12.9-5.4-30 .3-38 12.9-8.3 12.9-4.3 28 8.6 34 13.1 6 30.8.3 39.1-12.9 8-13.1 3.7-28.3-9.7-34zm32.6-13.4c-5.1-1.7-11.4.6-14.3 5.4-2.9 5.1-1.4 10.6 3.7 12.9 5.1 2 11.7-.3 14.6-5.4 2.8-5.2 1.1-10.9-4-12.9z"/></svg>

package/icons/youtube.svg

@@ -0,0 +1,2 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
+<path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aw-front-helpers",
-  "version": "2.4.0",
+  "version": "2.4.2",
   "description": "Assets helpers for projects",
   "author": "Yoann Le Poupon",
   "license": "ISC",

package/stylesheets/_functions.scss

@@ -1,11 +1,12 @@
 @charset "UTF-8";
+@use 'sass:math';
 // VARIABLES
 $px-base: 16 !default;
 
 @function rem($pxval) {
-  @return ( $pxval / $px-base ) * 1rem;
+  @return math.div($pxval, $px-base ) * 1rem;
 }
 
 @function em($pxval) {
-  @return ($pxval / $px-base) * 1em;
-}
+  @return math.div($pxval, $px-base ) * 1em;
+}

package/stylesheets/_mixins.scss

@@ -22,9 +22,11 @@ $vertical-spacing-desktop: 80px !default;
   margin-right: auto;
   width: $wrapper-width-sm;
   max-width: $wrapper-max;
+
   @include desktop {
     width: $wrapper-width-md;
   }
+
   @include desktop-xl {
     width: $wrapper-width-lg;
   }
@@ -42,9 +44,11 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-top($facteur: 1) {
   margin-top: $vertical-spacing-mobile*$facteur;
+
   @include tablet {
     margin-top: $vertical-spacing-tablet*$facteur;
   }
+
   @include desktop {
     margin-top: $vertical-spacing-desktop*$facteur;
   }
@@ -52,9 +56,11 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-bottom($facteur: 1) {
   margin-bottom: $vertical-spacing-mobile*$facteur;
+
   @include tablet {
     margin-bottom: $vertical-spacing-tablet*$facteur;
   }
+
   @include desktop {
     margin-bottom: $vertical-spacing-desktop*$facteur;
   }
@@ -67,9 +73,11 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-inner-top($facteur: 1) {
   padding-top: $vertical-spacing-mobile*$facteur;
+
   @include tablet {
     padding-top: $vertical-spacing-tablet*$facteur;
   }
+
   @include desktop {
     padding-top: $vertical-spacing-desktop*$facteur;
   }
@@ -77,9 +85,11 @@ $vertical-spacing-desktop: 80px !default;
 
 @mixin vertical-spacing-inner-bottom($facteur: 1) {
   padding-bottom: $vertical-spacing-mobile*$facteur;
+
   @include tablet {
     padding-bottom: $vertical-spacing-tablet*$facteur;
   }
+
   @include desktop {
     padding-bottom: $vertical-spacing-desktop*$facteur;
   }
@@ -122,9 +132,11 @@ $vertical-spacing-desktop: 80px !default;
   &:not(input) {
     user-select: none;
   }
+
   &:hover {
     text-decoration: none;
   }
+
   &::-moz-focus-inner {
     border: 0;
     padding: 0;
@@ -139,7 +151,7 @@ $vertical-spacing-desktop: 80px !default;
   $width: nth($value, 1);
   $height: $width;
 
-  @if length($value) > 1 {
+  @if length($value)>1 {
     $height: nth($value, 2);
   }
 
@@ -195,24 +207,12 @@ $vertical-spacing-desktop: 80px !default;
 }
 
 @mixin imageCover {
-  bottom: -10000%;
-  height: auto;
-  left: -10000%;
-  margin: auto auto;
-  min-height: 1000%;
-  min-width: 1000%;
-  overflow: hidden;
-  position: absolute;
-  right: -10000%;
-  top: -10000%;
-  transform: scale(.101);
-  width: auto;
-  z-index: 1;
-  max-width: inherit;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 @mixin loader($color: $color-main, $scale: 1) {
-  position: relative;
   &::after {
     content: '';
     position: absolute;
@@ -233,6 +233,7 @@ $vertical-spacing-desktop: 80px !default;
   0% {
     transform: translateX(-50%) translateY(-50%) rotate(0deg);
   }
+
   100% {
     transform: translateX(-50%) translateY(-50%) rotate(360deg);
   }
@@ -242,9 +243,10 @@ $vertical-spacing-desktop: 80px !default;
   position: absolute !important;
   clip: rect(1px, 1px, 1px, 1px);
   overflow: hidden;
-  height: 1px;
-  width: 1px;
+  height: rem(1);
+  width: rem(1);
   word-wrap: normal;
+
   &.focusable:focus {
     position: static !important;
     clip: auto;

package/utils/array/index.js

@@ -3,3 +3,4 @@ module.exports.max = require('./max').default;
 module.exports.slice = require('./slice').default;
 module.exports.combine = require('./combine').default;
 module.exports.without = require('./without').default;
+module.exports.mergeDeep = require('./merge-deep').default;

package/utils/array/merge-deep.js

@@ -0,0 +1,33 @@
+/**
+ * Simple object check.
+ * @param item
+ * @returns {boolean}
+ */
+export function isObject(item) {
+  return (item && typeof item === 'object' && !Array.isArray(item));
+}
+
+/**
+ * Deep merge two objects.
+ * @param target
+ * @param ...sources
+ */
+function mergeDeep(target, ...sources) {
+  if (!sources.length) return target;
+  const source = sources.shift();
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} });
+        mergeDeep(target[key], source[key]);
+      } else {
+        Object.assign(target, { [key]: source[key] });
+      }
+    }
+  }
+
+  return mergeDeep(target, ...sources);
+}
+
+export default mergeDeep;

package/utils/dom/getClosest.js

@@ -5,29 +5,6 @@
  * @param  {String}  selector Selector to match against
  * @return {Boolean|Element}  Returns null if not match found
  */
-export default function ( elem, selector ) {
-
-    // Element.matches() polyfill
-    if (!Element.prototype.matches) {
-        Element.prototype.matches =
-            Element.prototype.matchesSelector ||
-            Element.prototype.mozMatchesSelector ||
-            Element.prototype.msMatchesSelector ||
-            Element.prototype.oMatchesSelector ||
-            Element.prototype.webkitMatchesSelector ||
-            function(s) {
-                var matches = (this.document || this.ownerDocument).querySelectorAll(s),
-                    i = matches.length;
-                while (--i >= 0 && matches.item(i) !== this) {}
-                return i > -1;
-            };
-    }
-
-    // Get closest match
-    for ( ; elem && elem !== document; elem = elem.parentNode ) {
-        if ( elem.matches( selector ) ) return elem;
-    }
-
-    return null;
-
+export default function (elem, selector) {
+    return elem.closest(selector);
 };