jupiter-dynamic-forms 1.14.6 → 1.14.8

package/dist/index.mjs

@@ -699,6 +699,8 @@ class XBRLFormBuilder {
       level,
       children,
       fields,
+      facts: concept.facts || [],
+      // Pass facts array from presentation concept for pre-population
       collapsed: level > 0,
       // Collapse nested levels by default
       abstract: concept.elementAbstract,
@@ -1080,7 +1082,7 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("instant")) {
         columns2.push({
           id: "typed-instant",
-          title: `${axisLabel2} [Typed Input Available]`,
+          title: `${axisLabel2} `,
           description: periodEndDate,
           type: "dimension",
           dimensionData: {
@@ -1110,7 +1112,7 @@ class XBRLFormBuilder {
       } else if (periodTypes.size === 1 && periodTypes.has("duration")) {
         columns2.push({
           id: "typed-duration",
-          title: `${axisLabel2} [Typed Input Available]`,
+          title: `${axisLabel2} `,
           description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           type: "dimension",
           dimensionData: {
@@ -1140,7 +1142,7 @@ class XBRLFormBuilder {
       } else {
         columns2.push({
           id: "typed-duration",
-          title: `${axisLabel2} [Typed Input Available]`,
+          title: `${axisLabel2} `,
           description: this.formatPeriodDisplay(periodStartDate, periodEndDate),
           type: "dimension",
           dimensionData: {
@@ -1307,7 +1309,7 @@ class XBRLFormBuilder {
           typedMemberId: dimension.typedMember.id,
           members: [{
             id: "[typed]",
-            label: `${axisLabel} [Typed Input Available]`
+            label: `${axisLabel}`
           }]
         };
       }
@@ -2008,6 +2010,241 @@ class DraftStorageService {
     return { compatible, warnings };
   }
 }
+class FactMatcher {
+  /**
+   * Find a matching fact for a given cell context
+   */
+  static findMatchingFact(facts, context) {
+    if (!facts || facts.length === 0) {
+      return null;
+    }
+    const periodMatchedFacts = facts.filter(
+      (fact) => this.matchesPeriod(fact, context)
+    );
+    if (periodMatchedFacts.length === 0) {
+      return null;
+    }
+    const dimensionMatchedFacts = periodMatchedFacts.filter(
+      (fact) => this.matchesDimensions(fact, context)
+    );
+    if (dimensionMatchedFacts.length === 0) {
+      return null;
+    }
+    if (dimensionMatchedFacts.length > 1 && context.unit) {
+      const unitMatchedFact = dimensionMatchedFacts.find(
+        (fact) => this.matchesUnit(fact, context)
+      );
+      if (unitMatchedFact) {
+        return unitMatchedFact;
+      }
+    }
+    return dimensionMatchedFacts[0];
+  }
+  /**
+   * Check if fact period matches cell period
+   */
+  static matchesPeriod(fact, context) {
+    const factPeriod = this.parsePeriod(fact.period);
+    if (context.periodType === "instant" && context.periodInstantDate) {
+      return factPeriod.isInstant && factPeriod.instantDate === context.periodInstantDate;
+    }
+    if (context.periodType === "duration" && context.periodStartDate && context.periodEndDate) {
+      return !factPeriod.isInstant && factPeriod.startDate === context.periodStartDate && factPeriod.endDate === context.periodEndDate;
+    }
+    if (context.periodInstantDate) {
+      return factPeriod.isInstant && factPeriod.instantDate === context.periodInstantDate;
+    }
+    if (context.periodStartDate && context.periodEndDate) {
+      return !factPeriod.isInstant && factPeriod.startDate === context.periodStartDate && factPeriod.endDate === context.periodEndDate;
+    }
+    return true;
+  }
+  /**
+   * Check if fact dimensions match cell dimensions
+   */
+  static matchesDimensions(fact, context) {
+    const factDimensions = fact.dimensions || [];
+    const cellDimensions = this.extractDimensionsFromContext(context);
+    if (cellDimensions.length === 0) {
+      return factDimensions.length === 0;
+    }
+    if (factDimensions.length === 0 && cellDimensions.length > 0) {
+      return false;
+    }
+    if (factDimensions.length !== cellDimensions.length) {
+      return false;
+    }
+    const allMatch = cellDimensions.every((cellDim) => {
+      return factDimensions.some((factDim) => {
+        const axisMatch = this.normalizeAxisId(factDim.dimension) === this.normalizeAxisId(cellDim.axisId);
+        if (!axisMatch) {
+          return false;
+        }
+        if (factDim.dimensionType === "explicit" && cellDim.memberId) {
+          const memberMatch = this.normalizeMemberId(factDim.member || "") === this.normalizeMemberId(cellDim.memberId);
+          return memberMatch;
+        }
+        if (factDim.dimensionType === "typed" && cellDim.isTyped) {
+          return true;
+        }
+        return false;
+      });
+    });
+    return allMatch;
+  }
+  /**
+   * Check if fact unit matches cell unit
+   */
+  static matchesUnit(fact, context) {
+    if (!context.unit || !fact.unitMeasure) {
+      return true;
+    }
+    const factUnit = this.normalizeUnit(fact.unitMeasure);
+    const cellUnit = this.normalizeUnit(context.unit);
+    return factUnit === cellUnit;
+  }
+  /**
+   * Parse period string into structured format
+   */
+  static parsePeriod(period) {
+    if (period.includes(" / ")) {
+      const [startDate, endDate] = period.split(" / ").map((d2) => d2.trim());
+      return {
+        isInstant: false,
+        startDate,
+        endDate
+      };
+    }
+    return {
+      isInstant: true,
+      instantDate: period.trim()
+    };
+  }
+  /**
+   * Extract dimensions from cell context
+   */
+  static extractDimensionsFromContext(context) {
+    if (!context.dimensionData) {
+      return [];
+    }
+    const dimensions = [];
+    if (context.dimensionData.combinations && context.dimensionData.combinations.length > 0) {
+      context.dimensionData.combinations.forEach((combo) => {
+        dimensions.push({
+          axisId: combo.axisId,
+          memberId: combo.memberId
+        });
+      });
+    }
+    if (context.dimensionData.typedMembers && context.dimensionData.typedMembers.length > 0) {
+      context.dimensionData.typedMembers.forEach((typed) => {
+        dimensions.push({
+          axisId: typed.axisId,
+          memberId: "[typed]",
+          isTyped: true
+        });
+      });
+    }
+    return dimensions;
+  }
+  /**
+   * Normalize axis ID for comparison
+   * Handles both formats: "jenv-bw2-dim:BasisOfPreparationAxis" and "jenv-bw2-dim_BasisOfPreparationAxis"
+   * Returns: "BasisOfPreparationAxis"
+   */
+  static normalizeAxisId(axisId) {
+    if (!axisId)
+      return "";
+    if (axisId.includes(":")) {
+      const parts = axisId.split(":");
+      return parts[1] || parts[0];
+    }
+    if (axisId.includes("_")) {
+      axisId.split("_");
+      const lastUnderscoreIndex = axisId.lastIndexOf("_");
+      if (lastUnderscoreIndex > 0) {
+        return axisId.substring(lastUnderscoreIndex + 1);
+      }
+    }
+    return axisId;
+  }
+  /**
+   * Normalize member ID for comparison
+   * Handles both formats: "jenv-bw2-dm:CommercialMember" and "jenv-bw2-dm_CommercialMember"
+   * Returns: "CommercialMember"
+   */
+  static normalizeMemberId(memberId) {
+    if (!memberId)
+      return "";
+    if (memberId.includes(":")) {
+      const parts = memberId.split(":");
+      return parts[1] || parts[0];
+    }
+    if (memberId.includes("_")) {
+      const lastUnderscoreIndex = memberId.lastIndexOf("_");
+      if (lastUnderscoreIndex > 0) {
+        return memberId.substring(lastUnderscoreIndex + 1);
+      }
+    }
+    return memberId;
+  }
+  /**
+   * Normalize unit for comparison
+   * Converts "iso4217:EUR" to "EUR"
+   */
+  static normalizeUnit(unit) {
+    if (!unit)
+      return "";
+    const parts = unit.split(":");
+    return parts.length > 1 ? parts[1] : parts[0];
+  }
+  /**
+   * Extract typed dimension values from facts
+   * Returns a map of axis IDs to typed values
+   */
+  static extractTypedValues(facts, context) {
+    const typedValues = {};
+    if (!facts || facts.length === 0) {
+      return typedValues;
+    }
+    const matchedFacts = facts.filter(
+      (fact) => this.matchesPeriod(fact, context) && this.matchesDimensions(fact, context)
+    );
+    matchedFacts.forEach((fact) => {
+      if (fact.dimensions) {
+        fact.dimensions.forEach((dim) => {
+          if (dim.dimensionType === "typed" && dim.typedMemberValue) {
+            const axisId = this.normalizeAxisId(dim.dimension);
+            typedValues[axisId] = dim.typedMemberValue;
+          }
+        });
+      }
+    });
+    return typedValues;
+  }
+  /**
+   * Debug helper: Log matching process
+   */
+  static debugMatch(facts, context) {
+    console.log("🔍 [FactMatcher] Debug Match");
+    console.log("  Context:", {
+      conceptId: context.conceptId,
+      columnId: context.columnId,
+      period: context.periodType === "instant" ? context.periodInstantDate : `${context.periodStartDate} / ${context.periodEndDate}`,
+      dimensions: this.extractDimensionsFromContext(context)
+    });
+    console.log("  Facts:", facts.map((f2) => {
+      var _a;
+      return {
+        value: f2.value,
+        period: f2.period,
+        dimensions: (_a = f2.dimensions) == null ? void 0 : _a.map((d2) => `${d2.dimension}:${d2.member}`)
+      };
+    }));
+    const match = this.findMatchingFact(facts, context);
+    console.log("  Match Result:", match ? match.value : "No match");
+  }
+}
 class XBRLValidator {
   /**
    * Validates a value against XBRL datatype validation rules
@@ -2616,6 +2853,7 @@ let JupiterFormField = class extends LitElement {
     this.disabled = false;
     this.locale = "en-US";
     this.hideLabel = false;
+    this.mode = "inputForm";
     this._errors = [];
     this._xbrlErrors = [];
     this._touched = false;
@@ -2916,7 +3154,7 @@ let JupiterFormField = class extends LitElement {
       periodType: this.field.periodType
     });
   }
-  _renderInput() {
+  _renderInput(effectiveValue = this.value, effectiveDisabled = this.disabled) {
     const hasErrors = this._errors.some((e2) => e2.severity === "error");
     const hasWarnings = this._errors.some((e2) => e2.severity === "warning");
     const isMonetary = this._isMonetaryType();
@@ -2933,8 +3171,8 @@ let JupiterFormField = class extends LitElement {
           id="${fieldId}"
           name="${fieldName}"
           class="${cssClass}"
-          .value="${this.value || ""}"
-          ?disabled="${this.disabled || this.field.disabled}"
+          .value="${effectiveValue || ""}"
+          ?disabled="${effectiveDisabled || this.field.disabled}"
           placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
           @input="${this._handleInput}"
           @focus="${this._handleFocus}"
@@ -2949,8 +3187,8 @@ let JupiterFormField = class extends LitElement {
           id="${fieldId}"
           name="${fieldName}"
           class="${cssClass}"
-          .value="${this.value || ""}"
-          ?disabled="${this.disabled || this.field.disabled}"
+          .value="${effectiveValue || ""}"
+          ?disabled="${effectiveDisabled || this.field.disabled}"
           @change="${this._handleInput}"
           @focus="${this._handleFocus}"
           @blur="${this._handleBlur}"
@@ -2964,7 +3202,7 @@ let JupiterFormField = class extends LitElement {
               <option 
                 value="${optionValue}"
                 ?disabled="${isDisabled}"
-                ?selected="${this.value === optionValue}"
+                ?selected="${effectiveValue === optionValue}"
               >
                 ${optionLabel}
               </option>
@@ -2981,8 +3219,8 @@ let JupiterFormField = class extends LitElement {
             name="${fieldName}"
             type="checkbox"
             class="field-input"
-            .checked="${Boolean(this.value)}"
-            ?disabled="${this.disabled || this.field.disabled}"
+            .checked="${Boolean(effectiveValue)}"
+            ?disabled="${effectiveDisabled || this.field.disabled}"
             @change="${this._handleInput}"
             @focus="${this._handleFocus}"
             @blur="${this._handleBlur}"
@@ -3001,8 +3239,8 @@ let JupiterFormField = class extends LitElement {
         name="${fieldName}"
         type="${inputType}"
         class="${cssClass}"
-        .value="${this.value || ""}"
-        ?disabled="${this.disabled || this.field.disabled}"
+        .value="${effectiveValue || ""}"
+        ?disabled="${effectiveDisabled || this.field.disabled}"
         placeholder="${typeConfig.placeholder || this.field.placeholder || ""}"
         step="${step !== void 0 ? step : ""}"
         min="${min !== void 0 ? min : ""}"
@@ -3035,6 +3273,17 @@ let JupiterFormField = class extends LitElement {
         return "text";
     }
   }
+  /**
+   * Extract base concept ID by removing column suffix
+   * Example: "nl-cd_LegalEntityName__4qukyf" -> "nl-cd_LegalEntityName"
+   */
+  _extractBaseConceptId(conceptId) {
+    const parts = conceptId.split("__");
+    if (parts.length > 1) {
+      return parts.slice(0, -1).join("__");
+    }
+    return conceptId;
+  }
   _renderPeriodControls() {
     if (this.conceptId === "nl-cd_DescriptionLocationNL__a64trl") {
       console.log(`🔍 [FormField Render] Concept: ${this.conceptId}, ColumnId: ${this.columnId}, Field periodType: ${this.field.periodType}, Field periodStartDate: ${this.field.periodStartDate}, Field periodEndDate: ${this.field.periodEndDate}`);
@@ -3143,8 +3392,70 @@ let JupiterFormField = class extends LitElement {
     `;
   }
   render() {
+    var _a, _b;
+    if (!this.field) {
+      console.error("[FormField] No field provided!", { conceptId: this.conceptId, columnId: this.columnId });
+      return html`<div>Error: No field data</div>`;
+    }
     const showLabel = !this.hideLabel && this.field.type !== "boolean";
     const hasPeriodControl = this.field.periodType && (this.field.periodType === "instant" || this.field.periodType === "duration");
+    const baseConceptId = this._extractBaseConceptId(this.conceptId);
+    const isPredefinedValue = this.mode !== "admin" && this.masterData && baseConceptId in this.masterData;
+    let factValue = null;
+    if (this.facts && this.facts.length > 0 && !isPredefinedValue) {
+      const cellContext = {
+        conceptId: baseConceptId,
+        columnId: this.columnId,
+        periodStartDate: this.periodStartDate || this.field.periodStartDate,
+        periodEndDate: this.periodEndDate || this.field.periodEndDate,
+        periodInstantDate: this.periodInstantDate || this.field.periodInstantDate,
+        periodType: this.field.periodType,
+        unit: this.unit,
+        dimensionData: (_a = this.column) == null ? void 0 : _a.dimensionData
+      };
+      const shouldDebugDimensions = baseConceptId.includes("BalanceSheet") || baseConceptId.includes("CostsIncorporation") || baseConceptId.includes("Assets");
+      if (shouldDebugDimensions && this.facts.length > 0) {
+        console.log("🔍 [FormField] Attempting fact match for concept with dimensions:", {
+          conceptId: baseConceptId,
+          columnId: this.columnId,
+          factsCount: this.facts.length,
+          cellContext: {
+            period: cellContext.periodType === "instant" ? cellContext.periodInstantDate : `${cellContext.periodStartDate} / ${cellContext.periodEndDate}`,
+            dimensionData: cellContext.dimensionData
+          },
+          facts: this.facts.map((f2) => {
+            var _a2;
+            return {
+              value: f2.value,
+              period: f2.period,
+              dimensions: (_a2 = f2.dimensions) == null ? void 0 : _a2.map((d2) => `${d2.dimension}:${d2.member}`)
+            };
+          })
+        });
+      }
+      const matchedFact = FactMatcher.findMatchingFact(this.facts, cellContext);
+      if (matchedFact) {
+        factValue = matchedFact.value;
+        if (shouldDebugDimensions || baseConceptId.includes("StreetName")) {
+          console.log("✅ [FormField] Fact matched:", {
+            conceptId: baseConceptId,
+            columnId: this.columnId,
+            factValue: matchedFact.value,
+            period: matchedFact.period,
+            dimensions: (_b = matchedFact.dimensions) == null ? void 0 : _b.map((d2) => `${d2.dimension}:${d2.member}`)
+          });
+        }
+      } else if (shouldDebugDimensions && this.facts.length > 0) {
+        console.log("❌ [FormField] No fact match found for:", {
+          conceptId: baseConceptId,
+          columnId: this.columnId,
+          factsAvailable: this.facts.length
+        });
+      }
+    }
+    const hasUserValue = this.value !== null && this.value !== void 0;
+    const effectiveValue = isPredefinedValue ? this.masterData[baseConceptId] : hasUserValue ? this.value : factValue;
+    const effectiveDisabled = isPredefinedValue || this.disabled;
     return html`
       <div class="field-container">
         ${showLabel ? html`
@@ -3154,7 +3465,7 @@ let JupiterFormField = class extends LitElement {
         ` : ""}
         
         <div class="field-wrapper">
-          ${this._renderInput()}
+          ${this._renderInput(effectiveValue, effectiveDisabled)}
           
           ${hasPeriodControl ? html`
             <button 
@@ -3496,6 +3807,18 @@ __decorateClass$5([
 __decorateClass$5([
   n2({ type: Boolean })
 ], JupiterFormField.prototype, "hideLabel", 2);
+__decorateClass$5([
+  n2({ type: String })
+], JupiterFormField.prototype, "mode", 2);
+__decorateClass$5([
+  n2({ type: Object })
+], JupiterFormField.prototype, "masterData", 2);
+__decorateClass$5([
+  n2({ type: Array })
+], JupiterFormField.prototype, "facts", 2);
+__decorateClass$5([
+  n2({ type: Object })
+], JupiterFormField.prototype, "column", 2);
 __decorateClass$5([
   n2({ type: String })
 ], JupiterFormField.prototype, "periodStartDate", 2);
@@ -3548,6 +3871,7 @@ let JupiterConceptTree = class extends LitElement {
     this.disabled = false;
     this.locale = "en-US";
     this.expandedConcepts = /* @__PURE__ */ new Set();
+    this.mode = "inputForm";
     this._expanded = true;
   }
   connectedCallback() {
@@ -3641,6 +3965,10 @@ let JupiterConceptTree = class extends LitElement {
                 .disabled="${this.disabled}"
                 .locale="${this.locale}"
                 .hideLabel="${true}"
+                .mode="${this.mode}"
+                .masterData="${this.masterData}"
+                .facts="${this.facts}"
+                .column="${column2}"
                 @field-change="${this._handleFieldChange}"
                 @period-change="${this._handlePeriodChange}"
               ></jupiter-form-field>
@@ -3784,6 +4112,15 @@ __decorateClass$4([
 __decorateClass$4([
   n2({ type: Array })
 ], JupiterConceptTree.prototype, "datatypes", 2);
+__decorateClass$4([
+  n2({ type: String })
+], JupiterConceptTree.prototype, "mode", 2);
+__decorateClass$4([
+  n2({ type: Object })
+], JupiterConceptTree.prototype, "masterData", 2);
+__decorateClass$4([
+  n2({ type: Array })
+], JupiterConceptTree.prototype, "facts", 2);
 __decorateClass$4([
   r()
 ], JupiterConceptTree.prototype, "_expanded", 2);
@@ -3807,6 +4144,8 @@ let JupiterAddColumnDialog = class extends LitElement {
     this.periodType = "duration";
     this.open = false;
     this.availableDimensions = [];
+    this.periodStartDate = "";
+    this.periodEndDate = "";
     this._startDate = "";
     this._endDate = "";
     this._instantDate = "";
@@ -3909,10 +4248,9 @@ let JupiterAddColumnDialog = class extends LitElement {
     }
   }
   _resetForm() {
-    const today = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-    this._startDate = today;
-    this._endDate = today;
-    this._instantDate = today;
+    this._startDate = this.periodStartDate || "";
+    this._endDate = this.periodEndDate || "";
+    this._instantDate = this.periodEndDate || this.periodStartDate || "";
     this._selectedType = this.periodType === "instant" ? "instant" : "duration";
     this._selectedDimensions.clear();
     this._autoSelectSingleMemberDimensions();
@@ -4348,6 +4686,12 @@ __decorateClass$3([
 __decorateClass$3([
   n2({ type: Array })
 ], JupiterAddColumnDialog.prototype, "availableDimensions", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterAddColumnDialog.prototype, "periodStartDate", 2);
+__decorateClass$3([
+  n2({ type: String })
+], JupiterAddColumnDialog.prototype, "periodEndDate", 2);
 __decorateClass$3([
   r()
 ], JupiterAddColumnDialog.prototype, "_startDate", 2);
@@ -4392,6 +4736,9 @@ let JupiterFormSection = class extends LitElement {
     this.isFirstSection = false;
     this.availableDimensions = [];
     this.hideHeader = false;
+    this.mode = "inputForm";
+    this.periodStartDate = "";
+    this.periodEndDate = "";
     this._expanded = true;
     this._showAddColumnDialog = false;
     this._sectionPeriodType = "duration";
@@ -4753,6 +5100,9 @@ let JupiterFormSection = class extends LitElement {
                     .disabled="${this.disabled}"
                     .locale="${this.locale}"
                     .expandedConcepts="${this._expandedConcepts}"
+                    .mode="${this.mode}"
+                    .masterData="${this.masterData}"
+                    .facts="${concept.facts}"
                     @field-change="${this._handleFieldChange}"
                     @period-change="${this._handlePeriodChange}"
                     @concept-expand="${this._handleConceptExpand}"
@@ -4769,6 +5119,8 @@ let JupiterFormSection = class extends LitElement {
         .periodType="${this._sectionPeriodType}"
         ?open="${this._showAddColumnDialog}"
         .availableDimensions="${this.availableDimensions}"
+        .periodStartDate="${this.periodStartDate}"
+        .periodEndDate="${this.periodEndDate}"
         @dialog-cancel="${this._handleDialogCancel}"
         @column-add="${this._handleColumnAdd}"
       ></jupiter-add-column-dialog>
@@ -5076,6 +5428,18 @@ __decorateClass$2([
 __decorateClass$2([
   n2({ type: Boolean })
 ], JupiterFormSection.prototype, "hideHeader", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterFormSection.prototype, "mode", 2);
+__decorateClass$2([
+  n2({ type: Object })
+], JupiterFormSection.prototype, "masterData", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterFormSection.prototype, "periodStartDate", 2);
+__decorateClass$2([
+  n2({ type: String })
+], JupiterFormSection.prototype, "periodEndDate", 2);
 __decorateClass$2([
   r()
 ], JupiterFormSection.prototype, "_expanded", 2);
@@ -5344,6 +5708,13 @@ let JupiterFilterRolesDialog = class extends LitElement {
     }));
   }
   _handleApply() {
+    const currentlySelected = Array.from(this._tempSelectedRoles);
+    const orderedByOriginal = currentlySelected.sort((a2, b2) => {
+      const indexA = this.availableRoles.findIndex((r2) => r2.id === a2);
+      const indexB = this.availableRoles.findIndex((r2) => r2.id === b2);
+      return indexA - indexB;
+    });
+    this._chosenRoleOrder = orderedByOriginal;
     const orderedRolesWithMetadata = this._chosenRoleOrder.map((roleId, index) => {
       var _a;
       const role = this.availableRoles.find((r2) => r2.id === roleId);
@@ -6675,6 +7046,11 @@ let JupiterDynamicForm = class extends LitElement {
     this._sidePanelSearchQuery = "";
     this._sidePanelCollapsed = false;
     this._adminRoleConfigs = {};
+    this._roleBorderStatuses = /* @__PURE__ */ new Map();
+    this._showRoleContextMenu = false;
+    this._contextMenuX = 0;
+    this._contextMenuY = 0;
+    this._contextMenuRoleId = null;
     this._skipDraftLoading = false;
     this._skipPeriodPreferencesRestore = false;
   }
@@ -6697,6 +7073,12 @@ let JupiterDynamicForm = class extends LitElement {
       const customEvent = e2;
       this._handleFieldBlur(customEvent);
     });
+    document.addEventListener("click", () => {
+      if (this._showRoleContextMenu) {
+        this._showRoleContextMenu = false;
+        this.requestUpdate();
+      }
+    });
     this._initializeForm();
   }
   updated(changedProperties) {
@@ -6824,13 +7206,185 @@ let JupiterDynamicForm = class extends LitElement {
     if ((_a = this.xbrlInput) == null ? void 0 : _a.initialData) {
       this._formData = { ...this._formData, ...this.xbrlInput.initialData };
     }
+    this._extractTypedMembersFromFacts();
     if (!this._skipDraftLoading) {
-      this._loadDraftIfExists();
+      this._loadDraftIfExists().then(() => {
+        this._analyzeAllVisibleRoles();
+      }).catch(() => {
+        this._analyzeAllVisibleRoles();
+      });
     } else {
       console.log("⏭️ Skipping draft loading during preference update");
+      this._analyzeAllVisibleRoles();
     }
     this._validateForm();
   }
+  /**
+   * Extract typed dimension values from facts and pre-populate typedMemberData
+   * This scans all facts for typed dimensions and sets their values in column headers
+   */
+  _extractTypedMembersFromFacts() {
+    var _a;
+    if (!((_a = this._currentSchema) == null ? void 0 : _a.sections)) {
+      return;
+    }
+    console.log("🔍 [DynamicForm] Extracting typed member values from facts");
+    this._currentSchema.sections.forEach((section2) => {
+      this._extractTypedMembersFromConcepts(section2.concepts || [], section2);
+    });
+    console.log("✅ [DynamicForm] Typed member data populated:", this._typedMemberData);
+  }
+  /**
+   * Recursively extract typed member values from concept tree
+   */
+  _extractTypedMembersFromConcepts(concepts, section2) {
+    concepts.forEach((concept) => {
+      if (concept.facts && concept.facts.length > 0) {
+        console.log(`🔍 [DynamicForm] Checking concept ${concept.id} with ${concept.facts.length} facts`);
+        concept.facts.forEach((fact) => {
+          if (fact.dimensions && Array.isArray(fact.dimensions)) {
+            const typedDimensions = fact.dimensions.filter((d2) => d2.dimensionType === "typed" && d2.typedMemberValue);
+            if (typedDimensions.length > 0) {
+              console.log(`📝 [DynamicForm] Found ${typedDimensions.length} typed dimensions in fact:`, {
+                factName: fact.name,
+                typedDimensions: typedDimensions.map((d2) => ({
+                  dimension: d2.dimension,
+                  typedMemberValue: d2.typedMemberValue
+                }))
+              });
+              const matchingColumn = this._findColumnWithTypedMembers(fact, concept, section2);
+              if (matchingColumn) {
+                console.log(`✅ [DynamicForm] Found matching column: ${matchingColumn.id}`);
+                typedDimensions.forEach((dim) => {
+                  var _a, _b;
+                  const normalizedAxisId = this._normalizeAxisId(dim.dimension);
+                  const typedMember = (_b = (_a = matchingColumn.dimensionData) == null ? void 0 : _a.typedMembers) == null ? void 0 : _b.find(
+                    (tm) => tm.axisId === normalizedAxisId || this._normalizeAxisId(tm.axisId) === normalizedAxisId
+                  );
+                  if (typedMember) {
+                    if (!this._typedMemberData[matchingColumn.id]) {
+                      this._typedMemberData[matchingColumn.id] = {};
+                    }
+                    const axisKey = typedMember.axisId;
+                    this._typedMemberData[matchingColumn.id][axisKey] = dim.typedMemberValue;
+                    console.log(`✅ [DynamicForm] Set typed member value:`, {
+                      sectionId: section2.id,
+                      conceptId: concept.id,
+                      columnId: matchingColumn.id,
+                      axisKey,
+                      typedMemberValue: dim.typedMemberValue
+                    });
+                  } else {
+                    console.warn(`⚠️ [DynamicForm] Typed member not found for axis: ${normalizedAxisId}`);
+                  }
+                });
+              } else {
+                console.warn(`⚠️ [DynamicForm] No matching column found for fact with typed dimensions`);
+              }
+            }
+          }
+        });
+      }
+      if (concept.children && concept.children.length > 0) {
+        this._extractTypedMembersFromConcepts(concept.children, section2);
+      }
+    });
+  }
+  /**
+   * Find a column that has typed members and matches the fact's explicit dimensions
+   */
+  _findColumnWithTypedMembers(fact, concept, section2) {
+    var _a;
+    if (!concept.fields || concept.fields.length === 0) {
+      return null;
+    }
+    const sectionColumns = section2.columns || [];
+    if (sectionColumns.length === 0) {
+      return null;
+    }
+    for (const field2 of concept.fields) {
+      const column2 = sectionColumns.find((col) => col.id === field2.columnId);
+      if (column2 && ((_a = column2.dimensionData) == null ? void 0 : _a.hasTypedMembers)) {
+        const factExplicitDims = (fact.dimensions || []).filter((d2) => d2.dimensionType === "explicit");
+        const columnExplicitDims = column2.dimensionData.combinations || [];
+        if (factExplicitDims.length === 0 || factExplicitDims.length === columnExplicitDims.length && factExplicitDims.every(
+          (factDim) => columnExplicitDims.some(
+            (colDim) => this._normalizeAxisId(factDim.dimension) === this._normalizeAxisId(colDim.axisId) && this._normalizeMemberId(factDim.member) === this._normalizeMemberId(colDim.memberId)
+          )
+        )) {
+          return column2;
+        }
+      }
+    }
+    return null;
+  }
+  /**
+   * Find the column that matches the fact's dimensions
+   */
+  _findColumnForFactDimensions(fact, concept, section2) {
+    if (!concept.fields || concept.fields.length === 0) {
+      console.log(`⚠️ [DynamicForm] No fields for concept: ${concept.id}`);
+      return null;
+    }
+    const sectionColumns = section2.columns || [];
+    if (sectionColumns.length === 0) {
+      console.log(`⚠️ [DynamicForm] No columns in section: ${section2.id}`);
+      return null;
+    }
+    for (const field2 of concept.fields) {
+      const column2 = sectionColumns.find((col) => col.id === field2.columnId);
+      if (column2 && column2.dimensionData) {
+        const factDimensions = fact.dimensions || [];
+        const columnDimensions = column2.dimensionData.combinations || [];
+        console.log(`🔍 [DynamicForm] Checking column ${column2.id}:`, {
+          factDimensions: factDimensions.map((d2) => ({ axis: d2.dimension, member: d2.member, type: d2.dimensionType })),
+          columnDimensions: columnDimensions.map((d2) => ({ axis: d2.axisId, member: d2.memberId }))
+        });
+        const allMatch = columnDimensions.every((colDim) => {
+          return factDimensions.some((factDim) => {
+            const axisMatch = this._normalizeAxisId(factDim.dimension) === this._normalizeAxisId(colDim.axisId);
+            if (factDim.dimensionType === "explicit") {
+              const memberMatch = this._normalizeMemberId(factDim.member) === this._normalizeMemberId(colDim.memberId);
+              return axisMatch && memberMatch;
+            } else if (factDim.dimensionType === "typed") {
+              return axisMatch;
+            }
+            return false;
+          });
+        });
+        if (allMatch) {
+          return column2;
+        }
+      }
+    }
+    return null;
+  }
+  /**
+   * Normalize axis ID by extracting the local name
+   */
+  _normalizeAxisId(axisId) {
+    if (!axisId)
+      return "";
+    if (axisId.includes(":")) {
+      return axisId.split(":").pop() || axisId;
+    } else if (axisId.includes("_")) {
+      return axisId.split("_").pop() || axisId;
+    }
+    return axisId;
+  }
+  /**
+   * Normalize member ID by extracting the local name
+   */
+  _normalizeMemberId(memberId) {
+    if (!memberId)
+      return "";
+    if (memberId.includes(":")) {
+      return memberId.split(":").pop() || memberId;
+    } else if (memberId.includes("_")) {
+      return memberId.split("_").pop() || memberId;
+    }
+    return memberId;
+  }
   _getDefaultSchema() {
     return {
       version: "1.0",
@@ -7078,10 +7632,14 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`🚫 Filter dialog cancelled. Current selection: ${roleCount}/${this._allSections.length}`);
   }
   _handleRoleFilterApply(event) {
+    var _a, _b;
     const { selectedRoleIds, periodPreferences } = event.detail;
+    console.log("🎯 Filter apply triggered");
+    console.log("📊 Old _selectedRoleIds:", this._selectedRoleIds);
+    console.log("📊 New selectedRoleIds from dialog:", selectedRoleIds);
     this._selectedRoleIds = selectedRoleIds;
     this._periodPreferences = periodPreferences;
-    console.log("🎯 Filter apply triggered - always reinitializing form");
+    console.log("📊 Updated _selectedRoleIds:", this._selectedRoleIds);
     console.log("📊 New period preferences (including dimension selections):", this._periodPreferences);
     console.log("💾 Capturing current form data before reinitialization...");
     const currentFormData = this._generateSubmissionData();
@@ -7105,6 +7663,8 @@ let JupiterDynamicForm = class extends LitElement {
     this._initializeForm();
     this._skipDraftLoading = false;
     this._skipPeriodPreferencesRestore = false;
+    console.log("📊 After _initializeForm, _currentSchema.sections.length:", (_a = this._currentSchema) == null ? void 0 : _a.sections.length);
+    console.log("📊 Section IDs:", (_b = this._currentSchema) == null ? void 0 : _b.sections.map((s2) => s2.id));
     console.log("📥 Restoring form data from draft after reinitialization...");
     this._loadDraftIfExists().then(() => {
       console.log("✅ Form data restored successfully after reinitialization");
@@ -7345,6 +7905,9 @@ let JupiterDynamicForm = class extends LitElement {
     console.log(`🔍 [_getSectionTitle] Result: "${result}"`);
     return result;
   }
+  _roleHasErrors(roleId) {
+    return this._xbrlFormErrors.some((error2) => error2.sectionId === roleId);
+  }
   async _handleErrorFieldClick(conceptId, columnId, sectionId) {
     var _a, _b, _c, _d;
     console.log(`🎯 [Error Click] Attempting to focus field: ${conceptId}__${columnId} in section: ${sectionId}`);
@@ -7823,6 +8386,16 @@ let JupiterDynamicForm = class extends LitElement {
       this._handleAdminModeSubmit();
       return;
     }
+    console.log(`🔵 [Submit] Checking for errors...`);
+    console.log(`🔵 [Submit] _xbrlFormErrors.length: ${this._xbrlFormErrors.length}`);
+    console.log(`🔵 [Submit] _xbrlFormErrors:`, this._xbrlFormErrors);
+    if (this._xbrlFormErrors.length > 0) {
+      console.log("❌ [Submit] Cannot submit - validation errors present:", this._xbrlFormErrors);
+      this._showErrorPopup = true;
+      this.requestUpdate();
+      return;
+    }
+    console.log(`✅ [Submit] No validation errors, proceeding with submission...`);
     this._validateForm();
     const submissionData = this._generateSubmissionData();
     console.log("📊 Form Submission Data:", JSON.stringify(submissionData, null, 2));
@@ -8800,9 +9373,203 @@ let JupiterDynamicForm = class extends LitElement {
       submitted: this._submitted
     };
   }
+  /**
+   * Analyze all visible roles on form load to set initial border statuses
+   */
+  _analyzeAllVisibleRoles() {
+    if (!this._currentSchema || !this._currentSchema.sections || this._currentSchema.sections.length === 0) {
+      console.log("⏭️ No sections to analyze for initial border status");
+      return;
+    }
+    console.log(`🔍 Analyzing ${this._currentSchema.sections.length} visible roles for initial border status...`);
+    for (const section2 of this._currentSchema.sections) {
+      this._analyzeAndLogRole(section2.id);
+    }
+    console.log(`✅ Initial border status analysis complete for all visible roles`);
+  }
+  /**
+   * Handle right-click on role item to show context menu
+   */
+  _handleRoleContextMenu(event, roleId, roleTitle) {
+    event.preventDefault();
+    event.stopPropagation();
+    this._contextMenuX = event.clientX;
+    this._contextMenuY = event.clientY;
+    this._contextMenuRoleId = roleId;
+    this._showRoleContextMenu = true;
+    console.log(`🖱️ Context menu opened for role: ${roleTitle} (ID: ${roleId})`);
+    this.requestUpdate();
+  }
+  /**
+   * Close the context menu
+   */
+  _closeRoleContextMenu() {
+    this._showRoleContextMenu = false;
+    this._contextMenuRoleId = null;
+    this.requestUpdate();
+  }
+  /**
+   * Handle remove role action - removes role from side panel
+   */
+  _handleRemoveRole() {
+    if (!this._contextMenuRoleId) {
+      this._closeRoleContextMenu();
+      return;
+    }
+    const role = this._allSections.find((s2) => s2.id === this._contextMenuRoleId);
+    const roleTitle = (role == null ? void 0 : role.title) || "Unknown";
+    console.log(`🗑️ Removing role from side panel:`);
+    console.log(`  - Role ID: ${this._contextMenuRoleId}`);
+    console.log(`  - Role Title: ${roleTitle}`);
+    if (Array.isArray(this._selectedRoleIds)) {
+      if (this._selectedRoleIds.length > 0 && typeof this._selectedRoleIds[0] === "object") {
+        this._selectedRoleIds = this._selectedRoleIds.filter((r2) => r2.roleId !== this._contextMenuRoleId);
+      } else {
+        this._selectedRoleIds = this._selectedRoleIds.filter((id) => id !== this._contextMenuRoleId);
+      }
+    }
+    console.log(`✅ Role removed from _selectedRoleIds. Remaining roles: ${this._selectedRoleIds.length}`);
+    if (this._activeSidePanelRoleId === this._contextMenuRoleId) {
+      const remainingRoleIds = this._getRoleIdsArray();
+      this._activeSidePanelRoleId = remainingRoleIds.length > 0 ? remainingRoleIds[0] : null;
+      console.log(`📌 Active role changed to: ${this._activeSidePanelRoleId || "None"}`);
+    }
+    this._applyRoleFilter();
+    this.dispatchEvent(new CustomEvent("role-removed", {
+      detail: {
+        roleId: this._contextMenuRoleId,
+        roleTitle,
+        remainingRolesCount: this._selectedRoleIds.length
+      },
+      bubbles: true,
+      composed: true
+    }));
+    console.log(`✅ Role "${roleTitle}" successfully removed from side panel`);
+    console.log(`ℹ️  User can re-add this role using the Filter Roles dialog`);
+    this._closeRoleContextMenu();
+  }
   _handleSidePanelRoleClick(roleId) {
+    if (this._activeSidePanelRoleId && this._activeSidePanelRoleId !== roleId) {
+      this._analyzeAndLogRole(this._activeSidePanelRoleId);
+    }
     this._activeSidePanelRoleId = roleId;
   }
+  _analyzeAndLogRole(roleId) {
+    const section2 = this._allSections.find((s2) => s2.id === roleId);
+    if (!section2) {
+      console.warn(`⚠️ Section not found for roleId: ${roleId}`);
+      return;
+    }
+    console.warn(`
+========================================`);
+    console.warn(`🔍 ANALYZING ROLE: "${section2.title}"`);
+    console.warn(`========================================`);
+    if (this.masterData) {
+      console.warn(`📦 masterData keys:`, Object.keys(this.masterData));
+    } else {
+      console.warn(`📦 masterData: NOT PROVIDED`);
+    }
+    const allFields = [];
+    this._collectAllFields(section2.concepts || [], new Set((section2.columns || []).map((col) => col.id)), section2.columns || [], allFields);
+    console.warn(`📊 Total fields found: ${allFields.length}`);
+    console.warn(`
+📋 FIELD DETAILS:`);
+    allFields.forEach((field2, index) => {
+      const status = field2.isEmpty ? "❌ EMPTY" : "✅ FILLED";
+      console.warn(`  ${index + 1}. ${field2.conceptId} [${field2.columnId}]: ${status} = ${JSON.stringify(field2.value)}`);
+    });
+    const hasErrors = this._roleHasErrors(roleId);
+    const emptyCount = allFields.filter((f2) => f2.isEmpty).length;
+    const filledCount = allFields.filter((f2) => !f2.isEmpty).length;
+    console.warn(`
+📈 SUMMARY:`);
+    console.warn(`  Total Fields: ${allFields.length}`);
+    console.warn(`  Filled: ${filledCount}`);
+    console.warn(`  Empty: ${emptyCount}`);
+    console.warn(`  Has Errors: ${hasErrors}`);
+    let result;
+    if (hasErrors) {
+      result = "INVALID";
+      console.warn(`
+🔴 RESULT: INVALID (contains validation errors)`);
+    } else if (emptyCount > 0) {
+      result = "INCOMPLETE";
+      console.warn(`
+🟠 RESULT: INCOMPLETE (${emptyCount} field(s) blank)`);
+    } else {
+      result = "COMPLETE";
+      console.warn(`
+🟢 RESULT: COMPLETE (all fields filled)`);
+    }
+    console.warn(`========================================
+`);
+    if (result === "INVALID")
+      ;
+    else if (result === "INCOMPLETE") {
+      this._roleBorderStatuses.set(roleId, "incomplete");
+      this._roleBorderStatuses = new Map(this._roleBorderStatuses);
+    } else {
+      this._roleBorderStatuses.set(roleId, "complete");
+      this._roleBorderStatuses = new Map(this._roleBorderStatuses);
+    }
+  }
+  _collectAllFields(concepts, sectionColumnIds, sectionColumns, allFields) {
+    var _a, _b;
+    for (const concept of concepts) {
+      if (concept.abstract) {
+        if (concept.children && concept.children.length > 0) {
+          this._collectAllFields(concept.children, sectionColumnIds, sectionColumns, allFields);
+        }
+        continue;
+      }
+      if (concept.fields && concept.fields.length > 0) {
+        const relevantFields = concept.fields.filter((field2) => sectionColumnIds.has(field2.columnId));
+        for (const field2 of relevantFields) {
+          const conceptIdWithSuffix = concept.id;
+          const fieldConceptId = field2.conceptId;
+          const isMasterDataField = this.masterData && this.masterData[fieldConceptId] !== void 0;
+          if (isMasterDataField && this.masterData) {
+            const masterValue = this.masterData[fieldConceptId];
+            console.warn(`  ⏭️  SKIPPING masterData field: ${fieldConceptId} [${field2.columnId}] = ${JSON.stringify(masterValue)}`);
+            continue;
+          }
+          let value = (_a = this._formData[conceptIdWithSuffix]) == null ? void 0 : _a[field2.columnId];
+          if (value === void 0 && conceptIdWithSuffix !== fieldConceptId) {
+            value = (_b = this._formData[fieldConceptId]) == null ? void 0 : _b[field2.columnId];
+          }
+          let isEmpty = value === null || value === void 0 || typeof value === "string" && value.trim() === "";
+          if (isEmpty && concept.facts && concept.facts.length > 0) {
+            const column2 = sectionColumns.find((col) => col.id === field2.columnId);
+            const cellContext = {
+              conceptId: fieldConceptId,
+              columnId: field2.columnId,
+              periodStartDate: field2.periodStartDate || (column2 == null ? void 0 : column2.periodStartDate),
+              periodEndDate: field2.periodEndDate || (column2 == null ? void 0 : column2.periodEndDate),
+              periodInstantDate: field2.periodInstantDate || (field2.periodType === "instant" ? field2.periodEndDate || field2.periodStartDate : void 0),
+              periodType: field2.periodType,
+              dimensionData: column2 == null ? void 0 : column2.dimensionData
+            };
+            const matchedFact = FactMatcher.findMatchingFact(concept.facts, cellContext);
+            if (matchedFact && matchedFact.value !== null && matchedFact.value !== void 0 && matchedFact.value !== "") {
+              value = matchedFact.value;
+              isEmpty = false;
+              console.warn(`  ✨ FACT PRE-POPULATED: ${fieldConceptId} [${field2.columnId}] = ${JSON.stringify(value)}`);
+            }
+          }
+          console.warn(`  🔍 Field lookup: concept.id="${conceptIdWithSuffix}", field.conceptId="${fieldConceptId}", value=${JSON.stringify(value)}, isEmpty=${isEmpty}`);
+          allFields.push({
+            conceptId: fieldConceptId,
+            columnId: field2.columnId,
+            value,
+            isEmpty
+          });
+        }
+      }
+      if (concept.children && concept.children.length > 0) {
+        this._collectAllFields(concept.children, sectionColumnIds, sectionColumns, allFields);
+      }
+    }
+  }
   _handleSidePanelSearchInput(event) {
     const input = event.target;
     this._sidePanelSearchQuery = input.value;
@@ -9229,6 +9996,10 @@ let JupiterDynamicForm = class extends LitElement {
             .locale="${config.locale || "en-US"}"
             .isFirstSection="${index === 0}"
             .availableDimensions="${this._getAvailableDimensionsForSection(section2.id)}"
+            .mode="${this.mode}"
+            .masterData="${this.masterData}"
+            .periodStartDate="${this.periodStartDate}"
+            .periodEndDate="${this.periodEndDate}"
             @field-change="${this._handleFieldChange}"
             @period-change="${this._handlePeriodChange}"
             @typed-member-change="${this._handleTypedMemberChange}"
@@ -9300,14 +10071,20 @@ let JupiterDynamicForm = class extends LitElement {
               ${I18n.t("filter.tryDifferentSearch")}
             </div>
           ` : html`
-            ${filteredSections.map((section2) => html`
-              <div 
-                class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""}"
-                @click="${() => this._handleSidePanelRoleClick(section2.id)}"
-              >
-                ${section2.title}
-              </div>
-            `)}
+            ${filteredSections.map((section2) => {
+      const hasErrors = this._roleHasErrors(section2.id);
+      const borderStatus = this._roleBorderStatuses.get(section2.id);
+      const statusClass = hasErrors ? "has-errors" : borderStatus === "incomplete" ? "has-empty-fields" : borderStatus === "complete" ? "has-complete-data" : "";
+      return html`
+                <div 
+                  class="side-panel-role-item ${section2.id === this._activeSidePanelRoleId ? "active" : ""} ${statusClass}"
+                  @click="${() => this._handleSidePanelRoleClick(section2.id)}"
+                  @contextmenu="${(e2) => this._handleRoleContextMenu(e2, section2.id, section2.title)}"
+                >
+                  ${section2.title}
+                </div>
+              `;
+    })}
           `}
           ` : ""}
         </div>
@@ -9349,6 +10126,10 @@ let JupiterDynamicForm = class extends LitElement {
                 .locale="${config.locale || "en-US"}"
                 .isFirstSection="${true}"
                 .availableDimensions="${this._getAvailableDimensionsForSection(activeSection.id)}"
+                .mode="${this.mode}"
+                .masterData="${this.masterData}"
+                .periodStartDate="${this.periodStartDate}"
+                .periodEndDate="${this.periodEndDate}"
                 @field-change="${this._handleFieldChange}"
                 @typed-member-change="${this._handleTypedMemberChange}"
                 @section-expand="${this._handleSectionExpand}"
@@ -9510,6 +10291,27 @@ let JupiterDynamicForm = class extends LitElement {
             </div>
           </div>
         ` : ""}
+        
+        <!-- Role Context Menu -->
+        ${this._showRoleContextMenu ? html`
+          <div 
+            class="role-context-menu"
+            style="left: ${this._contextMenuX}px; top: ${this._contextMenuY}px;"
+            @click="${(e2) => {
+      e2.stopPropagation();
+    }}"
+          >
+            <div 
+              class="context-menu-item danger"
+              @click="${() => this._handleRemoveRole()}"
+            >
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
+              </svg>
+              Remove
+            </div>
+          </div>
+        ` : ""}
       </div>
     `;
   }
@@ -9866,6 +10668,30 @@ JupiterDynamicForm.styles = css`
       font-weight: 500;
     }
 
+    .side-panel-role-item.has-errors {
+      border-left: 2px solid var(--jupiter-error-color, #d32f2f);
+    }
+
+    .side-panel-role-item.has-errors.active {
+      border-left: 2px solid var(--jupiter-error-color, #d32f2f);
+    }
+
+    .side-panel-role-item.has-empty-fields {
+      border-left: 2px solid var(--jupiter-warning-color, #ff9800);
+    }
+
+    .side-panel-role-item.has-empty-fields.active {
+      border-left: 2px solid var(--jupiter-warning-color, #ff9800);
+    }
+
+    .side-panel-role-item.has-complete-data {
+      border-left: 2px solid var(--jupiter-success-color, #4caf50);
+    }
+
+    .side-panel-role-item.has-complete-data.active {
+      border-left: 2px solid var(--jupiter-success-color, #4caf50);
+    }
+
     .side-panel-content {
       flex: 1;
       overflow-y: auto;
@@ -10159,6 +10985,41 @@ JupiterDynamicForm.styles = css`
       color: #0052a3;
       text-decoration: none;
     }
+
+    /* Context Menu Styles */
+    .role-context-menu {
+      position: fixed;
+      background: white;
+      border: 1px solid var(--jupiter-border-color, #ddd);
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      z-index: 10001;
+      min-width: 150px;
+      padding: 4px 0;
+    }
+
+    .context-menu-item {
+      padding: 8px 16px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--jupiter-text-primary, #333);
+      transition: background-color 0.2s ease;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .context-menu-item:hover {
+      background: var(--jupiter-hover-background, #f5f5f5);
+    }
+
+    .context-menu-item.danger {
+      color: var(--jupiter-error-color, #d32f2f);
+    }
+
+    .context-menu-item.danger:hover {
+      background: #ffebee;
+    }
   `;
 __decorateClass([
   n2({ type: Object })
@@ -10202,6 +11063,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "defaultUnits", 2);
+__decorateClass([
+  n2({ type: Object, attribute: "master-data" })
+], JupiterDynamicForm.prototype, "masterData", 2);
 __decorateClass([
   n2({ type: Object, attribute: "dynaforms-metadata" })
 ], JupiterDynamicForm.prototype, "dynaformsMetadata", 2);
@@ -10289,11 +11153,27 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_adminRoleConfigs", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_roleBorderStatuses", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_showRoleContextMenu", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_contextMenuX", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_contextMenuY", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_contextMenuRoleId", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);
 const version = "1.5.0";
 export {
+  FactMatcher,
   FormValidator,
   JupiterAddColumnDialog,
   JupiterConceptTree,