jupiter-dynamic-forms 1.19.2 → 1.19.4

package/dist/index.mjs

@@ -4641,7 +4641,7 @@ JupiterFormField.styles = css`
       100% { box-shadow: 0 0 0 0px transparent; background-color: transparent; }
     }
     :host(.concept-highlight) {
-      animation: concept-highlight-pulse 5s ease-out forwards;
+      animation: concept-highlight-pulse 10s ease-out forwards;
     }
   `;
 __decorateClass$6([
@@ -5219,6 +5219,16 @@ JupiterConceptTree.styles = css`
       opacity: 1;
     }
 
+    @keyframes concept-row-highlight-pulse {
+      0%   { background-color: #fef9c3; box-shadow: inset 0 3px 0 -1px #fbbf24, inset 0 -3px 0 -1px #fbbf24; }
+      60%  { background-color: #fef9c3; box-shadow: inset 0 3px 0 -1px #fbbf24, inset 0 -3px 0 -1px #fbbf24; }
+      100% { background-color: transparent; box-shadow: none; }
+    }
+    :host(.concept-highlight) .concept-name-cell,
+    :host(.concept-highlight) .field-cell {
+      animation: concept-row-highlight-pulse 10s ease-out forwards;
+    }
+
   `;
 __decorateClass$5([
   n2({ type: Object })
@@ -12786,7 +12796,7 @@ let JupiterDynamicForm = class extends LitElement {
     })) == null ? void 0 : _a.id;
   }
   async scrollToConcept(conceptName, dimensions, match) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
     console.log(`[scrollToConcept] ▶ START conceptName=${conceptName} value=${match == null ? void 0 : match.value} dims=${JSON.stringify(dimensions)}`);
     let targetSection = null;
     let targetConcept = null;
@@ -12840,6 +12850,7 @@ let JupiterDynamicForm = class extends LitElement {
       targetColumnId = ((_b = columns[0]) == null ? void 0 : _b.id) ?? null;
     }
     console.log(`[scrollToConcept] targetColumnId=${targetColumnId} hasValueMatch=${hasValueMatch} targetValue=${targetValue}`);
+    this._conceptSearchText = conceptName.includes(":") ? conceptName.split(":").pop() : conceptName;
     this.requestUpdate();
     await this.updateComplete;
     await new Promise((resolve) => setTimeout(resolve, 300));
@@ -12960,13 +12971,40 @@ let JupiterDynamicForm = class extends LitElement {
       return;
     }
     console.log(`[scrollToConcept] ✅ HIGHLIGHTING conceptId=${targetFieldEl.conceptId} columnId=${targetFieldEl.columnId} value=${targetFieldEl.value}`);
-    targetFieldEl.scrollIntoView({ behavior: "smooth", block: "center" });
-    targetFieldEl.classList.add("concept-highlight");
-    const focusTarget = (_k = targetFieldEl.shadowRoot) == null ? void 0 : _k.querySelector(
+    const fieldRect = targetFieldEl.getBoundingClientRect();
+    const root = this.shadowRoot;
+    const potentialContainer = root ? root.querySelector(".side-panel-content") ?? root.querySelector(".form-container") : null;
+    const scrollContainer = potentialContainer && potentialContainer.scrollHeight > potentialContainer.clientHeight ? potentialContainer : null;
+    if (scrollContainer) {
+      const containerRect = scrollContainer.getBoundingClientRect();
+      const targetScrollTop = Math.max(
+        0,
+        fieldRect.top - containerRect.top + scrollContainer.scrollTop - scrollContainer.clientHeight / 2 + fieldRect.height / 2
+      );
+      scrollContainer.scrollTo({ top: targetScrollTop, behavior: "smooth" });
+    } else {
+      targetFieldEl.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+    const tableContainer = (_k = targetSectionEl == null ? void 0 : targetSectionEl.shadowRoot) == null ? void 0 : _k.querySelector(".table-container");
+    if (tableContainer && tableContainer.scrollWidth > tableContainer.clientWidth) {
+      const tableRect = tableContainer.getBoundingClientRect();
+      const targetScrollLeft = Math.max(
+        0,
+        fieldRect.left - tableRect.left + tableContainer.scrollLeft - tableContainer.clientWidth / 2 + fieldRect.width / 2
+      );
+      tableContainer.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
+    }
+    const rootNode = targetFieldEl.getRootNode();
+    const rowHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    const highlightEl = rowHost ?? targetFieldEl;
+    highlightEl.classList.add("concept-highlight");
+    const focusTarget = (_l = targetFieldEl.shadowRoot) == null ? void 0 : _l.querySelector(
       'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])'
     );
-    focusTarget == null ? void 0 : focusTarget.focus({ preventScroll: true });
-    setTimeout(() => targetFieldEl.classList.remove("concept-highlight"), 5e3);
+    if (focusTarget) {
+      setTimeout(() => focusTarget.focus({ preventScroll: true }), 450);
+    }
+    setTimeout(() => highlightEl.classList.remove("concept-highlight"), 1e4);
   }
   render() {
     var _a;