ng-comps 1.0.2 → 2.0.0

package/ng-package.json

@@ -1,27 +0,0 @@
-{
-  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist/ng-comps",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  },
-  "assets": [
-    "LICENSE",
-    "README.md",
-    "src/styles.css",
-    "src/theme/**/*"
-  ],
-  "allowedNonPeerDependencies": [
-    "@angular/animations",
-    "@angular/cdk",
-    "@angular/common",
-    "@angular/compiler",
-    "@angular/core",
-    "@angular/forms",
-    "@angular/material",
-    "@angular/platform-browser",
-    "@angular/router",
-    "@fontsource/material-icons",
-    "rxjs",
-    "tslib"
-  ]
-}

package/scripts/prepare-package.mjs

@@ -1,80 +0,0 @@
-import { readFileSync, writeFileSync, existsSync, rmSync } from 'node:fs';
-import { resolve } from 'node:path';
-
-const root = process.cwd();
-const rootPkgPath = resolve(root, 'package.json');
-const distDir = resolve(root, 'dist', 'ng-comps');
-const distPkgPath = resolve(distDir, 'package.json');
-
-if (!existsSync(distDir)) {
-  throw new Error('No existe dist/ng-comps. Ejecuta primero npm run build:lib');
-}
-
-const rootPkg = JSON.parse(readFileSync(rootPkgPath, 'utf8'));
-const angularVersion = rootPkg.dependencies['@angular/core'];
-const cdkVersion = rootPkg.dependencies['@angular/cdk'];
-const materialVersion = rootPkg.dependencies['@angular/material'];
-const rxjsVersion = rootPkg.dependencies.rxjs;
-const tslibVersion = rootPkg.dependencies.tslib;
-
-for (const extraPath of [
-  resolve(distDir, 'browser'),
-  resolve(distDir, '3rdpartylicenses.txt'),
-  resolve(distDir, 'prerendered-routes.json')
-]) {
-  if (existsSync(extraPath)) {
-    rmSync(extraPath, { recursive: true, force: true });
-  }
-}
-
-const packageJson = {
-  name: rootPkg.name,
-  version: rootPkg.version,
-  description: 'Angular UI components for mf-design-system',
-  keywords: ['angular', 'components', 'ui', 'design-system', 'material'],
-  license: rootPkg.license || 'MIT',
-  type: 'module',
-  sideEffects: false,
-  main: './fesm2022/ng-comps.mjs',
-  module: './fesm2022/ng-comps.mjs',
-  typings: './types/ng-comps.d.ts',
-  files: [
-    'fesm2022/ng-comps.mjs',
-    'types/ng-comps.d.ts',
-    'src/styles.css',
-    'src/theme',
-    'README.md',
-    'LICENSE',
-    'package.json'
-  ],
-  exports: {
-    '.': {
-      types: './types/ng-comps.d.ts',
-      default: './fesm2022/ng-comps.mjs'
-    },
-    './styles.css': './src/styles.css',
-    './theme/tokens.css': './src/theme/tokens.css',
-    './theme/material-theme.scss': './src/theme/material-theme.scss',
-    './package.json': './package.json'
-  },
-  peerDependencies: {
-    '@angular/animations': angularVersion,
-    '@angular/cdk': cdkVersion,
-    '@angular/common': angularVersion,
-    '@angular/core': angularVersion,
-    '@angular/forms': angularVersion,
-    '@angular/material': materialVersion,
-    '@angular/platform-browser': angularVersion,
-    '@angular/router': angularVersion,
-    rxjs: rxjsVersion
-  },
-  dependencies: {
-    tslib: tslibVersion
-  },
-  publishConfig: {
-    access: 'public'
-  }
-};
-
-writeFileSync(distPkgPath, `${JSON.stringify(packageJson, null, 2)}\n`, 'utf8');
-console.log(`package.json optimizado generado en ${distPkgPath}`);

package/src/app/a11y/accessibility.utils.ts

@@ -1,35 +0,0 @@
-import { isDevMode } from '@angular/core';
-
-let nextUniqueId = 0;
-const emittedWarnings = new Set<string>();
-
-export function createUniqueId(prefix: string): string {
-  nextUniqueId += 1;
-  return `${prefix}-${nextUniqueId}`;
-}
-
-export function mergeAriaIds(
-  ...values: Array<string | null | undefined>
-): string | null {
-  const ids = values
-    .flatMap((value) => (value ? value.split(/\s+/) : []))
-    .map((value) => value.trim())
-    .filter(Boolean);
-
-  return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : null;
-}
-
-export function hasAccessibleName(
-  ...values: Array<string | null | undefined>
-): boolean {
-  return values.some((value) => Boolean(value?.trim()));
-}
-
-export function warnInDev(message: string): void {
-  if (!isDevMode() || emittedWarnings.has(message)) {
-    return;
-  }
-
-  emittedWarnings.add(message);
-  console.warn(`[ng-comps:a11y] ${message}`);
-}

package/src/app/a11y/index.ts

@@ -1,6 +0,0 @@
-export {
-  createUniqueId,
-  hasAccessibleName,
-  mergeAriaIds,
-  warnInDev,
-} from './accessibility.utils';

package/src/app/accessibility/ng-comps.a11y.spec.ts

@@ -1,108 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import * as axe from 'axe-core';
-import { MfButtonComponent } from '../components/button';
-import { MfDialogComponent } from '../components/dialog';
-import { MfInputComponent } from '../components/input';
-import { MfSelectComponent } from '../components/select';
-
-async function expectNoAxeViolations(
-  fixture: ComponentFixture<unknown>,
-): Promise<void> {
-  await fixture.whenStable();
-  const results = await axe.run(fixture.nativeElement as HTMLElement, {
-    runOnly: {
-      type: 'tag',
-      values: ['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'],
-    },
-    rules: {
-      region: { enabled: false },
-      'page-has-heading-one': { enabled: false },
-      'landmark-one-main': { enabled: false },
-    },
-  });
-
-  const summaries = results.violations.map((violation) => ({
-    id: violation.id,
-    impact: violation.impact,
-    nodes: violation.nodes.map((node) => node.target.join(' ')),
-  }));
-
-  expect(summaries).toEqual([]);
-}
-
-describe('ng-comps accessibility contract', () => {
-  it('renders a labeled text button without axe violations', async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfButtonComponent],
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(MfButtonComponent);
-    fixture.componentRef.setInput('label', 'Guardar cambios');
-    fixture.detectChanges();
-
-    await expectNoAxeViolations(fixture);
-  });
-
-  it('renders an icon-only button with an explicit accessible name', async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfButtonComponent],
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(MfButtonComponent);
-    fixture.componentRef.setInput('iconOnly', true);
-    fixture.componentRef.setInput('leadingIcon', 'settings');
-    fixture.componentRef.setInput('ariaLabel', 'Abrir configuración');
-    fixture.detectChanges();
-
-    await expectNoAxeViolations(fixture);
-  });
-
-  it('renders an input with visible label, hint and error wiring', async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfInputComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(MfInputComponent);
-    fixture.componentRef.setInput('label', 'Correo electrónico');
-    fixture.componentRef.setInput('hint', 'Usa tu correo corporativo');
-    fixture.componentRef.setInput('error', 'El correo es obligatorio');
-    fixture.detectChanges();
-
-    await expectNoAxeViolations(fixture);
-  });
-
-  it('renders a select with visible label and helper text', async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfSelectComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(MfSelectComponent);
-    fixture.componentRef.setInput('label', 'Framework');
-    fixture.componentRef.setInput('hint', 'Selecciona una opción');
-    fixture.componentRef.setInput('options', [
-      { value: 'angular', label: 'Angular' },
-      { value: 'react', label: 'React' },
-    ]);
-    fixture.detectChanges();
-
-    await expectNoAxeViolations(fixture);
-  });
-
-  it('renders an inline dialog with title and description', async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfDialogComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    const fixture = TestBed.createComponent(MfDialogComponent);
-    fixture.componentRef.setInput('title', 'Confirmar acción');
-    fixture.componentRef.setInput(
-      'message',
-      'Este cambio se aplicará de forma permanente.',
-    );
-    fixture.componentRef.setInput('showActions', false);
-    fixture.detectChanges();
-
-    await expectNoAxeViolations(fixture);
-  });
-});

package/src/app/app.config.ts

@@ -1,11 +0,0 @@
-import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
-import { provideRouter } from '@angular/router';
-
-import { routes } from './app.routes';
-
-export const appConfig: ApplicationConfig = {
-  providers: [
-    provideBrowserGlobalErrorListeners(),
-    provideRouter(routes)
-  ]
-};

package/src/app/app.css

@@ -1,107 +0,0 @@
-:host {
-  display: block;
-  min-height: 100dvh;
-  background:
-    radial-gradient(circle at 10% 5%, rgba(15, 118, 110, 0.12), transparent 35%),
-    radial-gradient(circle at 90% 0%, rgba(59, 130, 246, 0.15), transparent 32%),
-    #f7fafc;
-}
-
-.welcome {
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 32px 20px 40px;
-  display: grid;
-  gap: 16px;
-  color: #0f172a;
-  font-family: var(--mf-font-base, 'Segoe UI', sans-serif);
-}
-
-.hero {
-  background: #ffffff;
-  border: 1px solid #d9e4ec;
-  border-radius: 16px;
-  padding: 24px;
-  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
-}
-
-.badge {
-  display: inline-flex;
-  margin: 0 0 10px;
-  padding: 4px 10px;
-  border-radius: 999px;
-  background: #dcfce7;
-  color: #166534;
-  font-weight: 600;
-  font-size: 12px;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
-h1 {
-  margin: 0;
-  font-family: var(--mf-font-display, 'Segoe UI', sans-serif);
-  font-size: clamp(1.8rem, 4vw, 2.4rem);
-  line-height: 1.1;
-}
-
-.lead {
-  margin: 10px 0 0;
-  color: #334155;
-  max-width: 62ch;
-}
-
-.card {
-  background: #ffffff;
-  border: 1px solid #d9e4ec;
-  border-radius: 16px;
-  padding: 20px;
-  box-shadow: 0 8px 26px rgba(15, 23, 42, 0.05);
-}
-
-.card h2 {
-  margin: 0 0 10px;
-  font-size: 1.1rem;
-}
-
-.card p {
-  margin: 0 0 10px;
-  color: #334155;
-}
-
-pre {
-  margin: 0;
-  padding: 12px;
-  border-radius: 10px;
-  background: #0b1220;
-  color: #e2e8f0;
-  border: 1px solid #1e293b;
-  overflow-x: auto;
-}
-
-code {
-  font-family: 'Cascadia Code', Consolas, monospace;
-  font-size: 0.88rem;
-}
-
-ul {
-  margin: 0;
-  padding-left: 18px;
-  color: #334155;
-}
-
-li + li {
-  margin-top: 6px;
-}
-
-@media (max-width: 640px) {
-  .welcome {
-    padding: 20px 12px 28px;
-  }
-
-  .hero,
-  .card {
-    padding: 16px;
-    border-radius: 12px;
-  }
-}

package/src/app/app.html

@@ -1,48 +0,0 @@
-<main class="welcome">
-  <header class="hero">
-    <p class="badge">UI Library</p>
-    <h1>Welcome to {{ title() }}</h1>
-    <p class="lead">
-      This page explains how to install and start using <strong>ng-comps</strong>
-      in any Angular project.
-    </p>
-  </header>
-
-  <section class="card" aria-labelledby="install-title">
-    <h2 id="install-title">1) Install package</h2>
-    <pre><code>npm i ng-comps</code></pre>
-  </section>
-
-  <section class="card" aria-labelledby="styles-title">
-    <h2 id="styles-title">2) Load base styles and design tokens</h2>
-    <p>Add these imports in your global styles file (for example <code>src/styles.css</code>):</p>
-    <pre><code>@import 'ng-comps/theme/tokens.css';
-@import 'ng-comps/styles.css';</code></pre>
-  </section>
-
-  <section class="card" aria-labelledby="usage-title">
-    <h2 id="usage-title">3) Use components in standalone Angular pages</h2>
-    <p>Import only what you need for better tree-shaking.</p>
-    <pre><code>import &#123; Component &#125; from '@angular/core';
-import &#123; MfButtonComponent, MfInputComponent &#125; from 'ng-comps';
-
-@Component(&#123;
-  selector: 'app-example',
-  imports: [MfButtonComponent, MfInputComponent],
-  template: `
-    &lt;mf-input label="Email" placeholder="you@company.com" /&gt;
-    &lt;mf-button label="Save" variant="filled" /&gt;
-  `,
-&#125;)
-export class ExampleComponent &#123;&#125;</code></pre>
-  </section>
-
-  <section class="card" aria-labelledby="notes-title">
-    <h2 id="notes-title">4) Notes for production projects</h2>
-    <ul>
-      <li>The package is published with <code>sideEffects: false</code> for max tree-shaking.</li>
-      <li>Angular and RxJS are peer dependencies to avoid duplicated framework installs.</li>
-      <li>Import components directly from <code>ng-comps</code>; avoid wildcard barrel files in your app.</li>
-    </ul>
-  </section>
-</main>

package/src/app/app.routes.ts

@@ -1,3 +0,0 @@
-import { Routes } from '@angular/router';
-
-export const routes: Routes = [];

package/src/app/app.spec.ts

@@ -1,23 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-import { App } from './app';
-
-describe('App', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [App],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(App);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it('should render title', async () => {
-    const fixture = TestBed.createComponent(App);
-    await fixture.whenStable();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome to ng-comps');
-  });
-});

package/src/app/app.ts

@@ -1,10 +0,0 @@
-import { Component, signal } from '@angular/core';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.html',
-  styleUrl: './app.css'
-})
-export class App {
-  protected readonly title = signal('ng-comps');
-}

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

@@ -1,2 +0,0 @@
-export { MfAccordionComponent } from './mf-accordion.component';
-export type { MfAccordionPanel } from './mf-accordion.component';

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

@@ -1,38 +0,0 @@
-:host {
-  display: block;
-}
-
-.mf-accordion .mat-expansion-panel {
-  font-family: var(--mf-font-base) !important;
-  border-radius: var(--mf-radius-md) !important;
-  box-shadow: var(--mf-shadow-none) !important;
-  border: 1px solid var(--mf-color-border);
-  margin-bottom: var(--mf-space-2);
-}
-
-.mf-accordion .mat-expansion-panel-header {
-  font-family: var(--mf-font-base) !important;
-}
-
-.mf-accordion .mat-expansion-panel-header-title {
-  font-weight: var(--mf-weight-bold) !important;
-  color: var(--mf-color-on-surface) !important;
-}
-
-.mf-accordion .mat-expansion-panel-header-description {
-  color: var(--mf-color-neutral-400) !important;
-}
-
-.mf-accordion .mat-expansion-panel-body {
-  font-size: var(--mf-text-sm) !important;
-  color: var(--mf-color-neutral-600) !important;
-  line-height: var(--mf-leading-normal);
-}
-
-.mf-accordion .mat-expansion-indicator::after {
-  color: var(--mf-color-brand) !important;
-}
-
-.mf-accordion .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:hover {
-  background-color: var(--mf-color-brand-light) !important;
-}

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

@@ -1,48 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfAccordionComponent } from './mf-accordion.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfAccordionComponent', () => {
-  let fixture: ComponentFixture<MfAccordionComponent>;
-  let component: MfAccordionComponent;
-
-  const testPanels = [
-    { title: 'Panel 1', content: 'Content 1' },
-    { title: 'Panel 2', description: 'Description', content: 'Content 2' },
-    { title: 'Panel 3', content: 'Content 3', disabled: true },
-  ];
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfAccordionComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfAccordionComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('panels', testPanels);
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render expansion panels', () => {
-    const panels = fixture.nativeElement.querySelectorAll('mat-expansion-panel');
-    expect(panels.length).toBe(3);
-  });
-
-  it('should apply host classes', () => {
-    expect(component.hostClasses()).toBe('mf-accordion');
-  });
-
-  it('should not allow multi by default', () => {
-    expect(component.multi()).toBe(false);
-  });
-
-  it('should render panel titles', () => {
-    const titles = fixture.nativeElement.querySelectorAll('mat-panel-title');
-    expect(titles.length).toBe(3);
-    expect(titles[0].textContent).toContain('Panel 1');
-  });
-});

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

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

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