@tagadapay/plugin-sdk 3.0.9 → 3.0.12

package/dist/external-tracker.js

@@ -1,5 +1,5 @@
 /**
- * TagadaPay External Tracker v3.0.9
+ * TagadaPay External Tracker v3.0.12
  * CDN Bundle - Standalone tracking for external pages (Debug Build)
  * @license MIT
  */
@@ -4634,99 +4634,224 @@ var TagadaTrackerBundle = (() => {
      * Used by config editor to highlight elements in preview without altering the element's style
      */
     applyStylesToElement(elementId, styles) {
-      var _a;
       if (typeof document === "undefined") return;
-      const element = document.querySelector('[editor-id~="'.concat(elementId, '"]'));
-      if (!element) {
-        if (this.state.debugMode) {
-          console.warn('[TagadaClient] Element with editor-id containing "'.concat(elementId, '" not found'));
-        }
-        return;
+      const staticHighlightId = "tagada-editor-highlight";
+      const existingHighlight = document.getElementById(staticHighlightId);
+      if (existingHighlight) {
+        existingHighlight.remove();
       }
-      const voidElements = /* @__PURE__ */ new Set([
-        "area",
-        "base",
-        "br",
-        "col",
-        "embed",
-        "hr",
-        "img",
-        "input",
-        "link",
-        "meta",
-        "param",
-        "source",
-        "track",
-        "wbr"
-      ]);
-      const isVoidElement = voidElements.has(element.tagName.toLowerCase());
-      let targetElement = element;
-      let wrapper = null;
-      if (isVoidElement) {
-        const parent = element.parentElement;
-        const existingWrapper = parent == null ? void 0 : parent.getAttribute("data-tagada-highlight-wrapper");
-        if (existingWrapper === "true") {
-          targetElement = parent;
-        } else {
-          wrapper = document.createElement("div");
-          wrapper.setAttribute("data-tagada-highlight-wrapper", "true");
-          const computedStyle2 = window.getComputedStyle(element);
-          const elementDisplay = computedStyle2.display;
-          if (elementDisplay === "inline") {
-            wrapper.style.display = "inline-block";
+      const applyToElement = (element) => {
+        var _a;
+        const voidElements = /* @__PURE__ */ new Set([
+          "area",
+          "base",
+          "br",
+          "col",
+          "embed",
+          "hr",
+          "img",
+          "input",
+          "link",
+          "meta",
+          "param",
+          "source",
+          "track",
+          "wbr"
+        ]);
+        const isVoidElement = voidElements.has(element.tagName.toLowerCase());
+        let targetElement = element;
+        if (isVoidElement) {
+          const parent = element.parentElement;
+          const existingWrapper = parent == null ? void 0 : parent.getAttribute("data-tagada-highlight-wrapper");
+          if (existingWrapper === "true" && parent instanceof HTMLElement) {
+            targetElement = parent;
           } else {
-            wrapper.style.display = elementDisplay;
+            const newWrapper = document.createElement("div");
+            newWrapper.setAttribute("data-tagada-highlight-wrapper", "true");
+            const computedStyle2 = window.getComputedStyle(element);
+            const elementDisplay = computedStyle2.display;
+            if (elementDisplay === "inline") {
+              newWrapper.style.display = "inline-block";
+            } else {
+              newWrapper.style.display = elementDisplay;
+            }
+            newWrapper.style.position = "relative";
+            if (elementDisplay === "inline" || elementDisplay.includes("inline")) {
+              const verticalAlign = computedStyle2.verticalAlign;
+              if (verticalAlign && verticalAlign !== "baseline") {
+                newWrapper.style.verticalAlign = verticalAlign;
+              }
+            }
+            const spacingProperties = [
+              // Width and height
+              "width",
+              "height",
+              "minWidth",
+              "minHeight",
+              "maxWidth",
+              "maxHeight",
+              // Flex properties
+              "flex",
+              "flexGrow",
+              "flexShrink",
+              "flexBasis",
+              // Grid properties
+              "gridColumn",
+              "gridRow",
+              "gridColumnStart",
+              "gridColumnEnd",
+              "gridRowStart",
+              "gridRowEnd",
+              "gridArea",
+              // Alignment properties
+              "alignSelf",
+              "justifySelf",
+              // Box sizing
+              "boxSizing",
+              // Gap (for grid/flex)
+              "gap",
+              "rowGap",
+              "columnGap",
+              // Order (for flex/grid)
+              "order",
+              // Aspect ratio
+              "aspectRatio"
+            ];
+            spacingProperties.forEach((prop) => {
+              const camelProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+              const value = computedStyle2.getPropertyValue(camelProp);
+              if (value && value.trim() !== "") {
+                if (prop === "flex" && value !== "none" && value !== "0 1 auto") {
+                  newWrapper.style.flex = value;
+                } else if (prop === "boxSizing") {
+                  newWrapper.style.boxSizing = value;
+                } else {
+                  newWrapper.style.setProperty(camelProp, value);
+                }
+              }
+            });
+            if (element.style) {
+              const inlineSpacingProps = [
+                "width",
+                "height",
+                "min-width",
+                "min-height",
+                "max-width",
+                "max-height",
+                "flex",
+                "flex-grow",
+                "flex-shrink",
+                "flex-basis",
+                "grid-column",
+                "grid-row",
+                "grid-column-start",
+                "grid-column-end",
+                "grid-row-start",
+                "grid-row-end",
+                "grid-area",
+                "align-self",
+                "justify-self",
+                "box-sizing",
+                "gap",
+                "row-gap",
+                "column-gap",
+                "order",
+                "aspect-ratio"
+              ];
+              inlineSpacingProps.forEach((prop) => {
+                const inlineValue = element.style.getPropertyValue(prop);
+                if (inlineValue) {
+                  newWrapper.style.setProperty(prop, inlineValue);
+                }
+              });
+            }
+            (_a = element.parentNode) == null ? void 0 : _a.insertBefore(newWrapper, element);
+            newWrapper.appendChild(element);
+            targetElement = newWrapper;
           }
-          wrapper.style.position = "relative";
-          if (elementDisplay === "inline" || elementDisplay.includes("inline")) {
-            const verticalAlign = computedStyle2.verticalAlign;
-            if (verticalAlign && verticalAlign !== "baseline") {
-              wrapper.style.verticalAlign = verticalAlign;
+        }
+        const computedStyle = getComputedStyle(isVoidElement ? element : targetElement);
+        if (targetElement.style.position === "static" || !targetElement.style.position) {
+          targetElement.style.position = "relative";
+        }
+        const highlightDiv = document.createElement("div");
+        highlightDiv.id = staticHighlightId;
+        highlightDiv.style.position = "absolute";
+        highlightDiv.style.inset = "0";
+        highlightDiv.style.pointerEvents = "none";
+        highlightDiv.style.zIndex = "9999";
+        highlightDiv.style.boxSizing = "border-box";
+        highlightDiv.style.background = "none";
+        highlightDiv.style.border = "none";
+        highlightDiv.style.outline = "none";
+        highlightDiv.style.margin = "0";
+        highlightDiv.style.padding = "0";
+        const borderRadius = computedStyle.borderRadius;
+        if (borderRadius) {
+          highlightDiv.style.borderRadius = borderRadius;
+        }
+        targetElement.appendChild(highlightDiv);
+        const stylesToApply = styles || { boxShadow: "0 0 0 2px rgb(239 68 68)" };
+        Object.entries(stylesToApply).forEach(([property, value]) => {
+          const camelProperty = property.includes("-") ? property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : property;
+          if (property.includes("-")) {
+            highlightDiv.style.setProperty(property, value);
+          } else {
+            highlightDiv.style[camelProperty] = value;
+          }
+        });
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
+        if (this.state.debugMode) {
+          const appliedStyles = Object.entries(stylesToApply).map(([k, v]) => "".concat(k, ": ").concat(v)).join("; ");
+          console.log("[TagadaClient] Applied styles to highlight div of element #".concat(elementId, ":"), appliedStyles);
+        }
+      };
+      const maxAttempts = 5;
+      const intervalMs = 1e3;
+      let attempts = 0;
+      const isElementHidden = (element) => {
+        const style = window.getComputedStyle(element);
+        return style.display === "none" || style.visibility === "hidden" || style.opacity === "0" || element.hidden || element.offsetWidth === 0 || element.offsetHeight === 0;
+      };
+      const findAndApply = () => {
+        const elements = document.querySelectorAll('[editor-id~="'.concat(elementId, '"]'));
+        if (elements.length === 0) {
+          attempts += 1;
+          if (attempts >= maxAttempts) {
+            if (this.state.debugMode) {
+              console.warn(
+                '[TagadaClient] Element with editor-id containing "'.concat(elementId, '" not found after ').concat(maxAttempts, " attempts")
+              );
             }
+            return;
+          }
+          if (this.state.debugMode) {
+            console.warn(
+              '[TagadaClient] Element with editor-id containing "'.concat(elementId, '" not found (attempt ').concat(attempts, "/").concat(maxAttempts, "), retrying in ").concat(intervalMs / 1e3, "s")
+            );
           }
-          (_a = element.parentNode) == null ? void 0 : _a.insertBefore(wrapper, element);
-          wrapper.appendChild(element);
-          targetElement = wrapper;
+          setTimeout(findAndApply, intervalMs);
+          return;
         }
-      }
-      const computedStyle = getComputedStyle(isVoidElement ? element : targetElement);
-      if (targetElement.style.position === "static" || !targetElement.style.position) {
-        targetElement.style.position = "relative";
-      }
-      const staticHighlightId = "tagada-editor-highlight";
-      const existingHighlight = document.getElementById(staticHighlightId);
-      if (existingHighlight) {
-        existingHighlight.remove();
-      }
-      const highlightDiv = document.createElement("div");
-      highlightDiv.id = staticHighlightId;
-      highlightDiv.style.position = "absolute";
-      highlightDiv.style.inset = "0";
-      highlightDiv.style.pointerEvents = "none";
-      highlightDiv.style.zIndex = "9999";
-      highlightDiv.style.boxSizing = "border-box";
-      highlightDiv.style.background = "none";
-      highlightDiv.style.border = "none";
-      highlightDiv.style.outline = "none";
-      const borderRadius = computedStyle.borderRadius;
-      if (borderRadius) {
-        highlightDiv.style.borderRadius = borderRadius;
-      }
-      targetElement.appendChild(highlightDiv);
-      const stylesToApply = styles || { boxShadow: "0 0 0 2px rgb(239 68 68)" };
-      Object.entries(stylesToApply).forEach(([property, value]) => {
-        const camelProperty = property.includes("-") ? property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase()) : property;
-        if (property.includes("-")) {
-          highlightDiv.style.setProperty(property, value);
+        let element = null;
+        if (elements.length === 1) {
+          element = elements[0];
         } else {
-          highlightDiv.style[camelProperty] = value;
+          for (let i = 0; i < elements.length; i++) {
+            if (!isElementHidden(elements[i])) {
+              element = elements[i];
+              break;
+            }
+          }
+          if (!element) {
+            element = elements[0];
+          }
         }
-      });
-      element.scrollIntoView({ behavior: "smooth", block: "center" });
-      if (this.state.debugMode) {
-        const appliedStyles = Object.entries(stylesToApply).map(([k, v]) => "".concat(k, ": ").concat(v)).join("; ");
-        console.log("[TagadaClient] Applied styles to highlight div of element #".concat(elementId, ":"), appliedStyles);
-      }
+        if (element) {
+          applyToElement(element);
+        }
+      };
+      findAndApply();
     }
   };