ng-comps 0.2.0 → 1.0.0

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

@@ -0,0 +1,53 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from '@angular/core';
+import { MatExpansionModule } from '@angular/material/expansion';
+
+export interface MfAccordionPanel {
+  title: string;
+  description?: string;
+  content: string;
+  expanded?: boolean;
+  disabled?: boolean;
+}
+
+/**
+ * Accordion de la librería ng-comps.
+ * Envuelve Angular Material `mat-accordion` / `mat-expansion-panel` y expone
+ * una API uniforme con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-accordion',
+  imports: [MatExpansionModule],
+  template: `
+    <mat-accordion [multi]="multi()" [class]="hostClasses()">
+      @for (panel of panels(); track panel.title) {
+        <mat-expansion-panel
+          [expanded]="panel.expanded ?? false"
+          [disabled]="panel.disabled ?? false"
+        >
+          <mat-expansion-panel-header>
+            <mat-panel-title>{{ panel.title }}</mat-panel-title>
+            @if (panel.description) {
+              <mat-panel-description>{{ panel.description }}</mat-panel-description>
+            }
+          </mat-expansion-panel-header>
+          <p>{{ panel.content }}</p>
+        </mat-expansion-panel>
+      }
+    </mat-accordion>
+  `,
+  styleUrl: './mf-accordion.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfAccordionComponent {
+  /** Paneles del accordion */
+  readonly panels = input.required<MfAccordionPanel[]>();
+  /** Permite múltiples paneles abiertos */
+  readonly multi = input(false);
+
+  readonly hostClasses = computed(() => 'mf-accordion');
+}

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

@@ -0,0 +1,2 @@
+export { MfAlertComponent } from './mf-alert.component';
+export type { MfAlertSeverity } from './mf-alert.component';

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

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

@@ -0,0 +1,59 @@
+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', 'Atención');
+    fixture.detectChanges();
+    const title = fixture.nativeElement.querySelector('.mf-alert__title');
+    expect(title?.textContent).toContain('Atención');
+  });
+
+  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

@@ -0,0 +1,68 @@
+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]="'Cerrar alerta'"
+        >
+          <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

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

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

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

@@ -0,0 +1,116 @@
+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');
+  });
+});