@nuraly/lumenui 0.2.1 → 0.3.2

package/dist/src/components/canvas/data-node/data-node-config.component.js

@@ -0,0 +1,496 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { LitElement, html, css, nothing } from 'lit';
+import { property, customElement, state } from 'lit/decorators.js';
+import { DataOperation, DATABASE_TYPES, } from './data-node.types.js';
+// Import child components
+import './schema-select.component.js';
+import './table-select.component.js';
+import '../../db-connection-select/db-connection-select.component.js';
+import './data-node-fields.component.js';
+/**
+ * Convert ColumnDTO to DataField format for child components
+ */
+function columnToField(column) {
+    // Map database types to simple field types
+    const typeMap = {
+        'integer': 'number',
+        'bigint': 'number',
+        'smallint': 'number',
+        'decimal': 'number',
+        'numeric': 'number',
+        'real': 'number',
+        'double precision': 'number',
+        'serial': 'number',
+        'bigserial': 'number',
+        'int': 'number',
+        'int4': 'number',
+        'int8': 'number',
+        'float': 'number',
+        'float4': 'number',
+        'float8': 'number',
+        'varchar': 'string',
+        'character varying': 'string',
+        'text': 'string',
+        'char': 'string',
+        'character': 'string',
+        'uuid': 'string',
+        'boolean': 'boolean',
+        'bool': 'boolean',
+        'date': 'date',
+        'timestamp': 'datetime',
+        'timestamp without time zone': 'datetime',
+        'timestamp with time zone': 'datetime',
+        'timestamptz': 'datetime',
+        'time': 'datetime',
+        'time without time zone': 'datetime',
+        'time with time zone': 'datetime',
+        'timetz': 'datetime',
+        'json': 'json',
+        'jsonb': 'json',
+        'array': 'array',
+        'bytea': 'binary',
+    };
+    const lowerType = column.type.toLowerCase();
+    const mappedType = typeMap[lowerType] || 'string';
+    return {
+        id: column.name,
+        name: column.name,
+        type: mappedType,
+    };
+}
+/**
+ * Check if a section should be shown based on operation
+ */
+function shouldShowSection(sectionId, operation) {
+    const showWhenMap = {
+        filter: [DataOperation.QUERY, DataOperation.UPDATE, DataOperation.DELETE],
+        fields: [DataOperation.INSERT, DataOperation.UPDATE],
+        select: [DataOperation.QUERY],
+        sorting: [DataOperation.QUERY],
+        pagination: [DataOperation.QUERY],
+    };
+    if (!showWhenMap[sectionId])
+        return true;
+    return showWhenMap[sectionId].includes(operation);
+}
+/**
+ * Data Node Configuration Component
+ *
+ * A stateful component that manages the entire data node configuration UI,
+ * including database type, connection, schema, table selection and column-aware
+ * field components.
+ *
+ * @example
+ * ```html
+ * <nr-data-node-config
+ *   .config=${nodeConfig}
+ *   @config-update=${(e) => handleUpdate(e.detail.key, e.detail.value)}
+ * ></nr-data-node-config>
+ * ```
+ *
+ * @fires config-update - Fired when any config value changes
+ */
+let NrDataNodeConfig = class NrDataNodeConfig extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current node configuration */
+        this.config = {};
+        /** Application ID (host-provided, replaces getVarValue) */
+        this.applicationId = '';
+        /** KV entries for connection selects (host-provided) */
+        this.kvEntries = [];
+        this.columns = [];
+        this.loadingColumns = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('config')) {
+            const oldConfig = changedProperties.get('config');
+            const connectionPath = this.config.connectionPath;
+            const schema = this.config.schema;
+            const entity = this.config.entity;
+            // Check if relevant fields changed
+            const connectionChanged = (oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.connectionPath) !== connectionPath;
+            const schemaChanged = (oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.schema) !== schema;
+            const entityChanged = (oldConfig === null || oldConfig === void 0 ? void 0 : oldConfig.entity) !== entity;
+            if (connectionChanged || schemaChanged || entityChanged) {
+                this.loadColumns();
+            }
+        }
+    }
+    loadColumns() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const appId = this.applicationId;
+            const connectionPath = this.config.connectionPath;
+            const entity = this.config.entity;
+            if (!appId || !connectionPath || !entity || !this.databaseProvider) {
+                this.columns = [];
+                return;
+            }
+            this.loadingColumns = true;
+            try {
+                const columns = yield this.databaseProvider.getColumns(connectionPath, appId, entity, this.config.schema || undefined);
+                this.columns = columns;
+            }
+            catch (err) {
+                console.error('Failed to load columns:', err);
+                this.columns = [];
+            }
+            this.loadingColumns = false;
+        });
+    }
+    onUpdate(key, value) {
+        this.dispatchEvent(new CustomEvent('config-update', {
+            detail: { key, value },
+            bubbles: true,
+            composed: true
+        }));
+    }
+    renderDatabaseTypeSelect() {
+        const options = DATABASE_TYPES.map(db => ({
+            label: db.label,
+            value: db.value,
+            icon: db.icon
+        }));
+        return html `
+      <div class="config-field">
+        <label>Database Type</label>
+        <nr-select
+          .value=${this.config.dbType || ''}
+          .options=${options}
+          placeholder="Select database type..."
+          @nr-change=${(e) => this.onUpdate('dbType', e.detail.value)}
+        ></nr-select>
+      </div>
+    `;
+    }
+    renderConnectionSelect() {
+        const dbType = this.config.dbType;
+        if (!dbType) {
+            return html `
+        <div class="config-field">
+          <label>Connection</label>
+          <nr-select
+            .options=${[]}
+            placeholder="Select database type first..."
+            ?disabled=${true}
+          ></nr-select>
+        </div>
+      `;
+        }
+        const dbEntries = this.kvEntries.filter(e => e.keyPath.startsWith('database/'));
+        return html `
+      <div class="config-field">
+        <label>Connection</label>
+        <nr-db-connection-select
+          .dbType=${dbType}
+          .entries=${dbEntries}
+          .value=${this.config.connectionPath || ''}
+          placeholder="Select or create connection..."
+          @value-change=${(e) => this.onUpdate('connectionPath', e.detail.value)}
+          @create-entry=${(e) => { var _a; return (_a = this.onCreateKvEntry) === null || _a === void 0 ? void 0 : _a.call(this, e.detail); }}
+        ></nr-db-connection-select>
+      </div>
+    `;
+    }
+    renderSchemaSelect() {
+        const connectionPath = this.config.connectionPath;
+        const dbType = this.config.dbType;
+        // Only show schema select for databases that support schemas
+        const supportsSchemas = ['postgresql', 'mssql', 'oracle'].includes(dbType || '');
+        if (!supportsSchemas) {
+            return nothing;
+        }
+        return html `
+      <div class="config-field">
+        <label>Schema</label>
+        <nr-schema-select
+          .connectionPath=${connectionPath || ''}
+          .applicationId=${this.applicationId}
+          .databaseProvider=${this.databaseProvider}
+          .value=${this.config.schema || ''}
+          placeholder="Select schema..."
+          @value-change=${(e) => this.onUpdate('schema', e.detail.value)}
+        ></nr-schema-select>
+      </div>
+    `;
+    }
+    renderTableSelect() {
+        const connectionPath = this.config.connectionPath;
+        const schema = this.config.schema;
+        return html `
+      <div class="config-field">
+        <label>Table / Collection</label>
+        <nr-table-select
+          .connectionPath=${connectionPath || ''}
+          .schema=${schema || ''}
+          .applicationId=${this.applicationId}
+          .databaseProvider=${this.databaseProvider}
+          .value=${this.config.entity || ''}
+          placeholder="Select table..."
+          @value-change=${(e) => this.onUpdate('entity', e.detail.value)}
+        ></nr-table-select>
+        <span class="field-description">Table or collection to query</span>
+      </div>
+    `;
+    }
+    renderColumnDependentSections() {
+        const operation = this.config.operation || DataOperation.QUERY;
+        const entity = this.config.entity;
+        if (!entity) {
+            return html `
+        <div class="no-table-selected">
+          Select a table to configure filters and fields
+        </div>
+      `;
+        }
+        if (this.loadingColumns) {
+            return html `
+        <div class="loading-columns">
+          Loading columns...
+        </div>
+      `;
+        }
+        const fields = this.columns.map(columnToField);
+        return html `
+      <!-- Filter Section -->
+      ${shouldShowSection('filter', operation) ? html `
+        <div class="config-section">
+          <div class="config-section-header">
+            <span class="config-section-title">Filter</span>
+            <span class="config-section-desc">Define conditions to filter records</span>
+          </div>
+          <nr-filter-builder
+            .value=${this.config.filter || null}
+            .fields=${fields}
+            allowExpressions
+            description="Add conditions to filter records"
+            @value-change=${(e) => this.onUpdate('filter', e.detail.value)}
+          ></nr-filter-builder>
+        </div>
+      ` : nothing}
+
+      <!-- Fields Section (for INSERT/UPDATE) -->
+      ${shouldShowSection('fields', operation) ? html `
+        <div class="config-section">
+          <div class="config-section-header">
+            <span class="config-section-title">Fields</span>
+          </div>
+          <nr-field-mapper
+            label="Field Values"
+            .value=${this.config.fields || {}}
+            .fields=${fields}
+            allowExpressions
+            description="Map values to database fields"
+            @value-change=${(e) => this.onUpdate('fields', e.detail.value)}
+          ></nr-field-mapper>
+        </div>
+      ` : nothing}
+
+      <!-- Select Fields Section (for QUERY) -->
+      ${shouldShowSection('select', operation) ? html `
+        <div class="config-section">
+          <div class="config-section-header">
+            <span class="config-section-title">Select Fields</span>
+          </div>
+          <nr-field-multi-select
+            label="Fields to Return"
+            .value=${this.config.select || []}
+            .fields=${fields}
+            placeholder="All fields"
+            description="Leave empty to return all fields"
+            @value-change=${(e) => this.onUpdate('select', e.detail.value)}
+          ></nr-field-multi-select>
+        </div>
+      ` : nothing}
+
+      <!-- Sorting Section (for QUERY) -->
+      ${shouldShowSection('sorting', operation) ? html `
+        <div class="config-section">
+          <div class="config-section-header">
+            <span class="config-section-title">Sorting</span>
+          </div>
+          <nr-sort-builder
+            label="Order By"
+            .value=${this.config.orderBy || []}
+            .fields=${fields}
+            @value-change=${(e) => this.onUpdate('orderBy', e.detail.value)}
+          ></nr-sort-builder>
+        </div>
+      ` : nothing}
+    `;
+    }
+    render() {
+        const operation = this.config.operation || DataOperation.QUERY;
+        return html `
+      <!-- Basic Section -->
+      <div class="config-section">
+        <div class="config-field">
+          <label>Operation</label>
+          <nr-operation-select
+            .value=${operation}
+            @value-change=${(e) => this.onUpdate('operation', e.detail.value)}
+          ></nr-operation-select>
+        </div>
+
+        ${this.renderDatabaseTypeSelect()}
+        ${this.renderConnectionSelect()}
+        ${this.renderSchemaSelect()}
+        ${this.renderTableSelect()}
+      </div>
+
+      ${this.renderColumnDependentSections()}
+
+      <!-- Pagination Section (for QUERY) -->
+      ${shouldShowSection('pagination', operation) ? html `
+        <div class="config-section">
+          <div class="config-section-header">
+            <span class="config-section-title">Pagination</span>
+          </div>
+          <div class="config-field">
+            <label>Limit</label>
+            <nr-input
+              type="number"
+              .value=${String(this.config.limit || '')}
+              placeholder="No limit"
+              @nr-input=${(e) => this.onUpdate('limit', e.detail.value ? Number.parseInt(e.detail.value) : null)}
+            ></nr-input>
+            <span class="field-description">Maximum records to return</span>
+          </div>
+          <div class="config-field">
+            <label>Offset</label>
+            <nr-input
+              type="number"
+              .value=${String(this.config.offset || '')}
+              placeholder="0"
+              @nr-input=${(e) => this.onUpdate('offset', e.detail.value ? Number.parseInt(e.detail.value) : null)}
+            ></nr-input>
+            <span class="field-description">Number of records to skip</span>
+          </div>
+        </div>
+      ` : nothing}
+
+      <!-- Output Section -->
+      <div class="config-section">
+        <div class="config-section-header">
+          <span class="config-section-title">Output</span>
+        </div>
+        <nr-variable-name-input
+          label="Save Result To"
+          .value=${this.config.outputVariable || 'results'}
+          placeholder="results"
+          description="Variable name to store the result"
+          @value-change=${(e) => this.onUpdate('outputVariable', e.detail.value)}
+        ></nr-variable-name-input>
+      </div>
+    `;
+    }
+};
+NrDataNodeConfig.styles = css `
+    :host {
+      display: block;
+    }
+
+    .config-section {
+      margin-bottom: 16px;
+    }
+
+    .config-section-header {
+      margin-bottom: 8px;
+    }
+
+    .config-section-title {
+      font-weight: 600;
+      font-size: 13px;
+      color: var(--text-primary, #1f2937);
+    }
+
+    .config-section-desc {
+      display: block;
+      font-size: 12px;
+      color: var(--text-secondary, #6b7280);
+      margin-top: 2px;
+    }
+
+    .config-field {
+      margin-bottom: 12px;
+    }
+
+    .config-field label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--text-secondary, #6b7280);
+      margin-bottom: 4px;
+    }
+
+    .field-description {
+      display: block;
+      font-size: 11px;
+      color: var(--text-tertiary, #9ca3af);
+      margin-top: 4px;
+    }
+
+    .loading-columns {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      background: var(--bg-secondary, #f9fafb);
+      border-radius: 6px;
+    }
+
+    .no-table-selected {
+      padding: 12px;
+      text-align: center;
+      color: var(--text-secondary, #6b7280);
+      font-size: 13px;
+      background: var(--bg-secondary, #f9fafb);
+      border-radius: 6px;
+      border: 1px dashed var(--border-color, #e5e7eb);
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], NrDataNodeConfig.prototype, "config", void 0);
+__decorate([
+    property({ type: String })
+], NrDataNodeConfig.prototype, "applicationId", void 0);
+__decorate([
+    property({ attribute: false })
+], NrDataNodeConfig.prototype, "databaseProvider", void 0);
+__decorate([
+    property({ attribute: false })
+], NrDataNodeConfig.prototype, "kvEntries", void 0);
+__decorate([
+    property({ attribute: false })
+], NrDataNodeConfig.prototype, "onCreateKvEntry", void 0);
+__decorate([
+    state()
+], NrDataNodeConfig.prototype, "columns", void 0);
+__decorate([
+    state()
+], NrDataNodeConfig.prototype, "loadingColumns", void 0);
+NrDataNodeConfig = __decorate([
+    customElement('nr-data-node-config')
+], NrDataNodeConfig);
+export { NrDataNodeConfig };
+//# sourceMappingURL=data-node-config.component.js.map

package/dist/src/components/canvas/data-node/data-node-fields.component.d.ts

@@ -0,0 +1,198 @@
+/**
+ * @license
+ * Copyright 2024 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, TemplateResult } from 'lit';
+import { FilterGroup, SortOrder, FieldMapping, DataSource, DataEntity, DataField, DataOperation } from './data-node.types.js';
+declare const ExpressionInputComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Expression Input Component
+ * Text input with ${...} syntax highlighting support
+ */
+export declare class ExpressionInputComponent extends ExpressionInputComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string;
+    placeholder: string;
+    disabled: boolean;
+    multiline: boolean;
+    label: string;
+    private handleInput;
+    render(): TemplateResult<1>;
+}
+declare const VariableNameInputComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Variable Name Input Component
+ * Input for variable names with prefix display
+ */
+export declare class VariableNameInputComponent extends VariableNameInputComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string;
+    placeholder: string;
+    prefix: string;
+    disabled: boolean;
+    label: string;
+    description: string;
+    private handleInput;
+    render(): TemplateResult<1>;
+}
+declare const OperationSelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Operation Select Component
+ * Dropdown for selecting data operations with icons
+ */
+export declare class OperationSelectComponent extends OperationSelectComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: DataOperation;
+    disabled: boolean;
+    label: string;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+declare const DataSourceSelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * DataSource Select Component
+ * Dropdown for selecting configured data sources
+ */
+export declare class DataSourceSelectComponent extends DataSourceSelectComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string | null;
+    dataSources: DataSource[];
+    disabled: boolean;
+    placeholder: string;
+    label: string;
+    description: string;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+declare const EntitySelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Entity Select Component
+ * Dropdown for selecting tables/collections from a data source
+ */
+export declare class EntitySelectComponent extends EntitySelectComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string | null;
+    entities: DataEntity[];
+    disabled: boolean;
+    loading: boolean;
+    placeholder: string;
+    label: string;
+    description: string;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+declare const FieldSelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Field Select Component
+ * Dropdown for selecting a single field/column
+ */
+export declare class FieldSelectComponent extends FieldSelectComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string | null;
+    fields: DataField[];
+    disabled: boolean;
+    placeholder: string;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+declare const FieldMultiSelectComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Field Multi-Select Component
+ * Multi-select for choosing multiple fields
+ */
+export declare class FieldMultiSelectComponent extends FieldMultiSelectComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: string[];
+    fields: DataField[];
+    disabled: boolean;
+    placeholder: string;
+    label: string;
+    description: string;
+    private handleChange;
+    render(): TemplateResult<1>;
+}
+declare const FilterBuilderComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Filter Builder Component
+ * Visual AND/OR filter tree builder
+ */
+export declare class FilterBuilderComponent extends FilterBuilderComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: FilterGroup | null;
+    fields: DataField[];
+    disabled: boolean;
+    label: string;
+    description: string;
+    allowExpressions: boolean;
+    private getEmptyGroup;
+    private getEmptyCondition;
+    private updateValue;
+    private toggleLogic;
+    private addCondition;
+    private addGroup;
+    private removeCondition;
+    private updateCondition;
+    private renderCondition;
+    private renderGroup;
+    render(): TemplateResult<1>;
+}
+declare const FieldMapperComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Field Mapper Component
+ * Key-value mapper with expression support
+ */
+export declare class FieldMapperComponent extends FieldMapperComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: FieldMapping;
+    fields: DataField[];
+    disabled: boolean;
+    label: string;
+    description: string;
+    allowExpressions: boolean;
+    private updateValue;
+    private addMapping;
+    private removeMapping;
+    private updateMapping;
+    render(): TemplateResult<1>;
+}
+declare const SortBuilderComponent_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
+/**
+ * Sort Builder Component
+ * Sortable list of field + direction
+ */
+export declare class SortBuilderComponent extends SortBuilderComponent_base {
+    static useShadowDom: boolean;
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    value: SortOrder[];
+    fields: DataField[];
+    disabled: boolean;
+    label: string;
+    private updateValue;
+    private addSort;
+    private removeSort;
+    private updateSort;
+    private toggleDirection;
+    render(): TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=data-node-fields.component.d.ts.map