ng-comps 0.2.0 → 1.0.0

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

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+}
+
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-checkbox {
+  font-family: var(--mf-font-base) !important;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mf-space-1);
+}
+
+/* ── Label styling ────────────────────────────────────────────── */
+.mf-checkbox .mdc-label,
+.mf-checkbox .mat-mdc-checkbox-label {
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  color: var(--mf-color-on-surface) !important;
+  cursor: pointer;
+}
+
+/* ── Unchecked state ──────────────────────────────────────────── */
+.mf-checkbox .mdc-checkbox__background {
+  border-color: var(--mf-color-neutral-300) !important;
+  border-radius: var(--mf-radius-sm) !important;
+  border-width: 1.5px !important;
+  transition:
+    border-color var(--mf-duration-base) var(--mf-ease-standard),
+    background-color var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+/* ── Checked state ────────────────────────────────────────────── */
+.mf-checkbox .mdc-checkbox__native-control:checked ~ .mdc-checkbox__background,
+.mf-checkbox .mdc-checkbox__native-control:indeterminate ~ .mdc-checkbox__background {
+  background-color: var(--mf-color-brand) !important;
+  border-color: var(--mf-color-brand) !important;
+}
+
+/* ── Hover ─────────────────────────────────────────────────────── */
+.mf-checkbox:hover .mdc-checkbox__background {
+  border-color: var(--mf-color-brand) !important;
+}
+
+/* ── Ripple override ──────────────────────────────────────────── */
+.mf-checkbox .mat-mdc-checkbox-ripple,
+.mf-checkbox .mdc-checkbox__ripple {
+  display: none !important;
+}
+
+/* ── Focus ring ───────────────────────────────────────────────── */
+.mf-checkbox .mdc-checkbox__native-control:focus ~ .mdc-checkbox__background {
+  box-shadow: 0 0 0 3px var(--mf-color-primary-100);
+}
+
+/* ── Disabled ──────────────────────────────────────────────────── */
+.mf-checkbox--disabled {
+  opacity: 0.42;
+  pointer-events: none;
+}
+
+.mf-checkbox__hint,
+.mf-checkbox__error {
+  margin: 0;
+  padding-left: calc(18px + var(--mf-space-3));
+  font-size: var(--mf-text-xs);
+  line-height: var(--mf-leading-normal);
+}
+
+.mf-checkbox__hint {
+  color: var(--mf-color-neutral-600);
+}
+
+.mf-checkbox__error {
+  color: var(--mf-color-error-500);
+}

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

@@ -0,0 +1,187 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  computed,
+  effect,
+  forwardRef,
+  inject,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  NgControl,
+} from '@angular/forms';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from '../../a11y';
+
+/**
+ * Checkbox de la librería ng-comps.
+ * Envuelve Angular Material `mat-checkbox` y expone una API uniforme
+ * con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-checkbox',
+  imports: [MatCheckboxModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MfCheckboxComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <div [class]="hostClasses()">
+      <mat-checkbox
+        [id]="controlId()"
+        [checked]="internalValue()"
+        [disabled]="isDisabled()"
+        [indeterminate]="indeterminate()"
+        [required]="required()"
+        [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"
+        (change)="onCheckboxChange($event)"
+        (blur)="onBlur()"
+      >
+        {{ label() }}
+      </mat-checkbox>
+
+      @if (hint()) {
+        <p class="mf-checkbox__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-checkbox__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </div>
+  `,
+  styleUrl: './mf-checkbox.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfCheckboxComponent implements ControlValueAccessor {
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly ngControl = inject(NgControl, { self: true, optional: true });
+  private readonly generatedId = createUniqueId('mf-checkbox');
+  private readonly disabledFromForm = signal(false);
+  protected readonly internalValue = signal(false);
+  private onControlChange: (value: boolean) => void = () => undefined;
+  private onControlTouched: () => void = () => undefined;
+
+  /** ID del control */
+  readonly id = input<string | undefined>(undefined);
+  /** Texto del checkbox */
+  readonly label = input<string>('');
+  /** 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);
+  /** Estado marcado */
+  readonly checked = input(false);
+  /** Estado indeterminado */
+  readonly indeterminate = input(false);
+  /** Deshabilitado */
+  readonly disabled = input(false);
+  /** Requerido */
+  readonly required = input(false);
+  /** Texto de ayuda */
+  readonly hint = input<string | undefined>(undefined);
+  /** Mensaje de error */
+  readonly error = input<string | undefined>(undefined);
+
+  readonly mfChange = output<boolean>();
+
+  constructor() {
+    effect(() => {
+      this.internalValue.set(this.checked());
+    });
+
+    effect(() => {
+      if (
+        !hasAccessibleName(
+          this.label(),
+          this.ariaLabel(),
+          this.ariaLabelledby(),
+        )
+      ) {
+        warnInDev(
+          'mf-checkbox requiere texto visible, `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-checkbox'];
+    if (this.isDisabled()) classes.push('mf-checkbox--disabled');
+    if (this.error()) classes.push('mf-checkbox--error');
+    return classes.join(' ');
+  });
+
+  writeValue(value: boolean | null): void {
+    this.internalValue.set(Boolean(value));
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(fn: (value: boolean) => 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)),
+    );
+  }
+
+  onCheckboxChange(event: { checked: boolean }): void {
+    this.internalValue.set(event.checked);
+    this.onControlChange(event.checked);
+    this.onControlTouched();
+    this.mfChange.emit(event.checked);
+  }
+
+  onBlur(): void {
+    this.onControlTouched();
+  }
+}

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

@@ -0,0 +1,2 @@
+export { MfChipComponent } from './mf-chip.component';
+export type { MfChipVariant, MfChipColor } from './mf-chip.component';

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

@@ -0,0 +1,69 @@
+:host {
+  display: inline-block;
+}
+
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-chip.mat-mdc-chip {
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  font-weight: var(--mf-weight-medium) !important;
+  border-radius: var(--mf-radius-full) !important;
+  transition:
+    background-color var(--mf-duration-base) var(--mf-ease-standard),
+    box-shadow var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+/* ── Filled — Brand ───────────────────────────────────────────── */
+.mf-chip--filled.mf-chip--brand.mat-mdc-chip {
+  background-color: var(--mf-color-primary-100) !important;
+  color: var(--mf-color-primary-800) !important;
+}
+
+/* ── Filled — Accent ──────────────────────────────────────────── */
+.mf-chip--filled.mf-chip--accent.mat-mdc-chip {
+  background-color: var(--mf-color-accent-300) !important;
+  color: var(--mf-color-accent-700) !important;
+}
+
+/* ── Filled — Error ───────────────────────────────────────────── */
+.mf-chip--filled.mf-chip--error.mat-mdc-chip {
+  background-color: #fee2e2 !important;
+  color: var(--mf-color-error-700) !important;
+}
+
+/* ── Filled — Neutral ─────────────────────────────────────────── */
+.mf-chip--filled.mf-chip--neutral.mat-mdc-chip {
+  background-color: var(--mf-color-neutral-100) !important;
+  color: var(--mf-color-neutral-600) !important;
+}
+
+/* ── Outlined ─────────────────────────────────────────────────── */
+.mf-chip--outlined.mat-mdc-chip {
+  background-color: transparent !important;
+  border: 1px solid var(--mf-color-border) !important;
+}
+
+.mf-chip--outlined.mf-chip--brand.mat-mdc-chip {
+  color: var(--mf-color-primary-700) !important;
+  border-color: var(--mf-color-primary-200) !important;
+}
+
+.mf-chip--outlined.mf-chip--accent.mat-mdc-chip {
+  color: var(--mf-color-accent-700) !important;
+  border-color: var(--mf-color-accent-300) !important;
+}
+
+.mf-chip--outlined.mf-chip--error.mat-mdc-chip {
+  color: var(--mf-color-error-700) !important;
+  border-color: var(--mf-color-error-500) !important;
+}
+
+/* ── Selected ─────────────────────────────────────────────────── */
+.mf-chip--selected.mat-mdc-chip {
+  box-shadow: var(--mf-shadow-sm);
+}
+
+/* ── Disabled ─────────────────────────────────────────────────── */
+.mf-chip.mat-mdc-chip.mat-mdc-chip-disabled {
+  opacity: 0.42;
+}

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

@@ -0,0 +1,47 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfChipComponent } from './mf-chip.component';
+
+describe('MfChipComponent', () => {
+  let fixture: ComponentFixture<MfChipComponent>;
+  let component: MfChipComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfChipComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfChipComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('label', 'Test');
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render chip label', () => {
+    const chip = fixture.nativeElement.querySelector('mat-chip');
+    expect(chip?.textContent).toContain('Test');
+  });
+
+  it('should apply brand class by default', () => {
+    expect(component.hostClasses()).toContain('mf-chip--brand');
+  });
+
+  it('should apply filled variant by default', () => {
+    expect(component.hostClasses()).toContain('mf-chip--filled');
+  });
+
+  it('should apply selected class when selected', () => {
+    fixture.componentRef.setInput('selected', true);
+    expect(component.hostClasses()).toContain('mf-chip--selected');
+  });
+
+  it('should show remove button when removable', () => {
+    fixture.componentRef.setInput('removable', true);
+    fixture.detectChanges();
+    const removeBtn = fixture.nativeElement.querySelector('[matChipRemove]');
+    expect(removeBtn).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,77 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+
+export type MfChipVariant = 'filled' | 'outlined';
+export type MfChipColor = 'brand' | 'accent' | 'error' | 'neutral';
+
+/**
+ * Chip de la librería ng-comps.
+ * Envuelve Angular Material `mat-chip` y expone una API uniforme
+ * con look and feel de marca. Ideal para tags, filtros y etiquetas.
+ */
+@Component({
+  selector: 'mf-chip',
+  imports: [MatChipsModule, MatIconModule],
+  template: `
+    @if (removable()) {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (removed)="mfRemoved.emit()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+        <button matChipRemove [attr.aria-label]="'Eliminar ' + label()">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip>
+    } @else {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+      </mat-chip>
+    }
+  `,
+  styleUrl: './mf-chip.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfChipComponent {
+  /** Texto del chip */
+  readonly label = input.required<string>();
+  /** Variante visual */
+  readonly variant = input<MfChipVariant>('filled');
+  /** Color semántico */
+  readonly color = input<MfChipColor>('brand');
+  /** Seleccionado */
+  readonly selected = input(false);
+  /** Puede ser removido */
+  readonly removable = input(false);
+  /** Deshabilitado */
+  readonly disabled = input(false);
+  /** Icono inicial */
+  readonly leadingIcon = input<string | undefined>(undefined);
+
+  readonly mfRemoved = output<void>();
+
+  readonly hostClasses = computed(() => {
+    const classes = ['mf-chip', `mf-chip--${this.variant()}`, `mf-chip--${this.color()}`];
+    if (this.selected()) classes.push('mf-chip--selected');
+    return classes.join(' ');
+  });
+}

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

@@ -0,0 +1,2 @@
+export { MfDatepickerComponent } from './mf-datepicker.component';
+export type { MfDatepickerSize } from './mf-datepicker.component';

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

@@ -0,0 +1,102 @@
+:host {
+  display: inline-block;
+}
+
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-datepicker {
+  font-family: var(--mf-font-base) !important;
+  width: 100%;
+}
+
+.mf-datepicker--full {
+  width: 100%;
+}
+
+/* ── Mat-form-field overrides ─────────────────────────────────── */
+.mf-datepicker .mat-mdc-text-field-wrapper {
+  border-radius: var(--mf-radius-md) !important;
+}
+
+.mf-datepicker .mdc-notched-outline__leading,
+.mf-datepicker .mdc-notched-outline__notch,
+.mf-datepicker .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-border) !important;
+  transition: border-color var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+.mf-datepicker .mat-mdc-form-field-focus-overlay {
+  background-color: transparent !important;
+}
+
+/* ── Focus state ──────────────────────────────────────────────── */
+.mf-datepicker.mat-focused .mdc-notched-outline__leading,
+.mf-datepicker.mat-focused .mdc-notched-outline__notch,
+.mf-datepicker.mat-focused .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-brand) !important;
+  border-width: 1.5px !important;
+}
+
+/* ── Error state ──────────────────────────────────────────────── */
+.mf-datepicker--error .mdc-notched-outline__leading,
+.mf-datepicker--error .mdc-notched-outline__notch,
+.mf-datepicker--error .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-error-500) !important;
+}
+
+/* ── Label styles ─────────────────────────────────────────────── */
+.mf-datepicker .mat-mdc-floating-label {
+  font-family: var(--mf-font-base) !important;
+  font-weight: var(--mf-weight-medium) !important;
+  color: var(--mf-color-neutral-400) !important;
+}
+
+.mf-datepicker.mat-focused .mat-mdc-floating-label {
+  color: var(--mf-color-brand) !important;
+}
+
+/* ── Input text ───────────────────────────────────────────────── */
+.mf-datepicker .mat-mdc-input-element {
+  font-family: var(--mf-font-base) !important;
+  color: var(--mf-color-on-surface) !important;
+  caret-color: var(--mf-color-brand);
+}
+
+/* ── Toggle icon ──────────────────────────────────────────────── */
+.mf-datepicker .mat-datepicker-toggle .mat-icon {
+  color: var(--mf-color-neutral-400) !important;
+  transition: color var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+.mf-datepicker.mat-focused .mat-datepicker-toggle .mat-icon {
+  color: var(--mf-color-brand) !important;
+}
+
+/* ── Hint & Error ─────────────────────────────────────────────── */
+.mf-datepicker .mat-mdc-form-field-hint {
+  font-size: var(--mf-text-xs) !important;
+  color: var(--mf-color-neutral-400) !important;
+}
+
+.mf-datepicker .mat-mdc-form-field-error {
+  font-size: var(--mf-text-xs) !important;
+}
+
+/* ── Sizes ─────────────────────────────────────────────────────── */
+.mf-datepicker--sm .mat-mdc-input-element {
+  font-size: var(--mf-text-sm) !important;
+}
+
+.mf-datepicker--md .mat-mdc-input-element {
+  font-size: var(--mf-text-base) !important;
+}
+
+.mf-datepicker--lg .mat-mdc-input-element {
+  font-size: var(--mf-text-lg) !important;
+  padding-top: var(--mf-space-1) !important;
+  padding-bottom: var(--mf-space-1) !important;
+}
+
+/* ── Disabled ──────────────────────────────────────────────────── */
+.mf-datepicker .mat-mdc-input-element:disabled {
+  color: var(--mf-color-neutral-300) !important;
+}

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

@@ -0,0 +1,69 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfDatepickerComponent } from './mf-datepicker.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfDatepickerComponent', () => {
+  let fixture: ComponentFixture<MfDatepickerComponent>;
+  let component: MfDatepickerComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfDatepickerComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfDatepickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render mat-form-field', () => {
+    const formField = fixture.nativeElement.querySelector('mat-form-field');
+    expect(formField).toBeTruthy();
+  });
+
+  it('should apply mf-datepicker class by default', () => {
+    expect(component.hostClasses()).toContain('mf-datepicker');
+    expect(component.hostClasses()).toContain('mf-datepicker--md');
+  });
+
+  it('should apply size class', () => {
+    fixture.componentRef.setInput('size', 'lg');
+    expect(component.hostClasses()).toContain('mf-datepicker--lg');
+  });
+
+  it('should apply full-width class when fullWidth is true', () => {
+    fixture.componentRef.setInput('fullWidth', true);
+    expect(component.hostClasses()).toContain('mf-datepicker--full');
+  });
+
+  it('should apply error class when error is provided', () => {
+    fixture.componentRef.setInput('error', 'Fecha requerida');
+    expect(component.hostClasses()).toContain('mf-datepicker--error');
+  });
+
+  it('should render label when provided', () => {
+    fixture.componentRef.setInput('label', 'Fecha de inicio');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('mat-label');
+    expect(label?.textContent).toContain('Fecha de inicio');
+  });
+
+  it('should render hint when provided', () => {
+    fixture.componentRef.setInput('hint', 'Selecciona una fecha');
+    fixture.detectChanges();
+    const hint = fixture.nativeElement.querySelector('mat-hint');
+    expect(hint).toBeTruthy();
+  });
+
+  it('should emit mfChange on date change', () => {
+    const spy = vi.fn();
+    component.mfChange.subscribe(spy);
+    const date = new Date(2025, 0, 15);
+    component.onDateChange({ value: date });
+    expect(spy).toHaveBeenCalledWith(date);
+  });
+});