@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.11

package/src/components/form/form.ts

@@ -1,376 +1,492 @@
-import {LitElement, html, css} from "lit";
-import {customElement, property, state, queryAssignedElements, query} from "lit/decorators.js";
-import {resetStyles} from "../../styles/reset.js";
-import type {StFormStep} from "./form-step.js";
-
-export type FormLayout = "vertical" | "horizontal" | "inline";
-
-@customElement("st-form")
-export class StForm extends LitElement {
-  @property({type: String, reflect: true}) layout: FormLayout = "vertical";
-  @property({type: Boolean, reflect: true}) loading = false;
-  @property({type: String}) error = "";
-
-  @state() private _currentStepIndex = 0;
-
-  @queryAssignedElements({selector: "st-form-step"})
-  private _stepElements!: StFormStep[];
-
-  @query("form") private _formEl!: HTMLFormElement;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        position: relative;
-      }
-
-      form {
-        display: flex;
-        gap: var(--st-spacing-md);
-      }
-
-      /* ==========================================================
-         Layouts
-         ========================================================== */
-      :host([layout="vertical"]) form {
-        flex-direction: column;
-      }
-
-      :host([layout="horizontal"]) form {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-        align-items: start;
-      }
-
-      :host([layout="inline"]) form {
-        flex-direction: row;
-        align-items: flex-end;
-        flex-wrap: wrap;
-      }
-
-      .has-steps form {
-        display: flex;
-        flex-direction: column;
-      }
-
-      /* ==========================================================
-         Progress Navigation
-         ========================================================== */
-      .progress-nav {
-        display: flex;
-        align-items: center;
-        margin-bottom: var(--st-spacing-xl);
-        padding-bottom: var(--st-spacing-md);
-        overflow-x: auto;
-        scrollbar-width: none;
-      }
-
-      .step-indicator {
-        display: flex;
-        align-items: center;
-        gap: var(--st-spacing-sm);
-        color: var(--st-color-text-muted);
-        font-size: var(--st-font-size-sm);
-        font-weight: var(--st-font-weight-medium);
-        transition: color 0.2s ease;
-      }
-
-      .step-indicator.active {
-        color: var(--st-color-text);
-      }
-      .step-indicator.completed {
-        color: var(--st-color-success);
-      }
-
-      .step-circle {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 1.75rem;
-        height: 1.75rem;
-        border-radius: 50%;
-        border: 2px solid currentColor;
-        font-size: 0.875rem;
-        background-color: var(--st-color-bg);
-        transition: all 0.2s ease;
-      }
-
-      .step-indicator.active .step-circle {
-        background-color: var(--st-color-primary);
-        border-color: var(--st-color-primary);
-        color: var(--st-color-bg);
-      }
-
-      .step-indicator.completed .step-circle {
-        border-color: var(--st-color-success);
-        background-color: var(--st-color-success-bg, transparent);
-      }
-
-      .step-connector {
-        flex: 1;
-        height: 2px;
-        min-width: 24px;
-        margin: 0 var(--st-spacing-sm);
-        background-color: var(--st-color-border);
-        transition: background-color 0.2s ease;
-      }
-
-      .step-connector.completed {
-        background-color: var(--st-color-success);
-      }
-
-      /* ==========================================================
-         Actions & States
-         ========================================================== */
-      .form-actions {
-        display: flex;
-        gap: var(--st-spacing-md);
-        margin-top: var(--st-spacing-lg);
-        justify-content: flex-end;
-      }
-
-      .loading-overlay {
-        position: absolute;
-        inset: 0;
-        background: rgba(var(--st-color-bg-rgb, 255, 255, 255), 0.7);
-        backdrop-filter: blur(2px);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 10;
-        border-radius: inherit;
-        color: var(--st-color-text);
-        font-weight: var(--st-font-weight-medium);
-        gap: var(--st-spacing-sm);
-      }
-
-      @keyframes pulse {
-        0%,
-        100% {
-          opacity: 1;
-        }
-        50% {
-          opacity: 0.5;
-        }
-      }
-
-      .loading-overlay st-icon {
-        animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-      }
-    `,
-  ];
-
-  private _handleSlotChange() {
-    if (this._stepElements.length > 0) {
-      this._updateStepVisibility();
-    }
-  }
-
-  private _updateStepVisibility() {
-    this._stepElements.forEach((step, index) => {
-      step.active = index === this._currentStepIndex;
-    });
-    this.requestUpdate();
-  }
-
-  private _validateCurrentContext(): boolean {
-    if (this._stepElements.length === 0) {
-      return this._formEl.checkValidity();
-    }
-
-    const currentStep = this._stepElements[this._currentStepIndex];
-    let isValid = true;
-
-    // Find all custom and native form inputs assigned to the current step
-    const inputs = Array.from(
-      currentStep.querySelectorAll<
-        HTMLElement & {checkValidity?: () => boolean; reportValidity?: () => void}
-      >("*"),
-    );
-
-    for (const input of inputs) {
-      if (typeof input.checkValidity === "function") {
-        if (!input.checkValidity()) {
-          // Focus and report on the first invalid element encountered
-          if (isValid && typeof input.reportValidity === "function") {
-            input.reportValidity();
-          }
-          isValid = false;
-        }
-      }
-    }
-
-    return isValid;
-  }
-
-  private _triggerSubmission() {
-    // HTML5 method that triggers form validation and fires the native submit event
-    this._formEl.requestSubmit();
-  }
-
-  private _prevStep() {
-    if (this._currentStepIndex > 0) {
-      this._currentStepIndex--;
-      this._updateStepVisibility();
-    }
-  }
-
-  private _extractFormData(): FormData {
-    const formData = new FormData();
-
-    // Query all light-DOM children that have a 'name' attribute
-    const fields = this.querySelectorAll<
-      HTMLElement & {name: string; value: any; checked?: boolean; files?: FileList}
-    >("[name]");
-
-    fields.forEach((field) => {
-      // Standard HTML form behavior: ignore disabled fields
-      if (field.hasAttribute("disabled")) return;
-
-      const isToggle =
-        field.tagName === "ST-RADIO" ||
-        field.tagName === "ST-CHECKBOX" ||
-        field.getAttribute("type") === "radio" ||
-        field.getAttribute("type") === "checkbox";
-
-      if (isToggle) {
-        // Only append radios/checkboxes if they are actively checked
-        if (field.checked) {
-          formData.append(field.name, field.value || "on");
-        }
-      } else if (
-        field.tagName === "INPUT" &&
-        field.getAttribute("type") === "file" &&
-        field.files
-      ) {
-        // Handle native file uploads
-        Array.from(field.files).forEach((file) => formData.append(field.name, file));
-      } else if (field.value !== undefined) {
-        // Handle st-input, st-select, st-textarea, and standard inputs
-        formData.append(field.name, field.value);
-      }
-    });
-
-    return formData;
-  }
-
-  private _handleSubmit(e: Event) {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (!this._validateCurrentContext()) return;
-
-    const hasSteps = this._stepElements.length > 0;
-    const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
-
-    if (hasSteps && !isLastStep) {
-      this._currentStepIndex++;
-      this._updateStepVisibility();
-      return;
-    }
-
-    // Use our custom extractor to pierce the Shadow DOM boundary
-    const formData = this._extractFormData();
-
-    this.dispatchEvent(
-      new CustomEvent("submit", {
-        bubbles: true,
-        composed: true,
-        cancelable: true,
-        detail: {formData},
-      }),
-    );
-  }
-
-  render() {
-    const hasSteps = this._stepElements?.length > 0;
-    const isLastStep = hasSteps ? this._currentStepIndex === this._stepElements.length - 1 : true;
-
-    return html`
-      <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>
-        ${this.loading
-          ? html`
-              <div class="loading-overlay">
-                <st-icon name="cloud-download" color="primary"></st-icon> Processing...
-              </div>
-            `
-          : ""}
-        ${hasSteps
-          ? html`
-              <div class="progress-nav" role="tablist">
-                ${this._stepElements.map((step, index) => {
-                  const isActive = index === this._currentStepIndex;
-                  const isCompleted = index < this._currentStepIndex;
-
-                  return html`
-                    <div
-                      class="step-indicator ${isActive ? "active" : ""} ${isCompleted
-                        ? "completed"
-                        : ""}"
-                      role="tab"
-                      aria-selected=${isActive}
-                    >
-                      <div class="step-circle">
-                        ${isCompleted
-                          ? html`<st-icon name="check-circle" size="sm"></st-icon>`
-                          : html`${index + 1}`}
-                      </div>
-                      <span>${step.title || `Step ${index + 1}`}</span>
-                    </div>
-                    ${index < this._stepElements.length - 1
-                      ? html` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
-                      : ""}
-                  `;
-                })}
-              </div>
-            `
-          : ""}
-        ${this.error
-          ? html`
-              <st-alert color="error" style="margin-bottom: var(--st-spacing-lg);">
-                <st-icon slot="icon" name="alert-triangle"></st-icon>
-                ${this.error}
-              </st-alert>
-            `
-          : ""}
-
-        <form @submit=${this._handleSubmit}>
-          <slot @slotchange=${this._handleSlotChange}></slot>
-
-          <div class="form-actions">
-            ${hasSteps && this._currentStepIndex > 0
-              ? html`
-                  <st-button
-                    variant="secondary"
-                    type="button"
-                    @click=${this._prevStep}
-                    ?disabled=${this.loading}
-                  >
-                    Back
-                  </st-button>
-                `
-              : ""}
-
-            <!-- Type is "button", but click triggers requestSubmit() on the internal form -->
-            <st-button
-              color="primary"
-              type="button"
-              @click=${this._triggerSubmission}
-              ?disabled=${this.loading}
-            >
-              ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
-            </st-button>
-          </div>
-        </form>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "st-form": StForm;
-  }
-}
+import {LitElement, html, css, PropertyValues} from "lit";
+import {customElement, property, state, query} from "lit/decorators.js";
+import {resetStyles} from "../../styles/reset.js";
+import type {StFormStep} from "./form-step.js";
+
+export type FormLayout = "vertical" | "horizontal" | "inline";
+
+@customElement("st-form")
+export class StForm extends LitElement {
+  @property({type: String, reflect: true}) layout: FormLayout = "vertical";
+  @property({type: Boolean, reflect: true}) loading = false;
+  @property({type: String}) error = "";
+
+  @state() private _currentStepIndex = 0;
+
+  @query("form") private _formEl!: HTMLFormElement;
+
+  private _modalFooterEl: HTMLElement | null = null;
+
+  private get _steps(): StFormStep[] {
+    return Array.from(this.querySelectorAll("st-form-step"));
+  }
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      form {
+        display: flex;
+        gap: var(--st-spacing-md);
+      }
+
+      :host([layout="vertical"]) form {
+        flex-direction: column;
+      }
+
+      :host([layout="horizontal"]) form {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+        align-items: start;
+      }
+
+      :host([layout="inline"]) form {
+        flex-direction: row;
+        align-items: flex-end;
+        flex-wrap: wrap;
+      }
+
+      .has-steps form {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .progress-nav {
+        display: flex;
+        align-items: center;
+        margin-bottom: var(--st-spacing-xl);
+        padding-bottom: var(--st-spacing-md);
+        overflow-x: auto;
+        scrollbar-width: none;
+      }
+
+      .step-indicator {
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-sm);
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-sm);
+        font-weight: var(--st-font-weight-medium);
+        transition: color 0.2s ease;
+      }
+
+      .step-indicator.active {
+        color: var(--st-color-text);
+      }
+      .step-indicator.completed {
+        color: var(--st-color-success);
+      }
+
+      .step-circle {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 50%;
+        border: 2px solid currentColor;
+        font-size: 0.875rem;
+        background-color: var(--st-color-bg);
+        transition: all 0.2s ease;
+      }
+
+      .step-indicator.active .step-circle {
+        background-color: var(--st-color-primary);
+        border-color: var(--st-color-primary);
+        color: var(--st-color-bg);
+      }
+
+      .step-indicator.completed .step-circle {
+        border-color: var(--st-color-success);
+        background-color: var(--st-color-success-bg, transparent);
+      }
+
+      .step-connector {
+        flex: 1;
+        height: 2px;
+        min-width: 24px;
+        margin: 0 var(--st-spacing-sm);
+        background-color: var(--st-color-border);
+        transition: background-color 0.2s ease;
+      }
+
+      .step-connector.completed {
+        background-color: var(--st-color-success);
+      }
+
+      .form-actions {
+        display: flex;
+        gap: var(--st-spacing-md);
+        margin-top: var(--st-spacing-lg);
+        justify-content: flex-end;
+      }
+
+      .loading-overlay {
+        position: absolute;
+        inset: 0;
+        background: rgba(var(--st-color-bg-rgb, 255, 255, 255), 0.7);
+        backdrop-filter: blur(2px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 10;
+        border-radius: inherit;
+        color: var(--st-color-text);
+        font-weight: var(--st-font-weight-medium);
+        gap: var(--st-spacing-sm);
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.5;
+        }
+      }
+
+      .loading-overlay st-icon {
+        animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+      }
+    `,
+  ];
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.updateComplete.then(() => {
+      this._updateStepVisibility();
+      this._updateModalFooter();
+    });
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._modalFooterEl) {
+      this._modalFooterEl.remove();
+      this._modalFooterEl = null;
+    }
+  }
+
+  override updated(changedProperties: PropertyValues<this>) {
+    super.updated(changedProperties);
+    this._updateModalFooter();
+  }
+
+  private _updateModalFooter() {
+    const modal = this.closest("st-modal");
+    if (modal) {
+      if (!this._modalFooterEl) {
+        this._modalFooterEl = document.createElement("div");
+        this._modalFooterEl.setAttribute("slot", "footer");
+        this._modalFooterEl.style.display = "flex";
+        this._modalFooterEl.style.gap = "var(--st-spacing-md)";
+        this._modalFooterEl.style.width = "100%";
+        this._modalFooterEl.style.justifyContent = "flex-end";
+        this._modalFooterEl.style.alignItems = "center";
+        modal.appendChild(this._modalFooterEl);
+      }
+
+      const steps = this._steps;
+      const hasSteps = steps.length > 0;
+      const isLastStep = hasSteps ? this._currentStepIndex === steps.length - 1 : true;
+
+      // Imperative DOM management prevents event listener loss and re-rendering conflicts
+      this._modalFooterEl.innerHTML = "";
+
+      if (hasSteps && this._currentStepIndex > 0) {
+        const backBtn = document.createElement("st-button");
+        backBtn.setAttribute("variant", "secondary");
+        backBtn.setAttribute("type", "button");
+        if (this.loading) backBtn.setAttribute("disabled", "");
+        backBtn.textContent = "Back";
+        backBtn.addEventListener("click", (e) => {
+          e.preventDefault();
+          this._prevStep();
+        });
+        this._modalFooterEl.appendChild(backBtn);
+      }
+
+      const submitBtn = document.createElement("st-button");
+      submitBtn.setAttribute("color", "primary");
+      submitBtn.setAttribute("type", "button");
+      if (this.loading) submitBtn.setAttribute("disabled", "");
+      submitBtn.textContent = this.loading ? "Submitting..." : (isLastStep ? "Submit" : "Continue");
+      submitBtn.addEventListener("click", (e) => {
+        e.preventDefault();
+        this._triggerSubmission();
+      });
+      this._modalFooterEl.appendChild(submitBtn);
+
+    } else if (this._modalFooterEl) {
+      this._modalFooterEl.remove();
+      this._modalFooterEl = null;
+    }
+  }
+
+  private _handleSlotChange() {
+    this._updateStepVisibility();
+    this._updateModalFooter();
+  }
+
+  private _updateStepVisibility() {
+    const steps = this._steps;
+    steps.forEach((step, index) => {
+      step.active = index === this._currentStepIndex;
+    });
+    this.requestUpdate();
+  }
+
+  private async _validateCurrentContext(): Promise<boolean> {
+    const steps = this._steps;
+    const scope: ParentNode = steps.length > 0
+      ? steps[this._currentStepIndex]
+      : this;
+
+    let isValid = true;
+
+    const inputs = Array.from(
+      scope.querySelectorAll<
+        HTMLElement & {
+          checkValidity?: () => boolean;
+          reportValidity?: () => boolean;
+          required?: boolean;
+          value?: any;
+          checked?: boolean;
+          invalid?: boolean;
+        }
+      >("st-input, st-select, st-textarea, st-checkbox, st-radio, input, select, textarea"),
+    );
+    
+    for (const input of inputs) {
+      if (input.hasAttribute("disabled") || (input as any).disabled) continue;
+
+      let fieldValid = true;
+
+      if (typeof input.checkValidity === "function") {
+        fieldValid = input.checkValidity();
+      } else {
+        const isRequired = input.hasAttribute("required") || input.required;
+        if (isRequired) {
+          const isToggle = input.tagName === "ST-CHECKBOX" || input.tagName === "ST-RADIO";
+          const val = isToggle ? input.checked : input.value;
+          if (val === undefined || val === null || val === "" || val === false) {
+            fieldValid = false;
+          }
+        }
+      }
+
+      if (!fieldValid) {
+        if (typeof input.reportValidity === "function") {
+          input.reportValidity();
+        } else if ("invalid" in input) {
+          input.invalid = true;
+        }
+        if (isValid && typeof (input as any).focus === "function") {
+          (input as any).focus();
+        }
+        isValid = false;
+      }
+    }
+
+    if (steps.length === 0 && this._formEl) {
+      if (!this._formEl.checkValidity()) {
+        isValid = false;
+      }
+    }
+
+    if (isValid && steps.length > 0) {
+      const currentStep = steps[this._currentStepIndex] as StFormStep & {
+        validate?: () => Promise<boolean> | boolean;
+      };
+
+      if (typeof currentStep.validate === "function") {
+        try {
+          this.loading = true;
+          const stepPassed = await currentStep.validate();
+          if (!stepPassed) {
+            isValid = false;
+          }
+        } catch {
+          isValid = false;
+        } finally {
+          this.loading = false;
+        }
+      }
+    }
+
+    return isValid;
+  }
+
+  private _triggerSubmission() {
+    this._formEl.requestSubmit();
+  }
+
+  private _prevStep() {
+    if (this._currentStepIndex > 0) {
+      this._currentStepIndex--;
+      this._updateStepVisibility();
+    }
+  }
+
+  private _extractFormData(): FormData {
+    const formData = new FormData();
+
+    const fields = this.querySelectorAll<
+      HTMLElement & {name: string; value: any; checked?: boolean; files?: FileList}
+    >("[name]");
+
+    fields.forEach((field) => {
+      if (field.hasAttribute("disabled")) return;
+
+      const isToggle =
+        field.tagName === "ST-RADIO" ||
+        field.tagName === "ST-CHECKBOX" ||
+        field.getAttribute("type") === "radio" ||
+        field.getAttribute("type") === "checkbox";
+
+      if (isToggle) {
+        if (field.checked) {
+          formData.append(field.name, field.value || "on");
+        }
+      } else if (
+        field.tagName === "INPUT" &&
+        field.getAttribute("type") === "file" &&
+        field.files
+      ) {
+        Array.from(field.files).forEach((file) => formData.append(field.name, file));
+      } else if (field.value !== undefined) {
+        formData.append(field.name, field.value);
+      }
+    });
+
+    return formData;
+  }
+
+  private async _handleSubmit(e: Event) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const isValid = await this._validateCurrentContext();
+    if (!isValid) return;
+
+    const steps = this._steps;
+    const hasSteps = steps.length > 0;
+    const isLastStep = hasSteps ? this._currentStepIndex === steps.length - 1 : true;
+
+    if (hasSteps && !isLastStep) {
+      this._currentStepIndex++;
+      this._updateStepVisibility();
+      return;
+    }
+
+    const formData = this._extractFormData();
+
+    this.dispatchEvent(
+      new CustomEvent("submit", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: {formData},
+      }),
+    );
+  }
+
+  render() {
+    const steps = this._steps;
+    const hasSteps = steps.length > 0;
+    const isInModal = !!this.closest("st-modal");
+
+    return html`
+      <div class="${hasSteps ? "has-steps" : ""}" aria-busy=${this.loading}>
+        ${this.loading
+          ? html`
+              <div class="loading-overlay">
+                <st-icon name="cloud-download" color="primary"></st-icon> Processing...
+              </div>
+            `
+          : ""}
+        ${hasSteps
+          ? html`
+              <div class="progress-nav" role="tablist">
+                ${steps.map((step, index) => {
+                  const isActive = index === this._currentStepIndex;
+                  const isCompleted = index < this._currentStepIndex;
+
+                  return html`
+                    <div
+                      class="step-indicator ${isActive ? "active" : ""} ${isCompleted
+                        ? "completed"
+                        : ""}"
+                      role="tab"
+                      aria-selected=${isActive}
+                    >
+                      <div class="step-circle">
+                        ${isCompleted
+                          ? html`<st-icon name="check-circle" size="sm"></st-icon>`
+                          : html`${index + 1}`}
+                      </div>
+                      <span>${step.title || `Step ${index + 1}`}</span>
+                    </div>
+                    ${index < steps.length - 1
+                      ? html` <div class="step-connector ${isCompleted ? "completed" : ""}"></div> `
+                      : ""}
+                  `;
+                })}
+              </div>
+            `
+          : ""}
+        ${this.error
+          ? html`
+              <st-alert color="error" style="margin-bottom: var(--st-spacing-lg);">
+                <st-icon slot="icon" name="alert-triangle"></st-icon>
+                ${this.error}
+              </st-alert>
+            `
+          : ""}
+
+        <form @submit=${this._handleSubmit}>
+          <slot @slotchange=${this._handleSlotChange}></slot>
+
+          ${!isInModal
+            ? html`
+                <div class="form-actions">
+                  ${hasSteps && this._currentStepIndex > 0
+                    ? html`
+                        <st-button
+                          variant="secondary"
+                          type="button"
+                          @click=${this._prevStep}
+                          ?disabled=${this.loading}
+                        >
+                          Back
+                        </st-button>
+                      `
+                    : ""}
+
+                  <st-button
+                    color="primary"
+                    type="button"
+                    @click=${this._triggerSubmission}
+                    ?disabled=${this.loading}
+                  >
+                    ${this.loading ? "Submitting..." : hasSteps && this._currentStepIndex === steps.length - 1 ? "Submit" : hasSteps ? "Continue" : "Submit"}
+                  </st-button>
+                </div>
+              `
+            : ""}
+        </form>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "st-form": StForm;
+  }
+}