ng-comps 1.0.2 → 2.0.0

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

@@ -1,79 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-} from '@angular/core';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { hasAccessibleName, warnInDev } from '../../a11y';
-
-export type MfProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
-export type MfProgressBarColor = 'brand' | 'accent' | 'warn';
-
-/**
- * Barra de progreso de la librería ng-comps.
- * Envuelve Angular Material `mat-progress-bar` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-progress-bar',
-  imports: [MatProgressBarModule],
-  template: `
-    <div class="mf-progress-bar__wrapper">
-      @if (label()) {
-        <span class="mf-progress-bar__label">{{ label() }}</span>
-      }
-      <mat-progress-bar
-        [class]="hostClasses()"
-        [mode]="mode()"
-        [value]="value()"
-        [bufferValue]="bufferValue()"
-        [attr.aria-label]="label() || null"
-        [attr.aria-valuetext]="valueText() || null"
-        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      />
-      @if (showValue() && mode() === 'determinate') {
-        <span class="mf-progress-bar__value" aria-hidden="true">{{ value() }}%</span>
-      }
-    </div>
-  `,
-  styleUrl: './mf-progress-bar.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfProgressBarComponent {
-  /** Modo de la barra de progreso */
-  readonly mode = input<MfProgressBarMode>('determinate');
-  /** Valor actual (0–100) */
-  readonly value = input(0);
-  /** Valor del buffer (0–100, solo en modo buffer) */
-  readonly bufferValue = input(0);
-  /** Color de la barra */
-  readonly color = input<MfProgressBarColor>('brand');
-  /** Etiqueta accesible */
-  readonly label = input<string | undefined>(undefined);
-  /** Texto accesible opcional para lectores de pantalla */
-  readonly valueText = input<string | undefined>(undefined);
-  /** Muestra el porcentaje junto a la barra */
-  readonly showValue = input(false);
-  /** Altura de la barra en px */
-  readonly height = input(4);
-
-  constructor() {
-    effect(() => {
-      if (!hasAccessibleName(this.label())) {
-        warnInDev(
-          'mf-progress-bar debería incluir `label` para anunciar el progreso de forma accesible.',
-        );
-      }
-    });
-  }
-
-  readonly showsNumericValue = computed(() => this.mode() === 'determinate');
-
-  readonly hostClasses = computed(() => {
-    return `mf-progress-bar mf-progress-bar--${this.color()}`;
-  });
-}

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

@@ -1,2 +0,0 @@
-export { MfProgressSpinnerComponent } from './mf-progress-spinner.component';
-export type { MfProgressSpinnerMode, MfProgressSpinnerColor } from './mf-progress-spinner.component';

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

@@ -1,38 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Wrapper ───────────────────────────────────────────────────── */
-.mf-progress-spinner__wrapper {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--mf-space-3);
-}
-
-.mf-progress-spinner__wrapper--labeled {
-  flex-direction: row;
-}
-
-.mf-progress-spinner__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);
-}
-
-/* ── Color: brand ─────────────────────────────────────────────── */
-.mf-progress-spinner--brand.mat-mdc-progress-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--mf-color-brand) !important;
-}
-
-/* ── Color: accent ────────────────────────────────────────────── */
-.mf-progress-spinner--accent.mat-mdc-progress-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--mf-color-accent-500) !important;
-}
-
-/* ── Color: warn ──────────────────────────────────────────────── */
-.mf-progress-spinner--warn.mat-mdc-progress-spinner {
-  --mdc-circular-progress-active-indicator-color: var(--mf-color-error-500) !important;
-}

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

@@ -1,59 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfProgressSpinnerComponent } from './mf-progress-spinner.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfProgressSpinnerComponent', () => {
-  let fixture: ComponentFixture<MfProgressSpinnerComponent>;
-  let component: MfProgressSpinnerComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfProgressSpinnerComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfProgressSpinnerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render mat-progress-spinner', () => {
-    const spinner = fixture.nativeElement.querySelector('mat-progress-spinner');
-    expect(spinner).toBeTruthy();
-  });
-
-  it('should apply brand class by default', () => {
-    expect(component.hostClasses()).toContain('mf-progress-spinner--brand');
-  });
-
-  it('should apply accent class when color is accent', () => {
-    fixture.componentRef.setInput('color', 'accent');
-    expect(component.hostClasses()).toContain('mf-progress-spinner--accent');
-  });
-
-  it('should apply warn class when color is warn', () => {
-    fixture.componentRef.setInput('color', 'warn');
-    expect(component.hostClasses()).toContain('mf-progress-spinner--warn');
-  });
-
-  it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Processing...');
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('.mf-progress-spinner__label');
-    expect(label?.textContent).toContain('Processing...');
-  });
-
-  it('should not render label when not provided', () => {
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('.mf-progress-spinner__label');
-    expect(label).toBeFalsy();
-  });
-
-  it('should add labeled class when label is provided', () => {
-    fixture.componentRef.setInput('label', 'Loading');
-    expect(component.wrapperClasses()).toContain('mf-progress-spinner__wrapper--labeled');
-  });
-});

package/src/app/components/progress-spinner/mf-progress-spinner.component.ts

@@ -1,81 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-} from '@angular/core';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { hasAccessibleName, warnInDev } from '../../a11y';
-
-export type MfProgressSpinnerMode = 'determinate' | 'indeterminate';
-export type MfProgressSpinnerColor = 'brand' | 'accent' | 'warn';
-
-/**
- * Spinner de progreso de la librería ng-comps.
- * Envuelve Angular Material `mat-progress-spinner` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-progress-spinner',
-  imports: [MatProgressSpinnerModule],
-  template: `
-    <div [class]="wrapperClasses()">
-      <mat-progress-spinner
-        [class]="hostClasses()"
-        [mode]="mode()"
-        [value]="value()"
-        [diameter]="diameter()"
-        [strokeWidth]="strokeWidth()"
-        [attr.aria-label]="label() || null"
-        [attr.aria-valuetext]="valueText() || null"
-        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
-        aria-valuemin="0"
-        aria-valuemax="100"
-      />
-      @if (label()) {
-        <span class="mf-progress-spinner__label">{{ label() }}</span>
-      }
-    </div>
-  `,
-  styleUrl: './mf-progress-spinner.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfProgressSpinnerComponent {
-  /** Modo del spinner */
-  readonly mode = input<MfProgressSpinnerMode>('indeterminate');
-  /** Valor actual (0–100, solo en modo determinate) */
-  readonly value = input(0);
-  /** Diámetro en px */
-  readonly diameter = input(40);
-  /** Grosor del trazo en px */
-  readonly strokeWidth = input(4);
-  /** Color del spinner */
-  readonly color = input<MfProgressSpinnerColor>('brand');
-  /** Etiqueta accesible y visible */
-  readonly label = input<string | undefined>(undefined);
-  /** Texto accesible opcional para lectores de pantalla */
-  readonly valueText = input<string | undefined>(undefined);
-
-  constructor() {
-    effect(() => {
-      if (!hasAccessibleName(this.label())) {
-        warnInDev(
-          'mf-progress-spinner debería incluir `label` para anunciar el estado de carga de forma accesible.',
-        );
-      }
-    });
-  }
-
-  readonly showsNumericValue = computed(() => this.mode() === 'determinate');
-
-  readonly hostClasses = computed(() => {
-    return `mf-progress-spinner mf-progress-spinner--${this.color()}`;
-  });
-
-  readonly wrapperClasses = computed(() => {
-    const classes = ['mf-progress-spinner__wrapper'];
-    if (this.label()) classes.push('mf-progress-spinner__wrapper--labeled');
-    return classes.join(' ');
-  });
-}

package/src/app/components/radio-button/index.ts

@@ -1,2 +0,0 @@
-export { MfRadioButtonComponent } from './mf-radio-button.component';
-export type { MfRadioOption, MfRadioDirection } from './mf-radio-button.component';

package/src/app/components/radio-button/mf-radio-button.component.css

@@ -1,86 +0,0 @@
-:host {
-  display: block;
-}
-
-.mf-radio__fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-}
-
-.mf-radio__legend {
-  margin-bottom: var(--mf-space-2);
-  font-size: var(--mf-text-sm);
-  font-weight: var(--mf-weight-medium);
-  color: var(--mf-color-on-surface);
-}
-
-/* ── Group layout ──────────────────────────────────────────────── */
-.mf-radio {
-  display: flex;
-}
-
-.mf-radio--vertical {
-  flex-direction: column;
-  gap: var(--mf-space-2);
-}
-
-.mf-radio--horizontal {
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--mf-space-4);
-}
-
-/* ── Option ────────────────────────────────────────────────────── */
-.mf-radio__option {
-  font-family: var(--mf-font-base) !important;
-  font-size: var(--mf-text-sm) !important;
-  color: var(--mf-color-on-surface) !important;
-}
-
-/* ── Radio button circle ──────────────────────────────────────── */
-.mf-radio__option .mdc-radio .mdc-radio__outer-circle {
-  border-color: var(--mf-color-border) !important;
-  transition: border-color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__outer-circle {
-  border-color: var(--mf-color-brand) !important;
-}
-
-.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__inner-circle {
-  border-color: var(--mf-color-brand) !important;
-}
-
-/* ── Ripple ────────────────────────────────────────────────────── */
-.mf-radio__option .mat-ripple-element {
-  background-color: var(--mf-color-brand-light) !important;
-}
-
-/* ── Label text ────────────────────────────────────────────────── */
-.mf-radio__option .mdc-label {
-  font-family: var(--mf-font-base) !important;
-  color: var(--mf-color-on-surface) !important;
-  cursor: pointer;
-}
-
-/* ── Disabled ──────────────────────────────────────────────────── */
-.mf-radio__option.mat-mdc-radio-disabled .mdc-label {
-  color: var(--mf-color-neutral-400) !important;
-  cursor: default;
-}
-
-.mf-radio__hint,
-.mf-radio__error {
-  margin: var(--mf-space-2) 0 0;
-  font-size: var(--mf-text-xs);
-  line-height: var(--mf-leading-normal);
-}
-
-.mf-radio__hint {
-  color: var(--mf-color-neutral-600);
-}
-
-.mf-radio__error {
-  color: var(--mf-color-error-500);
-}

package/src/app/components/radio-button/mf-radio-button.component.spec.ts

@@ -1,55 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfRadioButtonComponent } from './mf-radio-button.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-const SAMPLE_OPTIONS = [
-  { value: 'a', label: 'Opción A' },
-  { value: 'b', label: 'Opción B' },
-  { value: 'c', label: 'Opción C', disabled: true },
-];
-
-describe('MfRadioButtonComponent', () => {
-  let fixture: ComponentFixture<MfRadioButtonComponent>;
-  let component: MfRadioButtonComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfRadioButtonComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfRadioButtonComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('options', SAMPLE_OPTIONS);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render mat-radio-group', () => {
-    const group = fixture.nativeElement.querySelector('mat-radio-group');
-    expect(group).toBeTruthy();
-  });
-
-  it('should render all options', () => {
-    const buttons = fixture.nativeElement.querySelectorAll('mat-radio-button');
-    expect(buttons.length).toBe(SAMPLE_OPTIONS.length);
-  });
-
-  it('should apply vertical class by default', () => {
-    expect(component.hostClasses()).toContain('mf-radio--vertical');
-  });
-
-  it('should apply horizontal class when direction is horizontal', () => {
-    fixture.componentRef.setInput('direction', 'horizontal');
-    expect(component.hostClasses()).toContain('mf-radio--horizontal');
-  });
-
-  it('should emit mfChange when selection changes', () => {
-    const spy = vi.fn();
-    component.mfChange.subscribe(spy);
-    component.onChange({ value: 'b' });
-    expect(spy).toHaveBeenCalledWith('b');
-  });
-});

package/src/app/components/radio-button/mf-radio-button.component.ts

@@ -1,219 +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 { MatRadioModule } from '@angular/material/radio';
-import {
-  createUniqueId,
-  hasAccessibleName,
-  mergeAriaIds,
-  warnInDev,
-} from '../../a11y';
-
-export interface MfRadioOption {
-  /** Valor de la opción */
-  value: string;
-  /** Texto visible */
-  label: string;
-  /** Deshabilitada individualmente */
-  disabled?: boolean;
-}
-
-export type MfRadioDirection = 'horizontal' | 'vertical';
-
-/**
- * Grupo de radio buttons de la librería ng-comps.
- * Envuelve Angular Material `mat-radio-group` + `mat-radio-button`
- * y expone una API uniforme con look and feel de marca.
- */
-@Component({
-  selector: 'mf-radio-button',
-  imports: [MatRadioModule],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MfRadioButtonComponent),
-      multi: true,
-    },
-  ],
-  template: `
-    <fieldset class="mf-radio__fieldset">
-      @if (label()) {
-        <legend class="mf-radio__legend" [id]="legendId()">
-          {{ label() }}
-          @if (required()) {
-            <span aria-hidden="true"> *</span>
-          }
-        </legend>
-      }
-
-      <mat-radio-group
-        [class]="hostClasses()"
-        [disabled]="isDisabled()"
-        [name]="groupName()"
-        [required]="required()"
-        [value]="internalValue()"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="computedLabelledby()"
-        [attr.aria-describedby]="describedBy()"
-        [attr.aria-invalid]="isInvalid() ? 'true' : null"
-        [attr.aria-required]="required() ? 'true' : null"
-        (change)="onChange($event)"
-      >
-        @for (option of options(); track option.value) {
-          <mat-radio-button
-            class="mf-radio__option"
-            [value]="option.value"
-            [disabled]="option.disabled ?? false"
-          >
-            {{ option.label }}
-          </mat-radio-button>
-        }
-      </mat-radio-group>
-
-      @if (hint()) {
-        <p class="mf-radio__hint" [attr.id]="hintId()">{{ hint() }}</p>
-      }
-
-      @if (error()) {
-        <p class="mf-radio__error" [attr.id]="errorId()" role="alert">
-          {{ error() }}
-        </p>
-      }
-    </fieldset>
-  `,
-  styleUrl: './mf-radio-button.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfRadioButtonComponent implements ControlValueAccessor {
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly ngControl = inject(NgControl, { self: true, optional: true });
-  private readonly generatedId = createUniqueId('mf-radio');
-  private readonly disabledFromForm = signal(false);
-  protected readonly internalValue = signal<string | undefined>(undefined);
-  private onControlChange: (value: string) => void = () => undefined;
-  private onControlTouched: () => void = () => undefined;
-
-  /** Opciones del grupo */
-  readonly options = input.required<MfRadioOption[]>();
-  /** ID del control */
-  readonly id = input<string | undefined>(undefined);
-  /** Etiqueta visible del grupo */
-  readonly label = input<string | undefined>(undefined);
-  /** Valor seleccionado */
-  readonly value = input<string | undefined>(undefined);
-  /** Deshabilitado */
-  readonly disabled = input(false);
-  /** Requerido */
-  readonly required = input(false);
-  /** Dirección del grupo */
-  readonly direction = input<MfRadioDirection>('vertical');
-  /** Nombre accesible alternativo del grupo */
-  readonly ariaLabel = input<string | undefined>(undefined);
-  /** Etiqueta accesible para el grupo */
-  readonly ariaLabelledby = input<string | undefined>(undefined);
-  /** Referencia externa a elementos descriptivos adicionales */
-  readonly ariaDescribedby = input<string | undefined>(undefined);
-  /** Texto de ayuda */
-  readonly hint = input<string | undefined>(undefined);
-  /** Mensaje de error */
-  readonly error = input<string | undefined>(undefined);
-  /** Name del grupo */
-  readonly name = input<string | undefined>(undefined);
-
-  readonly mfChange = output<string>();
-
-  constructor() {
-    effect(() => {
-      this.internalValue.set(this.value());
-    });
-
-    effect(() => {
-      if (
-        !hasAccessibleName(
-          this.label(),
-          this.ariaLabel(),
-          this.ariaLabelledby(),
-        )
-      ) {
-        warnInDev(
-          'mf-radio-button requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.',
-        );
-      }
-    });
-  }
-
-  readonly controlId = computed(() => this.id() ?? this.generatedId);
-  readonly legendId = computed(() => `${this.controlId()}-legend`);
-  readonly hintId = computed(() =>
-    this.hint() ? `${this.controlId()}-hint` : null,
-  );
-  readonly errorId = computed(() =>
-    this.error() ? `${this.controlId()}-error` : null,
-  );
-  readonly computedLabelledby = computed(() =>
-    mergeAriaIds(
-      this.ariaLabelledby(),
-      this.label() ? this.legendId() : null,
-    ),
-  );
-  readonly describedBy = computed(() =>
-    mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()),
-  );
-  readonly groupName = computed(() => this.name() ?? this.controlId());
-  readonly resolvedAriaLabel = computed(() =>
-    this.label() ? null : this.ariaLabel() ?? null,
-  );
-  readonly isDisabled = computed(
-    () => this.disabled() || this.disabledFromForm(),
-  );
-
-  readonly hostClasses = computed(() => {
-    return `mf-radio mf-radio--${this.direction()}`;
-  });
-
-  writeValue(value: string | null): void {
-    this.internalValue.set(value ?? undefined);
-    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)),
-    );
-  }
-
-  onChange(event: { value: string }): void {
-    this.internalValue.set(event.value);
-    this.onControlChange(event.value);
-    this.onControlTouched();
-    this.mfChange.emit(event.value);
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfSelectComponent } from './mf-select.component';
-export type { MfSelectOption, MfSelectSize } from './mf-select.component';