@salesforce/ui-bundle 1.117.2

package/dist/design/design-mode-interactions.js

@@ -0,0 +1,761 @@
+/**
+ * Design Mode Interactions (Bundled)
+ *
+ * This file is auto-generated by esbuild from the modular design mode interactions files.
+ * Do not edit this file directly - edit the modules in src/design/interactions/
+ */
+(function () {
+
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/design/interactions/utils/sourceUtils.ts
+  function parseOptionalInt(value) {
+    if (value === null || value === void 0 || value === "") {
+      return null;
+    }
+    const parsed = Number.parseInt(String(value), 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  function parseSourceFileAttribute(value) {
+    const match = /^(.*):(\d+):(\d+)$/.exec(value);
+    if (!match) {
+      return { fileName: value, lineNumber: null, columnNumber: null };
+    }
+    return {
+      fileName: match[1] ?? value,
+      lineNumber: parseOptionalInt(match[2]),
+      columnNumber: parseOptionalInt(match[3])
+    };
+  }
+  function getSourceFromDataAttributes(element) {
+    if (!element) {
+      return null;
+    }
+    const source = element.getAttribute("data-source-file") || null;
+    if (!source) {
+      return null;
+    }
+    return parseSourceFileAttribute(source);
+  }
+  function findElementsBySourceLocation(location) {
+    const results = [];
+    const elements = document.querySelectorAll("[data-source-file]");
+    for (const el of elements) {
+      const elSource = getSourceFromDataAttributes(el);
+      if (elSource && elSource.fileName === location.fileName && elSource.lineNumber === location.lineNumber && elSource.columnNumber === location.columnNumber) {
+        results.push(el);
+      }
+    }
+    return results;
+  }
+  function parseSourceLocation(sl) {
+    if (!sl || typeof sl !== "object") return void 0;
+    const obj = sl;
+    return {
+      fileName: String(obj.sourceFile ?? ""),
+      lineNumber: typeof obj.lineNumber === "number" ? obj.lineNumber : null,
+      columnNumber: typeof obj.columnNumber === "number" ? obj.columnNumber : null
+    };
+  }
+  function getLabelFromSource(element) {
+    if (!element) {
+      return "";
+    }
+    const source = element.getAttribute("data-source-file");
+    if (!source) {
+      return element.tagName ? element.tagName.toLowerCase() : "";
+    }
+    const { fileName } = parseSourceFileAttribute(source);
+    const parts = fileName.split(/[/\\]/);
+    const baseName = parts[parts.length - 1] || fileName;
+    console.log("baseName", baseName);
+    return baseName;
+  }
+
+  // src/design/interactions/editableManager.ts
+  var TEXT_TAGS = ["H1", "H2", "H3", "H4", "H5", "H6", "P", "SPAN", "A", "BUTTON", "LABEL"];
+  var EditableManager = class {
+    constructor(communicationManager) {
+      __publicField(this, "communicationManager");
+      __publicField(this, "boundHandleBlur");
+      __publicField(this, "boundHandleKeydown");
+      __publicField(this, "boundHandleInput");
+      __publicField(this, "editableGroup");
+      this.communicationManager = communicationManager;
+      this.boundHandleBlur = this._handleBlur.bind(this);
+      this.boundHandleKeydown = this._handleKeydown.bind(this);
+      this.boundHandleInput = this._handleInput.bind(this);
+      this.editableGroup = [];
+    }
+    makeEditableIfText(element) {
+      if (!this._isTextElement(element)) {
+        return;
+      }
+      const source = getSourceFromDataAttributes(element);
+      const siblings = source ? findElementsBySourceLocation(source) : [];
+      const others = siblings.filter((el) => el !== element);
+      this.editableGroup = [element, ...others];
+      for (const el of this.editableGroup) {
+        el.dataset.originalText = el.textContent ?? "";
+      }
+      element.contentEditable = "true";
+      element.addEventListener("blur", this.boundHandleBlur);
+      element.addEventListener("keydown", this.boundHandleKeydown);
+      element.addEventListener("input", this.boundHandleInput);
+    }
+    removeEditable(element) {
+      if (element.contentEditable === "true") {
+        element.contentEditable = "false";
+      }
+      element.removeEventListener("blur", this.boundHandleBlur);
+      element.removeEventListener("keydown", this.boundHandleKeydown);
+      element.removeEventListener("input", this.boundHandleInput);
+      for (const el of this.editableGroup) {
+        delete el.dataset.originalText;
+      }
+      this.editableGroup = [];
+    }
+    _isTextElement(element) {
+      return TEXT_TAGS.includes(element.tagName) && (element.textContent ?? "").trim().length > 0 && element.dataset.textType === "static";
+    }
+    _handleInput(e) {
+      const primary = e.target;
+      const text = primary.textContent ?? "";
+      for (let i = 1; i < this.editableGroup.length; i++) {
+        this.editableGroup[i].textContent = text;
+      }
+    }
+    _handleBlur(e) {
+      const element = e.target;
+      const newText = element.textContent ?? "";
+      const originalText = element.dataset.originalText ?? "";
+      if (newText !== originalText) {
+        for (const el of this.editableGroup) {
+          el.dataset.originalText = newText;
+        }
+        if (this.communicationManager) {
+          this.communicationManager.notifyTextChange(element, originalText, newText);
+        }
+      }
+      this.removeEditable(element);
+    }
+    _handleKeydown(e) {
+      const element = e.target;
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        element.blur();
+      }
+      if (e.key === "Escape") {
+        for (const el of this.editableGroup) {
+          if (el.dataset.originalText) {
+            el.textContent = el.dataset.originalText;
+          }
+        }
+        element.blur();
+      }
+    }
+  };
+
+  // src/design/interactions/utils/cssUtils.ts
+  function getElementStyles(element) {
+    if (!element) return {};
+    const computed = window.getComputedStyle(element);
+    const inlineStyle = element.style;
+    const prop = (name, fallback) => ({
+      inline: inlineStyle[name] || (fallback ? inlineStyle[fallback] : "") || "",
+      computed: (fallback ? computed[fallback] : computed[name]) || ""
+    });
+    const box = (shorthand, top, right, bottom, left) => {
+      let inlineValue = inlineStyle[shorthand] || "";
+      if (!inlineValue) {
+        const iT = inlineStyle[top] || "", iR = inlineStyle[right] || "", iB = inlineStyle[bottom] || "", iL = inlineStyle[left] || "";
+        if (iT || iR || iB || iL) {
+          inlineValue = `${iT || "0px"} ${iR || "0px"} ${iB || "0px"} ${iL || "0px"}`;
+        }
+      }
+      return {
+        inline: inlineValue,
+        computed: `${computed[top] || ""} ${computed[right] || ""} ${computed[bottom] || ""} ${computed[left] || ""}`
+      };
+    };
+    return {
+      width: prop("width"),
+      minWidth: prop("minWidth"),
+      maxWidth: prop("maxWidth"),
+      height: prop("height"),
+      minHeight: prop("minHeight"),
+      maxHeight: prop("maxHeight"),
+      overflow: prop("overflow"),
+      padding: box("padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"),
+      margin: box("margin", "marginTop", "marginRight", "marginBottom", "marginLeft"),
+      backgroundColor: prop("backgroundColor"),
+      borderWidth: box(
+        "borderWidth",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth"
+      ),
+      borderStyle: prop("borderStyle", "borderTopStyle"),
+      borderColor: prop("borderColor", "borderTopColor"),
+      borderRadius: box(
+        "borderRadius",
+        "borderTopLeftRadius",
+        "borderTopRightRadius",
+        "borderBottomRightRadius",
+        "borderBottomLeftRadius"
+      ),
+      color: prop("color"),
+      fontFamily: prop("fontFamily"),
+      fontSize: prop("fontSize"),
+      fontWeight: prop("fontWeight"),
+      fontStyle: prop("fontStyle"),
+      lineHeight: prop("lineHeight"),
+      letterSpacing: prop("letterSpacing"),
+      textAlign: prop("textAlign"),
+      textDecoration: prop("textDecoration", "textDecorationLine"),
+      textTransform: prop("textTransform")
+    };
+  }
+
+  // src/design/interactions/communicationManager.ts
+  var CommunicationManager = class {
+    constructor() {
+    }
+    /**
+     * Notify the extension about a selected component
+     * @param element - The selected element
+     */
+    notifyComponentSelected(element) {
+      const label = getLabelFromSource(element);
+      const wasSelected = element.classList.contains("design-mode-selected");
+      if (wasSelected) {
+        element.classList.remove("design-mode-selected");
+      }
+      const styles = getElementStyles(element);
+      if (wasSelected) {
+        element.classList.add("design-mode-selected");
+      }
+      const debugSource = getSourceFromDataAttributes(element);
+      const textType = element.dataset?.textType ?? "none";
+      const hasNonEditableText = TEXT_TAGS.includes(element.tagName) && (textType === "dynamic" || textType === "mixed");
+      try {
+        if (window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: "component-selected",
+              component: {
+                name: label,
+                tagName: element.tagName,
+                styles: {
+                  ...styles
+                },
+                debugSource,
+                hasNonEditableText
+              }
+            },
+            "*"
+          );
+        }
+      } catch (error) {
+        console.log("Could not notify extension:", error);
+      }
+      window.selectedComponentInfo = {
+        name: label,
+        element,
+        tagName: element.tagName
+      };
+    }
+    /**
+     * Notify the extension about a text change
+     * @param element - The element that changed
+     * @param originalText - The original text
+     * @param newText - The new text
+     */
+    notifyTextChange(element, originalText, newText) {
+      const label = getLabelFromSource(element);
+      const debugSource = getSourceFromDataAttributes(element);
+      try {
+        if (window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: "text-changed",
+              change: {
+                componentName: label,
+                tagName: element.tagName,
+                originalText,
+                newText,
+                debugSource
+              }
+            },
+            "*"
+          );
+        }
+      } catch (error) {
+        console.log("Could not notify extension about text change:", error);
+      }
+    }
+    /**
+     * Notify the parent window that interactions initialization is complete
+     */
+    notifyInitializationComplete() {
+      try {
+        if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+          window.parent.postMessage(
+            {
+              type: "interactions-initialized"
+            },
+            "*"
+          );
+        }
+      } catch (error) {
+        const err = error;
+        console.warn("Could not send initialization message to parent:", err.message);
+      }
+    }
+  };
+
+  // src/design/interactions/componentMatcher.ts
+  var ComponentMatcher = class {
+    constructor(options = {}) {
+      __publicField(this, "allowlist");
+      this.allowlist = options.allowlist ?? [];
+    }
+    /**
+     * Check whether an element contains compile-time source metadata attributes.
+     * @param element - The element to check
+     * @returns True if the data-source-file attribute is present
+     */
+    hasSourceMetadata(element) {
+      if (!element) {
+        return false;
+      }
+      return element.hasAttribute("data-source-file");
+    }
+    matchesList(element, selectors) {
+      return selectors.some((selector) => element.matches(selector));
+    }
+    /**
+     * Checks if a label represents a component name (not a fallback like tag name, ID, or text content)
+     * @param label - The label to check
+     * @param tagName - The element's tag name (lowercase)
+     * @returns True if the label is a component name
+     */
+    isComponentNameLabel(label, tagName) {
+      return label !== tagName && !label.includes("#") && !label.includes("(") && !label.includes('"');
+    }
+    /**
+     * Check if an element is highlightable.
+     * @param element - The element to check
+     * @returns True if the element should be highlighted
+     */
+    isHighlightableElement(element) {
+      if (!element || element === document.body || element === document.documentElement) {
+        return false;
+      }
+      if (!this.hasSourceMetadata(element)) {
+        return false;
+      }
+      if (this.allowlist.length > 0) {
+        return this.matchesList(element, this.allowlist);
+      }
+      return true;
+    }
+    /**
+     * Find the nearest highlightable element by walking up the DOM tree
+     * @param target - The target element
+     * @returns The highlightable element or null
+     */
+    findHighlightableElement(target) {
+      if (!target || target === document.body || target === document.documentElement) {
+        return null;
+      }
+      const closest = typeof target.closest === "function" ? target.closest("[data-source-file]") : null;
+      if (closest && closest !== document.body && closest !== document.documentElement && this.isHighlightableElement(closest)) {
+        return closest;
+      }
+      let current = target;
+      while (current && current !== document.body && current !== document.documentElement) {
+        if (this.isHighlightableElement(current)) {
+          return current;
+        }
+        current = current.parentElement;
+      }
+      return null;
+    }
+  };
+
+  // src/design/interactions/eventHandlers.ts
+  var EventHandlers = class {
+    constructor(isInteractionsActive, componentMatcher, styleManager, editableManager, communicationManager) {
+      __publicField(this, "isInteractionsActive");
+      __publicField(this, "componentMatcher");
+      __publicField(this, "styleManager");
+      __publicField(this, "editableManager");
+      __publicField(this, "communicationManager");
+      __publicField(this, "currentHighlightedElements");
+      __publicField(this, "selectedElement");
+      __publicField(this, "selectedElements");
+      this.isInteractionsActive = isInteractionsActive;
+      this.componentMatcher = componentMatcher;
+      this.styleManager = styleManager;
+      this.editableManager = editableManager;
+      this.communicationManager = communicationManager;
+      this.currentHighlightedElements = [];
+      this.selectedElement = null;
+      this.selectedElements = [];
+      this.handleMouseOver = this.handleMouseOver.bind(this);
+      this.handleMouseLeave = this.handleMouseLeave.bind(this);
+      this.handleClick = this.handleClick.bind(this);
+    }
+    _findHighlightableElement(target) {
+      return this.componentMatcher.findHighlightableElement(target);
+    }
+    handleMouseOver(e) {
+      if (!this.isInteractionsActive()) {
+        return;
+      }
+      e.stopPropagation();
+      const target = e.target;
+      if (target.nodeType !== 1 || target.tagName === "HTML" || target.tagName === "BODY") {
+        return;
+      }
+      const element = this._findHighlightableElement(target);
+      if (!element) {
+        return;
+      }
+      if (this.currentHighlightedElements.includes(element) || this.selectedElement && this.selectedElement === element) {
+        return;
+      }
+      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
+      }
+      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+      this.styleManager.highlightElements(allElements);
+      this.currentHighlightedElements = allElements;
+    }
+    handleMouseLeave() {
+      if (!this.isInteractionsActive()) {
+        return;
+      }
+      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
+      }
+    }
+    handleClick(e) {
+      if (!this.isInteractionsActive()) {
+        return;
+      }
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.target;
+      if (target.nodeType !== 1 || target.tagName === "HTML" || target.tagName === "BODY") {
+        return;
+      }
+      const element = this._findHighlightableElement(target);
+      if (!element) {
+        return;
+      }
+      if (this.selectedElement && this.selectedElement === element) {
+        return;
+      }
+      if (this.selectedElement) {
+        this.styleManager.deselectElements(this.selectedElements);
+        this.editableManager.removeEditable(this.selectedElement);
+      }
+      if (this.currentHighlightedElements.length > 0) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
+      }
+      this.selectedElement = element;
+      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+      this.selectedElements = allElements;
+      this.styleManager.selectElements(allElements);
+      this.editableManager.makeEditableIfText(element);
+      this.communicationManager.notifyComponentSelected(element);
+    }
+    clearAll() {
+      if (this.currentHighlightedElements.length > 0) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
+      }
+      if (this.selectedElement) {
+        this.styleManager.deselectElements(this.selectedElements);
+        this.editableManager.removeEditable(this.selectedElement);
+        this.selectedElement = null;
+        this.selectedElements = [];
+      }
+    }
+    getSelectedElement() {
+      return this.selectedElement;
+    }
+  };
+
+  // src/design/interactions/styleManager.ts
+  var StyleManager = class {
+    constructor() {
+      __publicField(this, "styleId");
+      __publicField(this, "stylesAdded");
+      this.styleId = "design-mode-styles";
+      this.stylesAdded = false;
+    }
+    /**
+     * Add CSS styles for highlighting to the document
+     */
+    addHighlightStyles() {
+      if (this.stylesAdded) {
+        return;
+      }
+      const style = document.createElement("style");
+      style.id = this.styleId;
+      style.textContent = this._getStyles();
+      document.head.appendChild(style);
+      this.stylesAdded = true;
+    }
+    /**
+     * Remove highlight styles from the document
+     */
+    removeHighlightStyles() {
+      const style = document.getElementById(this.styleId);
+      if (style) {
+        style.remove();
+        this.stylesAdded = false;
+      }
+    }
+    /**
+     * Get the CSS styles for highlighting
+     * @private
+     * @returns CSS styles
+     */
+    _getStyles() {
+      return `
+      .design-mode-highlight {
+        outline: 4px dashed #007acc !important;
+        outline-offset: -4px !important;
+        transition: all 0.2s ease !important;
+        position: relative !important;
+        cursor: pointer !important;
+      }
+      .design-mode-selected {
+        outline: 5px dashed #ff6b35 !important;
+        outline-offset: -5px !important;
+        position: relative !important;
+      }
+    `;
+    }
+    /**
+     * Apply highlight class to one or more elements
+     * @param elements - The elements to highlight
+     */
+    highlightElements(elements) {
+      for (const el of elements) {
+        el.classList.add("design-mode-highlight");
+      }
+    }
+    /**
+     * Remove highlight class from one or more elements
+     * @param elements - The elements to unhighlight
+     */
+    unhighlightElements(elements) {
+      for (const el of elements) {
+        el.classList.remove("design-mode-highlight");
+      }
+    }
+    /**
+     * Apply selected class to one or more elements
+     * @param elements - The elements to select
+     */
+    selectElements(elements) {
+      for (const el of elements) {
+        el.classList.add("design-mode-selected");
+      }
+    }
+    /**
+     * Remove selected class from one or more elements
+     * @param elements - The elements to deselect
+     */
+    deselectElements(elements) {
+      for (const el of elements) {
+        el.classList.remove("design-mode-selected");
+      }
+    }
+  };
+
+  // src/design/interactions/interactionsController.ts
+  var InteractionsController = class {
+    constructor(enabled = true) {
+      __publicField(this, "enabled");
+      __publicField(this, "isActive");
+      __publicField(this, "componentMatcher");
+      __publicField(this, "styleManager");
+      __publicField(this, "communicationManager");
+      __publicField(this, "editableManager");
+      __publicField(this, "eventHandlers");
+      this.enabled = enabled;
+      this.isActive = false;
+      this.componentMatcher = new ComponentMatcher({
+        allowlist: [
+          "div",
+          "p",
+          "span",
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "a",
+          "button",
+          "input",
+          "select",
+          "textarea",
+          "label",
+          "section",
+          "article",
+          "main",
+          "aside",
+          "header",
+          "footer",
+          "nav",
+          "figure",
+          "figcaption",
+          "ul",
+          "ol",
+          "li",
+          "table",
+          "tr",
+          "td",
+          "th",
+          "blockquote",
+          "img"
+        ]
+      });
+      this.styleManager = new StyleManager();
+      this.communicationManager = new CommunicationManager();
+      this.editableManager = new EditableManager(this.communicationManager);
+      this.eventHandlers = new EventHandlers(
+        () => this.isActive,
+        this.componentMatcher,
+        this.styleManager,
+        this.editableManager,
+        this.communicationManager
+      );
+    }
+    /**
+     * Initialize the design mode interactions
+     */
+    initialize() {
+      if (!this.enabled) {
+        console.log("Design Mode Interactions disabled");
+        return;
+      }
+      console.log("Initializing Design Mode Interactions...");
+      this.styleManager.addHighlightStyles();
+      document.addEventListener("mouseover", this.eventHandlers.handleMouseOver);
+      document.addEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+      document.addEventListener("click", this.eventHandlers.handleClick, true);
+      console.log("Design Mode Interactions initialized!");
+      this.communicationManager.notifyInitializationComplete();
+    }
+    /**
+     * Enable the design mode interactions
+     */
+    enable() {
+      this.isActive = true;
+      console.log("Design Mode Interactions enabled");
+    }
+    /**
+     * Disable the design mode interactions
+     */
+    disable() {
+      this.isActive = false;
+      this.eventHandlers.clearAll();
+      console.log("Design Mode Interactions disabled");
+    }
+    resolveTargets(sourceLocation) {
+      let location = sourceLocation ?? null;
+      if (!location?.fileName) {
+        const selectedElement = this.eventHandlers.getSelectedElement();
+        location = getSourceFromDataAttributes(selectedElement);
+      }
+      return location ? findElementsBySourceLocation(location) : [];
+    }
+    /**
+     * Apply a style change to all elements at the given source location.
+     * When sourceLocation is provided (undo/redo), it is used directly.
+     * Otherwise the source location is read from the currently selected element.
+     */
+    applyStyleChange(property, value, sourceLocation) {
+      for (const el of this.resolveTargets(sourceLocation)) {
+        el.style[property] = value;
+      }
+    }
+    applyTextChange(text, sourceLocation) {
+      for (const el of this.resolveTargets(sourceLocation)) {
+        el.textContent = text;
+      }
+    }
+    /**
+     * Cleanup and remove event listeners
+     */
+    destroy() {
+      document.removeEventListener("mouseover", this.eventHandlers.handleMouseOver);
+      document.removeEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+      document.removeEventListener("click", this.eventHandlers.handleClick, true);
+      this.styleManager.removeHighlightStyles();
+      this.eventHandlers.clearAll();
+    }
+  };
+
+  // src/design/interactions/index.ts
+  var interactions = new InteractionsController(true);
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        interactions.initialize();
+      });
+    } else {
+      interactions.initialize();
+    }
+  }
+  if (typeof window !== "undefined") {
+    window.enableInteractions = function() {
+      interactions.enable();
+    };
+    window.disableInteractions = function() {
+      interactions.disable();
+    };
+    window.addEventListener("message", function(event) {
+      const data = event.data;
+      const typed = data && typeof data === "object" ? data : null;
+      if (typed && typed.type === "style-change") {
+        interactions.applyStyleChange(
+          String(typed.property ?? ""),
+          String(typed.value ?? ""),
+          parseSourceLocation(typed.sourceLocation)
+        );
+      }
+      if (typed && typed.type === "text-change") {
+        interactions.applyTextChange(
+          String(typed.text ?? ""),
+          parseSourceLocation(typed.sourceLocation)
+        );
+      }
+      if (typed && typed.type === "enable-interactions") {
+        window.enableInteractions?.();
+      }
+      if (typed && typed.type === "disable-interactions") {
+        window.disableInteractions?.();
+      }
+    });
+  }
+})();
+
+})();
+