ng-comps 0.2.0 → 1.0.0

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

@@ -0,0 +1,217 @@
+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 { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatIconModule } from '@angular/material/icon';
+import {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from '../../a11y';
+
+export type MfInputSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Campo de texto de la librería ng-comps.
+ * Envuelve Angular Material `mat-form-field` + `matInput`
+ * y expone una API uniforme con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-input',
+  imports: [MatFormFieldModule, MatInputModule, MatIconModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MfInputComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      @if (leadingIcon()) {
+        <mat-icon matPrefix aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [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"
+        (input)="onInput($event)"
+        (blur)="onBlur()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-input__error" [attr.id]="errorId()" role="alert">{{ error() }}</p>
+    }
+  `,
+  styleUrl: './mf-input.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfInputComponent implements ControlValueAccessor {
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly ngControl = inject(NgControl, { self: true, optional: true });
+  private readonly generatedId = createUniqueId('mf-input');
+  private readonly disabledFromForm = signal(false);
+  protected readonly internalValue = signal('');
+  private onControlChange: (value: string) => 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('');
+  /** Tipo de input HTML */
+  readonly type = input<
+    'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url'
+  >('text');
+  /** Tamaño del campo */
+  readonly size = input<MfInputSize>('md');
+  /** Valor actual del campo */
+  readonly value = input('');
+  /** Deshabilitado */
+  readonly disabled = input(false);
+  /** Solo lectura */
+  readonly readonly = input(false);
+  /** Requerido */
+  readonly required = input(false);
+  /** Texto de ayuda debajo del campo */
+  readonly hint = input<string | undefined>(undefined);
+  /** Mensaje de error */
+  readonly error = input<string | undefined>(undefined);
+  /** Icono al inicio */
+  readonly leadingIcon = input<string | undefined>(undefined);
+  /** Icono al final */
+  readonly trailingIcon = input<string | undefined>(undefined);
+  /** Ancho completo */
+  readonly fullWidth = input(false);
+
+  readonly mfInput = output<string>();
+  readonly mfBlur = output<void>();
+
+  constructor() {
+    effect(() => {
+      this.internalValue.set(this.value());
+    });
+
+    effect(() => {
+      if (
+        !hasAccessibleName(
+          this.label(),
+          this.ariaLabel(),
+          this.ariaLabelledby(),
+        )
+      ) {
+        warnInDev(
+          'mf-input 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-input', `mf-input--${this.size()}`];
+    if (this.fullWidth()) classes.push('mf-input--full');
+    if (this.error()) classes.push('mf-input--error');
+    return classes.join(' ');
+  });
+
+  writeValue(value: string | null): void {
+    this.internalValue.set(value ?? '');
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: string) => 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)),
+    );
+  }
+
+  onInput(event: Event): void {
+    const target = event.target as HTMLInputElement;
+    this.internalValue.set(target.value);
+    this.onControlChange(target.value);
+    this.mfInput.emit(target.value);
+  }
+
+  onBlur(): void {
+    this.onControlTouched();
+    this.mfBlur.emit();
+  }
+}

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

@@ -0,0 +1,2 @@
+export { MfMenuComponent } from './mf-menu.component';
+export type { MfMenuItem } from './mf-menu.component';

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

@@ -0,0 +1,31 @@
+:host {
+  display: inline-block;
+}
+
+.mf-menu__trigger {
+  color: var(--mf-color-neutral-600) !important;
+}
+
+.mf-menu__trigger:hover {
+  color: var(--mf-color-brand) !important;
+}
+
+.mf-menu .mat-mdc-menu-panel {
+  border-radius: var(--mf-radius-md) !important;
+  box-shadow: var(--mf-shadow-lg) !important;
+}
+
+.mf-menu .mat-mdc-menu-item {
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  color: var(--mf-color-on-surface) !important;
+}
+
+.mf-menu .mat-mdc-menu-item:hover {
+  background-color: var(--mf-color-brand-light) !important;
+}
+
+.mf-menu .mat-mdc-menu-item .mat-icon {
+  color: var(--mf-color-neutral-400) !important;
+  margin-right: var(--mf-space-2) !important;
+}

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

@@ -0,0 +1,49 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfMenuComponent } from './mf-menu.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfMenuComponent', () => {
+  let fixture: ComponentFixture<MfMenuComponent>;
+  let component: MfMenuComponent;
+
+  const testItems = [
+    { label: 'Edit', icon: 'edit', value: 'edit' },
+    { label: 'Delete', icon: 'delete', value: 'delete' },
+    { label: 'Disabled', value: 'disabled', disabled: true },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfMenuComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfMenuComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('items', testItems);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render trigger button', () => {
+    const button = fixture.nativeElement.querySelector('button');
+    expect(button).toBeTruthy();
+  });
+
+  it('should use more_vert icon by default', () => {
+    expect(component.triggerIcon()).toBe('more_vert');
+  });
+
+  it('should have accessible trigger label', () => {
+    expect(component.triggerLabel()).toBe('Abrir menú');
+  });
+
+  it('should emit item click', () => {
+    const spy = vi.fn();
+    component.mfItemClick.subscribe(spy);
+    component.mfItemClick.emit('edit');
+    expect(spy).toHaveBeenCalledWith('edit');
+  });
+});

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

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface MfMenuItem {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+  value: string;
+}
+
+/**
+ * Menu de la librería ng-comps.
+ * Envuelve Angular Material `mat-menu` y expone una API uniforme
+ * con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-menu',
+  imports: [MatMenuModule, MatButtonModule, MatIconModule],
+  template: `
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      [class]="triggerClasses()"
+      [attr.aria-label]="triggerLabel()"
+    >
+      <mat-icon>{{ triggerIcon() }}</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" [class]="hostClasses()">
+      @for (item of items(); track item.value) {
+        <button
+          mat-menu-item
+          [disabled]="item.disabled ?? false"
+          (click)="mfItemClick.emit(item.value)"
+        >
+          @if (item.icon) {
+            <mat-icon aria-hidden="true">{{ item.icon }}</mat-icon>
+          }
+          <span>{{ item.label }}</span>
+        </button>
+      }
+    </mat-menu>
+  `,
+  styleUrl: './mf-menu.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfMenuComponent {
+  /** Items del menú */
+  readonly items = input.required<MfMenuItem[]>();
+  /** Icono del trigger */
+  readonly triggerIcon = input<string>('more_vert');
+  /** Label accesible del trigger */
+  readonly triggerLabel = input<string>('Abrir menú');
+
+  readonly mfItemClick = output<string>();
+
+  readonly hostClasses = computed(() => 'mf-menu');
+  readonly triggerClasses = computed(() => 'mf-menu__trigger');
+}

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

@@ -0,0 +1 @@
+export { MfPaginatorComponent } from './mf-paginator.component';

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

@@ -0,0 +1,32 @@
+:host {
+  display: block;
+}
+
+.mf-paginator.mat-mdc-paginator {
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  background-color: transparent !important;
+}
+
+.mf-paginator .mat-mdc-paginator-container {
+  padding: var(--mf-space-2) 0 !important;
+}
+
+.mf-paginator .mat-mdc-paginator-range-label {
+  color: var(--mf-color-neutral-600) !important;
+  font-family: var(--mf-font-base) !important;
+}
+
+.mf-paginator .mat-mdc-paginator-navigation-previous,
+.mf-paginator .mat-mdc-paginator-navigation-next,
+.mf-paginator .mat-mdc-paginator-navigation-first,
+.mf-paginator .mat-mdc-paginator-navigation-last {
+  color: var(--mf-color-brand) !important;
+}
+
+.mf-paginator .mat-mdc-paginator-navigation-previous:disabled,
+.mf-paginator .mat-mdc-paginator-navigation-next:disabled,
+.mf-paginator .mat-mdc-paginator-navigation-first:disabled,
+.mf-paginator .mat-mdc-paginator-navigation-last:disabled {
+  color: var(--mf-color-neutral-300) !important;
+}

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

@@ -0,0 +1,44 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfPaginatorComponent } from './mf-paginator.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfPaginatorComponent', () => {
+  let fixture: ComponentFixture<MfPaginatorComponent>;
+  let component: MfPaginatorComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfPaginatorComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfPaginatorComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('length', 100);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render mat-paginator', () => {
+    const paginator = fixture.nativeElement.querySelector('mat-paginator');
+    expect(paginator).toBeTruthy();
+  });
+
+  it('should have default page size of 10', () => {
+    expect(component.pageSize()).toBe(10);
+  });
+
+  it('should have default page size options', () => {
+    expect(component.pageSizeOptions()).toEqual([5, 10, 25, 50]);
+  });
+
+  it('should show first/last buttons by default', () => {
+    expect(component.showFirstLastButtons()).toBe(true);
+  });
+
+  it('should apply host classes', () => {
+    expect(component.hostClasses()).toBe('mf-paginator');
+  });
+});

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

@@ -0,0 +1,52 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
+
+/**
+ * Paginator de la librería ng-comps.
+ * Envuelve Angular Material `mat-paginator` y expone una API uniforme
+ * con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-paginator',
+  imports: [MatPaginatorModule],
+  template: `
+    <mat-paginator
+      [length]="length()"
+      [pageSize]="pageSize()"
+      [pageIndex]="pageIndex()"
+      [pageSizeOptions]="pageSizeOptions()"
+      [showFirstLastButtons]="showFirstLastButtons()"
+      [hidePageSize]="hidePageSize()"
+      [class]="hostClasses()"
+      (page)="mfPageChange.emit($event)"
+    />
+  `,
+  styleUrl: './mf-paginator.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfPaginatorComponent {
+  /** Total de elementos */
+  readonly length = input.required<number>();
+  /** Tamaño de página */
+  readonly pageSize = input(10);
+  /** Índice de página actual */
+  readonly pageIndex = input(0);
+  /** Opciones de tamaño de página */
+  readonly pageSizeOptions = input<number[]>([5, 10, 25, 50]);
+  /** Mostrar botones de primera/última página */
+  readonly showFirstLastButtons = input(true);
+  /** Ocultar selector de tamaño de página */
+  readonly hidePageSize = input(false);
+
+  readonly mfPageChange = output<PageEvent>();
+
+  readonly hostClasses = computed(() => {
+    return 'mf-paginator';
+  });
+}

package/src/app/components/progress-bar/index.ts

@@ -0,0 +1,2 @@
+export { MfProgressBarComponent } from './mf-progress-bar.component';
+export type { MfProgressBarMode, MfProgressBarColor } from './mf-progress-bar.component';

package/src/app/components/progress-bar/mf-progress-bar.component.css

@@ -0,0 +1,53 @@
+:host {
+  display: block;
+}
+
+/* ── Wrapper ───────────────────────────────────────────────────── */
+.mf-progress-bar__wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mf-space-2);
+}
+
+.mf-progress-bar__label {
+  font-family: var(--mf-font-base);
+  font-size: var(--mf-text-sm);
+  font-weight: var(--mf-weight-medium);
+  color: var(--mf-color-on-surface);
+}
+
+.mf-progress-bar__value {
+  font-family: var(--mf-font-base);
+  font-size: var(--mf-text-xs);
+  font-weight: var(--mf-weight-medium);
+  color: var(--mf-color-neutral-600);
+  align-self: flex-end;
+}
+
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-progress-bar {
+  border-radius: var(--mf-radius-full) !important;
+  overflow: hidden;
+}
+
+.mf-progress-bar.mat-mdc-progress-bar {
+  --mdc-linear-progress-track-shape: 9999px;
+}
+
+/* ── Color: brand ─────────────────────────────────────────────── */
+.mf-progress-bar--brand.mat-mdc-progress-bar {
+  --mdc-linear-progress-active-indicator-color: var(--mf-color-brand) !important;
+  --mdc-linear-progress-track-color: var(--mf-color-primary-100) !important;
+}
+
+/* ── Color: accent ────────────────────────────────────────────── */
+.mf-progress-bar--accent.mat-mdc-progress-bar {
+  --mdc-linear-progress-active-indicator-color: var(--mf-color-accent-500) !important;
+  --mdc-linear-progress-track-color: var(--mf-color-accent-300) !important;
+}
+
+/* ── Color: warn ──────────────────────────────────────────────── */
+.mf-progress-bar--warn.mat-mdc-progress-bar {
+  --mdc-linear-progress-active-indicator-color: var(--mf-color-error-500) !important;
+  --mdc-linear-progress-track-color: #fecaca !important;
+}

package/src/app/components/progress-bar/mf-progress-bar.component.spec.ts

@@ -0,0 +1,65 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfProgressBarComponent } from './mf-progress-bar.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfProgressBarComponent', () => {
+  let fixture: ComponentFixture<MfProgressBarComponent>;
+  let component: MfProgressBarComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfProgressBarComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfProgressBarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render mat-progress-bar', () => {
+    const bar = fixture.nativeElement.querySelector('mat-progress-bar');
+    expect(bar).toBeTruthy();
+  });
+
+  it('should apply brand class by default', () => {
+    expect(component.hostClasses()).toContain('mf-progress-bar--brand');
+  });
+
+  it('should apply accent class when color is accent', () => {
+    fixture.componentRef.setInput('color', 'accent');
+    expect(component.hostClasses()).toContain('mf-progress-bar--accent');
+  });
+
+  it('should apply warn class when color is warn', () => {
+    fixture.componentRef.setInput('color', 'warn');
+    expect(component.hostClasses()).toContain('mf-progress-bar--warn');
+  });
+
+  it('should render label when provided', () => {
+    fixture.componentRef.setInput('label', 'Cargando...');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('.mf-progress-bar__label');
+    expect(label?.textContent).toContain('Cargando...');
+  });
+
+  it('should show percentage when showValue is true and mode is determinate', () => {
+    fixture.componentRef.setInput('mode', 'determinate');
+    fixture.componentRef.setInput('value', 75);
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    const valueEl = fixture.nativeElement.querySelector('.mf-progress-bar__value');
+    expect(valueEl?.textContent).toContain('75%');
+  });
+
+  it('should not show percentage in indeterminate mode', () => {
+    fixture.componentRef.setInput('mode', 'indeterminate');
+    fixture.componentRef.setInput('showValue', true);
+    fixture.detectChanges();
+    const valueEl = fixture.nativeElement.querySelector('.mf-progress-bar__value');
+    expect(valueEl).toBeFalsy();
+  });
+});