ng-comps 1.0.2 → 2.0.0

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

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

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

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

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

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

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

@@ -1,77 +0,0 @@
-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]="'Remove ' + 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

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

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

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

@@ -1,69 +0,0 @@
-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', 'Date required');
-    expect(component.hostClasses()).toContain('mf-datepicker--error');
-  });
-
-  it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Start date');
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('mat-label');
-    expect(label?.textContent).toContain('Start date');
-  });
-
-  it('should render hint when provided', () => {
-    fixture.componentRef.setInput('hint', 'Select a date');
-    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);
-  });
-});