angular-data-mapper 1.0.0

package/projects/demo-app/src/app/services/sample-data.service.ts

@@ -0,0 +1,228 @@
+import { Injectable, inject } from '@angular/core';
+import { SchemaParserService, SchemaDocument, ModelRegistry } from '@expeed/ngx-data-mapper';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class SampleDataService {
+  private schemaParser = inject(SchemaParserService);
+
+  constructor() {
+    // Register models on service initialization
+    this.schemaParser.registerModels(this.getModelDefinitions());
+  }
+
+  // Model definitions registry - these could come from an API
+  getModelDefinitions(): ModelRegistry {
+    return {
+      Customer: {
+        type: 'object',
+        properties: {
+          id: { type: 'string', description: 'Unique identifier' },
+          firstName: { type: 'string', description: 'Customer first name' },
+          lastName: { type: 'string', description: 'Customer last name' },
+          middleName: { type: 'string', description: 'Customer middle name' },
+          prefix: { type: 'string', description: 'Name prefix (Mr, Mrs, Dr)' },
+          suffix: { type: 'string', description: 'Name suffix (Jr, Sr, III)' },
+          email: { type: 'string', description: 'Email address' },
+          secondaryEmail: { type: 'string', description: 'Secondary email' },
+          phone: { type: 'string', description: 'Phone number with area code' },
+          mobilePhone: { type: 'string', description: 'Mobile phone number' },
+          workPhone: { type: 'string', description: 'Work phone number' },
+          fax: { type: 'string', description: 'Fax number' },
+          birthDate: { type: 'string', format: 'date', description: 'Date of birth' },
+          gender: { type: 'string', description: 'Gender' },
+          nationality: { type: 'string', description: 'Nationality' },
+          language: { type: 'string', description: 'Preferred language' },
+          timezone: { type: 'string', description: 'Timezone' },
+          createdAt: { type: 'string', format: 'date-time', description: 'Record creation timestamp' },
+          updatedAt: { type: 'string', format: 'date-time', description: 'Last update timestamp' },
+          addresses: {
+            type: 'array',
+            description: 'List of customer addresses',
+            items: {
+              type: 'object',
+              properties: {
+                street: { type: 'string', description: 'Street address' },
+                street2: { type: 'string', description: 'Street address line 2' },
+                city: { type: 'string', description: 'City name' },
+                state: { type: 'string', description: 'State code' },
+                zipCode: { type: 'string', description: 'Postal code' },
+                country: { type: 'string', description: 'Country code' },
+                isPrimary: { type: 'boolean', description: 'Primary address flag' },
+                addressType: { type: 'string', description: 'Type (home, work, billing)' },
+              },
+            },
+          },
+          accountBalance: { type: 'number', description: 'Current account balance' },
+          creditLimit: { type: 'number', description: 'Credit limit' },
+          loyaltyPoints: { type: 'number', description: 'Loyalty points balance' },
+          isActive: { type: 'boolean', description: 'Account active status' },
+          isVerified: { type: 'boolean', description: 'Email verified status' },
+          marketingOptIn: { type: 'boolean', description: 'Marketing opt-in' },
+          tags: {
+            type: 'array',
+            items: { type: 'string' },
+            description: 'Customer tags',
+          },
+          notes: { type: 'string', description: 'Internal notes' },
+          referralCode: { type: 'string', description: 'Referral code' },
+          referredBy: { type: 'string', description: 'Referred by customer ID' },
+        },
+      },
+      UserProfile: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' },
+          fullName: { type: 'string', description: 'Full display name' },
+          displayName: { type: 'string', description: 'Public display name' },
+          initials: { type: 'string', description: 'Name initials' },
+          emailAddress: { type: 'string' },
+          alternateEmail: { type: 'string', description: 'Alternate email' },
+          areaCode: { type: 'string', description: 'Phone area code only' },
+          phoneNumber: { type: 'string' },
+          mobileNumber: { type: 'string' },
+          birthYear: { type: 'string' },
+          birthMonth: { type: 'string' },
+          age: { type: 'number', description: 'Calculated age' },
+          createdAt: { type: 'string', format: 'date-time' },
+          lastLoginAt: { type: 'string', format: 'date-time' },
+          preferredLanguage: { type: 'string' },
+          timezoneName: { type: 'string' },
+          locations: {
+            type: 'array',
+            description: 'List of user locations',
+            items: {
+              type: 'object',
+              properties: {
+                fullAddress: { type: 'string', description: 'Combined street and city' },
+                streetLine1: { type: 'string' },
+                streetLine2: { type: 'string' },
+                region: { type: 'string', description: 'State or region' },
+                postalCode: { type: 'string', description: 'Postal code' },
+                countryCode: { type: 'string' },
+                isDefault: { type: 'boolean', description: 'Default location flag' },
+                locationType: { type: 'string' },
+              },
+            },
+          },
+          location: {
+            type: 'object',
+            properties: {
+              fullAddress: { type: 'string', description: 'Combined street and city' },
+              region: { type: 'string' },
+              postalCode: { type: 'string' },
+              country: { type: 'string' },
+            },
+          },
+          balance: { type: 'string', description: 'Formatted balance with currency' },
+          availableCredit: { type: 'string' },
+          rewardPoints: { type: 'number' },
+          status: { type: 'string' },
+          accountType: { type: 'string' },
+          memberSince: { type: 'string' },
+          isEmailVerified: { type: 'boolean' },
+          isMobileVerified: { type: 'boolean' },
+          hasOptedInMarketing: { type: 'boolean' },
+          profileImageUrl: { type: 'string' },
+          bio: { type: 'string' },
+        },
+      },
+      Order: {
+        type: 'object',
+        properties: {
+          id: { type: 'string' },
+          orderNumber: { type: 'string' },
+          customerId: { type: 'string' },
+          items: {
+            type: 'array',
+            items: {
+              type: 'object',
+              properties: {
+                productId: { type: 'string' },
+                productName: { type: 'string' },
+                quantity: { type: 'integer' },
+                unitPrice: { type: 'number' },
+              },
+            },
+          },
+          totalAmount: { type: 'number' },
+          status: { type: 'string' },
+          createdAt: { type: 'string', format: 'date-time' },
+        },
+      },
+    };
+  }
+
+  getSourceSchema(): SchemaDocument {
+    // Using object format with $ref and exclude
+    return {
+      $ref: '#Customer',
+      exclude: ['id', 'createdAt', 'updatedAt', 'tags'],
+      title: 'Customer',
+    };
+  }
+
+  getTargetSchema(): SchemaDocument {
+    // Using object format with $ref and exclude
+    return {
+      $ref: '#UserProfile',
+      exclude: ['id', 'createdAt'],
+      title: 'User Profile',
+    };
+  }
+
+  // Alternative: Get schema with inline definitions
+  getSchemaWithInlineDefinitions(): SchemaDocument {
+    return {
+      $ref: '#/definitions/Order',
+      definitions: {
+        Order: {
+          type: 'object',
+          properties: {
+            orderId: { type: 'string' },
+            customer: { $ref: '#/definitions/CustomerRef' },
+            total: { type: 'number' },
+          },
+        },
+        CustomerRef: {
+          type: 'object',
+          properties: {
+            id: { type: 'string' },
+            name: { type: 'string' },
+          },
+        },
+      },
+    };
+  }
+
+  getSampleData(): Record<string, unknown> {
+    return {
+      firstName: 'John',
+      lastName: 'Smith',
+      email: 'john.smith@example.com',
+      phone: '555-123-4567',
+      birthDate: '1990-05-15',
+      address: {
+        street: '123 Main Street',
+        city: 'New York',
+        state: 'NY',
+        zipCode: '10001',
+        country: 'US',
+      },
+      accountBalance: 1234.56,
+      isActive: true,
+    };
+  }
+
+  // Method to parse a schema document
+  parseSchema(schema: SchemaDocument, name: string): SchemaDocument {
+    // Just return the schema document - data-mapper handles conversion
+    return { ...schema, title: name };
+  }
+
+  // Method to register additional models
+  registerModels(models: ModelRegistry): void {
+    this.schemaParser.registerModels(models);
+  }
+}

package/projects/demo-app/src/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>DataMapperApp</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

package/projects/demo-app/src/main.ts

@@ -0,0 +1,6 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));

package/projects/demo-app/src/styles.scss

@@ -0,0 +1,54 @@
+
+// Include theming for Angular Material with `mat.theme()`.
+// This Sass mixin will define CSS variables that are used for styling Angular Material
+// components according to the Material 3 design spec.
+// Learn more about theming and how to use it for your application's
+// custom components at https://material.angular.dev/guide/theming
+@use '@angular/material' as mat;
+
+html {
+  height: 100%;
+  @include mat.theme((
+    color: (
+      primary: mat.$azure-palette,
+      tertiary: mat.$blue-palette,
+    ),
+    typography: Roboto,
+    density: 0,
+  ));
+}
+
+body {
+  // Default the application to a light color theme. This can be changed to
+  // `dark` to enable the dark color theme, or to `light dark` to defer to the
+  // user's system settings.
+  color-scheme: light;
+
+  // Set a default background, font and text colors for the application using
+  // Angular Material's system-level CSS variables. Learn more about these
+  // variables at https://material.angular.dev/guide/system-variables
+  background-color: var(--mat-sys-surface);
+  color: var(--mat-sys-on-surface);
+  font: var(--mat-sys-body-medium);
+
+  // Reset the user agent margin.
+  margin: 0;
+  height: 100%;
+}
+/* You can add global styles to this file, and also import other style files */
+
+// Smaller dropdown options for type selector
+.mat-mdc-select-panel {
+  .mat-mdc-option {
+    font-size: 12px !important;
+    min-height: 36px !important;
+    padding: 0 12px !important;
+
+    .mat-icon {
+      font-size: 16px !important;
+      width: 16px !important;
+      height: 16px !important;
+      margin-right: 8px !important;
+    }
+  }
+}

package/projects/demo-app/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

package/projects/ngx-data-mapper/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-data-mapper",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/projects/ngx-data-mapper/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@expeed/ngx-data-mapper",
+  "version": "1.2.2",
+  "description": "Visual data mapping components for Angular - drag-and-drop field mapping with transformations, schema editor with JSON Schema export",
+  "keywords": [
+    "angular",
+    "data-mapper",
+    "field-mapping",
+    "schema-editor",
+    "json-schema",
+    "drag-drop",
+    "visual-mapping",
+    "etl",
+    "data-transformation"
+  ],
+  "license": "Apache-2.0",
+  "author": "Expeed Software",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Expeed-Software/angular-data-mapper.git"
+  },
+  "homepage": "https://github.com/Expeed-Software/angular-data-mapper#readme",
+  "bugs": {
+    "url": "https://github.com/Expeed-Software/angular-data-mapper/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@angular/common": "^21.0.0",
+    "@angular/core": "^21.0.0",
+    "@angular/forms": "^21.0.0",
+    "@angular/cdk": "^21.0.0",
+    "@angular/material": "^21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false
+}

package/projects/ngx-data-mapper/src/lib/components/array-filter-modal/array-filter-modal.component.html

@@ -0,0 +1,183 @@
+<div class="modal-backdrop" (click)="onBackdropClick($event)">
+  <div class="filter-modal">
+    <div class="modal-header">
+      <div class="header-title">
+        <mat-icon>filter_list</mat-icon>
+        <span>Array Filter</span>
+      </div>
+      <span class="array-path">{{ arrayMapping.sourceArray.name }}[] &rarr; {{ arrayMapping.targetArray.name }}[]</span>
+      <button mat-icon-button class="close-btn" (click)="onClose()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <!-- Filter mode selection -->
+      <div class="filter-mode">
+        <mat-radio-group [value]="filterEnabled()" (change)="filterEnabled.set($event.value)">
+          <mat-radio-button [value]="false" class="mode-option">
+            <div class="mode-content">
+              <mat-icon>select_all</mat-icon>
+              <div class="mode-text">
+                <span class="mode-label">No filter</span>
+                <span class="mode-desc">Map all records from source to target</span>
+              </div>
+            </div>
+          </mat-radio-button>
+          <mat-radio-button [value]="true" class="mode-option">
+            <div class="mode-content">
+              <mat-icon>filter_alt</mat-icon>
+              <div class="mode-text">
+                <span class="mode-label">Filter records</span>
+                <span class="mode-desc">Only map records matching conditions</span>
+              </div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <!-- Conditions builder (only when filter enabled) -->
+      @if (filterEnabled()) {
+        <mat-divider></mat-divider>
+
+        <div class="conditions-section">
+          <!-- Root group -->
+          <ng-container *ngTemplateOutlet="groupTemplate; context: { group: rootGroup(), isRoot: true }"></ng-container>
+        </div>
+      }
+    </div>
+
+    <div class="modal-footer">
+      <button mat-button (click)="onClose()">Cancel</button>
+      <button mat-flat-button color="primary" (click)="onSave()">
+        Apply
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- Recursive group template -->
+<ng-template #groupTemplate let-group="group" let-isRoot="isRoot" let-parentGroup="parentGroup">
+  <div class="filter-group" [class.root-group]="isRoot" [class.nested-group]="!isRoot">
+    <!-- Group header with logic toggle -->
+    <div class="group-header">
+      <div class="logic-toggle">
+        <span class="logic-label">Match</span>
+        <mat-radio-group [value]="group.logic" (change)="onLogicChange(group, $event.value)">
+          <mat-radio-button value="and">ALL (AND)</mat-radio-button>
+          <mat-radio-button value="or">ANY (OR)</mat-radio-button>
+        </mat-radio-group>
+      </div>
+      @if (!isRoot) {
+        <button mat-icon-button class="remove-group-btn" matTooltip="Remove group" (click)="removeItem(parentGroup, group.id)">
+          <mat-icon>close</mat-icon>
+        </button>
+      }
+    </div>
+
+    <!-- Group children -->
+    <div class="group-children">
+      @for (item of group.children; track item.id; let i = $index) {
+        <!-- Logic connector between items -->
+        @if (i > 0) {
+          <div class="logic-connector">
+            <span class="logic-badge" [class.and]="group.logic === 'and'" [class.or]="group.logic === 'or'">
+              {{ group.logic | uppercase }}
+            </span>
+          </div>
+        }
+
+        @if (isCondition(item)) {
+          <!-- Condition row -->
+          <div class="condition-row">
+            <div class="condition-inputs">
+              <!-- Field selector -->
+              <mat-form-field appearance="outline" class="field-select">
+                <mat-label>Field</mat-label>
+                <mat-select [value]="item.field" (selectionChange)="onFieldChange(item, $event.value)">
+                  @for (field of availableFields(); track field.path) {
+                    <mat-option [value]="field.path">
+                      {{ field.name }}
+                      <span class="field-type">({{ field.type }})</span>
+                    </mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+
+              <!-- Operator selector -->
+              <mat-form-field appearance="outline" class="operator-select">
+                <mat-label>Operator</mat-label>
+                <mat-select [value]="item.operator" (selectionChange)="onOperatorChange(item, $event.value)">
+                  @for (op of getOperatorsForField(item.field); track op.value) {
+                    <mat-option [value]="op.value">{{ op.label }}</mat-option>
+                  }
+                </mat-select>
+              </mat-form-field>
+
+              <!-- Value input (only if operator needs value) -->
+              @if (operatorNeedsValue(item.operator)) {
+                @if (item.valueType === 'boolean') {
+                  <mat-slide-toggle
+                    [checked]="item.value === true"
+                    (change)="onValueChange(item, $event.checked)"
+                    class="bool-toggle"
+                  >
+                    {{ item.value ? 'true' : 'false' }}
+                  </mat-slide-toggle>
+                } @else if (item.valueType === 'number') {
+                  <mat-form-field appearance="outline" class="value-input">
+                    <mat-label>Value</mat-label>
+                    <input
+                      matInput
+                      type="number"
+                      [value]="item.value"
+                      (input)="onValueChange(item, $any($event.target).value)"
+                    />
+                  </mat-form-field>
+                } @else {
+                  <mat-form-field appearance="outline" class="value-input">
+                    <mat-label>Value</mat-label>
+                    <input
+                      matInput
+                      type="text"
+                      [value]="item.value"
+                      (input)="onValueChange(item, $any($event.target).value)"
+                    />
+                  </mat-form-field>
+                }
+              }
+
+              <!-- Remove condition button -->
+              <button mat-icon-button class="remove-btn" matTooltip="Remove condition" (click)="removeItem(group, item.id)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
+          </div>
+        } @else if (isGroup(item)) {
+          <!-- Nested group -->
+          <ng-container *ngTemplateOutlet="groupTemplate; context: { group: item, isRoot: false, parentGroup: group }"></ng-container>
+        }
+      }
+
+      <!-- Empty state -->
+      @if (group.children.length === 0) {
+        <div class="empty-group">
+          <mat-icon>info_outline</mat-icon>
+          <span>No conditions. Add a condition or group.</span>
+        </div>
+      }
+    </div>
+
+    <!-- Group actions -->
+    <div class="group-actions">
+      <button mat-stroked-button class="add-condition-btn" (click)="addCondition(group)">
+        <mat-icon>add</mat-icon>
+        Add Condition
+      </button>
+      <button mat-stroked-button class="add-group-btn" (click)="addGroup(group)">
+        <mat-icon>folder_open</mat-icon>
+        Add Group
+      </button>
+    </div>
+  </div>
+</ng-template>