ng-comps 1.0.2 → 2.0.0

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

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

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

@@ -1,117 +0,0 @@
-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('Actions');
-  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

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

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

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

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

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

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

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

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

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