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

package/src/templates/angular/shared/base/base-list.component.ts.ejs

@@ -0,0 +1,507 @@
+import { Component, ViewChild, ElementRef, ChangeDetectorRef, DestroyRef, inject } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatDrawer } from '@angular/material/sidenav';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { Observable, of } from 'rxjs';
+import { catchError, finalize, map, switchMap, tap } from 'rxjs/operators';
+<%
+const fuseShared = !!preferences.fuse?.enabled;
+const confirmationDialogImport = fuseShared
+  ? "import { ConfirmationDialogComponent } from '@/app/domains/admin/modules/apps/shared/components/confirmation-dialog.component';"
+  : preferences.architecture?.centralizedSharedFolder
+    ? "import { ConfirmationDialogComponent } from '../components/confirmation-dialog.component';"
+    : "import { ConfirmationDialogComponent } from '../confirmation-dialog.component';";
+const typedConfirmImport = fuseShared || preferences.architecture?.centralizedSharedFolder
+  ? (fuseShared
+      ? "import { ConfirmWithInputDialogComponent } from '@/app/domains/admin/modules/apps/shared/components/confirm-with-input-dialog.component';"
+      : "import { ConfirmWithInputDialogComponent } from '../components/confirm-with-input-dialog.component';")
+  : '';
+%>
+<%- confirmationDialogImport %>
+<%- typedConfirmImport %>
+import dayjs from 'dayjs/esm';
+
+export type ParentDialogData = {
+  parentFilters?: { [key: string]: string | number };
+};
+
+import { FilterField, FILTER_OPERATOR_LIBRARY, FilterValueType, FilterChip } from './filter-types';
+
+export interface TableColumnPreference {
+  key: string;
+  label: string;
+  alwaysVisible?: boolean;
+  defaultHidden?: boolean;
+}
+
+export interface RowFlagOption {
+  key: string;
+  label: string;
+  iconClass: string;
+}
+
+@Component({
+  template: ''
+})
+export abstract class BaseListComponent<T extends { id?: number }> {
+  protected readonly cdr = inject(ChangeDetectorRef);
+  protected readonly dialog = inject(MatDialog);
+  protected readonly snackBar = inject(MatSnackBar);
+
+  @ViewChild(MatPaginator) paginator!: MatPaginator;
+  @ViewChild(MatSort) sort!: MatSort;
+  @ViewChild('filterDrawer') filterDrawer!: MatDrawer;
+  @ViewChild('formDrawer') formDrawer?: MatDrawer;
+  @ViewChild('listViewport') listViewport!: ElementRef<HTMLElement>;
+  @ViewChild('tableWrapper') tableWrapper!: ElementRef<HTMLElement>;
+
+  abstract entityNameKebab: string;
+  abstract allColumnPreferences: TableColumnPreference[];
+  abstract searchableColumns: string[];
+
+  // Data Loading (Must be implemented by child to call specific service)
+  abstract fetchExportData(filters: { [key: string]: string | number }, sort: string[], size: number): Observable<{ body: T[] | null }>;
+  abstract fetchExportTotal(filters: { [key: string]: string | number }, sort: string[]): Observable<number>;
+
+  viewMode: 'table' | 'card' = 'table';
+  private preferredViewMode: 'table' | 'card' = 'table';
+  private compactView = false;
+  private readonly viewDestroyRef = inject(DestroyRef);
+
+  protected restoreViewMode(): void {
+    this.preferredViewMode = this.viewMode;
+    try {
+      const saved = typeof localStorage === 'undefined' ? null : localStorage.getItem(this.storageKeyViewMode);
+      if (saved === 'table' || saved === 'card') this.preferredViewMode = saved;
+    } catch { /* Storage may be disabled. */ }
+    this.viewMode = this.preferredViewMode;
+  }
+
+  protected observeListWidth(): void {
+    const viewport = this.listViewport?.nativeElement;
+    if (!viewport) return;
+    const update = (width: number) => {
+      if (width <= 0) return;
+      this.compactView = width < <%= preferences.ui?.cardBreakpointPx || 640 %>;
+      this.viewMode = this.compactView ? 'card' : this.preferredViewMode;
+      this.cdr.markForCheck();
+    };
+    update(viewport.getBoundingClientRect().width);
+    if (typeof ResizeObserver !== 'undefined') {
+      const observer = new ResizeObserver(entries => update(entries[0].contentRect.width));
+      observer.observe(viewport);
+      this.viewDestroyRef.onDestroy(() => observer.disconnect());
+    } else if (typeof window !== 'undefined') {
+      const onResize = () => update(viewport.getBoundingClientRect().width);
+      window.addEventListener('resize', onResize);
+      this.viewDestroyRef.onDestroy(() => window.removeEventListener('resize', onResize));
+    }
+  }
+
+  onViewModeChange(mode: 'table' | 'card'): void {
+    this.preferredViewMode = mode;
+    this.viewMode = this.compactView ? 'card' : mode;
+    try {
+      if (typeof localStorage !== 'undefined') localStorage.setItem(this.storageKeyViewMode, mode);
+    } catch { /* Keep the selection for this session when storage is unavailable. */ }
+  }
+
+  formMode: 'sidebar' | 'page' = 'sidebar';
+  searchMode: 'field' | 'global' = 'field';
+  isLoading = false;
+  isExporting = false;
+  exportAfterFilter = false;
+  totalItems = 0;
+  itemsPerPage = 10;
+  
+  protected baseParentFilters: { [key: string]: string | number } = {};
+  protected activeFilters: { [key: string]: string } = {};
+
+  searchTerm: string = '';
+  searchBy: string = '';
+  pinnedIds: Set<number> = new Set<number>();
+  activeFlagRowId: number | null = null;
+  rowFlagColors: { [key: number]: string } = {};
+  isActionsShadowVisible = false;
+  displayedColumns: string[] = [];
+
+  readonly rowFlagOptions: RowFlagOption[] = [
+    { key: 'slate', label: 'Slate', iconClass: 'text-slate-400' },
+    { key: 'blue', label: 'Blue', iconClass: 'text-blue-500' },
+    { key: 'emerald', label: 'Green', iconClass: 'text-emerald-500' },
+    { key: 'amber', label: 'Amber', iconClass: 'text-amber-400' },
+    { key: 'rose', label: 'Rose', iconClass: 'text-rose-500' },
+    { key: 'violet', label: 'Violet', iconClass: 'text-violet-500' },
+  ];
+
+  get storageKeyPageSize(): string { return `${this.entityNameKebab}-page-size`; }
+  get storageKeyViewMode(): string { return `${this.entityNameKebab}-view-mode`; }
+  get storageKeySearchTerm(): string { return `${this.entityNameKebab}-search-term`; }
+  get storageKeySearchBy(): string { return `${this.entityNameKebab}-search-by`; }
+  get storageKeyPinned(): string { return `${this.entityNameKebab}-pinned`; }
+  get storageKeyFlags(): string { return `${this.entityNameKebab}-flags`; }
+  get columnPreferenceStorageKey(): string { return `${this.entityNameKebab}-list-column-preferences`; }
+
+  readonly trackRow = (index: number, row: T): number => row.id ?? index;
+
+  onTableScroll(): void {
+    if (!this.tableWrapper) return;
+    const target = this.tableWrapper.nativeElement;
+    const maxScroll = target.scrollWidth - target.clientWidth;
+    const nextState = maxScroll > 0 && target.scrollLeft < maxScroll - 2;
+    if (this.isActionsShadowVisible !== nextState) {
+      this.isActionsShadowVisible = nextState;
+      setTimeout(() => this.cdr.detectChanges());
+    }
+  }
+
+  getSortParameters(): string[] {
+    if (!this.sort || !this.sort.active || this.sort.direction === '') {
+      return ['id,asc'];
+    }
+    return [`${this.sort.active},${this.sort.direction}`];
+  }
+
+  isColumnVisible(columnKey: string): boolean {
+    return this.displayedColumns.includes(columnKey);
+  }
+
+  toggleColumn(columnKey: string): void {
+    const column = this.allColumnPreferences.find(item => item.key === columnKey);
+    if (!column || column.alwaysVisible) {
+      return;
+    }
+
+    if (this.isColumnVisible(columnKey)) {
+      this.displayedColumns = this.displayedColumns.filter(item => item !== columnKey);
+    } else {
+      const visibleColumnSet = new Set([...this.displayedColumns, columnKey]);
+      this.displayedColumns = this.allColumnPreferences
+        .filter(item => visibleColumnSet.has(item.key))
+        .map(item => item.key);
+    }
+    this.persistColumnPreferences();
+  }
+
+  resetColumnPreferences(): void {
+    this.displayedColumns = this.allColumnPreferences.filter(item => item.alwaysVisible || !item.defaultHidden).map(item => item.key);
+    this.persistColumnPreferences();
+  }
+
+  drop(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(this.displayedColumns, event.previousIndex, event.currentIndex);
+    this.persistColumnPreferences();
+  }
+
+  protected restoreColumnPreferences(): void {
+    const defaultColumns = this.allColumnPreferences.filter(item => item.alwaysVisible || !item.defaultHidden).map(item => item.key);
+    const saved = this.readSavedColumnPreferences();
+    if (saved === null) {
+      this.displayedColumns = defaultColumns;
+      return;
+    }
+
+    const savedColumnSet = new Set(saved);
+    this.displayedColumns = this.allColumnPreferences
+      .filter(item => item.alwaysVisible || savedColumnSet.has(item.key))
+      .map(item => item.key);
+  }
+
+  protected persistColumnPreferences(): void {
+    if (typeof localStorage === 'undefined') return;
+    const optionalColumns = this.allColumnPreferences
+      .filter(item => !item.alwaysVisible && this.displayedColumns.includes(item.key))
+      .map(item => item.key);
+    try { localStorage.setItem(this.columnPreferenceStorageKey, JSON.stringify(optionalColumns)); } catch { /* Storage may be disabled. */ }
+  }
+
+  private readSavedColumnPreferences(): string[] | null {
+    if (typeof localStorage === 'undefined') return null;
+    try {
+      const raw = localStorage.getItem(this.columnPreferenceStorageKey);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      return Array.isArray(parsed) ? parsed.filter(value => typeof value === 'string') : null;
+    } catch {
+      return null;
+    }
+  }
+
+  getColumnLabel(key: string): string {
+    const col = this.allColumnPreferences.find(item => item.key === key);
+    return col ? col.label : key;
+  }
+
+  highlightText(text: any, query: string): string {
+    if (!query || text === null || text === undefined) return text ? String(text) : '';
+    const escaped = String(text)
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#039;');
+    const regex = new RegExp(`(${this.escapeRegExp(query)})`, 'gi');
+    return escaped.replace(regex, '<span class="bg-yellow-100 font-semibold text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">$1</span>');
+  }
+
+  private escapeRegExp(string: string): string {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  protected loadSearchState(): void {
+    if (typeof localStorage === 'undefined') return;
+    
+    this.searchTerm = localStorage.getItem(this.storageKeySearchTerm) ?? '';
+    const savedSearchBy = localStorage.getItem(this.storageKeySearchBy);
+    this.searchBy = savedSearchBy && this.searchableColumns.includes(savedSearchBy) ? savedSearchBy : (this.searchableColumns[0] ?? '');
+    
+    try {
+      const pinned = localStorage.getItem(this.storageKeyPinned);
+      if (pinned) {
+        this.pinnedIds = new Set<number>(JSON.parse(pinned));
+      }
+    } catch {
+      this.pinnedIds = new Set<number>();
+    }
+
+    try {
+      const flags = localStorage.getItem(this.storageKeyFlags);
+      if (flags) {
+        const parsed = JSON.parse(flags);
+        this.rowFlagColors = parsed && typeof parsed === 'object' ? parsed : {};
+      }
+    } catch {
+      this.rowFlagColors = {};
+    }
+
+    this.applySearchFilters();
+  }
+
+  protected applySearchFilters(): void {
+    this.searchableColumns.forEach(col => {
+      delete this.activeFilters[`${col}.contains`];
+    });
+    delete this.activeFilters['query'];
+
+    if (!this.searchTerm) {
+      return;
+    }
+
+    if (this.searchMode === 'global') {
+      this.activeFilters['query'] = this.searchTerm;
+      return;
+    }
+
+    if (this.searchBy) {
+      this.activeFilters[`${this.searchBy}.contains`] = this.searchTerm;
+    }
+  }
+
+  protected sortRowsForDisplay(rows: T[]): T[] {
+    return [...rows].sort((left, right) => {
+      const leftPinned = this.isPinned(left.id);
+      const rightPinned = this.isPinned(right.id);
+      if (leftPinned === rightPinned) {
+        return 0;
+      }
+      return leftPinned ? -1 : 1;
+    });
+  }
+
+  togglePin(element: T): void {
+    if (element.id === undefined) return;
+    if (this.pinnedIds.has(element.id)) {
+      this.pinnedIds.delete(element.id);
+    } else {
+      this.pinnedIds.add(element.id);
+    }
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.storageKeyPinned, JSON.stringify(Array.from(this.pinnedIds)));
+    }
+    this.cdr.markForCheck();
+  }
+
+  isPinned(id?: number): boolean {
+    return id !== undefined && this.pinnedIds.has(id);
+  }
+
+  setFlagMenuRow(element: T): void {
+    this.activeFlagRowId = element.id ?? null;
+  }
+
+  setFlagColor(colorKey: string | null): void {
+    if (this.activeFlagRowId === null) return;
+
+    if (colorKey) {
+      this.rowFlagColors[this.activeFlagRowId] = colorKey;
+    } else {
+      delete this.rowFlagColors[this.activeFlagRowId];
+    }
+
+    if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(this.storageKeyFlags, JSON.stringify(this.rowFlagColors));
+    }
+    this.activeFlagRowId = null;
+    this.cdr.markForCheck();
+  }
+
+  getFlagColor(id?: number): string | null {
+    if (id === undefined) return null;
+    return this.rowFlagColors[id] ?? null;
+  }
+
+  getFlagClass(id?: number): string {
+    const colorKey = this.getFlagColor(id);
+    if (!colorKey) return 'text-neutral-300';
+    return this.rowFlagOptions.find(option => option.key === colorKey)?.iconClass ?? 'text-neutral-300';
+  }
+
+  getRowClass(element: T & { isActive?: boolean }): string {
+    let classes = '';
+    const colorKey = this.getFlagColor(element.id);
+    if (colorKey) {
+      classes = 'has-flag ';
+      switch (colorKey) {
+        case 'slate': classes += 'bg-slate-50/80 dark:bg-slate-900/20 hover:bg-slate-100/80 dark:hover:bg-slate-950/30'; break;
+        case 'blue': classes += 'bg-blue-50/80 dark:bg-blue-900/20 hover:bg-blue-100/80 dark:hover:bg-blue-950/30'; break;
+        case 'emerald': classes += 'bg-emerald-50/80 dark:bg-emerald-900/20 hover:bg-emerald-100/80 dark:hover:bg-emerald-950/30'; break;
+        case 'amber': classes += 'bg-amber-50/80 dark:bg-amber-900/20 hover:bg-amber-100/80 dark:hover:bg-amber-950/30'; break;
+        case 'rose': classes += 'bg-rose-50/80 dark:bg-rose-900/20 hover:bg-rose-100/80 dark:hover:bg-rose-950/30'; break;
+        case 'violet': classes += 'bg-violet-50/80 dark:bg-violet-900/20 hover:bg-violet-100/80 dark:hover:bg-violet-950/30'; break;
+      }
+    }
+    if (element.isActive === false) {
+      classes += ' opacity-50';
+    }
+    return classes;
+  }
+
+  getStickyClass(element: T): string {
+    const colorKey = this.getFlagColor(element.id);
+    if (!colorKey) return 'sticky-actions-default';
+    switch (colorKey) {
+      case 'slate': return '!bg-slate-50/90 dark:!bg-slate-950/40 group-hover:!bg-slate-100/90 dark:group-hover:!bg-slate-900/50';
+      case 'blue': return '!bg-blue-50/90 dark:!bg-blue-950/40 group-hover:!bg-blue-100/90 dark:group-hover:!bg-blue-900/50';
+      case 'emerald': return '!bg-emerald-50/90 dark:!bg-emerald-950/40 group-hover:!bg-emerald-100/90 dark:group-hover:!bg-emerald-900/50';
+      case 'amber': return '!bg-amber-50/90 dark:!bg-amber-950/40 group-hover:!bg-amber-100/90 dark:group-hover:!bg-amber-900/50';
+      case 'rose': return '!bg-rose-50/90 dark:!bg-rose-950/40 group-hover:!bg-rose-100/90 dark:group-hover:!bg-rose-900/50';
+      case 'violet': return '!bg-violet-50/90 dark:!bg-violet-950/40 group-hover:!bg-violet-100/90 dark:group-hover:!bg-violet-900/50';
+      default: return 'sticky-actions-default';
+    }
+  }
+
+  exportFilteredData(): void {
+    this.exportAfterFilter = true;
+    this.filterDrawer?.open();
+    this.snackBar.open('Please apply filters in the drawer to export the filtered data.', 'Dismiss', {
+      duration: 4000,
+    });
+  }
+
+  exportAllData(): void {
+    this.exportDataForFilters({});
+  }
+
+  protected exportDataForFilters(filters: { [key: string]: string | number }): void {
+    this.isExporting = true;
+    this.fetchExportTotal(filters, this.getSortParameters()).pipe(
+      switchMap(total => {
+        const size = total > 0 ? total : 1000;
+        return this.fetchExportData(filters, this.getSortParameters(), size);
+      }),
+      tap(response => {
+        this.downloadCsv(response.body ?? []);
+      }),
+      catchError(() => of(null)),
+      finalize(() => {
+        this.isExporting = false;
+        this.cdr.markForCheck();
+      })
+    ).subscribe();
+  }
+
+  private downloadCsv(rows: T[]): void {
+    const exportableColumns = this.allColumnPreferences.filter(
+      item =>
+        this.displayedColumns.includes(item.key) &&
+        !item.key.startsWith('actions') &&
+        item.key !== 'state'
+    );
+    const header = exportableColumns.map(item => item.label);
+    const dataRows = rows.map(row =>
+      exportableColumns.map(column => this.toCsvValue(this.resolveColumnValue(row, column.key)))
+    );
+    const csvContent = [header, ...dataRows]
+      .map(columns => columns.map(value => this.escapeCsv(value)).join(','))
+      .join('\n');
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${this.entityNameKebab}-` + dayjs().format('YYYY-MM-DD-HHmmss') + '.csv';
+    link.style.display = 'none';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }
+
+  private resolveColumnValue(row: T, columnKey: string): string {
+    const value = (row as { [key: string]: unknown })[columnKey];
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (dayjs.isDayjs(value)) {
+      return value.toISOString();
+    }
+    if (value instanceof Date) {
+      return value.toISOString();
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value);
+    }
+    return String(value);
+  }
+
+  private toCsvValue(value: string): string {
+    return value ?? '';
+  }
+
+  private escapeCsv(value: string): string {
+    const normalizedValue = value.replace(/"/g, '""');
+    return `"${normalizedValue}"`;
+  }
+
+  protected openConfirmationDialog(data: {
+    title: string;
+    message: string;
+    color: 'blue' | 'amber' | 'rose' | 'violet' | 'emerald';
+  }) {
+    return this.dialog.open(ConfirmationDialogComponent, {
+      width: '100%',
+      maxWidth: '32rem',
+      panelClass: 'tw-confirmation-dialog-panel',
+      data,
+    }).afterClosed();
+  }
+<% if (preferences.fuse?.enabled || preferences.architecture?.centralizedSharedFolder) { %>
+
+  protected openTypedConfirmationDialog(data: {
+    title: string;
+    message: string;
+    confirmText: string;
+    color: 'blue' | 'amber' | 'rose' | 'violet' | 'emerald';
+    inputLabel?: string;
+  }) {
+    return this.dialog.open(ConfirmWithInputDialogComponent, {
+      width: '100%',
+      maxWidth: '32rem',
+      panelClass: 'tw-confirmation-dialog-panel',
+      data,
+    }).afterClosed();
+  }
+<% } %>
+}

package/src/templates/angular/shared/base/filter-types.ts.ejs

@@ -0,0 +1,55 @@
+export type FilterValueType = 'string' | 'number' | 'date' | 'boolean' | 'enum';
+
+export interface FilterFieldOperator {
+  key: string;
+  label: string;
+  requiresValue: boolean;
+  valueType: FilterValueType;
+}
+
+export interface FilterField {
+  key: string;
+  label: string;
+  valueType: FilterValueType;
+  operators: FilterFieldOperator[];
+  rawFieldType?: string;
+  enumOptionsKey?: string;
+}
+
+export interface FilterChip {
+  key: string;
+  label: string;
+  colorClass: string;
+}
+
+export const FILTER_OPERATOR_LIBRARY: Record<FilterValueType, FilterFieldOperator[]> = {
+  string: [
+    { key: 'contains', label: 'Contains', requiresValue: true, valueType: 'string' },
+    { key: 'equals', label: 'Equals', requiresValue: true, valueType: 'string' },
+    { key: 'notEquals', label: 'Not Equals', requiresValue: true, valueType: 'string' },
+    { key: 'specified', label: 'Is Specified', requiresValue: true, valueType: 'boolean' },
+  ],
+  number: [
+    { key: 'equals', label: 'Equals', requiresValue: true, valueType: 'number' },
+    { key: 'greaterThan', label: 'Greater Than', requiresValue: true, valueType: 'number' },
+    { key: 'greaterThanOrEqual', label: 'Greater Than Or Equal', requiresValue: true, valueType: 'number' },
+    { key: 'lessThan', label: 'Less Than', requiresValue: true, valueType: 'number' },
+    { key: 'lessThanOrEqual', label: 'Less Than Or Equal', requiresValue: true, valueType: 'number' },
+    { key: 'specified', label: 'Is Specified', requiresValue: true, valueType: 'boolean' },
+  ],
+  date: [
+    { key: 'equals', label: 'On', requiresValue: true, valueType: 'date' },
+    { key: 'greaterThanOrEqual', label: 'After Or Equal', requiresValue: true, valueType: 'date' },
+    { key: 'lessThanOrEqual', label: 'Before Or Equal', requiresValue: true, valueType: 'date' },
+    { key: 'specified', label: 'Is Specified', requiresValue: true, valueType: 'boolean' },
+  ],
+  boolean: [
+    { key: 'equals', label: 'Equals', requiresValue: true, valueType: 'boolean' },
+    { key: 'specified', label: 'Is Specified', requiresValue: true, valueType: 'boolean' },
+  ],
+  enum: [
+    { key: 'equals', label: 'Equals', requiresValue: true, valueType: 'enum' },
+    { key: 'notEquals', label: 'Not Equals', requiresValue: true, valueType: 'enum' },
+    { key: 'specified', label: 'Is Specified', requiresValue: true, valueType: 'boolean' },
+  ],
+};

package/src/templates/angular/shared/base/input-format.directive.ts.ejs

@@ -0,0 +1,47 @@
+import { Directive, ElementRef, Input, forwardRef, inject } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { InputFormat, formatInput } from './input-format';
+
+/** Custom text accessor keeps the DOM, reactive form and selection in agreement. */
+@Directive({
+  selector: 'input[appInputFormat], textarea[appInputFormat]',
+  standalone: true,
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputFormatDirective), multi: true }],
+  host: {
+    '(input)': 'handleInput()', '(blur)': 'onTouched()',
+    '(compositionstart)': 'composing = true', '(compositionend)': 'endComposition()',
+  },
+})
+export class InputFormatDirective implements ControlValueAccessor {
+  @Input() appInputFormat: InputFormat = 'none';
+  private readonly element = inject<ElementRef<HTMLInputElement | HTMLTextAreaElement>>(ElementRef);
+  composing = false;
+  onChange: (value: string) => void = () => {};
+  onTouched: () => void = () => {};
+
+  writeValue(value: unknown): void {
+    this.element.nativeElement.value = value == null ? '' : formatInput(String(value), this.appInputFormat);
+  }
+  registerOnChange(callback: (value: string) => void): void { this.onChange = callback; }
+  registerOnTouched(callback: () => void): void { this.onTouched = callback; }
+  setDisabledState(disabled: boolean): void { this.element.nativeElement.disabled = disabled; }
+  endComposition(): void { this.composing = false; this.handleInput(); }
+
+  handleInput(): void {
+    if (this.composing) return;
+    const input = this.element.nativeElement;
+    const original = input.value;
+    const formatted = formatInput(original, this.appInputFormat);
+    if (formatted !== original) {
+      const start = input.selectionStart;
+      const end = input.selectionEnd;
+      const direction = input.selectionDirection;
+      input.value = formatted;
+      if (start !== null && end !== null) {
+        input.setSelectionRange(formatInput(original.slice(0, start), this.appInputFormat).length,
+          formatInput(original.slice(0, end), this.appInputFormat).length, direction || 'none');
+      }
+    }
+    this.onChange(formatted);
+  }
+}

package/src/templates/angular/shared/base/input-format.ts.ejs

@@ -0,0 +1,15 @@
+export type InputFormat = 'uppercase' | 'lowercase' | 'none';
+export type FieldInputSettings = Readonly<Record<string, { readonly inputFormat: InputFormat }>>;
+
+export function formatInput(value: string, format: InputFormat): string {
+  return format === 'uppercase' ? value.toUpperCase() : format === 'lowercase' ? value.toLowerCase() : value;
+}
+
+/** Copy only: never mutate a loaded entity or add absent fields to a partial payload. */
+export function normalizeInputFields<T extends object>(entity: T, fields: FieldInputSettings): T {
+  const copy = { ...entity } as Record<string, unknown>;
+  for (const [name, settings] of Object.entries(fields)) {
+    if (typeof copy[name] === 'string') copy[name] = formatInput(copy[name], settings.inputFormat);
+  }
+  return copy as T;
+}