ng-comps 1.0.2 → 2.0.0

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

@@ -1,57 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfSidenavComponent } from './mf-sidenav.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfSidenavComponent', () => {
-  let fixture: ComponentFixture<MfSidenavComponent>;
-  let component: MfSidenavComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfSidenavComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfSidenavComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render mat-sidenav-container', () => {
-    const container = fixture.nativeElement.querySelector('mat-sidenav-container');
-    expect(container).toBeTruthy();
-  });
-
-  it('should render mat-sidenav', () => {
-    const sidenav = fixture.nativeElement.querySelector('mat-sidenav');
-    expect(sidenav).toBeTruthy();
-  });
-
-  it('should apply side class by default', () => {
-    expect(component.sidenavClasses()).toContain('mf-sidenav--side');
-  });
-
-  it('should apply over class when mode is over', () => {
-    fixture.componentRef.setInput('mode', 'over');
-    expect(component.sidenavClasses()).toContain('mf-sidenav--over');
-  });
-
-  it('should apply push class when mode is push', () => {
-    fixture.componentRef.setInput('mode', 'push');
-    expect(component.sidenavClasses()).toContain('mf-sidenav--push');
-  });
-
-  it('should emit mfOpenedChange when sidenav state changes', () => {
-    const spy = vi.fn();
-    component.mfOpenedChange.subscribe(spy);
-    fixture.componentRef.setInput('opened', true);
-    fixture.detectChanges();
-  });
-
-  it('should apply container class', () => {
-    expect(component.containerClasses()).toBe('mf-sidenav-container');
-  });
-});

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

@@ -1,126 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatIconModule } from '@angular/material/icon';
-
-export type MfSidenavMode = 'over' | 'push' | 'side';
-export type MfSidenavPosition = 'start' | 'end';
-
-export interface MfSidenavNavItem {
-  /** Nombre del icono Material (e.g. 'home', 'dashboard') */
-  icon: string;
-  /** Texto de la etiqueta */
-  label: string;
-  /** Identificador único del ítem */
-  id: string;
-  /** Ítem activo/seleccionado */
-  active?: boolean;
-  /** Deshabilitar el ítem */
-  disabled?: boolean;
-  /** Número de badge (0 oculta el badge) */
-  badge?: number;
-}
-
-/**
- * Panel lateral de la librería ng-comps.
- * Envuelve Angular Material `mat-sidenav-container` y expone una API uniforme
- * con look and feel de marca.
- *
- * Dos formas de uso:
- * 1. **Navitems declarativos** — Proporciona `navItems`, `headerTitle` e icono.
- * 2. **Content projection** — Proyecta `[mfSidenavContent]` para control total.
- *
- * El contenido principal se proyecta sin atributo.
- */
-@Component({
-  selector: 'mf-sidenav',
-  imports: [MatSidenavModule, MatIconModule],
-  template: `
-    <mat-sidenav-container [class]="containerClasses()" [hasBackdrop]="hasBackdrop()">
-      <mat-sidenav
-        [class]="sidenavClasses()"
-        [mode]="mode()"
-        [position]="position()"
-        [opened]="opened()"
-        [style.width]="sidenavWidth()"
-        (openedChange)="mfOpenedChange.emit($event)"
-      >
-        @if (navItems().length > 0) {
-          <div class="mf-sidenav__nav">
-            @if (headerTitle()) {
-              <div class="mf-sidenav__header">
-                @if (headerIcon()) {
-                  <mat-icon class="mf-sidenav__header-icon" aria-hidden="true">{{ headerIcon() }}</mat-icon>
-                }
-                <span class="mf-sidenav__header-title">{{ headerTitle() }}</span>
-              </div>
-            }
-            <nav class="mf-sidenav__menu" [attr.aria-label]="navAriaLabel()">
-              @for (item of navItems(); track item.id) {
-                <button
-                  type="button"
-                  class="mf-sidenav__item"
-                  [class.mf-sidenav__item--active]="item.active"
-                  [class.mf-sidenav__item--disabled]="item.disabled"
-                  [disabled]="item.disabled ?? false"
-                  [attr.aria-current]="item.active ? 'page' : null"
-                  (click)="!item.disabled && mfNavItemClick.emit(item)"
-                >
-                  <mat-icon class="mf-sidenav__item-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
-                  <span class="mf-sidenav__item-label">{{ item.label }}</span>
-                  @if (item.badge && item.badge > 0) {
-                    <span class="mf-sidenav__item-badge" aria-label="{{ item.badge }} notifications">
-                      {{ item.badge > 99 ? '99+' : item.badge }}
-                    </span>
-                  }
-                </button>
-              }
-            </nav>
-          </div>
-        } @else {
-          <ng-content select="[mfSidenavContent]" />
-        }
-      </mat-sidenav>
-      <mat-sidenav-content class="mf-sidenav__main">
-        <ng-content />
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `,
-  styleUrl: './mf-sidenav.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfSidenavComponent {
-  /** Abierto o cerrado */
-  readonly opened = input(false);
-  /** Modo de apertura */
-  readonly mode = input<MfSidenavMode>('side');
-  /** Posición del panel */
-  readonly position = input<MfSidenavPosition>('start');
-  /** Muestra backdrop al abrir */
-  readonly hasBackdrop = input<boolean | null>(null);
-  /** Ancho del panel lateral */
-  readonly sidenavWidth = input('260px');
-  /** Ítems de navegación declarativos */
-  readonly navItems = input<MfSidenavNavItem[]>([]);
-  /** Título de la cabecera del sidenav */
-  readonly headerTitle = input<string | undefined>(undefined);
-  /** Icono Material de la cabecera */
-  readonly headerIcon = input<string | undefined>(undefined);
-  /** Aria-label del elemento nav */
-  readonly navAriaLabel = input('Primary navigation');
-
-  readonly mfOpenedChange = output<boolean>();
-  /** Emite el ítem de navegación pulsado */
-  readonly mfNavItemClick = output<MfSidenavNavItem>();
-
-  readonly containerClasses = computed(() => 'mf-sidenav-container');
-
-  readonly sidenavClasses = computed(() => {
-    return `mf-sidenav mf-sidenav--${this.mode()}`;
-  });
-}

package/src/app/components/slide-toggle/index.ts

@@ -1 +0,0 @@
-export { MfSlideToggleComponent } from './mf-slide-toggle.component';

package/src/app/components/slide-toggle/mf-slide-toggle.component.css

@@ -1,42 +0,0 @@
-:host {
-  display: block;
-}
-
-.mf-slide-toggle {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mf-space-1);
-}
-
-.mf-slide-toggle .mat-mdc-slide-toggle {
-  font-family: var(--mf-font-base) !important;
-  font-size: var(--mf-text-sm) !important;
-}
-
-.mf-slide-toggle .mdc-switch--selected .mdc-switch__track::after {
-  background-color: var(--mf-color-primary-200) !important;
-}
-
-.mf-slide-toggle .mdc-switch--selected .mdc-switch__handle::after {
-  background-color: var(--mf-color-brand) !important;
-}
-
-.mf-slide-toggle--disabled {
-  opacity: 0.42;
-}
-
-.mf-slide-toggle__hint,
-.mf-slide-toggle__error {
-  margin: 0;
-  padding-left: calc(36px + var(--mf-space-2));
-  font-size: var(--mf-text-xs);
-  line-height: var(--mf-leading-normal);
-}
-
-.mf-slide-toggle__hint {
-  color: var(--mf-color-neutral-600);
-}
-
-.mf-slide-toggle__error {
-  color: var(--mf-color-error-500);
-}

package/src/app/components/slide-toggle/mf-slide-toggle.component.spec.ts

@@ -1,43 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfSlideToggleComponent } from './mf-slide-toggle.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfSlideToggleComponent', () => {
-  let fixture: ComponentFixture<MfSlideToggleComponent>;
-  let component: MfSlideToggleComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfSlideToggleComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfSlideToggleComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render mat-slide-toggle', () => {
-    const toggle = fixture.nativeElement.querySelector('mat-slide-toggle');
-    expect(toggle).toBeTruthy();
-  });
-
-  it('should apply base class', () => {
-    expect(component.hostClasses()).toContain('mf-slide-toggle');
-  });
-
-  it('should apply disabled class when disabled', () => {
-    fixture.componentRef.setInput('disabled', true);
-    expect(component.hostClasses()).toContain('mf-slide-toggle--disabled');
-  });
-
-  it('should emit change event', () => {
-    const spy = vi.fn();
-    component.mfChange.subscribe(spy);
-    component.onChange({ checked: true });
-    expect(spy).toHaveBeenCalledWith(true);
-  });
-});

package/src/app/components/slide-toggle/mf-slide-toggle.component.ts

@@ -1,188 +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 { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import {
-  createUniqueId,
-  hasAccessibleName,
-  mergeAriaIds,
-  warnInDev,
-} from '../../a11y';
-
-/**
- * Slide Toggle de la librería ng-comps.
- * Envuelve Angular Material `mat-slide-toggle` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-slide-toggle',
-  imports: [MatSlideToggleModule],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MfSlideToggleComponent),
-      multi: true,
-    },
-  ],
-  template: `
-    <div [class]="hostClasses()">
-      <mat-slide-toggle
-        [id]="controlId()"
-        [checked]="internalValue()"
-        [disabled]="isDisabled()"
-        [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)="onToggleChange($event)"
-        (blur)="onBlur()"
-      >
-        {{ label() }}
-      </mat-slide-toggle>
-
-      @if (hint()) {
-        <p class="mf-slide-toggle__hint" [attr.id]="hintId()">{{ hint() }}</p>
-      }
-
-      @if (error()) {
-        <p class="mf-slide-toggle__error" [attr.id]="errorId()" role="alert">
-          {{ error() }}
-        </p>
-      }
-    </div>
-  `,
-  styleUrl: './mf-slide-toggle.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfSlideToggleComponent implements ControlValueAccessor {
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly ngControl = inject(NgControl, { self: true, optional: true });
-  private readonly generatedId = createUniqueId('mf-slide-toggle');
-  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 descriptivo */
-  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 activado */
-  readonly checked = 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-slide-toggle 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-slide-toggle'];
-    if (this.isDisabled()) classes.push('mf-slide-toggle--disabled');
-    if (this.error()) classes.push('mf-slide-toggle--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)),
-    );
-  }
-
-  onToggleChange(event: { checked: boolean }): void {
-    this.internalValue.set(event.checked);
-    this.onControlChange(event.checked);
-    this.onControlTouched();
-    this.mfChange.emit(event.checked);
-  }
-
-  onChange(event: { checked: boolean }): void {
-    this.onToggleChange(event);
-  }
-
-  onBlur(): void {
-    this.onControlTouched();
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfSnackbarService } from './mf-snackbar.service';
-export type { MfSnackbarType, MfSnackbarConfig } from './mf-snackbar.service';

package/src/app/components/snackbar/mf-snackbar.service.css

@@ -1,31 +0,0 @@
-/* These styles should be placed in a global stylesheet since snackbar renders in overlay */
-.mf-snackbar.mat-mdc-snack-bar-container .mdc-snackbar__surface {
-  border-radius: var(--mf-radius-md) !important;
-  font-family: var(--mf-font-base) !important;
-}
-
-.mf-snackbar--info.mat-mdc-snack-bar-container .mdc-snackbar__surface {
-  background-color: var(--mf-color-secondary-700) !important;
-  color: var(--mf-color-neutral-0) !important;
-}
-
-.mf-snackbar--success.mat-mdc-snack-bar-container .mdc-snackbar__surface {
-  background-color: var(--mf-color-primary-700) !important;
-  color: var(--mf-color-on-brand) !important;
-}
-
-.mf-snackbar--warning.mat-mdc-snack-bar-container .mdc-snackbar__surface {
-  background-color: var(--mf-color-accent-500) !important;
-  color: var(--mf-color-neutral-900) !important;
-}
-
-.mf-snackbar--error.mat-mdc-snack-bar-container .mdc-snackbar__surface {
-  background-color: var(--mf-color-error-500) !important;
-  color: var(--mf-color-neutral-0) !important;
-}
-
-.mf-snackbar .mat-mdc-snack-bar-action .mdc-button__label {
-  color: inherit !important;
-  font-weight: var(--mf-weight-bold) !important;
-  opacity: 0.9;
-}

package/src/app/components/snackbar/mf-snackbar.service.spec.ts

@@ -1,81 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { MatSnackBar } from '@angular/material/snack-bar';
-import { MfSnackbarService } from './mf-snackbar.service';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfSnackbarService', () => {
-  let service: MfSnackbarService;
-  let snackBarSpy: { open: ReturnType<typeof vi.fn> };
-
-  beforeEach(() => {
-    snackBarSpy = { open: vi.fn().mockReturnValue({}) };
-
-    TestBed.configureTestingModule({
-      imports: [NoopAnimationsModule],
-      providers: [
-        MfSnackbarService,
-        { provide: MatSnackBar, useValue: snackBarSpy },
-      ],
-    });
-
-    service = TestBed.inject(MfSnackbarService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should call matSnackBar.open with info type', () => {
-    service.info('Hello');
-    expect(snackBarSpy.open).toHaveBeenCalledWith(
-      'Hello',
-      undefined,
-      expect.objectContaining({
-        panelClass: ['mf-snackbar', 'mf-snackbar--info'],
-      }),
-    );
-  });
-
-  it('should call matSnackBar.open with success type', () => {
-    service.success('Done', 'OK');
-    expect(snackBarSpy.open).toHaveBeenCalledWith(
-      'Done',
-      'OK',
-      expect.objectContaining({
-        panelClass: ['mf-snackbar', 'mf-snackbar--success'],
-      }),
-    );
-  });
-
-  it('should call matSnackBar.open with error type', () => {
-    service.error('Oops');
-    expect(snackBarSpy.open).toHaveBeenCalledWith(
-      'Oops',
-      undefined,
-      expect.objectContaining({
-        panelClass: ['mf-snackbar', 'mf-snackbar--error'],
-      }),
-    );
-  });
-
-  it('should use custom config', () => {
-    service.open({
-      message: 'Custom',
-      action: 'Undo',
-      type: 'warning',
-      duration: 8000,
-      horizontalPosition: 'center',
-      verticalPosition: 'top',
-    });
-    expect(snackBarSpy.open).toHaveBeenCalledWith(
-      'Custom',
-      'Undo',
-      expect.objectContaining({
-        duration: 8000,
-        horizontalPosition: 'center',
-        verticalPosition: 'top',
-        panelClass: ['mf-snackbar', 'mf-snackbar--warning'],
-      }),
-    );
-  });
-});

package/src/app/components/snackbar/mf-snackbar.service.ts

@@ -1,77 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import {
-  MatSnackBar,
-  MatSnackBarConfig,
-  MatSnackBarRef,
-  TextOnlySnackBar,
-} from '@angular/material/snack-bar';
-
-export type MfSnackbarType = 'info' | 'success' | 'warning' | 'error';
-export type MfSnackbarPoliteness = 'off' | 'assertive' | 'polite';
-
-export interface MfSnackbarConfig {
-  message: string;
-  action?: string;
-  type?: MfSnackbarType;
-  duration?: number;
-  horizontalPosition?: 'start' | 'center' | 'end';
-  verticalPosition?: 'top' | 'bottom';
-  politeness?: MfSnackbarPoliteness;
-  announcementMessage?: string;
-}
-
-/**
- * Servicio de Snackbar de la librería ng-comps.
- * Envuelve Angular Material `MatSnackBar` y expone una API uniforme
- * con estilos de marca y tipos semánticos.
- */
-@Injectable({ providedIn: 'root' })
-export class MfSnackbarService {
-  private readonly matSnackBar = inject(MatSnackBar);
-
-  open(config: MfSnackbarConfig): MatSnackBarRef<TextOnlySnackBar> {
-    const type = config.type ?? 'info';
-    const matConfig: MatSnackBarConfig = {
-      duration: config.duration ?? this.defaultDuration(type),
-      horizontalPosition: config.horizontalPosition ?? 'end',
-      verticalPosition: config.verticalPosition ?? 'bottom',
-      politeness: config.politeness ?? this.defaultPoliteness(type),
-      announcementMessage: config.announcementMessage ?? config.message,
-      panelClass: ['mf-snackbar', `mf-snackbar--${type}`],
-    };
-
-    return this.matSnackBar.open(config.message, config.action, matConfig);
-  }
-
-  info(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar> {
-    return this.open({ message, action, type: 'info' });
-  }
-
-  success(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar> {
-    return this.open({ message, action, type: 'success' });
-  }
-
-  warning(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar> {
-    return this.open({ message, action, type: 'warning' });
-  }
-
-  error(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar> {
-    return this.open({ message, action, type: 'error' });
-  }
-
-  private defaultDuration(type: MfSnackbarType): number {
-    if (type === 'error' || type === 'warning') {
-      return 6000;
-    }
-
-    return 4000;
-  }
-
-  private defaultPoliteness(type: MfSnackbarType): MfSnackbarPoliteness {
-    if (type === 'error' || type === 'warning') {
-      return 'assertive';
-    }
-
-    return 'polite';
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfTableComponent } from './mf-table.component';
-export type { MfTableColumn, MfTableVariant } from './mf-table.component';