angular-data-mapper 1.0.0

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

@@ -0,0 +1,174 @@
+<div class="modal-backdrop" (click)="onBackdropClick($event)">
+  <div class="selector-modal">
+    <div class="modal-header">
+      <div class="header-title">
+        <mat-icon>swap_horiz</mat-icon>
+        <span>Array to Object</span>
+      </div>
+      <span class="mapping-path">{{ mapping.sourceArray.name }}[] &rarr; {{ mapping.targetObject.name }}</span>
+      <button mat-icon-button class="close-btn" (click)="onClose()">
+        <mat-icon>close</mat-icon>
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <p class="description">
+        Select which item from the array should be mapped to the target object.
+      </p>
+
+      <!-- Selection mode -->
+      <div class="selection-mode">
+        <mat-radio-group [value]="selectionMode()" (change)="selectionMode.set($event.value)">
+          <mat-radio-button value="first" class="mode-option">
+            <div class="mode-content">
+              <mat-icon>first_page</mat-icon>
+              <div class="mode-text">
+                <span class="mode-label">First item</span>
+                <span class="mode-desc">Use the first item in the array</span>
+              </div>
+            </div>
+          </mat-radio-button>
+
+          <mat-radio-button value="last" class="mode-option">
+            <div class="mode-content">
+              <mat-icon>last_page</mat-icon>
+              <div class="mode-text">
+                <span class="mode-label">Last item</span>
+                <span class="mode-desc">Use the last item in the array</span>
+              </div>
+            </div>
+          </mat-radio-button>
+
+          <mat-radio-button value="condition" class="mode-option">
+            <div class="mode-content">
+              <mat-icon>filter_alt</mat-icon>
+              <div class="mode-text">
+                <span class="mode-label">First matching condition</span>
+                <span class="mode-desc">Use the first item that matches the condition</span>
+              </div>
+            </div>
+          </mat-radio-button>
+        </mat-radio-group>
+      </div>
+
+      <!-- Condition builder (only when condition mode selected) -->
+      @if (selectionMode() === 'condition') {
+        <mat-divider></mat-divider>
+
+        <div class="conditions-section">
+          <ng-container *ngTemplateOutlet="groupTemplate; context: { group: conditionGroup(), 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">
+    <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>
+
+    <div class="group-children">
+      @for (item of group.children; track item.id; let i = $index) {
+        @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)) {
+          <div class="condition-row">
+            <div class="condition-inputs">
+              <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>
+
+              <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>
+
+              @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>
+                }
+              }
+
+              <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)) {
+          <ng-container *ngTemplateOutlet="groupTemplate; context: { group: item, isRoot: false, parentGroup: group }"></ng-container>
+        }
+      }
+
+      @if (group.children.length === 0) {
+        <div class="empty-group">
+          <mat-icon>info_outline</mat-icon>
+          <span>No conditions. Add a condition to filter.</span>
+        </div>
+      }
+    </div>
+
+    <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>

package/projects/ngx-data-mapper/src/lib/components/array-selector-modal/array-selector-modal.component.scss

@@ -0,0 +1,357 @@
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.selector-modal {
+  position: relative;
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
+  width: 580px;
+  max-width: 100%;
+  max-height: calc(100vh - 40px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
+  color: white;
+  flex-shrink: 0;
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .mapping-path {
+    flex: 1;
+    font-size: 13px;
+    opacity: 0.9;
+    text-align: right;
+    margin-right: 8px;
+  }
+
+  .close-btn {
+    color: white;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 20px;
+  min-height: 0;
+}
+
+.description {
+  font-size: 14px;
+  color: #64748b;
+  margin: 0 0 16px 0;
+}
+
+.selection-mode {
+  mat-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .mode-option {
+    ::ng-deep .mdc-form-field {
+      align-items: flex-start;
+    }
+
+    ::ng-deep .mdc-radio {
+      margin-top: 4px;
+    }
+  }
+
+  .mode-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    transition: all 0.2s ease;
+    cursor: pointer;
+
+    &:hover {
+      background: #f1f5f9;
+      border-color: #cbd5e1;
+    }
+
+    mat-icon {
+      color: #64748b;
+      margin-top: 2px;
+    }
+  }
+
+  .mode-text {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .mode-label {
+    font-size: 14px;
+    font-weight: 500;
+    color: #1e293b;
+  }
+
+  .mode-desc {
+    font-size: 12px;
+    color: #64748b;
+  }
+
+  mat-radio-button.mat-mdc-radio-checked {
+    .mode-content {
+      background: #f5f3ff;
+      border-color: #8b5cf6;
+
+      mat-icon {
+        color: #8b5cf6;
+      }
+    }
+  }
+}
+
+mat-divider {
+  margin: 20px 0;
+}
+
+.conditions-section {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.filter-group {
+  border-radius: 8px;
+
+  &.root-group {
+    background: #f8fafc;
+    border: 1px solid #e2e8f0;
+    padding: 16px;
+  }
+
+  &.nested-group {
+    background: white;
+    border: 2px dashed #cbd5e1;
+    padding: 12px;
+    margin-top: 8px;
+  }
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #e2e8f0;
+}
+
+.logic-toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .logic-label {
+    font-size: 13px;
+    font-weight: 500;
+    color: #475569;
+  }
+
+  mat-radio-group {
+    display: flex;
+    gap: 12px;
+  }
+
+  mat-radio-button {
+    font-size: 12px;
+
+    ::ng-deep .mdc-label {
+      font-size: 12px;
+    }
+  }
+}
+
+.remove-group-btn {
+  color: #94a3b8;
+
+  &:hover {
+    color: #ef4444;
+  }
+}
+
+.group-children {
+  display: flex;
+  flex-direction: column;
+}
+
+.logic-connector {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 0;
+
+  .logic-badge {
+    font-size: 10px;
+    font-weight: 700;
+    padding: 3px 10px;
+    border-radius: 12px;
+    letter-spacing: 0.5px;
+
+    &.and {
+      background: #dbeafe;
+      color: #1d4ed8;
+    }
+
+    &.or {
+      background: #fef3c7;
+      color: #b45309;
+    }
+  }
+}
+
+.condition-row {
+  .condition-inputs {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+    padding: 12px;
+    background: white;
+    border: 1px solid #e2e8f0;
+    border-radius: 8px;
+
+    .field-select {
+      flex: 1;
+      min-width: 120px;
+    }
+
+    .operator-select {
+      flex: 1;
+      min-width: 130px;
+    }
+
+    .value-input {
+      flex: 1;
+      min-width: 100px;
+    }
+
+    .bool-toggle {
+      padding-top: 12px;
+      min-width: 80px;
+    }
+
+    .remove-btn {
+      color: #94a3b8;
+      align-self: center;
+
+      &:hover {
+        color: #ef4444;
+      }
+    }
+
+    mat-form-field {
+      ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+        display: none;
+      }
+    }
+  }
+}
+
+.nested-group .condition-row .condition-inputs {
+  background: #f8fafc;
+}
+
+.field-type {
+  font-size: 11px;
+  color: #94a3b8;
+  margin-left: 4px;
+}
+
+.empty-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px;
+  background: #fef3c7;
+  border-radius: 8px;
+  color: #92400e;
+  font-size: 13px;
+
+  mat-icon {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+.group-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e2e8f0;
+}
+
+.add-condition-btn {
+  color: #8b5cf6;
+  border-color: #8b5cf6;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.add-group-btn {
+  color: #6366f1;
+  border-color: #6366f1;
+  font-size: 12px;
+
+  mat-icon {
+    font-size: 16px;
+    width: 16px;
+    height: 16px;
+  }
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 16px 20px;
+  border-top: 1px solid #e2e8f0;
+  background: #f8fafc;
+  flex-shrink: 0;
+}