@teddy-dev/frontend 1.0.1

package/components/mc-cart-quantity.js

@@ -0,0 +1,43 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./components/mc-input-quantity.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class McCartQuantity extends McElement {
+
+  connectedCallback() {
+    if(!this.hasAttribute('data-key')) {
+      console.error('McCartQuantity component requires a data-key attribute.');
+      return;
+    }
+    
+    setTimeout(() => {
+      const input = this.querySelector('mc-input-quantity');
+      if(!input) {
+        console.error('McCartQuantity component requires an mc-input-quantity element inside.');
+        return;
+      }
+      input.addEventListener(MCEVENTS.QUANTITY_CHANGED, this.changeItem.bind(this));
+    });
+  }
+
+  changeItem = (e) => {
+    console.log('McCartQuantity changeItem', e.detail);
+    const key = this.getAttribute('data-key');
+    if (!key) return;
+
+    const quantity = parseInt(e.detail.value);
+    if (!quantity || isNaN(quantity)) return;
+
+    McShopify.updateCartLine({
+      id: key,
+      quantity: quantity
+    });
+  }
+}
+
+if (!customElements.get('mc-cart-quantity')) {
+  customElements.define('mc-cart-quantity', McCartQuantity);
+}
+
+window.McCartQuantity = McCartQuantity;

package/components/mc-cart-remove.js

@@ -0,0 +1,32 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class McCartRemove extends McElement {
+
+  connectedCallback() {
+    if(!this.hasAttribute('data-key')) {
+      console.error('McCartRemove component requires a data-key attribute.');
+      return;
+    }
+    this.addEventListener('click', () => {
+      this.removeItem();
+    });
+  }
+
+  removeItem = () => {
+    const key = this.getAttribute('data-key');
+    if (!key) return;
+    
+    McShopify.updateCartLine({
+      id: key,
+      quantity: 0
+    });
+
+  }
+}
+
+if (!customElements.get('mc-cart-remove')) {
+  customElements.define('mc-cart-remove', McCartRemove);
+}
+
+window.McCartRemove = McCartRemove;

package/components/mc-copy.js

@@ -0,0 +1,33 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McCopy extends McElement {
+  text; toast;
+
+  connectedCallback() {
+    this.text = this.dataset.text || this.textContent;
+    if(!this.text) { console.error('McCopy: No text to copy'); return; }
+    
+    this.addEventListener('click', () => this.copy());
+  }
+
+  copy = () => {
+    navigator.clipboard.writeText(this.text);
+    const toastElement = document.querySelector(this.dataset.toast);
+    const popoverElement = document.querySelector(this.dataset.popover);
+    console.log(toastElement);
+    if (toastElement) {
+      const toast = bootstrap.Toast.getOrCreateInstance(toastElement);
+      toast.show();
+    }
+    if (popoverElement) {
+      const popover = bootstrap.Popover.getOrCreateInstance(popoverElement);
+      popover.show();
+    }
+  }
+
+}
+if (!window.customElements.get("mc-copy")) {
+  window.customElements.define("mc-copy", McCopy);
+}
+window.McCopy = McCopy;
+export default McCopy;

package/components/mc-element.js

@@ -0,0 +1,84 @@
+// Questa classe base `McElement` estende HTMLElement e fornisce funzionalità comuni per web component personalizzati.
+// Lo scopo principale è essere estesa da altri componenti custom che necessitano di ricaricare dinamicamente il proprio contenuto tramite chiamate HTTP.
+// Non richiede data attributes o elementi HTML specifici: i metodi sono pensati per essere usati dalle sottoclassi.
+
+import '../res/mc-events.js';
+await loadComponent('./res/mc-utils.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+
+class McElement extends HTMLElement {
+  
+  // Metodo per ricaricare dinamicamente il contenuto dell'elemento tramite una richiesta GET.
+  // Parametri:
+  // - url: URL da cui caricare il nuovo contenuto (default: pagina corrente)
+  // - onSuccess: funzione callback chiamata in caso di successo
+  // - onError: funzione callback chiamata in caso di errore
+  // - onComplete: funzione callback chiamata al termine della richiesta
+  reload = ({
+    url=location.href, // URL da cui caricare il nuovo contenuto (default: pagina corrente)
+    onSuccess, // Funzione da chiamare in caso di successo
+    onError,   // Funzione da chiamare in caso di errore
+    onComplete // Funzione da chiamare al termine della richiesta
+  }) => {
+    if(!url || typeof url !== 'string') { console.error('McElement.reload: Il parametro "url" deve essere una stringa valida.'); return; }
+
+    axios({
+      url: url,
+      method: 'GET',
+    }).then(response => {
+      // Aggiorna il contenuto dell'elemento usando la funzione utility McUtils.reloadElement
+      McUtils.reloadElement(response.data, this, this.getSelector());
+      if(typeof onSuccess === 'function') { onSuccess(response.data); }
+    }).catch(error => {
+      if(typeof onError === 'function') { onError(error); }
+    }).finally(() => {
+      if(typeof onComplete === 'function') { onComplete(); }
+    });
+  }
+
+  // Restituisce un selettore CSS univoco per questo elemento (id, classi e attributi)
+  getSelector = () => {
+    if(this.id) {
+      return `#${this.id}`;
+    }
+    let selector = this.tagName.toLowerCase();
+    if(this.classList.length > 0) {
+      selector += this.classList.map(c => `.${c}`).join('');
+    }
+    if(this.attributes.length > 0) {
+      selector += Array.from(this.attributes).map(attr => `[${attr.name}="${attr.value}"]`).join('');
+    }
+    return selector;
+  }
+
+  activate = () => {
+    this.classList.add('active'); // Aggiunge la classe 'active' per lo stile
+    McShopify.customEvent(MCEVENTS.EL_ACTIVATED, null, this);
+  }
+
+  deactivate = () => {
+    this.classList.remove('active'); // Rimuove la classe 'active' per lo stile
+    McShopify.customEvent(MCEVENTS.EL_DEACTIVATED, null, this);
+  }
+
+  toggle = () => {
+    this.isActive() ? this.deactivate() : this.activate();
+  }
+
+  isActive = () => {
+    return this.classList.contains('active');
+  }
+
+  constructor() {
+    super(); // Chiama il costruttore della classe base HTMLElement
+    if(this.dataset.active != undefined)
+      this.activate(); // Attiva l'elemento se il data attribute "active" è presente
+    else
+      this.deactivate(); // Altrimenti lo disattiva
+  }
+  
+}
+
+// Espone la classe McElement come globale e come modulo, pronta per essere estesa da altri web component
+window.McElement = McElement;
+export default McElement;

package/components/mc-form-errors.js

@@ -0,0 +1,35 @@
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-utils.js', false);
+
+class McFormErrors extends McElement {
+
+  connectedCallback() {
+    this.checkErrors();
+  }
+
+  checkErrors = () => {
+    if (this.innerHTML.length > 0) {
+      this.activate();
+    } else {
+      this.deactivate();
+    }
+  }
+
+  clear = () => {
+    this.innerHTML = '';
+    this.deactivate();
+  }
+
+  showError = (content) => {
+    this.innerHTML = content;
+    this.activate();
+  }
+}
+
+if (!customElements.get('mc-form-errors')) {
+  customElements.define('mc-form-errors', McFormErrors);
+  McUtils.addCss(`https://cdn.jsdelivr.net/npm/teddy-frontend@${theme.version}/css/mc-form-errors.css`);
+}
+
+window.McFormErrors = McFormErrors;
+export default McFormErrors;

package/components/mc-form-success.js

@@ -0,0 +1,31 @@
+await loadComponent('./components/mc-element.js', false);
+
+class McFormSuccess extends McElement {
+
+  connectedCallback() {
+    this.checkMessages();
+  }
+
+  checkMessages = () => {
+    if (this.innerHTML.length > 0) {
+      this.activate();
+    } else {
+      this.deactivate();
+    }
+  }
+
+  clear = () => {
+    this.innerHTML = '';
+    this.deactivate();
+  }
+
+  showMessage = (content) => {
+    this.innerHTML = content;
+    this.activate();
+  }
+}
+
+if (!customElements.get('mc-form-success')) {
+  customElements.define('mc-form-success', McFormSuccess);
+}
+window.McFormSuccess = McFormSuccess;

package/components/mc-form.js

@@ -0,0 +1,223 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-element.js', false);
+await loadComponent('./res/mc-utils.js', false);
+await loadComponent('./res/mc-shopify.js', false);
+await loadComponent('./components/mc-form-errors.js', false); // Carica il componente Input
+await loadComponent('./components/mc-input.js', false); // Carica il componente Input
+
+class McForm extends McElement {
+  form; inputs; isValid; buttons; data; options; errors;
+  
+
+  // Metodo chiamato automaticamente quando l'elemento viene aggiunto al DOM
+  connectedCallback() {
+    this.init(); // Inizializza il form
+  }
+
+  // Inizializza il form e i suoi elementi
+  init = () => {
+    this.form = this.querySelector('form'); // Seleziona il form
+    if (!this.form) { console.error('McForm: No form element found');  return; }
+
+    this.inputs = this.querySelectorAll('mc-input-text, mc-input-checkbox, mc-input-select, mc-input-area, mc-input-checkbox-group, mc-input-password'); // Seleziona gli input
+    this.inputs = [...this.inputs, ...this.form.querySelectorAll(`mc-input-text[form="${this.form.id}"], mc-input-checkbox[form="${this.form.id}"], mc-input-select[form="${this.form.id}"], mc-input-area[form="${this.form.id}"], mc-input-checkbox-group[form="${this.form.id}"], mc-input-password[form="${this.form.id}"]`)]; // Aggiunge gli input del form
+    if (this.inputs.length === 0) { console.error('McForm: No input elements found'); return; }
+
+    this.buttons = this.querySelectorAll(`[data-submit]`); // Seleziona i pulsanti di submit
+    this.buttons = [...this.buttons, ...document.querySelectorAll(`[data-submit][form="${this.form.id}"]`)];
+
+    this.errors = this.querySelector('mc-form-errors'); // Seleziona il container degli errori
+    if (!this.errors) { console.error('McForm: No mc-form-errors element found'); return; }
+
+    this.form.addEventListener(MCEVENTS.FORM_AUTOSUBMIT, this.submit.bind(this));
+    this.handleButtons(); // Gestisce i pulsanti
+  }
+
+  // Gestisce i pulsanti di submit
+  handleButtons = () => {
+    this.buttons.forEach(button => {
+      button.addEventListener('click', this.submit.bind(this)); // Aggiunge un listener per il click
+    });
+    if (this.dataset.ajax) {
+      // Se il form è configurato per l'invio in AJAX, previene il comportamento predefinito
+      this.form.addEventListener('submit', (e) => {
+        e.preventDefault();
+      });
+    }
+  }
+
+  // Valida tutti gli input del form
+  validate = () => {
+    this.isValid = true; // Assume che il form sia valido
+    this.inputs.forEach(input => {
+      input.validate(); // Valida ogni input
+      this.isValid = this.isValid && input.isValid; // Aggiorna lo stato di validità
+    });
+
+    // se non qualcosa non è valido metto il focus sul primo input non valido
+    if (!this.isValid) {
+      const firstInvalid = this.inputs.find(input => !input.isValid);
+      if (firstInvalid && firstInvalid.input) {
+        firstInvalid.input.focus(); // Imposta il focus sul primo input non valido
+      }
+    }
+    McShopify.customEvent(MCEVENTS.FORM_VALIDATE, {valid: this.isValid}, this); // Emette un evento di validazione
+  }
+
+  // Gestisce l'invio del form
+  submit = () => {
+    this.validate(); // Valida il form
+    if (this.isValid) {
+      // Se il form è valido
+      McShopify.customEvent(MCEVENTS.FORM_SUBMIT, null, this); // Emette un evento di submit
+      if (this.dataset.ajax != undefined) {
+        // Se configurato per AJAX, prepara i dati e invia la richiesta
+        this.getData();
+        this.getOptions();
+        this.ajaxSubmit();
+      } else {
+        // Altrimenti invia il form normalmente
+        this.form.submit();
+      }
+    }
+  }
+
+  // Invia il form in AJAX
+  ajaxSubmit = () => {
+    axios(this.options).then(this.success.bind(this)).catch(this.error.bind(this)).finally(this.complete.bind(this));
+  }
+
+  // Ottiene i dati del form in base al content-type
+  getData = () => {
+    const formData = new FormData(this.form);
+
+    if (this.dataset.contentType?.includes('json')) {
+      // Se il content-type è JSON, converte i dati in JSON
+      this.data = JSON.stringify(McForm.formDataToObject(formData));
+    } else if (this.dataset.contentType?.includes('form')) {
+      // Se il content-type è form-urlencoded, usa FormData
+      this.data = formData;
+    } else {
+      // Altrimenti usa URLSearchParams
+      this.data = new URLSearchParams(formData);
+    }
+  }
+
+  // Ottiene le opzioni della richiesta AJAX
+  getOptions = () => {
+    const headers = {};
+    const method = this.form.getAttribute('method') || 'POST'; // Metodo HTTP
+    if (this.dataset.contentType != undefined) {
+      headers['Content-Type'] = this.dataset.contentType; // Imposta il content-type
+    }
+    if (this.dataset.authUser != undefined && this.dataset.authToken != undefined) {
+      // Aggiunge l'autenticazione se configurata
+      headers['Authorization'] = 'Basic ' + btoa(this.dataset.authUser + ':' + this.dataset.authToken);
+    }
+    if(this.dataset.headers){
+      const customHeaders = JSON.parse(this.dataset.headers);
+      Object.keys(customHeaders).forEach(key => {
+        headers[key] = customHeaders[key];
+      });
+    }
+    this.options = {
+      url: this.form.action, // URL del form
+      method: method, // Metodo HTTP
+      headers: headers // Headers della richiesta
+    };
+    if (method.toUpperCase() != 'GET') {
+      this.options.data = this.data; // Aggiunge il corpo della richiesta
+    } else {
+      this.options.params = this.data; // Aggiunge i parametri per GET
+    }
+    console.log('McForm.getOptions', this.options, this.form, this.form.getAttribute('method'), method);
+  }
+
+  // Gestisce gli errori della richiesta
+  error = (e) => {
+    McShopify.customEvent(MCEVENTS.FORM_ERROR, e, this); // Emette un evento di errore
+    console.error(e); // Logga l'errore
+    this.errors.showError(e.message || theme.t.errors.generic); // Mostra l'errore
+  }
+
+  // Gestisce il successo della richiesta
+  success = (response) => {
+    McShopify.customEvent(MCEVENTS.FORM_SUCCESS, response, this); // Emette un evento di successo
+    this.errors.clear(); // Pulisce gli errori
+  }
+
+  // Gestisce il completamento della richiesta
+  complete = () => {
+    McShopify.customEvent(MCEVENTS.FORM_COMPLETED, null, this); // Emette un evento di completamento
+  }
+
+  // Trasforma i dati del form in un oggetto
+  static formDataToObject = (formData) => {
+    const object = {};
+    formData.forEach((value, key) => {
+      // Converte valori come 'true', 'false' e 'null'
+      if (value === 'true') {
+        value = true;
+      } else if (value === 'false') {
+        value = false;
+      } else if (value === 'null') {
+        value = null;
+      }
+
+      // Gestisce chiavi che indicano array con oggetti annidati
+      const arrayKeyMatch = key.match(/(\w+)\[(\d*)\]\[(\w+)\]/);
+
+      if (arrayKeyMatch) {
+        const arrayKey = arrayKeyMatch[1];
+        const index = arrayKeyMatch[2];
+        const subKey = arrayKeyMatch[3];
+
+        if (!object[arrayKey]) {
+          object[arrayKey] = [];
+        }
+
+        if (index) {
+          if (!object[arrayKey][index]) {
+            object[arrayKey][index] = {};
+          }
+          object[arrayKey][index][subKey] = value;
+        } else {
+          const newItem = {};
+          newItem[subKey] = value;
+          object[arrayKey].push(newItem);
+        }
+      } else if (key.endsWith('[]')) {
+        const keyName = key.slice(0, -2);
+        if (!Array.isArray(object[keyName])) {
+          object[keyName] = [];
+        }
+        try {
+          object[keyName].push(JSON.parse(value));
+        } catch (e) {
+          object[keyName].push(value);
+        }
+      } else {
+        const keys = key.split('.');
+        keys.reduce((acc, k, i) => {
+          if (i === keys.length - 1) {
+            acc[k] = value;
+          } else {
+            if (!acc[k]) acc[k] = {};
+            return acc[k];
+          }
+        }, object);
+      }
+    });
+
+    return object;
+  }
+}
+
+// Registra il componente personalizzato se non è già stato definito
+if (!customElements.get('mc-form')) {
+  customElements.define('mc-form', McForm);
+}
+
+// Esporta la classe nel contesto globale e come modulo
+window.McForm = McForm;
+export default McForm;

package/components/mc-input-area.js

@@ -0,0 +1,13 @@
+await loadComponent('./components/mc-input.js', false);
+
+class McInputArea extends McInput {
+  connectedCallback() {
+    this.input = this.querySelector('textarea');
+    this.init();
+  }
+}
+if(!customElements.get('mc-input-area')) {
+  customElements.define('mc-input-area', McInputArea);
+}
+window.McInputArea = McInputArea;
+export default McInputArea;

package/components/mc-input-checkbox-group.js

@@ -0,0 +1,52 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-input.js', false);
+
+// Definizione della classe custom element McInputCheckboxGroup
+class McInputCheckboxGroup extends McInput {
+  inputs; // Collezione di input checkbox nel gruppo
+
+  connectedCallback() {
+    this.init();
+  }
+
+  // Inizializza il gruppo: collega inputs, error e listener
+  init = () => {
+    this.inputs = this.querySelectorAll('input');
+    this.error = this.querySelector('[data-error]');
+    if(!this.inputs || this.inputs.length === 0) { console.error('McInputCheckboxGroup: No input elements found'); return; }
+    if(!this.error){ console.error('McInput: No error container found'); return; }
+    if(!window.theme?.t) { console.error('McInput: Translations not available'); return; }
+    if(!window.theme.t.errors) { console.error('McInput: Translations for errors not available'); return; }
+
+    // Listener per validazione su change di ogni checkbox
+    this.inputs.forEach(input => {
+      input.addEventListener('change', this.validate.bind(this));
+    });
+  }
+
+  // Valida che almeno una checkbox sia selezionata
+  validate = () => {
+    this.isValid = false;
+    this.inputs.forEach(input => {
+      this.isValid = this.isValid || input.validity.valid;
+    });
+    if(!this.isValid) {
+      this.errorText = theme.t.errors.required;
+    }
+    // Emissione eventi custom in base alla validità
+    if (this.isValid) {
+      McShopify.customEvent(MCEVENTS.INPUT_VALID, this.input?.value, this);
+    } else {
+      McShopify.customEvent(MCEVENTS.INPUT_ERROR, this.errorText, this);
+    }
+    this.showError();
+  }
+
+}
+
+// Definizione custom element e esportazione globale/modulo
+if(!customElements.get('mc-input-checkbox-group')) {
+  customElements.define('mc-input-checkbox-group', McInputCheckboxGroup);
+}
+window.McInputCheckboxGroup = McInputCheckboxGroup;
+export default McInputCheckboxGroup;

package/components/mc-input-checkbox.js

@@ -0,0 +1,12 @@
+await loadComponent('./components/mc-input.js', false);
+
+class McInputCheckbox extends McInput {
+  connectedCallback() {
+    this.init();
+  }
+}
+if(!customElements.get('mc-input-checkbox')) {
+  customElements.define('mc-input-checkbox', McInputCheckbox);
+}
+window.McInputCheckbox = McInputCheckbox;
+export default McInputCheckbox;

package/components/mc-input-password.js

@@ -0,0 +1,39 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-input.js', false); 
+
+class McInputPassword extends McInput {
+  tips; eye;
+  
+  connectedCallback() {
+    this.init();
+
+    this.addEventListener(MCEVENTS.EL_ACTIVATED, this.showPassword.bind(this));
+    this.addEventListener(MCEVENTS.EL_DEACTIVATED, this.hidePassword.bind(this));
+  }
+
+  showPassword = () => {
+    this.input.type = "text";
+  }
+
+  hidePassword = () => {
+    this.input.type = "password";
+  }
+
+  hideTips = () => {
+    this.tips?.hide();
+  }
+
+  showTips = () => {    
+    this.tips?.show();
+  }
+
+  checkTips = () => {
+    this.tips?.checkPoints(this.input.value);
+  }
+
+}
+if (!window.customElements.get("mc-input-password")) {
+  window.customElements.define("mc-input-password", McInputPassword);
+}
+window.McInputPassword = McInputPassword;
+export default McInputPassword;

package/components/mc-input-places.js

@@ -0,0 +1,43 @@
+import '../res/mc-events.js';
+await loadComponent('./components/mc-input.js', false);
+
+class McInputPlaces extends McInput {
+  target; search;
+  
+  connectedCallback() {
+    this.target = this.querySelector("[data-geolocate]");
+    if(!google?.maps?.places) { console.error("McInputPlaces: Google Maps Places API is not loaded. Please ensure you have included the Google Maps JavaScript API with Places library."); return; }
+    
+    this.init();
+    this.search = new google.maps.places.SearchBox(this.input);
+    this.search.addListener('place_changed', this.onChange.bind(this));
+    this.target?.addEventListener("click", this.locate.bind(this));
+  }
+  
+  locate = () => {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition((position) => {
+        McShopify.customEvent(MCEVENTS.PLACES_LOCATED, position, this);
+      });
+    }
+  }
+
+  onChange = () => {
+    const places = this.search.getPlaces();
+    McShopify.customEvent(MCEVENTS.PLACES_CHANGE, places, this);
+  }
+
+  getPlaces = () => {
+    return this.search.getPlaces();
+  }
+
+  setBounds = (bounds) => {
+    this.search.setBounds(bounds);
+  }
+
+}
+if (!window.customElements.get("mc-input-places")) {
+  window.customElements.define("mc-input-places", McInputPlaces);
+}
+window.McInputPlaces = McInputPlaces;
+export default McInputPlaces;