ng-comps 0.2.0 → 1.0.1

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

@@ -0,0 +1,121 @@
+:host {
+  display: inline-block;
+}
+
+/* ── Base ──────────────────────────────────────────────────────── */
+.mf-select {
+  font-family: var(--mf-font-base) !important;
+  width: 100%;
+}
+
+.mf-select--full {
+  width: 100%;
+}
+
+/* ── Mat-form-field overrides ─────────────────────────────────── */
+.mf-select .mat-mdc-text-field-wrapper {
+  border-radius: var(--mf-radius-md) !important;
+}
+
+.mf-select .mdc-notched-outline {
+  border-radius: var(--mf-radius-md) !important;
+}
+
+.mf-select .mdc-notched-outline__leading,
+.mf-select .mdc-notched-outline__notch,
+.mf-select .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-border) !important;
+  transition: border-color var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+.mf-select .mat-mdc-form-field-focus-overlay {
+  background-color: transparent !important;
+}
+
+/* ── Focus state ──────────────────────────────────────────────── */
+.mf-select.mat-focused .mdc-notched-outline__leading,
+.mf-select.mat-focused .mdc-notched-outline__notch,
+.mf-select.mat-focused .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-brand) !important;
+  border-width: 1.5px !important;
+}
+
+/* ── Error state ──────────────────────────────────────────────── */
+.mf-select--error .mdc-notched-outline__leading,
+.mf-select--error .mdc-notched-outline__notch,
+.mf-select--error .mdc-notched-outline__trailing {
+  border-color: var(--mf-color-error-500) !important;
+}
+
+/* ── Label ────────────────────────────────────────────────────── */
+.mf-select .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-select.mat-focused .mat-mdc-floating-label {
+  color: var(--mf-color-brand) !important;
+}
+
+/* ── Trigger text ─────────────────────────────────────────────── */
+.mf-select .mat-mdc-select-trigger {
+  font-family: var(--mf-font-base) !important;
+  color: var(--mf-color-on-surface) !important;
+}
+
+.mf-select .mat-mdc-select-placeholder {
+  color: var(--mf-color-neutral-400) !important;
+}
+
+/* ── Arrow icon ───────────────────────────────────────────────── */
+.mf-select .mat-mdc-select-arrow {
+  color: var(--mf-color-neutral-400) !important;
+  transition: color var(--mf-duration-base) var(--mf-ease-standard);
+}
+
+.mf-select.mat-focused .mat-mdc-select-arrow {
+  color: var(--mf-color-brand) !important;
+}
+
+/* ── Prefix / Suffix icons ────────────────────────────────────── */
+.mf-select .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-select.mat-focused .mat-icon {
+  color: var(--mf-color-brand) !important;
+}
+
+/* ── Hint & Error ─────────────────────────────────────────────── */
+.mf-select .mat-mdc-form-field-hint {
+  font-size: var(--mf-text-xs) !important;
+  color: var(--mf-color-neutral-400) !important;
+}
+
+.mf-select .mat-mdc-form-field-error {
+  font-size: var(--mf-text-xs) !important;
+}
+
+/* ── Sizes ─────────────────────────────────────────────────────── */
+.mf-select--sm .mat-mdc-select-trigger {
+  font-size: var(--mf-text-sm) !important;
+}
+
+.mf-select--md .mat-mdc-select-trigger {
+  font-size: var(--mf-text-base) !important;
+}
+
+.mf-select--lg .mat-mdc-select-trigger {
+  font-size: var(--mf-text-lg) !important;
+}
+
+/* ── Disabled ──────────────────────────────────────────────────── */
+.mf-select .mat-mdc-select-trigger[aria-disabled='true'],
+.mf-select .mat-mdc-select-trigger.mat-mdc-select-disabled {
+  color: var(--mf-color-neutral-300) !important;
+}

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

@@ -0,0 +1,108 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { MfSelectComponent } from './mf-select.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+describe('MfSelectComponent', () => {
+  let fixture: ComponentFixture<MfSelectComponent>;
+  let component: MfSelectComponent;
+
+  const testOptions = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3', disabled: true },
+  ];
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MfSelectComponent, NoopAnimationsModule],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(MfSelectComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('options', testOptions);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render mat-select', () => {
+    const select = fixture.nativeElement.querySelector('mat-select');
+    expect(select).toBeTruthy();
+  });
+
+  it('should apply md size class by default', () => {
+    expect(component.hostClasses()).toContain('mf-select--md');
+  });
+
+  it('should apply sm size class', () => {
+    fixture.componentRef.setInput('size', 'sm');
+    expect(component.hostClasses()).toContain('mf-select--sm');
+  });
+
+  it('should apply lg size class', () => {
+    fixture.componentRef.setInput('size', 'lg');
+    expect(component.hostClasses()).toContain('mf-select--lg');
+  });
+
+  it('should include mf-select--full when fullWidth is true', () => {
+    fixture.componentRef.setInput('fullWidth', true);
+    expect(component.hostClasses()).toContain('mf-select--full');
+  });
+
+  it('should include mf-select--error when error is provided', () => {
+    fixture.componentRef.setInput('error', 'Required');
+    expect(component.hostClasses()).toContain('mf-select--error');
+  });
+
+  it('should emit selection change', () => {
+    const spy = vi.fn();
+    component.mfSelectionChange.subscribe(spy);
+    component.onSelectionChange({ value: '2' });
+    expect(spy).toHaveBeenCalledWith('2');
+  });
+
+  it('should render label when provided', () => {
+    fixture.componentRef.setInput('label', 'Choose');
+    fixture.detectChanges();
+    const label = fixture.nativeElement.querySelector('mat-label');
+    expect(label?.textContent).toContain('Choose');
+  });
+
+  it('should render hint when provided', () => {
+    fixture.componentRef.setInput('hint', 'Pick one');
+    fixture.detectChanges();
+    const hint = fixture.nativeElement.querySelector('mat-hint');
+    expect(hint?.textContent).toContain('Pick one');
+  });
+
+  it('should render error when provided', () => {
+    fixture.componentRef.setInput('error', 'This field is required');
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toContain('This field is required');
+  });
+
+  it('should include mf-select-panel in panelClasses by default', () => {
+    expect(component.panelClasses()).toContain('mf-select-panel');
+  });
+
+  it('should merge extra panelClass string into panelClasses', () => {
+    fixture.componentRef.setInput('panelClass', 'custom-panel');
+    expect(component.panelClasses()).toContain('mf-select-panel');
+    expect(component.panelClasses()).toContain('custom-panel');
+  });
+
+  it('should merge extra panelClass array into panelClasses', () => {
+    fixture.componentRef.setInput('panelClass', ['panel-a', 'panel-b']);
+    expect(component.panelClasses()).toContain('panel-a');
+    expect(component.panelClasses()).toContain('panel-b');
+  });
+
+  it('should render leading icon when provided', () => {
+    fixture.componentRef.setInput('leadingIcon', 'search');
+    fixture.detectChanges();
+    const icon = fixture.nativeElement.querySelector('[matprefix]');
+    expect(icon).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,252 @@
+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 { MatIconModule } from '@angular/material/icon';
+import { MatSelectModule } from '@angular/material/select';
+import {
+  createUniqueId,
+  hasAccessibleName,
+  mergeAriaIds,
+  warnInDev,
+} from '../../a11y';
+
+export interface MfSelectOption {
+  value: string | number;
+  label: string;
+  disabled?: boolean;
+}
+
+export type MfSelectSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Select de la librería ng-comps.
+ * Envuelve Angular Material `mat-select` y expone una API uniforme
+ * con look and feel de marca.
+ *
+ * El dropdown se estiliza mediante la clase global `mf-select-panel` que se
+ * inserta en el overlay. Puedes añadir clases adicionales con `panelClass`.
+ */
+@Component({
+  selector: 'mf-select',
+  imports: [MatSelectModule, MatFormFieldModule, MatIconModule],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MfSelectComponent),
+      multi: true,
+    },
+  ],
+  template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      @if (leadingIcon()) {
+        <mat-icon matPrefix aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+      }
+      <mat-select
+        [id]="controlId()"
+        [value]="internalValue()"
+        [disabled]="isDisabled()"
+        [multiple]="multiple()"
+        [placeholder]="placeholder()"
+        [required]="required()"
+        [errorStateMatcher]="errorStateMatcher"
+        [panelClass]="panelClasses()"
+        [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"
+        (selectionChange)="onSelectionChange($event)"
+      >
+        @for (option of options(); track option.value) {
+          <mat-option [value]="option.value" [disabled]="option.disabled ?? false">
+            {{ option.label }}
+          </mat-option>
+        }
+      </mat-select>
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-select__error" [attr.id]="errorId()" role="alert">{{ error() }}</p>
+    }
+  `,
+  styleUrl: './mf-select.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MfSelectComponent implements ControlValueAccessor {
+  private readonly cdr = inject(ChangeDetectorRef);
+  private readonly ngControl = inject(NgControl, { self: true, optional: true });
+  private readonly generatedId = createUniqueId('mf-select');
+  private readonly disabledFromForm = signal(false);
+  protected readonly internalValue = signal<
+    string | number | (string | number)[] | undefined
+  >(undefined);
+  private onControlChange: (
+    value: string | number | (string | number)[] | undefined,
+  ) => void = () => undefined;
+  private onControlTouched: () => void = () => undefined;
+  readonly errorStateMatcher: ErrorStateMatcher = {
+    isErrorState: (control) =>
+      Boolean(
+        this.error() || (control?.invalid && (control.touched || control.dirty)),
+      ),
+  };
+
+  /** Opciones del select */
+  readonly options = input.required<MfSelectOption[]>();
+  /** ID del control */
+  readonly id = input<string | undefined>(undefined);
+  /** Etiqueta flotante */
+  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 actual */
+  readonly value = input<string | number | (string | number)[] | undefined>(
+    undefined,
+  );
+  /** Selección múltiple */
+  readonly multiple = input(false);
+  /** Deshabilitado */
+  readonly disabled = 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);
+  /** Tamaño del campo */
+  readonly size = input<MfSelectSize>('md');
+  /** Ancho completo */
+  readonly fullWidth = input(false);
+  /** Icono al inicio del campo */
+  readonly leadingIcon = input<string | undefined>(undefined);
+  /** Icono al final del campo */
+  readonly trailingIcon = input<string | undefined>(undefined);
+  /**
+   * Clases extra que se añaden al panel del dropdown (overlay).
+   * La clase `mf-select-panel` siempre está presente para los estilos base.
+   */
+  readonly panelClass = input<string | string[]>('');
+
+  readonly mfSelectionChange = output<string | number | (string | number)[]>();
+
+  constructor() {
+    effect(() => {
+      this.internalValue.set(this.value());
+    });
+
+    effect(() => {
+      if (
+        !hasAccessibleName(
+          this.label(),
+          this.ariaLabel(),
+          this.ariaLabelledby(),
+        )
+      ) {
+        warnInDev(
+          'mf-select 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 describedBy = computed(() =>
+    mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()),
+  );
+  readonly resolvedAriaLabel = computed(() =>
+    this.label() ? null : this.ariaLabel() ?? null,
+  );
+  readonly isDisabled = computed(
+    () => this.disabled() || this.disabledFromForm(),
+  );
+
+  readonly hostClasses = computed(() => {
+    const classes = ['mf-select', `mf-select--${this.size()}`];
+    if (this.fullWidth()) classes.push('mf-select--full');
+    if (this.error()) classes.push('mf-select--error');
+    return classes.join(' ');
+  });
+
+  readonly panelClasses = computed(() => {
+    const base = ['mf-select-panel'];
+    const extra = this.panelClass();
+
+    if (Array.isArray(extra)) {
+      base.push(...extra.filter(Boolean));
+    } else if (extra) {
+      base.push(extra);
+    }
+
+    return base;
+  });
+
+  writeValue(value: string | number | (string | number)[] | null): void {
+    this.internalValue.set(value ?? undefined);
+    this.cdr.markForCheck();
+  }
+
+  registerOnChange(
+    fn: (value: string | number | (string | number)[] | undefined) => 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)),
+    );
+  }
+
+  onSelectionChange(event: { value: string | number | (string | number)[] }): void {
+    this.internalValue.set(event.value);
+    this.onControlChange(event.value);
+    this.onControlTouched();
+    this.mfSelectionChange.emit(event.value);
+  }
+}

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

@@ -0,0 +1,2 @@
+export { MfSidenavComponent } from './mf-sidenav.component';
+export type { MfSidenavMode, MfSidenavPosition, MfSidenavNavItem } from './mf-sidenav.component';

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

@@ -0,0 +1,168 @@
+:host {
+  display: block;
+  height: 100%;
+}
+
+/* ── Container ─────────────────────────────────────────────────── */
+.mf-sidenav-container {
+  height: 100%;
+  background-color: var(--mf-color-surface) !important;
+}
+
+/* ── Sidenav panel ─────────────────────────────────────────────── */
+.mf-sidenav {
+  background-color: var(--mf-color-surface) !important;
+  border-right: 1px solid var(--mf-color-border) !important;
+  font-family: var(--mf-font-base) !important;
+}
+
+.mf-sidenav--over,
+.mf-sidenav--push {
+  box-shadow: var(--mf-shadow-lg) !important;
+}
+
+.mf-sidenav--side {
+  box-shadow: none;
+  border-right: 1px solid var(--mf-color-border) !important;
+}
+
+/* ── Nav wrapper ───────────────────────────────────────────────── */
+.mf-sidenav__nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* ── Header ────────────────────────────────────────────────────── */
+.mf-sidenav__header {
+  display: flex;
+  align-items: center;
+  gap: var(--mf-space-2);
+  padding: var(--mf-space-5) var(--mf-space-4) var(--mf-space-4);
+  border-bottom: 1px solid var(--mf-color-border);
+  flex-shrink: 0;
+}
+
+.mf-sidenav__header-icon {
+  color: var(--mf-color-brand) !important;
+  font-size: 22px;
+  width: 22px;
+  height: 22px;
+}
+
+.mf-sidenav__header-title {
+  font-family: var(--mf-font-display) !important;
+  font-size: var(--mf-text-base);
+  font-weight: var(--mf-weight-bold);
+  color: var(--mf-color-on-surface);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Menu nav ──────────────────────────────────────────────────── */
+.mf-sidenav__menu {
+  display: flex;
+  flex-direction: column;
+  gap: var(--mf-space-1);
+  padding: var(--mf-space-3) var(--mf-space-3);
+  flex: 1;
+  overflow-y: auto;
+}
+
+/* ── Nav item ──────────────────────────────────────────────────── */
+.mf-sidenav__item {
+  display: flex;
+  align-items: center;
+  gap: var(--mf-space-3);
+  width: 100%;
+  padding: var(--mf-space-2) var(--mf-space-3);
+  border: none;
+  border-radius: var(--mf-radius-md);
+  background: transparent;
+  color: var(--mf-color-neutral-600);
+  font-family: var(--mf-font-base);
+  font-size: var(--mf-text-sm);
+  font-weight: var(--mf-weight-medium);
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color var(--mf-duration-fast) var(--mf-ease-standard),
+    color var(--mf-duration-fast) var(--mf-ease-standard);
+  position: relative;
+}
+
+.mf-sidenav__item:hover:not(.mf-sidenav__item--disabled) {
+  background-color: var(--mf-color-neutral-100);
+  color: var(--mf-color-on-surface);
+}
+
+.mf-sidenav__item:hover:not(.mf-sidenav__item--disabled) .mf-sidenav__item-icon {
+  color: var(--mf-color-brand) !important;
+}
+
+/* Active state */
+.mf-sidenav__item--active {
+  background-color: var(--mf-color-brand-light) !important;
+  color: var(--mf-color-brand) !important;
+  font-weight: var(--mf-weight-bold) !important;
+}
+
+.mf-sidenav__item--active .mf-sidenav__item-icon {
+  color: var(--mf-color-brand) !important;
+}
+
+/* Disabled state */
+.mf-sidenav__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* ── Icon ──────────────────────────────────────────────────────── */
+.mf-sidenav__item-icon {
+  font-size: 20px;
+  width: 20px;
+  height: 20px;
+  flex-shrink: 0;
+  color: var(--mf-color-neutral-400) !important;
+  transition: color var(--mf-duration-fast) var(--mf-ease-standard);
+}
+
+/* ── Label ─────────────────────────────────────────────────────── */
+.mf-sidenav__item-label {
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* ── Badge ─────────────────────────────────────────────────────── */
+.mf-sidenav__item-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 var(--mf-space-1);
+  border-radius: var(--mf-radius-full);
+  background-color: var(--mf-color-brand);
+  color: var(--mf-color-on-brand);
+  font-size: 0.625rem;
+  font-weight: var(--mf-weight-bold);
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+/* ── Main content ──────────────────────────────────────────────── */
+.mf-sidenav__main {
+  background-color: var(--mf-color-surface);
+  padding: var(--mf-space-6);
+  font-family: var(--mf-font-base);
+}
+
+/* ── Backdrop ──────────────────────────────────────────────────── */
+.mf-sidenav-container .mat-drawer-backdrop.mat-drawer-shown {
+  background-color: rgba(15, 23, 42, 0.32) !important;
+}
+