@ptcwebops/ptcw-design 3.7.0 → 3.7.2

package/dist/collection/utils/interfaces.js

@@ -1,11 +1,11 @@
-let ResponsiveBgVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-img',
-  interval: 250
-};
-let ResponsivePictureVariables = {
-  envs: ['xs', 'sm', 'md', 'lg'],
-  selector: '.ptc-picture',
-  interval: 250
-};
-export { ResponsiveBgVariables, ResponsivePictureVariables };
+let ResponsiveBgVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-img',
+  interval: 250
+};
+let ResponsivePictureVariables = {
+  envs: ['xs', 'sm', 'md', 'lg'],
+  selector: '.ptc-picture',
+  interval: 250
+};
+export { ResponsiveBgVariables, ResponsivePictureVariables };

package/dist/collection/utils/utils.js

@@ -1,161 +1,161 @@
-export function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
-}
-export function MapDOM(domElement, selector, toString) {
-  let element = selector ? domElement.querySelector(selector) : domElement;
-  let treeObject = {};
-  let translate = (name) => {
-    return name.toLowerCase().replace(/(-\w)/g, text => {
-      return text.replace(/-/, '').toUpperCase();
-    });
-  };
-  let hasContent = (element) => {
-    let result = true;
-    if (/^\s*$/.test(element.textContent)) {
-      result = false;
-    }
-    return result;
-  };
-  let treeHTML = (element, object) => {
-    //let nodeName = translate(element.nodeName);
-    let nodeList = element.childNodes;
-    if (nodeList && nodeList.length > 0) {
-      for (let i = 0; i < nodeList.length; i++) {
-        let elm = nodeList[i];
-        if (elm.nodeType == 1) {
-          let letChildNodeName = translate(elm.nodeName);
-          if (!object[letChildNodeName]) {
-            object[letChildNodeName] = [];
-          }
-          object[letChildNodeName].push({});
-          treeHTML(elm, object[letChildNodeName][object[letChildNodeName].length - 1]);
-        }
-        else if (elm.nodeType == 3 && hasContent(elm)) {
-          object['text'] = (object['text'] || '') + elm.textContent;
-        }
-      }
-      for (const property in object) {
-        if (Array.isArray(object[property]) && object[property].length == 1) {
-          object[property] = object[property][0];
-        }
-      }
-    }
-    if (element.attributes && element.attributes.length > 0) {
-      for (let i = 0; i < element.attributes.length; i++) {
-        let name = translate(element.attributes[i].nodeName);
-        object[name] = element.attributes[i].nodeValue;
-      }
-    }
-    if (element.getAttribute('html') == 'true') {
-      object['html'] = element.innerHTML;
-    }
-  };
-  treeHTML(element, treeObject);
-  return toString ? JSON.stringify(treeObject) : treeObject;
-}
-export function generateUUID() {
-  let s4 = () => {
-    return Math.floor((1 + Math.random()) * 0x10000)
-      .toString(16)
-      .substring(1);
-  };
-  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
-}
-export function debounce(func, wait, referer) {
-  let key = generateUUID();
-  if (!globalThis.debounceTimeouts) {
-    globalThis.debounceTimeouts = {};
-  }
-  return function executedFunction(e) {
-    var context = referer || this;
-    var args = e;
-    var callback = function () {
-      func(context, args);
-    };
-    clearTimeout(globalThis.debounceTimeouts[key]);
-    globalThis.debounceTimeouts[key] = setTimeout(callback, wait);
-  };
-}
-export function getFileExtension(filePath) {
-  if (filePath === undefined) {
-    throw new Error('filePath is not defined');
-  }
-  const lastDotIndex = filePath.lastIndexOf('.');
-  if (lastDotIndex === -1) {
-    // no extension found
-    return '';
-  }
-  return filePath.substring(lastDotIndex);
-}
-export function getLanguageFromURL() {
-  const urlPath = window.location.pathname;
-  const parts = urlPath.split('/');
-  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
-  const languageCode = parts[1];
-  if (supportedLanguages.includes(languageCode)) {
-    return languageCode;
-  }
-  return 'en';
-}
-export function getSeoTagType(element, defaultTag = "span") {
-  if (element && element.children && element.children.length == 1) {
-    let firstChild = element.children[0];
-    let TagType = firstChild.tagName.toLowerCase();
-    element.removeChild(firstChild);
-    return [TagType, firstChild];
-  }
-  else {
-    return [defaultTag, element];
-  }
-}
-export function seoSlotReset(element) {
-  if (element && element.children && element.children.length == 1) {
-    let firstChild = element.firstElementChild;
-    element.innerHTML = firstChild.innerHTML;
-  }
-}
-// for elements in the light dom
-export function equalizeHeights(selector) {
-  const elements = document.querySelectorAll(selector);
-  //debugger
-  let tallestHeight = 0;
-  // 1. Find the tallest element
-  elements.forEach(element => {
-    const height = element.offsetHeight;
-    if (height > tallestHeight) {
-      tallestHeight = height;
-    }
-  });
-  console.log('tallest height: ' + tallestHeight);
-  // 2. Set all elements to the tallest height
-  elements.forEach(element => {
-    element.style.height = `${tallestHeight}px`;
-  });
-}
-//for elements in the shadow dom
-export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
-  let elements;
-  // Determine if we're working with a shadow root or a host element that has a shadowRoot
-  if (shadowRootOrHostElement instanceof DocumentFragment) { // ShadowRoot is a kind of DocumentFragment
-    elements = shadowRootOrHostElement.querySelectorAll(selector);
-  }
-  else if (shadowRootOrHostElement.shadowRoot) {
-    elements = shadowRootOrHostElement.shadowRoot.querySelectorAll(selector);
-  }
-  else {
-    console.error("The provided element does not have a shadowRoot.");
-    return;
-  }
-  let tallestHeight = 0;
-  // Find the tallest element
-  elements.forEach((element) => {
-    const height = element.offsetHeight;
-    if (height > tallestHeight) {
-      tallestHeight = height;
-    }
-  });
-  // Set all elements to the tallest height
-  elements.forEach((element) => {
-    element.style.height = `${tallestHeight}px`;
-  });
-}
+export function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export function MapDOM(domElement, selector, toString) {
+  let element = selector ? domElement.querySelector(selector) : domElement;
+  let treeObject = {};
+  let translate = (name) => {
+    return name.toLowerCase().replace(/(-\w)/g, text => {
+      return text.replace(/-/, '').toUpperCase();
+    });
+  };
+  let hasContent = (element) => {
+    let result = true;
+    if (/^\s*$/.test(element.textContent)) {
+      result = false;
+    }
+    return result;
+  };
+  let treeHTML = (element, object) => {
+    //let nodeName = translate(element.nodeName);
+    let nodeList = element.childNodes;
+    if (nodeList && nodeList.length > 0) {
+      for (let i = 0; i < nodeList.length; i++) {
+        let elm = nodeList[i];
+        if (elm.nodeType == 1) {
+          let letChildNodeName = translate(elm.nodeName);
+          if (!object[letChildNodeName]) {
+            object[letChildNodeName] = [];
+          }
+          object[letChildNodeName].push({});
+          treeHTML(elm, object[letChildNodeName][object[letChildNodeName].length - 1]);
+        }
+        else if (elm.nodeType == 3 && hasContent(elm)) {
+          object['text'] = (object['text'] || '') + elm.textContent;
+        }
+      }
+      for (const property in object) {
+        if (Array.isArray(object[property]) && object[property].length == 1) {
+          object[property] = object[property][0];
+        }
+      }
+    }
+    if (element.attributes && element.attributes.length > 0) {
+      for (let i = 0; i < element.attributes.length; i++) {
+        let name = translate(element.attributes[i].nodeName);
+        object[name] = element.attributes[i].nodeValue;
+      }
+    }
+    if (element.getAttribute('html') == 'true') {
+      object['html'] = element.innerHTML;
+    }
+  };
+  treeHTML(element, treeObject);
+  return toString ? JSON.stringify(treeObject) : treeObject;
+}
+export function generateUUID() {
+  let s4 = () => {
+    return Math.floor((1 + Math.random()) * 0x10000)
+      .toString(16)
+      .substring(1);
+  };
+  return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
+}
+export function debounce(func, wait, referer) {
+  let key = generateUUID();
+  if (!globalThis.debounceTimeouts) {
+    globalThis.debounceTimeouts = {};
+  }
+  return function executedFunction(e) {
+    var context = referer || this;
+    var args = e;
+    var callback = function () {
+      func(context, args);
+    };
+    clearTimeout(globalThis.debounceTimeouts[key]);
+    globalThis.debounceTimeouts[key] = setTimeout(callback, wait);
+  };
+}
+export function getFileExtension(filePath) {
+  if (filePath === undefined) {
+    throw new Error('filePath is not defined');
+  }
+  const lastDotIndex = filePath.lastIndexOf('.');
+  if (lastDotIndex === -1) {
+    // no extension found
+    return '';
+  }
+  return filePath.substring(lastDotIndex);
+}
+export function getLanguageFromURL() {
+  const urlPath = window.location.pathname;
+  const parts = urlPath.split('/');
+  const supportedLanguages = ['en', 'cn', 'tw', 'fr', 'de', 'it', 'ja', 'ko', 'es', 'pt'];
+  const languageCode = parts[1];
+  if (supportedLanguages.includes(languageCode)) {
+    return languageCode;
+  }
+  return 'en';
+}
+export function getSeoTagType(element, defaultTag = "span") {
+  if (element && element.children && element.children.length == 1) {
+    let firstChild = element.children[0];
+    let TagType = firstChild.tagName.toLowerCase();
+    element.removeChild(firstChild);
+    return [TagType, firstChild];
+  }
+  else {
+    return [defaultTag, element];
+  }
+}
+export function seoSlotReset(element) {
+  if (element && element.children && element.children.length == 1) {
+    let firstChild = element.firstElementChild;
+    element.innerHTML = firstChild.innerHTML;
+  }
+}
+// for elements in the light dom
+export function equalizeHeights(selector) {
+  const elements = document.querySelectorAll(selector);
+  //debugger
+  let tallestHeight = 0;
+  // 1. Find the tallest element
+  elements.forEach(element => {
+    const height = element.offsetHeight;
+    if (height > tallestHeight) {
+      tallestHeight = height;
+    }
+  });
+  console.log('tallest height: ' + tallestHeight);
+  // 2. Set all elements to the tallest height
+  elements.forEach(element => {
+    element.style.height = `${tallestHeight}px`;
+  });
+}
+//for elements in the shadow dom
+export function equalizeHeightsWithinShadow(selector, shadowRootOrHostElement) {
+  let elements;
+  // Determine if we're working with a shadow root or a host element that has a shadowRoot
+  if (shadowRootOrHostElement instanceof DocumentFragment) { // ShadowRoot is a kind of DocumentFragment
+    elements = shadowRootOrHostElement.querySelectorAll(selector);
+  }
+  else if (shadowRootOrHostElement.shadowRoot) {
+    elements = shadowRootOrHostElement.shadowRoot.querySelectorAll(selector);
+  }
+  else {
+    console.error("The provided element does not have a shadowRoot.");
+    return;
+  }
+  let tallestHeight = 0;
+  // Find the tallest element
+  elements.forEach((element) => {
+    const height = element.offsetHeight;
+    if (height > tallestHeight) {
+      tallestHeight = height;
+    }
+  });
+  // Set all elements to the tallest height
+  elements.forEach((element) => {
+    element.style.height = `${tallestHeight}px`;
+  });
+}

package/dist/collection/utils/validation-messages.js

@@ -1,111 +1,111 @@
-const ValidationMessages = {
-  de: {
-    required: 'Dieses Feld ist erforderlich.',
-    select: 'Bitte wählen Sie einen Wert.',
-    firstname: 'Bitte überprüfen Sie Ihren Vornamen.',
-    lastname: 'Bitte überprüfen Sie Ihren Nachnamen.',
-    validemail: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
-    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
-    companyemail: 'Bitte geben Sie eine Firmen-E-Mail-Adresse ein.',
-    tel: 'Telefonnummer ist erforderlich.',
-    validtel: 'Bitte geben Sie eine gültige Telefonnummer ein.',
-    confirmemail: "E-Mail-Adressen müssen übereinstimmen."
-  },
-  en: {
-    required: 'This field is required.',
-    select: 'Please select a value.',
-    firstname: 'Please check your firstname.',
-    lastname: 'Please check your lastname.',
-    validemail: 'Please enter a valid email.',
-    email: 'Email is required.',
-    companyemail: 'Please enter a company email.',
-    tel: 'Telephone number is required.',
-    validtel: 'Please enter a valid telephone number',
-    confirmemail: 'Email addresses must match.'
-  },
-  fr: {
-    required: 'Ce champ est obligatoire.',
-    select: 'Veuillez sélectionner une valeur.',
-    firstname: 'Veuillez vérifier votre prénom.',
-    lastname: 'Veuillez vérifier votre nom de famille.',
-    validemail: 'Veuillez saisir une adresse e-mail valide.',
-    email: 'Adresse e-mail requise.',
-    companyemail: 'Veuillez saisir une adresse e-mail professionnelle.',
-    tel: 'Numéro de téléphone requis.',
-    validtel: 'Veuillez saisir un numéro de téléphone valide.',
-    confirmemail: 'Les adresses e-mail doivent correspondre.'
-  },
-  ko: {
-    required: '이 필드는 필수입니다.',
-    select: '값을 선택해 주세요.',
-    firstname: '이름을 확인해 주세요.',
-    lastname: '성을 확인해 주세요.',
-    validemail: '유효한 이메일 주소를 입력해 주세요.',
-    email: '이메일 주소가 필요합니다.',
-    companyemail: '회사 이메일을 입력해 주세요.',
-    tel: '전화번호가 필요합니다.',
-    validtel: '유효한 전화번호를 입력해 주세요.',
-    confirmemail: "이메일 주소가 일치해야 합니다"
-  },
-  pt: {
-    required: 'Este campo é obrigatório.',
-    select: 'Por favor, selecione um valor.',
-    firstname: 'Por favor, verifique seu primeiro nome.',
-    lastname: 'Por favor, verifique seu sobrenome.',
-    validemail: 'Por favor, insira um endereço de e-mail válido.',
-    email: 'Endereço de e-mail é obrigatório.',
-    companyemail: 'Por favor, insira um e-mail da empresa.',
-    tel: 'Número de telefone é obrigatório.',
-    validtel: 'Por favor, insira um número de telefone válido.',
-    confirmemail: 'Os endereços de e-mail devem corresponder.'
-  },
-  cn: {
-    required: '此字段为必填项。',
-    select: '请选择一个值。',
-    firstname: '请检查您的名字。',
-    lastname: '请检查您的姓氏。',
-    validemail: '请输入有效的电子邮件地址。',
-    email: '需要电子邮件地址。',
-    companyemail: '请输入公司电子邮件。',
-    tel: '需要电话号码。',
-    validtel: '请输入有效的电话号码。',
-    confirmemail: '电子邮件地址必须匹配。'
-  },
-  tw: {
-    required: '此欄位為必填。',
-    select: '請選擇一個值。',
-    firstname: '請檢查您的名字。',
-    lastname: '請檢查您的姓氏。',
-    validemail: '請輸入有效的電子郵件地址。',
-    email: '需要電子郵件地址。',
-    companyemail: '請輸入公司電子郵件。',
-    tel: '需要電話號碼。',
-    validtel: '請輸入有效的電話號碼。',
-    confirmemail: '電子郵件地址必須匹配。'
-  },
-  ja: {
-    required: 'このフィールドは必須です。',
-    select: '値を選択してください。',
-    firstname: '名前を確認してください。',
-    lastname: '苗字を確認してください。',
-    validemail: '有効なメールアドレスを入力してください。',
-    email: 'メールアドレスが必要です。',
-    companyemail: '会社のメールアドレスを入力してください。',
-    tel: '電話番号が必要です。',
-    validtel: '有効な電話番号を入力してください。',
-    confirmemail: 'メールアドレスが一致する必要があります。'
-  },
-  it: {
-    required: 'Questo campo è obbligatorio.',
-    select: 'Si prega di selezionare un valore.',
-    firstname: 'Si prega di controllare il proprio nome.',
-    lastname: 'Si prega di controllare il proprio cognome.',
-    validemail: 'Si prega di inserire un indirizzo email valido.',
-    email: "L'indirizzo email è richiesto.",
-    companyemail: "Si prega di inserire un'email aziendale.",
-    tel: 'È richiesto un numero di telefono.',
-    validtel: 'Si prega di inserire un numero di telefono valido.',
-    confirmemail: 'Gli indirizzi email devono corrispondere.'
-  }
-};
-export { ValidationMessages };
+const ValidationMessages = {
+  de: {
+    required: 'Dieses Feld ist erforderlich.',
+    select: 'Bitte wählen Sie einen Wert.',
+    firstname: 'Bitte überprüfen Sie Ihren Vornamen.',
+    lastname: 'Bitte überprüfen Sie Ihren Nachnamen.',
+    validemail: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    email: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',
+    companyemail: 'Bitte geben Sie eine Firmen-E-Mail-Adresse ein.',
+    tel: 'Telefonnummer ist erforderlich.',
+    validtel: 'Bitte geben Sie eine gültige Telefonnummer ein.',
+    confirmemail: "E-Mail-Adressen müssen übereinstimmen."
+  },
+  en: {
+    required: 'This field is required.',
+    select: 'Please select a value.',
+    firstname: 'Please check your firstname.',
+    lastname: 'Please check your lastname.',
+    validemail: 'Please enter a valid email.',
+    email: 'Email is required.',
+    companyemail: 'Please enter a company email.',
+    tel: 'Telephone number is required.',
+    validtel: 'Please enter a valid telephone number',
+    confirmemail: 'Email addresses must match.'
+  },
+  fr: {
+    required: 'Ce champ est obligatoire.',
+    select: 'Veuillez sélectionner une valeur.',
+    firstname: 'Veuillez vérifier votre prénom.',
+    lastname: 'Veuillez vérifier votre nom de famille.',
+    validemail: 'Veuillez saisir une adresse e-mail valide.',
+    email: 'Adresse e-mail requise.',
+    companyemail: 'Veuillez saisir une adresse e-mail professionnelle.',
+    tel: 'Numéro de téléphone requis.',
+    validtel: 'Veuillez saisir un numéro de téléphone valide.',
+    confirmemail: 'Les adresses e-mail doivent correspondre.'
+  },
+  ko: {
+    required: '이 필드는 필수입니다.',
+    select: '값을 선택해 주세요.',
+    firstname: '이름을 확인해 주세요.',
+    lastname: '성을 확인해 주세요.',
+    validemail: '유효한 이메일 주소를 입력해 주세요.',
+    email: '이메일 주소가 필요합니다.',
+    companyemail: '회사 이메일을 입력해 주세요.',
+    tel: '전화번호가 필요합니다.',
+    validtel: '유효한 전화번호를 입력해 주세요.',
+    confirmemail: "이메일 주소가 일치해야 합니다"
+  },
+  pt: {
+    required: 'Este campo é obrigatório.',
+    select: 'Por favor, selecione um valor.',
+    firstname: 'Por favor, verifique seu primeiro nome.',
+    lastname: 'Por favor, verifique seu sobrenome.',
+    validemail: 'Por favor, insira um endereço de e-mail válido.',
+    email: 'Endereço de e-mail é obrigatório.',
+    companyemail: 'Por favor, insira um e-mail da empresa.',
+    tel: 'Número de telefone é obrigatório.',
+    validtel: 'Por favor, insira um número de telefone válido.',
+    confirmemail: 'Os endereços de e-mail devem corresponder.'
+  },
+  cn: {
+    required: '此字段为必填项。',
+    select: '请选择一个值。',
+    firstname: '请检查您的名字。',
+    lastname: '请检查您的姓氏。',
+    validemail: '请输入有效的电子邮件地址。',
+    email: '需要电子邮件地址。',
+    companyemail: '请输入公司电子邮件。',
+    tel: '需要电话号码。',
+    validtel: '请输入有效的电话号码。',
+    confirmemail: '电子邮件地址必须匹配。'
+  },
+  tw: {
+    required: '此欄位為必填。',
+    select: '請選擇一個值。',
+    firstname: '請檢查您的名字。',
+    lastname: '請檢查您的姓氏。',
+    validemail: '請輸入有效的電子郵件地址。',
+    email: '需要電子郵件地址。',
+    companyemail: '請輸入公司電子郵件。',
+    tel: '需要電話號碼。',
+    validtel: '請輸入有效的電話號碼。',
+    confirmemail: '電子郵件地址必須匹配。'
+  },
+  ja: {
+    required: 'このフィールドは必須です。',
+    select: '値を選択してください。',
+    firstname: '名前を確認してください。',
+    lastname: '苗字を確認してください。',
+    validemail: '有効なメールアドレスを入力してください。',
+    email: 'メールアドレスが必要です。',
+    companyemail: '会社のメールアドレスを入力してください。',
+    tel: '電話番号が必要です。',
+    validtel: '有効な電話番号を入力してください。',
+    confirmemail: 'メールアドレスが一致する必要があります。'
+  },
+  it: {
+    required: 'Questo campo è obbligatorio.',
+    select: 'Si prega di selezionare un valore.',
+    firstname: 'Si prega di controllare il proprio nome.',
+    lastname: 'Si prega di controllare il proprio cognome.',
+    validemail: 'Si prega di inserire un indirizzo email valido.',
+    email: "L'indirizzo email è richiesto.",
+    companyemail: "Si prega di inserire un'email aziendale.",
+    tel: 'È richiesto un numero di telefono.',
+    validtel: 'Si prega di inserire un numero di telefono valido.',
+    confirmemail: 'Gli indirizzi email devono corrispondere.'
+  }
+};
+export { ValidationMessages };