ng-comps 1.0.2 → 2.0.0

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

@@ -1,227 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  computed,
-  effect,
-  forwardRef,
-  inject,
-  input,
-  output,
-  signal,
-} from '@angular/core';
-import {
-  ControlValueAccessor,
-  NG_VALUE_ACCESSOR,
-  NgControl,
-} from '@angular/forms';
-import { ErrorStateMatcher } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import {
-  createUniqueId,
-  hasAccessibleName,
-  mergeAriaIds,
-  warnInDev,
-} from '../../a11y';
-
-export type MfTextareaSize = 'sm' | 'md' | 'lg';
-export type MfTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
-
-/**
- * Textarea de la librería ng-comps.
- * Envuelve Angular Material `matInput` con textarea y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-textarea',
-  imports: [MatInputModule, MatFormFieldModule],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => MfTextareaComponent),
-      multi: true,
-    },
-  ],
-  template: `
-    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
-      @if (label()) {
-        <mat-label>{{ label() }}</mat-label>
-      }
-      <textarea
-        matInput
-        [id]="controlId()"
-        [placeholder]="placeholder()"
-        [disabled]="isDisabled()"
-        [readonly]="readonly()"
-        [required]="required()"
-        [rows]="rows()"
-        [attr.maxlength]="maxLength() ?? null"
-        [value]="internalValue()"
-        [errorStateMatcher]="errorStateMatcher"
-        [attr.aria-label]="resolvedAriaLabel()"
-        [attr.aria-labelledby]="ariaLabelledby() || null"
-        [attr.aria-describedby]="describedBy()"
-        [attr.aria-invalid]="isInvalid() ? 'true' : null"
-        [attr.aria-required]="required() ? 'true' : null"
-        (input)="onInput($event)"
-        (blur)="onBlur()"
-      ></textarea>
-      @if (hint()) {
-        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
-      }
-      @if (maxLength()) {
-        <mat-hint [attr.id]="counterId()" align="end">
-          {{ currentLength() }} / {{ maxLength() }}
-        </mat-hint>
-      }
-    </mat-form-field>
-    @if (error()) {
-      <p class="mf-textarea__error" [attr.id]="errorId()" role="alert">{{ error() }}</p>
-    }
-  `,
-  styleUrl: './mf-textarea.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfTextareaComponent implements ControlValueAccessor {
-  private readonly cdr = inject(ChangeDetectorRef);
-  private readonly ngControl = inject(NgControl, { self: true, optional: true });
-  private readonly generatedId = createUniqueId('mf-textarea');
-  private readonly disabledFromForm = signal(false);
-  protected readonly internalValue = signal('');
-  private onControlChange: (value: string) => void = () => undefined;
-  private onControlTouched: () => void = () => undefined;
-  readonly errorStateMatcher: ErrorStateMatcher = {
-    isErrorState: (control) =>
-      Boolean(
-        this.error() || (control?.invalid && (control.touched || control.dirty)),
-      ),
-  };
-
-  /** ID del control */
-  readonly id = input<string | undefined>(undefined);
-  /** Etiqueta */
-  readonly label = input<string | undefined>(undefined);
-  /** Etiqueta accesible alternativa cuando no existe label visible */
-  readonly ariaLabel = input<string | undefined>(undefined);
-  /** Referencia externa a elementos que etiquetan el control */
-  readonly ariaLabelledby = input<string | undefined>(undefined);
-  /** Referencia externa a elementos descriptivos adicionales */
-  readonly ariaDescribedby = input<string | undefined>(undefined);
-  /** Placeholder */
-  readonly placeholder = input<string>('');
-  /** Valor */
-  readonly value = input<string>('');
-  /** Filas visibles */
-  readonly rows = input(4);
-  /** Tamaño */
-  readonly size = input<MfTextareaSize>('md');
-  /** Máximo de caracteres */
-  readonly maxLength = input<number | undefined>(undefined);
-  /** Deshabilitado */
-  readonly disabled = input(false);
-  /** Solo lectura */
-  readonly readonly = input(false);
-  /** Requerido */
-  readonly required = input(false);
-  /** Texto de ayuda */
-  readonly hint = input<string | undefined>(undefined);
-  /** Mensaje de error */
-  readonly error = input<string | undefined>(undefined);
-  /** Resize */
-  readonly resize = input<MfTextareaResize>('vertical');
-
-  readonly mfInput = output<string>();
-  readonly mfBlur = output<void>();
-
-  constructor() {
-    effect(() => {
-      this.internalValue.set(this.value());
-    });
-
-    effect(() => {
-      if (
-        !hasAccessibleName(
-          this.label(),
-          this.ariaLabel(),
-          this.ariaLabelledby(),
-        )
-      ) {
-        warnInDev(
-          'mf-textarea requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.',
-        );
-      }
-    });
-  }
-
-  readonly controlId = computed(() => this.id() ?? this.generatedId);
-  readonly hintId = computed(() =>
-    this.hint() ? `${this.controlId()}-hint` : null,
-  );
-  readonly errorId = computed(() =>
-    this.error() ? `${this.controlId()}-error` : null,
-  );
-  readonly counterId = computed(() =>
-    this.maxLength() ? `${this.controlId()}-count` : null,
-  );
-  readonly describedBy = computed(() =>
-    mergeAriaIds(
-      this.ariaDescribedby(),
-      this.hintId(),
-      this.errorId(),
-      this.counterId(),
-    ),
-  );
-  readonly resolvedAriaLabel = computed(() =>
-    this.label() ? null : this.ariaLabel() ?? null,
-  );
-  readonly isDisabled = computed(
-    () => this.disabled() || this.disabledFromForm(),
-  );
-  readonly currentLength = computed(() => this.internalValue().length);
-
-  readonly hostClasses = computed(() => {
-    return [
-      'mf-textarea',
-      `mf-textarea--${this.size()}`,
-      `mf-textarea--resize-${this.resize()}`,
-    ].join(' ');
-  });
-
-  writeValue(value: string | null): void {
-    this.internalValue.set(value ?? '');
-    this.cdr.markForCheck();
-  }
-
-  registerOnChange(fn: (value: string) => void): void {
-    this.onControlChange = fn;
-  }
-
-  registerOnTouched(fn: () => void): void {
-    this.onControlTouched = fn;
-  }
-
-  setDisabledState(isDisabled: boolean): void {
-    this.disabledFromForm.set(isDisabled);
-    this.cdr.markForCheck();
-  }
-
-  isInvalid(): boolean {
-    const control = this.ngControl?.control;
-    return Boolean(
-      this.error() || (control?.invalid && (control.touched || control.dirty)),
-    );
-  }
-
-  onInput(event: Event): void {
-    const value = (event.target as HTMLTextAreaElement).value;
-    this.internalValue.set(value);
-    this.onControlChange(value);
-    this.mfInput.emit(value);
-  }
-
-  onBlur(): void {
-    this.onControlTouched();
-    this.mfBlur.emit();
-  }
-}

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

@@ -1,2 +0,0 @@
-export { MfToolbarComponent } from './mf-toolbar.component';
-export type { MfToolbarVariant } from './mf-toolbar.component';

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

@@ -1,77 +0,0 @@
-:host {
-  display: block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-toolbar.mat-toolbar {
-  font-family: var(--mf-font-base) !important;
-  padding: 0 var(--mf-space-6) !important;
-  min-height: 56px !important;
-  display: flex !important;
-  align-items: center !important;
-  transition:
-    background-color var(--mf-duration-base) var(--mf-ease-standard),
-    box-shadow var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-/* ── Variants ──────────────────────────────────────────────────── */
-.mf-toolbar--surface.mat-toolbar {
-  background-color: var(--mf-color-surface) !important;
-  color: var(--mf-color-on-surface) !important;
-}
-
-.mf-toolbar--brand.mat-toolbar {
-  background-color: var(--mf-color-brand) !important;
-  color: var(--mf-color-on-brand) !important;
-}
-
-.mf-toolbar--transparent.mat-toolbar {
-  background-color: transparent !important;
-  color: var(--mf-color-on-surface) !important;
-}
-
-/* ── Bordered ──────────────────────────────────────────────────── */
-.mf-toolbar--bordered.mat-toolbar {
-  border-bottom: 1px solid var(--mf-color-border);
-}
-
-.mf-toolbar--brand.mf-toolbar--bordered.mat-toolbar {
-  border-bottom-color: rgba(255, 255, 255, 0.15);
-}
-
-/* ── Sticky ────────────────────────────────────────────────────── */
-.mf-toolbar--sticky.mat-toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 1000;
-}
-
-/* ── Elevated ──────────────────────────────────────────────────── */
-.mf-toolbar--elevated.mat-toolbar {
-  box-shadow: var(--mf-shadow-sm) !important;
-}
-
-/* ── Layout ────────────────────────────────────────────────────── */
-.mf-toolbar__start {
-  display: flex;
-  align-items: center;
-  gap: var(--mf-space-3);
-}
-
-.mf-toolbar__spacer {
-  flex: 1;
-}
-
-.mf-toolbar__end {
-  display: flex;
-  align-items: center;
-  gap: var(--mf-space-2);
-}
-
-/* ── Title ─────────────────────────────────────────────────────── */
-.mf-toolbar__title {
-  font-family: var(--mf-font-display) !important;
-  font-size: var(--mf-text-lg) !important;
-  font-weight: var(--mf-weight-bold) !important;
-  letter-spacing: -0.01em;
-}

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

@@ -1,56 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { MatToolbarModule } from '@angular/material/toolbar';
-
-export type MfToolbarVariant = 'surface' | 'brand' | 'transparent';
-
-/**
- * Toolbar de la librería ng-comps.
- * Envuelve Angular Material `mat-toolbar` y expone una API uniforme
- * con look and feel de marca. Usa content projection para acciones.
- */
-@Component({
-  selector: 'mf-toolbar',
-  imports: [MatToolbarModule],
-  template: `
-    <mat-toolbar [class]="hostClasses()">
-      <div class="mf-toolbar__start">
-        @if (title()) {
-          <span class="mf-toolbar__title">{{ title() }}</span>
-        }
-        <ng-content select="[mfToolbarStart]" />
-      </div>
-      <div class="mf-toolbar__spacer"></div>
-      <div class="mf-toolbar__end">
-        <ng-content select="[mfToolbarEnd]" />
-        <ng-content />
-      </div>
-    </mat-toolbar>
-  `,
-  styleUrl: './mf-toolbar.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfToolbarComponent {
-  /** Título que se muestra en la toolbar */
-  readonly title = input<string | undefined>(undefined);
-  /** Variante visual */
-  readonly variant = input<MfToolbarVariant>('surface');
-  /** Muestra borde inferior */
-  readonly bordered = input(true);
-  /** Toolbar fija en la parte superior */
-  readonly sticky = input(false);
-  /** Elevación sutil */
-  readonly elevated = input(false);
-
-  readonly hostClasses = computed(() => {
-    const classes = ['mf-toolbar', `mf-toolbar--${this.variant()}`];
-    if (this.bordered()) classes.push('mf-toolbar--bordered');
-    if (this.sticky()) classes.push('mf-toolbar--sticky');
-    if (this.elevated()) classes.push('mf-toolbar--elevated');
-    return classes.join(' ');
-  });
-}

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

@@ -1,3 +0,0 @@
-export { MfTooltipComponent } from './mf-tooltip.component';
-export { MfTooltipDirective } from './mf-tooltip.directive';
-export type { MfTooltipPosition } from './mf-tooltip.directive';

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

@@ -1,7 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-.mf-tooltip {
-  cursor: default;
-}

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

@@ -1,37 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfTooltipComponent } from './mf-tooltip.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-describe('MfTooltipComponent', () => {
-  let fixture: ComponentFixture<MfTooltipComponent>;
-  let component: MfTooltipComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfTooltipComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfTooltipComponent);
-    component = fixture.componentInstance;
-    fixture.componentRef.setInput('text', 'Tooltip text');
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should apply above position by default', () => {
-    expect(component.hostClasses()).toContain('mf-tooltip--above');
-  });
-
-  it('should apply custom position', () => {
-    fixture.componentRef.setInput('position', 'below');
-    expect(component.hostClasses()).toContain('mf-tooltip--below');
-  });
-
-  it('should have correct default delays', () => {
-    expect(component.showDelay()).toBe(200);
-    expect(component.hideDelay()).toBe(0);
-  });
-});

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

@@ -1,47 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { MfTooltipDirective, MfTooltipPosition } from './mf-tooltip.directive';
-
-/**
- * Tooltip de la librería ng-comps.
- * Envuelve Angular Material `matTooltip` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-tooltip',
-  imports: [MfTooltipDirective],
-  template: `
-    <span
-      [mfTooltip]="text()"
-      [mfTooltipPosition]="position()"
-      [mfTooltipDisabled]="disabled()"
-      [mfTooltipShowDelay]="showDelay()"
-      [mfTooltipHideDelay]="hideDelay()"
-      [class]="hostClasses()"
-    >
-      <ng-content />
-    </span>
-  `,
-  styleUrl: './mf-tooltip.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfTooltipComponent {
-  /** Texto del tooltip */
-  readonly text = input.required<string>();
-  /** Posición del tooltip */
-  readonly position = input<MfTooltipPosition>('above');
-  /** Deshabilitado */
-  readonly disabled = input(false);
-  /** Delay para mostrar (ms) */
-  readonly showDelay = input(200);
-  /** Delay para ocultar (ms) */
-  readonly hideDelay = input(0);
-
-  readonly hostClasses = computed(() => {
-    return ['mf-tooltip', `mf-tooltip--${this.position()}`].join(' ');
-  });
-}

package/src/app/components/tooltip/mf-tooltip.directive.ts

@@ -1,22 +0,0 @@
-import { Directive } from '@angular/core';
-import { MatTooltip } from '@angular/material/tooltip';
-
-export type MfTooltipPosition = 'above' | 'below' | 'left' | 'right';
-
-@Directive({
-  selector: '[mfTooltip]',
-  standalone: true,
-  hostDirectives: [
-    {
-      directive: MatTooltip,
-      inputs: [
-        'matTooltip: mfTooltip',
-        'matTooltipPosition: mfTooltipPosition',
-        'matTooltipDisabled: mfTooltipDisabled',
-        'matTooltipShowDelay: mfTooltipShowDelay',
-        'matTooltipHideDelay: mfTooltipHideDelay',
-      ],
-    },
-  ],
-})
-export class MfTooltipDirective {}

package/src/index.html

@@ -1,18 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>MiApp</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <!-- Preconnect hints for Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <!-- Material Icons (Google Fonts CDN) -->
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>

package/src/main.ts

@@ -1,6 +0,0 @@
-import { bootstrapApplication } from '@angular/platform-browser';
-import { appConfig } from './app/app.config';
-import { App } from './app/app';
-
-bootstrapApplication(App, appConfig)
-  .catch((err) => console.error(err));

package/src/public-api.ts

@@ -1,31 +0,0 @@
-export * from './app/components/accordion';
-export * from './app/components/alert';
-export * from './app/components/autocomplete';
-export * from './app/components/avatar';
-export * from './app/components/badge';
-export * from './app/components/breadcrumb';
-export * from './app/components/button';
-export * from './app/components/card';
-export * from './app/components/checkbox';
-export * from './app/components/chip';
-export * from './app/components/datepicker';
-export * from './app/components/dialog';
-export * from './app/components/divider';
-export * from './app/components/form-field';
-export * from './app/components/grid-list';
-export * from './app/components/icon';
-export * from './app/components/input';
-export * from './app/components/menu';
-export * from './app/components/paginator';
-export * from './app/components/progress-bar';
-export * from './app/components/progress-spinner';
-export * from './app/components/radio-button';
-export * from './app/components/select';
-export * from './app/components/sidenav';
-export * from './app/components/slide-toggle';
-export * from './app/components/snackbar';
-export * from './app/components/table';
-export * from './app/components/tabs';
-export * from './app/components/textarea';
-export * from './app/components/toolbar';
-export * from './app/components/tooltip';

package/src/stories/About.mdx

@@ -1,72 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="About" />
-
-# ng-comps: Quick Start Guide
-
-[ng-comps](https://www.npmjs.com/package/ng-comps) is an Angular component library with a custom design layer built on top of Angular Material.
-
-The library was created by [Manuel Ferrer](https://manuelferrer.vercel.app/).
-
-<div style={{ border: '1px solid #e5e7eb', borderRadius: '8px', padding: '12px', display: 'flex', gap: '12px', alignItems: 'center', maxWidth: '560px' }}>
-	<div style={{ flex: '0 0 64px', height: '64px', background: '#f3f4f6', borderRadius: '6px', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700, color: '#111827' }}>PE</div>
-	<div>
-		<a href="https://preguntas-entrevista.vercel.app/" target="_blank" rel="noreferrer" style={{ fontWeight: 600, color: '#111827', textDecoration: 'none' }}>preguntas-entrevista</a>
-		<div style={{ color: '#6b7280', fontSize: '0.9rem' }}>Sample project built with ng-comps.</div>
-	</div>
-</div>
-
-## 1) Install
-
-```bash
-npm i ng-comps
-```
-
-## 2) Load global styles
-
-In your app global stylesheet, for example `src/styles.css`, import:
-
-```css
-@import 'ng-comps/theme/tokens.css';
-@import 'ng-comps/styles.css';
-```
-
-## 3) Use components (Standalone)
-
-Import only the components you actually use to maximize tree-shaking:
-
-```ts
-import { Component } from '@angular/core';
-import { MfButtonComponent, MfInputComponent } from 'ng-comps';
-
-@Component({
-	selector: 'app-example',
-	imports: [MfButtonComponent, MfInputComponent],
-	template: `
-		<mf-input label="Email" placeholder="you@company.com" />
-		<mf-button label="Save" variant="filled" />
-	`,
-})
-export class ExampleComponent {}
-```
-
-## 4) Consumer project requirements
-
-`ng-comps` uses `peerDependencies`, so your project must have Angular and RxJS installed.
-
-Recommended:
-
-- Angular `^21`
-- RxJS `~7.8`
-
-## 5) Integration best practices
-
-- Import components directly from `ng-comps` as needed.
-- Keep your global styles aligned with the library `tokens.css`.
-- Use Storybook as the visual and API reference for each component.
-
-## Useful references in this repo
-
-- Design tokens: `src/theme/tokens.css`
-- Material theme: `src/theme/material-theme.scss`
-- Base example: `src/app/components/button/mf-button.component.ts`

package/src/stories/Accessibility.mdx

@@ -1,59 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Accessibility" />
-
-# Accessibility in ng-comps v1
-
-`ng-comps` v1 is documented as an accessibility-first component library, not as an automatic compliance shortcut.
-
-## Contract summary
-
-- Components are designed around WCAG 2.2 AA implementation targets.
-- Procurement evidence is documented against EN 301 549 v3.2.1 / WCAG 2.1 AA until the next EN revision is formally published.
-- Final application conformance still depends on consumer content, integration, routing, async state changes, and theme overrides.
-
-Read the full repository contract in `ACCESSIBILITY.md` at the project root.
-
-## Defaults enforced by the library
-
-- Accessible naming inputs on interactive controls.
-- Visible global `:focus-visible` styles.
-- Form controls wired to hints, counters, and errors through `aria-describedby`.
-- Safe dialog defaults through `MfDialogService`.
-- Explicit row actions in `MfTableComponent`.
-- Snackbar politeness and announcement options.
-- Tooltip directive usage on the real host element with `mfTooltip`.
-
-## What to review manually
-
-- Keyboard-only navigation
-- Focus visibility
-- 200% zoom
-- Reflow at 320 CSS px equivalent
-- NVDA on Windows
-- VoiceOver on macOS
-- Contrast after any token override
-
-## Storybook contract stories
-
-- [Dialog focus contract](?path=/story/accessibility-contracts--dialog-focus-contract)
-- [Menu keyboard contract](?path=/story/accessibility-contracts--menu-keyboard-contract)
-- [Select keyboard contract](?path=/story/accessibility-contracts--select-keyboard-contract)
-- [Autocomplete keyboard contract](?path=/story/accessibility-contracts--autocomplete-keyboard-contract)
-- [Datepicker keyboard contract](?path=/story/accessibility-contracts--datepicker-keyboard-contract)
-- [Table explicit action contract](?path=/story/accessibility-contracts--table-explicit-action-contract)
-- [Sidenav keyboard contract](?path=/story/accessibility-contracts--sidenav-keyboard-contract)
-
-## Correct and incorrect usage
-
-Use the contract stories as the reference implementation. Anti-pattern stories intentionally document what not to ship:
-
-- missing labels on icon-only triggers
-- placeholders used as labels
-- clickable rows instead of explicit actions
-- menus and dialogs that do not restore focus
-- theme overrides that remove focus rings or break contrast
-
-## Procurement note
-
-This library now provides a stronger technical base for WCAG and EN 301 549 claims, plus evidence-oriented docs and tests. It does not replace product-level accessibility validation or a formal VPAT process.