@zentto/report-designer 1.5.7 → 1.6.1

package/dist/data-panel/db-connector.d.ts

@@ -0,0 +1,77 @@
+import { LitElement, nothing } from 'lit';
+export interface DbConnectionConfig {
+    type: 'postgres' | 'sqlserver' | 'mysql' | 'sqlite';
+    host?: string;
+    port?: number;
+    database: string;
+    username?: string;
+    password?: string;
+    filePath?: string;
+    ssl?: boolean;
+    windowsAuth?: boolean;
+}
+export interface DbTableInfo {
+    schema: string;
+    name: string;
+    type: 'table' | 'view';
+}
+export interface DbColumnInfo {
+    name: string;
+    type: string;
+    nullable: boolean;
+    isPrimaryKey: boolean;
+}
+export interface DbConnectorProvider {
+    testConnection(config: DbConnectionConfig): Promise<{
+        success: boolean;
+        error?: string;
+    }>;
+    getTables(config: DbConnectionConfig): Promise<DbTableInfo[]>;
+    getColumns(config: DbConnectionConfig, schema: string, table: string): Promise<DbColumnInfo[]>;
+    executeQuery(config: DbConnectionConfig, sql: string): Promise<{
+        rows: Record<string, unknown>[];
+        rowCount: number;
+    }>;
+}
+export declare class DbConnector extends LitElement {
+    open: boolean;
+    provider: DbConnectorProvider | null;
+    private _dbType;
+    private _host;
+    private _port;
+    private _database;
+    private _username;
+    private _password;
+    private _ssl;
+    private _windowsAuth;
+    private _filePath;
+    private _testing;
+    private _testResult;
+    private _tables;
+    private _loadingTables;
+    private _selectedTable;
+    private _columns;
+    private _loadingColumns;
+    private _expandedSchemas;
+    private _selectedTables;
+    static styles: import("lit").CSSResult;
+    private _buildConfig;
+    private _testConnection;
+    private _exploreTables;
+    private _selectTable;
+    private _toggleTableSelection;
+    private _toggleSchema;
+    private _onConfirm;
+    private _onCancel;
+    private _onDbTypeChange;
+    private _renderForm;
+    private _renderTables;
+    private _renderColumns;
+    render(): import("lit-html").TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'zrd-db-connector': DbConnector;
+    }
+}
+//# sourceMappingURL=db-connector.d.ts.map

package/dist/data-panel/db-connector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"db-connector.d.ts","sourceRoot":"","sources":["../../src/data-panel/db-connector.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAOrD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,cAAc,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IAC1F,SAAS,CAAC,MAAM,EAAE,kBAAkB,GAAG,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;IAC9D,UAAU,CAAC,MAAM,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,EAAE,CAAC,CAAC;IAC/F,YAAY,CAAC,MAAM,EAAE,kBAAkB,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACvH;AAgCD,qBACa,WAAY,SAAQ,UAAU;IACZ,IAAI,UAAS;IACV,QAAQ,EAAE,mBAAmB,GAAG,IAAI,CAAQ;IAEnE,OAAO,CAAC,OAAO,CAA0C;IACzD,OAAO,CAAC,KAAK,CAAe;IAC5B,OAAO,CAAC,KAAK,CAAQ;IACrB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,SAAS,CAAM;IAEvB,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,WAAW,CAAqD;IAExE,OAAO,CAAC,OAAO,CAAqB;IACpC,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,cAAc,CAAiD;IACvE,OAAO,CAAC,QAAQ,CAAsB;IACtC,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,gBAAgB,CAAqB;IAE7C,OAAO,CAAC,eAAe,CAAqB;IAErD,OAAgB,MAAM,0BA6IpB;IAIF,OAAO,CAAC,YAAY;YAgBN,eAAe;YAYf,cAAc;YAcd,YAAY;IAY1B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,aAAa;YAOP,UAAU;IA4CxB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,WAAW;IA6DnB,OAAO,CAAC,aAAa;IA2CrB,OAAO,CAAC,cAAc;IAkBb,MAAM;CA2DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,WAAW,CAAC;KACjC;CACF"}

package/dist/data-panel/db-connector.js

@@ -0,0 +1,584 @@
+// @zentto/report-designer — Database Connector Dialog (Lit web component)
+// Ported from zentto-report-studio dialogs.ts — native to the npm package.
+// Supports PostgreSQL, SQL Server, MySQL, SQLite via a DbConnectorProvider.
+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';
+// ─── Helpers ──────────────────────────────────────────────────────
+const DB_TYPES = [
+    { type: 'postgres', label: 'PostgreSQL', icon: '\u{1F418}', port: 5432, color: '#336791' },
+    { type: 'sqlserver', label: 'SQL Server', icon: '\u{1F4CB}', port: 1433, color: '#cc2927' },
+    { type: 'mysql', label: 'MySQL', icon: '\u{1F4E6}', port: 3306, color: '#4479a1' },
+    { type: 'sqlite', label: 'SQLite', icon: '\u{1F4F1}', port: 0, color: '#003b57' },
+];
+function fieldTypeFromSql(colType) {
+    const t = (colType || '').toLowerCase();
+    if (/int|numeric|decimal|float|double|real|serial/.test(t))
+        return 'number';
+    if (/money|currency/.test(t))
+        return 'currency';
+    if (/date|time|timestamp/.test(t))
+        return 'date';
+    if (/bool|bit/.test(t))
+        return 'boolean';
+    return 'string';
+}
+function typeBadgeColor(colType) {
+    const t = (colType || '').toLowerCase();
+    if (/int|numeric|decimal|float|double|real|serial/.test(t))
+        return '#1976d2';
+    if (/money|currency/.test(t))
+        return '#ff9800';
+    if (/date|time|timestamp/.test(t))
+        return '#e91e63';
+    if (/bool|bit/.test(t))
+        return '#9c27b0';
+    if (/varchar|char|text|nvarchar|nchar/.test(t))
+        return '#4caf50';
+    return '#757575';
+}
+// ─── Component ────────────────────────────────────────────────────
+let DbConnector = class DbConnector extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.provider = null;
+        this._dbType = 'postgres';
+        this._host = 'localhost';
+        this._port = 5432;
+        this._database = '';
+        this._username = '';
+        this._password = '';
+        this._ssl = false;
+        this._windowsAuth = false;
+        this._filePath = '';
+        this._testing = false;
+        this._testResult = null;
+        this._tables = [];
+        this._loadingTables = false;
+        this._selectedTable = null;
+        this._columns = [];
+        this._loadingColumns = false;
+        this._expandedSchemas = new Set();
+        this._selectedTables = new Set(); // "schema.table" keys
+    }
+    static { this.styles = css `
+    :host {
+      display: flex; flex-direction: column;
+      font-family: 'Segoe UI', Roboto, Arial, sans-serif;
+      font-size: 12px; height: 100%; overflow: hidden;
+    }
+
+    .panel {
+      display: flex; flex-direction: column; height: 100%; overflow-y: auto;
+      padding: 8px;
+    }
+
+    .panel-header {
+      display: flex; justify-content: space-between; align-items: center;
+      padding-bottom: 8px; border-bottom: 1px solid var(--zrd-border, #eee);
+      margin-bottom: 8px;
+    }
+    .panel-title { font-size: 12px; font-weight: 600; }
+    .back-btn {
+      background: none; border: none; font-size: 11px;
+      cursor: pointer; color: var(--zrd-primary, #1976d2);
+      padding: 3px 8px; border-radius: 4px;
+    }
+    .back-btn:hover { background: var(--zrd-hover, #f0f7ff); }
+
+    .actions-bar {
+      display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px;
+    }
+
+    /* ─── DB Type Grid ────────────────────────── */
+    .db-type-grid {
+      display: grid; grid-template-columns: 1fr 1fr;
+      gap: 8px; margin-bottom: 20px;
+    }
+    .db-type-btn {
+      padding: 14px 8px; border: 2px solid var(--zrd-border, #eee);
+      border-radius: 8px; cursor: pointer; text-align: center;
+      background: var(--zrd-panel-bg, #fff); transition: all 0.15s;
+    }
+    .db-type-btn:hover { border-color: #1976d2; background: #f0f7ff; }
+    .db-type-btn.active { border-color: #1976d2; background: #e3f2fd; }
+    .db-type-icon { font-size: 28px; display: block; margin-bottom: 4px; }
+    .db-type-label { font-weight: 600; font-size: 13px; }
+    .db-type-port { font-size: 11px; color: var(--zrd-text-muted, #999); }
+
+    /* ─── Form ────────────────────────────────── */
+    .form-row { margin-bottom: 12px; }
+    .form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .form-label {
+      display: block; font-size: 12px; font-weight: 600;
+      color: var(--zrd-text, #333); margin-bottom: 4px;
+    }
+    .form-input {
+      width: 100%; padding: 8px 12px;
+      border: 1px solid var(--zrd-border, #ddd); border-radius: 6px;
+      font-size: 13px; box-sizing: border-box;
+      background: var(--zrd-input-bg, #fff); color: var(--zrd-text, #333);
+    }
+    .form-input:focus { outline: none; border-color: #1976d2; }
+
+    .checkbox-row {
+      display: flex; align-items: center; gap: 6px;
+      font-size: 12px; color: var(--zrd-text, #555); margin-bottom: 8px;
+    }
+
+    /* ─── Test Result ─────────────────────────── */
+    .test-result {
+      padding: 8px 12px; border-radius: 6px;
+      margin-top: 12px; font-size: 12px; display: flex; align-items: center; gap: 6px;
+    }
+    .test-result.success { background: #e8f5e9; color: #2e7d32; }
+    .test-result.error { background: #ffebee; color: #c62828; }
+
+    /* ─── Tables Browser ──────────────────────── */
+    .tables-section {
+      margin-top: 16px; border: 1px solid var(--zrd-border, #eee);
+      border-radius: 8px; max-height: 320px; overflow-y: auto;
+    }
+    .schema-header {
+      padding: 8px 12px; font-weight: 600; font-size: 12px;
+      background: var(--zrd-hover, #f9f9f9); cursor: pointer;
+      display: flex; align-items: center; gap: 6px;
+      border-bottom: 1px solid var(--zrd-border, #eee);
+    }
+    .schema-header:hover { background: #eef3f8; }
+    .schema-chevron { font-size: 10px; transition: transform 0.15s; }
+    .schema-chevron.open { transform: rotate(90deg); }
+
+    .table-row {
+      padding: 6px 12px 6px 28px;
+      display: flex; align-items: center; gap: 8px;
+      cursor: pointer; font-size: 12px;
+      border-bottom: 1px solid var(--zrd-border, #f5f5f5);
+    }
+    .table-row:hover { background: #f0f7ff; }
+    .table-row.selected { background: #e3f2fd; }
+    .table-icon { font-size: 14px; }
+    .table-name { flex: 1; font-weight: 500; }
+    .table-type { font-size: 10px; color: var(--zrd-text-muted, #999); }
+    .table-check { width: 16px; height: 16px; accent-color: #1976d2; }
+
+    /* ─── Columns List ────────────────────────── */
+    .columns-section {
+      margin-top: 12px; border: 1px solid var(--zrd-border, #eee);
+      border-radius: 8px; padding: 8px 0;
+    }
+    .columns-title {
+      padding: 4px 12px; font-weight: 600; font-size: 11px;
+      color: var(--zrd-text-muted, #888); text-transform: uppercase; letter-spacing: 0.5px;
+    }
+    .column-row {
+      padding: 4px 12px; display: flex; align-items: center; gap: 6px; font-size: 12px;
+    }
+    .column-row:hover { background: var(--zrd-hover, #f9f9f9); }
+    .col-pk { color: #ff9800; font-size: 11px; }
+    .col-name { flex: 1; font-weight: 500; }
+    .col-type {
+      font-size: 10px; padding: 1px 6px; border-radius: 3px;
+      color: #fff; font-weight: 600;
+    }
+    .col-nullable { font-size: 10px; color: var(--zrd-text-muted, #aaa); }
+
+    /* ─── Buttons ─────────────────────────────── */
+    .btn {
+      padding: 8px 20px; border-radius: 6px; border: 1px solid var(--zrd-border, #ddd);
+      cursor: pointer; font-size: 13px; font-weight: 500;
+      background: var(--zrd-panel-bg, #fff); color: var(--zrd-text, #333);
+    }
+    .btn:hover { background: #f5f5f5; }
+    .btn:disabled { opacity: 0.5; cursor: default; }
+    .btn-primary { background: #1976d2; color: #fff; border-color: #1976d2; }
+    .btn-primary:hover { background: #1565c0; }
+    .btn-success { background: #2e7d32; color: #fff; border-color: #2e7d32; }
+    .btn-success:hover { background: #1b5e20; }
+
+    .spinner {
+      display: inline-block; width: 14px; height: 14px;
+      border: 2px solid #ddd; border-top-color: #1976d2;
+      border-radius: 50%; animation: spin 0.6s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+  `; }
+    // ─── Connection Config Builder ────────────────────────────────
+    _buildConfig() {
+        return {
+            type: this._dbType,
+            host: this._dbType === 'sqlite' ? undefined : this._host,
+            port: this._dbType === 'sqlite' ? undefined : this._port,
+            database: this._dbType === 'sqlite' ? this._filePath : this._database,
+            username: this._dbType === 'sqlite' ? undefined : this._username,
+            password: this._dbType === 'sqlite' ? undefined : this._password,
+            filePath: this._dbType === 'sqlite' ? this._filePath : undefined,
+            ssl: this._dbType === 'postgres' ? this._ssl : undefined,
+            windowsAuth: this._dbType === 'sqlserver' ? this._windowsAuth : undefined,
+        };
+    }
+    // ─── Actions ──────────────────────────────────────────────────
+    async _testConnection() {
+        if (!this.provider)
+            return;
+        this._testing = true;
+        this._testResult = null;
+        try {
+            this._testResult = await this.provider.testConnection(this._buildConfig());
+        }
+        catch (err) {
+            this._testResult = { success: false, error: err?.message || 'Connection failed' };
+        }
+        this._testing = false;
+    }
+    async _exploreTables() {
+        if (!this.provider)
+            return;
+        this._loadingTables = true;
+        try {
+            this._tables = await this.provider.getTables(this._buildConfig());
+            // Auto-expand all schemas
+            const schemas = new Set(this._tables.map(t => t.schema));
+            this._expandedSchemas = schemas;
+        }
+        catch (err) {
+            this._testResult = { success: false, error: `Failed to load tables: ${err?.message}` };
+        }
+        this._loadingTables = false;
+    }
+    async _selectTable(schema, name) {
+        if (!this.provider)
+            return;
+        this._selectedTable = { schema, name };
+        this._loadingColumns = true;
+        try {
+            this._columns = await this.provider.getColumns(this._buildConfig(), schema, name);
+        }
+        catch {
+            this._columns = [];
+        }
+        this._loadingColumns = false;
+    }
+    _toggleTableSelection(schema, name) {
+        const key = `${schema}.${name}`;
+        const selected = new Set(this._selectedTables);
+        if (selected.has(key)) {
+            selected.delete(key);
+        }
+        else {
+            selected.add(key);
+        }
+        this._selectedTables = selected;
+    }
+    _toggleSchema(schema) {
+        const expanded = new Set(this._expandedSchemas);
+        if (expanded.has(schema))
+            expanded.delete(schema);
+        else
+            expanded.add(schema);
+        this._expandedSchemas = expanded;
+    }
+    async _onConfirm() {
+        if (!this.provider || this._selectedTables.size === 0)
+            return;
+        const dataSources = [];
+        const sampleData = {};
+        for (const key of this._selectedTables) {
+            const [schema, table] = key.split('.');
+            try {
+                const cols = await this.provider.getColumns(this._buildConfig(), schema, table);
+                const dsId = `${schema}_${table}`;
+                dataSources.push({
+                    id: dsId,
+                    name: `${schema}.${table}`,
+                    type: 'array',
+                    schema,
+                    table,
+                    fields: cols.map(c => ({
+                        name: c.name,
+                        label: c.name,
+                        type: fieldTypeFromSql(c.type),
+                        isPrimaryKey: c.isPrimaryKey,
+                        nullable: c.nullable,
+                        nativeType: c.type,
+                    })),
+                });
+                // Fetch sample data
+                try {
+                    const result = await this.provider.executeQuery(this._buildConfig(), `SELECT * FROM "${schema}"."${table}" LIMIT 10`);
+                    sampleData[dsId] = result.rows;
+                }
+                catch {
+                    sampleData[dsId] = [];
+                }
+            }
+            catch { /* skip failed tables */ }
+        }
+        this.dispatchEvent(new CustomEvent('datasources-ready', {
+            detail: { dataSources, sampleData },
+            bubbles: true, composed: true,
+        }));
+    }
+    _onCancel() {
+        this.dispatchEvent(new CustomEvent('connector-close', { bubbles: true, composed: true }));
+    }
+    _onDbTypeChange(type) {
+        this._dbType = type;
+        const dbType = DB_TYPES.find(d => d.type === type);
+        if (dbType && dbType.port > 0)
+            this._port = dbType.port;
+        this._testResult = null;
+        this._tables = [];
+        this._columns = [];
+        this._selectedTable = null;
+    }
+    // ─── Rendering ────────────────────────────────────────────────
+    _renderForm() {
+        if (this._dbType === 'sqlite') {
+            return html `
+        <div class="form-row">
+          <label class="form-label">Database File</label>
+          <input class="form-input" type="text" placeholder="/path/to/database.db"
+                 .value=${this._filePath}
+                 @input=${(e) => { this._filePath = e.target.value; }} />
+        </div>
+      `;
+        }
+        return html `
+      <div class="form-row form-row-2col">
+        <div>
+          <label class="form-label">Host</label>
+          <input class="form-input" .value=${this._host}
+                 @input=${(e) => { this._host = e.target.value; }} />
+        </div>
+        <div>
+          <label class="form-label">Puerto</label>
+          <input class="form-input" type="number" .value=${String(this._port)}
+                 @input=${(e) => { this._port = parseInt(e.target.value) || 0; }} />
+        </div>
+      </div>
+      <div class="form-row">
+        <label class="form-label">Base de Datos</label>
+        <input class="form-input" .value=${this._database}
+               @input=${(e) => { this._database = e.target.value; }} />
+      </div>
+      ${this._dbType === 'sqlserver' ? html `
+        <label class="checkbox-row">
+          <input type="checkbox" .checked=${this._windowsAuth}
+                 @change=${(e) => { this._windowsAuth = e.target.checked; }} />
+          Windows Authentication
+        </label>
+      ` : nothing}
+      ${!this._windowsAuth ? html `
+        <div class="form-row form-row-2col">
+          <div>
+            <label class="form-label">Usuario</label>
+            <input class="form-input" .value=${this._username}
+                   @input=${(e) => { this._username = e.target.value; }} />
+          </div>
+          <div>
+            <label class="form-label">Contrasena</label>
+            <input class="form-input" type="password" .value=${this._password}
+                   @input=${(e) => { this._password = e.target.value; }} />
+          </div>
+        </div>
+      ` : nothing}
+      ${this._dbType === 'postgres' ? html `
+        <label class="checkbox-row">
+          <input type="checkbox" .checked=${this._ssl}
+                 @change=${(e) => { this._ssl = e.target.checked; }} />
+          SSL
+        </label>
+      ` : nothing}
+    `;
+    }
+    _renderTables() {
+        if (this._tables.length === 0)
+            return nothing;
+        // Group by schema
+        const bySchema = new Map();
+        for (const t of this._tables) {
+            if (!bySchema.has(t.schema))
+                bySchema.set(t.schema, []);
+            bySchema.get(t.schema).push(t);
+        }
+        return html `
+      <div class="tables-section">
+        ${[...bySchema.entries()].map(([schema, tables]) => {
+            const isOpen = this._expandedSchemas.has(schema);
+            return html `
+            <div class="schema-header" @click=${() => this._toggleSchema(schema)}>
+              <span class="schema-chevron ${isOpen ? 'open' : ''}">\u25B6</span>
+              \u{1F4C1} ${schema}
+              <span style="color:var(--zrd-text-muted,#999);font-weight:normal;font-size:11px">(${tables.length})</span>
+            </div>
+            ${isOpen ? tables.map(t => {
+                const key = `${t.schema}.${t.name}`;
+                const isSelected = this._selectedTable?.schema === t.schema && this._selectedTable?.name === t.name;
+                const isChecked = this._selectedTables.has(key);
+                return html `
+                <div class="table-row ${isSelected ? 'selected' : ''}"
+                     @click=${() => this._selectTable(t.schema, t.name)}>
+                  <input type="checkbox" class="table-check"
+                         .checked=${isChecked}
+                         @click=${(e) => { e.stopPropagation(); this._toggleTableSelection(t.schema, t.name); }}
+                         @change=${(e) => { e.stopPropagation(); this._toggleTableSelection(t.schema, t.name); }} />
+                  <span class="table-icon">${t.type === 'view' ? '\u{1F441}' : '\u{1F4CB}'}</span>
+                  <span class="table-name">${t.name}</span>
+                  <span class="table-type">${t.type}</span>
+                </div>
+              `;
+            }) : nothing}
+          `;
+        })}
+      </div>
+    `;
+    }
+    _renderColumns() {
+        if (!this._selectedTable || this._columns.length === 0)
+            return nothing;
+        return html `
+      <div class="columns-section">
+        <div class="columns-title">${this._selectedTable.schema}.${this._selectedTable.name} — ${this._columns.length} columns</div>
+        ${this._columns.map(c => html `
+          <div class="column-row">
+            ${c.isPrimaryKey ? html `<span class="col-pk">\u{1F511}</span>` : html `<span style="width:15px"></span>`}
+            <span class="col-name">${c.name}</span>
+            <span class="col-type" style="background:${typeBadgeColor(c.type)}">${c.type}</span>
+            ${c.nullable ? html `<span class="col-nullable">?</span>` : nothing}
+          </div>
+        `)}
+      </div>
+    `;
+    }
+    render() {
+        if (!this.open)
+            return nothing;
+        return html `
+      <div class="panel">
+        <div class="panel-header">
+          <span class="panel-title">\u{1F5C4} Conexion a BD</span>
+          <button class="back-btn" @click=${this._onCancel}>\u2190 Volver</button>
+        </div>
+
+        <!-- DB Type Grid -->
+        <div class="db-type-grid">
+          ${DB_TYPES.map(db => html `
+            <div class="db-type-btn ${this._dbType === db.type ? 'active' : ''}"
+                 @click=${() => this._onDbTypeChange(db.type)}>
+              <span class="db-type-icon">${db.icon}</span>
+              <span class="db-type-label" style="color:${db.color}">${db.label}</span>
+              <span class="db-type-port">${db.port > 0 ? `${db.port}` : 'local'}</span>
+            </div>
+          `)}
+        </div>
+
+        <!-- Connection Form -->
+        ${this._renderForm()}
+
+        <!-- Action Buttons -->
+        <div class="actions-bar">
+          <button class="btn btn-primary"
+                  ?disabled=${this._testing || !this.provider}
+                  @click=${this._testConnection}>
+            ${this._testing ? html `<span class="spinner"></span>` : nothing}
+            Probar
+          </button>
+          <button class="btn btn-primary"
+                  ?disabled=${!this._testResult?.success || this._loadingTables}
+                  @click=${this._exploreTables}>
+            Explorar
+          </button>
+          ${this._selectedTables.size > 0 ? html `
+            <button class="btn btn-success" @click=${this._onConfirm}>
+              \u2713 Usar ${this._selectedTables.size}
+            </button>
+          ` : nothing}
+        </div>
+
+        <!-- Test Result -->
+        ${this._testResult ? html `
+          <div class="test-result ${this._testResult.success ? 'success' : 'error'}">
+            ${this._testResult.success ? '\u2705 Conexion exitosa' : `\u274C ${this._testResult.error}`}
+          </div>
+        ` : nothing}
+
+        <!-- Tables -->
+        ${this._loadingTables ? html `<div style="text-align:center;padding:12px"><span class="spinner"></span> Cargando...</div>` : nothing}
+        ${this._renderTables()}
+        ${this._loadingColumns ? html `<div style="text-align:center;padding:8px"><span class="spinner"></span></div>` : this._renderColumns()}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], DbConnector.prototype, "open", void 0);
+__decorate([
+    property({ attribute: false })
+], DbConnector.prototype, "provider", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_dbType", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_host", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_port", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_database", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_username", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_password", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_ssl", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_windowsAuth", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_filePath", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_testing", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_testResult", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_tables", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_loadingTables", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_selectedTable", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_columns", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_loadingColumns", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_expandedSchemas", void 0);
+__decorate([
+    state()
+], DbConnector.prototype, "_selectedTables", void 0);
+DbConnector = __decorate([
+    customElement('zrd-db-connector')
+], DbConnector);
+export { DbConnector };
+//# sourceMappingURL=db-connector.js.map