@nuraly/lumenui 0.2.1 → 0.2.2

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

@@ -0,0 +1,931 @@
+/**
+ * @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;
+};
+import { LitElement, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { dataNodeFieldStyles } from './data-node-fields.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { FilterOperator, FILTER_OPERATORS, DataOperation, DATA_OPERATIONS, } from './data-node.types.js';
+/**
+ * Expression Input Component
+ * Text input with ${...} syntax highlighting support
+ */
+let ExpressionInputComponent = class ExpressionInputComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-input'];
+        this.value = '';
+        this.placeholder = '';
+        this.disabled = false;
+        this.multiline = false;
+        this.label = '';
+    }
+    handleInput(e) {
+        this.value = e.detail.value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="expression-input">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        ${this.multiline
+            ? html `
+            <nr-textarea
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              ?disabled=${this.disabled}
+              @nr-input=${this.handleInput}
+              rows="3"
+            ></nr-textarea>
+          `
+            : html `
+            <nr-input
+              .value=${this.value}
+              placeholder=${this.placeholder}
+              ?disabled=${this.disabled}
+              @nr-input=${this.handleInput}
+            ></nr-input>
+          `}
+      </div>
+    `;
+    }
+};
+ExpressionInputComponent.useShadowDom = true;
+ExpressionInputComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], ExpressionInputComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], ExpressionInputComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExpressionInputComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], ExpressionInputComponent.prototype, "multiline", void 0);
+__decorate([
+    property({ type: String })
+], ExpressionInputComponent.prototype, "label", void 0);
+ExpressionInputComponent = __decorate([
+    customElement('nr-expression-input')
+], ExpressionInputComponent);
+export { ExpressionInputComponent };
+/**
+ * Variable Name Input Component
+ * Input for variable names with prefix display
+ */
+let VariableNameInputComponent = class VariableNameInputComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-input'];
+        this.value = '';
+        this.placeholder = 'variableName';
+        this.prefix = '';
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+    }
+    handleInput(e) {
+        // Only allow valid variable names (alphanumeric and underscore)
+        const sanitized = e.detail.value.replaceAll(/[^a-zA-Z0-9_]/g, '');
+        this.value = sanitized;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="variable-name-input">
+          ${this.prefix ? html `<span class="variable-name-prefix">${this.prefix}</span>` : nothing}
+          <nr-input
+            .value=${this.value}
+            placeholder=${this.placeholder}
+            ?disabled=${this.disabled}
+            @nr-input=${this.handleInput}
+          ></nr-input>
+        </div>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+VariableNameInputComponent.useShadowDom = true;
+VariableNameInputComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], VariableNameInputComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], VariableNameInputComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], VariableNameInputComponent.prototype, "prefix", void 0);
+__decorate([
+    property({ type: Boolean })
+], VariableNameInputComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], VariableNameInputComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], VariableNameInputComponent.prototype, "description", void 0);
+VariableNameInputComponent = __decorate([
+    customElement('nr-variable-name-input')
+], VariableNameInputComponent);
+export { VariableNameInputComponent };
+/**
+ * Operation Select Component
+ * Dropdown for selecting data operations with icons
+ */
+let OperationSelectComponent = class OperationSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = DataOperation.QUERY;
+        this.disabled = false;
+        this.label = '';
+    }
+    handleChange(e) {
+        this.value = e.detail.value;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = DATA_OPERATIONS.map(op => ({
+            value: op.value,
+            label: op.label,
+            description: op.description,
+            icon: op.icon,
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <nr-select
+          .value=${this.value}
+          .options=${options}
+          ?disabled=${this.disabled}
+          @nr-change=${this.handleChange}
+        ></nr-select>
+      </div>
+    `;
+    }
+};
+OperationSelectComponent.useShadowDom = true;
+OperationSelectComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], OperationSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], OperationSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], OperationSelectComponent.prototype, "label", void 0);
+OperationSelectComponent = __decorate([
+    customElement('nr-operation-select')
+], OperationSelectComponent);
+export { OperationSelectComponent };
+/**
+ * DataSource Select Component
+ * Dropdown for selecting configured data sources
+ */
+let DataSourceSelectComponent = class DataSourceSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = null;
+        this.dataSources = [];
+        this.disabled = false;
+        this.placeholder = 'Select data source...';
+        this.label = '';
+        this.description = '';
+    }
+    handleChange(e) {
+        this.value = e.detail.value || null;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = this.dataSources.map(ds => ({
+            value: ds.id,
+            label: ds.name,
+            description: ds.type,
+            icon: ds.icon || 'database',
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <nr-select
+          .value=${this.value || ''}
+          .options=${options}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          @nr-change=${this.handleChange}
+        ></nr-select>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+DataSourceSelectComponent.useShadowDom = true;
+DataSourceSelectComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], DataSourceSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], DataSourceSelectComponent.prototype, "dataSources", void 0);
+__decorate([
+    property({ type: Boolean })
+], DataSourceSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], DataSourceSelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], DataSourceSelectComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], DataSourceSelectComponent.prototype, "description", void 0);
+DataSourceSelectComponent = __decorate([
+    customElement('nr-datasource-select')
+], DataSourceSelectComponent);
+export { DataSourceSelectComponent };
+/**
+ * Entity Select Component
+ * Dropdown for selecting tables/collections from a data source
+ */
+let EntitySelectComponent = class EntitySelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = null;
+        this.entities = [];
+        this.disabled = false;
+        this.loading = false;
+        this.placeholder = 'Select table/collection...';
+        this.label = '';
+        this.description = '';
+    }
+    handleChange(e) {
+        this.value = e.detail.value || null;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = this.entities.map(entity => ({
+            value: entity.id,
+            label: entity.schema ? `${entity.schema}.${entity.name}` : entity.name,
+            description: entity.type,
+            icon: entity.type === 'collection' ? 'folder' : 'table',
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <nr-select
+          .value=${this.value || ''}
+          .options=${options}
+          placeholder=${this.loading ? 'Loading...' : this.placeholder}
+          ?disabled=${this.disabled || this.loading}
+          searchable
+          @nr-change=${this.handleChange}
+        ></nr-select>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+EntitySelectComponent.useShadowDom = true;
+EntitySelectComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], EntitySelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], EntitySelectComponent.prototype, "entities", void 0);
+__decorate([
+    property({ type: Boolean })
+], EntitySelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], EntitySelectComponent.prototype, "loading", void 0);
+__decorate([
+    property({ type: String })
+], EntitySelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], EntitySelectComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], EntitySelectComponent.prototype, "description", void 0);
+EntitySelectComponent = __decorate([
+    customElement('nr-entity-select')
+], EntitySelectComponent);
+export { EntitySelectComponent };
+/**
+ * Field Select Component
+ * Dropdown for selecting a single field/column
+ */
+let FieldSelectComponent = class FieldSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = null;
+        this.fields = [];
+        this.disabled = false;
+        this.placeholder = 'Select field...';
+    }
+    handleChange(e) {
+        this.value = e.detail.value || null;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = this.fields.map(field => ({
+            value: field.name,
+            label: field.name,
+            description: field.type,
+        }));
+        return html `
+      <nr-select
+        .value=${this.value || ''}
+        .options=${options}
+        placeholder=${this.placeholder}
+        ?disabled=${this.disabled}
+        size="small"
+        @nr-change=${this.handleChange}
+      ></nr-select>
+    `;
+    }
+};
+FieldSelectComponent.useShadowDom = true;
+FieldSelectComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: String })
+], FieldSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FieldSelectComponent.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FieldSelectComponent.prototype, "placeholder", void 0);
+FieldSelectComponent = __decorate([
+    customElement('nr-field-select')
+], FieldSelectComponent);
+export { FieldSelectComponent };
+/**
+ * Field Multi-Select Component
+ * Multi-select for choosing multiple fields
+ */
+let FieldMultiSelectComponent = class FieldMultiSelectComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select'];
+        this.value = [];
+        this.fields = [];
+        this.disabled = false;
+        this.placeholder = 'All fields';
+        this.label = '';
+        this.description = '';
+    }
+    handleChange(e) {
+        this.value = Array.isArray(e.detail.value) ? e.detail.value : [e.detail.value].filter(Boolean);
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        const options = this.fields.map(field => ({
+            value: field.name,
+            label: field.name,
+            description: field.type,
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <nr-select
+          .value=${this.value}
+          .options=${options}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          multiple
+          searchable
+          clearable
+          @nr-change=${this.handleChange}
+        ></nr-select>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+FieldMultiSelectComponent.useShadowDom = true;
+FieldMultiSelectComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: Array })
+], FieldMultiSelectComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FieldMultiSelectComponent.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldMultiSelectComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FieldMultiSelectComponent.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: String })
+], FieldMultiSelectComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FieldMultiSelectComponent.prototype, "description", void 0);
+FieldMultiSelectComponent = __decorate([
+    customElement('nr-field-multi-select')
+], FieldMultiSelectComponent);
+export { FieldMultiSelectComponent };
+/**
+ * Filter Builder Component
+ * Visual AND/OR filter tree builder
+ */
+let FilterBuilderComponent = class FilterBuilderComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select', 'nr-input', 'nr-icon'];
+        this.value = null;
+        this.fields = [];
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+        this.allowExpressions = true;
+    }
+    getEmptyGroup(logic = 'and') {
+        return { [logic]: [] };
+    }
+    getEmptyCondition() {
+        return { field: '', op: FilterOperator.EQUALS, value: '' };
+    }
+    updateValue(newValue) {
+        this.value = newValue;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    toggleLogic(group) {
+        if (group.and) {
+            return { or: group.and };
+        }
+        else if (group.or) {
+            return { and: group.or };
+        }
+        return group;
+    }
+    addCondition() {
+        if (!this.value) {
+            this.updateValue({ and: [this.getEmptyCondition()] });
+        }
+        else {
+            const logic = this.value.and ? 'and' : 'or';
+            const conditions = this.value[logic] || [];
+            this.updateValue({
+                [logic]: [...conditions, this.getEmptyCondition()],
+            });
+        }
+    }
+    addGroup() {
+        if (!this.value) {
+            this.updateValue({ and: [this.getEmptyGroup('and')] });
+        }
+        else {
+            const logic = this.value.and ? 'and' : 'or';
+            const conditions = this.value[logic] || [];
+            this.updateValue({
+                [logic]: [...conditions, this.getEmptyGroup('and')],
+            });
+        }
+    }
+    removeCondition(index) {
+        if (!this.value)
+            return;
+        const logic = this.value.and ? 'and' : 'or';
+        const conditions = this.value[logic] || [];
+        const newConditions = conditions.filter((_, i) => i !== index);
+        if (newConditions.length === 0) {
+            this.updateValue(null);
+        }
+        else {
+            this.updateValue({ [logic]: newConditions });
+        }
+    }
+    updateCondition(index, updates) {
+        if (!this.value)
+            return;
+        const logic = this.value.and ? 'and' : 'or';
+        const conditions = [...(this.value[logic] || [])];
+        conditions[index] = Object.assign(Object.assign({}, conditions[index]), updates);
+        this.updateValue({ [logic]: conditions });
+    }
+    renderCondition(condition, index) {
+        const operator = FILTER_OPERATORS.find(op => op.value === condition.op);
+        const needsValue = (operator === null || operator === void 0 ? void 0 : operator.requiresValue) !== false;
+        const fieldOptions = this.fields.map(field => ({
+            value: field.name,
+            label: field.name,
+        }));
+        const operatorOptions = FILTER_OPERATORS.map(op => ({
+            value: op.value,
+            label: op.label,
+        }));
+        return html `
+      <div class="filter-condition">
+        <nr-select
+          .value=${condition.field}
+          .options=${fieldOptions}
+          placeholder="Select field..."
+          ?disabled=${this.disabled}
+          size="small"
+          @nr-change=${(e) => this.updateCondition(index, { field: e.detail.value })}
+        ></nr-select>
+        <nr-select
+          .value=${condition.op}
+          .options=${operatorOptions}
+          ?disabled=${this.disabled}
+          size="small"
+          @nr-change=${(e) => this.updateCondition(index, { op: e.detail.value })}
+        ></nr-select>
+        ${needsValue ? html `
+          <nr-input
+            .value=${String(condition.value || '')}
+            placeholder=${this.allowExpressions ? 'Value or ${expression}' : 'Value'}
+            ?disabled=${this.disabled}
+            size="small"
+            @nr-input=${(e) => this.updateCondition(index, { value: e.detail.value })}
+          ></nr-input>
+        ` : html `<div></div>`}
+        <button
+          class="filter-remove-btn"
+          ?disabled=${this.disabled}
+          @click=${() => this.removeCondition(index)}
+        >
+          <nr-icon name="x" size="small"></nr-icon>
+        </button>
+      </div>
+    `;
+    }
+    renderGroup(group) {
+        const logic = group.and ? 'and' : 'or';
+        const conditions = group[logic] || [];
+        return html `
+      <div class="filter-group">
+        <div class="filter-group-header">
+          <div class="filter-group-logic">
+            <button
+              class=${classMap({ active: logic === 'and' })}
+              ?disabled=${this.disabled}
+              @click=${() => this.updateValue(this.toggleLogic(group))}
+            >AND</button>
+            <button
+              class=${classMap({ active: logic === 'or' })}
+              ?disabled=${this.disabled}
+              @click=${() => this.updateValue(this.toggleLogic(group))}
+            >OR</button>
+          </div>
+        </div>
+        <div class="filter-conditions">
+          ${map(conditions, (item, index) => {
+            if ('and' in item || 'or' in item) {
+                return this.renderGroup(item);
+            }
+            return this.renderCondition(item, index);
+        })}
+        </div>
+        <div class="filter-actions">
+          <button class="filter-add-btn" ?disabled=${this.disabled} @click=${() => this.addCondition()}>
+            <nr-icon name="plus" size="small"></nr-icon>
+            Add condition
+          </button>
+          <button class="filter-add-btn" ?disabled=${this.disabled} @click=${() => this.addGroup()}>
+            <nr-icon name="folder-plus" size="small"></nr-icon>
+            Add group
+          </button>
+        </div>
+      </div>
+    `;
+    }
+    render() {
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="filter-builder">
+          ${this.value
+            ? this.renderGroup(this.value)
+            : html `
+              <div class="empty-state">
+                <nr-icon name="filter" size="large"></nr-icon>
+                <span class="empty-state-text">No filter conditions</span>
+                <button class="filter-add-btn" ?disabled=${this.disabled} @click=${() => this.addCondition()}>
+                  <nr-icon name="plus" size="small"></nr-icon>
+                  Add condition
+                </button>
+              </div>
+            `}
+        </div>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+FilterBuilderComponent.useShadowDom = true;
+FilterBuilderComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: Object })
+], FilterBuilderComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FilterBuilderComponent.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterBuilderComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FilterBuilderComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FilterBuilderComponent.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], FilterBuilderComponent.prototype, "allowExpressions", void 0);
+FilterBuilderComponent = __decorate([
+    customElement('nr-filter-builder')
+], FilterBuilderComponent);
+export { FilterBuilderComponent };
+/**
+ * Field Mapper Component
+ * Key-value mapper with expression support
+ */
+let FieldMapperComponent = class FieldMapperComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select', 'nr-input', 'nr-icon'];
+        this.value = {};
+        this.fields = [];
+        this.disabled = false;
+        this.label = '';
+        this.description = '';
+        this.allowExpressions = true;
+    }
+    updateValue(newValue) {
+        this.value = newValue;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addMapping() {
+        const usedFields = Object.keys(this.value);
+        const availableField = this.fields.find(f => !usedFields.includes(f.name));
+        if (availableField) {
+            this.updateValue(Object.assign(Object.assign({}, this.value), { [availableField.name]: '' }));
+        }
+    }
+    removeMapping(fieldName) {
+        const newValue = Object.assign({}, this.value);
+        delete newValue[fieldName];
+        this.updateValue(newValue);
+    }
+    updateMapping(oldKey, newKey, newVal) {
+        const newValue = Object.assign({}, this.value);
+        if (oldKey !== newKey) {
+            delete newValue[oldKey];
+        }
+        newValue[newKey] = newVal;
+        this.updateValue(newValue);
+    }
+    render() {
+        const mappings = Object.entries(this.value);
+        const fieldOptions = this.fields.map(f => ({
+            value: f.name,
+            label: f.name,
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="field-mapper">
+          <div class="field-mapper-header">
+            <span>Field</span>
+            <span>Value</span>
+            <span></span>
+          </div>
+          ${mappings.length === 0
+            ? html `
+              <div class="empty-state">
+                <nr-icon name="table" size="large"></nr-icon>
+                <span class="empty-state-text">No field mappings</span>
+              </div>
+            `
+            : map(mappings, ([field, val]) => html `
+              <div class="field-mapper-row">
+                <nr-select
+                  .value=${field}
+                  .options=${fieldOptions}
+                  ?disabled=${this.disabled}
+                  size="small"
+                  @nr-change=${(e) => this.updateMapping(field, e.detail.value, val)}
+                ></nr-select>
+                <nr-input
+                  .value=${String(val || '')}
+                  placeholder=${this.allowExpressions ? 'Value or ${expression}' : 'Value'}
+                  ?disabled=${this.disabled}
+                  size="small"
+                  @nr-input=${(e) => this.updateMapping(field, field, e.detail.value)}
+                ></nr-input>
+                <button
+                  class="filter-remove-btn"
+                  ?disabled=${this.disabled}
+                  @click=${() => this.removeMapping(field)}
+                >
+                  <nr-icon name="x" size="small"></nr-icon>
+                </button>
+              </div>
+            `)}
+          <button class="filter-add-btn" ?disabled=${this.disabled} @click=${() => this.addMapping()}>
+            <nr-icon name="plus" size="small"></nr-icon>
+            Add field mapping
+          </button>
+        </div>
+        ${this.description ? html `<span class="field-description">${this.description}</span>` : nothing}
+      </div>
+    `;
+    }
+};
+FieldMapperComponent.useShadowDom = true;
+FieldMapperComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: Object })
+], FieldMapperComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], FieldMapperComponent.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldMapperComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], FieldMapperComponent.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], FieldMapperComponent.prototype, "description", void 0);
+__decorate([
+    property({ type: Boolean })
+], FieldMapperComponent.prototype, "allowExpressions", void 0);
+FieldMapperComponent = __decorate([
+    customElement('nr-field-mapper')
+], FieldMapperComponent);
+export { FieldMapperComponent };
+/**
+ * Sort Builder Component
+ * Sortable list of field + direction
+ */
+let SortBuilderComponent = class SortBuilderComponent extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-select', 'nr-icon'];
+        this.value = [];
+        this.fields = [];
+        this.disabled = false;
+        this.label = '';
+    }
+    updateValue(newValue) {
+        this.value = newValue;
+        this.dispatchEvent(new CustomEvent('value-change', {
+            detail: { value: this.value },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    addSort() {
+        const usedFields = this.value.map(s => s.field);
+        const availableField = this.fields.find(f => !usedFields.includes(f.name));
+        if (availableField) {
+            this.updateValue([...this.value, { field: availableField.name, dir: 'ASC' }]);
+        }
+    }
+    removeSort(index) {
+        this.updateValue(this.value.filter((_, i) => i !== index));
+    }
+    updateSort(index, updates) {
+        const newValue = [...this.value];
+        newValue[index] = Object.assign(Object.assign({}, newValue[index]), updates);
+        this.updateValue(newValue);
+    }
+    toggleDirection(index) {
+        const current = this.value[index].dir;
+        this.updateSort(index, { dir: current === 'ASC' ? 'DESC' : 'ASC' });
+    }
+    render() {
+        const fieldOptions = this.fields.map(f => ({
+            value: f.name,
+            label: f.name,
+        }));
+        return html `
+      <div class="field-container">
+        ${this.label ? html `<label class="field-label">${this.label}</label>` : nothing}
+        <div class="sort-builder">
+          ${this.value.length === 0
+            ? html `
+              <div class="empty-state">
+                <nr-icon name="arrow-up-down" size="large"></nr-icon>
+                <span class="empty-state-text">No sorting defined</span>
+              </div>
+            `
+            : map(this.value, (sort, index) => html `
+              <div class="sort-item">
+                <nr-select
+                  .value=${sort.field}
+                  .options=${fieldOptions}
+                  ?disabled=${this.disabled}
+                  size="small"
+                  @nr-change=${(e) => this.updateSort(index, { field: e.detail.value })}
+                ></nr-select>
+                <button
+                  class="sort-direction-btn ${sort.dir.toLowerCase()}"
+                  ?disabled=${this.disabled}
+                  @click=${() => this.toggleDirection(index)}
+                  title=${sort.dir === 'ASC' ? 'Ascending' : 'Descending'}
+                >
+                  <nr-icon name=${sort.dir === 'ASC' ? 'arrow-up' : 'arrow-down'} size="small"></nr-icon>
+                </button>
+                <button
+                  class="filter-remove-btn"
+                  ?disabled=${this.disabled}
+                  @click=${() => this.removeSort(index)}
+                >
+                  <nr-icon name="x" size="small"></nr-icon>
+                </button>
+              </div>
+            `)}
+          <button class="filter-add-btn" ?disabled=${this.disabled} @click=${() => this.addSort()}>
+            <nr-icon name="plus" size="small"></nr-icon>
+            Add sort
+          </button>
+        </div>
+      </div>
+    `;
+    }
+};
+SortBuilderComponent.useShadowDom = true;
+SortBuilderComponent.styles = dataNodeFieldStyles;
+__decorate([
+    property({ type: Array })
+], SortBuilderComponent.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], SortBuilderComponent.prototype, "fields", void 0);
+__decorate([
+    property({ type: Boolean })
+], SortBuilderComponent.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SortBuilderComponent.prototype, "label", void 0);
+SortBuilderComponent = __decorate([
+    customElement('nr-sort-builder')
+], SortBuilderComponent);
+export { SortBuilderComponent };
+//# sourceMappingURL=data-node-fields.component.js.map