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

package/dist/components/form/form.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from "lit";
+export type FormLayout = "vertical" | "horizontal" | "inline";
+export declare class StForm extends LitElement {
+    layout: FormLayout;
+    loading: boolean;
+    error: string;
+    private _currentStepIndex;
+    private _stepElements;
+    private _formEl;
+    static styles: import("lit").CSSResult[];
+    private _handleSlotChange;
+    private _updateStepVisibility;
+    private _validateCurrentContext;
+    private _triggerSubmission;
+    private _prevStep;
+    private _extractFormData;
+    private _handleSubmit;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "st-form": StForm;
+    }
+}
+//# sourceMappingURL=form.d.ts.map

package/dist/components/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAK1C,MAAM,MAAM,UAAU,GAAG,UAAU,GAAG,YAAY,GAAG,QAAQ,CAAC;AAE9D,qBACa,MAAO,SAAQ,UAAU;IACK,MAAM,EAAE,UAAU,CAAc;IAC/B,OAAO,UAAS;IAChC,KAAK,SAAM;IAE5B,OAAO,CAAC,iBAAiB,CAAK;IAGvC,OAAO,CAAC,aAAa,CAAgB;IAEtB,OAAO,CAAC,OAAO,CAAmB;IAEjD,MAAM,CAAC,MAAM,4BAqIX;IAEF,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,qBAAqB;YAOf,uBAAuB;IAuDrC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,gBAAgB;YAkCV,aAAa;IA4B3B,MAAM,yCAiFL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/form/form.js

@@ -0,0 +1,364 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from "lit";
+import { customElement, property, state, queryAssignedElements, query } from "lit/decorators.js";
+import { resetStyles } from "../../styles/reset.js";
+let StForm = class StForm extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.layout = "vertical";
+        this.loading = false;
+        this.error = "";
+        this._currentStepIndex = 0;
+    }
+    _handleSlotChange() {
+        if (this._stepElements.length > 0) {
+            this._updateStepVisibility();
+        }
+    }
+    _updateStepVisibility() {
+        this._stepElements.forEach((step, index) => {
+            step.active = index === this._currentStepIndex;
+        });
+        this.requestUpdate();
+    }
+    async _validateCurrentContext() {
+        const scope = this._stepElements.length > 0
+            ? this._stepElements[this._currentStepIndex]
+            : this;
+        let isValid = true;
+        // 1. Validate standard DOM input components
+        const inputs = Array.from(scope.querySelectorAll("*"));
+        for (const input of inputs) {
+            if (typeof input.checkValidity === "function") {
+                if (!input.checkValidity()) {
+                    if (isValid && typeof input.reportValidity === "function") {
+                        input.reportValidity();
+                    }
+                    isValid = false;
+                }
+            }
+        }
+        if (this._stepElements.length === 0 && this._formEl) {
+            if (!this._formEl.checkValidity()) {
+                isValid = false;
+            }
+        }
+        // 2. Execute step-level async/sync validation hook if defined
+        if (isValid && this._stepElements.length > 0) {
+            const currentStep = this._stepElements[this._currentStepIndex];
+            if (typeof currentStep.validate === "function") {
+                try {
+                    this.loading = true;
+                    const stepPassed = await currentStep.validate();
+                    if (!stepPassed) {
+                        isValid = false;
+                    }
+                }
+                catch (err) {
+                    isValid = false;
+                }
+                finally {
+                    this.loading = false;
+                }
+            }
+        }
+        return isValid;
+    }
+    _triggerSubmission() {
+        this._formEl.requestSubmit();
+    }
+    _prevStep() {
+        if (this._currentStepIndex > 0) {
+            this._currentStepIndex--;
+            this._updateStepVisibility();
+        }
+    }
+    _extractFormData() {
+        const formData = new FormData();
+        const fields = this.querySelectorAll("[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;
+    }
+    async _handleSubmit(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const isValid = await this._validateCurrentContext();
+        if (!isValid)
+            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;
+        }
+        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>
+                `
+            : ""}
+
+            <st-button
+              color="primary"
+              type="button"
+              @click=${this._triggerSubmission}
+              ?disabled=${this.loading}
+            >
+              ${this.loading ? "Submitting..." : isLastStep ? "Submit" : "Continue"}
+            </st-button>
+          </div>
+        </form>
+      </div>
+    `;
+    }
+};
+StForm.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;
+      }
+    `,
+];
+__decorate([
+    property({ type: String, reflect: true })
+], StForm.prototype, "layout", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], StForm.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], StForm.prototype, "error", void 0);
+__decorate([
+    state()
+], StForm.prototype, "_currentStepIndex", void 0);
+__decorate([
+    queryAssignedElements({ selector: "st-form-step" })
+], StForm.prototype, "_stepElements", void 0);
+__decorate([
+    query("form")
+], StForm.prototype, "_formEl", void 0);
+StForm = __decorate([
+    customElement("st-form")
+], StForm);
+export { StForm };

package/dist/components/grid/grid-row.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+export declare class StGridRow extends LitElement {
+    xs: number;
+    sm?: number;
+    md?: number;
+    lg?: number;
+    xl?: number;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-grid-row': StGridRow;
+    }
+}
+//# sourceMappingURL=grid-row.d.ts.map

package/dist/components/grid/grid-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-row.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,SAAU,SAAQ,UAAU;IACX,EAAE,SAAK;IACP,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IAExC,MAAM,CAAC,MAAM,4BAkCX;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,QAgB1C;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}

package/dist/components/grid/grid-row.js

@@ -0,0 +1,92 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StGridRow = class StGridRow extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.xs = 1;
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.style.setProperty('--grid-xs', this.xs.toString());
+        if (this.sm !== undefined)
+            this.style.setProperty('--grid-sm', this.sm.toString());
+        else
+            this.style.removeProperty('--grid-sm');
+        if (this.md !== undefined)
+            this.style.setProperty('--grid-md', this.md.toString());
+        else
+            this.style.removeProperty('--grid-md');
+        if (this.lg !== undefined)
+            this.style.setProperty('--grid-lg', this.lg.toString());
+        else
+            this.style.removeProperty('--grid-lg');
+        if (this.xl !== undefined)
+            this.style.setProperty('--grid-xl', this.xl.toString());
+        else
+            this.style.removeProperty('--grid-xl');
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StGridRow.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: grid;
+        /* Seamlessly inherits --grid-gap from <st-grid> parent, or falls back */
+        gap: var(--grid-gap, var(--st-spacing-md));
+        grid-template-columns: repeat(var(--_cols, 1), 1fr);
+        width: 100%;
+      }
+
+      /* Mobile First (xs) */
+      :host { --_cols: var(--grid-xs, 1); }
+
+      /* Small (sm: >= 640px) */
+      @media (min-width: 640px) {
+        :host { --_cols: var(--grid-sm, var(--grid-xs, 1)); }
+      }
+      
+      /* Medium (md: >= 768px) */
+      @media (min-width: 768px) {
+        :host { --_cols: var(--grid-md, var(--grid-sm, var(--grid-xs, 1))); }
+      }
+      
+      /* Large (lg: >= 1024px) */
+      @media (min-width: 1024px) {
+        :host { --_cols: var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1)))); }
+      }
+      
+      /* Extra Large (xl: >= 1280px) */
+      @media (min-width: 1280px) {
+        :host { --_cols: var(--grid-xl, var(--grid-lg, var(--grid-md, var(--grid-sm, var(--grid-xs, 1))))); }
+      }
+    `
+];
+__decorate([
+    property({ type: Number })
+], StGridRow.prototype, "xs", void 0);
+__decorate([
+    property({ type: Number })
+], StGridRow.prototype, "sm", void 0);
+__decorate([
+    property({ type: Number })
+], StGridRow.prototype, "md", void 0);
+__decorate([
+    property({ type: Number })
+], StGridRow.prototype, "lg", void 0);
+__decorate([
+    property({ type: Number })
+], StGridRow.prototype, "xl", void 0);
+StGridRow = __decorate([
+    customElement('st-grid-row')
+], StGridRow);
+export { StGridRow };

package/dist/components/grid/grid.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class StGrid extends LitElement {
+    gap: string;
+    static styles: import("lit").CSSResult[];
+    updated(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'st-grid': StGrid;
+    }
+}
+//# sourceMappingURL=grid.d.ts.map

package/dist/components/grid/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../src/components/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,MAAO,SAAQ,UAAU;IAER,GAAG,SAA0B;IAEzD,MAAM,CAAC,MAAM,4BAUX;IAEF,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,QAI1C;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/grid/grid.js

@@ -0,0 +1,42 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+let StGrid = class StGrid extends LitElement {
+    constructor() {
+        super(...arguments);
+        // Centralized gap control
+        this.gap = 'var(--st-spacing-md)';
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // This CSS variable will automatically cascade down the DOM tree
+        this.style.setProperty('--grid-gap', this.gap);
+    }
+    render() {
+        return html `<slot></slot>`;
+    }
+};
+StGrid.styles = [
+    resetStyles,
+    css `
+      :host {
+        display: grid;
+        grid-template-columns: 1fr; /* Stacks the rows vertically */
+        gap: var(--grid-gap, var(--st-spacing-md));
+        width: 100%;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], StGrid.prototype, "gap", void 0);
+StGrid = __decorate([
+    customElement('st-grid')
+], StGrid);
+export { StGrid };