@ptcwebops/ptcw-design 6.4.36-beta → 6.5.0-upgrade

package/dist/collection/utils/utils.js

@@ -1,308 +1,310 @@
-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);
-    if (TagType == "font") {
-      TagType = defaultTag;
-    }
-    return [TagType, firstChild];
-  }
-  else {
-    return [defaultTag, element];
-  }
-}
-export function seoSlotReset(element) {
-  if (element && element.children && element.children.length == 1 && element.getAttribute('data-reset') != 'complete') {
-    let firstChild = element.firstElementChild;
-    element.innerHTML = firstChild.innerHTML;
-    element.setAttribute('data-reset', 'complete');
-  }
-}
-// for elements in the light dom
-export function equalizeHeights(selector, elem) {
-  let elements = elem.querySelectorAll(selector);
-  //console.log('element: ' + elements[0].tagName)
-  //reset height
-  elements.forEach((element) => {
-    element.style.removeProperty('height');
-  });
-  let tallestHeight = 0;
-  // Find the tallest element
-  elements.forEach((element) => {
-    const height = element.offsetHeight;
-    if (height > tallestHeight && element.classList.contains('hydrated')) {
-      tallestHeight = height;
-    }
-  });
-  if (tallestHeight > 0) {
-    // Set all elements to the tallest height
-    elements.forEach((element) => {
-      element.style.height = `${tallestHeight}px`;
-    });
-    //return true;
-  }
-}
-//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 nextUserInteractionEvent(sender, limit = 5000) {
-  const baseInteractions = ['click', 'scroll', 'mousemove', 'touchstart'];
-  const context = globalThis.window;
-  const key = generateUUID();
-  return new Promise((resolve) => {
-    let keyChain = getHydrationKeyChain(context);
-    keyChain[key] = false;
-    baseInteractions.forEach(function (interaction) {
-      context.addEventListener(interaction, function () {
-        if (!keyChain[key]) {
-          keyChain[key] = true;
-          resolve({
-            sender: sender,
-            interactionType: interaction
-          });
-        }
-      }, {
-        once: true
-      });
-      setTimeout(() => {
-        if (!keyChain[key]) {
-          keyChain[key] = true;
-          resolve({
-            sender: sender,
-            interactionType: interaction
-          });
-        }
-      }, limit);
-    });
-  });
-}
-function getHydrationKeyChain(context) {
-  if (!context.HydrationKeys) {
-    context.HydrationKeys = {};
-  }
-  return context.HydrationKeys;
-}
-/*
-  observeInView:
-    Trigger CSS Animations when elements are scrolled into view
-
-    This function uses the Intersection Observer API to determine if objects are within the viewport
-    It adds an 'in-view' class to elements when they come into view (and removes the class when not on screen)
-    Use to add @keyframe or transition animations to elements so they animate once they are on screen
-
-  How to use:
-    Import observeInView function in the component
-      import { observeInView } from '../../utils/utils';
-    Call the function with the host element and selector
-      observeInView(this.hostEle, '.ptc-animate');
-
-*/
-export function observeInView(hostEle, selector, runOnce = false) {
-  const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('in-view');
-        if (runOnce) {
-          observer.unobserve(entry.target);
-        }
-        return;
-      }
-      entry.target.classList.remove('in-view');
-    });
-  });
-  const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
-  allAnimatedElements.forEach((element) => observer.observe(element));
-}
-export function isHiddenUntilSupported() {
-  let elem = document.createElement("div");
-  elem.setAttribute('hidden', 'until-found');
-  let result = elem.hidden === 'until-found';
-  //console.debug(`is hidden until supported: ${(result?'yes':'no')}.`);
-  return result;
-}
-// retryHandler.ts
-export class RetryHandler {
-  constructor(retries = 3, delay = 1000) {
-    this.retries = retries;
-    this.delay = delay;
-  }
-  async execute(dataLookupFn) {
-    if (this.retries > 0 && !this.isSetContentAvailable()) {
-      console.warn(`Retrying... (${this.retries} attempts left)`);
-      this.retries--;
-      // Delay and then retry using setTimeout
-      setTimeout(() => {
-        this.execute(dataLookupFn);
-      }, this.delay);
-    }
-    else if (!this.isSetContentAvailable()) {
-      throw new Error('setContent is not available after multiple attempts');
-    }
-    else {
-      // Once setContent is detected, run the provided data lookup function
-      await dataLookupFn();
-    }
-  }
-  isSetContentAvailable() {
-    // Check if the setContent function exists in the window object
-    return typeof window.SetElqContent === 'function';
-  }
-}
-export class PreloaderDependency {
-  constructor(preloader) {
-    this.dependencyPromiseResolve = () => { };
-    this.dependencyPromiseReject = () => { };
-    this.resolve = () => this.dependencyPromiseResolve(true);
-    this.reject = () => this.dependencyPromiseReject();
-    const promise = new Promise((resolve, reject) => {
-      this.dependencyPromiseResolve = resolve;
-      this.dependencyPromiseReject = reject;
-    });
-    if (preloader) {
-      preloader.registerDependency(promise);
-    }
-  }
-}
-export function CheckDarkFocusState(context, el, classList = '.light-links,.background-grey-10,.background-plm-grey') {
-  if (context && context.darkFocusState != undefined && context.darkFocusState == false) {
-    let darkBgParent = el.closest(classList);
-    if (darkBgParent) {
-      context.darkFocusState = true;
-    }
-  }
-}
-export function isReducedMotion() {
-  var _a, _b;
-  return (_b = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, '(prefers-reduced-motion: reduce)').matches) !== null && _b !== void 0 ? _b : false;
-}
-export function onReducedMotionChange(cb) {
-  const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
-  const handler = (e) => cb(e.matches);
-  mql.addEventListener('change', handler);
-  cb(mql.matches); // initial run
-  return () => mql.removeEventListener('change', handler);
-}
+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);
+        if (TagType == "font") {
+            TagType = defaultTag;
+        }
+        return [TagType, firstChild];
+    }
+    else {
+        return [defaultTag, element];
+    }
+}
+export function seoSlotReset(element) {
+    if (element && element.children && element.children.length == 1 && element.getAttribute('data-reset') != 'complete') {
+        let firstChild = element.firstElementChild;
+        element.innerHTML = firstChild.innerHTML;
+        element.setAttribute('data-reset', 'complete');
+    }
+}
+// for elements in the light dom
+export function equalizeHeights(selector, elem) {
+    let elements = elem.querySelectorAll(selector);
+    //console.log('element: ' + elements[0].tagName)
+    //reset height
+    elements.forEach((element) => {
+        element.style.removeProperty('height');
+    });
+    let tallestHeight = 0;
+    // Find the tallest element
+    elements.forEach((element) => {
+        const height = element.offsetHeight;
+        if (height > tallestHeight && element.classList.contains('hydrated')) {
+            tallestHeight = height;
+        }
+    });
+    if (tallestHeight > 0) {
+        // Set all elements to the tallest height
+        elements.forEach((element) => {
+            element.style.height = `${tallestHeight}px`;
+        });
+        //return true;
+    }
+}
+//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 nextUserInteractionEvent(sender, limit = 5000) {
+    const baseInteractions = ['click', 'scroll', 'mousemove', 'touchstart'];
+    const context = globalThis.window;
+    const key = generateUUID();
+    return new Promise((resolve) => {
+        let keyChain = getHydrationKeyChain(context);
+        keyChain[key] = false;
+        baseInteractions.forEach(function (interaction) {
+            context.addEventListener(interaction, function () {
+                if (!keyChain[key]) {
+                    keyChain[key] = true;
+                    resolve({
+                        sender: sender,
+                        interactionType: interaction
+                    });
+                }
+            }, {
+                once: true
+            });
+            setTimeout(() => {
+                if (!keyChain[key]) {
+                    keyChain[key] = true;
+                    resolve({
+                        sender: sender,
+                        interactionType: interaction
+                    });
+                }
+            }, limit);
+        });
+    });
+}
+function getHydrationKeyChain(context) {
+    if (!context.HydrationKeys) {
+        context.HydrationKeys = {};
+    }
+    return context.HydrationKeys;
+}
+/*
+  observeInView:
+    Trigger CSS Animations when elements are scrolled into view
+
+    This function uses the Intersection Observer API to determine if objects are within the viewport
+    It adds an 'in-view' class to elements when they come into view (and removes the class when not on screen)
+    Use to add @keyframe or transition animations to elements so they animate once they are on screen
+
+  How to use:
+    Import observeInView function in the component
+      import { observeInView } from '../../utils/utils';
+    Call the function with the host element and selector
+      observeInView(this.hostEle, '.ptc-animate');
+
+*/
+export function observeInView(hostEle, selector, runOnce = false) {
+    const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('in-view');
+                if (runOnce) {
+                    observer.unobserve(entry.target);
+                }
+                return;
+            }
+            entry.target.classList.remove('in-view');
+        });
+    });
+    const allAnimatedElements = hostEle.shadowRoot.querySelectorAll(selector);
+    allAnimatedElements.forEach((element) => observer.observe(element));
+}
+export function isHiddenUntilSupported() {
+    let elem = document.createElement("div");
+    elem.setAttribute('hidden', 'until-found');
+    let result = elem.hidden === 'until-found';
+    //console.debug(`is hidden until supported: ${(result?'yes':'no')}.`);
+    return result;
+}
+// retryHandler.ts
+export class RetryHandler {
+    retries;
+    delay;
+    constructor(retries = 3, delay = 1000) {
+        this.retries = retries;
+        this.delay = delay;
+    }
+    async execute(dataLookupFn) {
+        if (this.retries > 0 && !this.isSetContentAvailable()) {
+            console.warn(`Retrying... (${this.retries} attempts left)`);
+            this.retries--;
+            // Delay and then retry using setTimeout
+            setTimeout(() => {
+                this.execute(dataLookupFn);
+            }, this.delay);
+        }
+        else if (!this.isSetContentAvailable()) {
+            throw new Error('setContent is not available after multiple attempts');
+        }
+        else {
+            // Once setContent is detected, run the provided data lookup function
+            await dataLookupFn();
+        }
+    }
+    isSetContentAvailable() {
+        // Check if the setContent function exists in the window object
+        return typeof window.SetElqContent === 'function';
+    }
+}
+export class PreloaderDependency {
+    dependencyPromiseResolve = () => { };
+    dependencyPromiseReject = () => { };
+    constructor(preloader) {
+        const promise = new Promise((resolve, reject) => {
+            this.dependencyPromiseResolve = resolve;
+            this.dependencyPromiseReject = reject;
+        });
+        if (preloader) {
+            preloader.registerDependency(promise);
+        }
+    }
+    resolve = () => this.dependencyPromiseResolve(true);
+    reject = () => this.dependencyPromiseReject();
+}
+export function CheckDarkFocusState(context, el, classList = '.light-links,.background-grey-10,.background-plm-grey') {
+    if (context && context.darkFocusState != undefined && context.darkFocusState == false) {
+        let darkBgParent = el.closest(classList);
+        if (darkBgParent) {
+            context.darkFocusState = true;
+        }
+    }
+}
+export function isReducedMotion() {
+    return window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ?? false;
+}
+export function onReducedMotionChange(cb) {
+    const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (e) => cb(e.matches);
+    mql.addEventListener('change', handler);
+    cb(mql.matches); // initial run
+    return () => mql.removeEventListener('change', handler);
+}
+//# sourceMappingURL=utils.js.map