angular-data-mapper 1.0.0

package/projects/ngx-data-mapper/src/lib/components/default-value-popover/default-value-popover.component.scss

@@ -0,0 +1,97 @@
+.popover-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.popover-container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+  min-width: 320px;
+  max-width: 400px;
+  overflow: hidden;
+}
+
+.popover-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+  color: white;
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+
+    mat-icon {
+      font-size: 20px;
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  button {
+    color: white;
+  }
+}
+
+.popover-content {
+  padding: 20px;
+}
+
+.field-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  padding: 10px 12px;
+  background: #f8fafc;
+  border-radius: 8px;
+
+  .field-name {
+    font-weight: 600;
+    color: #1e293b;
+  }
+
+  .field-type {
+    font-size: 12px;
+    color: #64748b;
+    background: #e2e8f0;
+    padding: 2px 8px;
+    border-radius: 4px;
+    text-transform: uppercase;
+  }
+}
+
+.full-width {
+  width: 100%;
+}
+
+.boolean-input {
+  padding: 12px 0;
+}
+
+.popover-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 20px;
+  background: #f8fafc;
+  border-top: 1px solid #e2e8f0;
+
+  .spacer {
+    flex: 1;
+  }
+}

package/projects/ngx-data-mapper/src/lib/components/default-value-popover/default-value-popover.component.ts

@@ -0,0 +1,105 @@
+import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { SchemaField, DefaultValue } from '../../models/schema.model';
+
+@Component({
+  selector: 'default-value-popover',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatSelectModule,
+    MatSlideToggleModule,
+  ],
+  templateUrl: './default-value-popover.component.html',
+  styleUrl: './default-value-popover.component.scss',
+})
+export class DefaultValuePopoverComponent implements OnInit {
+  @Input() field!: SchemaField;
+  @Input() existingValue?: DefaultValue;
+  @Input() position!: { x: number; y: number };
+
+  @Output() save = new EventEmitter<string | number | boolean | Date | null>();
+  @Output() delete = new EventEmitter<void>();
+  @Output() close = new EventEmitter<void>();
+
+  stringValue = '';
+  numberValue: number | null = null;
+  booleanValue = false;
+  dateValue: Date | null = null;
+
+  ngOnInit(): void {
+    if (this.existingValue) {
+      switch (this.fieldType) {
+        case 'string':
+          this.stringValue = this.existingValue.value as string || '';
+          break;
+        case 'number':
+          this.numberValue = this.existingValue.value as number;
+          break;
+        case 'boolean':
+          this.booleanValue = this.existingValue.value as boolean;
+          break;
+        case 'date':
+          this.dateValue = this.existingValue.value ? new Date(this.existingValue.value as string) : null;
+          break;
+      }
+    }
+  }
+
+  get fieldType(): string {
+    if (this.field.type === 'date' || this.field.name.toLowerCase().includes('date')) {
+      return 'date';
+    }
+    return this.field.type;
+  }
+
+  onSave(): void {
+    let value: string | number | boolean | Date | null;
+
+    switch (this.fieldType) {
+      case 'number':
+        value = this.numberValue;
+        break;
+      case 'boolean':
+        value = this.booleanValue;
+        break;
+      case 'date':
+        value = this.dateValue;
+        break;
+      default:
+        value = this.stringValue || null;
+    }
+
+    this.save.emit(value);
+  }
+
+  onDelete(): void {
+    this.delete.emit();
+  }
+
+  onClose(): void {
+    this.close.emit();
+  }
+
+  onBackdropClick(event: MouseEvent): void {
+    if ((event.target as HTMLElement).classList.contains('popover-backdrop')) {
+      this.onClose();
+    }
+  }
+}