ng-comps 0.2.0 → 1.0.0

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

@@ -0,0 +1,68 @@
+:host {
+  display: block;
+}
+
+.mf-table__wrapper {
+  overflow-x: auto;
+  border-radius: var(--mf-radius-md);
+  border: 1px solid var(--mf-color-border);
+}
+
+.mf-table .mat-mdc-table {
+  width: 100%;
+  font-family: var(--mf-font-base) !important;
+}
+
+.mf-table .mat-mdc-header-cell {
+  font-family: var(--mf-font-base) !important;
+  font-weight: var(--mf-weight-bold) !important;
+  font-size: var(--mf-text-sm) !important;
+  color: var(--mf-color-neutral-600) !important;
+  background-color: var(--mf-color-neutral-50) !important;
+  border-bottom-color: var(--mf-color-border) !important;
+}
+
+.mf-table .mat-mdc-cell {
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  color: var(--mf-color-on-surface) !important;
+  border-bottom-color: var(--mf-color-border) !important;
+}
+
+.mf-table .mat-mdc-row:hover {
+  background-color: var(--mf-color-brand-light) !important;
+}
+
+/* ── Striped ──────────────────────────────────────────────────── */
+.mf-table--striped .mat-mdc-row:nth-child(even) {
+  background-color: var(--mf-color-neutral-50);
+}
+
+/* ── Bordered ─────────────────────────────────────────────────── */
+.mf-table--bordered .mat-mdc-cell,
+.mf-table--bordered .mat-mdc-header-cell {
+  border-right: 1px solid var(--mf-color-border) !important;
+}
+
+.mf-table--bordered .mat-mdc-cell:last-child,
+.mf-table--bordered .mat-mdc-header-cell:last-child {
+  border-right: none !important;
+}
+
+/* ── Sort header ──────────────────────────────────────────────── */
+.mf-table .mat-sort-header-arrow {
+  color: var(--mf-color-brand) !important;
+}
+
+.mf-table__actions-header,
+.mf-table__actions-cell {
+  white-space: nowrap;
+  width: 1%;
+}
+
+.mf-table__action {
+  min-width: 0;
+  font-family: var(--mf-font-base) !important;
+  font-size: var(--mf-text-sm) !important;
+  font-weight: var(--mf-weight-medium) !important;
+}

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

@@ -0,0 +1,76 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfTableComponent } from './mf-table.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfTableComponent', () => {
+  let fixture: ComponentFixture<MfTableComponent>;
+  let component: MfTableComponent;
+
+  const testColumns = [
+    { key: 'name', header: 'Name' },
+    { key: 'email', header: 'Email' },
+  ];
+
+  const testData = [
+    { name: 'John', email: 'john@test.com' },
+    { name: 'Jane', email: 'jane@test.com' },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfTableComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfTableComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('columns', testColumns);
+    fixture.componentRef.setInput('data', testData);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should compute displayed columns', () => {
+    expect(component.displayedColumns()).toEqual(['name', 'email']);
+  });
+
+  it('should render table', () => {
+    const table = fixture.nativeElement.querySelector('table');
+    expect(table).toBeTruthy();
+  });
+
+  it('should render header cells', () => {
+    const headers = fixture.nativeElement.querySelectorAll('th');
+    expect(headers.length).toBe(2);
+  });
+
+  it('should render data rows', () => {
+    const rows = fixture.nativeElement.querySelectorAll('tr.mat-mdc-row');
+    expect(rows.length).toBe(2);
+  });
+
+  it('should apply default variant', () => {
+    expect(component.hostClasses()).toContain('mf-table--default');
+  });
+
+  it('should expose per-row aria labels for explicit actions', () => {
+    fixture.componentRef.setInput('rowActionLabel', 'Ver detalle');
+    fixture.componentRef.setInput(
+      'rowActionAriaLabel',
+      (row: Record<string, unknown>) => `Ver detalle de ${row['name']}`,
+    );
+    fixture.detectChanges();
+
+    const actionButtons =
+      fixture.nativeElement.querySelectorAll('.mf-table__action');
+
+    expect(actionButtons[0].getAttribute('aria-label')).toBe(
+      'Ver detalle de John',
+    );
+    expect(actionButtons[1].getAttribute('aria-label')).toBe(
+      'Ver detalle de Jane',
+    );
+  });
+});

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

@@ -0,0 +1,117 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSortModule, Sort } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
+
+export interface MfTableColumn {
+  key: string;
+  header: string;
+  sortable?: boolean;
+}
+
+export type MfTableVariant = 'default' | 'striped' | 'bordered';
+
+/**
+ * Table de la librería ng-comps.
+ * Envuelve Angular Material `mat-table` y expone una API uniforme
+ * con look and feel de marca. Ideal para dashboards y paneles de datos.
+ */
+@Component({
+  selector: 'mf-table',
+  imports: [MatTableModule, MatSortModule, MatButtonModule, MatIconModule],
+  template: `
+    <div class="mf-table__wrapper" [class]="hostClasses()">
+      <table
+        mat-table
+        [dataSource]="data()"
+        matSort
+        (matSortChange)="mfSortChange.emit($event)"
+      >
+        @for (col of columns(); track col.key) {
+          <ng-container [matColumnDef]="col.key">
+            @if (col.sortable) {
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ col.header }}</th>
+            } @else {
+              <th mat-header-cell *matHeaderCellDef>{{ col.header }}</th>
+            }
+            <td mat-cell *matCellDef="let row">{{ row[col.key] }}</td>
+          </ng-container>
+        }
+
+        @if (rowActionLabel()) {
+          <ng-container [matColumnDef]="actionColumnKey">
+            <th mat-header-cell *matHeaderCellDef class="mf-table__actions-header">
+              {{ rowActionHeader() }}
+            </th>
+            <td mat-cell *matCellDef="let row" class="mf-table__actions-cell">
+              <button
+                mat-button
+                type="button"
+                class="mf-table__action"
+                [attr.aria-label]="getRowActionAriaLabel(row)"
+                (click)="emitRowAction(row)"
+              >
+                {{ rowActionLabel() }}
+              </button>
+            </td>
+          </ng-container>
+        }
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns()"></tr>
+      </table>
+    </div>
+  `,
+  styleUrl: './mf-table.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfTableComponent {
+  protected readonly actionColumnKey = 'mf-row-action';
+
+  /** Columnas de la tabla */
+  readonly columns = input.required<MfTableColumn[]>();
+  /** Datos de la tabla */
+  readonly data = input.required<Record<string, unknown>[]>();
+  /** Variante visual */
+  readonly variant = input<MfTableVariant>('default');
+  /** Texto visible del botón de acción por fila */
+  readonly rowActionLabel = input<string | undefined>(undefined);
+  /** Cabecera visible de la columna de acción */
+  readonly rowActionHeader = input('Acciones');
+  readonly rowActionAriaLabel = input<
+    ((row: Record<string, unknown>) => string) | undefined
+  >(undefined);
+
+  readonly mfSortChange = output<Sort>();
+  readonly mfRowAction = output<Record<string, unknown>>();
+  /** @deprecated usa `mfRowAction` para interacciones explícitas por fila */
+  readonly mfRowClick = output<Record<string, unknown>>();
+
+  readonly displayedColumns = computed(() => {
+    const columns = this.columns().map((column) => column.key);
+    if (this.rowActionLabel()) {
+      columns.push(this.actionColumnKey);
+    }
+    return columns;
+  });
+
+  readonly hostClasses = computed(() => {
+    return ['mf-table', `mf-table--${this.variant()}`].join(' ');
+  });
+
+  emitRowAction(row: Record<string, unknown>): void {
+    this.mfRowAction.emit(row);
+    this.mfRowClick.emit(row);
+  }
+
+  getRowActionAriaLabel(row: Record<string, unknown>): string | null {
+    return this.rowActionAriaLabel()?.(row) ?? this.rowActionLabel() ?? null;
+  }
+}

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

@@ -0,0 +1,2 @@
+export { MfTabsComponent } from './mf-tabs.component';
+export type { MfTab, MfTabsVariant } from './mf-tabs.component';

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

@@ -0,0 +1,31 @@
+:host {
+  display: block;
+}
+
+.mf-tabs .mat-mdc-tab-header {
+  border-bottom: 1px solid var(--mf-color-border) !important;
+}
+
+.mf-tabs .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label {
+  color: var(--mf-color-neutral-400) !important;
+  font-family: var(--mf-font-base) !important;
+  font-weight: var(--mf-weight-medium) !important;
+}
+
+.mf-tabs .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
+  color: var(--mf-color-brand) !important;
+  font-family: var(--mf-font-base) !important;
+  font-weight: var(--mf-weight-bold) !important;
+}
+
+.mf-tabs .mat-mdc-tab-header .mdc-tab-indicator__content--underline {
+  border-color: var(--mf-color-brand) !important;
+}
+
+.mf-tabs__icon {
+  margin-right: var(--mf-space-2);
+  font-size: 1.1em;
+  height: 1.1em;
+  width: 1.1em;
+  vertical-align: middle;
+}

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

@@ -0,0 +1,50 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfTabsComponent } from './mf-tabs.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfTabsComponent', () => {
+  let fixture: ComponentFixture<MfTabsComponent>;
+  let component: MfTabsComponent;
+
+  const testTabs = [
+    { label: 'Tab 1' },
+    { label: 'Tab 2' },
+    { label: 'Tab 3', disabled: true },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfTabsComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfTabsComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('tabs', testTabs);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render tabs', () => {
+    const tabLabels = fixture.nativeElement.querySelectorAll('.mat-mdc-tab');
+    expect(tabLabels.length).toBe(3);
+  });
+
+  it('should apply default variant', () => {
+    expect(component.hostClasses()).toContain('mf-tabs--default');
+  });
+
+  it('should apply stretched variant', () => {
+    fixture.componentRef.setInput('variant', 'stretched');
+    expect(component.hostClasses()).toContain('mf-tabs--stretched');
+  });
+
+  it('should emit index change', () => {
+    const spy = vi.fn();
+    component.mfSelectedIndexChange.subscribe(spy);
+    component.mfSelectedIndexChange.emit(1);
+    expect(spy).toHaveBeenCalledWith(1);
+  });
+});

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

@@ -0,0 +1,62 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatIconModule } from '@angular/material/icon';
+
+export interface MfTab {
+  label: string;
+  icon?: string;
+  disabled?: boolean;
+}
+
+export type MfTabsVariant = 'default' | 'stretched';
+
+/**
+ * Tabs de la librería ng-comps.
+ * Envuelve Angular Material `mat-tab-group` y expone una API uniforme
+ * con look and feel de marca.
+ */
+@Component({
+  selector: 'mf-tabs',
+  imports: [MatTabsModule, MatIconModule],
+  template: `
+    <mat-tab-group
+      [selectedIndex]="selectedIndex()"
+      [class]="hostClasses()"
+      [mat-stretch-tabs]="variant() === 'stretched'"
+      (selectedIndexChange)="mfSelectedIndexChange.emit($event)"
+    >
+      @for (tab of tabs(); track tab.label) {
+        <mat-tab [disabled]="tab.disabled ?? false">
+          <ng-template mat-tab-label>
+            @if (tab.icon) {
+              <mat-icon class="mf-tabs__icon" aria-hidden="true">{{ tab.icon }}</mat-icon>
+            }
+            {{ tab.label }}
+          </ng-template>
+        </mat-tab>
+      }
+    </mat-tab-group>
+  `,
+  styleUrl: './mf-tabs.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfTabsComponent {
+  /** Pestañas */
+  readonly tabs = input.required<MfTab[]>();
+  /** Índice seleccionado */
+  readonly selectedIndex = input(0);
+  /** Variante visual */
+  readonly variant = input<MfTabsVariant>('default');
+
+  readonly mfSelectedIndexChange = output<number>();
+
+  readonly hostClasses = computed(() => {
+    return ['mf-tabs', `mf-tabs--${this.variant()}`].join(' ');
+  });
+}

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

@@ -0,0 +1,2 @@
+export { MfTextareaComponent } from './mf-textarea.component';
+export type { MfTextareaSize, MfTextareaResize } from './mf-textarea.component';

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

@@ -0,0 +1,48 @@
+:host {
+  display: block;
+}
+
+.mf-textarea.mat-mdc-form-field {
+  font-family: var(--mf-font-base) !important;
+  width: 100%;
+}
+
+.mf-textarea textarea.mat-mdc-input-element {
+  font-family: var(--mf-font-base) !important;
+  line-height: var(--mf-leading-normal) !important;
+}
+
+.mf-textarea .mdc-notched-outline__leading,
+.mf-textarea .mdc-notched-outline__notch,
+.mf-textarea .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-border) !important;
+}
+
+.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
+.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
+.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-brand) !important;
+}
+
+.mf-textarea .mdc-notched-outline {
+  border-radius: var(--mf-radius-md) !important;
+}
+
+/* ── Tamaños ───────────────────────────────────────────────────── */
+.mf-textarea--sm textarea.mat-mdc-input-element {
+  font-size: var(--mf-text-sm) !important;
+}
+
+.mf-textarea--md textarea.mat-mdc-input-element {
+  font-size: var(--mf-text-base) !important;
+}
+
+.mf-textarea--lg textarea.mat-mdc-input-element {
+  font-size: var(--mf-text-lg) !important;
+}
+
+/* ── Resize ────────────────────────────────────────────────────── */
+.mf-textarea--resize-none textarea { resize: none; }
+.mf-textarea--resize-vertical textarea { resize: vertical; }
+.mf-textarea--resize-horizontal textarea { resize: horizontal; }
+.mf-textarea--resize-both textarea { resize: both; }

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

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfTextareaComponent } from './mf-textarea.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfTextareaComponent', () => {
+  let fixture: ComponentFixture<MfTextareaComponent>;
+  let component: MfTextareaComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfTextareaComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfTextareaComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render textarea', () => {
+    const textarea = fixture.nativeElement.querySelector('textarea');
+    expect(textarea).toBeTruthy();
+  });
+
+  it('should apply md size by default', () => {
+    expect(component.hostClasses()).toContain('mf-textarea--md');
+  });
+
+  it('should have default 4 rows', () => {
+    expect(component.rows()).toBe(4);
+  });
+
+  it('should apply vertical resize by default', () => {
+    expect(component.hostClasses()).toContain('mf-textarea--resize-vertical');
+  });
+
+  it('should render label when provided', () => {
+    fixture.componentRef.setInput('label', 'Description');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('mat-label');
+    expect(label?.textContent).toContain('Description');
+  });
+
+  it('should emit input event', () => {
+    const spy = vi.fn();
+    component.mfInput.subscribe(spy);
+    const textarea = fixture.nativeElement.querySelector('textarea');
+    textarea.value = 'Hello';
+    textarea.dispatchEvent(new Event('input'));
+    expect(spy).toHaveBeenCalledWith('Hello');
+  });
+});