jupiter-dynamic-forms 1.16.0 → 1.16.1

package/dist/index.mjs

@@ -1509,7 +1509,12 @@ const form$1 = {
   noRoleSelected: "No Role Selected",
   pleaseSelectRole: "Please select a role from the list on the left.",
   expandPanel: "Expand side panel",
-  collapsePanel: "Collapse side panel"
+  collapsePanel: "Collapse side panel",
+  validate: "Validate",
+  preview: "Preview",
+  cancelValidation: "Cancel Validation",
+  lastValidationResults: "Last Validation Results",
+  validationInProgress: "Validation In Progress"
 };
 const filter$1 = {
   selectRoles: "Select Roles",
@@ -1649,7 +1654,12 @@ const form = {
   noRoleSelected: "Geen rol geselecteerd",
   pleaseSelectRole: "Selecteer een rol uit de lijst aan de linkerkant.",
   expandPanel: "Zijpaneel uitvouwen",
-  collapsePanel: "Zijpaneel inklappen"
+  collapsePanel: "Zijpaneel inklappen",
+  validate: "Valideren",
+  preview: "Voorbeeld",
+  cancelValidation: "Validatie annuleren",
+  lastValidationResults: "Laatste validatieresultaten",
+  validationInProgress: "Validatie bezig"
 };
 const filter = {
   selectRoles: "Rollen selecteren",
@@ -7161,6 +7171,7 @@ let JupiterDynamicForm = class extends LitElement {
     this.display = "accordion";
     this.mode = "inputForm";
     this.roleFilterAxes = [];
+    this.showLastValidationResultBtn = false;
     this.defaultUnits = [];
     this._formData = {};
     this._draftLoaded = false;
@@ -7193,6 +7204,7 @@ let JupiterDynamicForm = class extends LitElement {
     this._contextMenuX = 0;
     this._contextMenuY = 0;
     this._contextMenuRoleId = null;
+    this._validationStatus = "idle";
     this._skipDraftLoading = false;
     this._skipPeriodPreferencesRestore = false;
   }
@@ -10419,6 +10431,20 @@ let JupiterDynamicForm = class extends LitElement {
     this._validateForm();
     return this._valid;
   }
+  /**
+   * Updates the validation status and footer UI accordingly.
+   * Called by the hosting application after triggering external validation.
+   * @param status 'inProgress' | 'cancel' | 'complete'
+   */
+  setValidation(status) {
+    console.log(`🔍 Validation status updated: ${status}`);
+    if (status === "cancel") {
+      this._validationStatus = "idle";
+    } else {
+      this._validationStatus = status;
+    }
+    this.requestUpdate();
+  }
   reset() {
     this._handleReset();
   }
@@ -10477,10 +10503,41 @@ let JupiterDynamicForm = class extends LitElement {
             </button>
           ` : ""}
           
+
+          <!-- Validation state buttons -->
+          ${this._validationStatus === "inProgress" ? html`
+            <button
+              class="btn-preview"
+              @click="${() => this.dispatchEvent(new CustomEvent("showPreview", { bubbles: true, composed: true }))}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.preview")}
+            </button>
+
+            <button
+              class="btn-cancel-validation"
+              @click="${() => this.dispatchEvent(new CustomEvent("validationCancel", { bubbles: true, composed: true }))}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.cancelValidation")}
+            </button>
+          ` : ""}
+
+          ${this._validationStatus === "complete" || this.showLastValidationResultBtn ? html`
+            <button
+              class="btn-last-results"
+              @click="${() => this.dispatchEvent(new CustomEvent("show-validation-results", { bubbles: true, composed: true }))}"
+              ?disabled="${this.disabled || this.readonly}"
+            >
+              ${I18n.t("form.lastValidationResults")}
+            </button>
+          ` : ""}
+
+
           <button
             class="btn-primary"
             @click="${this._handleSubmit}"
-            ?disabled="${this.disabled || this.readonly || this._submitDisabled}"
+            ?disabled="${this.disabled || this.readonly || this._submitDisabled || this._validationStatus === "inProgress"}"
           >
             ${this.submitButtonLabel || (this.mode === "admin" ? I18n.t("form.save") : I18n.t("form.submit"))}
           </button>
@@ -10702,6 +10759,59 @@ JupiterDynamicForm.styles = css`
       cursor: not-allowed;
     }
 
+    .btn-validate {
+      background: var(--jupiter-validate-color, #388e3c);
+      color: white;
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .btn-validate:hover:not(:disabled) {
+      background: var(--jupiter-validate-color-dark, #2e7d32);
+    }
+
+    .btn-preview {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+    .btn-preview:hover:not(:disabled) {
+      background: var(--jupiter-primary-color-dark, #1565c0);
+    }
+
+    .btn-cancel-validation {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+    .btn-cancel-validation:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .btn-last-results {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+    .btn-last-results:hover:not(:disabled) {
+      background: var(--jupiter-primary-color, #1976d2);
+      color: white;
+    }
+
+    .validation-spinner {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      border: 2px solid rgba(255, 255, 255, 0.4);
+      border-top-color: white;
+      border-radius: 50%;
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
     .form-meta {
       display: flex;
       gap: 16px;
@@ -11324,6 +11434,9 @@ __decorateClass([
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "roleFilterAxes", 2);
+__decorateClass([
+  n2({ type: Boolean, attribute: "show-last-validation-result-btn" })
+], JupiterDynamicForm.prototype, "showLastValidationResultBtn", 2);
 __decorateClass([
   n2({ type: Array })
 ], JupiterDynamicForm.prototype, "defaultUnits", 2);
@@ -11435,6 +11548,9 @@ __decorateClass([
 __decorateClass([
   r()
 ], JupiterDynamicForm.prototype, "_contextMenuRoleId", 2);
+__decorateClass([
+  r()
+], JupiterDynamicForm.prototype, "_validationStatus", 2);
 JupiterDynamicForm = __decorateClass([
   t$1("jupiter-dynamic-form")
 ], JupiterDynamicForm);