@zentto/studio 0.1.0

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

@@ -0,0 +1,191 @@
+// @zentto/studio — Signature pad 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, state, query } from 'lit/decorators.js';
+import { fieldBaseStyles } from '../styles/tokens.js';
+let ZsFieldSignature = class ZsFieldSignature extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fieldId = '';
+        this.label = '';
+        this.helpText = '';
+        this.value = '';
+        this.required = false;
+        this.disabled = false;
+        this.penWidth = 2;
+        this.penColor = '#000000';
+        this.errors = [];
+        this.drawing = false;
+        this.ctx = null;
+        this.lastX = 0;
+        this.lastY = 0;
+    }
+    static { this.styles = [fieldBaseStyles, css `
+    :host { display: block; }
+    .zs-sig-wrapper { position: relative; }
+    canvas {
+      border: 1px solid var(--zs-border); border-radius: var(--zs-radius);
+      cursor: crosshair; touch-action: none; background: white;
+      width: 100%; height: 150px;
+    }
+    .zs-sig-actions {
+      display: flex; gap: 8px; margin-top: 6px; justify-content: flex-end;
+    }
+    .zs-sig-btn {
+      border: 1px solid var(--zs-border); background: var(--zs-bg);
+      padding: 4px 12px; border-radius: var(--zs-radius);
+      cursor: pointer; font-size: var(--zs-font-size-sm);
+      color: var(--zs-text-secondary); transition: all var(--zs-transition);
+    }
+    .zs-sig-btn:hover { background: var(--zs-bg-hover); color: var(--zs-text); }
+  `]; }
+    firstUpdated() {
+        if (!this.canvas)
+            return;
+        this.ctx = this.canvas.getContext('2d');
+        this.resizeCanvas();
+        if (this.value)
+            this.loadSignature();
+        // Handle resize
+        const ro = new ResizeObserver(() => this.resizeCanvas());
+        ro.observe(this.canvas);
+    }
+    resizeCanvas() {
+        if (!this.canvas)
+            return;
+        const rect = this.canvas.getBoundingClientRect();
+        this.canvas.width = rect.width;
+        this.canvas.height = rect.height;
+        if (this.value)
+            this.loadSignature();
+    }
+    loadSignature() {
+        if (!this.ctx || !this.value)
+            return;
+        const img = new Image();
+        img.onload = () => { this.ctx.drawImage(img, 0, 0); };
+        img.src = this.value;
+    }
+    getPos(e) {
+        const rect = this.canvas.getBoundingClientRect();
+        if ('touches' in e) {
+            return { x: e.touches[0].clientX - rect.left, y: e.touches[0].clientY - rect.top };
+        }
+        return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+    }
+    startDraw(e) {
+        if (this.disabled)
+            return;
+        e.preventDefault();
+        this.drawing = true;
+        const pos = this.getPos(e);
+        this.lastX = pos.x;
+        this.lastY = pos.y;
+    }
+    draw(e) {
+        if (!this.drawing || !this.ctx)
+            return;
+        e.preventDefault();
+        const pos = this.getPos(e);
+        this.ctx.beginPath();
+        this.ctx.strokeStyle = this.penColor;
+        this.ctx.lineWidth = this.penWidth;
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        this.ctx.moveTo(this.lastX, this.lastY);
+        this.ctx.lineTo(pos.x, pos.y);
+        this.ctx.stroke();
+        this.lastX = pos.x;
+        this.lastY = pos.y;
+    }
+    endDraw() {
+        if (!this.drawing)
+            return;
+        this.drawing = false;
+        this.emitValue();
+    }
+    emitValue() {
+        const dataUrl = this.canvas?.toDataURL('image/png') ?? '';
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: dataUrl },
+            bubbles: true, composed: true,
+        }));
+    }
+    clear() {
+        if (!this.ctx || !this.canvas)
+            return;
+        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: '' },
+            bubbles: true, composed: true,
+        }));
+    }
+    render() {
+        const hasError = this.errors.length > 0;
+        const labelClass = `zs-label ${this.required ? 'zs-label--required' : ''}`;
+        return html `
+      <div class="zs-field">
+        ${this.label ? html `<label class="${labelClass}">${this.label}</label>` : ''}
+        <div class="zs-sig-wrapper">
+          <canvas
+            @mousedown="${this.startDraw}"
+            @mousemove="${this.draw}"
+            @mouseup="${this.endDraw}"
+            @mouseleave="${this.endDraw}"
+            @touchstart="${this.startDraw}"
+            @touchmove="${this.draw}"
+            @touchend="${this.endDraw}"
+          ></canvas>
+          <div class="zs-sig-actions">
+            <button class="zs-sig-btn" @click="${this.clear}" ?disabled="${this.disabled}">Limpiar</button>
+          </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()
+], ZsFieldSignature.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], ZsFieldSignature.prototype, "label", void 0);
+__decorate([
+    property()
+], ZsFieldSignature.prototype, "helpText", void 0);
+__decorate([
+    property()
+], ZsFieldSignature.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldSignature.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldSignature.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Number })
+], ZsFieldSignature.prototype, "penWidth", void 0);
+__decorate([
+    property()
+], ZsFieldSignature.prototype, "penColor", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldSignature.prototype, "errors", void 0);
+__decorate([
+    state()
+], ZsFieldSignature.prototype, "drawing", void 0);
+__decorate([
+    query('canvas')
+], ZsFieldSignature.prototype, "canvas", void 0);
+ZsFieldSignature = __decorate([
+    customElement('zs-field-signature')
+], ZsFieldSignature);
+export { ZsFieldSignature };
+//# sourceMappingURL=zs-field-signature.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export declare class ZsFieldSwitch extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fieldId: string;
+    label: string;
+    helpText: string;
+    value: boolean;
+    required: boolean;
+    disabled: boolean;
+    errors: string[];
+    private toggle;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-field-switch': ZsFieldSwitch;
+    }
+}
+//# sourceMappingURL=zs-field-switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-switch.d.ts","sourceRoot":"","sources":["../../src/fields/zs-field-switch.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,aAAc,SAAQ,UAAU;IAC3C,MAAM,CAAC,MAAM,4BAwBV;IAES,OAAO,SAAM;IACb,KAAK,SAAM;IACX,QAAQ,SAAM;IACG,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACnB,MAAM,EAAE,MAAM,EAAE,CAAM;IAEjD,OAAO,CAAC,MAAM;IAQd,MAAM;CAoBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

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

@@ -0,0 +1,100 @@
+// @zentto/studio — Switch/toggle field web component
+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 ZsFieldSwitch = class ZsFieldSwitch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fieldId = '';
+        this.label = '';
+        this.helpText = '';
+        this.value = false;
+        this.required = false;
+        this.disabled = false;
+        this.errors = [];
+    }
+    static { this.styles = [fieldBaseStyles, css `
+    :host { display: block; }
+    .zs-switch-wrapper {
+      display: flex; align-items: center; gap: 10px;
+    }
+    .zs-switch {
+      position: relative; width: 44px; height: 24px;
+      background: var(--zs-border); border-radius: 12px;
+      cursor: pointer; transition: background var(--zs-transition);
+      border: none; padding: 0;
+    }
+    .zs-switch::after {
+      content: ''; position: absolute;
+      top: 2px; left: 2px; width: 20px; height: 20px;
+      background: white; border-radius: 50%;
+      transition: transform var(--zs-transition);
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+    .zs-switch--on { background: var(--zs-primary); }
+    .zs-switch--on::after { transform: translateX(20px); }
+    .zs-switch:disabled { opacity: 0.5; cursor: not-allowed; }
+    .zs-switch-label {
+      font-size: var(--zs-font-size); color: var(--zs-text); cursor: pointer;
+    }
+  `]; }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: !this.value },
+            bubbles: true, composed: true,
+        }));
+    }
+    render() {
+        const hasError = this.errors.length > 0;
+        return html `
+      <div class="zs-field">
+        <div class="zs-switch-wrapper" @click="${this.toggle}">
+          <button
+            type="button"
+            class="zs-switch ${this.value ? 'zs-switch--on' : ''}"
+            ?disabled="${this.disabled}"
+            role="switch"
+            aria-checked="${this.value}"
+          ></button>
+          ${this.label ? html `<span class="zs-switch-label">${this.label}</span>` : ''}
+        </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()
+], ZsFieldSwitch.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], ZsFieldSwitch.prototype, "label", void 0);
+__decorate([
+    property()
+], ZsFieldSwitch.prototype, "helpText", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldSwitch.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldSwitch.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldSwitch.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldSwitch.prototype, "errors", void 0);
+ZsFieldSwitch = __decorate([
+    customElement('zs-field-switch')
+], ZsFieldSwitch);
+export { ZsFieldSwitch };
+//# sourceMappingURL=zs-field-switch.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-switch.js","sourceRoot":"","sources":["../../src/fields/zs-field-switch.ts"],"names":[],"mappings":"AAAA,qDAAqD;;;;;;;AAErD,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG/C,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QA2BO,YAAO,GAAG,EAAE,CAAC;QACb,UAAK,GAAG,EAAE,CAAC;QACX,aAAQ,GAAG,EAAE,CAAC;QACG,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACnB,WAAM,GAAa,EAAE,CAAC;IA8BnD,CAAC;aA9DQ,WAAM,GAAG,CAAC,eAAe,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBpC,CAAC,AAxBW,CAwBV;IAUK,MAAM;QACZ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE;YACjD,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE;YACrD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;SAC9B,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QAExC,OAAO,IAAI,CAAA;;iDAEkC,IAAI,CAAC,MAAM;;;+BAG7B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;yBACvC,IAAI,CAAC,QAAQ;;4BAEV,IAAI,CAAC,KAAK;;YAE1B,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iCAAiC,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;;UAE5E,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS,CAAC,CAAC,CAAC,EAAE;;KAE1F,CAAC;IACJ,CAAC;;AAnCW;IAAX,QAAQ,EAAE;8CAAc;AACb;IAAX,QAAQ,EAAE;4CAAY;AACX;IAAX,QAAQ,EAAE;+CAAe;AACG;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAAe;AACd;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CAAkB;AACnB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAuB;AAjCtC,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA+DzB"}

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class ZsFieldText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fieldId: string;
+    label: string;
+    value: string;
+    placeholder: string;
+    helpText: string;
+    inputType: 'text' | 'email' | 'url' | 'password' | 'tel' | 'color';
+    required: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    multiline: boolean;
+    errors: string[];
+    private handleInput;
+    private handleBlur;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-field-text': ZsFieldText;
+    }
+}
+//# sourceMappingURL=zs-field-text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-text.d.ts","sourceRoot":"","sources":["../../src/fields/zs-field-text.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,WAAY,SAAQ,UAAU;IACzC,MAAM,CAAC,MAAM,4BAEV;IAES,OAAO,SAAM;IACb,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACjB,QAAQ,SAAM;IACd,SAAS,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,UAAU,GAAG,KAAK,GAAG,OAAO,CAAU;IAC3D,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,SAAS,UAAS;IACpB,MAAM,EAAE,MAAM,EAAE,CAAM;IAEjD,OAAO,CAAC,WAAW;IAQnB,OAAO,CAAC,UAAU;IAOlB,MAAM;CAoCP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,115 @@
+// @zentto/studio — Text field web component
+// Handles: text, textarea, email, url, password, phone, color
+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 ZsFieldText = class ZsFieldText extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.fieldId = '';
+        this.label = '';
+        this.value = '';
+        this.placeholder = '';
+        this.helpText = '';
+        this.inputType = 'text';
+        this.required = false;
+        this.disabled = false;
+        this.readOnly = false;
+        this.multiline = false;
+        this.errors = [];
+    }
+    static { this.styles = [fieldBaseStyles, css `
+    :host { display: block; }
+  `]; }
+    handleInput(e) {
+        const input = e.target;
+        this.dispatchEvent(new CustomEvent('field-change', {
+            detail: { fieldId: this.fieldId, value: input.value },
+            bubbles: true, composed: true,
+        }));
+    }
+    handleBlur() {
+        this.dispatchEvent(new CustomEvent('field-blur', {
+            detail: { fieldId: this.fieldId },
+            bubbles: true, composed: true,
+        }));
+    }
+    render() {
+        const hasError = this.errors.length > 0;
+        const inputClass = `zs-input ${hasError ? 'zs-input--error' : ''} ${this.multiline ? 'zs-textarea' : ''}`;
+        const labelClass = `zs-label ${this.required ? 'zs-label--required' : ''}`;
+        return html `
+      <div class="zs-field">
+        ${this.label ? html `<label class="${labelClass}">${this.label}</label>` : ''}
+        ${this.multiline
+            ? html `
+            <textarea
+              class="${inputClass}"
+              .value="${this.value ?? ''}"
+              placeholder="${this.placeholder}"
+              ?disabled="${this.disabled}"
+              ?readonly="${this.readOnly}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+            ></textarea>`
+            : html `
+            <input
+              class="${inputClass}"
+              type="${this.inputType}"
+              .value="${this.value ?? ''}"
+              placeholder="${this.placeholder}"
+              ?disabled="${this.disabled}"
+              ?readonly="${this.readOnly}"
+              @input="${this.handleInput}"
+              @blur="${this.handleBlur}"
+            />`}
+        ${hasError ? html `<span class="zs-error">${this.errors[0]}</span>` : ''}
+        ${this.helpText && !hasError ? html `<span class="zs-help">${this.helpText}</span>` : ''}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], ZsFieldText.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], ZsFieldText.prototype, "label", void 0);
+__decorate([
+    property()
+], ZsFieldText.prototype, "value", void 0);
+__decorate([
+    property()
+], ZsFieldText.prototype, "placeholder", void 0);
+__decorate([
+    property()
+], ZsFieldText.prototype, "helpText", void 0);
+__decorate([
+    property()
+], ZsFieldText.prototype, "inputType", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldText.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldText.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldText.prototype, "readOnly", void 0);
+__decorate([
+    property({ type: Boolean })
+], ZsFieldText.prototype, "multiline", void 0);
+__decorate([
+    property({ type: Array })
+], ZsFieldText.prototype, "errors", void 0);
+ZsFieldText = __decorate([
+    customElement('zs-field-text')
+], ZsFieldText);
+export { ZsFieldText };
+//# sourceMappingURL=zs-field-text.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-text.js","sourceRoot":"","sources":["../../src/fields/zs-field-text.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,8DAA8D;;;;;;;AAE9D,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAG/C,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,UAAU;IAApC;;QAKO,YAAO,GAAG,EAAE,CAAC;QACb,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACX,gBAAW,GAAG,EAAE,CAAC;QACjB,aAAQ,GAAG,EAAE,CAAC;QACd,cAAS,GAA4D,MAAM,CAAC;QAC3D,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,aAAQ,GAAG,KAAK,CAAC;QACjB,cAAS,GAAG,KAAK,CAAC;QACpB,WAAM,GAAa,EAAE,CAAC;IAqDnD,CAAC;aAnEQ,WAAM,GAAG,CAAC,eAAe,EAAE,GAAG,CAAA;;GAEpC,CAAC,AAFW,CAEV;IAcK,WAAW,CAAC,CAAQ;QAC1B,MAAM,KAAK,GAAG,CAAC,CAAC,MAAgD,CAAC;QACjE,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE;YACjD,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE;YACrD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;SAC9B,CAAC,CAAC,CAAC;IACN,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE;YAC/C,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;YACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI;SAC9B,CAAC,CAAC,CAAC;IACN,CAAC;IAED,MAAM;QACJ,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACxC,MAAM,UAAU,GAAG,YAAY,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAC1G,MAAM,UAAU,GAAG,YAAY,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;QAE3E,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,iBAAiB,UAAU,KAAK,IAAI,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAAE;UAC1E,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;uBAEO,UAAU;wBACT,IAAI,CAAC,KAAK,IAAI,EAAE;6BACX,IAAI,CAAC,WAAW;2BAClB,IAAI,CAAC,QAAQ;2BACb,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;yBACb;YACf,CAAC,CAAC,IAAI,CAAA;;uBAEO,UAAU;sBACX,IAAI,CAAC,SAAS;wBACZ,IAAI,CAAC,KAAK,IAAI,EAAE;6BACX,IAAI,CAAC,WAAW;2BAClB,IAAI,CAAC,QAAQ;2BACb,IAAI,CAAC,QAAQ;wBAChB,IAAI,CAAC,WAAW;uBACjB,IAAI,CAAC,UAAU;eAE9B;UACE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;UACrE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,yBAAyB,IAAI,CAAC,QAAQ,SAAS,CAAC,CAAC,CAAC,EAAE;;KAE1F,CAAC;IACJ,CAAC;;AA9DW;IAAX,QAAQ,EAAE;4CAAc;AACb;IAAX,QAAQ,EAAE;0CAAY;AACX;IAAX,QAAQ,EAAE;0CAAY;AACX;IAAX,QAAQ,EAAE;gDAAkB;AACjB;IAAX,QAAQ,EAAE;6CAAe;AACd;IAAX,QAAQ,EAAE;8CAA6E;AAC3D;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAkB;AACjB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;8CAAmB;AACpB;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;2CAAuB;AAftC,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAoEvB"}

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

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export interface TreeNode {
+    id: string;
+    label: string;
+    icon?: string;
+    children?: TreeNode[];
+    disabled?: boolean;
+    data?: unknown;
+}
+export declare class ZsFieldTreeView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    fieldId: string;
+    label: string;
+    helpText: string;
+    nodes: TreeNode[];
+    value: string[];
+    required: boolean;
+    disabled: boolean;
+    multiSelect: boolean;
+    showCheckboxes: boolean;
+    searchable: boolean;
+    errors: string[];
+    private expanded;
+    private searchQuery;
+    private toggleExpand;
+    private selectNode;
+    private matchesSearch;
+    private countNodes;
+    render(): import("lit-html").TemplateResult<1>;
+    private renderNode;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zs-field-treeview': ZsFieldTreeView;
+    }
+}
+//# sourceMappingURL=zs-field-treeview.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"zs-field-treeview.d.ts","sourceRoot":"","sources":["../../src/fields/zs-field-treeview.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,4BAsDV;IAES,OAAO,SAAM;IACb,KAAK,SAAM;IACX,QAAQ,SAAM;IACC,KAAK,EAAE,QAAQ,EAAE,CAAM;IACvB,KAAK,EAAE,MAAM,EAAE,CAAM;IACnB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,WAAW,UAAS;IACpB,cAAc,UAAS;IACvB,UAAU,UAAS;IACrB,MAAM,EAAE,MAAM,EAAE,CAAM;IAExC,OAAO,CAAC,QAAQ,CAAqB;IACrC,OAAO,CAAC,WAAW,CAAM;IAElC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,UAAU;IAuBlB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,UAAU;IASlB,MAAM;IAwBN,OAAO,CAAC,UAAU;CAyCnB;AAED,OAAO,CAAC,MAAM,CAAC;IAAE,UAAU,qBAAqB;QAAG,mBAAmB,EAAE,eAAe,CAAC;KAAE;CAAE"}