ng-comps 0.2.0 → 1.0.0

package/src/app/components/datepicker/mf-datepicker.component.ts

@@ -0,0 +1,233 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+} from '@angular/forms';
+import { ErrorStateMatcher } from '@angular/material/core';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from '../../a11y';
+
+export type MfDatepickerSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Selector de fecha de la librería ng-comps.
+ * Envuelve Angular Material `mat-datepicker` y expone una API uniforme
+ * con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-datepicker',
+  imports: [
+    MatDatepickerModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatNativeDateModule,
+    MatIconModule,
+  ],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MfDatepickerComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [matDatepicker]="picker"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [min]="min()"
+        [max]="max()"
+        [value]="internalValue()"
+        [errorStateMatcher]="errorStateMatcher"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-labelledby]="ariaLabelledby() || null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-invalid]="isInvalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
+        (dateChange)="onDateChange($event)"
+        (blur)="onBlur()"
+      />
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="toggleAriaLabel()"
+      >
+        <mat-icon matDatepickerToggleIcon aria-hidden="true">
+          calendar_month
+        </mat-icon>
+      </mat-datepicker-toggle>
+      <mat-datepicker #picker />
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-datepicker__error" [attr.id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `,
+  styleUrl: './mf-datepicker.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfDatepickerComponent implements ControlValueAccessor {
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly ngControl = inject(NgControl, { self: true, optional: true });
+  private readonly generatedId = createUniqueId('mf-datepicker');
+  private readonly disabledFromForm = signal(false);
+  protected readonly internalValue = signal<Date | null>(null);
+  private onControlChange: (value: Date | null) => void = () => undefined;
+  private onControlTouched: () => void = () => undefined;
+  readonly errorStateMatcher: ErrorStateMatcher = {
+    isErrorState: (control) =>
+      Boolean(
+        this.error() || (control?.invalid && (control.touched || control.dirty)),
+      ),
+  };
+
+  /** ID del control */
+  readonly id = input<string | undefined>(undefined);
+  /** Etiqueta flotante del campo */
+  readonly label = input<string | undefined>(undefined);
+  /** Etiqueta accesible alternativa cuando no existe label visible */
+  readonly ariaLabel = input<string | undefined>(undefined);
+  /** Referencia externa a elementos que etiquetan el control */
+  readonly ariaLabelledby = input<string | undefined>(undefined);
+  /** Referencia externa a elementos descriptivos adicionales */
+  readonly ariaDescribedby = input<string | undefined>(undefined);
+  /** Placeholder del input */
+  readonly placeholder = input('DD/MM/YYYY');
+  /** Tamaño del campo */
+  readonly size = input<MfDatepickerSize>('md');
+  /** Deshabilitado */
+  readonly disabled = input(false);
+  /** Requerido */
+  readonly required = input(false);
+  /** Valor inicial del datepicker */
+  readonly value = input<Date | null>(null);
+  /** Texto de ayuda debajo del campo */
+  readonly hint = input<string | undefined>(undefined);
+  /** Mensaje de error */
+  readonly error = input<string | undefined>(undefined);
+  /** Fecha mínima seleccionable */
+  readonly min = input<Date | null>(null);
+  /** Fecha máxima seleccionable */
+  readonly max = input<Date | null>(null);
+  /** Ancho completo */
+  readonly fullWidth = input(false);
+  /** Etiqueta accesible del botón para abrir el calendario */
+  readonly toggleAriaLabel = input('Abrir calendario');
+
+  readonly mfChange = output<Date | null>();
+  readonly mfBlur = output<void>();
+
+  constructor() {
+    effect(() => {
+      this.internalValue.set(this.value());
+    });
+
+    effect(() => {
+      if (
+        !hasAccessibleName(
+          this.label(),
+          this.ariaLabel(),
+          this.ariaLabelledby(),
+        )
+      ) {
+        warnInDev(
+          'mf-datepicker requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.',
+        );
+      }
+    });
+  }
+
+  readonly controlId = computed(() => this.id() ?? this.generatedId);
+  readonly hintId = computed(() =>
+    this.hint() ? `${this.controlId()}-hint` : null,
+  );
+  readonly errorId = computed(() =>
+    this.error() ? `${this.controlId()}-error` : null,
+  );
+  readonly describedBy = computed(() =>
+    mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()),
+  );
+  readonly resolvedAriaLabel = computed(() =>
+    this.label() ? null : this.ariaLabel() ?? null,
+  );
+  readonly isDisabled = computed(
+    () => this.disabled() || this.disabledFromForm(),
+  );
+
+  readonly hostClasses = computed(() => {
+    const classes = ['mf-datepicker', `mf-datepicker--${this.size()}`];
+    if (this.fullWidth()) classes.push('mf-datepicker--full');
+    if (this.error()) classes.push('mf-datepicker--error');
+    return classes.join(' ');
+  });
+
+  writeValue(value: Date | null): void {
+    this.internalValue.set(value);
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: Date | null) => void): void {
+    this.onControlChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onControlTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabledFromForm.set(isDisabled);
+    this.cdr.markForCheck();
+  }
+
+  isInvalid(): boolean {
+    const control = this.ngControl?.control;
+    return Boolean(
+      this.error() || (control?.invalid && (control.touched || control.dirty)),
+    );
+  }
+
+  onDateChange(event: { value: Date | null }): void {
+    this.internalValue.set(event.value);
+    this.onControlChange(event.value);
+    this.onControlTouched();
+    this.mfChange.emit(event.value);
+  }
+
+  onBlur(): void {
+    this.onControlTouched();
+    this.mfBlur.emit();
+  }
+}

package/src/app/components/dialog/index.ts

@@ -0,0 +1,3 @@
+export { MfDialogComponent } from './mf-dialog.component';
+export { MfDialogService } from './mf-dialog.service';
+export type { MfDialogOpenConfig } from './mf-dialog.service';

package/src/app/components/dialog/mf-dialog.component.css

@@ -0,0 +1,73 @@
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-dialog {
+  font-family: var(--mf-font-base);
+  min-width: 360px;
+  max-width: 560px;
+}
+
+/* ── Header ────────────────────────────────────────────────────── */
+.mf-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mf-space-3);
+  padding: var(--mf-space-6) var(--mf-space-6) var(--mf-space-3);
+}
+
+.mf-dialog__header--compact {
+  padding-bottom: 0;
+}
+
+.mf-dialog__title {
+  font-family: var(--mf-font-display);
+  font-size: var(--mf-text-xl);
+  font-weight: var(--mf-weight-bold);
+  color: var(--mf-color-on-surface);
+  margin: 0;
+  line-height: var(--mf-leading-tight);
+}
+
+/* ── Close button ─────────────────────────────────────────────── */
+.mf-dialog__close {
+  flex-shrink: 0;
+  color: var(--mf-color-neutral-400);
+  transition:
+    background-color var(--mf-duration-fast) var(--mf-ease-standard),
+    color var(--mf-duration-fast) var(--mf-ease-standard);
+}
+
+.mf-dialog__close:hover {
+  background-color: var(--mf-color-neutral-100);
+  color: var(--mf-color-on-surface);
+}
+
+.mf-dialog__close .mat-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+}
+
+/* ── Body ──────────────────────────────────────────────────────── */
+.mf-dialog__body {
+  padding: 0 var(--mf-space-6);
+}
+
+.mf-dialog__message {
+  font-size: var(--mf-text-sm);
+  color: var(--mf-color-neutral-600);
+  line-height: var(--mf-leading-normal);
+  margin: 0;
+}
+
+/* ── Content ───────────────────────────────────────────────────── */
+.mf-dialog__content {
+  padding: var(--mf-space-3) var(--mf-space-6);
+}
+
+.mf-dialog__content:empty {
+  display: none;
+}
+
+/* ── Actions (footer) ─────────────────────────────────────────── */
+/* La regla de gap está en styles.css (global) para que aplique también
+   al contenido proyectado, que escapa al scope de ViewEncapsulation. */

package/src/app/components/dialog/mf-dialog.component.ts

@@ -0,0 +1,160 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  output,
+} from '@angular/core';
+import { MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from '../../a11y';
+
+/**
+ * Contenido de diálogo de la librería ng-comps.
+ * Envuelve las directivas de Angular Material `mat-dialog-*` y expone
+ * una API uniforme con look and feel de marca.
+ *
+ * Uso:
+ * ```
+ * dialog.open(MfDialogComponent, {
+ *   data: { title: 'Confirmar', message: '¿Deseas continuar?' }
+ * });
+ * ```
+ */
+@Component({
+  selector: 'mf-dialog',
+  imports: [MatDialogModule, MatIconModule],
+  template: `
+    <div
+      [class]="hostClasses()"
+      [attr.role]="role()"
+      aria-modal="true"
+      [attr.aria-label]="resolvedAriaLabel()"
+      [attr.aria-labelledby]="computedLabelledby()"
+      [attr.aria-describedby]="computedDescribedby()"
+    >
+      @if (title()) {
+        <h2 mat-dialog-title class="mf-dialog__header" [id]="titleId()">
+          <span class="mf-dialog__title">{{ title() }}</span>
+          @if (showClose()) {
+            <button
+              mat-icon-button
+              class="mf-dialog__close"
+              (click)="onClose()"
+              [attr.aria-label]="closeButtonLabel()"
+              type="button"
+            >
+              <mat-icon aria-hidden="true">close</mat-icon>
+            </button>
+          }
+        </h2>
+      } @else if (showClose()) {
+        <div class="mf-dialog__header mf-dialog__header--compact">
+          <span></span>
+          <button
+            mat-icon-button
+            class="mf-dialog__close"
+            (click)="onClose()"
+            [attr.aria-label]="closeButtonLabel()"
+            type="button"
+          >
+            <mat-icon aria-hidden="true">close</mat-icon>
+          </button>
+        </div>
+      }
+
+      <div mat-dialog-content class="mf-dialog__content">
+        @if (message()) {
+          <p class="mf-dialog__message" [id]="descriptionId()">{{ message() }}</p>
+        }
+
+        <ng-content />
+      </div>
+
+      @if (showActions()) {
+        <div mat-dialog-actions class="mf-dialog__actions">
+          <ng-content select="[mfDialogActions]" />
+        </div>
+      }
+    </div>
+  `,
+  styleUrl: './mf-dialog.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfDialogComponent {
+  private readonly dialogRef = inject(MatDialogRef<MfDialogComponent>, {
+    optional: true,
+  });
+  private readonly generatedId = createUniqueId('mf-dialog');
+
+  /** ID base del diálogo */
+  readonly id = input<string | undefined>(undefined);
+  /** Título del diálogo */
+  readonly title = input<string | undefined>(undefined);
+  /** Etiqueta accesible alternativa cuando no existe título visible */
+  readonly ariaLabel = input<string | undefined>(undefined);
+  /** Referencia externa a elementos que etiquetan el diálogo */
+  readonly ariaLabelledby = input<string | undefined>(undefined);
+  /** Referencia externa a elementos descriptivos adicionales */
+  readonly ariaDescribedby = input<string | undefined>(undefined);
+  /** Mensaje descriptivo */
+  readonly message = input<string | undefined>(undefined);
+  /** Mostrar botón de cerrar */
+  readonly showClose = input(true);
+  /** Mostrar área de acciones (footer) */
+  readonly showActions = input(true);
+  /** Rol del diálogo */
+  readonly role = input<'dialog' | 'alertdialog'>('dialog');
+  /** Etiqueta accesible del botón de cierre */
+  readonly closeButtonLabel = input('Cerrar diálogo');
+
+  readonly mfClose = output<void>();
+
+  constructor() {
+    effect(() => {
+      if (
+        !hasAccessibleName(
+          this.title(),
+          this.ariaLabel(),
+          this.ariaLabelledby(),
+        )
+      ) {
+        warnInDev(
+          'mf-dialog requiere `title`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.',
+        );
+      }
+    });
+  }
+
+  readonly dialogId = computed(() => this.id() ?? this.generatedId);
+  readonly titleId = computed(() => `${this.dialogId()}-title`);
+  readonly descriptionId = computed(() => `${this.dialogId()}-description`);
+  readonly computedLabelledby = computed(() =>
+    mergeAriaIds(
+      this.ariaLabelledby(),
+      this.title() ? this.titleId() : null,
+    ),
+  );
+  readonly computedDescribedby = computed(() =>
+    mergeAriaIds(
+      this.ariaDescribedby(),
+      this.message() ? this.descriptionId() : null,
+    ),
+  );
+  readonly resolvedAriaLabel = computed(() =>
+    this.title() ? null : this.ariaLabel() ?? null,
+  );
+  readonly hostClasses = computed(() => 'mf-dialog');
+
+  onClose(): void {
+    this.mfClose.emit();
+    this.dialogRef?.close();
+  }
+}

package/src/app/components/dialog/mf-dialog.service.spec.ts

@@ -0,0 +1,61 @@
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { MfDialogService } from './mf-dialog.service';
+
+describe('MfDialogService', () => {
+  let service: MfDialogService;
+  let dialogSpy: { open: ReturnType<typeof vi.fn> };
+
+  beforeEach(() => {
+    dialogSpy = {
+      open: vi.fn().mockReturnValue({}),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        MfDialogService,
+        { provide: MatDialog, useValue: dialogSpy },
+      ],
+    });
+
+    service = TestBed.inject(MfDialogService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should apply safe defaults for focus, role and panel class', () => {
+    class DialogContentComponent {}
+
+    service.open(DialogContentComponent, {
+      ariaLabel: 'Eliminar proyecto',
+    });
+
+    expect(dialogSpy.open).toHaveBeenCalledWith(
+      DialogContentComponent,
+      expect.objectContaining({
+        role: 'dialog',
+        autoFocus: 'first-tabbable',
+        restoreFocus: true,
+        ariaLabel: 'Eliminar proyecto',
+        panelClass: ['mf-dialog-panel'],
+      }),
+    );
+  });
+
+  it('should merge custom panel classes with the base dialog class', () => {
+    class DialogContentComponent {}
+
+    service.open(DialogContentComponent, {
+      panelClass: ['custom-panel', 'danger-panel'],
+    });
+
+    expect(dialogSpy.open).toHaveBeenCalledWith(
+      DialogContentComponent,
+      expect.objectContaining({
+        panelClass: ['mf-dialog-panel', 'custom-panel', 'danger-panel'],
+      }),
+    );
+  });
+});

package/src/app/components/dialog/mf-dialog.service.ts

@@ -0,0 +1,52 @@
+import { Injectable, TemplateRef, Type, inject } from '@angular/core';
+import {
+  DialogRole,
+  MatDialog,
+  MatDialogConfig,
+  MatDialogRef,
+} from '@angular/material/dialog';
+
+export interface MfDialogOpenConfig<D = unknown>
+  extends Omit<
+    MatDialogConfig<D>,
+    | 'ariaDescribedBy'
+    | 'ariaLabel'
+    | 'ariaLabelledBy'
+    | 'autoFocus'
+    | 'panelClass'
+    | 'restoreFocus'
+    | 'role'
+  > {
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  ariaDescribedby?: string;
+  autoFocus?: MatDialogConfig<D>['autoFocus'];
+  panelClass?: string | string[];
+  restoreFocus?: boolean;
+  role?: DialogRole;
+}
+
+@Injectable({ providedIn: 'root' })
+export class MfDialogService {
+  private readonly dialog = inject(MatDialog);
+
+  open<T, D = unknown, R = unknown>(
+    component: Type<T> | TemplateRef<T>,
+    config: MfDialogOpenConfig<D> = {},
+  ): MatDialogRef<T, R> {
+    const panelClass = Array.isArray(config.panelClass)
+      ? ['mf-dialog-panel', ...config.panelClass]
+      : ['mf-dialog-panel', ...(config.panelClass ? [config.panelClass] : [])];
+
+    return this.dialog.open(component, {
+      ...config,
+      role: config.role ?? 'dialog',
+      autoFocus: config.autoFocus ?? 'first-tabbable',
+      restoreFocus: config.restoreFocus ?? true,
+      ariaLabel: config.ariaLabel,
+      ariaLabelledBy: config.ariaLabelledby,
+      ariaDescribedBy: config.ariaDescribedby,
+      panelClass,
+    });
+  }
+}

package/src/app/components/divider/index.ts

@@ -0,0 +1,2 @@
+export { MfDividerComponent } from './mf-divider.component';
+export type { MfDividerVariant } from './mf-divider.component';

package/src/app/components/divider/mf-divider.component.css

@@ -0,0 +1,38 @@
+:host {
+  display: block;
+}
+
+:host:has(.mf-divider--vertical) {
+  display: inline-block;
+  height: 100%;
+}
+
+.mf-divider .mat-divider {
+  border-top-color: var(--mf-color-border) !important;
+}
+
+.mf-divider--vertical .mat-divider {
+  border-left-color: var(--mf-color-border) !important;
+}
+
+/* ── Middle inset ─────────────────────────────────────────────── */
+.mf-divider--middle .mat-divider {
+  margin-left: var(--mf-space-4) !important;
+  margin-right: var(--mf-space-4) !important;
+}
+
+/* ── Spacing ──────────────────────────────────────────────────── */
+.mf-divider--spacing-sm {
+  padding-top: var(--mf-space-2);
+  padding-bottom: var(--mf-space-2);
+}
+
+.mf-divider--spacing-md {
+  padding-top: var(--mf-space-4);
+  padding-bottom: var(--mf-space-4);
+}
+
+.mf-divider--spacing-lg {
+  padding-top: var(--mf-space-6);
+  padding-bottom: var(--mf-space-6);
+}

package/src/app/components/divider/mf-divider.component.spec.ts

@@ -0,0 +1,40 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfDividerComponent } from './mf-divider.component';
+
+describe('MfDividerComponent', () => {
+  let fixture: ComponentFixture<MfDividerComponent>;
+  let component: MfDividerComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfDividerComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfDividerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render mat-divider', () => {
+    const divider = fixture.nativeElement.querySelector('mat-divider');
+    expect(divider).toBeTruthy();
+  });
+
+  it('should apply full variant by default', () => {
+    expect(component.hostClasses()).toContain('mf-divider--full');
+  });
+
+  it('should compute inset value for inset variant', () => {
+    fixture.componentRef.setInput('variant', 'inset');
+    expect(component.insetValue()).toBe(true);
+  });
+
+  it('should apply vertical class when vertical', () => {
+    fixture.componentRef.setInput('vertical', true);
+    expect(component.hostClasses()).toContain('mf-divider--vertical');
+  });
+});