ng-comps 1.0.2 → 2.0.0

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

@@ -1,217 +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 { 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

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

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

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

@@ -1,49 +0,0 @@
-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('Open menu');
-  });
-
-  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

@@ -1,66 +0,0 @@
-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>('Open menu');
-
-  readonly mfItemClick = output<string>();
-
-  readonly hostClasses = computed(() => 'mf-menu');
-  readonly triggerClasses = computed(() => 'mf-menu__trigger');
-}

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

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

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

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

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

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

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

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

@@ -1,65 +0,0 @@
-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', 'Loading...');
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('.mf-progress-bar__label');
-    expect(label?.textContent).toContain('Loading...');
-  });
-
-  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();
-  });
-});