ng-comps 0.2.0 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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