ng-comps 1.0.2 → 2.0.0

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

@@ -1,307 +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 { MatAutocompleteModule } from '@angular/material/autocomplete';
-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 interface MfAutocompleteOption {
-  value: string | number;
-  label: string;
-  disabled?: boolean;
-}
-
-export type MfAutocompleteSize = 'sm' | 'md' | 'lg';
-
-/**
- * Autocompletar de la librería ng-comps.
- * Envuelve Angular Material `mat-autocomplete` y expone una API uniforme
- * con look and feel de marca.
- *
- * El panel desplegable se estiliza con la clase global `mf-autocomplete-panel`.
- * Puedes añadir clases adicionales con `panelClass`.
- */
-@Component({
-  selector: 'mf-autocomplete',
-  imports: [
-    MatAutocompleteModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-  ],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MfAutocompleteComponent),
-      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()"
-        [placeholder]="placeholder()"
-        [disabled]="isDisabled()"
-        [required]="required()"
-        [matAutocomplete]="auto"
-        [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)="onInputChange($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-autocomplete
-        #auto
-        [panelWidth]="panelWidth()"
-        [class]="autocompletePanelClasses()"
-        (optionSelected)="onOptionSelected($event)"
-      >
-        @for (option of filteredOptions(); track option.value) {
-          <mat-option [value]="option.label" [disabled]="option.disabled ?? false">
-            {{ option.label }}
-          </mat-option>
-        }
-      </mat-autocomplete>
-    </mat-form-field>
-    @if (error()) {
-      <p class="mf-autocomplete__error" [attr.id]="errorId()" role="alert">
-        {{ error() }}
-      </p>
-    }
-  `,
-  styleUrl: './mf-autocomplete.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfAutocompleteComponent implements ControlValueAccessor {
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly ngControl = inject(NgControl, { self: true, optional: true });
-  private readonly generatedId = createUniqueId('mf-autocomplete');
-  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)),
-      ),
-  };
-
-  /** Lista completa de opciones */
-  readonly options = input.required<MfAutocompleteOption[]>();
-  /** 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('');
-  /** Valor actual (texto en el campo) */
-  readonly value = input('');
-  /** Deshabilitado */
-  readonly disabled = input(false);
-  /** Requerido */
-  readonly required = input(false);
-  /** Tamaño del campo */
-  readonly size = input<MfAutocompleteSize>('md');
-  /** Ancho completo */
-  readonly fullWidth = 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 del campo */
-  readonly leadingIcon = input<string | undefined>(undefined);
-  /** Icono al final del campo */
-  readonly trailingIcon = input<string | undefined>(undefined);
-  /**
-   * Ancho del panel del autocomplete.
-   * Por defecto `''`: el panel toma el mismo ancho que el campo.
-   * Acepta cualquier valor CSS válido ('300px', '80vw', etc.) para sobreescribirlo.
-   */
-  readonly panelWidth = input<string | number>('');
-  /**
-   * Clases extra que se añaden al panel del autocomplete (overlay).
-   * La clase `mf-autocomplete-panel` siempre está presente.
-   */
-  readonly panelClass = input<string | string[]>('');
-
-  /** Emite el texto escrito en el campo */
-  readonly mfInput = output<string>();
-  /** Emite el valor de la opción seleccionada */
-  readonly mfOptionSelected = output<MfAutocompleteOption>();
-  readonly mfBlur = output<void>();
-
-  constructor() {
-    effect(() => {
-      this.internalValue.set(this.value());
-    });
-
-    effect(() => {
-      if (
-        !hasAccessibleName(
-          this.label(),
-          this.ariaLabel(),
-          this.ariaLabelledby(),
-        )
-      ) {
-        warnInDev(
-          'mf-autocomplete 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-autocomplete', `mf-autocomplete--${this.size()}`];
-    if (this.fullWidth()) classes.push('mf-autocomplete--full');
-    if (this.error()) classes.push('mf-autocomplete--error');
-    return classes.join(' ');
-  });
-
-  readonly autocompletePanelClasses = computed(() => {
-    const base = ['mf-autocomplete-panel'];
-    const extra = this.panelClass();
-
-    if (Array.isArray(extra)) {
-      base.push(...extra.filter(Boolean));
-    } else if (extra) {
-      base.push(extra);
-    }
-
-    return base.join(' ');
-  });
-
-  readonly filteredOptions = computed(() => {
-    const query = this.internalValue().toLowerCase().trim();
-    if (!query) {
-      return this.options();
-    }
-
-    return this.options().filter((option) =>
-      option.label.toLowerCase().includes(query),
-    );
-  });
-
-  get inputValue(): string {
-    return this.internalValue();
-  }
-
-  set inputValue(value: string) {
-    this.internalValue.set(value);
-  }
-
-  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)),
-    );
-  }
-
-  onInputChange(event: Event | string): void {
-    const value =
-      typeof event === 'string'
-        ? event
-        : (event.target as HTMLInputElement).value;
-
-    this.internalValue.set(value);
-    this.onControlChange(value);
-    this.mfInput.emit(value);
-  }
-
-  onOptionSelected(event: { option: { value: string } }): void {
-    const label = event.option.value;
-    const match = this.options().find((option) => option.label === label);
-
-    if (match) {
-      this.internalValue.set(match.label);
-      this.onControlChange(match.label);
-      this.onControlTouched();
-      this.mfOptionSelected.emit(match);
-    }
-  }
-
-  onBlur(): void {
-    this.onControlTouched();
-    this.mfBlur.emit();
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfAvatarComponent } from './mf-avatar.component';
-export type { MfAvatarSize, MfAvatarVariant } from './mf-avatar.component';

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

@@ -1,27 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-.mf-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  object-fit: cover;
-  background-color: var(--mf-color-primary-100);
-  color: var(--mf-color-primary-800);
-  font-family: var(--mf-font-base);
-  font-weight: var(--mf-weight-bold);
-  user-select: none;
-}
-
-/* ── Tamaños ───────────────────────────────────────────────────── */
-.mf-avatar--xs { width: 24px; height: 24px; font-size: var(--mf-text-xs); }
-.mf-avatar--sm { width: 32px; height: 32px; font-size: var(--mf-text-sm); }
-.mf-avatar--md { width: 40px; height: 40px; font-size: var(--mf-text-base); }
-.mf-avatar--lg { width: 56px; height: 56px; font-size: var(--mf-text-xl); }
-.mf-avatar--xl { width: 80px; height: 80px; font-size: var(--mf-text-3xl); }
-
-/* ── Forma ─────────────────────────────────────────────────────── */
-.mf-avatar--circle { border-radius: var(--mf-radius-full); }
-.mf-avatar--rounded { border-radius: var(--mf-radius-md); }

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

@@ -1,49 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfAvatarComponent } from './mf-avatar.component';
-
-describe('MfAvatarComponent', () => {
-  let fixture: ComponentFixture<MfAvatarComponent>;
-  let component: MfAvatarComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfAvatarComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfAvatarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should show initials when no src', () => {
-    fixture.componentRef.setInput('name', 'John Doe');
-    fixture.detectChanges();
-    const span = fixture.nativeElement.querySelector('.mf-avatar');
-    expect(span?.textContent?.trim()).toBe('JD');
-  });
-
-  it('should show ? when no name and no src', () => {
-    fixture.detectChanges();
-    const span = fixture.nativeElement.querySelector('.mf-avatar');
-    expect(span?.textContent?.trim()).toBe('?');
-  });
-
-  it('should render img when src provided', () => {
-    fixture.componentRef.setInput('src', 'https://example.com/photo.jpg');
-    fixture.detectChanges();
-    const img = fixture.nativeElement.querySelector('img');
-    expect(img).toBeTruthy();
-  });
-
-  it('should apply circle variant by default', () => {
-    expect(component.hostClasses()).toContain('mf-avatar--circle');
-  });
-
-  it('should apply md size by default', () => {
-    expect(component.hostClasses()).toContain('mf-avatar--md');
-  });
-});

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

@@ -1,99 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-} from '@angular/core';
-import { hasAccessibleName, warnInDev } from '../../a11y';
-
-export type MfAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-export type MfAvatarVariant = 'circle' | 'rounded';
-
-/**
- * Avatar de la librería ng-comps.
- * Muestra una imagen de perfil, iniciales o un icono.
- * Componente puro sin dependencia de Angular Material.
- */
-@Component({
-  selector: 'mf-avatar',
-  imports: [],
-  template: `
-    @if (src()) {
-      <img
-        [src]="src()"
-        [alt]="imageAlt()"
-        [class]="hostClasses()"
-        [attr.aria-hidden]="decorative() ? 'true' : null"
-      />
-    } @else {
-      <span
-        [class]="hostClasses()"
-        [attr.aria-label]="fallbackAriaLabel()"
-        [attr.aria-hidden]="decorative() ? 'true' : null"
-      >
-        {{ initials() }}
-      </span>
-    }
-  `,
-  styleUrl: './mf-avatar.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfAvatarComponent {
-  /** URL de la imagen */
-  readonly src = input<string | undefined>(undefined);
-  /** Texto alternativo */
-  readonly alt = input<string>('');
-  /** Nombre completo para generar iniciales */
-  readonly name = input<string>('');
-  /** Si es decorativo, se oculta a tecnologías asistivas */
-  readonly decorative = input(false);
-  /** Tamaño */
-  readonly size = input<MfAvatarSize>('md');
-  /** Forma */
-  readonly variant = input<MfAvatarVariant>('circle');
-
-  constructor() {
-    effect(() => {
-      if (!this.decorative() && !hasAccessibleName(this.alt(), this.name())) {
-        warnInDev(
-          'mf-avatar requiere `alt` o `name` cuando no es decorativo para exponer un nombre accesible.',
-        );
-      }
-    });
-  }
-
-  readonly initials = computed(() => {
-    const n = this.name();
-    if (!n) return '?';
-    const parts = n.trim().split(/\s+/);
-    if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
-    return (
-      parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
-    ).toUpperCase();
-  });
-
-  readonly imageAlt = computed(() => {
-    if (this.decorative()) {
-      return '';
-    }
-
-    return this.alt() || this.name();
-  });
-
-  readonly fallbackAriaLabel = computed(() => {
-    if (this.decorative()) {
-      return null;
-    }
-
-    return this.alt() || this.name() || null;
-  });
-
-  readonly hostClasses = computed(() => {
-    return [
-      'mf-avatar',
-      `mf-avatar--${this.size()}`,
-      `mf-avatar--${this.variant()}`,
-    ].join(' ');
-  });
-}

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

@@ -1,2 +0,0 @@
-export { MfBadgeComponent } from './mf-badge.component';
-export type { MfBadgeColor, MfBadgeSize, MfBadgePosition } from './mf-badge.component';

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

@@ -1,32 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-/* ── Brand ────────────────────────────────────────────────────── */
-.mf-badge--brand .mat-badge-content {
-  background-color: var(--mf-color-brand) !important;
-  color: var(--mf-color-on-brand) !important;
-}
-
-/* ── Accent ───────────────────────────────────────────────────── */
-.mf-badge--accent .mat-badge-content {
-  background-color: var(--mf-color-accent-500) !important;
-  color: var(--mf-color-neutral-900) !important;
-}
-
-/* ── Error ────────────────────────────────────────────────────── */
-.mf-badge--error .mat-badge-content {
-  background-color: var(--mf-color-error-500) !important;
-  color: var(--mf-color-neutral-0) !important;
-}
-
-/* ── Neutral ──────────────────────────────────────────────────── */
-.mf-badge--neutral .mat-badge-content {
-  background-color: var(--mf-color-neutral-400) !important;
-  color: var(--mf-color-neutral-0) !important;
-}
-
-.mat-badge-content {
-  font-family: var(--mf-font-base) !important;
-  font-weight: var(--mf-weight-bold) !important;
-}

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

@@ -1,40 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfBadgeComponent } from './mf-badge.component';
-
-describe('MfBadgeComponent', () => {
-  let fixture: ComponentFixture<MfBadgeComponent>;
-  let component: MfBadgeComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfBadgeComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfBadgeComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should apply brand class by default', () => {
-    expect(component.hostClasses()).toContain('mf-badge--brand');
-  });
-
-  it('should apply error class when color is error', () => {
-    fixture.componentRef.setInput('color', 'error');
-    expect(component.hostClasses()).toContain('mf-badge--error');
-  });
-
-  it('should map size correctly', () => {
-    fixture.componentRef.setInput('size', 'sm');
-    expect(component.matSize()).toBe('small');
-  });
-
-  it('should map position correctly', () => {
-    fixture.componentRef.setInput('position', 'below-before');
-    expect(component.matPosition()).toBe('below before');
-  });
-});

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

@@ -1,105 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-} from '@angular/core';
-import { MatBadgeModule } from '@angular/material/badge';
-import { warnInDev } from '../../a11y';
-
-export type MfBadgeColor = 'brand' | 'accent' | 'error' | 'neutral';
-export type MfBadgeSize = 'sm' | 'md' | 'lg';
-export type MfBadgePosition =
-  | 'above-after'
-  | 'above-before'
-  | 'below-after'
-  | 'below-before';
-
-/**
- * Badge de la librería ng-comps.
- * Envuelve Angular Material `matBadge` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-badge',
-  imports: [MatBadgeModule],
-  template: `
-    <span
-      [matBadge]="content()"
-      [matBadgeHidden]="hidden()"
-      [matBadgeDisabled]="disabled()"
-      [matBadgeOverlap]="overlap()"
-      [matBadgePosition]="matPosition()"
-      [matBadgeSize]="matSize()"
-      [matBadgeDescription]="badgeDescription()"
-      [attr.aria-hidden]="decorative() ? 'true' : null"
-      [class]="hostClasses()"
-    >
-      <ng-content />
-    </span>
-  `,
-  styleUrl: './mf-badge.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfBadgeComponent {
-  /** Contenido del badge (texto o número) */
-  readonly content = input<string | number>('');
-  /** Descripción accesible del badge */
-  readonly description = input<string | undefined>(undefined);
-  /** Si es decorativo, se oculta a tecnologías asistivas */
-  readonly decorative = input(false);
-  /** Color semántico */
-  readonly color = input<MfBadgeColor>('brand');
-  /** Tamaño del badge */
-  readonly size = input<MfBadgeSize>('md');
-  /** Posición del badge */
-  readonly position = input<MfBadgePosition>('above-after');
-  /** Ocultar el badge */
-  readonly hidden = input(false);
-  /** Deshabilitado */
-  readonly disabled = input(false);
-  /** Superponer sobre el contenido */
-  readonly overlap = input(true);
-
-  constructor() {
-    effect(() => {
-      if (!this.decorative() && this.content() !== '' && !this.description()) {
-        warnInDev(
-          'mf-badge debería incluir `description` cuando el badge transmite información relevante.',
-        );
-      }
-    });
-  }
-
-  readonly badgeDescription = computed(() =>
-    this.decorative() ? '' : this.description() ?? '',
-  );
-
-  readonly matPosition = computed(() => {
-    const pos = this.position();
-    const map: Record<
-      MfBadgePosition,
-      'above after' | 'above before' | 'below after' | 'below before'
-    > = {
-      'above-after': 'above after',
-      'above-before': 'above before',
-      'below-after': 'below after',
-      'below-before': 'below before',
-    };
-    return map[pos];
-  });
-
-  readonly matSize = computed((): 'small' | 'medium' | 'large' => {
-    const map: Record<MfBadgeSize, 'small' | 'medium' | 'large'> = {
-      sm: 'small',
-      md: 'medium',
-      lg: 'large',
-    };
-    return map[this.size()];
-  });
-
-  readonly hostClasses = computed(() => {
-    return ['mf-badge', `mf-badge--${this.color()}`].join(' ');
-  });
-}

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

@@ -1,2 +0,0 @@
-export { MfBreadcrumbComponent } from './mf-breadcrumb.component';
-export type { MfBreadcrumbItem } from './mf-breadcrumb.component';