@zentto/studio 0.1.0

package/dist/designer/zs-page-designer.js

@@ -0,0 +1,466 @@
+// @zentto/studio — Runtime Page Designer
+// Allows users to drag-drop fields, reorder, resize, and edit properties
+// in a live preview. Outputs the modified StudioSchema.
+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, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { studioTokens, fieldBaseStyles } from '../styles/tokens.js';
+import { getAllFields } from '@zentto/studio-core';
+// Import renderer for live preview
+import '../zentto-studio-renderer.js';
+let ZsPageDesigner = class ZsPageDesigner extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.schema = null;
+        this.data = {};
+        this.selectedFieldId = null;
+        this.viewMode = 'design';
+        this.dragType = null;
+        this.renderKey = 0;
+    }
+    static { this.styles = [studioTokens, fieldBaseStyles, css `
+    :host { display: block; font-family: var(--zs-font-family); height: 100%; }
+
+    .designer {
+      display: grid; grid-template-columns: 220px 1fr 280px;
+      height: 100%; overflow: hidden;
+      border: 1px solid var(--zs-border); border-radius: 8px;
+    }
+
+    /* ─── Toolbox (Left) ──────────────────────── */
+    .toolbox {
+      background: var(--zs-bg-secondary); border-right: 1px solid var(--zs-border);
+      overflow-y: auto; padding: 12px;
+    }
+    .toolbox-title {
+      font-size: 11px; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.5px; color: var(--zs-text-secondary);
+      margin: 12px 0 8px; padding: 0 4px;
+    }
+    .toolbox-title:first-child { margin-top: 0; }
+    .toolbox-item {
+      display: flex; align-items: center; gap: 8px;
+      padding: 8px 10px; border-radius: 6px;
+      cursor: grab; font-size: 13px; color: var(--zs-text);
+      transition: all 100ms; margin-bottom: 2px;
+      border: 1px solid transparent;
+    }
+    .toolbox-item:hover { background: var(--zs-bg-hover); border-color: var(--zs-border); }
+    .toolbox-item:active { cursor: grabbing; background: var(--zs-primary-light); border-color: var(--zs-primary); }
+    .toolbox-item-icon { font-size: 16px; width: 24px; text-align: center; }
+    .toolbox-item-label { flex: 1; }
+
+    /* ─── Canvas (Center) ─────────────────────── */
+    .canvas {
+      overflow-y: auto; padding: 24px;
+      background: #f5f5f5; position: relative;
+    }
+    .canvas-header {
+      display: flex; align-items: center; gap: 8px;
+      margin-bottom: 16px; padding: 0 4px;
+    }
+    .canvas-title { font-size: 16px; font-weight: 600; color: var(--zs-text); }
+    .canvas-actions { margin-left: auto; display: flex; gap: 6px; }
+    .canvas-btn {
+      padding: 5px 12px; border: 1px solid var(--zs-border);
+      border-radius: 4px; background: var(--zs-bg); cursor: pointer;
+      font-size: 12px; color: var(--zs-text-secondary);
+      transition: all 100ms;
+    }
+    .canvas-btn:hover { background: var(--zs-bg-hover); color: var(--zs-text); }
+    .canvas-btn--active { background: var(--zs-primary); color: white; border-color: var(--zs-primary); }
+
+    /* Preview wrapper */
+    .preview-frame {
+      background: var(--zs-bg); border-radius: 8px;
+      border: 1px solid var(--zs-border);
+      box-shadow: 0 2px 8px var(--zs-shadow);
+      padding: 16px; min-height: 300px;
+    }
+
+    /* Field overlay (clickable areas on preview) */
+    .field-overlay {
+      position: relative; cursor: pointer;
+      border: 2px solid transparent; border-radius: 4px;
+      transition: all 100ms; margin: -2px;
+      padding: 2px;
+    }
+    .field-overlay:hover { border-color: var(--zs-accent); background: rgba(52, 152, 219, 0.03); }
+    .field-overlay--selected { border-color: var(--zs-primary); background: rgba(230, 126, 34, 0.05); }
+    .field-overlay-label {
+      position: absolute; top: -10px; left: 8px;
+      font-size: 10px; background: var(--zs-primary); color: white;
+      padding: 1px 6px; border-radius: 3px;
+      opacity: 0; transition: opacity 100ms;
+    }
+    .field-overlay:hover .field-overlay-label,
+    .field-overlay--selected .field-overlay-label { opacity: 1; }
+    .field-overlay-actions {
+      position: absolute; top: -10px; right: 4px;
+      display: flex; gap: 2px;
+      opacity: 0; transition: opacity 100ms;
+    }
+    .field-overlay:hover .field-overlay-actions { opacity: 1; }
+    .field-overlay-btn {
+      width: 20px; height: 20px; border-radius: 3px;
+      border: none; cursor: pointer; font-size: 11px;
+      display: flex; align-items: center; justify-content: center;
+      transition: all 100ms;
+    }
+    .field-overlay-btn--move { background: var(--zs-accent); color: white; }
+    .field-overlay-btn--delete { background: var(--zs-danger); color: white; }
+
+    /* Drop zones */
+    .drop-zone {
+      border: 2px dashed var(--zs-border); border-radius: 6px;
+      padding: 20px; text-align: center; margin: 8px 0;
+      color: var(--zs-text-muted); font-size: 13px;
+      transition: all 150ms;
+    }
+    .drop-zone--active { border-color: var(--zs-primary); background: var(--zs-primary-light); color: var(--zs-primary); }
+
+    /* ─── Properties (Right) ──────────────────── */
+    .properties {
+      background: var(--zs-bg); border-left: 1px solid var(--zs-border);
+      overflow-y: auto; padding: 16px;
+    }
+    .props-title {
+      font-size: 11px; font-weight: 600; text-transform: uppercase;
+      letter-spacing: 0.5px; color: var(--zs-text-secondary);
+      margin: 16px 0 8px; padding-bottom: 4px;
+      border-bottom: 1px solid var(--zs-border);
+    }
+    .props-title:first-child { margin-top: 0; }
+    .props-row { margin-bottom: 12px; }
+    .props-label {
+      font-size: 12px; font-weight: 500; color: var(--zs-text-secondary);
+      margin-bottom: 4px; display: block;
+    }
+    .props-input {
+      width: 100%; padding: 6px 10px; border: 1px solid var(--zs-border);
+      border-radius: 4px; font-size: 13px; font-family: var(--zs-font-family);
+      background: var(--zs-bg); color: var(--zs-text);
+      outline: none; box-sizing: border-box;
+    }
+    .props-input:focus { border-color: var(--zs-primary); }
+    .props-select { height: 32px; }
+    .props-checkbox {
+      display: flex; align-items: center; gap: 6px;
+      font-size: 13px; cursor: pointer;
+    }
+    .props-checkbox input { accent-color: var(--zs-primary); }
+    .props-empty {
+      text-align: center; padding: 40px 16px;
+      color: var(--zs-text-muted); font-size: 13px;
+    }
+    .props-field-type {
+      display: inline-block; padding: 2px 8px;
+      background: var(--zs-primary-light); color: var(--zs-primary);
+      border-radius: 4px; font-size: 11px; font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    /* JSON panel */
+    .json-panel {
+      font-family: 'Fira Code', 'Consolas', monospace;
+      font-size: 12px; line-height: 1.5;
+      background: #1e1e2d; color: #a2a3b7;
+      padding: 16px; border-radius: 8px;
+      overflow: auto; max-height: 400px;
+      white-space: pre; tab-size: 2;
+    }
+  `]; }
+    get selectedField() {
+        if (!this.schema || !this.selectedFieldId)
+            return null;
+        for (const section of this.schema.sections) {
+            const f = section.fields.find(f => f.id === this.selectedFieldId);
+            if (f)
+                return f;
+        }
+        return null;
+    }
+    get selectedSectionIndex() {
+        if (!this.schema || !this.selectedFieldId)
+            return -1;
+        return this.schema.sections.findIndex(s => s.fields.some(f => f.id === this.selectedFieldId));
+    }
+    // ─── Render ───────────────────────────────────────
+    render() {
+        return html `
+      <div class="designer">
+        ${this.renderToolbox()}
+        ${this.renderCanvas()}
+        ${this.renderProperties()}
+      </div>
+    `;
+    }
+    // ─── Toolbox ──────────────────────────────────────
+    renderToolbox() {
+        const fields = getAllFields();
+        const categories = ['basic', 'advanced', 'data', 'media', 'layout'];
+        const categoryNames = {
+            basic: 'Basicos', advanced: 'Avanzados',
+            data: 'Datos', media: 'Media', layout: 'Layout',
+        };
+        return html `
+      <div class="toolbox">
+        ${categories.map(cat => {
+            const items = fields.filter(f => f.category === cat);
+            if (items.length === 0)
+                return nothing;
+            return html `
+            <div class="toolbox-title">${categoryNames[cat] ?? cat}</div>
+            ${items.map(f => html `
+              <div class="toolbox-item"
+                draggable="true"
+                @dragstart="${(e) => { this.dragType = f.type; e.dataTransfer?.setData('text/plain', f.type); }}"
+                @dragend="${() => { this.dragType = null; }}"
+                @dblclick="${() => this.addField(f.type)}"
+              >
+                <span class="toolbox-item-icon">${f.icon}</span>
+                <span class="toolbox-item-label">${f.label}</span>
+              </div>
+            `)}
+          `;
+        })}
+      </div>
+    `;
+    }
+    // ─── Canvas ───────────────────────────────────────
+    renderCanvas() {
+        return html `
+      <div class="canvas">
+        <div class="canvas-header">
+          <span class="canvas-title">${this.schema?.title || 'Sin titulo'}</span>
+          <div class="canvas-actions">
+            <button class="canvas-btn ${this.viewMode === 'design' ? 'canvas-btn--active' : ''}" @click="${() => { this.viewMode = 'design'; }}">Diseño</button>
+            <button class="canvas-btn ${this.viewMode === 'preview' ? 'canvas-btn--active' : ''}" @click="${() => { this.viewMode = 'preview'; }}">Preview</button>
+            <button class="canvas-btn ${this.viewMode === 'json' ? 'canvas-btn--active' : ''}" @click="${() => { this.viewMode = 'json'; }}">JSON</button>
+          </div>
+        </div>
+
+        ${this.viewMode === 'json'
+            ? html `<div class="json-panel">${JSON.stringify(this.schema, null, 2)}</div>`
+            : this.viewMode === 'preview'
+                ? html `<div class="preview-frame"><zentto-studio-renderer .schema="${this.schema}" .data="${this.data}"></zentto-studio-renderer></div>`
+                : this.renderDesignView()}
+      </div>
+    `;
+    }
+    renderDesignView() {
+        if (!this.schema)
+            return html `<div class="drop-zone">Arrastra campos del toolbox aqui</div>`;
+        return html `
+      <div class="preview-frame">
+        ${this.schema.sections.map((section, si) => html `
+          <div style="margin-bottom:24px;">
+            ${section.title ? html `<h3 style="font-size:16px;font-weight:600;margin:0 0 12px;color:var(--zs-text);border-bottom:2px solid var(--zs-primary-light);padding-bottom:6px;">${section.title}</h3>` : ''}
+            <div style="display:grid;grid-template-columns:repeat(${section.columns ?? this.schema?.layout.columns ?? 1}, 1fr);gap:12px;">
+              ${section.fields.map((field, fi) => html `
+                <div class="field-overlay ${this.selectedFieldId === field.id ? 'field-overlay--selected' : ''}"
+                  style="${field.colSpan ? `grid-column: span ${field.colSpan}` : ''}"
+                  @click="${(e) => { e.stopPropagation(); this.selectedFieldId = field.id; }}"
+                >
+                  <span class="field-overlay-label">${field.type}: ${field.id}</span>
+                  <div class="field-overlay-actions">
+                    ${fi > 0 ? html `<button class="field-overlay-btn field-overlay-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, -1); }}">↑</button>` : ''}
+                    ${fi < section.fields.length - 1 ? html `<button class="field-overlay-btn field-overlay-btn--move" @click="${(e) => { e.stopPropagation(); this.moveField(si, fi, 1); }}">↓</button>` : ''}
+                    <button class="field-overlay-btn field-overlay-btn--delete" @click="${(e) => { e.stopPropagation(); this.removeField(si, fi); }}">✕</button>
+                  </div>
+                  <!-- Render actual field preview -->
+                  <div style="pointer-events:none;opacity:0.9;">
+                    <div style="font-size:12px;font-weight:500;color:var(--zs-text-secondary);margin-bottom:4px;">${field.label ?? field.id}${field.required ? ' *' : ''}</div>
+                    <div style="height:36px;border:1px solid var(--zs-border);border-radius:4px;background:var(--zs-bg-secondary);display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--zs-text-muted);">${field.placeholder ?? field.type}</div>
+                  </div>
+                </div>
+              `)}
+            </div>
+            <!-- Drop zone at end of section -->
+            <div class="drop-zone ${this.dragType ? 'drop-zone--active' : ''}"
+              @dragover="${(e) => e.preventDefault()}"
+              @drop="${(e) => { e.preventDefault(); if (this.dragType) {
+            this.addFieldToSection(si, this.dragType);
+            this.dragType = null;
+        } }}"
+            >
+              ${this.dragType ? 'Soltar aqui' : 'Arrastra un campo aqui'}
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    // ─── Properties Panel ─────────────────────────────
+    renderProperties() {
+        const field = this.selectedField;
+        if (!field) {
+            return html `
+        <div class="properties">
+          <div class="props-empty">
+            <div style="font-size:32px;margin-bottom:8px;">👆</div>
+            Selecciona un campo para editar sus propiedades
+          </div>
+          ${this.schema ? html `
+            <div class="props-title">FORMULARIO</div>
+            <div class="props-row">
+              <label class="props-label">Titulo</label>
+              <input class="props-input" .value="${this.schema.title}" @input="${(e) => { this.schema.title = e.target.value; this.emitChange(); }}" />
+            </div>
+            <div class="props-row">
+              <label class="props-label">Columnas</label>
+              <input class="props-input" type="number" min="1" max="6" .value="${String(this.schema.layout.columns ?? 1)}" @input="${(e) => { this.schema.layout.columns = parseInt(e.target.value) || 1; this.emitChange(); }}" />
+            </div>
+          ` : ''}
+        </div>
+      `;
+        }
+        return html `
+      <div class="properties">
+        <span class="props-field-type">${field.type}</span>
+
+        <div class="props-title">GENERAL</div>
+        <div class="props-row">
+          <label class="props-label">ID</label>
+          <input class="props-input" .value="${field.id}" @input="${(e) => { field.id = e.target.value; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Label</label>
+          <input class="props-input" .value="${field.label ?? ''}" @input="${(e) => { field.label = e.target.value; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Field (binding)</label>
+          <input class="props-input" .value="${field.field}" @input="${(e) => { field.field = e.target.value; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Placeholder</label>
+          <input class="props-input" .value="${field.placeholder ?? ''}" @input="${(e) => { field.placeholder = e.target.value; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Help Text</label>
+          <input class="props-input" .value="${field.helpText ?? ''}" @input="${(e) => { field.helpText = e.target.value; this.emitChange(); }}" />
+        </div>
+
+        <div class="props-title">LAYOUT</div>
+        <div class="props-row">
+          <label class="props-label">Col Span</label>
+          <input class="props-input" type="number" min="1" max="6" .value="${String(field.colSpan ?? 1)}" @input="${(e) => { field.colSpan = parseInt(e.target.value) || 1; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">CSS Class</label>
+          <input class="props-input" .value="${field.cssClass ?? ''}" @input="${(e) => { field.cssClass = e.target.value; this.emitChange(); }}" />
+        </div>
+
+        <div class="props-title">COMPORTAMIENTO</div>
+        <div class="props-row">
+          <label class="props-checkbox"><input type="checkbox" .checked="${field.required ?? false}" @change="${(e) => { field.required = e.target.checked; this.emitChange(); }}" /> Requerido</label>
+        </div>
+        <div class="props-row">
+          <label class="props-checkbox"><input type="checkbox" .checked="${field.readOnly ?? false}" @change="${(e) => { field.readOnly = e.target.checked; this.emitChange(); }}" /> Solo lectura</label>
+        </div>
+        <div class="props-row">
+          <label class="props-checkbox"><input type="checkbox" .checked="${field.disabled ?? false}" @change="${(e) => { field.disabled = e.target.checked; this.emitChange(); }}" /> Deshabilitado</label>
+        </div>
+        <div class="props-row">
+          <label class="props-checkbox"><input type="checkbox" .checked="${field.hidden ?? false}" @change="${(e) => { field.hidden = e.target.checked; this.emitChange(); }}" /> Oculto</label>
+        </div>
+
+        <div class="props-title">REGLAS</div>
+        <div class="props-row">
+          <label class="props-label">Visibilidad (expresion)</label>
+          <input class="props-input" .value="${field.visibilityRule ?? ''}" placeholder='{role} == "admin"' @input="${(e) => { field.visibilityRule = e.target.value || undefined; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Valor Computado</label>
+          <input class="props-input" .value="${field.computedValue ?? ''}" placeholder='{precio} * {cantidad}' @input="${(e) => { field.computedValue = e.target.value || undefined; this.emitChange(); }}" />
+        </div>
+        <div class="props-row">
+          <label class="props-label">Default Value</label>
+          <input class="props-input" .value="${String(field.defaultValue ?? '')}" @input="${(e) => { field.defaultValue = e.target.value || undefined; this.emitChange(); }}" />
+        </div>
+      </div>
+    `;
+    }
+    // ─── Actions ──────────────────────────────────────
+    addField(type) {
+        if (!this.schema) {
+            this.schema = {
+                id: 'new-form', version: '1.0', title: 'Nuevo Formulario',
+                layout: { type: 'grid', columns: 2 },
+                sections: [{ id: 'main', title: 'Datos', fields: [] }],
+            };
+        }
+        this.addFieldToSection(0, type);
+    }
+    addFieldToSection(sectionIndex, type) {
+        if (!this.schema)
+            return;
+        const id = `${type}_${Date.now()}`;
+        const meta = getAllFields().find(f => f.type === type);
+        const field = {
+            id,
+            type,
+            field: id,
+            label: meta?.label ?? type,
+            props: meta?.defaultProps ? { ...meta.defaultProps } : undefined,
+        };
+        this.schema.sections[sectionIndex].fields.push(field);
+        this.selectedFieldId = id;
+        this.emitChange();
+    }
+    removeField(sectionIndex, fieldIndex) {
+        if (!this.schema)
+            return;
+        const field = this.schema.sections[sectionIndex].fields[fieldIndex];
+        if (this.selectedFieldId === field.id)
+            this.selectedFieldId = null;
+        this.schema.sections[sectionIndex].fields.splice(fieldIndex, 1);
+        this.emitChange();
+    }
+    moveField(sectionIndex, fieldIndex, dir) {
+        if (!this.schema)
+            return;
+        const fields = this.schema.sections[sectionIndex].fields;
+        const newIndex = fieldIndex + dir;
+        if (newIndex < 0 || newIndex >= fields.length)
+            return;
+        [fields[fieldIndex], fields[newIndex]] = [fields[newIndex], fields[fieldIndex]];
+        this.emitChange();
+    }
+    emitChange() {
+        this.renderKey++;
+        this.requestUpdate();
+        this.dispatchEvent(new CustomEvent('schema-change', {
+            detail: { schema: structuredClone(this.schema) },
+            bubbles: true, composed: true,
+        }));
+    }
+};
+__decorate([
+    property({ type: Object })
+], ZsPageDesigner.prototype, "schema", void 0);
+__decorate([
+    property({ type: Object })
+], ZsPageDesigner.prototype, "data", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "selectedFieldId", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "viewMode", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "dragType", void 0);
+__decorate([
+    state()
+], ZsPageDesigner.prototype, "renderKey", void 0);
+ZsPageDesigner = __decorate([
+    customElement('zs-page-designer')
+], ZsPageDesigner);
+export { ZsPageDesigner };
+//# sourceMappingURL=zs-page-designer.js.map

package/dist/designer/zs-page-designer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zs-page-designer.js","sourceRoot":"","sources":["../../src/designer/zs-page-designer.ts"],"names":[],"mappings":"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"}

package/dist/fields/zs-field-address.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+interface AddressValue {
+    street?: string;
+    city?: string;
+    state?: string;
+    zip?: string;
+    country?: string;
+}
+export declare class ZsFieldAddress extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fieldId: string;
+    label: string;
+    helpText: string;
+    value: AddressValue;
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    errors: string[];
+    private handleChange;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-field-address': ZsFieldAddress;
+    }
+}
+export {};
+//# sourceMappingURL=zs-field-address.d.ts.map

package/dist/fields/zs-field-address.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-address.d.ts","sourceRoot":"","sources":["../../src/fields/zs-field-address.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,MAAM,4BAiBV;IAES,OAAO,SAAM;IACb,KAAK,SAAM;IACX,QAAQ,SAAM;IACE,KAAK,EAAE,YAAY,CAAM;IACxB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACnB,MAAM,EAAE,MAAM,EAAE,CAAM;IAEjD,OAAO,CAAC,YAAY;IASpB,MAAM;CAoDP;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,kBAAkB,EAAE,cAAc,CAAC;KAAE;CAAE"}

package/dist/fields/zs-field-address.js

@@ -0,0 +1,129 @@
+// @zentto/studio — Composite address field
+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 { fieldBaseStyles } from '../styles/tokens.js';
+let ZsFieldAddress = class ZsFieldAddress extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fieldId = '';
+        this.label = '';
+        this.helpText = '';
+        this.value = {};
+        this.required = false;
+        this.disabled = false;
+        this.readOnly = false;
+        this.errors = [];
+    }
+    static { this.styles = [fieldBaseStyles, css `
+    :host { display: block; }
+    .zs-address-grid {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 8px;
+    }
+    .zs-address-row {
+      display: grid;
+      gap: 8px;
+    }
+    .zs-address-row--2 { grid-template-columns: 1fr 1fr; }
+    .zs-address-row--3 { grid-template-columns: 2fr 1fr 1fr; }
+    .zs-address-mini-label {
+      font-size: 11px; color: var(--zs-text-muted);
+      margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.3px;
+    }
+  `]; }
+    handleChange(subfield, e) {
+        const input = e.target;
+        const newValue = { ...this.value, [subfield]: input.value };
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: newValue },
+            bubbles: true, composed: true,
+        }));
+    }
+    render() {
+        const hasError = this.errors.length > 0;
+        const labelClass = `zs-label ${this.required ? 'zs-label--required' : ''}`;
+        const inputClass = `zs-input ${hasError ? 'zs-input--error' : ''}`;
+        return html `
+      <div class="zs-field">
+        ${this.label ? html `<label class="${labelClass}">${this.label}</label>` : ''}
+        <div class="zs-address-grid">
+          <div>
+            <div class="zs-address-mini-label">Direccion</div>
+            <input class="${inputClass}" .value="${this.value.street ?? ''}"
+              placeholder="Calle, numero, piso"
+              ?disabled="${this.disabled}" ?readonly="${this.readOnly}"
+              @input="${(e) => this.handleChange('street', e)}" />
+          </div>
+          <div class="zs-address-row zs-address-row--3">
+            <div>
+              <div class="zs-address-mini-label">Ciudad</div>
+              <input class="${inputClass}" .value="${this.value.city ?? ''}"
+                placeholder="Ciudad"
+                ?disabled="${this.disabled}" ?readonly="${this.readOnly}"
+                @input="${(e) => this.handleChange('city', e)}" />
+            </div>
+            <div>
+              <div class="zs-address-mini-label">Estado/Provincia</div>
+              <input class="${inputClass}" .value="${this.value.state ?? ''}"
+                placeholder="Estado"
+                ?disabled="${this.disabled}" ?readonly="${this.readOnly}"
+                @input="${(e) => this.handleChange('state', e)}" />
+            </div>
+            <div>
+              <div class="zs-address-mini-label">C.P.</div>
+              <input class="${inputClass}" .value="${this.value.zip ?? ''}"
+                placeholder="Codigo postal"
+                ?disabled="${this.disabled}" ?readonly="${this.readOnly}"
+                @input="${(e) => this.handleChange('zip', e)}" />
+            </div>
+          </div>
+          <div>
+            <div class="zs-address-mini-label">Pais</div>
+            <input class="${inputClass}" .value="${this.value.country ?? ''}"
+              placeholder="Pais"
+              ?disabled="${this.disabled}" ?readonly="${this.readOnly}"
+              @input="${(e) => this.handleChange('country', e)}" />
+          </div>
+        </div>
+        ${hasError ? html `<span class="zs-error">${this.errors[0]}</span>` : ''}
+        ${this.helpText && !hasError ? html `<span class="zs-help">${this.helpText}</span>` : ''}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], ZsFieldAddress.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], ZsFieldAddress.prototype, "label", void 0);
+__decorate([
+    property()
+], ZsFieldAddress.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Object })
+], ZsFieldAddress.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldAddress.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldAddress.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldAddress.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldAddress.prototype, "errors", void 0);
+ZsFieldAddress = __decorate([
+    customElement('zs-field-address')
+], ZsFieldAddress);
+export { ZsFieldAddress };
+//# sourceMappingURL=zs-field-address.js.map

package/dist/fields/zs-field-address.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-address.js","sourceRoot":"","sources":["../../src/fields/zs-field-address.ts"],"names":[],"mappings":"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"}