@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/shared/confirm-with-input-dialog.component.ts.ejs

@@ -0,0 +1,91 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+
+type ConfirmationColor = 'blue' | 'amber' | 'rose' | 'violet' | 'emerald';
+
+type ConfirmWithInputDialogData = {
+  title: string;
+  message: string;
+  confirmText: string;
+  color?: ConfirmationColor;
+  inputLabel?: string;
+};
+
+@Component({
+  selector: 'app-confirm-with-input-dialog',
+  standalone: true,
+  imports: [CommonModule, FormsModule, MatDialogModule, MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule],
+  template: `
+    <div class="w-full max-w-lg overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950">
+      <div class="border-b border-slate-200 px-6 py-5 dark:border-slate-800">
+        <div class="flex items-start gap-4">
+          <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl" [ngClass]="iconClasses()">
+            <mat-icon svgIcon="shield-alert" class="text-current"></mat-icon>
+          </div>
+          <div class="min-w-0 flex-1">
+            <h2 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">{{ data.title }}</h2>
+            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ data.message }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="px-6 pt-4">
+        <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+          <mat-label>{{ data.inputLabel || 'Type to confirm' }}</mat-label>
+          <input matInput [ngModel]="typed()" (ngModelChange)="typed.set($event)" autocomplete="off" />
+        </mat-form-field>
+      </div>
+      <div class="flex items-center justify-end gap-3 px-6 py-4">
+        <button mat-stroked-button type="button" class="min-w-24" (click)="close(false)">Cancel</button>
+        <button mat-flat-button type="button" class="min-w-24" [ngClass]="actionClasses()" [disabled]="!matches()" (click)="close(true)">Confirm</button>
+      </div>
+    </div>
+  `,
+})
+export class ConfirmWithInputDialogComponent {
+  private readonly dialogRef = inject(MatDialogRef<ConfirmWithInputDialogComponent, boolean>);
+  readonly data = inject(MAT_DIALOG_DATA) as ConfirmWithInputDialogData;
+  readonly typed = signal('');
+
+  readonly theme = computed(() => this.data.color ?? 'rose');
+  readonly matches = computed(() => this.typed().trim() === String(this.data.confirmText ?? '').trim());
+
+  readonly iconClasses = computed(() => {
+    switch (this.theme()) {
+      case 'amber':
+        return 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300';
+      case 'rose':
+        return 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300';
+      case 'violet':
+        return 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300';
+      case 'emerald':
+        return 'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300';
+      default:
+        return 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300';
+    }
+  });
+
+  readonly actionClasses = computed(() => {
+    switch (this.theme()) {
+      case 'amber':
+        return 'bg-amber-500 text-white hover:bg-amber-600';
+      case 'rose':
+        return 'bg-rose-600 text-white hover:bg-rose-700';
+      case 'violet':
+        return 'bg-violet-600 text-white hover:bg-violet-700';
+      case 'emerald':
+        return 'bg-emerald-600 text-white hover:bg-emerald-700';
+      default:
+        return 'bg-sky-600 text-white hover:bg-sky-700';
+    }
+  });
+
+  close(result: boolean): void {
+    this.dialogRef.close(result);
+  }
+}

package/src/templates/angular/shared/confirmation-dialog.component.ts.ejs

@@ -0,0 +1,80 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+type ConfirmationColor = 'blue' | 'amber' | 'rose' | 'violet' | 'primary' | 'emerald';
+
+type ConfirmationDialogData = {
+  title: string;
+  message: string;
+  color?: ConfirmationColor;
+};
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, MatButtonModule, MatIconModule],
+  template: `
+    <div class="w-full max-w-lg overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-950">
+      <div class="border-b border-slate-200 px-6 py-5 dark:border-slate-800">
+        <div class="flex items-start gap-4">
+          <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl" [ngClass]="iconClasses()">
+            <mat-icon svgIcon="shield-alert" class="text-current"></mat-icon>
+          </div>
+          <div class="min-w-0 flex-1">
+            <h2 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">{{ data.title }}</h2>
+            <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ data.message }}</p>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-end gap-3 px-6 py-4">
+        <button mat-stroked-button type="button" class="min-w-24" (click)="close(false)">Cancel</button>
+        <button mat-flat-button type="button" class="min-w-24" [ngClass]="actionClasses()" (click)="close(true)">Confirm</button>
+      </div>
+    </div>
+  `,
+})
+export class ConfirmationDialogComponent {
+  private readonly dialogRef = inject(MatDialogRef<ConfirmationDialogComponent, boolean>);
+  readonly data = inject(MAT_DIALOG_DATA) as ConfirmationDialogData;
+
+  readonly theme = computed(() => this.data.color ?? 'blue');
+
+  readonly iconClasses = computed(() => {
+    switch (this.theme()) {
+      case 'amber':
+        return 'bg-amber-100 text-amber-700 dark:bg-amber-500/15 dark:text-amber-300';
+      case 'rose':
+        return 'bg-rose-100 text-rose-700 dark:bg-rose-500/15 dark:text-rose-300';
+      case 'violet':
+        return 'bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300';
+      case 'primary':
+      case 'emerald':
+        return 'bg-primary-100 text-primary-700 dark:bg-primary-500/15 dark:text-primary-300';
+      default:
+        return 'bg-sky-100 text-sky-700 dark:bg-sky-500/15 dark:text-sky-300';
+    }
+  });
+
+  readonly actionClasses = computed(() => {
+    switch (this.theme()) {
+      case 'amber':
+        return 'bg-amber-500 text-white hover:bg-amber-600';
+      case 'rose':
+        return 'bg-rose-600 text-white hover:bg-rose-700';
+      case 'violet':
+        return 'bg-violet-600 text-white hover:bg-violet-700';
+      case 'primary':
+      case 'emerald':
+        return 'bg-primary-600 text-white hover:bg-primary-700';
+      default:
+        return 'bg-sky-600 text-white hover:bg-sky-700';
+    }
+  });
+
+  close(result: boolean): void {
+    this.dialogRef.close(result);
+  }
+}

package/src/templates/angular/shared/list-styles.css.ejs

@@ -0,0 +1,103 @@
+/* Shared list styles — mirrors tw-hipster entity list SCSS (no flex-table overrides). */
+
+.cforge-entity-list .cforge-form-drawer.mat-drawer,
+.cforge-iam-list .cforge-form-drawer.mat-drawer {
+  width: min(33.333vw, 90vw);
+  min-width: min(24rem, 90vw);
+}
+
+.cforge-entity-list .mat-mdc-header-row,
+.cforge-iam-list .mat-mdc-header-row {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.cforge-entity-list .mat-mdc-header-cell,
+.cforge-iam-list .mat-mdc-header-cell {
+  background: var(--mat-sys-surface-bright) !important;
+  z-index: 10 !important;
+  border-bottom: 1px solid var(--mat-sys-outline-variant) !important;
+  white-space: nowrap;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+.cforge-entity-list .mat-mdc-cell,
+.cforge-iam-list .mat-mdc-cell {
+  white-space: nowrap;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+}
+
+/* Sticky Actions column — match header band (not a floating white chip). */
+.cforge-entity-list .mat-mdc-table .mat-column-actions.mat-mdc-header-cell,
+.cforge-entity-list .mat-mdc-table .mat-column-actions.mat-mdc-cell,
+.cforge-iam-list .mat-mdc-table .mat-column-actions.mat-mdc-header-cell,
+.cforge-iam-list .mat-mdc-table .mat-column-actions.mat-mdc-cell {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.cforge-entity-list .mat-mdc-row:hover .mat-column-actions,
+.cforge-iam-list .mat-mdc-row:hover .mat-column-actions {
+  background: var(--mat-sys-surface-container-low) !important;
+}
+
+.cforge-entity-list th.shadow-left,
+.cforge-entity-list td.shadow-left,
+.cforge-iam-list th.shadow-left,
+.cforge-iam-list td.shadow-left {
+  z-index: 15 !important;
+  box-shadow: -8px 0 12px -6px rgba(0, 0, 0, 0.15) !important;
+}
+
+.cforge-entity-list td.shadow-left,
+.cforge-iam-list td.shadow-left {
+  z-index: 5 !important;
+}
+
+@media (prefers-color-scheme: dark) {
+  .cforge-entity-list th.shadow-left,
+  .cforge-entity-list td.shadow-left,
+  .cforge-iam-list th.shadow-left,
+  .cforge-iam-list td.shadow-left {
+    box-shadow: -8px 0 12px -6px rgba(0, 0, 0, 0.45) !important;
+  }
+}
+
+.cforge-entity-list tr:nth-child(even):not(.has-flag),
+.cforge-iam-list tr:nth-child(even):not(.has-flag) {
+  background: var(--mat-sys-surface-container-low) !important;
+}
+
+.cforge-entity-list tr:nth-child(odd):not(.has-flag),
+.cforge-iam-list tr:nth-child(odd):not(.has-flag) {
+  background: var(--mat-sys-surface-bright) !important;
+}
+
+.cforge-entity-list .sticky-actions-default,
+.cforge-iam-list .sticky-actions-default {
+  background: inherit !important;
+}
+
+.cforge-entity-list .cforge-empty-state,
+.cforge-iam-list .cforge-empty-state {
+  display: flex;
+  min-height: 12rem;
+  align-items: center;
+  justify-content: center;
+  padding: 2.5rem 1.5rem;
+  color: var(--mat-sys-on-surface-variant, #64748b);
+  font-size: 0.9375rem;
+}
+
+.cforge-related-list-dialog .cforge-entity-list {
+  height: 100%;
+}
+
+.cforge-iam-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  min-width: 0;
+}

package/src/templates/angular/shared/loading-overlay.component.ts.ejs

@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+
+@Component({
+  selector: 'app-loading-overlay',
+  standalone: true,
+  imports: [CommonModule, MatProgressSpinnerModule],
+  template: `
+    @if (visible) {
+      <div class="absolute inset-0 z-50 flex flex-col items-center justify-center bg-white/80 backdrop-blur-sm dark:bg-neutral-950/80">
+        <mat-spinner [diameter]="diameter"></mat-spinner>
+        @if (message) {
+          <div class="mt-4 text-lg font-semibold text-primary">{{ message }}</div>
+        }
+      </div>
+    }
+  `,
+})
+export class LoadingOverlayComponent {
+  @Input() visible = false;
+  @Input() message = '';
+  @Input() diameter = 48;
+}

package/src/templates/angular/shared/resizable.directive.ts.ejs

@@ -0,0 +1,115 @@
+// This directive provides resizable headers for Angular tables.
+import { Directive, ElementRef, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[appResizable]',
+  exportAs: 'appResizable',
+  standalone: true
+})
+export class ResizableDirective implements OnInit, OnDestroy {
+  @Input('appResizable') columnKey!: string;
+  @Input() tableId!: string;
+
+  private mouseMoveListener?: () => void;
+  private mouseUpListener?: () => void;
+  private mouseDownListener?: () => void;
+  private startX = 0;
+  private startWidth = 0;
+
+  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {}
+
+  ngOnInit(): void {
+    const saved = this.getSavedWidth();
+    if (saved) {
+      this.applyWidth(saved);
+    }
+    this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
+    this.renderer.setStyle(this.el.nativeElement, 'overflow', 'visible');
+    this.renderer.setStyle(this.el.nativeElement, 'box-sizing', 'border-box');
+
+    const handle = this.renderer.createElement('span');
+    this.renderer.addClass(handle, 'resize-handle');
+    this.renderer.setStyle(handle, 'position', 'absolute');
+    this.renderer.setStyle(handle, 'right', '-3px');
+    this.renderer.setStyle(handle, 'top', '0');
+    this.renderer.setStyle(handle, 'bottom', '0');
+    this.renderer.setStyle(handle, 'width', '10px');
+    this.renderer.setStyle(handle, 'cursor', 'col-resize');
+    this.renderer.setStyle(handle, 'user-select', 'none');
+    this.renderer.setStyle(handle, 'touch-action', 'none');
+    this.renderer.setStyle(handle, 'z-index', '10');
+    this.renderer.setStyle(handle, 'background', 'transparent');
+    this.renderer.appendChild(this.el.nativeElement, handle);
+
+    this.mouseDownListener = this.renderer.listen(handle, 'mousedown', (event: MouseEvent) => this.onMouseDown(event));
+  }
+
+  ngOnDestroy(): void {
+    this.unbindDocumentEvents();
+    if (this.mouseDownListener) {
+      this.mouseDownListener();
+      this.mouseDownListener = undefined;
+    }
+  }
+
+  private onMouseDown(event: MouseEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this.startX = event.pageX;
+    this.startWidth = this.el.nativeElement.offsetWidth;
+    this.mouseMoveListener = this.renderer.listen('document', 'mousemove', (e: MouseEvent) => this.onMouseMove(e));
+    this.mouseUpListener = this.renderer.listen('document', 'mouseup', () => this.onMouseUp());
+  }
+
+  private onMouseMove(event: MouseEvent): void {
+    event.preventDefault();
+    const delta = event.pageX - this.startX;
+    const newWidth = Math.max(this.startWidth + delta, 60);
+    this.applyWidth(newWidth);
+  }
+
+  private onMouseUp(): void {
+    const finalWidth = this.el.nativeElement.offsetWidth;
+    this.saveWidth(finalWidth);
+    this.unbindDocumentEvents();
+  }
+
+  private unbindDocumentEvents(): void {
+    if (this.mouseMoveListener) {
+      this.mouseMoveListener();
+      this.mouseMoveListener = undefined;
+    }
+    if (this.mouseUpListener) {
+      this.mouseUpListener();
+      this.mouseUpListener = undefined;
+    }
+  }
+
+  private storageKey(): string {
+    return `${this.tableId}-${this.columnKey}-width`;
+  }
+
+  private getSavedWidth(): number | null {
+    if (typeof localStorage === 'undefined') return null;
+    const raw = localStorage.getItem(this.storageKey());
+    if (!raw) return null;
+    const parsed = parseInt(raw, 10);
+    return isNaN(parsed) ? null : parsed;
+  }
+
+  private saveWidth(width: number): void {
+    if (typeof localStorage === 'undefined') return;
+    localStorage.setItem(this.storageKey(), width.toString());
+  }
+
+  private applyWidth(width: number): void {
+    const px = `${width}px`;
+    this.renderer.setStyle(this.el.nativeElement, 'width', px);
+    this.renderer.setStyle(this.el.nativeElement, 'min-width', px);
+    this.renderer.setStyle(this.el.nativeElement, 'max-width', px);
+    const table = this.el.nativeElement.closest('table');
+    if (table) {
+      this.renderer.setStyle(table, 'table-layout', 'fixed');
+    }
+  }
+}

package/src/templates/angular/shared/snackbar-styles.css.ejs

@@ -0,0 +1,11 @@
+.success-snackbar {
+  --mdc-snackbar-container-color: var(--cforge-snackbar-success, <%= preferences.ui?.styling?.snackbarSuccessColor || '#16a34a' %>);
+  --mat-snack-bar-button-color: #dcfce7;
+  --mdc-snackbar-supporting-text-color: #ffffff;
+}
+
+.error-snackbar {
+  --mdc-snackbar-container-color: var(--cforge-snackbar-error, <%= preferences.ui?.styling?.snackbarErrorColor || '#dc2626' %>);
+  --mat-snack-bar-button-color: #fee2e2;
+  --mdc-snackbar-supporting-text-color: #ffffff;
+}