ng-comps 1.0.2 → 2.0.0

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

@@ -1,233 +0,0 @@
-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('Open calendar');
-
-  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

@@ -1,3 +0,0 @@
-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

@@ -1,73 +0,0 @@
-/* ── 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

@@ -1,160 +0,0 @@
-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('Close dialog');
-
-  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

@@ -1,61 +0,0 @@
-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: 'Delete project',
-    });
-
-    expect(dialogSpy.open).toHaveBeenCalledWith(
-      DialogContentComponent,
-      expect.objectContaining({
-        role: 'dialog',
-        autoFocus: 'first-tabbable',
-        restoreFocus: true,
-        ariaLabel: 'Delete project',
-        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

@@ -1,52 +0,0 @@
-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

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

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

@@ -1,38 +0,0 @@
-: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

@@ -1,40 +0,0 @@
-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');
-  });
-});