ng-comps 1.0.2 → 2.0.0

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

@@ -1,100 +0,0 @@
-:host {
-  display: block;
-}
-
-.mf-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--mf-space-3);
-  padding: var(--mf-space-3) var(--mf-space-4);
-  border-radius: var(--mf-radius-md);
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-sm);
-  line-height: var(--mf-leading-normal);
-}
-
-/* ── Info ──────────────────────────────────────────────────────── */
-.mf-alert--info {
-  background-color: var(--mf-color-secondary-50);
-  border-left: 4px solid var(--mf-color-secondary-500);
-  color: var(--mf-color-secondary-900);
-}
-
-.mf-alert--info .mf-alert__icon {
-  color: var(--mf-color-secondary-500);
-}
-
-/* ── Success ──────────────────────────────────────────────────── */
-.mf-alert--success {
-  background-color: var(--mf-color-primary-50);
-  border-left: 4px solid var(--mf-color-primary-500);
-  color: var(--mf-color-primary-900);
-}
-
-.mf-alert--success .mf-alert__icon {
-  color: var(--mf-color-primary-500);
-}
-
-/* ── Warning ──────────────────────────────────────────────────── */
-.mf-alert--warning {
-  background-color: #fffbeb;
-  border-left: 4px solid var(--mf-color-accent-500);
-  color: var(--mf-color-accent-700);
-}
-
-.mf-alert--warning .mf-alert__icon {
-  color: var(--mf-color-accent-500);
-}
-
-/* ── Error ─────────────────────────────────────────────────────── */
-.mf-alert--error {
-  background-color: #fef2f2;
-  border-left: 4px solid var(--mf-color-error-500);
-  color: var(--mf-color-error-700);
-}
-
-.mf-alert--error .mf-alert__icon {
-  color: var(--mf-color-error-500);
-}
-
-/* ── Content ──────────────────────────────────────────────────── */
-.mf-alert__content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--mf-space-1);
-}
-
-.mf-alert__title {
-  font-weight: var(--mf-weight-bold);
-}
-
-.mf-alert__icon {
-  flex-shrink: 0;
-  margin-top: 1px;
-}
-
-/* ── Close button ─────────────────────────────────────────────── */
-.mf-alert__close {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: var(--mf-space-1);
-  border-radius: var(--mf-radius-sm);
-  color: inherit;
-  opacity: 0.6;
-  transition: opacity var(--mf-duration-fast) var(--mf-ease-standard);
-}
-
-.mf-alert__close:hover {
-  opacity: 1;
-}
-
-.mf-alert__close .mat-icon {
-  font-size: 18px;
-  width: 18px;
-  height: 18px;
-}

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

@@ -1,59 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfAlertComponent } from './mf-alert.component';
-
-describe('MfAlertComponent', () => {
-  let fixture: ComponentFixture<MfAlertComponent>;
-  let component: MfAlertComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfAlertComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfAlertComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('message', 'Test alert');
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render message', () => {
-    const msg = fixture.nativeElement.querySelector('.mf-alert__message');
-    expect(msg?.textContent).toContain('Test alert');
-  });
-
-  it('should apply info severity by default', () => {
-    expect(component.hostClasses()).toContain('mf-alert--info');
-  });
-
-  it('should show info icon by default', () => {
-    expect(component.iconName()).toBe('info');
-  });
-
-  it('should show check_circle icon for success', () => {
-    fixture.componentRef.setInput('severity', 'success');
-    expect(component.iconName()).toBe('check_circle');
-  });
-
-  it('should show title when provided', () => {
-    fixture.componentRef.setInput('title', 'Attention');
-    fixture.detectChanges();
-    const title = fixture.nativeElement.querySelector('.mf-alert__title');
-    expect(title?.textContent).toContain('Attention');
-  });
-
-  it('should show close button when dismissible', () => {
-    fixture.componentRef.setInput('dismissible', true);
-    fixture.detectChanges();
-    const close = fixture.nativeElement.querySelector('.mf-alert__close');
-    expect(close).toBeTruthy();
-  });
-
-  it('should have role alert', () => {
-    const alert = fixture.nativeElement.querySelector('[role="alert"]');
-    expect(alert).toBeTruthy();
-  });
-});

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

@@ -1,68 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-
-export type MfAlertSeverity = 'info' | 'success' | 'warning' | 'error';
-
-/**
- * Alerta de la librería ng-comps.
- * Componente de banner para mensajes de sistema, alertas y notificaciones.
- * Ideal para dashboards y paneles administrativos.
- */
-@Component({
-  selector: 'mf-alert',
-  imports: [MatIconModule],
-  template: `
-    <div [class]="hostClasses()" role="alert">
-      <mat-icon class="mf-alert__icon" aria-hidden="true">{{ iconName() }}</mat-icon>
-      <div class="mf-alert__content">
-        @if (title()) {
-          <strong class="mf-alert__title">{{ title() }}</strong>
-        }
-        <span class="mf-alert__message">{{ message() }}</span>
-      </div>
-      @if (dismissible()) {
-        <button
-          class="mf-alert__close"
-          (click)="mfDismiss.emit()"
-          [attr.aria-label]="'Close alert'"
-        >
-          <mat-icon aria-hidden="true">close</mat-icon>
-        </button>
-      }
-    </div>
-  `,
-  styleUrl: './mf-alert.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfAlertComponent {
-  /** Mensaje principal */
-  readonly message = input.required<string>();
-  /** Título opcional */
-  readonly title = input<string | undefined>(undefined);
-  /** Severidad de la alerta */
-  readonly severity = input<MfAlertSeverity>('info');
-  /** Se puede cerrar */
-  readonly dismissible = input(false);
-
-  readonly mfDismiss = output<void>();
-
-  readonly iconName = computed(() => {
-    const map: Record<MfAlertSeverity, string> = {
-      info: 'info',
-      success: 'check_circle',
-      warning: 'warning',
-      error: 'error',
-    };
-    return map[this.severity()];
-  });
-
-  readonly hostClasses = computed(() => {
-    return ['mf-alert', `mf-alert--${this.severity()}`].join(' ');
-  });
-}

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

@@ -1,5 +0,0 @@
-export { MfAutocompleteComponent } from './mf-autocomplete.component';
-export type {
-  MfAutocompleteOption,
-  MfAutocompleteSize,
-} from './mf-autocomplete.component';

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

@@ -1,105 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-autocomplete {
-  font-family: var(--mf-font-base) !important;
-  width: 100%;
-}
-
-.mf-autocomplete--full {
-  width: 100%;
-}
-
-/* ── Mat-form-field overrides ─────────────────────────────────── */
-.mf-autocomplete .mat-mdc-text-field-wrapper {
-  border-radius: var(--mf-radius-md) !important;
-}
-
-.mf-autocomplete .mdc-notched-outline__leading,
-.mf-autocomplete .mdc-notched-outline__notch,
-.mf-autocomplete .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-border) !important;
-  transition: border-color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-autocomplete .mat-mdc-form-field-focus-overlay {
-  background-color: transparent !important;
-}
-
-/* ── Focus state ──────────────────────────────────────────────── */
-.mf-autocomplete.mat-focused .mdc-notched-outline__leading,
-.mf-autocomplete.mat-focused .mdc-notched-outline__notch,
-.mf-autocomplete.mat-focused .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-brand) !important;
-  border-width: 1.5px !important;
-}
-
-/* ── Error state ──────────────────────────────────────────────── */
-.mf-autocomplete--error .mdc-notched-outline__leading,
-.mf-autocomplete--error .mdc-notched-outline__notch,
-.mf-autocomplete--error .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-error-500) !important;
-}
-
-/* ── Label ────────────────────────────────────────────────────── */
-.mf-autocomplete .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-autocomplete.mat-focused .mat-mdc-floating-label {
-  color: var(--mf-color-brand) !important;
-}
-
-/* ── Input text ───────────────────────────────────────────────── */
-.mf-autocomplete .mat-mdc-input-element {
-  font-family: var(--mf-font-base) !important;
-  color: var(--mf-color-on-surface) !important;
-  caret-color: var(--mf-color-brand);
-}
-
-/* ── Hint & Error ─────────────────────────────────────────────── */
-.mf-autocomplete .mat-mdc-form-field-hint {
-  font-size: var(--mf-text-xs) !important;
-  color: var(--mf-color-neutral-400) !important;
-}
-
-.mf-autocomplete .mat-mdc-form-field-error {
-  font-size: var(--mf-text-xs) !important;
-}
-
-/* ── Prefix / Suffix icons ────────────────────────────────────── */
-.mf-autocomplete .mat-icon {
-  color: var(--mf-color-neutral-400) !important;
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  transition: color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-autocomplete.mat-focused .mat-icon {
-  color: var(--mf-color-brand) !important;
-}
-
-/* ── Sizes ─────────────────────────────────────────────────────── */
-.mf-autocomplete--sm .mat-mdc-input-element {
-  font-size: var(--mf-text-sm) !important;
-}
-
-.mf-autocomplete--md .mat-mdc-input-element {
-  font-size: var(--mf-text-base) !important;
-}
-
-.mf-autocomplete--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-autocomplete .mat-mdc-input-element:disabled {
-  color: var(--mf-color-neutral-300) !important;
-}

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

@@ -1,116 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfAutocompleteComponent } from './mf-autocomplete.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfAutocompleteComponent', () => {
-  let fixture: ComponentFixture<MfAutocompleteComponent>;
-  let component: MfAutocompleteComponent;
-
-  const testOptions = [
-    { value: '1', label: 'Angular' },
-    { value: '2', label: 'React' },
-    { value: '3', label: 'Vue' },
-    { value: '4', label: 'Svelte', disabled: true },
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfAutocompleteComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfAutocompleteComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('options', testOptions);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render input with mat-autocomplete', () => {
-    const input = fixture.nativeElement.querySelector('input[matinput]');
-    expect(input).toBeTruthy();
-  });
-
-  it('should apply md size class by default', () => {
-    expect(component.hostClasses()).toContain('mf-autocomplete--md');
-  });
-
-  it('should apply sm size class', () => {
-    fixture.componentRef.setInput('size', 'sm');
-    expect(component.hostClasses()).toContain('mf-autocomplete--sm');
-  });
-
-  it('should apply lg size class', () => {
-    fixture.componentRef.setInput('size', 'lg');
-    expect(component.hostClasses()).toContain('mf-autocomplete--lg');
-  });
-
-  it('should include mf-autocomplete--full when fullWidth is true', () => {
-    fixture.componentRef.setInput('fullWidth', true);
-    expect(component.hostClasses()).toContain('mf-autocomplete--full');
-  });
-
-  it('should include mf-autocomplete--error when error is provided', () => {
-    fixture.componentRef.setInput('error', 'Required');
-    expect(component.hostClasses()).toContain('mf-autocomplete--error');
-  });
-
-  it('should include mf-autocomplete-panel in panelClasses by default', () => {
-    expect(component.autocompletePanelClasses()).toContain('mf-autocomplete-panel');
-  });
-
-  it('should merge extra panelClass string', () => {
-    fixture.componentRef.setInput('panelClass', 'custom-panel');
-    expect(component.autocompletePanelClasses()).toContain('mf-autocomplete-panel');
-    expect(component.autocompletePanelClasses()).toContain('custom-panel');
-  });
-
-  it('should filter options based on input text', () => {
-    component.inputValue = 'ang';
-    fixture.detectChanges();
-    const filtered = component.filteredOptions();
-    expect(filtered.length).toBe(1);
-    expect(filtered[0].label).toBe('Angular');
-  });
-
-  it('should return all options when input is empty', () => {
-    component.inputValue = '';
-    expect(component.filteredOptions().length).toBe(testOptions.length);
-  });
-
-  it('should emit mfInput on input change', () => {
-    const spy = vi.fn();
-    component.mfInput.subscribe(spy);
-    component.onInputChange('Ang');
-    expect(spy).toHaveBeenCalledWith('Ang');
-  });
-
-  it('should emit mfOptionSelected when option is selected', () => {
-    const spy = vi.fn();
-    component.mfOptionSelected.subscribe(spy);
-    component.onOptionSelected({ option: { value: 'Angular' } });
-    expect(spy).toHaveBeenCalledWith(testOptions[0]);
-  });
-
-  it('should render label when provided', () => {
-    fixture.componentRef.setInput('label', 'Framework');
-    fixture.detectChanges();
-    const label = fixture.nativeElement.querySelector('mat-label');
-    expect(label?.textContent).toContain('Framework');
-  });
-
-  it('should render hint when provided', () => {
-    fixture.componentRef.setInput('hint', 'Start typing...');
-    fixture.detectChanges();
-    const hint = fixture.nativeElement.querySelector('mat-hint');
-    expect(hint?.textContent).toContain('Start typing...');
-  });
-
-  it('should render error when provided', () => {
-    fixture.componentRef.setInput('error', 'Selection required');
-    fixture.detectChanges();
-    expect(fixture.nativeElement.textContent).toContain('Selection required');
-  });
-});