ng-comps 1.0.2 → 2.0.0

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

@@ -1,61 +0,0 @@
-:host {
-  display: block;
-}
-
-.mf-breadcrumb__list {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--mf-space-1);
-}
-
-.mf-breadcrumb__item {
-  display: flex;
-  align-items: center;
-  gap: var(--mf-space-1);
-}
-
-.mf-breadcrumb__link {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--mf-space-1);
-  color: var(--mf-color-brand);
-  text-decoration: none;
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-sm);
-  font-weight: var(--mf-weight-medium);
-  padding: var(--mf-space-1) var(--mf-space-2);
-  border-radius: var(--mf-radius-sm);
-  transition: background-color var(--mf-duration-fast) var(--mf-ease-standard);
-}
-
-.mf-breadcrumb__link:hover {
-  background-color: var(--mf-color-brand-light);
-}
-
-.mf-breadcrumb__current {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--mf-space-1);
-  color: var(--mf-color-neutral-400);
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-sm);
-  font-weight: var(--mf-weight-medium);
-  padding: var(--mf-space-1) var(--mf-space-2);
-}
-
-.mf-breadcrumb__separator {
-  font-size: 18px !important;
-  width: 18px !important;
-  height: 18px !important;
-  color: var(--mf-color-neutral-300);
-}
-
-.mf-breadcrumb__icon {
-  font-size: 16px !important;
-  width: 16px !important;
-  height: 16px !important;
-}

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

@@ -1,61 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfBreadcrumbComponent } from './mf-breadcrumb.component';
-
-describe('MfBreadcrumbComponent', () => {
-  let fixture: ComponentFixture<MfBreadcrumbComponent>;
-  let component: MfBreadcrumbComponent;
-
-  const testItems = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Products', href: '/products' },
-    { label: 'Detail' },
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfBreadcrumbComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfBreadcrumbComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('items', testItems);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render breadcrumb items', () => {
-    const items = fixture.nativeElement.querySelectorAll('.mf-breadcrumb__item');
-    expect(items.length).toBe(3);
-  });
-
-  it('should render links for non-last items with href', () => {
-    const links = fixture.nativeElement.querySelectorAll('.mf-breadcrumb__link');
-    expect(links.length).toBe(2);
-  });
-
-  it('should render last item as current', () => {
-    const current = fixture.nativeElement.querySelectorAll('.mf-breadcrumb__current');
-    expect(current.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('should have aria-label', () => {
-    const nav = fixture.nativeElement.querySelector('nav');
-    expect(nav?.getAttribute('aria-label')).toBe('Breadcrumb');
-  });
-
-  it('should render separators', () => {
-    const separators = fixture.nativeElement.querySelectorAll('.mf-breadcrumb__separator');
-    expect(separators.length).toBe(2);
-  });
-
-  it('should emit item click', () => {
-    const spy = vi.fn();
-    component.mfItemClick.subscribe(spy);
-    const link = fixture.nativeElement.querySelector('.mf-breadcrumb__link');
-    link?.click();
-    expect(spy).toHaveBeenCalled();
-  });
-});

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

@@ -1,75 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  output,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-
-export interface MfBreadcrumbItem {
-  label: string;
-  href?: string;
-  icon?: string;
-}
-
-/**
- * Breadcrumb de la librería ng-comps.
- * Componente de navegación jerárquica para indicar la ubicación
- * del usuario en la aplicación.
- */
-@Component({
-  selector: 'mf-breadcrumb',
-  imports: [MatIconModule],
-  template: `
-    <nav [attr.aria-label]="ariaLabel()" [class]="hostClasses()">
-      <ol class="mf-breadcrumb__list">
-        @for (item of items(); track item.label; let last = $last) {
-          <li class="mf-breadcrumb__item">
-            @if (!last && item.href) {
-              <a
-                class="mf-breadcrumb__link"
-                [href]="item.href"
-                (click)="onItemClick($event, item)"
-              >
-                @if (item.icon) {
-                  <mat-icon class="mf-breadcrumb__icon" aria-hidden="true">{{ item.icon }}</mat-icon>
-                }
-                {{ item.label }}
-              </a>
-            } @else {
-              <span class="mf-breadcrumb__current" [attr.aria-current]="last ? 'page' : null">
-                @if (item.icon) {
-                  <mat-icon class="mf-breadcrumb__icon" aria-hidden="true">{{ item.icon }}</mat-icon>
-                }
-                {{ item.label }}
-              </span>
-            }
-            @if (!last) {
-              <mat-icon class="mf-breadcrumb__separator" aria-hidden="true">{{ separator() }}</mat-icon>
-            }
-          </li>
-        }
-      </ol>
-    </nav>
-  `,
-  styleUrl: './mf-breadcrumb.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfBreadcrumbComponent {
-  /** Items del breadcrumb */
-  readonly items = input.required<MfBreadcrumbItem[]>();
-  /** Icono separador */
-  readonly separator = input<string>('chevron_right');
-  /** Label de accesibilidad */
-  readonly ariaLabel = input<string>('Breadcrumb');
-
-  readonly mfItemClick = output<MfBreadcrumbItem>();
-
-  readonly hostClasses = computed(() => 'mf-breadcrumb');
-
-  onItemClick(event: Event, item: MfBreadcrumbItem): void {
-    event.preventDefault();
-    this.mfItemClick.emit(item);
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfButtonComponent } from './mf-button.component';
-export type { MfButtonVariant, MfButtonSize } from './mf-button.component';

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

@@ -1,136 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-:host([fullWidth]),
-:host-context(.mf-btn--full) {
-  display: block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-btn {
-  border-radius: var(--mf-radius-full) !important;
-  font-family: var(--mf-font-base) !important;
-  font-weight: var(--mf-weight-bold) !important;
-  letter-spacing: 0.01em;
-  transition:
-    background-color var(--mf-duration-base) var(--mf-ease-standard),
-    box-shadow var(--mf-duration-base) var(--mf-ease-standard),
-    opacity var(--mf-duration-fast) var(--mf-ease-standard);
-}
-
-.mf-btn.mf-btn--full {
-  width: 100%;
-}
-
-.mf-btn--icon {
-  border-radius: var(--mf-radius-full) !important;
-}
-
-/* ── Filled ────────────────────────────────────────────────────── */
-.mf-btn--filled.mdc-button,
-.mf-btn--filled.mat-mdc-unelevated-button {
-  background-color: var(--mf-color-brand) !important;
-  color: var(--mf-color-on-brand) !important;
-}
-
-.mf-btn--filled.mdc-button:hover:not([disabled]),
-.mf-btn--filled.mat-mdc-unelevated-button:hover:not([disabled]) {
-  background-color: var(--mf-color-brand-hover) !important;
-  box-shadow: var(--mf-shadow-md);
-}
-
-/* ── Outlined ──────────────────────────────────────────────────── */
-.mf-btn--outlined.mdc-button,
-.mf-btn--outlined.mat-mdc-outlined-button {
-  color: var(--mf-color-secondary-900) !important;
-  border-color: var(--mf-color-border) !important;
-  background-color: var(--mf-color-surface);
-}
-
-.mf-btn--outlined.mdc-button:hover:not([disabled]),
-.mf-btn--outlined.mat-mdc-outlined-button:hover:not([disabled]) {
-  background-color: var(--mf-color-surface-raised);
-  box-shadow: var(--mf-shadow-sm);
-}
-
-/* ── Text ──────────────────────────────────────────────────────── */
-.mf-btn--text.mdc-button,
-.mf-btn--text.mat-mdc-button {
-  color: var(--mf-color-brand) !important;
-}
-
-.mf-btn--text.mdc-button:hover:not([disabled]),
-.mf-btn--text.mat-mdc-button:hover:not([disabled]) {
-  background-color: var(--mf-color-brand-light);
-}
-
-.mf-btn--text.mat-mdc-icon-button:hover:not([disabled]),
-.mf-btn--filled.mat-mdc-icon-button:hover:not([disabled]),
-.mf-btn--outlined.mat-mdc-icon-button:hover:not([disabled]) {
-  background-color: var(--mf-color-brand-light);
-}
-
-.mf-btn--filled.mat-mdc-icon-button {
-  color: var(--mf-color-brand) !important;
-  background-color: var(--mf-color-brand-light) !important;
-}
-
-.mf-btn--outlined.mat-mdc-icon-button {
-  color: var(--mf-color-secondary-900) !important;
-  border: 1px solid var(--mf-color-border) !important;
-}
-
-/* ── Tamaños ───────────────────────────────────────────────────── */
-.mf-btn--sm.mdc-button {
-  height: 34px !important;
-  padding: 0 var(--mf-space-4) !important;
-  font-size: var(--mf-text-sm) !important;
-}
-
-.mf-btn--md.mdc-button {
-  height: 40px !important;
-  padding: 0 var(--mf-space-5) !important;
-  font-size: var(--mf-text-sm) !important;
-}
-
-.mf-btn--lg.mdc-button {
-  height: 48px !important;
-  padding: 0 var(--mf-space-6) !important;
-  font-size: var(--mf-text-base) !important;
-}
-
-.mf-btn--icon.mf-btn--sm.mat-mdc-icon-button {
-  width: 34px;
-  height: 34px;
-  padding: 5px;
-}
-
-.mf-btn--icon.mf-btn--md.mat-mdc-icon-button {
-  width: 40px;
-  height: 40px;
-  padding: 8px;
-}
-
-.mf-btn--icon.mf-btn--lg.mat-mdc-icon-button {
-  width: 48px;
-  height: 48px;
-  padding: 11px;
-}
-
-/* ── Disabled ──────────────────────────────────────────────────── */
-.mf-btn[disabled],
-.mf-btn.mdc-button:disabled {
-  opacity: 0.42;
-  cursor: default;
-  pointer-events: none;
-}
-
-/* ── Iconos ────────────────────────────────────────────────────── */
-.mf-btn .mat-icon {
-  font-size: 1.1em;
-  height: 1.1em;
-  width: 1.1em;
-  vertical-align: middle;
-  line-height: 1;
-}

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

@@ -1,174 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-  output,
-} from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { hasAccessibleName, warnInDev } from '../../a11y';
-
-export type MfButtonVariant = 'filled' | 'outlined' | 'text';
-export type MfButtonSize = 'sm' | 'md' | 'lg';
-
-/**
- * Botón de la librería ng-comps.
- * Envuelve Angular Material `mat-button` / `mat-flat-button` / `mat-stroked-button`
- * y expone una API uniforme con look and feel de marca.
- */
-@Component({
-  selector: 'mf-button',
-  imports: [MatButtonModule, MatIconModule],
-  template: `
-    @if (rendersAsIconButton()) {
-      <button
-        mat-icon-button
-        [id]="id() || null"
-        [type]="type()"
-        [disabled]="disabled()"
-        [class]="hostClasses()"
-        [attr.aria-label]="iconButtonAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledby() || null"
-        [attr.aria-describedby]="ariaDescribedby() || null"
-        (click)="mfClick.emit($event)"
-      >
-        <mat-icon aria-hidden="true">{{ iconName() }}</mat-icon>
-      </button>
-    } @else if (variant() === 'filled') {
-      <button
-        mat-flat-button
-        [id]="id() || null"
-        [type]="type()"
-        [disabled]="disabled()"
-        [class]="hostClasses()"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledby() || null"
-        [attr.aria-describedby]="ariaDescribedby() || null"
-        (click)="mfClick.emit($event)"
-      >
-        @if (leadingIcon()) {
-          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span>{{ label() }}</span>
-        }
-        @if (trailingIcon()) {
-          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
-        }
-      </button>
-    } @else if (variant() === 'outlined') {
-      <button
-        mat-stroked-button
-        [id]="id() || null"
-        [type]="type()"
-        [disabled]="disabled()"
-        [class]="hostClasses()"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledby() || null"
-        [attr.aria-describedby]="ariaDescribedby() || null"
-        (click)="mfClick.emit($event)"
-      >
-        @if (leadingIcon()) {
-          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span>{{ label() }}</span>
-        }
-        @if (trailingIcon()) {
-          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
-        }
-      </button>
-    } @else {
-      <button
-        mat-button
-        [id]="id() || null"
-        [type]="type()"
-        [disabled]="disabled()"
-        [class]="hostClasses()"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledby() || null"
-        [attr.aria-describedby]="ariaDescribedby() || null"
-        (click)="mfClick.emit($event)"
-      >
-        @if (leadingIcon()) {
-          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
-        }
-        @if (label()) {
-          <span>{{ label() }}</span>
-        }
-        @if (trailingIcon()) {
-          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
-        }
-      </button>
-    }
-  `,
-  styleUrl: './mf-button.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfButtonComponent {
-  readonly id = input<string | undefined>(undefined);
-  readonly label = input<string | undefined>(undefined);
-  readonly ariaLabel = input<string | undefined>(undefined);
-  readonly ariaLabelledby = input<string | undefined>(undefined);
-  readonly ariaDescribedby = input<string | undefined>(undefined);
-  readonly variant = input<MfButtonVariant>('filled');
-  readonly size = input<MfButtonSize>('md');
-  readonly type = input<'button' | 'submit' | 'reset'>('button');
-  readonly disabled = input(false);
-  readonly leadingIcon = input<string | undefined>(undefined);
-  readonly trailingIcon = input<string | undefined>(undefined);
-  readonly fullWidth = input(false);
-  readonly iconOnly = input(false);
-
-  readonly mfClick = output<MouseEvent>();
-
-  constructor() {
-    effect(() => {
-      if (
-        !hasAccessibleName(
-          this.label(),
-          this.ariaLabel(),
-          this.ariaLabelledby(),
-        )
-      ) {
-        warnInDev(
-          'mf-button requiere texto visible, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.',
-        );
-      }
-
-      if (this.rendersAsIconButton() && !this.iconName()) {
-        warnInDev(
-          'mf-button en modo `iconOnly` requiere `leadingIcon` o `trailingIcon`.',
-        );
-      }
-    });
-  }
-
-  readonly rendersAsIconButton = computed(
-    () => this.iconOnly() || (!this.label()?.trim() && Boolean(this.iconName())),
-  );
-  readonly iconName = computed(
-    () => this.leadingIcon() ?? this.trailingIcon() ?? 'help',
-  );
-  readonly resolvedAriaLabel = computed(() =>
-    this.label() ? null : this.ariaLabel() ?? null,
-  );
-  readonly iconButtonAriaLabel = computed(
-    () => this.ariaLabel() ?? this.label() ?? null,
-  );
-
-  readonly hostClasses = computed(() => {
-    const classes = [
-      'mf-btn',
-      `mf-btn--${this.variant()}`,
-      `mf-btn--${this.size()}`,
-    ];
-
-    if (this.fullWidth()) classes.push('mf-btn--full');
-    if (this.rendersAsIconButton()) classes.push('mf-btn--icon');
-
-    return classes.join(' ');
-  });
-}

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

@@ -1,2 +0,0 @@
-export { MfCardComponent } from './mf-card.component';
-export type { MfCardVariant } from './mf-card.component';

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

@@ -1,82 +0,0 @@
-:host {
-  display: block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-card {
-  font-family: var(--mf-font-base) !important;
-  border-radius: var(--mf-radius-xl) !important;
-  overflow: hidden;
-  transition:
-    box-shadow var(--mf-duration-base) var(--mf-ease-standard),
-    transform var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-/* ── Variants ──────────────────────────────────────────────────── */
-.mf-card--elevated {
-  background-color: var(--mf-color-surface) !important;
-  box-shadow: var(--mf-shadow-md) !important;
-  border: none !important;
-}
-
-.mf-card--outlined {
-  background-color: var(--mf-color-surface) !important;
-  box-shadow: none !important;
-  border: 1px solid var(--mf-color-border) !important;
-}
-
-.mf-card--flat {
-  background-color: var(--mf-color-surface-raised) !important;
-  box-shadow: none !important;
-  border: none !important;
-}
-
-/* ── Interactive ───────────────────────────────────────────────── */
-.mf-card--interactive {
-  cursor: pointer;
-}
-
-.mf-card--interactive:hover {
-  box-shadow: var(--mf-shadow-lg) !important;
-  transform: translateY(-2px);
-}
-
-.mf-card--interactive:active {
-  transform: translateY(0);
-}
-
-/* ── Padding ───────────────────────────────────────────────────── */
-.mf-card--pad-none .mat-mdc-card-content {
-  padding: 0 !important;
-}
-
-.mf-card--pad-sm .mat-mdc-card-content {
-  padding: var(--mf-space-3) !important;
-}
-
-.mf-card--pad-md .mat-mdc-card-content {
-  padding: var(--mf-space-5) !important;
-}
-
-.mf-card--pad-lg .mat-mdc-card-content {
-  padding: var(--mf-space-8) !important;
-}
-
-/* ── Header ────────────────────────────────────────────────────── */
-.mf-card .mat-mdc-card-header {
-  padding: var(--mf-space-5) var(--mf-space-5) 0 !important;
-}
-
-.mf-card__title {
-  font-family: var(--mf-font-display) !important;
-  font-size: var(--mf-text-lg) !important;
-  font-weight: var(--mf-weight-bold) !important;
-  color: var(--mf-color-on-surface) !important;
-  margin: 0 !important;
-}
-
-.mf-card__subtitle {
-  font-size: var(--mf-text-sm) !important;
-  color: var(--mf-color-neutral-400) !important;
-  margin-top: var(--mf-space-1) !important;
-}

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

@@ -1,59 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { MatCardModule } from '@angular/material/card';
-
-export type MfCardVariant = 'elevated' | 'outlined' | 'flat';
-
-/**
- * Card de la librería ng-comps.
- * Envuelve Angular Material `mat-card` y expone una API uniforme
- * con look and feel de marca. Admite contenido proyectado mediante slots.
- */
-@Component({
-  selector: 'mf-card',
-  imports: [MatCardModule],
-  template: `
-    <mat-card [class]="hostClasses()">
-      @if (hasHeader()) {
-        <mat-card-header>
-          @if (title()) {
-            <mat-card-title class="mf-card__title">{{ title() }}</mat-card-title>
-          }
-          @if (subtitle()) {
-            <mat-card-subtitle class="mf-card__subtitle">{{ subtitle() }}</mat-card-subtitle>
-          }
-        </mat-card-header>
-      }
-      <mat-card-content>
-        <ng-content />
-      </mat-card-content>
-      <ng-content select="[mfCardFooter]" />
-    </mat-card>
-  `,
-  styleUrl: './mf-card.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfCardComponent {
-  /** Título de la card */
-  readonly title = input<string | undefined>(undefined);
-  /** Subtítulo de la card */
-  readonly subtitle = input<string | undefined>(undefined);
-  /** Variante visual */
-  readonly variant = input<MfCardVariant>('elevated');
-  /** Padding interno */
-  readonly padding = input<'none' | 'sm' | 'md' | 'lg'>('md');
-  /** Interactiva (hover effect) */
-  readonly interactive = input(false);
-
-  readonly hasHeader = computed(() => !!this.title() || !!this.subtitle());
-
-  readonly hostClasses = computed(() => {
-    const classes = ['mf-card', `mf-card--${this.variant()}`, `mf-card--pad-${this.padding()}`];
-    if (this.interactive()) classes.push('mf-card--interactive');
-    return classes.join(' ');
-  });
-}

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

@@ -1 +0,0 @@
-export { MfCheckboxComponent } from './mf-checkbox.component';