jupiter-dynamic-forms 1.19.3 → 1.19.5

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([
@@ -4757,6 +4757,7 @@ let JupiterConceptTree = class extends LitElement {
     this.showAddButton = false;
     this.showRemoveButton = false;
     this.language = "en";
+    this.rowFocused = false;
     this._expanded = true;
   }
   connectedCallback() {
@@ -4934,7 +4935,7 @@ let JupiterConceptTree = class extends LitElement {
     const isAbstract = this.concept.abstract || false;
     return html`
       <!-- Concept Name Cell (Left Column) -->
-      <td class="concept-name-cell ${isAbstract ? "abstract" : hasChildren ? "" : "leaf"}">
+      <td class="concept-name-cell ${isAbstract ? "abstract" : hasChildren ? "" : "leaf"} ${this.rowFocused ? "row-focused" : ""}">
         <div class="concept-content" style="--level: ${level}">
           <div class="concept-indent"></div>
           <div class="concept-toggle ${hasChildren ? this._expanded ? "expanded" : "" : "no-children"}"
@@ -4970,7 +4971,7 @@ let JupiterConceptTree = class extends LitElement {
       const storedUnit = (_b = (_a = this.unitData) == null ? void 0 : _a[this.concept.id]) == null ? void 0 : _b[column2.id];
       const storedDecimals = (_d = (_c = this.decimalsData) == null ? void 0 : _c[this.concept.id]) == null ? void 0 : _d[column2.id];
       return html`
-          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""} ${this.highlightType && column2.id === this.highlightColumnId ? "highlight-" + this.highlightType : ""} ${((_e = this.calculationErrorKeys) == null ? void 0 : _e.has(`${this.concept.id}__${column2.id}`)) ? "calc-error" : ""}">
+          <td class="field-cell ${!shouldShowField ? "empty" : ""} ${isAbstract ? "abstract-row" : ""} ${this.highlightType && column2.id === this.highlightColumnId ? "highlight-" + this.highlightType : ""} ${((_e = this.calculationErrorKeys) == null ? void 0 : _e.has(`${this.concept.id}__${column2.id}`)) ? "calc-error" : ""} ${this.rowFocused ? "row-focused" : ""}">
             ${shouldShowField ? html`
               <jupiter-form-field
                 .field="${field2}"
@@ -5176,6 +5177,18 @@ JupiterConceptTree.styles = css`
       box-shadow: inset 0 0 0 2px var(--jupiter-error-color, #d32f2f);
     }
 
+    /* Row-level highlight while a field in this row has focus. Applied to every
+       cell so the row stays identifiable even after the user scrolls the table
+       horizontally away from the focused input. */
+    .concept-name-cell.row-focused,
+    .field-cell.row-focused {
+      background: var(--jupiter-row-focus-background, rgba(25, 118, 210, 0.14));
+    }
+
+    .concept-name-cell.row-focused {
+      box-shadow: inset 3px 0 0 0 var(--jupiter-primary-color, #1976d2);
+    }
+
     .concept-info-btn {
       flex-shrink: 0;
       width: 22px;
@@ -5219,6 +5232,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 })
@@ -5286,6 +5309,9 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: String })
 ], JupiterConceptTree.prototype, "language", 2);
+__decorateClass$5([
+  n2({ type: Boolean })
+], JupiterConceptTree.prototype, "rowFocused", 2);
 __decorateClass$5([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -5983,10 +6009,12 @@ let JupiterFormSection = class extends LitElement {
     this._insertAfterColumnId = null;
     this._boundFieldBlur = (e2) => {
       this._clearHighlights();
+      this._focusedConceptId = null;
     };
     this._expandedConcepts = /* @__PURE__ */ new Set();
     this._allTreeExpanded = false;
     this._highlightMap = /* @__PURE__ */ new Map();
+    this._focusedConceptId = null;
     this._calculationErrorKeys = /* @__PURE__ */ new Set();
     this._totalChildrenMap = /* @__PURE__ */ new Map();
     this._memberParentMap = /* @__PURE__ */ new Map();
@@ -6326,6 +6354,7 @@ let JupiterFormSection = class extends LitElement {
     const columnId = (_b = event.detail) == null ? void 0 : _b.columnId;
     if (!conceptId || !columnId)
       return;
+    this._focusedConceptId = conceptId;
     const newMap = /* @__PURE__ */ new Map();
     const isSelfTotal = this._totalChildrenMap.has(conceptId);
     if (isSelfTotal) {
@@ -6413,6 +6442,7 @@ let JupiterFormSection = class extends LitElement {
         .showRemoveButton="${opts.showRemove || false}"
         .highlightType="${(_a2 = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _a2.type}"
         .highlightColumnId="${(_b = this._highlightMap.get(instanceConcept.id)) == null ? void 0 : _b.columnId}"
+        .rowFocused="${this._focusedConceptId === instanceConcept.id}"
         .calculationErrorKeys="${this._calculationErrorKeys}"
         @field-change="${this._handleFieldChange}"
         @field-focus="${this._handleFieldFocusForHighlight}"
@@ -6950,6 +6980,9 @@ __decorateClass$3([
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_highlightMap", 2);
+__decorateClass$3([
+  r()
+], JupiterFormSection.prototype, "_focusedConceptId", 2);
 __decorateClass$3([
   r()
 ], JupiterFormSection.prototype, "_calculationErrorKeys", 2);
@@ -12840,6 +12873,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));
@@ -12983,14 +13017,17 @@ let JupiterDynamicForm = class extends LitElement {
       );
       tableContainer.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
     }
-    targetFieldEl.classList.add("concept-highlight");
+    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"])'
     );
     if (focusTarget) {
       setTimeout(() => focusTarget.focus({ preventScroll: true }), 450);
     }
-    setTimeout(() => targetFieldEl.classList.remove("concept-highlight"), 5e3);
+    setTimeout(() => highlightEl.classList.remove("concept-highlight"), 1e4);
   }
   render() {
     var _a;