ng-comps 1.0.2 → 2.0.0

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

@@ -1,44 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { MatDividerModule } from '@angular/material/divider';
-
-export type MfDividerVariant = 'full' | 'inset' | 'middle';
-
-/**
- * Divider de la librería ng-comps.
- * Envuelve Angular Material `mat-divider` y expone una API uniforme
- * con look and feel de marca.
- */
-@Component({
-  selector: 'mf-divider',
-  imports: [MatDividerModule],
-  template: `
-    <mat-divider
-      [vertical]="vertical()"
-      [inset]="insetValue()"
-      [class]="hostClasses()"
-    />
-  `,
-  styleUrl: './mf-divider.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfDividerComponent {
-  /** Orientación vertical */
-  readonly vertical = input(false);
-  /** Variante visual */
-  readonly variant = input<MfDividerVariant>('full');
-  /** Espaciado extra arriba y abajo */
-  readonly spacing = input<'none' | 'sm' | 'md' | 'lg'>('none');
-
-  readonly insetValue = computed(() => this.variant() === 'inset');
-
-  readonly hostClasses = computed(() => {
-    const classes = ['mf-divider', `mf-divider--${this.variant()}`, `mf-divider--spacing-${this.spacing()}`];
-    if (this.vertical()) classes.push('mf-divider--vertical');
-    return classes.join(' ');
-  });
-}

package/src/app/components/form-field/index.ts

@@ -1 +0,0 @@
-export { MfFormFieldComponent } from './mf-form-field.component';

package/src/app/components/form-field/mf-form-field.component.css

@@ -1,51 +0,0 @@
-:host {
-  display: block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-form-field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--mf-space-1);
-}
-
-/* ── Label ─────────────────────────────────────────────────────── */
-.mf-form-field__label {
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-sm);
-  font-weight: var(--mf-weight-medium);
-  color: var(--mf-color-on-surface);
-  line-height: var(--mf-leading-normal);
-  cursor: default;
-}
-
-.mf-form-field__label--error {
-  color: var(--mf-color-error-500);
-}
-
-.mf-form-field__required {
-  color: var(--mf-color-error-500);
-}
-
-/* ── Control container ────────────────────────────────────────── */
-.mf-form-field__control {
-  width: 100%;
-}
-
-/* ── Hint ──────────────────────────────────────────────────────── */
-.mf-form-field__hint {
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-xs);
-  color: var(--mf-color-neutral-400);
-  margin: 0;
-  padding-left: var(--mf-space-1);
-}
-
-/* ── Error ─────────────────────────────────────────────────────── */
-.mf-form-field__error {
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-xs);
-  color: var(--mf-color-error-500);
-  margin: 0;
-  padding-left: var(--mf-space-1);
-}

package/src/app/components/form-field/mf-form-field.component.ts

@@ -1,74 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  effect,
-  input,
-} from '@angular/core';
-import { warnInDev } from '../../a11y';
-
-/**
- * Contenedor de campo de formulario de la librería ng-comps.
- * Proporciona estructura de layout consistente con label, contenido proyectado,
- * y mensajes opcionales de ayuda o error.
- */
-@Component({
-  selector: 'mf-form-field',
-  imports: [],
-  template: `
-    @if (label()) {
-      <label [class]="labelClasses()" [attr.for]="fieldId()">{{ label() }}
-        @if (required()) {
-          <span class="mf-form-field__required" aria-hidden="true"> *</span>
-        }
-      </label>
-    }
-    <div class="mf-form-field__control">
-      <ng-content />
-    </div>
-    @if (error()) {
-      <p class="mf-form-field__error" role="alert">{{ error() }}</p>
-    } @else if (hint()) {
-      <p class="mf-form-field__hint">{{ hint() }}</p>
-    }
-  `,
-  styleUrl: './mf-form-field.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class]': 'hostClasses()',
-  },
-})
-export class MfFormFieldComponent {
-  /** Etiqueta del campo */
-  readonly label = input<string | undefined>(undefined);
-  /** ID para asociar el label con el control */
-  readonly fieldId = input<string | undefined>(undefined);
-  /** Texto de ayuda */
-  readonly hint = input<string | undefined>(undefined);
-  /** Mensaje de error */
-  readonly error = input<string | undefined>(undefined);
-  /** Campo requerido (muestra asterisco) */
-  readonly required = input(false);
-
-  constructor() {
-    effect(() => {
-      if (this.label() && !this.fieldId()) {
-        warnInDev(
-          'mf-form-field requiere `fieldId` cuando renderiza `label` para poder asociarlo al control proyectado.',
-        );
-      }
-    });
-  }
-
-  readonly labelClasses = computed(() => {
-    const classes = ['mf-form-field__label'];
-    if (this.error()) classes.push('mf-form-field__label--error');
-    return classes.join(' ');
-  });
-
-  readonly hostClasses = computed(() => {
-    const classes = ['mf-form-field'];
-    if (this.error()) classes.push('mf-form-field--error');
-    return classes.join(' ');
-  });
-}

package/src/app/components/grid-list/index.ts

@@ -1,2 +0,0 @@
-export { MfGridListComponent } from './mf-grid-list.component';
-export type { MfGridTile } from './mf-grid-list.component';

package/src/app/components/grid-list/mf-grid-list.component.css

@@ -1,47 +0,0 @@
-:host {
-  display: block;
-}
-
-/* ── Grid list ─────────────────────────────────────────────────── */
-.mf-grid-list {
-  font-family: var(--mf-font-base) !important;
-}
-
-/* ── Tile ──────────────────────────────────────────────────────── */
-.mf-grid-list__tile {
-  background-color: var(--mf-color-surface-raised);
-  border-radius: var(--mf-radius-md) !important;
-  overflow: hidden;
-  transition: box-shadow var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-grid-list__tile:hover {
-  box-shadow: var(--mf-shadow-md);
-}
-
-/* ── Tile header ───────────────────────────────────────────────── */
-.mf-grid-list__tile mat-grid-tile-header,
-.mf-grid-list__tile .mat-grid-tile-header {
-  background: linear-gradient(
-    to top,
-    rgba(15, 23, 42, 0.64) 0%,
-    rgba(15, 23, 42, 0) 100%
-  ) !important;
-  padding: var(--mf-space-3) var(--mf-space-4) !important;
-}
-
-.mf-grid-list__tile-title {
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-sm);
-  font-weight: var(--mf-weight-bold);
-  color: var(--mf-color-neutral-0);
-  display: block;
-}
-
-.mf-grid-list__tile-subtitle {
-  font-family: var(--mf-font-base);
-  font-size: var(--mf-text-xs);
-  font-weight: var(--mf-weight-regular);
-  color: var(--mf-color-neutral-200);
-  display: block;
-}

package/src/app/components/grid-list/mf-grid-list.component.spec.ts

@@ -1,57 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MfGridListComponent } from './mf-grid-list.component';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-
-const SAMPLE_TILES = [
-  { title: 'Tile 1', subtitle: 'Sub 1', background: '#ccc' },
-  { title: 'Tile 2', background: '#eee', colspan: 2 },
-];
-
-describe('MfGridListComponent', () => {
-  let fixture: ComponentFixture<MfGridListComponent>;
-  let component: MfGridListComponent;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [MfGridListComponent, NoopAnimationsModule],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(MfGridListComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should render mat-grid-list', () => {
-    const gridList = fixture.nativeElement.querySelector('mat-grid-list');
-    expect(gridList).toBeTruthy();
-  });
-
-  it('should render tiles from input', () => {
-    fixture.componentRef.setInput('tiles', SAMPLE_TILES);
-    fixture.detectChanges();
-    const tiles = fixture.nativeElement.querySelectorAll('mat-grid-tile');
-    expect(tiles.length).toBe(SAMPLE_TILES.length);
-  });
-
-  it('should render tile title', () => {
-    fixture.componentRef.setInput('tiles', SAMPLE_TILES);
-    fixture.detectChanges();
-    const titleEl = fixture.nativeElement.querySelector('.mf-grid-list__tile-title');
-    expect(titleEl?.textContent).toContain('Tile 1');
-  });
-
-  it('should default cols to 2', () => {
-    expect(component.cols()).toBe(2);
-  });
-
-  it('should render empty grid when tiles is empty', () => {
-    fixture.componentRef.setInput('tiles', []);
-    fixture.detectChanges();
-    const tiles = fixture.nativeElement.querySelectorAll('mat-grid-tile');
-    expect(tiles.length).toBe(0);
-  });
-});

package/src/app/components/grid-list/mf-grid-list.component.ts

@@ -1,68 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  input,
-} from '@angular/core';
-import { MatGridListModule } from '@angular/material/grid-list';
-
-export interface MfGridTile {
-  /** Título de la tile */
-  title?: string;
-  /** Subtítulo de la tile */
-  subtitle?: string;
-  /** Número de columnas que ocupa */
-  colspan?: number;
-  /** Número de filas que ocupa */
-  rowspan?: number;
-  /** Color de fondo */
-  background?: string;
-}
-
-/**
- * Lista en cuadrícula de la librería ng-comps.
- * Envuelve Angular Material `mat-grid-list` y expone una API uniforme
- * con look and feel de marca. Soporta tiles estáticas y content projection.
- */
-@Component({
-  selector: 'mf-grid-list',
-  imports: [MatGridListModule],
-  template: `
-    <mat-grid-list
-      class="mf-grid-list"
-      [cols]="cols()"
-      [rowHeight]="rowHeight()"
-      [gutterSize]="gutterSize()"
-    >
-      @for (tile of tiles(); track $index) {
-        <mat-grid-tile
-          class="mf-grid-list__tile"
-          [colspan]="tile.colspan ?? 1"
-          [rowspan]="tile.rowspan ?? 1"
-          [style.background]="tile.background || null"
-        >
-          <mat-grid-tile-header>
-            @if (tile.title) {
-              <span class="mf-grid-list__tile-title">{{ tile.title }}</span>
-            }
-            @if (tile.subtitle) {
-              <span class="mf-grid-list__tile-subtitle">{{ tile.subtitle }}</span>
-            }
-          </mat-grid-tile-header>
-        </mat-grid-tile>
-      }
-      <ng-content />
-    </mat-grid-list>
-  `,
-  styleUrl: './mf-grid-list.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfGridListComponent {
-  /** Número de columnas */
-  readonly cols = input(2);
-  /** Altura de cada fila */
-  readonly rowHeight = input<string | number>('1:1');
-  /** Espacio entre tiles */
-  readonly gutterSize = input('8px');
-  /** Tiles a renderizar */
-  readonly tiles = input<MfGridTile[]>([]);
-}

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

@@ -1,2 +0,0 @@
-export { MfIconComponent } from './mf-icon.component';
-export type { MfIconSize, MfIconColor } from './mf-icon.component';

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

@@ -1,56 +0,0 @@
-:host {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-icon {
-  transition: color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-/* ── Sizes ─────────────────────────────────────────────────────── */
-.mf-icon--sm {
-  font-size: 16px !important;
-  width: 16px !important;
-  height: 16px !important;
-}
-
-.mf-icon--md {
-  font-size: 20px !important;
-  width: 20px !important;
-  height: 20px !important;
-}
-
-.mf-icon--lg {
-  font-size: 24px !important;
-  width: 24px !important;
-  height: 24px !important;
-}
-
-.mf-icon--xl {
-  font-size: 32px !important;
-  width: 32px !important;
-  height: 32px !important;
-}
-
-/* ── Colors ────────────────────────────────────────────────────── */
-.mf-icon--default {
-  color: var(--mf-color-on-surface);
-}
-
-.mf-icon--brand {
-  color: var(--mf-color-brand);
-}
-
-.mf-icon--muted {
-  color: var(--mf-color-neutral-400);
-}
-
-.mf-icon--error {
-  color: var(--mf-color-error-500);
-}
-
-.mf-icon--inherit {
-  color: inherit;
-}

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

@@ -1,41 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-
-export type MfIconSize = 'sm' | 'md' | 'lg' | 'xl';
-export type MfIconColor = 'default' | 'brand' | 'muted' | 'error' | 'inherit';
-
-/**
- * Icono de la librería ng-comps.
- * Envuelve Angular Material `mat-icon` y expone una API uniforme
- * con tamaños y colores de marca.
- */
-@Component({
-  selector: 'mf-icon',
-  imports: [MatIconModule],
-  template: `
-    <mat-icon [class]="hostClasses()" [attr.aria-hidden]="ariaHidden()" [attr.aria-label]="label()">{{ name() }}</mat-icon>
-  `,
-  styleUrl: './mf-icon.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class MfIconComponent {
-  /** Nombre del icono de Material Symbols / Material Icons */
-  readonly name = input.required<string>();
-  /** Tamaño visual del icono */
-  readonly size = input<MfIconSize>('md');
-  /** Color semántico del icono */
-  readonly color = input<MfIconColor>('default');
-  /** Etiqueta accesible. Si se omite, el icono será decorativo (aria-hidden) */
-  readonly label = input<string | undefined>(undefined);
-
-  readonly ariaHidden = computed(() => (this.label() ? 'false' : 'true'));
-
-  readonly hostClasses = computed(() => {
-    return ['mf-icon', `mf-icon--${this.size()}`, `mf-icon--${this.color()}`].join(' ');
-  });
-}

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

@@ -1,2 +0,0 @@
-export { MfInputComponent } from './mf-input.component';
-export type { MfInputSize } from './mf-input.component';

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

@@ -1,105 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-/* ── Base ──────────────────────────────────────────────────────── */
-.mf-input {
-  font-family: var(--mf-font-base) !important;
-  width: 100%;
-}
-
-.mf-input--full {
-  width: 100%;
-}
-
-/* ── Mat-form-field overrides ─────────────────────────────────── */
-.mf-input .mat-mdc-text-field-wrapper {
-  border-radius: var(--mf-radius-md) !important;
-}
-
-.mf-input .mdc-notched-outline__leading,
-.mf-input .mdc-notched-outline__notch,
-.mf-input .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-border) !important;
-  transition: border-color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-input .mat-mdc-form-field-focus-overlay {
-  background-color: transparent !important;
-}
-
-/* ── Focus state ──────────────────────────────────────────────── */
-.mf-input.mat-focused .mdc-notched-outline__leading,
-.mf-input.mat-focused .mdc-notched-outline__notch,
-.mf-input.mat-focused .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-brand) !important;
-  border-width: 1.5px !important;
-}
-
-/* ── Error state ──────────────────────────────────────────────── */
-.mf-input--error .mdc-notched-outline__leading,
-.mf-input--error .mdc-notched-outline__notch,
-.mf-input--error .mdc-notched-outline__trailing {
-  border-color: var(--mf-color-error-500) !important;
-}
-
-/* ── Label styles ─────────────────────────────────────────────── */
-.mf-input .mat-mdc-floating-label {
-  font-family: var(--mf-font-base) !important;
-  font-weight: var(--mf-weight-medium) !important;
-  color: var(--mf-color-neutral-400) !important;
-}
-
-.mf-input.mat-focused .mat-mdc-floating-label {
-  color: var(--mf-color-brand) !important;
-}
-
-/* ── Input text ───────────────────────────────────────────────── */
-.mf-input .mat-mdc-input-element {
-  font-family: var(--mf-font-base) !important;
-  color: var(--mf-color-on-surface) !important;
-  caret-color: var(--mf-color-brand);
-}
-
-/* ── Hint & Error ─────────────────────────────────────────────── */
-.mf-input .mat-mdc-form-field-hint {
-  font-size: var(--mf-text-xs) !important;
-  color: var(--mf-color-neutral-400) !important;
-}
-
-.mf-input .mat-mdc-form-field-error {
-  font-size: var(--mf-text-xs) !important;
-}
-
-/* ── Sizes ─────────────────────────────────────────────────────── */
-.mf-input--sm .mat-mdc-input-element {
-  font-size: var(--mf-text-sm) !important;
-}
-
-.mf-input--md .mat-mdc-input-element {
-  font-size: var(--mf-text-base) !important;
-}
-
-.mf-input--lg .mat-mdc-input-element {
-  font-size: var(--mf-text-lg) !important;
-  padding-top: var(--mf-space-1) !important;
-  padding-bottom: var(--mf-space-1) !important;
-}
-
-/* ── Prefix / Suffix icons ────────────────────────────────────── */
-.mf-input .mat-icon {
-  color: var(--mf-color-neutral-400) !important;
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  transition: color var(--mf-duration-base) var(--mf-ease-standard);
-}
-
-.mf-input.mat-focused .mat-icon {
-  color: var(--mf-color-brand) !important;
-}
-
-/* ── Disabled ──────────────────────────────────────────────────── */
-.mf-input .mat-mdc-input-element:disabled {
-  color: var(--mf-color-neutral-300) !important;
-}