ng-comps 1.0.2 → 2.0.0

package/fesm2022/ng-comps.mjs

@@ -0,0 +1,4254 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, output, isDevMode, inject, ChangeDetectorRef, signal, effect, forwardRef, Injectable, Directive } from '@angular/core';
+import * as i1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i2 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import { NgControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import * as i1$1 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i2$1 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i4 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$2 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i1$3 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$4 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$5 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$6 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatNativeDateModule } from '@angular/material/core';
+import * as i1$7 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import * as i1$8 from '@angular/material/dialog';
+import { MatDialogRef, MatDialogModule, MatDialog } from '@angular/material/dialog';
+import * as i1$9 from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i1$a from '@angular/material/grid-list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i1$b from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$c from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$d from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1$e from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$f from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i2$2 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$g from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1$h from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i2$3 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i1$i from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i1$j from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i1$k from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1$l from '@angular/material/tooltip';
+import { MatTooltip } from '@angular/material/tooltip';
+
+/**
+ * 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.
+ */
+class MfAccordionComponent {
+    /** Paneles del accordion */
+    panels = input.required(...(ngDevMode ? [{ debugName: "panels" }] : /* istanbul ignore next */ []));
+    /** Permite múltiples paneles abiertos */
+    multi = input(false, ...(ngDevMode ? [{ debugName: "multi" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => 'mf-accordion', ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfAccordionComponent, isStandalone: true, selector: "mf-accordion", inputs: { panels: { classPropertyName: "panels", publicName: "panels", isSignal: true, isRequired: true, transformFunction: null }, multi: { classPropertyName: "multi", publicName: "multi", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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>
+  `, isInline: true, styles: [":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}\n"], dependencies: [{ kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i1.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i1.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i1.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i1.MatExpansionPanelDescription, selector: "mat-panel-description" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAccordionComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":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}\n"] }]
+        }], propDecorators: { panels: [{ type: i0.Input, args: [{ isSignal: true, alias: "panels", required: true }] }], multi: [{ type: i0.Input, args: [{ isSignal: true, alias: "multi", required: false }] }] } });
+
+/**
+ * Alerta de la librería ng-comps.
+ * Componente de banner para mensajes de sistema, alertas y notificaciones.
+ * Ideal para dashboards y paneles administrativos.
+ */
+class MfAlertComponent {
+    /** Mensaje principal */
+    message = input.required(...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Título opcional */
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Severidad de la alerta */
+    severity = input('info', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+    /** Se puede cerrar */
+    dismissible = input(false, ...(ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []));
+    mfDismiss = output();
+    iconName = computed(() => {
+        const map = {
+            info: 'info',
+            success: 'check_circle',
+            warning: 'warning',
+            error: 'error',
+        };
+        return map[this.severity()];
+    }, ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return ['mf-alert', `mf-alert--${this.severity()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfAlertComponent, isStandalone: true, selector: "mf-alert", inputs: { message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfDismiss: "mfDismiss" }, ngImport: i0, template: `
+    <div [class]="hostClasses()" role="alert">
+      <mat-icon class="mf-alert__icon" aria-hidden="true">{{ iconName() }}</mat-icon>
+      <div class="mf-alert__content">
+        @if (title()) {
+          <strong class="mf-alert__title">{{ title() }}</strong>
+        }
+        <span class="mf-alert__message">{{ message() }}</span>
+      </div>
+      @if (dismissible()) {
+        <button
+          class="mf-alert__close"
+          (click)="mfDismiss.emit()"
+          [attr.aria-label]="'Close alert'"
+        >
+          <mat-icon aria-hidden="true">close</mat-icon>
+        </button>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mf-alert{display:flex;align-items:flex-start;gap:var(--mf-space-3);padding:var(--mf-space-3) var(--mf-space-4);border-radius:var(--mf-radius-md);font-family:var(--mf-font-base);font-size:var(--mf-text-sm);line-height:var(--mf-leading-normal)}.mf-alert--info{background-color:var(--mf-color-secondary-50);border-left:4px solid var(--mf-color-secondary-500);color:var(--mf-color-secondary-900)}.mf-alert--info .mf-alert__icon{color:var(--mf-color-secondary-500)}.mf-alert--success{background-color:var(--mf-color-primary-50);border-left:4px solid var(--mf-color-primary-500);color:var(--mf-color-primary-900)}.mf-alert--success .mf-alert__icon{color:var(--mf-color-primary-500)}.mf-alert--warning{background-color:#fffbeb;border-left:4px solid var(--mf-color-accent-500);color:var(--mf-color-accent-700)}.mf-alert--warning .mf-alert__icon{color:var(--mf-color-accent-500)}.mf-alert--error{background-color:#fef2f2;border-left:4px solid var(--mf-color-error-500);color:var(--mf-color-error-700)}.mf-alert--error .mf-alert__icon{color:var(--mf-color-error-500)}.mf-alert__content{flex:1;display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-alert__title{font-weight:var(--mf-weight-bold)}.mf-alert__icon{flex-shrink:0;margin-top:1px}.mf-alert__close{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:var(--mf-space-1);border-radius:var(--mf-radius-sm);color:inherit;opacity:.6;transition:opacity var(--mf-duration-fast) var(--mf-ease-standard)}.mf-alert__close:hover{opacity:1}.mf-alert__close .mat-icon{font-size:18px;width:18px;height:18px}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAlertComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-alert', imports: [MatIconModule], template: `
+    <div [class]="hostClasses()" role="alert">
+      <mat-icon class="mf-alert__icon" aria-hidden="true">{{ iconName() }}</mat-icon>
+      <div class="mf-alert__content">
+        @if (title()) {
+          <strong class="mf-alert__title">{{ title() }}</strong>
+        }
+        <span class="mf-alert__message">{{ message() }}</span>
+      </div>
+      @if (dismissible()) {
+        <button
+          class="mf-alert__close"
+          (click)="mfDismiss.emit()"
+          [attr.aria-label]="'Close alert'"
+        >
+          <mat-icon aria-hidden="true">close</mat-icon>
+        </button>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-alert{display:flex;align-items:flex-start;gap:var(--mf-space-3);padding:var(--mf-space-3) var(--mf-space-4);border-radius:var(--mf-radius-md);font-family:var(--mf-font-base);font-size:var(--mf-text-sm);line-height:var(--mf-leading-normal)}.mf-alert--info{background-color:var(--mf-color-secondary-50);border-left:4px solid var(--mf-color-secondary-500);color:var(--mf-color-secondary-900)}.mf-alert--info .mf-alert__icon{color:var(--mf-color-secondary-500)}.mf-alert--success{background-color:var(--mf-color-primary-50);border-left:4px solid var(--mf-color-primary-500);color:var(--mf-color-primary-900)}.mf-alert--success .mf-alert__icon{color:var(--mf-color-primary-500)}.mf-alert--warning{background-color:#fffbeb;border-left:4px solid var(--mf-color-accent-500);color:var(--mf-color-accent-700)}.mf-alert--warning .mf-alert__icon{color:var(--mf-color-accent-500)}.mf-alert--error{background-color:#fef2f2;border-left:4px solid var(--mf-color-error-500);color:var(--mf-color-error-700)}.mf-alert--error .mf-alert__icon{color:var(--mf-color-error-500)}.mf-alert__content{flex:1;display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-alert__title{font-weight:var(--mf-weight-bold)}.mf-alert__icon{flex-shrink:0;margin-top:1px}.mf-alert__close{display:inline-flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;padding:var(--mf-space-1);border-radius:var(--mf-radius-sm);color:inherit;opacity:.6;transition:opacity var(--mf-duration-fast) var(--mf-ease-standard)}.mf-alert__close:hover{opacity:1}.mf-alert__close .mat-icon{font-size:18px;width:18px;height:18px}\n"] }]
+        }], propDecorators: { message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], mfDismiss: [{ type: i0.Output, args: ["mfDismiss"] }] } });
+
+let nextUniqueId = 0;
+const emittedWarnings = new Set();
+function createUniqueId(prefix) {
+    nextUniqueId += 1;
+    return `${prefix}-${nextUniqueId}`;
+}
+function mergeAriaIds(...values) {
+    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;
+}
+function hasAccessibleName(...values) {
+    return values.some((value) => Boolean(value?.trim()));
+}
+function warnInDev(message) {
+    if (!isDevMode() || emittedWarnings.has(message)) {
+        return;
+    }
+    emittedWarnings.add(message);
+    console.warn(`[ng-comps:a11y] ${message}`);
+}
+
+/**
+ * Autocompletar de la librería ng-comps.
+ * Envuelve Angular Material `mat-autocomplete` y expone una API uniforme
+ * con look and feel de marca.
+ *
+ * El panel desplegable se estiliza con la clase global `mf-autocomplete-panel`.
+ * Puedes añadir clases adicionales con `panelClass`.
+ */
+class MfAutocompleteComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-autocomplete');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: (control) => Boolean(this.error() || (control?.invalid && (control.touched || control.dirty))),
+    };
+    /** Lista completa de opciones */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Placeholder del input */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Valor actual (texto en el campo) */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Tamaño del campo */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Ancho completo */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda debajo del campo */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Icono al inicio del campo */
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    /** Icono al final del campo */
+    trailingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Ancho del panel del autocomplete.
+     * Por defecto `''`: el panel toma el mismo ancho que el campo.
+     * Acepta cualquier valor CSS válido ('300px', '80vw', etc.) para sobreescribirlo.
+     */
+    panelWidth = input('', ...(ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []));
+    /**
+     * Clases extra que se añaden al panel del autocomplete (overlay).
+     * La clase `mf-autocomplete-panel` siempre está presente.
+     */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    /** Emite el texto escrito en el campo */
+    mfInput = output();
+    /** Emite el valor de la opción seleccionada */
+    mfOptionSelected = output();
+    mfBlur = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.value());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-autocomplete requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-autocomplete', `mf-autocomplete--${this.size()}`];
+        if (this.fullWidth())
+            classes.push('mf-autocomplete--full');
+        if (this.error())
+            classes.push('mf-autocomplete--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    autocompletePanelClasses = computed(() => {
+        const base = ['mf-autocomplete-panel'];
+        const extra = this.panelClass();
+        if (Array.isArray(extra)) {
+            base.push(...extra.filter(Boolean));
+        }
+        else if (extra) {
+            base.push(extra);
+        }
+        return base.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "autocompletePanelClasses" }] : /* istanbul ignore next */ []));
+    filteredOptions = computed(() => {
+        const query = this.internalValue().toLowerCase().trim();
+        if (!query) {
+            return this.options();
+        }
+        return this.options().filter((option) => option.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    get inputValue() {
+        return this.internalValue();
+    }
+    set inputValue(value) {
+        this.internalValue.set(value);
+    }
+    writeValue(value) {
+        this.internalValue.set(value ?? '');
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onInputChange(event) {
+        const value = typeof event === 'string'
+            ? event
+            : event.target.value;
+        this.internalValue.set(value);
+        this.onControlChange(value);
+        this.mfInput.emit(value);
+    }
+    onOptionSelected(event) {
+        const label = event.option.value;
+        const match = this.options().find((option) => option.label === label);
+        if (match) {
+            this.internalValue.set(match.label);
+            this.onControlChange(match.label);
+            this.onControlTouched();
+            this.mfOptionSelected.emit(match);
+        }
+    }
+    onBlur() {
+        this.onControlTouched();
+        this.mfBlur.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfAutocompleteComponent, isStandalone: true, selector: "mf-autocomplete", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfInput: "mfInput", mfOptionSelected: "mfOptionSelected", mfBlur: "mfBlur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfAutocompleteComponent),
+                multi: true,
+            },
+        ], ngImport: i0, 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>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [matAutocomplete]="auto"
+        [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)="onInputChange($event)"
+        (blur)="onBlur()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+      <mat-autocomplete
+        #auto
+        [panelWidth]="panelWidth()"
+        [class]="autocompletePanelClasses()"
+        (optionSelected)="onOptionSelected($event)"
+      >
+        @for (option of filteredOptions(); track option.value) {
+          <mat-option [value]="option.label" [disabled]="option.disabled ?? false">
+            {{ option.label }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-autocomplete__error" [attr.id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-autocomplete{font-family:var(--mf-font-base)!important;width:100%}.mf-autocomplete--full{width:100%}.mf-autocomplete .mat-mdc-text-field-wrapper{border-radius:var(--mf-radius-md)!important}.mf-autocomplete .mdc-notched-outline__leading,.mf-autocomplete .mdc-notched-outline__notch,.mf-autocomplete .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-autocomplete .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mf-autocomplete.mat-focused .mdc-notched-outline__leading,.mf-autocomplete.mat-focused .mdc-notched-outline__notch,.mf-autocomplete.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important;border-width:1.5px!important}.mf-autocomplete--error .mdc-notched-outline__leading,.mf-autocomplete--error .mdc-notched-outline__notch,.mf-autocomplete--error .mdc-notched-outline__trailing{border-color:var(--mf-color-error-500)!important}.mf-autocomplete .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-autocomplete.mat-focused .mat-mdc-floating-label{color:var(--mf-color-brand)!important}.mf-autocomplete .mat-mdc-input-element{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;caret-color:var(--mf-color-brand)}.mf-autocomplete .mat-mdc-form-field-hint{font-size:var(--mf-text-xs)!important;color:var(--mf-color-neutral-400)!important}.mf-autocomplete .mat-mdc-form-field-error{font-size:var(--mf-text-xs)!important}.mf-autocomplete .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-autocomplete.mat-focused .mat-icon{color:var(--mf-color-brand)!important}.mf-autocomplete--sm .mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-autocomplete--md .mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-autocomplete--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}.mf-autocomplete .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i1$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i1$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i1$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAutocompleteComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-autocomplete', imports: [
+                        MatAutocompleteModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfAutocompleteComponent),
+                            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>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [matAutocomplete]="auto"
+        [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)="onInputChange($event)"
+        (blur)="onBlur()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+      <mat-autocomplete
+        #auto
+        [panelWidth]="panelWidth()"
+        [class]="autocompletePanelClasses()"
+        (optionSelected)="onOptionSelected($event)"
+      >
+        @for (option of filteredOptions(); track option.value) {
+          <mat-option [value]="option.label" [disabled]="option.disabled ?? false">
+            {{ option.label }}
+          </mat-option>
+        }
+      </mat-autocomplete>
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-autocomplete__error" [attr.id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-autocomplete{font-family:var(--mf-font-base)!important;width:100%}.mf-autocomplete--full{width:100%}.mf-autocomplete .mat-mdc-text-field-wrapper{border-radius:var(--mf-radius-md)!important}.mf-autocomplete .mdc-notched-outline__leading,.mf-autocomplete .mdc-notched-outline__notch,.mf-autocomplete .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-autocomplete .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mf-autocomplete.mat-focused .mdc-notched-outline__leading,.mf-autocomplete.mat-focused .mdc-notched-outline__notch,.mf-autocomplete.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important;border-width:1.5px!important}.mf-autocomplete--error .mdc-notched-outline__leading,.mf-autocomplete--error .mdc-notched-outline__notch,.mf-autocomplete--error .mdc-notched-outline__trailing{border-color:var(--mf-color-error-500)!important}.mf-autocomplete .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-autocomplete.mat-focused .mat-mdc-floating-label{color:var(--mf-color-brand)!important}.mf-autocomplete .mat-mdc-input-element{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;caret-color:var(--mf-color-brand)}.mf-autocomplete .mat-mdc-form-field-hint{font-size:var(--mf-text-xs)!important;color:var(--mf-color-neutral-400)!important}.mf-autocomplete .mat-mdc-form-field-error{font-size:var(--mf-text-xs)!important}.mf-autocomplete .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-autocomplete.mat-focused .mat-icon{color:var(--mf-color-brand)!important}.mf-autocomplete--sm .mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-autocomplete--md .mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-autocomplete--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}.mf-autocomplete .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], panelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelWidth", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], mfInput: [{ type: i0.Output, args: ["mfInput"] }], mfOptionSelected: [{ type: i0.Output, args: ["mfOptionSelected"] }], mfBlur: [{ type: i0.Output, args: ["mfBlur"] }] } });
+
+/**
+ * Avatar de la librería ng-comps.
+ * Muestra una imagen de perfil, iniciales o un icono.
+ * Componente puro sin dependencia de Angular Material.
+ */
+class MfAvatarComponent {
+    /** URL de la imagen */
+    src = input(undefined, ...(ngDevMode ? [{ debugName: "src" }] : /* istanbul ignore next */ []));
+    /** Texto alternativo */
+    alt = input('', ...(ngDevMode ? [{ debugName: "alt" }] : /* istanbul ignore next */ []));
+    /** Nombre completo para generar iniciales */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Si es decorativo, se oculta a tecnologías asistivas */
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    /** Tamaño */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Forma */
+    variant = input('circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.decorative() && !hasAccessibleName(this.alt(), this.name())) {
+                warnInDev('mf-avatar requiere `alt` o `name` cuando no es decorativo para exponer un nombre accesible.');
+            }
+        });
+    }
+    initials = computed(() => {
+        const n = this.name();
+        if (!n)
+            return '?';
+        const parts = n.trim().split(/\s+/);
+        if (parts.length === 1)
+            return parts[0].charAt(0).toUpperCase();
+        return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+    }, ...(ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []));
+    imageAlt = computed(() => {
+        if (this.decorative()) {
+            return '';
+        }
+        return this.alt() || this.name();
+    }, ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
+    fallbackAriaLabel = computed(() => {
+        if (this.decorative()) {
+            return null;
+        }
+        return this.alt() || this.name() || null;
+    }, ...(ngDevMode ? [{ debugName: "fallbackAriaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return [
+            'mf-avatar',
+            `mf-avatar--${this.size()}`,
+            `mf-avatar--${this.variant()}`,
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfAvatarComponent, isStandalone: true, selector: "mf-avatar", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (src()) {
+      <img
+        [src]="src()"
+        [alt]="imageAlt()"
+        [class]="hostClasses()"
+        [attr.aria-hidden]="decorative() ? 'true' : null"
+      />
+    } @else {
+      <span
+        [class]="hostClasses()"
+        [attr.aria-label]="fallbackAriaLabel()"
+        [attr.aria-hidden]="decorative() ? 'true' : null"
+      >
+        {{ initials() }}
+      </span>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;object-fit:cover;background-color:var(--mf-color-primary-100);color:var(--mf-color-primary-800);font-family:var(--mf-font-base);font-weight:var(--mf-weight-bold);-webkit-user-select:none;user-select:none}.mf-avatar--xs{width:24px;height:24px;font-size:var(--mf-text-xs)}.mf-avatar--sm{width:32px;height:32px;font-size:var(--mf-text-sm)}.mf-avatar--md{width:40px;height:40px;font-size:var(--mf-text-base)}.mf-avatar--lg{width:56px;height:56px;font-size:var(--mf-text-xl)}.mf-avatar--xl{width:80px;height:80px;font-size:var(--mf-text-3xl)}.mf-avatar--circle{border-radius:var(--mf-radius-full)}.mf-avatar--rounded{border-radius:var(--mf-radius-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfAvatarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-avatar', imports: [], template: `
+    @if (src()) {
+      <img
+        [src]="src()"
+        [alt]="imageAlt()"
+        [class]="hostClasses()"
+        [attr.aria-hidden]="decorative() ? 'true' : null"
+      />
+    } @else {
+      <span
+        [class]="hostClasses()"
+        [attr.aria-label]="fallbackAriaLabel()"
+        [attr.aria-hidden]="decorative() ? 'true' : null"
+      >
+        {{ initials() }}
+      </span>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-avatar{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;object-fit:cover;background-color:var(--mf-color-primary-100);color:var(--mf-color-primary-800);font-family:var(--mf-font-base);font-weight:var(--mf-weight-bold);-webkit-user-select:none;user-select:none}.mf-avatar--xs{width:24px;height:24px;font-size:var(--mf-text-xs)}.mf-avatar--sm{width:32px;height:32px;font-size:var(--mf-text-sm)}.mf-avatar--md{width:40px;height:40px;font-size:var(--mf-text-base)}.mf-avatar--lg{width:56px;height:56px;font-size:var(--mf-text-xl)}.mf-avatar--xl{width:80px;height:80px;font-size:var(--mf-text-3xl)}.mf-avatar--circle{border-radius:var(--mf-radius-full)}.mf-avatar--rounded{border-radius:var(--mf-radius-md)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], alt: [{ type: i0.Input, args: [{ isSignal: true, alias: "alt", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
+
+/**
+ * Badge de la librería ng-comps.
+ * Envuelve Angular Material `matBadge` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfBadgeComponent {
+    /** Contenido del badge (texto o número) */
+    content = input('', ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
+    /** Descripción accesible del badge */
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    /** Si es decorativo, se oculta a tecnologías asistivas */
+    decorative = input(false, ...(ngDevMode ? [{ debugName: "decorative" }] : /* istanbul ignore next */ []));
+    /** Color semántico */
+    color = input('brand', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Tamaño del badge */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Posición del badge */
+    position = input('above-after', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Ocultar el badge */
+    hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Superponer sobre el contenido */
+    overlap = input(true, ...(ngDevMode ? [{ debugName: "overlap" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!this.decorative() && this.content() !== '' && !this.description()) {
+                warnInDev('mf-badge debería incluir `description` cuando el badge transmite información relevante.');
+            }
+        });
+    }
+    badgeDescription = computed(() => this.decorative() ? '' : this.description() ?? '', ...(ngDevMode ? [{ debugName: "badgeDescription" }] : /* istanbul ignore next */ []));
+    matPosition = computed(() => {
+        const pos = this.position();
+        const map = {
+            'above-after': 'above after',
+            'above-before': 'above before',
+            'below-after': 'below after',
+            'below-before': 'below before',
+        };
+        return map[pos];
+    }, ...(ngDevMode ? [{ debugName: "matPosition" }] : /* istanbul ignore next */ []));
+    matSize = computed(() => {
+        const map = {
+            sm: 'small',
+            md: 'medium',
+            lg: 'large',
+        };
+        return map[this.size()];
+    }, ...(ngDevMode ? [{ debugName: "matSize" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return ['mf-badge', `mf-badge--${this.color()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MfBadgeComponent, isStandalone: true, selector: "mf-badge", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, decorative: { classPropertyName: "decorative", publicName: "decorative", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, overlap: { classPropertyName: "overlap", publicName: "overlap", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      [matBadge]="content()"
+      [matBadgeHidden]="hidden()"
+      [matBadgeDisabled]="disabled()"
+      [matBadgeOverlap]="overlap()"
+      [matBadgePosition]="matPosition()"
+      [matBadgeSize]="matSize()"
+      [matBadgeDescription]="badgeDescription()"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [class]="hostClasses()"
+    >
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [":host{display:inline-block}.mf-badge--brand .mat-badge-content{background-color:var(--mf-color-brand)!important;color:var(--mf-color-on-brand)!important}.mf-badge--accent .mat-badge-content{background-color:var(--mf-color-accent-500)!important;color:var(--mf-color-neutral-900)!important}.mf-badge--error .mat-badge-content{background-color:var(--mf-color-error-500)!important;color:var(--mf-color-neutral-0)!important}.mf-badge--neutral .mat-badge-content{background-color:var(--mf-color-neutral-400)!important;color:var(--mf-color-neutral-0)!important}.mat-badge-content{font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i1$2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfBadgeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-badge', imports: [MatBadgeModule], template: `
+    <span
+      [matBadge]="content()"
+      [matBadgeHidden]="hidden()"
+      [matBadgeDisabled]="disabled()"
+      [matBadgeOverlap]="overlap()"
+      [matBadgePosition]="matPosition()"
+      [matBadgeSize]="matSize()"
+      [matBadgeDescription]="badgeDescription()"
+      [attr.aria-hidden]="decorative() ? 'true' : null"
+      [class]="hostClasses()"
+    >
+      <ng-content />
+    </span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-badge--brand .mat-badge-content{background-color:var(--mf-color-brand)!important;color:var(--mf-color-on-brand)!important}.mf-badge--accent .mat-badge-content{background-color:var(--mf-color-accent-500)!important;color:var(--mf-color-neutral-900)!important}.mf-badge--error .mat-badge-content{background-color:var(--mf-color-error-500)!important;color:var(--mf-color-neutral-0)!important}.mf-badge--neutral .mat-badge-content{background-color:var(--mf-color-neutral-400)!important;color:var(--mf-color-neutral-0)!important}.mat-badge-content{font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], decorative: [{ type: i0.Input, args: [{ isSignal: true, alias: "decorative", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], overlap: [{ type: i0.Input, args: [{ isSignal: true, alias: "overlap", required: false }] }] } });
+
+/**
+ * Breadcrumb de la librería ng-comps.
+ * Componente de navegación jerárquica para indicar la ubicación
+ * del usuario en la aplicación.
+ */
+class MfBreadcrumbComponent {
+    /** Items del breadcrumb */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Icono separador */
+    separator = input('chevron_right', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+    /** Label de accesibilidad */
+    ariaLabel = input('Breadcrumb', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    mfItemClick = output();
+    hostClasses = computed(() => 'mf-breadcrumb', ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onItemClick(event, item) {
+        event.preventDefault();
+        this.mfItemClick.emit(item);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfBreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfBreadcrumbComponent, isStandalone: true, selector: "mf-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfItemClick: "mfItemClick" }, ngImport: i0, 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>
+  `, isInline: true, styles: [":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}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfBreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":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}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], mfItemClick: [{ type: i0.Output, args: ["mfItemClick"] }] } });
+
+/**
+ * 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.
+ */
+class MfButtonComponent {
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    trailingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    iconOnly = input(false, ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    mfClick = output();
+    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`.');
+            }
+        });
+    }
+    rendersAsIconButton = computed(() => this.iconOnly() || (!this.label()?.trim() && Boolean(this.iconName())), ...(ngDevMode ? [{ debugName: "rendersAsIconButton" }] : /* istanbul ignore next */ []));
+    iconName = computed(() => this.leadingIcon() ?? this.trailingIcon() ?? 'help', ...(ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    iconButtonAriaLabel = computed(() => this.ariaLabel() ?? this.label() ?? null, ...(ngDevMode ? [{ debugName: "iconButtonAriaLabel" }] : /* istanbul ignore next */ []));
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfButtonComponent, isStandalone: true, selector: "mf-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfClick: "mfClick" }, ngImport: i0, 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>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}:host([fullWidth]),:host-context(.mf-btn--full){display:block}.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:.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}.mf-btn--icon.mat-mdc-icon-button{display:inline-flex!important;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.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)}.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)}.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}.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}.mf-btn[disabled],.mf-btn.mdc-button:disabled{opacity:.42;cursor:default;pointer-events:none}.mf-btn .mat-icon{font-size:1.1em;height:1.1em;width:1.1em;vertical-align:middle;line-height:1}.mf-btn--icon .mat-icon{display:flex;align-items:center;justify-content:center;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfButtonComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}:host([fullWidth]),:host-context(.mf-btn--full){display:block}.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:.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}.mf-btn--icon.mat-mdc-icon-button{display:inline-flex!important;align-items:center;justify-content:center;line-height:1;vertical-align:middle}.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)}.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)}.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}.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}.mf-btn[disabled],.mf-btn.mdc-button:disabled{opacity:.42;cursor:default;pointer-events:none}.mf-btn .mat-icon{font-size:1.1em;height:1.1em;width:1.1em;vertical-align:middle;line-height:1}.mf-btn--icon .mat-icon{display:flex;align-items:center;justify-content:center;margin:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], mfClick: [{ type: i0.Output, args: ["mfClick"] }] } });
+
+/**
+ * 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.
+ */
+class MfCardComponent {
+    /** Título de la card */
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Subtítulo de la card */
+    subtitle = input(undefined, ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('elevated', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Padding interno */
+    padding = input('md', ...(ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []));
+    /** Interactiva (hover effect) */
+    interactive = input(false, ...(ngDevMode ? [{ debugName: "interactive" }] : /* istanbul ignore next */ []));
+    hasHeader = computed(() => !!this.title() || !!this.subtitle(), ...(ngDevMode ? [{ debugName: "hasHeader" }] : /* istanbul ignore next */ []));
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfCardComponent, isStandalone: true, selector: "mf-card", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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>
+  `, isInline: true, styles: [":host{display:block}.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)}.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}.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)}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$4.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$4.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$4.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$4.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$4.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfCardComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.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)}.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}.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)}.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}.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}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }] } });
+
+/**
+ * Checkbox de la librería ng-comps.
+ * Envuelve Angular Material `mat-checkbox` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfCheckboxComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-checkbox');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal(false, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Texto del checkbox */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Estado marcado */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Estado indeterminado */
+    indeterminate = input(false, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.checked());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-checkbox requiere texto visible, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-checkbox'];
+        if (this.isDisabled())
+            classes.push('mf-checkbox--disabled');
+        if (this.error())
+            classes.push('mf-checkbox--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(Boolean(value));
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onCheckboxChange(event) {
+        this.internalValue.set(event.checked);
+        this.onControlChange(event.checked);
+        this.onControlTouched();
+        this.mfChange.emit(event.checked);
+    }
+    onBlur() {
+        this.onControlTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfCheckboxComponent, isStandalone: true, selector: "mf-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfChange: "mfChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfCheckboxComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div [class]="hostClasses()">
+      <mat-checkbox
+        [id]="controlId()"
+        [checked]="internalValue()"
+        [disabled]="isDisabled()"
+        [indeterminate]="indeterminate()"
+        [required]="required()"
+        [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"
+        (change)="onCheckboxChange($event)"
+        (blur)="onBlur()"
+      >
+        {{ label() }}
+      </mat-checkbox>
+
+      @if (hint()) {
+        <p class="mf-checkbox__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-checkbox__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mf-checkbox{font-family:var(--mf-font-base)!important;display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-checkbox .mdc-label,.mf-checkbox .mat-mdc-checkbox-label{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;cursor:pointer}.mf-checkbox .mdc-checkbox__background{border-color:var(--mf-color-neutral-300)!important;border-radius:var(--mf-radius-sm)!important;border-width:1.5px!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard),background-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-checkbox .mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mf-checkbox .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--mf-color-brand)!important;border-color:var(--mf-color-brand)!important}.mf-checkbox:hover .mdc-checkbox__background{border-color:var(--mf-color-brand)!important}.mf-checkbox .mat-mdc-checkbox-ripple,.mf-checkbox .mdc-checkbox__ripple{display:none!important}.mf-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__background{box-shadow:0 0 0 3px var(--mf-color-primary-100)}.mf-checkbox--disabled{opacity:.42;pointer-events:none}.mf-checkbox__hint,.mf-checkbox__error{margin:0;padding-left:calc(18px + var(--mf-space-3));font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-checkbox__hint{color:var(--mf-color-neutral-600)}.mf-checkbox__error{color:var(--mf-color-error-500)}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$5.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-checkbox', imports: [MatCheckboxModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfCheckboxComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div [class]="hostClasses()">
+      <mat-checkbox
+        [id]="controlId()"
+        [checked]="internalValue()"
+        [disabled]="isDisabled()"
+        [indeterminate]="indeterminate()"
+        [required]="required()"
+        [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"
+        (change)="onCheckboxChange($event)"
+        (blur)="onBlur()"
+      >
+        {{ label() }}
+      </mat-checkbox>
+
+      @if (hint()) {
+        <p class="mf-checkbox__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-checkbox__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-checkbox{font-family:var(--mf-font-base)!important;display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-checkbox .mdc-label,.mf-checkbox .mat-mdc-checkbox-label{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;cursor:pointer}.mf-checkbox .mdc-checkbox__background{border-color:var(--mf-color-neutral-300)!important;border-radius:var(--mf-radius-sm)!important;border-width:1.5px!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard),background-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-checkbox .mdc-checkbox__native-control:checked~.mdc-checkbox__background,.mf-checkbox .mdc-checkbox__native-control:indeterminate~.mdc-checkbox__background{background-color:var(--mf-color-brand)!important;border-color:var(--mf-color-brand)!important}.mf-checkbox:hover .mdc-checkbox__background{border-color:var(--mf-color-brand)!important}.mf-checkbox .mat-mdc-checkbox-ripple,.mf-checkbox .mdc-checkbox__ripple{display:none!important}.mf-checkbox .mdc-checkbox__native-control:focus~.mdc-checkbox__background{box-shadow:0 0 0 3px var(--mf-color-primary-100)}.mf-checkbox--disabled{opacity:.42;pointer-events:none}.mf-checkbox__hint,.mf-checkbox__error{margin:0;padding-left:calc(18px + var(--mf-space-3));font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-checkbox__hint{color:var(--mf-color-neutral-600)}.mf-checkbox__error{color:var(--mf-color-error-500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], mfChange: [{ type: i0.Output, args: ["mfChange"] }] } });
+
+/**
+ * Chip de la librería ng-comps.
+ * Envuelve Angular Material `mat-chip` y expone una API uniforme
+ * con look and feel de marca. Ideal para tags, filtros y etiquetas.
+ */
+class MfChipComponent {
+    /** Texto del chip */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('filled', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Color semántico */
+    color = input('brand', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Seleccionado */
+    selected = input(false, ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Puede ser removido */
+    removable = input(false, ...(ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Icono inicial */
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    mfRemoved = output();
+    hostClasses = computed(() => {
+        const classes = ['mf-chip', `mf-chip--${this.variant()}`, `mf-chip--${this.color()}`];
+        if (this.selected())
+            classes.push('mf-chip--selected');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfChipComponent, isStandalone: true, selector: "mf-chip", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfRemoved: "mfRemoved" }, ngImport: i0, template: `
+    @if (removable()) {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (removed)="mfRemoved.emit()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+        <button matChipRemove [attr.aria-label]="'Remove ' + label()">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip>
+    } @else {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+      </mat-chip>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-chip.mat-mdc-chip{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important;border-radius:var(--mf-radius-full)!important;transition:background-color var(--mf-duration-base) var(--mf-ease-standard),box-shadow var(--mf-duration-base) var(--mf-ease-standard)}.mf-chip--filled.mf-chip--brand.mat-mdc-chip{background-color:var(--mf-color-primary-100)!important;color:var(--mf-color-primary-800)!important}.mf-chip--filled.mf-chip--accent.mat-mdc-chip{background-color:var(--mf-color-accent-300)!important;color:var(--mf-color-accent-700)!important}.mf-chip--filled.mf-chip--error.mat-mdc-chip{background-color:#fee2e2!important;color:var(--mf-color-error-700)!important}.mf-chip--filled.mf-chip--neutral.mat-mdc-chip{background-color:var(--mf-color-neutral-100)!important;color:var(--mf-color-neutral-600)!important}.mf-chip--outlined.mat-mdc-chip{background-color:transparent!important;border:1px solid var(--mf-color-border)!important}.mf-chip--outlined.mf-chip--brand.mat-mdc-chip{color:var(--mf-color-primary-700)!important;border-color:var(--mf-color-primary-200)!important}.mf-chip--outlined.mf-chip--accent.mat-mdc-chip{color:var(--mf-color-accent-700)!important;border-color:var(--mf-color-accent-300)!important}.mf-chip--outlined.mf-chip--error.mat-mdc-chip{color:var(--mf-color-error-700)!important;border-color:var(--mf-color-error-500)!important}.mf-chip--selected.mat-mdc-chip{box-shadow:var(--mf-shadow-sm)}.mf-chip.mat-mdc-chip.mat-mdc-chip-disabled{opacity:.42}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: i1$6.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i1$6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfChipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-chip', imports: [MatChipsModule, MatIconModule], template: `
+    @if (removable()) {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (removed)="mfRemoved.emit()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+        <button matChipRemove [attr.aria-label]="'Remove ' + label()">
+          <mat-icon>cancel</mat-icon>
+        </button>
+      </mat-chip>
+    } @else {
+      <mat-chip
+        [highlighted]="selected()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+      >
+        @if (leadingIcon()) {
+          <mat-icon matChipAvatar aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        {{ label() }}
+      </mat-chip>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-chip.mat-mdc-chip{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important;border-radius:var(--mf-radius-full)!important;transition:background-color var(--mf-duration-base) var(--mf-ease-standard),box-shadow var(--mf-duration-base) var(--mf-ease-standard)}.mf-chip--filled.mf-chip--brand.mat-mdc-chip{background-color:var(--mf-color-primary-100)!important;color:var(--mf-color-primary-800)!important}.mf-chip--filled.mf-chip--accent.mat-mdc-chip{background-color:var(--mf-color-accent-300)!important;color:var(--mf-color-accent-700)!important}.mf-chip--filled.mf-chip--error.mat-mdc-chip{background-color:#fee2e2!important;color:var(--mf-color-error-700)!important}.mf-chip--filled.mf-chip--neutral.mat-mdc-chip{background-color:var(--mf-color-neutral-100)!important;color:var(--mf-color-neutral-600)!important}.mf-chip--outlined.mat-mdc-chip{background-color:transparent!important;border:1px solid var(--mf-color-border)!important}.mf-chip--outlined.mf-chip--brand.mat-mdc-chip{color:var(--mf-color-primary-700)!important;border-color:var(--mf-color-primary-200)!important}.mf-chip--outlined.mf-chip--accent.mat-mdc-chip{color:var(--mf-color-accent-700)!important;border-color:var(--mf-color-accent-300)!important}.mf-chip--outlined.mf-chip--error.mat-mdc-chip{color:var(--mf-color-error-700)!important;border-color:var(--mf-color-error-500)!important}.mf-chip--selected.mat-mdc-chip{box-shadow:var(--mf-shadow-sm)}.mf-chip.mat-mdc-chip.mat-mdc-chip-disabled{opacity:.42}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], removable: [{ type: i0.Input, args: [{ isSignal: true, alias: "removable", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], mfRemoved: [{ type: i0.Output, args: ["mfRemoved"] }] } });
+
+/**
+ * Selector de fecha de la librería ng-comps.
+ * Envuelve Angular Material `mat-datepicker` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfDatepickerComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-datepicker');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal(null, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: (control) => Boolean(this.error() || (control?.invalid && (control.touched || control.dirty))),
+    };
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Placeholder del input */
+    placeholder = input('DD/MM/YYYY', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Tamaño del campo */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Valor inicial del datepicker */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda debajo del campo */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Fecha mínima seleccionable */
+    min = input(null, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Fecha máxima seleccionable */
+    max = input(null, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Ancho completo */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible del botón para abrir el calendario */
+    toggleAriaLabel = input('Open calendar', ...(ngDevMode ? [{ debugName: "toggleAriaLabel" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    mfBlur = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.value());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-datepicker requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-datepicker', `mf-datepicker--${this.size()}`];
+        if (this.fullWidth())
+            classes.push('mf-datepicker--full');
+        if (this.error())
+            classes.push('mf-datepicker--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(value);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onDateChange(event) {
+        this.internalValue.set(event.value);
+        this.onControlChange(event.value);
+        this.onControlTouched();
+        this.mfChange.emit(event.value);
+    }
+    onBlur() {
+        this.onControlTouched();
+        this.mfBlur.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfDatepickerComponent, isStandalone: true, selector: "mf-datepicker", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, toggleAriaLabel: { classPropertyName: "toggleAriaLabel", publicName: "toggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfChange: "mfChange", mfBlur: "mfBlur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfDatepickerComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [matDatepicker]="picker"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [min]="min()"
+        [max]="max()"
+        [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"
+        (dateChange)="onDateChange($event)"
+        (blur)="onBlur()"
+      />
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="toggleAriaLabel()"
+      >
+        <mat-icon matDatepickerToggleIcon aria-hidden="true">
+          calendar_month
+        </mat-icon>
+      </mat-datepicker-toggle>
+      <mat-datepicker #picker />
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-datepicker__error" [attr.id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-datepicker{font-family:var(--mf-font-base)!important;width:100%}.mf-datepicker--full{width:100%}.mf-datepicker .mat-mdc-text-field-wrapper{border-radius:var(--mf-radius-md)!important}.mf-datepicker .mdc-notched-outline__leading,.mf-datepicker .mdc-notched-outline__notch,.mf-datepicker .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-datepicker .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mf-datepicker.mat-focused .mdc-notched-outline__leading,.mf-datepicker.mat-focused .mdc-notched-outline__notch,.mf-datepicker.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important;border-width:1.5px!important}.mf-datepicker--error .mdc-notched-outline__leading,.mf-datepicker--error .mdc-notched-outline__notch,.mf-datepicker--error .mdc-notched-outline__trailing{border-color:var(--mf-color-error-500)!important}.mf-datepicker .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-datepicker.mat-focused .mat-mdc-floating-label{color:var(--mf-color-brand)!important}.mf-datepicker .mat-mdc-input-element{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;caret-color:var(--mf-color-brand)}.mf-datepicker .mat-datepicker-toggle .mat-icon{color:var(--mf-color-neutral-400)!important;transition:color var(--mf-duration-base) var(--mf-ease-standard)}.mf-datepicker.mat-focused .mat-datepicker-toggle .mat-icon{color:var(--mf-color-brand)!important}.mf-datepicker .mat-mdc-form-field-hint{font-size:var(--mf-text-xs)!important;color:var(--mf-color-neutral-400)!important}.mf-datepicker .mat-mdc-form-field-error{font-size:var(--mf-text-xs)!important}.mf-datepicker--sm .mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-datepicker--md .mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-datepicker--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}.mf-datepicker .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i1$7.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$7.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$7.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$7.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDatepickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-datepicker', imports: [
+                        MatDatepickerModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        MatNativeDateModule,
+                        MatIconModule,
+                    ], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfDatepickerComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [matDatepicker]="picker"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [min]="min()"
+        [max]="max()"
+        [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"
+        (dateChange)="onDateChange($event)"
+        (blur)="onBlur()"
+      />
+      <mat-datepicker-toggle
+        matIconSuffix
+        [for]="picker"
+        [disabled]="isDisabled()"
+        [attr.aria-label]="toggleAriaLabel()"
+      >
+        <mat-icon matDatepickerToggleIcon aria-hidden="true">
+          calendar_month
+        </mat-icon>
+      </mat-datepicker-toggle>
+      <mat-datepicker #picker />
+      @if (hint()) {
+        <mat-hint [attr.id]="hintId()">{{ hint() }}</mat-hint>
+      }
+    </mat-form-field>
+    @if (error()) {
+      <p class="mf-datepicker__error" [attr.id]="errorId()" role="alert">
+        {{ error() }}
+      </p>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-datepicker{font-family:var(--mf-font-base)!important;width:100%}.mf-datepicker--full{width:100%}.mf-datepicker .mat-mdc-text-field-wrapper{border-radius:var(--mf-radius-md)!important}.mf-datepicker .mdc-notched-outline__leading,.mf-datepicker .mdc-notched-outline__notch,.mf-datepicker .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-datepicker .mat-mdc-form-field-focus-overlay{background-color:transparent!important}.mf-datepicker.mat-focused .mdc-notched-outline__leading,.mf-datepicker.mat-focused .mdc-notched-outline__notch,.mf-datepicker.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important;border-width:1.5px!important}.mf-datepicker--error .mdc-notched-outline__leading,.mf-datepicker--error .mdc-notched-outline__notch,.mf-datepicker--error .mdc-notched-outline__trailing{border-color:var(--mf-color-error-500)!important}.mf-datepicker .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-datepicker.mat-focused .mat-mdc-floating-label{color:var(--mf-color-brand)!important}.mf-datepicker .mat-mdc-input-element{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;caret-color:var(--mf-color-brand)}.mf-datepicker .mat-datepicker-toggle .mat-icon{color:var(--mf-color-neutral-400)!important;transition:color var(--mf-duration-base) var(--mf-ease-standard)}.mf-datepicker.mat-focused .mat-datepicker-toggle .mat-icon{color:var(--mf-color-brand)!important}.mf-datepicker .mat-mdc-form-field-hint{font-size:var(--mf-text-xs)!important;color:var(--mf-color-neutral-400)!important}.mf-datepicker .mat-mdc-form-field-error{font-size:var(--mf-text-xs)!important}.mf-datepicker--sm .mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-datepicker--md .mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-datepicker--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}.mf-datepicker .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], toggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleAriaLabel", required: false }] }], mfChange: [{ type: i0.Output, args: ["mfChange"] }], mfBlur: [{ type: i0.Output, args: ["mfBlur"] }] } });
+
+/**
+ * Contenido de diálogo de la librería ng-comps.
+ * Envuelve las directivas de Angular Material `mat-dialog-*` y expone
+ * una API uniforme con look and feel de marca.
+ *
+ * Uso:
+ * ```
+ * dialog.open(MfDialogComponent, {
+ *   data: { title: 'Confirmar', message: '¿Deseas continuar?' }
+ * });
+ * ```
+ */
+class MfDialogComponent {
+    dialogRef = inject((MatDialogRef), {
+        optional: true,
+    });
+    generatedId = createUniqueId('mf-dialog');
+    /** ID base del diálogo */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Título del diálogo */
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe título visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el diálogo */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Mensaje descriptivo */
+    message = input(undefined, ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+    /** Mostrar botón de cerrar */
+    showClose = input(true, ...(ngDevMode ? [{ debugName: "showClose" }] : /* istanbul ignore next */ []));
+    /** Mostrar área de acciones (footer) */
+    showActions = input(true, ...(ngDevMode ? [{ debugName: "showActions" }] : /* istanbul ignore next */ []));
+    /** Rol del diálogo */
+    role = input('dialog', ...(ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible del botón de cierre */
+    closeButtonLabel = input('Close dialog', ...(ngDevMode ? [{ debugName: "closeButtonLabel" }] : /* istanbul ignore next */ []));
+    mfClose = output();
+    constructor() {
+        effect(() => {
+            if (!hasAccessibleName(this.title(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-dialog requiere `title`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    dialogId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "dialogId" }] : /* istanbul ignore next */ []));
+    titleId = computed(() => `${this.dialogId()}-title`, ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+    descriptionId = computed(() => `${this.dialogId()}-description`, ...(ngDevMode ? [{ debugName: "descriptionId" }] : /* istanbul ignore next */ []));
+    computedLabelledby = computed(() => mergeAriaIds(this.ariaLabelledby(), this.title() ? this.titleId() : null), ...(ngDevMode ? [{ debugName: "computedLabelledby" }] : /* istanbul ignore next */ []));
+    computedDescribedby = computed(() => mergeAriaIds(this.ariaDescribedby(), this.message() ? this.descriptionId() : null), ...(ngDevMode ? [{ debugName: "computedDescribedby" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.title() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => 'mf-dialog', ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onClose() {
+        this.mfClose.emit();
+        this.dialogRef?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfDialogComponent, isStandalone: true, selector: "mf-dialog", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, closeButtonLabel: { classPropertyName: "closeButtonLabel", publicName: "closeButtonLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfClose: "mfClose" }, ngImport: i0, template: `
+    <div
+      [class]="hostClasses()"
+      [attr.role]="role()"
+      aria-modal="true"
+      [attr.aria-label]="resolvedAriaLabel()"
+      [attr.aria-labelledby]="computedLabelledby()"
+      [attr.aria-describedby]="computedDescribedby()"
+    >
+      @if (title()) {
+        <h2 mat-dialog-title class="mf-dialog__header" [id]="titleId()">
+          <span class="mf-dialog__title">{{ title() }}</span>
+          @if (showClose()) {
+            <button
+              mat-icon-button
+              class="mf-dialog__close"
+              (click)="onClose()"
+              [attr.aria-label]="closeButtonLabel()"
+              type="button"
+            >
+              <mat-icon aria-hidden="true">close</mat-icon>
+            </button>
+          }
+        </h2>
+      } @else if (showClose()) {
+        <div class="mf-dialog__header mf-dialog__header--compact">
+          <span></span>
+          <button
+            mat-icon-button
+            class="mf-dialog__close"
+            (click)="onClose()"
+            [attr.aria-label]="closeButtonLabel()"
+            type="button"
+          >
+            <mat-icon aria-hidden="true">close</mat-icon>
+          </button>
+        </div>
+      }
+
+      <div mat-dialog-content class="mf-dialog__content">
+        @if (message()) {
+          <p class="mf-dialog__message" [id]="descriptionId()">{{ message() }}</p>
+        }
+
+        <ng-content />
+      </div>
+
+      @if (showActions()) {
+        <div mat-dialog-actions class="mf-dialog__actions">
+          <ng-content select="[mfDialogActions]" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [".mf-dialog{font-family:var(--mf-font-base);min-width:360px;max-width:560px}.mf-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mf-space-3);padding:var(--mf-space-6) var(--mf-space-6) var(--mf-space-3)}.mf-dialog__header--compact{padding-bottom:0}.mf-dialog__title{font-family:var(--mf-font-display);font-size:var(--mf-text-xl);font-weight:var(--mf-weight-bold);color:var(--mf-color-on-surface);margin:0;line-height:var(--mf-leading-tight)}.mf-dialog__close{flex-shrink:0;color:var(--mf-color-neutral-400);transition:background-color var(--mf-duration-fast) var(--mf-ease-standard),color var(--mf-duration-fast) var(--mf-ease-standard)}.mf-dialog__close:hover{background-color:var(--mf-color-neutral-100);color:var(--mf-color-on-surface)}.mf-dialog__close .mat-icon{font-size:20px;width:20px;height:20px}.mf-dialog__body{padding:0 var(--mf-space-6)}.mf-dialog__message{font-size:var(--mf-text-sm);color:var(--mf-color-neutral-600);line-height:var(--mf-leading-normal);margin:0}.mf-dialog__content{padding:var(--mf-space-3) var(--mf-space-6)}.mf-dialog__content:empty{display:none}\n"], dependencies: [{ kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$8.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$8.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$8.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-dialog', imports: [MatDialogModule, MatIconModule], template: `
+    <div
+      [class]="hostClasses()"
+      [attr.role]="role()"
+      aria-modal="true"
+      [attr.aria-label]="resolvedAriaLabel()"
+      [attr.aria-labelledby]="computedLabelledby()"
+      [attr.aria-describedby]="computedDescribedby()"
+    >
+      @if (title()) {
+        <h2 mat-dialog-title class="mf-dialog__header" [id]="titleId()">
+          <span class="mf-dialog__title">{{ title() }}</span>
+          @if (showClose()) {
+            <button
+              mat-icon-button
+              class="mf-dialog__close"
+              (click)="onClose()"
+              [attr.aria-label]="closeButtonLabel()"
+              type="button"
+            >
+              <mat-icon aria-hidden="true">close</mat-icon>
+            </button>
+          }
+        </h2>
+      } @else if (showClose()) {
+        <div class="mf-dialog__header mf-dialog__header--compact">
+          <span></span>
+          <button
+            mat-icon-button
+            class="mf-dialog__close"
+            (click)="onClose()"
+            [attr.aria-label]="closeButtonLabel()"
+            type="button"
+          >
+            <mat-icon aria-hidden="true">close</mat-icon>
+          </button>
+        </div>
+      }
+
+      <div mat-dialog-content class="mf-dialog__content">
+        @if (message()) {
+          <p class="mf-dialog__message" [id]="descriptionId()">{{ message() }}</p>
+        }
+
+        <ng-content />
+      </div>
+
+      @if (showActions()) {
+        <div mat-dialog-actions class="mf-dialog__actions">
+          <ng-content select="[mfDialogActions]" />
+        </div>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [".mf-dialog{font-family:var(--mf-font-base);min-width:360px;max-width:560px}.mf-dialog__header{display:flex;align-items:center;justify-content:space-between;gap:var(--mf-space-3);padding:var(--mf-space-6) var(--mf-space-6) var(--mf-space-3)}.mf-dialog__header--compact{padding-bottom:0}.mf-dialog__title{font-family:var(--mf-font-display);font-size:var(--mf-text-xl);font-weight:var(--mf-weight-bold);color:var(--mf-color-on-surface);margin:0;line-height:var(--mf-leading-tight)}.mf-dialog__close{flex-shrink:0;color:var(--mf-color-neutral-400);transition:background-color var(--mf-duration-fast) var(--mf-ease-standard),color var(--mf-duration-fast) var(--mf-ease-standard)}.mf-dialog__close:hover{background-color:var(--mf-color-neutral-100);color:var(--mf-color-on-surface)}.mf-dialog__close .mat-icon{font-size:20px;width:20px;height:20px}.mf-dialog__body{padding:0 var(--mf-space-6)}.mf-dialog__message{font-size:var(--mf-text-sm);color:var(--mf-color-neutral-600);line-height:var(--mf-leading-normal);margin:0}.mf-dialog__content{padding:var(--mf-space-3) var(--mf-space-6)}.mf-dialog__content:empty{display:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], showActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "showActions", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], closeButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeButtonLabel", required: false }] }], mfClose: [{ type: i0.Output, args: ["mfClose"] }] } });
+
+class MfDialogService {
+    dialog = inject(MatDialog);
+    open(component, config = {}) {
+        const panelClass = Array.isArray(config.panelClass)
+            ? ['mf-dialog-panel', ...config.panelClass]
+            : ['mf-dialog-panel', ...(config.panelClass ? [config.panelClass] : [])];
+        return this.dialog.open(component, {
+            ...config,
+            role: config.role ?? 'dialog',
+            autoFocus: config.autoFocus ?? 'first-tabbable',
+            restoreFocus: config.restoreFocus ?? true,
+            ariaLabel: config.ariaLabel,
+            ariaLabelledBy: config.ariaLabelledby,
+            ariaDescribedBy: config.ariaDescribedby,
+            panelClass,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDialogService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Divider de la librería ng-comps.
+ * Envuelve Angular Material `mat-divider` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfDividerComponent {
+    /** Orientación vertical */
+    vertical = input(false, ...(ngDevMode ? [{ debugName: "vertical" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('full', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Espaciado extra arriba y abajo */
+    spacing = input('none', ...(ngDevMode ? [{ debugName: "spacing" }] : /* istanbul ignore next */ []));
+    insetValue = computed(() => this.variant() === 'inset', ...(ngDevMode ? [{ debugName: "insetValue" }] : /* istanbul ignore next */ []));
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MfDividerComponent, isStandalone: true, selector: "mf-divider", inputs: { vertical: { classPropertyName: "vertical", publicName: "vertical", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <mat-divider
+      [vertical]="vertical()"
+      [inset]="insetValue()"
+      [class]="hostClasses()"
+    />
+  `, isInline: true, styles: [":host{display:block}:host:has(.mf-divider--vertical){display:inline-block;height:100%}.mf-divider .mat-divider{border-top-color:var(--mf-color-border)!important}.mf-divider--vertical .mat-divider{border-left-color:var(--mf-color-border)!important}.mf-divider--middle .mat-divider{margin-left:var(--mf-space-4)!important;margin-right:var(--mf-space-4)!important}.mf-divider--spacing-sm{padding-top:var(--mf-space-2);padding-bottom:var(--mf-space-2)}.mf-divider--spacing-md{padding-top:var(--mf-space-4);padding-bottom:var(--mf-space-4)}.mf-divider--spacing-lg{padding-top:var(--mf-space-6);padding-bottom:var(--mf-space-6)}\n"], dependencies: [{ kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i1$9.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfDividerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-divider', imports: [MatDividerModule], template: `
+    <mat-divider
+      [vertical]="vertical()"
+      [inset]="insetValue()"
+      [class]="hostClasses()"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}:host:has(.mf-divider--vertical){display:inline-block;height:100%}.mf-divider .mat-divider{border-top-color:var(--mf-color-border)!important}.mf-divider--vertical .mat-divider{border-left-color:var(--mf-color-border)!important}.mf-divider--middle .mat-divider{margin-left:var(--mf-space-4)!important;margin-right:var(--mf-space-4)!important}.mf-divider--spacing-sm{padding-top:var(--mf-space-2);padding-bottom:var(--mf-space-2)}.mf-divider--spacing-md{padding-top:var(--mf-space-4);padding-bottom:var(--mf-space-4)}.mf-divider--spacing-lg{padding-top:var(--mf-space-6);padding-bottom:var(--mf-space-6)}\n"] }]
+        }], propDecorators: { vertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "vertical", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class MfFormFieldComponent {
+    /** Etiqueta del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** ID para asociar el label con el control */
+    fieldId = input(undefined, ...(ngDevMode ? [{ debugName: "fieldId" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Campo requerido (muestra asterisco) */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (this.label() && !this.fieldId()) {
+                warnInDev('mf-form-field requiere `fieldId` cuando renderiza `label` para poder asociarlo al control proyectado.');
+            }
+        });
+    }
+    labelClasses = computed(() => {
+        const classes = ['mf-form-field__label'];
+        if (this.error())
+            classes.push('mf-form-field__label--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "labelClasses" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-form-field'];
+        if (this.error())
+            classes.push('mf-form-field--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfFormFieldComponent, isStandalone: true, selector: "mf-form-field", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldId: { classPropertyName: "fieldId", publicName: "fieldId", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, 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>
+    }
+  `, isInline: true, styles: [":host{display:block}.mf-form-field{display:flex;flex-direction:column;gap:var(--mf-space-1)}.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,.mf-form-field__required{color:var(--mf-color-error-500)}.mf-form-field__control{width:100%}.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)}.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)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfFormFieldComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class]': 'hostClasses()',
+                    }, styles: [":host{display:block}.mf-form-field{display:flex;flex-direction:column;gap:var(--mf-space-1)}.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,.mf-form-field__required{color:var(--mf-color-error-500)}.mf-form-field__control{width:100%}.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)}.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)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldId: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldId", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }] } });
+
+/**
+ * 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.
+ */
+class MfGridListComponent {
+    /** Número de columnas */
+    cols = input(2, ...(ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []));
+    /** Altura de cada fila */
+    rowHeight = input('1:1', ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+    /** Espacio entre tiles */
+    gutterSize = input('8px', ...(ngDevMode ? [{ debugName: "gutterSize" }] : /* istanbul ignore next */ []));
+    /** Tiles a renderizar */
+    tiles = input([], ...(ngDevMode ? [{ debugName: "tiles" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfGridListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfGridListComponent, isStandalone: true, selector: "mf-grid-list", inputs: { cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null }, gutterSize: { classPropertyName: "gutterSize", publicName: "gutterSize", isSignal: true, isRequired: false, transformFunction: null }, tiles: { classPropertyName: "tiles", publicName: "tiles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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>
+  `, isInline: true, styles: [":host{display:block}.mf-grid-list{font-family:var(--mf-font-base)!important}.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)}.mf-grid-list__tile mat-grid-tile-header,.mf-grid-list__tile .mat-grid-tile-header{background:linear-gradient(to top,#0f172aa3,#0f172a00)!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}\n"], dependencies: [{ kind: "ngmodule", type: MatGridListModule }, { kind: "component", type: i1$a.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i1$a.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i1$a.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i1$a.MatGridTileHeaderCssMatStyler, selector: "mat-grid-tile-header" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfGridListComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-grid-list{font-family:var(--mf-font-base)!important}.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)}.mf-grid-list__tile mat-grid-tile-header,.mf-grid-list__tile .mat-grid-tile-header{background:linear-gradient(to top,#0f172aa3,#0f172a00)!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}\n"] }]
+        }], propDecorators: { cols: [{ type: i0.Input, args: [{ isSignal: true, alias: "cols", required: false }] }], rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], gutterSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "gutterSize", required: false }] }], tiles: [{ type: i0.Input, args: [{ isSignal: true, alias: "tiles", required: false }] }] } });
+
+/**
+ * Icono de la librería ng-comps.
+ * Envuelve Angular Material `mat-icon` y expone una API uniforme
+ * con tamaños y colores de marca.
+ */
+class MfIconComponent {
+    /** Nombre del icono de Material Symbols / Material Icons */
+    name = input.required(...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    /** Tamaño visual del icono */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Color semántico del icono */
+    color = input('default', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible. Si se omite, el icono será decorativo (aria-hidden) */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    ariaHidden = computed(() => (this.label() ? 'false' : 'true'), ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return ['mf-icon', `mf-icon--${this.size()}`, `mf-icon--${this.color()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MfIconComponent, isStandalone: true, selector: "mf-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <mat-icon [class]="hostClasses()" [attr.aria-hidden]="ariaHidden()" [attr.aria-label]="label()">{{ name() }}</mat-icon>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.mf-icon{transition:color var(--mf-duration-base) var(--mf-ease-standard)}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-icon', imports: [MatIconModule], template: `
+    <mat-icon [class]="hostClasses()" [attr.aria-hidden]="ariaHidden()" [attr.aria-label]="label()">{{ name() }}</mat-icon>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.mf-icon{transition:color var(--mf-duration-base) var(--mf-ease-standard)}.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}.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}\n"] }]
+        }], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Campo de texto de la librería ng-comps.
+ * Envuelve Angular Material `mat-form-field` + `matInput`
+ * y expone una API uniforme con look and feel de marca.
+ */
+class MfInputComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-input');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: (control) => Boolean(this.error() || (control?.invalid && (control.touched || control.dirty))),
+    };
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Placeholder del input */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Tipo de input HTML */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    /** Tamaño del campo */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Valor actual del campo */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Solo lectura */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda debajo del campo */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Icono al inicio */
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    /** Icono al final */
+    trailingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    /** Ancho completo */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    mfInput = output();
+    mfBlur = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.value());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-input requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-input', `mf-input--${this.size()}`];
+        if (this.fullWidth())
+            classes.push('mf-input--full');
+        if (this.error())
+            classes.push('mf-input--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(value ?? '');
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onInput(event) {
+        const target = event.target;
+        this.internalValue.set(target.value);
+        this.onControlChange(target.value);
+        this.mfInput.emit(target.value);
+    }
+    onBlur() {
+        this.onControlTouched();
+        this.mfBlur.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfInputComponent, isStandalone: true, selector: "mf-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfInput: "mfInput", mfBlur: "mfBlur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, 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>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [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()"
+      />
+      @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-input__error" [attr.id]="errorId()" role="alert">{{ error() }}</p>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-input{font-family:var(--mf-font-base)!important;width:100%}.mf-input--full{width:100%}.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}.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}.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}.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}.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)}.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}.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}.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}.mf-input .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-input', imports: [MatFormFieldModule, MatInputModule, MatIconModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfInputComponent),
+                            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>
+      }
+      <input
+        matInput
+        [id]="controlId()"
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [readonly]="readonly()"
+        [required]="required()"
+        [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()"
+      />
+      @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-input__error" [attr.id]="errorId()" role="alert">{{ error() }}</p>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-input{font-family:var(--mf-font-base)!important;width:100%}.mf-input--full{width:100%}.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}.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}.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}.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}.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)}.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}.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}.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}.mf-input .mat-mdc-input-element:disabled{color:var(--mf-color-neutral-300)!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], mfInput: [{ type: i0.Output, args: ["mfInput"] }], mfBlur: [{ type: i0.Output, args: ["mfBlur"] }] } });
+
+/**
+ * Menu de la librería ng-comps.
+ * Envuelve Angular Material `mat-menu` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfMenuComponent {
+    /** Items del menú */
+    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Icono del trigger */
+    triggerIcon = input('more_vert', ...(ngDevMode ? [{ debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
+    /** Label accesible del trigger */
+    triggerLabel = input('Open menu', ...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
+    mfItemClick = output();
+    hostClasses = computed(() => 'mf-menu', ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    triggerClasses = computed(() => 'mf-menu__trigger', ...(ngDevMode ? [{ debugName: "triggerClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfMenuComponent, isStandalone: true, selector: "mf-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfItemClick: "mfItemClick" }, ngImport: i0, template: `
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      [class]="triggerClasses()"
+      [attr.aria-label]="triggerLabel()"
+    >
+      <mat-icon>{{ triggerIcon() }}</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" [class]="hostClasses()">
+      @for (item of items(); track item.value) {
+        <button
+          mat-menu-item
+          [disabled]="item.disabled ?? false"
+          (click)="mfItemClick.emit(item.value)"
+        >
+          @if (item.icon) {
+            <mat-icon aria-hidden="true">{{ item.icon }}</mat-icon>
+          }
+          <span>{{ item.label }}</span>
+        </button>
+      }
+    </mat-menu>
+  `, isInline: true, styles: [":host{display:inline-block}.mf-menu__trigger{color:var(--mf-color-neutral-600)!important}.mf-menu__trigger:hover{color:var(--mf-color-brand)!important}.mf-menu .mat-mdc-menu-panel{border-radius:var(--mf-radius-md)!important;box-shadow:var(--mf-shadow-lg)!important}.mf-menu .mat-mdc-menu-item{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important}.mf-menu .mat-mdc-menu-item:hover{background-color:var(--mf-color-brand-light)!important}.mf-menu .mat-mdc-menu-item .mat-icon{color:var(--mf-color-neutral-400)!important;margin-right:var(--mf-space-2)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$b.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$b.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$b.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-menu', imports: [MatMenuModule, MatButtonModule, MatIconModule], template: `
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      [class]="triggerClasses()"
+      [attr.aria-label]="triggerLabel()"
+    >
+      <mat-icon>{{ triggerIcon() }}</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu" [class]="hostClasses()">
+      @for (item of items(); track item.value) {
+        <button
+          mat-menu-item
+          [disabled]="item.disabled ?? false"
+          (click)="mfItemClick.emit(item.value)"
+        >
+          @if (item.icon) {
+            <mat-icon aria-hidden="true">{{ item.icon }}</mat-icon>
+          }
+          <span>{{ item.label }}</span>
+        </button>
+      }
+    </mat-menu>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-menu__trigger{color:var(--mf-color-neutral-600)!important}.mf-menu__trigger:hover{color:var(--mf-color-brand)!important}.mf-menu .mat-mdc-menu-panel{border-radius:var(--mf-radius-md)!important;box-shadow:var(--mf-shadow-lg)!important}.mf-menu .mat-mdc-menu-item{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important}.mf-menu .mat-mdc-menu-item:hover{background-color:var(--mf-color-brand-light)!important}.mf-menu .mat-mdc-menu-item .mat-icon{color:var(--mf-color-neutral-400)!important;margin-right:var(--mf-space-2)!important}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], mfItemClick: [{ type: i0.Output, args: ["mfItemClick"] }] } });
+
+/**
+ * Paginator de la librería ng-comps.
+ * Envuelve Angular Material `mat-paginator` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfPaginatorComponent {
+    /** Total de elementos */
+    length = input.required(...(ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []));
+    /** Tamaño de página */
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    /** Índice de página actual */
+    pageIndex = input(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    /** Opciones de tamaño de página */
+    pageSizeOptions = input([5, 10, 25, 50], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    /** Mostrar botones de primera/última página */
+    showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : /* istanbul ignore next */ []));
+    /** Ocultar selector de tamaño de página */
+    hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : /* istanbul ignore next */ []));
+    mfPageChange = output();
+    hostClasses = computed(() => {
+        return 'mf-paginator';
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfPaginatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MfPaginatorComponent, isStandalone: true, selector: "mf-paginator", inputs: { length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: true, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfPageChange: "mfPageChange" }, ngImport: i0, template: `
+    <mat-paginator
+      [length]="length()"
+      [pageSize]="pageSize()"
+      [pageIndex]="pageIndex()"
+      [pageSizeOptions]="pageSizeOptions()"
+      [showFirstLastButtons]="showFirstLastButtons()"
+      [hidePageSize]="hidePageSize()"
+      [class]="hostClasses()"
+      (page)="mfPageChange.emit($event)"
+    />
+  `, isInline: true, styles: [":host{display:block}.mf-paginator.mat-mdc-paginator{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;background-color:transparent!important}.mf-paginator .mat-mdc-paginator-container{padding:var(--mf-space-2) 0!important}.mf-paginator .mat-mdc-paginator-range-label{color:var(--mf-color-neutral-600)!important;font-family:var(--mf-font-base)!important}.mf-paginator .mat-mdc-paginator-navigation-previous,.mf-paginator .mat-mdc-paginator-navigation-next,.mf-paginator .mat-mdc-paginator-navigation-first,.mf-paginator .mat-mdc-paginator-navigation-last{color:var(--mf-color-brand)!important}.mf-paginator .mat-mdc-paginator-navigation-previous:disabled,.mf-paginator .mat-mdc-paginator-navigation-next:disabled,.mf-paginator .mat-mdc-paginator-navigation-first:disabled,.mf-paginator .mat-mdc-paginator-navigation-last:disabled{color:var(--mf-color-neutral-300)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i1$c.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfPaginatorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-paginator', imports: [MatPaginatorModule], template: `
+    <mat-paginator
+      [length]="length()"
+      [pageSize]="pageSize()"
+      [pageIndex]="pageIndex()"
+      [pageSizeOptions]="pageSizeOptions()"
+      [showFirstLastButtons]="showFirstLastButtons()"
+      [hidePageSize]="hidePageSize()"
+      [class]="hostClasses()"
+      (page)="mfPageChange.emit($event)"
+    />
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-paginator.mat-mdc-paginator{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;background-color:transparent!important}.mf-paginator .mat-mdc-paginator-container{padding:var(--mf-space-2) 0!important}.mf-paginator .mat-mdc-paginator-range-label{color:var(--mf-color-neutral-600)!important;font-family:var(--mf-font-base)!important}.mf-paginator .mat-mdc-paginator-navigation-previous,.mf-paginator .mat-mdc-paginator-navigation-next,.mf-paginator .mat-mdc-paginator-navigation-first,.mf-paginator .mat-mdc-paginator-navigation-last{color:var(--mf-color-brand)!important}.mf-paginator .mat-mdc-paginator-navigation-previous:disabled,.mf-paginator .mat-mdc-paginator-navigation-next:disabled,.mf-paginator .mat-mdc-paginator-navigation-first:disabled,.mf-paginator .mat-mdc-paginator-navigation-last:disabled{color:var(--mf-color-neutral-300)!important}\n"] }]
+        }], propDecorators: { length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: true }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], mfPageChange: [{ type: i0.Output, args: ["mfPageChange"] }] } });
+
+/**
+ * Barra de progreso de la librería ng-comps.
+ * Envuelve Angular Material `mat-progress-bar` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfProgressBarComponent {
+    /** Modo de la barra de progreso */
+    mode = input('determinate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Valor actual (0–100) */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Valor del buffer (0–100, solo en modo buffer) */
+    bufferValue = input(0, ...(ngDevMode ? [{ debugName: "bufferValue" }] : /* istanbul ignore next */ []));
+    /** Color de la barra */
+    color = input('brand', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texto accesible opcional para lectores de pantalla */
+    valueText = input(undefined, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    /** Muestra el porcentaje junto a la barra */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /** Altura de la barra en px */
+    height = input(4, ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!hasAccessibleName(this.label())) {
+                warnInDev('mf-progress-bar debería incluir `label` para anunciar el progreso de forma accesible.');
+            }
+        });
+    }
+    showsNumericValue = computed(() => this.mode() === 'determinate', ...(ngDevMode ? [{ debugName: "showsNumericValue" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return `mf-progress-bar mf-progress-bar--${this.color()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfProgressBarComponent, isStandalone: true, selector: "mf-progress-bar", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, bufferValue: { classPropertyName: "bufferValue", publicName: "bufferValue", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div class="mf-progress-bar__wrapper">
+      @if (label()) {
+        <span class="mf-progress-bar__label">{{ label() }}</span>
+      }
+      <mat-progress-bar
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [bufferValue]="bufferValue()"
+        [attr.aria-label]="label() || null"
+        [attr.aria-valuetext]="valueText() || null"
+        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+      @if (showValue() && mode() === 'determinate') {
+        <span class="mf-progress-bar__value" aria-hidden="true">{{ value() }}%</span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mf-progress-bar__wrapper{display:flex;flex-direction:column;gap:var(--mf-space-2)}.mf-progress-bar__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)}.mf-progress-bar__value{font-family:var(--mf-font-base);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-medium);color:var(--mf-color-neutral-600);align-self:flex-end}.mf-progress-bar{border-radius:var(--mf-radius-full)!important;overflow:hidden}.mf-progress-bar.mat-mdc-progress-bar{--mdc-linear-progress-track-shape: 9999px}.mf-progress-bar--brand.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-brand) !important;--mdc-linear-progress-track-color: var(--mf-color-primary-100) !important}.mf-progress-bar--accent.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-accent-500) !important;--mdc-linear-progress-track-color: var(--mf-color-accent-300) !important}.mf-progress-bar--warn.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-error-500) !important;--mdc-linear-progress-track-color: #fecaca !important}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$d.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfProgressBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-progress-bar', imports: [MatProgressBarModule], template: `
+    <div class="mf-progress-bar__wrapper">
+      @if (label()) {
+        <span class="mf-progress-bar__label">{{ label() }}</span>
+      }
+      <mat-progress-bar
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [bufferValue]="bufferValue()"
+        [attr.aria-label]="label() || null"
+        [attr.aria-valuetext]="valueText() || null"
+        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+      @if (showValue() && mode() === 'determinate') {
+        <span class="mf-progress-bar__value" aria-hidden="true">{{ value() }}%</span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-progress-bar__wrapper{display:flex;flex-direction:column;gap:var(--mf-space-2)}.mf-progress-bar__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)}.mf-progress-bar__value{font-family:var(--mf-font-base);font-size:var(--mf-text-xs);font-weight:var(--mf-weight-medium);color:var(--mf-color-neutral-600);align-self:flex-end}.mf-progress-bar{border-radius:var(--mf-radius-full)!important;overflow:hidden}.mf-progress-bar.mat-mdc-progress-bar{--mdc-linear-progress-track-shape: 9999px}.mf-progress-bar--brand.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-brand) !important;--mdc-linear-progress-track-color: var(--mf-color-primary-100) !important}.mf-progress-bar--accent.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-accent-500) !important;--mdc-linear-progress-track-color: var(--mf-color-accent-300) !important}.mf-progress-bar--warn.mat-mdc-progress-bar{--mdc-linear-progress-active-indicator-color: var(--mf-color-error-500) !important;--mdc-linear-progress-track-color: #fecaca !important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], bufferValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "bufferValue", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }] } });
+
+/**
+ * Spinner de progreso de la librería ng-comps.
+ * Envuelve Angular Material `mat-progress-spinner` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfProgressSpinnerComponent {
+    /** Modo del spinner */
+    mode = input('indeterminate', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Valor actual (0–100, solo en modo determinate) */
+    value = input(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Diámetro en px */
+    diameter = input(40, ...(ngDevMode ? [{ debugName: "diameter" }] : /* istanbul ignore next */ []));
+    /** Grosor del trazo en px */
+    strokeWidth = input(4, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+    /** Color del spinner */
+    color = input('brand', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible y visible */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Texto accesible opcional para lectores de pantalla */
+    valueText = input(undefined, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            if (!hasAccessibleName(this.label())) {
+                warnInDev('mf-progress-spinner debería incluir `label` para anunciar el estado de carga de forma accesible.');
+            }
+        });
+    }
+    showsNumericValue = computed(() => this.mode() === 'determinate', ...(ngDevMode ? [{ debugName: "showsNumericValue" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return `mf-progress-spinner mf-progress-spinner--${this.color()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    wrapperClasses = computed(() => {
+        const classes = ['mf-progress-spinner__wrapper'];
+        if (this.label())
+            classes.push('mf-progress-spinner__wrapper--labeled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "wrapperClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfProgressSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfProgressSpinnerComponent, isStandalone: true, selector: "mf-progress-spinner", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, diameter: { classPropertyName: "diameter", publicName: "diameter", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, valueText: { classPropertyName: "valueText", publicName: "valueText", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div [class]="wrapperClasses()">
+      <mat-progress-spinner
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [diameter]="diameter()"
+        [strokeWidth]="strokeWidth()"
+        [attr.aria-label]="label() || null"
+        [attr.aria-valuetext]="valueText() || null"
+        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+      @if (label()) {
+        <span class="mf-progress-spinner__label">{{ label() }}</span>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.mf-progress-spinner__wrapper{display:inline-flex;align-items:center;gap:var(--mf-space-3)}.mf-progress-spinner__wrapper--labeled{flex-direction:row}.mf-progress-spinner__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)}.mf-progress-spinner--brand.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-brand) !important}.mf-progress-spinner--accent.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-accent-500) !important}.mf-progress-spinner--warn.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-error-500) !important}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i1$e.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfProgressSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-progress-spinner', imports: [MatProgressSpinnerModule], template: `
+    <div [class]="wrapperClasses()">
+      <mat-progress-spinner
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [diameter]="diameter()"
+        [strokeWidth]="strokeWidth()"
+        [attr.aria-label]="label() || null"
+        [attr.aria-valuetext]="valueText() || null"
+        [attr.aria-valuenow]="showsNumericValue() ? value() : null"
+        aria-valuemin="0"
+        aria-valuemax="100"
+      />
+      @if (label()) {
+        <span class="mf-progress-spinner__label">{{ label() }}</span>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.mf-progress-spinner__wrapper{display:inline-flex;align-items:center;gap:var(--mf-space-3)}.mf-progress-spinner__wrapper--labeled{flex-direction:row}.mf-progress-spinner__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)}.mf-progress-spinner--brand.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-brand) !important}.mf-progress-spinner--accent.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-accent-500) !important}.mf-progress-spinner--warn.mat-mdc-progress-spinner{--mdc-circular-progress-active-indicator-color: var(--mf-color-error-500) !important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], diameter: [{ type: i0.Input, args: [{ isSignal: true, alias: "diameter", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], valueText: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueText", required: false }] }] } });
+
+/**
+ * Grupo de radio buttons de la librería ng-comps.
+ * Envuelve Angular Material `mat-radio-group` + `mat-radio-button`
+ * y expone una API uniforme con look and feel de marca.
+ */
+class MfRadioButtonComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-radio');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    /** Opciones del grupo */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta visible del grupo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Valor seleccionado */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Dirección del grupo */
+    direction = input('vertical', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Nombre accesible alternativo del grupo */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible para el grupo */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Name del grupo */
+    name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.value());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-radio-button requiere `label`, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    legendId = computed(() => `${this.controlId()}-legend`, ...(ngDevMode ? [{ debugName: "legendId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    computedLabelledby = computed(() => mergeAriaIds(this.ariaLabelledby(), this.label() ? this.legendId() : null), ...(ngDevMode ? [{ debugName: "computedLabelledby" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    groupName = computed(() => this.name() ?? this.controlId(), ...(ngDevMode ? [{ debugName: "groupName" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return `mf-radio mf-radio--${this.direction()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(value ?? undefined);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onChange(event) {
+        this.internalValue.set(event.value);
+        this.onControlChange(event.value);
+        this.onControlTouched();
+        this.mfChange.emit(event.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfRadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfRadioButtonComponent, isStandalone: true, selector: "mf-radio-button", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfChange: "mfChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfRadioButtonComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <fieldset class="mf-radio__fieldset">
+      @if (label()) {
+        <legend class="mf-radio__legend" [id]="legendId()">
+          {{ label() }}
+          @if (required()) {
+            <span aria-hidden="true"> *</span>
+          }
+        </legend>
+      }
+
+      <mat-radio-group
+        [class]="hostClasses()"
+        [disabled]="isDisabled()"
+        [name]="groupName()"
+        [required]="required()"
+        [value]="internalValue()"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-labelledby]="computedLabelledby()"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-invalid]="isInvalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
+        (change)="onChange($event)"
+      >
+        @for (option of options(); track option.value) {
+          <mat-radio-button
+            class="mf-radio__option"
+            [value]="option.value"
+            [disabled]="option.disabled ?? false"
+          >
+            {{ option.label }}
+          </mat-radio-button>
+        }
+      </mat-radio-group>
+
+      @if (hint()) {
+        <p class="mf-radio__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-radio__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </fieldset>
+  `, isInline: true, styles: [":host{display:block}.mf-radio__fieldset{margin:0;padding:0;border:0}.mf-radio__legend{margin-bottom:var(--mf-space-2);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium);color:var(--mf-color-on-surface)}.mf-radio{display:flex}.mf-radio--vertical{flex-direction:column;gap:var(--mf-space-2)}.mf-radio--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--mf-space-4)}.mf-radio__option{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important}.mf-radio__option .mdc-radio .mdc-radio__outer-circle{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__outer-circle,.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__inner-circle{border-color:var(--mf-color-brand)!important}.mf-radio__option .mat-ripple-element{background-color:var(--mf-color-brand-light)!important}.mf-radio__option .mdc-label{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;cursor:pointer}.mf-radio__option.mat-mdc-radio-disabled .mdc-label{color:var(--mf-color-neutral-400)!important;cursor:default}.mf-radio__hint,.mf-radio__error{margin:var(--mf-space-2) 0 0;font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-radio__hint{color:var(--mf-color-neutral-600)}.mf-radio__error{color:var(--mf-color-error-500)}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$f.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$f.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfRadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-radio-button', imports: [MatRadioModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfRadioButtonComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <fieldset class="mf-radio__fieldset">
+      @if (label()) {
+        <legend class="mf-radio__legend" [id]="legendId()">
+          {{ label() }}
+          @if (required()) {
+            <span aria-hidden="true"> *</span>
+          }
+        </legend>
+      }
+
+      <mat-radio-group
+        [class]="hostClasses()"
+        [disabled]="isDisabled()"
+        [name]="groupName()"
+        [required]="required()"
+        [value]="internalValue()"
+        [attr.aria-label]="resolvedAriaLabel()"
+        [attr.aria-labelledby]="computedLabelledby()"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-invalid]="isInvalid() ? 'true' : null"
+        [attr.aria-required]="required() ? 'true' : null"
+        (change)="onChange($event)"
+      >
+        @for (option of options(); track option.value) {
+          <mat-radio-button
+            class="mf-radio__option"
+            [value]="option.value"
+            [disabled]="option.disabled ?? false"
+          >
+            {{ option.label }}
+          </mat-radio-button>
+        }
+      </mat-radio-group>
+
+      @if (hint()) {
+        <p class="mf-radio__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-radio__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </fieldset>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-radio__fieldset{margin:0;padding:0;border:0}.mf-radio__legend{margin-bottom:var(--mf-space-2);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium);color:var(--mf-color-on-surface)}.mf-radio{display:flex}.mf-radio--vertical{flex-direction:column;gap:var(--mf-space-2)}.mf-radio--horizontal{flex-direction:row;flex-wrap:wrap;gap:var(--mf-space-4)}.mf-radio__option{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important}.mf-radio__option .mdc-radio .mdc-radio__outer-circle{border-color:var(--mf-color-border)!important;transition:border-color var(--mf-duration-base) var(--mf-ease-standard)}.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__outer-circle,.mf-radio__option.mat-mdc-radio-checked .mdc-radio .mdc-radio__inner-circle{border-color:var(--mf-color-brand)!important}.mf-radio__option .mat-ripple-element{background-color:var(--mf-color-brand-light)!important}.mf-radio__option .mdc-label{font-family:var(--mf-font-base)!important;color:var(--mf-color-on-surface)!important;cursor:pointer}.mf-radio__option.mat-mdc-radio-disabled .mdc-label{color:var(--mf-color-neutral-400)!important;cursor:default}.mf-radio__hint,.mf-radio__error{margin:var(--mf-space-2) 0 0;font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-radio__hint{color:var(--mf-color-neutral-600)}.mf-radio__error{color:var(--mf-color-error-500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], mfChange: [{ type: i0.Output, args: ["mfChange"] }] } });
+
+/**
+ * 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`.
+ */
+class MfSelectComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-select');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal(undefined, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: (control) => Boolean(this.error() || (control?.invalid && (control.touched || control.dirty))),
+    };
+    /** Opciones del select */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Placeholder */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Valor actual */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Selección múltiple */
+    multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Tamaño del campo */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Ancho completo */
+    fullWidth = input(false, ...(ngDevMode ? [{ debugName: "fullWidth" }] : /* istanbul ignore next */ []));
+    /** Icono al inicio del campo */
+    leadingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "leadingIcon" }] : /* istanbul ignore next */ []));
+    /** Icono al final del campo */
+    trailingIcon = input(undefined, ...(ngDevMode ? [{ debugName: "trailingIcon" }] : /* istanbul ignore next */ []));
+    /**
+     * Clases extra que se añaden al panel del dropdown (overlay).
+     * La clase `mf-select-panel` siempre está presente para los estilos base.
+     */
+    panelClass = input('', ...(ngDevMode ? [{ debugName: "panelClass" }] : /* istanbul ignore next */ []));
+    mfSelectionChange = output();
+    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.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    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;
+    }, ...(ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(value ?? undefined);
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onSelectionChange(event) {
+        this.internalValue.set(event.value);
+        this.onControlChange(event.value);
+        this.onControlTouched();
+        this.mfSelectionChange.emit(event.value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfSelectComponent, isStandalone: true, selector: "mf-select", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fullWidth: { classPropertyName: "fullWidth", publicName: "fullWidth", isSignal: true, isRequired: false, transformFunction: null }, leadingIcon: { classPropertyName: "leadingIcon", publicName: "leadingIcon", isSignal: true, isRequired: false, transformFunction: null }, trailingIcon: { classPropertyName: "trailingIcon", publicName: "trailingIcon", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfSelectionChange: "mfSelectionChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfSelectComponent),
+                multi: true,
+            },
+        ], ngImport: i0, 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>
+    }
+  `, isInline: true, styles: [":host{display:inline-block}.mf-select{font-family:var(--mf-font-base)!important;width:100%}.mf-select--full{width:100%}.mf-select .mat-mdc-text-field-wrapper,.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$2.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i1$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSelectComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-select{font-family:var(--mf-font-base)!important;width:100%}.mf-select--full{width:100%}.mf-select .mat-mdc-text-field-wrapper,.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}.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}.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}.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}.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}.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}.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}.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}.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}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullWidth", required: false }] }], leadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingIcon", required: false }] }], trailingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailingIcon", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], mfSelectionChange: [{ type: i0.Output, args: ["mfSelectionChange"] }] } });
+
+/**
+ * Panel lateral de la librería ng-comps.
+ * Envuelve Angular Material `mat-sidenav-container` y expone una API uniforme
+ * con look and feel de marca.
+ *
+ * Dos formas de uso:
+ * 1. **Navitems declarativos** — Proporciona `navItems`, `headerTitle` e icono.
+ * 2. **Content projection** — Proyecta `[mfSidenavContent]` para control total.
+ *
+ * El contenido principal se proyecta sin atributo.
+ */
+class MfSidenavComponent {
+    /** Abierto o cerrado */
+    opened = input(false, ...(ngDevMode ? [{ debugName: "opened" }] : /* istanbul ignore next */ []));
+    /** Modo de apertura */
+    mode = input('side', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Posición del panel */
+    position = input('start', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Muestra backdrop al abrir */
+    hasBackdrop = input(null, ...(ngDevMode ? [{ debugName: "hasBackdrop" }] : /* istanbul ignore next */ []));
+    /** Ancho del panel lateral */
+    sidenavWidth = input('260px', ...(ngDevMode ? [{ debugName: "sidenavWidth" }] : /* istanbul ignore next */ []));
+    /** Ítems de navegación declarativos */
+    navItems = input([], ...(ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []));
+    /** Título de la cabecera del sidenav */
+    headerTitle = input(undefined, ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
+    /** Icono Material de la cabecera */
+    headerIcon = input(undefined, ...(ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []));
+    /** Aria-label del elemento nav */
+    navAriaLabel = input('Primary navigation', ...(ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []));
+    mfOpenedChange = output();
+    /** Emite el ítem de navegación pulsado */
+    mfNavItemClick = output();
+    containerClasses = computed(() => 'mf-sidenav-container', ...(ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []));
+    sidenavClasses = computed(() => {
+        return `mf-sidenav mf-sidenav--${this.mode()}`;
+    }, ...(ngDevMode ? [{ debugName: "sidenavClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfSidenavComponent, isStandalone: true, selector: "mf-sidenav", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hasBackdrop: { classPropertyName: "hasBackdrop", publicName: "hasBackdrop", isSignal: true, isRequired: false, transformFunction: null }, sidenavWidth: { classPropertyName: "sidenavWidth", publicName: "sidenavWidth", isSignal: true, isRequired: false, transformFunction: null }, navItems: { classPropertyName: "navItems", publicName: "navItems", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, navAriaLabel: { classPropertyName: "navAriaLabel", publicName: "navAriaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfOpenedChange: "mfOpenedChange", mfNavItemClick: "mfNavItemClick" }, ngImport: i0, template: `
+    <mat-sidenav-container [class]="containerClasses()" [hasBackdrop]="hasBackdrop()">
+      <mat-sidenav
+        [class]="sidenavClasses()"
+        [mode]="mode()"
+        [position]="position()"
+        [opened]="opened()"
+        [style.width]="sidenavWidth()"
+        (openedChange)="mfOpenedChange.emit($event)"
+      >
+        @if (navItems().length > 0) {
+          <div class="mf-sidenav__nav">
+            @if (headerTitle()) {
+              <div class="mf-sidenav__header">
+                @if (headerIcon()) {
+                  <mat-icon class="mf-sidenav__header-icon" aria-hidden="true">{{ headerIcon() }}</mat-icon>
+                }
+                <span class="mf-sidenav__header-title">{{ headerTitle() }}</span>
+              </div>
+            }
+            <nav class="mf-sidenav__menu" [attr.aria-label]="navAriaLabel()">
+              @for (item of navItems(); track item.id) {
+                <button
+                  type="button"
+                  class="mf-sidenav__item"
+                  [class.mf-sidenav__item--active]="item.active"
+                  [class.mf-sidenav__item--disabled]="item.disabled"
+                  [disabled]="item.disabled ?? false"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  (click)="!item.disabled && mfNavItemClick.emit(item)"
+                >
+                  <mat-icon class="mf-sidenav__item-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
+                  <span class="mf-sidenav__item-label">{{ item.label }}</span>
+                  @if (item.badge && item.badge > 0) {
+                    <span class="mf-sidenav__item-badge" aria-label="{{ item.badge }} notifications">
+                      {{ item.badge > 99 ? '99+' : item.badge }}
+                    </span>
+                  }
+                </button>
+              }
+            </nav>
+          </div>
+        } @else {
+          <ng-content select="[mfSidenavContent]" />
+        }
+      </mat-sidenav>
+      <mat-sidenav-content class="mf-sidenav__main">
+        <ng-content />
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, isInline: true, styles: [":host{display:block;height:100%}.mf-sidenav-container{height:100%;background-color:var(--mf-color-surface)!important}.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}.mf-sidenav__nav{display:flex;flex-direction:column;height:100%;overflow:hidden}.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}.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}.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}.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}.mf-sidenav__item--disabled{opacity:.4;cursor:not-allowed}.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)}.mf-sidenav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:.625rem;font-weight:var(--mf-weight-bold);line-height:1;flex-shrink:0}.mf-sidenav__main{background-color:var(--mf-color-surface);padding:var(--mf-space-6);font-family:var(--mf-font-base)}.mf-sidenav-container .mat-drawer-backdrop.mat-drawer-shown{background-color:#0f172a52!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i1$g.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$g.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$g.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSidenavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-sidenav', imports: [MatSidenavModule, MatIconModule], template: `
+    <mat-sidenav-container [class]="containerClasses()" [hasBackdrop]="hasBackdrop()">
+      <mat-sidenav
+        [class]="sidenavClasses()"
+        [mode]="mode()"
+        [position]="position()"
+        [opened]="opened()"
+        [style.width]="sidenavWidth()"
+        (openedChange)="mfOpenedChange.emit($event)"
+      >
+        @if (navItems().length > 0) {
+          <div class="mf-sidenav__nav">
+            @if (headerTitle()) {
+              <div class="mf-sidenav__header">
+                @if (headerIcon()) {
+                  <mat-icon class="mf-sidenav__header-icon" aria-hidden="true">{{ headerIcon() }}</mat-icon>
+                }
+                <span class="mf-sidenav__header-title">{{ headerTitle() }}</span>
+              </div>
+            }
+            <nav class="mf-sidenav__menu" [attr.aria-label]="navAriaLabel()">
+              @for (item of navItems(); track item.id) {
+                <button
+                  type="button"
+                  class="mf-sidenav__item"
+                  [class.mf-sidenav__item--active]="item.active"
+                  [class.mf-sidenav__item--disabled]="item.disabled"
+                  [disabled]="item.disabled ?? false"
+                  [attr.aria-current]="item.active ? 'page' : null"
+                  (click)="!item.disabled && mfNavItemClick.emit(item)"
+                >
+                  <mat-icon class="mf-sidenav__item-icon" aria-hidden="true">{{ item.icon }}</mat-icon>
+                  <span class="mf-sidenav__item-label">{{ item.label }}</span>
+                  @if (item.badge && item.badge > 0) {
+                    <span class="mf-sidenav__item-badge" aria-label="{{ item.badge }} notifications">
+                      {{ item.badge > 99 ? '99+' : item.badge }}
+                    </span>
+                  }
+                </button>
+              }
+            </nav>
+          </div>
+        } @else {
+          <ng-content select="[mfSidenavContent]" />
+        }
+      </mat-sidenav>
+      <mat-sidenav-content class="mf-sidenav__main">
+        <ng-content />
+      </mat-sidenav-content>
+    </mat-sidenav-container>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;height:100%}.mf-sidenav-container{height:100%;background-color:var(--mf-color-surface)!important}.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}.mf-sidenav__nav{display:flex;flex-direction:column;height:100%;overflow:hidden}.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}.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}.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}.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}.mf-sidenav__item--disabled{opacity:.4;cursor:not-allowed}.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)}.mf-sidenav__item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.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:.625rem;font-weight:var(--mf-weight-bold);line-height:1;flex-shrink:0}.mf-sidenav__main{background-color:var(--mf-color-surface);padding:var(--mf-space-6);font-family:var(--mf-font-base)}.mf-sidenav-container .mat-drawer-backdrop.mat-drawer-shown{background-color:#0f172a52!important}\n"] }]
+        }], propDecorators: { opened: [{ type: i0.Input, args: [{ isSignal: true, alias: "opened", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], sidenavWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidenavWidth", required: false }] }], navItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "navItems", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], navAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "navAriaLabel", required: false }] }], mfOpenedChange: [{ type: i0.Output, args: ["mfOpenedChange"] }], mfNavItemClick: [{ type: i0.Output, args: ["mfNavItemClick"] }] } });
+
+/**
+ * Slide Toggle de la librería ng-comps.
+ * Envuelve Angular Material `mat-slide-toggle` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfSlideToggleComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-slide-toggle');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal(false, ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Texto descriptivo */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Estado activado */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    constructor() {
+        effect(() => {
+            this.internalValue.set(this.checked());
+        });
+        effect(() => {
+            if (!hasAccessibleName(this.label(), this.ariaLabel(), this.ariaLabelledby())) {
+                warnInDev('mf-slide-toggle requiere texto visible, `ariaLabel` o `ariaLabelledby` para exponer un nombre accesible.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        const classes = ['mf-slide-toggle'];
+        if (this.isDisabled())
+            classes.push('mf-slide-toggle--disabled');
+        if (this.error())
+            classes.push('mf-slide-toggle--error');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(Boolean(value));
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onToggleChange(event) {
+        this.internalValue.set(event.checked);
+        this.onControlChange(event.checked);
+        this.onControlTouched();
+        this.mfChange.emit(event.checked);
+    }
+    onChange(event) {
+        this.onToggleChange(event);
+    }
+    onBlur() {
+        this.onControlTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfSlideToggleComponent, isStandalone: true, selector: "mf-slide-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfChange: "mfChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfSlideToggleComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: `
+    <div [class]="hostClasses()">
+      <mat-slide-toggle
+        [id]="controlId()"
+        [checked]="internalValue()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [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"
+        (change)="onToggleChange($event)"
+        (blur)="onBlur()"
+      >
+        {{ label() }}
+      </mat-slide-toggle>
+
+      @if (hint()) {
+        <p class="mf-slide-toggle__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-slide-toggle__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mf-slide-toggle{display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-slide-toggle .mat-mdc-slide-toggle{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important}.mf-slide-toggle .mdc-switch--selected .mdc-switch__track:after{background-color:var(--mf-color-primary-200)!important}.mf-slide-toggle .mdc-switch--selected .mdc-switch__handle:after{background-color:var(--mf-color-brand)!important}.mf-slide-toggle--disabled{opacity:.42}.mf-slide-toggle__hint,.mf-slide-toggle__error{margin:0;padding-left:calc(36px + var(--mf-space-2));font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-slide-toggle__hint{color:var(--mf-color-neutral-600)}.mf-slide-toggle__error{color:var(--mf-color-error-500)}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$h.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSlideToggleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-slide-toggle', imports: [MatSlideToggleModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => MfSlideToggleComponent),
+                            multi: true,
+                        },
+                    ], template: `
+    <div [class]="hostClasses()">
+      <mat-slide-toggle
+        [id]="controlId()"
+        [checked]="internalValue()"
+        [disabled]="isDisabled()"
+        [required]="required()"
+        [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"
+        (change)="onToggleChange($event)"
+        (blur)="onBlur()"
+      >
+        {{ label() }}
+      </mat-slide-toggle>
+
+      @if (hint()) {
+        <p class="mf-slide-toggle__hint" [attr.id]="hintId()">{{ hint() }}</p>
+      }
+
+      @if (error()) {
+        <p class="mf-slide-toggle__error" [attr.id]="errorId()" role="alert">
+          {{ error() }}
+        </p>
+      }
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-slide-toggle{display:flex;flex-direction:column;gap:var(--mf-space-1)}.mf-slide-toggle .mat-mdc-slide-toggle{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important}.mf-slide-toggle .mdc-switch--selected .mdc-switch__track:after{background-color:var(--mf-color-primary-200)!important}.mf-slide-toggle .mdc-switch--selected .mdc-switch__handle:after{background-color:var(--mf-color-brand)!important}.mf-slide-toggle--disabled{opacity:.42}.mf-slide-toggle__hint,.mf-slide-toggle__error{margin:0;padding-left:calc(36px + var(--mf-space-2));font-size:var(--mf-text-xs);line-height:var(--mf-leading-normal)}.mf-slide-toggle__hint{color:var(--mf-color-neutral-600)}.mf-slide-toggle__error{color:var(--mf-color-error-500)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], mfChange: [{ type: i0.Output, args: ["mfChange"] }] } });
+
+/**
+ * Servicio de Snackbar de la librería ng-comps.
+ * Envuelve Angular Material `MatSnackBar` y expone una API uniforme
+ * con estilos de marca y tipos semánticos.
+ */
+class MfSnackbarService {
+    matSnackBar = inject(MatSnackBar);
+    open(config) {
+        const type = config.type ?? 'info';
+        const matConfig = {
+            duration: config.duration ?? this.defaultDuration(type),
+            horizontalPosition: config.horizontalPosition ?? 'end',
+            verticalPosition: config.verticalPosition ?? 'bottom',
+            politeness: config.politeness ?? this.defaultPoliteness(type),
+            announcementMessage: config.announcementMessage ?? config.message,
+            panelClass: ['mf-snackbar', `mf-snackbar--${type}`],
+        };
+        return this.matSnackBar.open(config.message, config.action, matConfig);
+    }
+    info(message, action) {
+        return this.open({ message, action, type: 'info' });
+    }
+    success(message, action) {
+        return this.open({ message, action, type: 'success' });
+    }
+    warning(message, action) {
+        return this.open({ message, action, type: 'warning' });
+    }
+    error(message, action) {
+        return this.open({ message, action, type: 'error' });
+    }
+    defaultDuration(type) {
+        if (type === 'error' || type === 'warning') {
+            return 6000;
+        }
+        return 4000;
+    }
+    defaultPoliteness(type) {
+        if (type === 'error' || type === 'warning') {
+            return 'assertive';
+        }
+        return 'polite';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSnackbarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSnackbarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfSnackbarService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Enterprise-oriented table component with optional search, pagination,
+ * badges, explicit row actions and client-side sorting.
+ */
+class MfTableComponent {
+    localSearchTerm = signal('', ...(ngDevMode ? [{ debugName: "localSearchTerm" }] : /* istanbul ignore next */ []));
+    localPageIndex = signal(0, ...(ngDevMode ? [{ debugName: "localPageIndex" }] : /* istanbul ignore next */ []));
+    localPageSize = signal(10, ...(ngDevMode ? [{ debugName: "localPageSize" }] : /* istanbul ignore next */ []));
+    sortState = signal({ active: '', direction: '' }, ...(ngDevMode ? [{ debugName: "sortState" }] : /* istanbul ignore next */ []));
+    actionColumnKey = 'mf-row-action';
+    columns = input([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    data = input([], ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    density = input('comfortable', ...(ngDevMode ? [{ debugName: "density" }] : /* istanbul ignore next */ []));
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(undefined, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    showSearch = input(false, ...(ngDevMode ? [{ debugName: "showSearch" }] : /* istanbul ignore next */ []));
+    searchLabel = input('Search', ...(ngDevMode ? [{ debugName: "searchLabel" }] : /* istanbul ignore next */ []));
+    searchPlaceholder = input('Search records', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
+    searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : /* istanbul ignore next */ []));
+    showPaginator = input(false, ...(ngDevMode ? [{ debugName: "showPaginator" }] : /* istanbul ignore next */ []));
+    pageSize = input(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : /* istanbul ignore next */ []));
+    pageIndex = input(0, ...(ngDevMode ? [{ debugName: "pageIndex" }] : /* istanbul ignore next */ []));
+    pageSizeOptions = input([10, 25, 50, 100], ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : /* istanbul ignore next */ []));
+    showFirstLastButtons = input(true, ...(ngDevMode ? [{ debugName: "showFirstLastButtons" }] : /* istanbul ignore next */ []));
+    hidePageSize = input(false, ...(ngDevMode ? [{ debugName: "hidePageSize" }] : /* istanbul ignore next */ []));
+    stickyHeader = input(false, ...(ngDevMode ? [{ debugName: "stickyHeader" }] : /* istanbul ignore next */ []));
+    emptyTitle = input('No records found', ...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
+    emptyDescription = input('This dataset has no rows yet. Connect data or add records to populate the table.', ...(ngDevMode ? [{ debugName: "emptyDescription" }] : /* istanbul ignore next */ []));
+    rowActionLabel = input(undefined, ...(ngDevMode ? [{ debugName: "rowActionLabel" }] : /* istanbul ignore next */ []));
+    rowActionHeader = input('Actions', ...(ngDevMode ? [{ debugName: "rowActionHeader" }] : /* istanbul ignore next */ []));
+    rowActionAriaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "rowActionAriaLabel" }] : /* istanbul ignore next */ []));
+    rowActions = input([], ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+    mfSortChange = output();
+    mfSearchChange = output();
+    mfPageChange = output();
+    mfAction = output();
+    mfRowAction = output();
+    mfRowClick = output();
+    constructor() {
+        effect(() => {
+            this.localSearchTerm.set(this.searchValue());
+        });
+        effect(() => {
+            this.localPageIndex.set(this.pageIndex());
+        });
+        effect(() => {
+            this.localPageSize.set(this.pageSize());
+        });
+        effect(() => {
+            const totalRows = this.filteredRows().length;
+            const pageSize = Math.max(this.localPageSize(), 1);
+            const maxPageIndex = Math.max(Math.ceil(totalRows / pageSize) - 1, 0);
+            if (this.localPageIndex() > maxPageIndex) {
+                this.localPageIndex.set(maxPageIndex);
+            }
+        });
+    }
+    visibleColumns = computed(() => this.columns().filter((column) => !column.hidden), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+    searchTerm = computed(() => this.localSearchTerm().trim(), ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
+    showsToolbar = computed(() => Boolean(this.title() || this.description() || this.showSearch()), ...(ngDevMode ? [{ debugName: "showsToolbar" }] : /* istanbul ignore next */ []));
+    resolvedActionHeader = computed(() => this.rowActionHeader(), ...(ngDevMode ? [{ debugName: "resolvedActionHeader" }] : /* istanbul ignore next */ []));
+    resolvedActions = computed(() => {
+        const actions = [...this.rowActions()];
+        if (this.rowActionLabel()) {
+            actions.unshift({
+                key: 'legacy-action',
+                label: this.rowActionLabel(),
+                tone: 'neutral',
+                ariaLabel: this.rowActionAriaLabel(),
+                legacy: true,
+            });
+        }
+        return actions;
+    }, ...(ngDevMode ? [{ debugName: "resolvedActions" }] : /* istanbul ignore next */ []));
+    hasActions = computed(() => this.resolvedActions().length > 0, ...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
+    usesActionMenu = computed(() => this.resolvedActions().length > 1, ...(ngDevMode ? [{ debugName: "usesActionMenu" }] : /* istanbul ignore next */ []));
+    displayedColumns = computed(() => {
+        const columns = this.visibleColumns().map((column) => column.key);
+        if (this.hasActions()) {
+            columns.push(this.actionColumnKey);
+        }
+        return columns;
+    }, ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    filteredRows = computed(() => {
+        const query = this.searchTerm().toLowerCase();
+        const rows = this.data();
+        if (!query) {
+            return rows;
+        }
+        const searchableColumns = this.visibleColumns().filter((column) => column.searchable !== false);
+        return rows.filter((row) => searchableColumns.some((column) => this.getSearchValue(column, row).toLowerCase().includes(query)));
+    }, ...(ngDevMode ? [{ debugName: "filteredRows" }] : /* istanbul ignore next */ []));
+    sortedRows = computed(() => {
+        const rows = [...this.filteredRows()];
+        const { active, direction } = this.sortState();
+        if (!active || !direction) {
+            return rows;
+        }
+        const column = this.visibleColumns().find((item) => item.key === active);
+        if (!column) {
+            return rows;
+        }
+        return rows.sort((left, right) => {
+            const leftValue = this.normalizeSortValue(column, left);
+            const rightValue = this.normalizeSortValue(column, right);
+            if (leftValue < rightValue) {
+                return direction === 'asc' ? -1 : 1;
+            }
+            if (leftValue > rightValue) {
+                return direction === 'asc' ? 1 : -1;
+            }
+            return 0;
+        });
+    }, ...(ngDevMode ? [{ debugName: "sortedRows" }] : /* istanbul ignore next */ []));
+    paginatedRows = computed(() => {
+        if (!this.showPaginator()) {
+            return this.sortedRows();
+        }
+        const size = Math.max(this.localPageSize(), 1);
+        const start = this.localPageIndex() * size;
+        return this.sortedRows().slice(start, start + size);
+    }, ...(ngDevMode ? [{ debugName: "paginatedRows" }] : /* istanbul ignore next */ []));
+    resultSummary = computed(() => {
+        const filtered = this.filteredRows().length;
+        const total = this.data().length;
+        if (filtered === total) {
+            return `${total} records`;
+        }
+        return `${filtered} of ${total} records`;
+    }, ...(ngDevMode ? [{ debugName: "resultSummary" }] : /* istanbul ignore next */ []));
+    onSearchChange(value) {
+        this.localSearchTerm.set(value);
+        this.localPageIndex.set(0);
+        this.mfSearchChange.emit(value);
+    }
+    onSortChange(sort) {
+        this.sortState.set(sort);
+        this.localPageIndex.set(0);
+        this.mfSortChange.emit(sort);
+    }
+    onPageChange(event) {
+        this.localPageIndex.set(event.pageIndex);
+        this.localPageSize.set(event.pageSize);
+        this.mfPageChange.emit(event);
+    }
+    onActionClick(action, row) {
+        if (action.legacy) {
+            this.mfRowAction.emit(row);
+            this.mfRowClick.emit(row);
+        }
+        this.mfAction.emit({ action, row });
+    }
+    renderCell(column, row) {
+        const value = this.getRawValue(column, row);
+        if (column.formatter) {
+            return column.formatter(value, row);
+        }
+        if (value === null || value === undefined || value === '') {
+            return column.emptyValue ?? '-';
+        }
+        if (column.type === 'number' && typeof value === 'number') {
+            return new Intl.NumberFormat('es-ES').format(value);
+        }
+        if (column.type === 'date') {
+            const date = value instanceof Date ? value : new Date(String(value));
+            if (!Number.isNaN(date.getTime())) {
+                return new Intl.DateTimeFormat('es-ES').format(date);
+            }
+        }
+        return String(value);
+    }
+    headerCellClasses(column) {
+        return [
+            'mf-table__header-cell',
+            `mf-table__cell--align-${column.align ?? 'start'}`,
+        ].join(' ');
+    }
+    cellClasses(column) {
+        const classes = [
+            'mf-table__cell',
+            `mf-table__cell--align-${column.align ?? 'start'}`,
+        ];
+        if (column.truncate) {
+            classes.push('mf-table__cell--truncate');
+        }
+        return classes.join(' ');
+    }
+    badgeClasses(column, row) {
+        return [
+            'mf-table__badge',
+            `mf-table__badge--${this.resolveBadgeTone(column, row)}`,
+        ].join(' ');
+    }
+    actionClasses(action) {
+        return [
+            'mf-table__action',
+            `mf-table__action--${action.tone ?? 'neutral'}`,
+        ].join(' ');
+    }
+    isActionDisabled(action, row) {
+        return typeof action.disabled === 'function'
+            ? action.disabled(row)
+            : Boolean(action.disabled);
+    }
+    getActionAriaLabel(action, row) {
+        return action.ariaLabel?.(row) ?? action.label ?? null;
+    }
+    getRowMenuAriaLabel(row) {
+        const primaryColumn = this.visibleColumns()[0];
+        const primaryLabel = primaryColumn
+            ? this.renderCell(primaryColumn, row)
+            : 'this row';
+        return `Open actions for ${primaryLabel}`;
+    }
+    emptyDescriptionText() {
+        if (this.searchTerm()) {
+            return 'No rows match the current search. Try a broader query or clear the filter.';
+        }
+        return this.emptyDescription();
+    }
+    hostClasses = computed(() => ['mf-table', `mf-table--${this.variant()}`, `mf-table--${this.density()}`].join(' '), ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    getCellValue(column, row) {
+        return column.sortAccessor ? column.sortAccessor(row) : this.getRawValue(column, row);
+    }
+    getRawValue(column, row) {
+        return row[column.key];
+    }
+    getSearchValue(column, row) {
+        if (column.searchAccessor) {
+            return column.searchAccessor(row);
+        }
+        return this.renderCell(column, row);
+    }
+    normalizeSortValue(column, row) {
+        const value = this.getCellValue(column, row);
+        if (value === null || value === undefined || value === '') {
+            return '';
+        }
+        if (column.type === 'number') {
+            return typeof value === 'number' ? value : Number(value);
+        }
+        if (column.type === 'date') {
+            const date = value instanceof Date ? value : new Date(String(value));
+            return Number.isNaN(date.getTime()) ? '' : date.getTime();
+        }
+        if (typeof value === 'number') {
+            return value;
+        }
+        return String(value).toLocaleLowerCase();
+    }
+    resolveBadgeTone(column, row) {
+        const value = row[column.key];
+        if (typeof column.badgeTone === 'function') {
+            return column.badgeTone(value, row);
+        }
+        if (column.badgeTone) {
+            return column.badgeTone;
+        }
+        return column.badgeTones?.[String(value)] ?? 'neutral';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfTableComponent, isStandalone: true, selector: "mf-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, density: { classPropertyName: "density", publicName: "density", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageIndex: { classPropertyName: "pageIndex", publicName: "pageIndex", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, showFirstLastButtons: { classPropertyName: "showFirstLastButtons", publicName: "showFirstLastButtons", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, rowActionLabel: { classPropertyName: "rowActionLabel", publicName: "rowActionLabel", isSignal: true, isRequired: false, transformFunction: null }, rowActionHeader: { classPropertyName: "rowActionHeader", publicName: "rowActionHeader", isSignal: true, isRequired: false, transformFunction: null }, rowActionAriaLabel: { classPropertyName: "rowActionAriaLabel", publicName: "rowActionAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rowActions: { classPropertyName: "rowActions", publicName: "rowActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfSortChange: "mfSortChange", mfSearchChange: "mfSearchChange", mfPageChange: "mfPageChange", mfAction: "mfAction", mfRowAction: "mfRowAction", mfRowClick: "mfRowClick" }, ngImport: i0, template: `
+    <section [class]="hostClasses()">
+      @if (showsToolbar()) {
+        <header class="mf-table__toolbar">
+          <div class="mf-table__intro">
+            @if (title()) {
+              <h2 class="mf-table__title">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="mf-table__description">{{ description() }}</p>
+            }
+            <div class="mf-table__meta">
+              <span class="mf-table__metric">{{ resultSummary() }}</span>
+              @if (searchTerm()) {
+                <span class="mf-table__metric mf-table__metric--accent">
+                  Filter active
+                </span>
+              }
+              @if (sortState().direction) {
+                <span class="mf-table__metric">
+                  Sorted by {{ sortState().active }}
+                </span>
+              }
+            </div>
+          </div>
+
+          @if (showSearch()) {
+            <div class="mf-table__search">
+              <mf-input
+                [label]="searchLabel()"
+                [ariaLabel]="searchLabel()"
+                [placeholder]="searchPlaceholder()"
+                [value]="localSearchTerm()"
+                [type]="'search'"
+                [leadingIcon]="'search'"
+                [fullWidth]="true"
+                (mfInput)="onSearchChange($event)"
+              />
+            </div>
+          }
+        </header>
+      }
+
+      @if (filteredRows().length > 0) {
+        <div class="mf-table__surface">
+          <div class="mf-table__wrapper">
+            <table
+              mat-table
+              [dataSource]="paginatedRows()"
+              matSort
+              [matSortActive]="sortState().active"
+              [matSortDirection]="sortState().direction"
+              class="mf-table__table"
+              (matSortChange)="onSortChange($event)"
+            >
+              @for (column of visibleColumns(); track column.key) {
+                <ng-container [matColumnDef]="column.key">
+                  @if (column.sortable) {
+                    <th
+                      mat-header-cell
+                      *matHeaderCellDef
+                      mat-sort-header
+                      [style.width]="column.width || null"
+                      [class]="headerCellClasses(column)"
+                    >
+                      {{ column.header }}
+                    </th>
+                  } @else {
+                    <th
+                      mat-header-cell
+                      *matHeaderCellDef
+                      [style.width]="column.width || null"
+                      [class]="headerCellClasses(column)"
+                    >
+                      {{ column.header }}
+                    </th>
+                  }
+
+                  <td
+                    mat-cell
+                    *matCellDef="let row"
+                    [style.width]="column.width || null"
+                    [class]="cellClasses(column)"
+                  >
+                    @if (column.type === 'badge') {
+                      <span [class]="badgeClasses(column, row)">
+                        {{ renderCell(column, row) }}
+                      </span>
+                    } @else {
+                      <span class="mf-table__cell-text">
+                        {{ renderCell(column, row) }}
+                      </span>
+                    }
+                  </td>
+                </ng-container>
+              }
+
+              @if (hasActions()) {
+                <ng-container [matColumnDef]="actionColumnKey">
+                  <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    class="mf-table__actions-header"
+                  >
+                    {{ resolvedActionHeader() }}
+                  </th>
+                  <td
+                    mat-cell
+                    *matCellDef="let row"
+                    class="mf-table__actions-cell"
+                  >
+                    @if (usesActionMenu()) {
+                      <button
+                        mat-icon-button
+                        type="button"
+                        class="mf-table__action-menu-trigger"
+                        [matMenuTriggerFor]="actionMenu"
+                        [attr.aria-label]="getRowMenuAriaLabel(row)"
+                      >
+                        <mat-icon aria-hidden="true">more_horiz</mat-icon>
+                      </button>
+                      <mat-menu
+                        #actionMenu="matMenu"
+                        xPosition="before"
+                        class="mf-table__action-menu"
+                      >
+                        @for (action of resolvedActions(); track action.key) {
+                          <button
+                            mat-menu-item
+                            [disabled]="isActionDisabled(action, row)"
+                            [attr.aria-label]="getActionAriaLabel(action, row)"
+                            (click)="onActionClick(action, row)"
+                          >
+                            @if (action.icon) {
+                              <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
+                            }
+                            <span>{{ action.label }}</span>
+                          </button>
+                        }
+                      </mat-menu>
+                    } @else {
+                      <div class="mf-table__action-group">
+                        @for (action of resolvedActions(); track action.key) {
+                          <button
+                            mat-stroked-button
+                            type="button"
+                            [class]="actionClasses(action)"
+                            [disabled]="isActionDisabled(action, row)"
+                            [attr.aria-label]="getActionAriaLabel(action, row)"
+                            (click)="onActionClick(action, row)"
+                          >
+                            @if (action.icon) {
+                              <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
+                            }
+                            <span>{{ action.label }}</span>
+                          </button>
+                        }
+                      </div>
+                    }
+                  </td>
+                </ng-container>
+              }
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="displayedColumns(); sticky: stickyHeader()"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: displayedColumns()"
+                class="mf-table__row"
+              ></tr>
+            </table>
+          </div>
+
+          @if (showPaginator()) {
+            <footer class="mf-table__footer">
+              <mf-paginator
+                [length]="filteredRows().length"
+                [pageSize]="localPageSize()"
+                [pageIndex]="localPageIndex()"
+                [pageSizeOptions]="pageSizeOptions()"
+                [showFirstLastButtons]="showFirstLastButtons()"
+                [hidePageSize]="hidePageSize()"
+                (mfPageChange)="onPageChange($event)"
+              />
+            </footer>
+          }
+        </div>
+      } @else {
+        <div class="mf-table__empty">
+          <div class="mf-table__empty-icon">
+            <mat-icon aria-hidden="true">table_rows</mat-icon>
+          </div>
+          <h3 class="mf-table__empty-title">{{ emptyTitle() }}</h3>
+          <p class="mf-table__empty-description">{{ emptyDescriptionText() }}</p>
+        </div>
+      }
+    </section>
+  `, isInline: true, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$i.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$i.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$i.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$i.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$i.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$i.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$i.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$i.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$i.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$i.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$3.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$3.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$3.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$b.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i1$b.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$b.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MfInputComponent, selector: "mf-input", inputs: ["id", "label", "ariaLabel", "ariaLabelledby", "ariaDescribedby", "placeholder", "type", "size", "value", "disabled", "readonly", "required", "hint", "error", "leadingIcon", "trailingIcon", "fullWidth"], outputs: ["mfInput", "mfBlur"] }, { kind: "component", type: MfPaginatorComponent, selector: "mf-paginator", inputs: ["length", "pageSize", "pageIndex", "pageSizeOptions", "showFirstLastButtons", "hidePageSize"], outputs: ["mfPageChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-table', imports: [
+                        MatTableModule,
+                        MatSortModule,
+                        MatButtonModule,
+                        MatIconModule,
+                        MatMenuModule,
+                        MfInputComponent,
+                        MfPaginatorComponent,
+                    ], template: `
+    <section [class]="hostClasses()">
+      @if (showsToolbar()) {
+        <header class="mf-table__toolbar">
+          <div class="mf-table__intro">
+            @if (title()) {
+              <h2 class="mf-table__title">{{ title() }}</h2>
+            }
+            @if (description()) {
+              <p class="mf-table__description">{{ description() }}</p>
+            }
+            <div class="mf-table__meta">
+              <span class="mf-table__metric">{{ resultSummary() }}</span>
+              @if (searchTerm()) {
+                <span class="mf-table__metric mf-table__metric--accent">
+                  Filter active
+                </span>
+              }
+              @if (sortState().direction) {
+                <span class="mf-table__metric">
+                  Sorted by {{ sortState().active }}
+                </span>
+              }
+            </div>
+          </div>
+
+          @if (showSearch()) {
+            <div class="mf-table__search">
+              <mf-input
+                [label]="searchLabel()"
+                [ariaLabel]="searchLabel()"
+                [placeholder]="searchPlaceholder()"
+                [value]="localSearchTerm()"
+                [type]="'search'"
+                [leadingIcon]="'search'"
+                [fullWidth]="true"
+                (mfInput)="onSearchChange($event)"
+              />
+            </div>
+          }
+        </header>
+      }
+
+      @if (filteredRows().length > 0) {
+        <div class="mf-table__surface">
+          <div class="mf-table__wrapper">
+            <table
+              mat-table
+              [dataSource]="paginatedRows()"
+              matSort
+              [matSortActive]="sortState().active"
+              [matSortDirection]="sortState().direction"
+              class="mf-table__table"
+              (matSortChange)="onSortChange($event)"
+            >
+              @for (column of visibleColumns(); track column.key) {
+                <ng-container [matColumnDef]="column.key">
+                  @if (column.sortable) {
+                    <th
+                      mat-header-cell
+                      *matHeaderCellDef
+                      mat-sort-header
+                      [style.width]="column.width || null"
+                      [class]="headerCellClasses(column)"
+                    >
+                      {{ column.header }}
+                    </th>
+                  } @else {
+                    <th
+                      mat-header-cell
+                      *matHeaderCellDef
+                      [style.width]="column.width || null"
+                      [class]="headerCellClasses(column)"
+                    >
+                      {{ column.header }}
+                    </th>
+                  }
+
+                  <td
+                    mat-cell
+                    *matCellDef="let row"
+                    [style.width]="column.width || null"
+                    [class]="cellClasses(column)"
+                  >
+                    @if (column.type === 'badge') {
+                      <span [class]="badgeClasses(column, row)">
+                        {{ renderCell(column, row) }}
+                      </span>
+                    } @else {
+                      <span class="mf-table__cell-text">
+                        {{ renderCell(column, row) }}
+                      </span>
+                    }
+                  </td>
+                </ng-container>
+              }
+
+              @if (hasActions()) {
+                <ng-container [matColumnDef]="actionColumnKey">
+                  <th
+                    mat-header-cell
+                    *matHeaderCellDef
+                    class="mf-table__actions-header"
+                  >
+                    {{ resolvedActionHeader() }}
+                  </th>
+                  <td
+                    mat-cell
+                    *matCellDef="let row"
+                    class="mf-table__actions-cell"
+                  >
+                    @if (usesActionMenu()) {
+                      <button
+                        mat-icon-button
+                        type="button"
+                        class="mf-table__action-menu-trigger"
+                        [matMenuTriggerFor]="actionMenu"
+                        [attr.aria-label]="getRowMenuAriaLabel(row)"
+                      >
+                        <mat-icon aria-hidden="true">more_horiz</mat-icon>
+                      </button>
+                      <mat-menu
+                        #actionMenu="matMenu"
+                        xPosition="before"
+                        class="mf-table__action-menu"
+                      >
+                        @for (action of resolvedActions(); track action.key) {
+                          <button
+                            mat-menu-item
+                            [disabled]="isActionDisabled(action, row)"
+                            [attr.aria-label]="getActionAriaLabel(action, row)"
+                            (click)="onActionClick(action, row)"
+                          >
+                            @if (action.icon) {
+                              <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
+                            }
+                            <span>{{ action.label }}</span>
+                          </button>
+                        }
+                      </mat-menu>
+                    } @else {
+                      <div class="mf-table__action-group">
+                        @for (action of resolvedActions(); track action.key) {
+                          <button
+                            mat-stroked-button
+                            type="button"
+                            [class]="actionClasses(action)"
+                            [disabled]="isActionDisabled(action, row)"
+                            [attr.aria-label]="getActionAriaLabel(action, row)"
+                            (click)="onActionClick(action, row)"
+                          >
+                            @if (action.icon) {
+                              <mat-icon aria-hidden="true">{{ action.icon }}</mat-icon>
+                            }
+                            <span>{{ action.label }}</span>
+                          </button>
+                        }
+                      </div>
+                    }
+                  </td>
+                </ng-container>
+              }
+
+              <tr
+                mat-header-row
+                *matHeaderRowDef="displayedColumns(); sticky: stickyHeader()"
+              ></tr>
+              <tr
+                mat-row
+                *matRowDef="let row; columns: displayedColumns()"
+                class="mf-table__row"
+              ></tr>
+            </table>
+          </div>
+
+          @if (showPaginator()) {
+            <footer class="mf-table__footer">
+              <mf-paginator
+                [length]="filteredRows().length"
+                [pageSize]="localPageSize()"
+                [pageIndex]="localPageIndex()"
+                [pageSizeOptions]="pageSizeOptions()"
+                [showFirstLastButtons]="showFirstLastButtons()"
+                [hidePageSize]="hidePageSize()"
+                (mfPageChange)="onPageChange($event)"
+              />
+            </footer>
+          }
+        </div>
+      } @else {
+        <div class="mf-table__empty">
+          <div class="mf-table__empty-icon">
+            <mat-icon aria-hidden="true">table_rows</mat-icon>
+          </div>
+          <h3 class="mf-table__empty-title">{{ emptyTitle() }}</h3>
+          <p class="mf-table__empty-description">{{ emptyDescriptionText() }}</p>
+        </div>
+      }
+    </section>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-table{border-radius:var(--mf-radius-xl);border:1px solid color-mix(in srgb,var(--mf-color-border) 70%,white);background:linear-gradient(180deg,#fffffffa,#f7fafcf5),linear-gradient(135deg,var(--mf-color-primary-50),var(--mf-color-neutral-0));box-shadow:var(--mf-shadow-lg);overflow:hidden}.mf-table__toolbar{display:grid;gap:var(--mf-space-4);padding:var(--mf-space-6);background:radial-gradient(circle at top left,rgb(20 184 166 / .08),transparent 45%),linear-gradient(135deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__intro{display:grid;gap:var(--mf-space-2)}.mf-table__title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-2xl);font-weight:var(--mf-weight-bold);line-height:var(--mf-leading-tight);color:var(--mf-color-neutral-900)}.mf-table__description{max-width:70ch;margin:0;color:var(--mf-color-neutral-600)}.mf-table__meta{display:flex;flex-wrap:wrap;gap:var(--mf-space-2)}.mf-table__metric{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid var(--mf-color-border);background-color:#ffffffc7;color:var(--mf-color-neutral-600);font-size:var(--mf-text-sm);font-weight:var(--mf-weight-medium)}.mf-table__metric--accent{border-color:color-mix(in srgb,var(--mf-color-brand) 35%,white);background-color:var(--mf-color-brand-light);color:var(--mf-color-brand)}.mf-table__search{width:100%;max-width:none}.mf-table__surface{display:grid;gap:var(--mf-space-4);padding:0 var(--mf-space-4) var(--mf-space-4)}.mf-table__wrapper{overflow-x:auto;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg);background-color:#ffffffb3}.mf-table__table,.mf-table .mat-mdc-table{width:100%;min-width:720px;background:transparent!important;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-row{background-color:#f7fafcf0!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-bold)!important;letter-spacing:.03em;text-transform:uppercase;color:var(--mf-color-neutral-600)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important;border-bottom-width:1px!important}.mf-table .mat-mdc-cell{font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-on-surface)!important;background-color:transparent!important;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:#f0fdfad1!important}.mf-table .mat-mdc-row:last-child .mat-mdc-cell{border-bottom:none!important}.mf-table__header-cell,.mf-table__cell{padding-right:var(--mf-space-4)!important;padding-left:var(--mf-space-4)!important}.mf-table--compact .mf-table__header-cell,.mf-table--compact .mf-table__cell{padding-top:var(--mf-space-2)!important;padding-bottom:var(--mf-space-2)!important}.mf-table--comfortable .mf-table__header-cell,.mf-table--comfortable .mf-table__cell{padding-top:var(--mf-space-3)!important;padding-bottom:var(--mf-space-3)!important}.mf-table--spacious .mf-table__header-cell,.mf-table--spacious .mf-table__cell{padding-top:var(--mf-space-4)!important;padding-bottom:var(--mf-space-4)!important}.mf-table__cell-text{display:block}.mf-table__cell--truncate .mf-table__cell-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mf-table__cell--align-start{text-align:left}.mf-table__cell--align-center{text-align:center}.mf-table__cell--align-end{text-align:right}.mf-table__badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 var(--mf-space-3);border-radius:var(--mf-radius-full);border:1px solid transparent;font-size:var(--mf-text-xs);font-weight:var(--mf-weight-bold);letter-spacing:.02em;white-space:nowrap}.mf-table__badge--brand{background-color:var(--mf-color-brand-light);border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white);color:var(--mf-color-brand)}.mf-table__badge--success{background-color:#dcfce7e6;border-color:#22c55e47;color:#15803d}.mf-table__badge--warning{background-color:#fef3c7f2;border-color:#f59e0b52;color:#b45309}.mf-table__badge--error{background-color:#fee2e2f2;border-color:#dc262647;color:var(--mf-color-error-700)}.mf-table__badge--neutral{background-color:var(--mf-color-neutral-100);border-color:var(--mf-color-border);color:var(--mf-color-neutral-600)}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:#f8fafceb}.mf-table--bordered .mat-mdc-cell,.mf-table--bordered .mat-mdc-header-cell{border-right:1px solid var(--mf-color-border)!important}.mf-table--bordered .mat-mdc-cell:last-child,.mf-table--bordered .mat-mdc-header-cell:last-child{border-right:none!important}.mf-table .mat-sort-header-arrow{color:var(--mf-color-brand)!important}.mf-table__actions-header,.mf-table__actions-cell{width:1%;white-space:nowrap}.mf-table__action-group{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--mf-space-4)}.mf-table__action{min-width:0!important;display:inline-flex!important;align-items:center;gap:var(--mf-space-2);border-radius:var(--mf-radius-full)!important;font-family:var(--mf-font-base)!important;font-size:var(--mf-text-sm)!important;font-weight:var(--mf-weight-medium)!important}.mf-table__action-menu-trigger{display:inline-flex!important;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-full)!important;background-color:#ffffffe0!important;color:var(--mf-color-neutral-600)!important}.mf-table__action-menu-trigger:hover{background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action-menu-trigger .mat-icon{margin:0;width:20px;height:20px;font-size:20px}.mf-table__action .mat-icon{margin:0;width:18px;height:18px;font-size:18px}.mf-table__action--primary{border-color:color-mix(in srgb,var(--mf-color-brand) 30%,white)!important;background-color:var(--mf-color-brand-light)!important;color:var(--mf-color-brand)!important}.mf-table__action--neutral{border-color:var(--mf-color-border)!important;background-color:#ffffffe6!important;color:var(--mf-color-neutral-600)!important}.mf-table__action--danger{border-color:#dc262633!important;background-color:#fef2f2eb!important;color:var(--mf-color-error-700)!important}.mf-table__footer{padding:0 var(--mf-space-2) var(--mf-space-2);border-top:1px solid var(--mf-color-border);background-color:#ffffffb8;border:1px solid var(--mf-color-border);border-radius:var(--mf-radius-lg)}.mf-table__empty{display:grid;justify-items:center;gap:var(--mf-space-3);padding:var(--mf-space-12) var(--mf-space-6);text-align:center;background:radial-gradient(circle at top,rgb(20 184 166 / .08),transparent 38%),linear-gradient(180deg,var(--mf-color-neutral-0),var(--mf-color-primary-50))}.mf-table__empty-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;border:1px solid color-mix(in srgb,var(--mf-color-brand) 18%,white);background-color:#ffffffe0;color:var(--mf-color-brand);box-shadow:var(--mf-shadow-md)}.mf-table__empty-icon .mat-icon{width:30px;height:30px;font-size:30px}.mf-table__empty-title{margin:0;font-family:var(--mf-font-display);font-size:var(--mf-text-xl);color:var(--mf-color-neutral-900)}.mf-table__empty-description{max-width:56ch;margin:0;color:var(--mf-color-neutral-600)}@media(max-width:720px){.mf-table__toolbar{padding:var(--mf-space-4)}.mf-table__search{max-width:none}.mf-table__surface{padding-right:var(--mf-space-4);padding-left:var(--mf-space-4)}.mf-table__footer{padding-right:var(--mf-space-2);padding-left:var(--mf-space-2)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], showPaginator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPaginator", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }], pageIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageIndex", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], showFirstLastButtons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFirstLastButtons", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], rowActionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionLabel", required: false }] }], rowActionHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionHeader", required: false }] }], rowActionAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActionAriaLabel", required: false }] }], rowActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowActions", required: false }] }], mfSortChange: [{ type: i0.Output, args: ["mfSortChange"] }], mfSearchChange: [{ type: i0.Output, args: ["mfSearchChange"] }], mfPageChange: [{ type: i0.Output, args: ["mfPageChange"] }], mfAction: [{ type: i0.Output, args: ["mfAction"] }], mfRowAction: [{ type: i0.Output, args: ["mfRowAction"] }], mfRowClick: [{ type: i0.Output, args: ["mfRowClick"] }] } });
+
+/**
+ * Tabs de la librería ng-comps.
+ * Envuelve Angular Material `mat-tab-group` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfTabsComponent {
+    /** Pestañas */
+    tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
+    /** Índice seleccionado */
+    selectedIndex = input(0, ...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    mfSelectedIndexChange = output();
+    hostClasses = computed(() => {
+        return ['mf-tabs', `mf-tabs--${this.variant()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfTabsComponent, isStandalone: true, selector: "mf-tabs", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, selectedIndex: { classPropertyName: "selectedIndex", publicName: "selectedIndex", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfSelectedIndexChange: "mfSelectedIndexChange" }, ngImport: i0, template: `
+    <mat-tab-group
+      [selectedIndex]="selectedIndex()"
+      [class]="hostClasses()"
+      [mat-stretch-tabs]="variant() === 'stretched'"
+      (selectedIndexChange)="mfSelectedIndexChange.emit($event)"
+    >
+      @for (tab of tabs(); track tab.label) {
+        <mat-tab [disabled]="tab.disabled ?? false">
+          <ng-template mat-tab-label>
+            @if (tab.icon) {
+              <mat-icon class="mf-tabs__icon" aria-hidden="true">{{ tab.icon }}</mat-icon>
+            }
+            {{ tab.label }}
+          </ng-template>
+        </mat-tab>
+      }
+    </mat-tab-group>
+  `, isInline: true, styles: [":host{display:block}.mf-tabs .mat-mdc-tab-header{border-bottom:1px solid var(--mf-color-border)!important}.mf-tabs .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mf-color-neutral-400)!important;font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-medium)!important}.mf-tabs .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mf-color-brand)!important;font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important}.mf-tabs .mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mf-color-brand)!important}.mf-tabs__icon{margin-right:var(--mf-space-2);font-size:1.1em;height:1.1em;width:1.1em;vertical-align:middle}\n"], dependencies: [{ kind: "ngmodule", type: MatTabsModule }, { kind: "directive", type: i1$j.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1$j.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$j.MatTabGroup, selector: "mat-tab-group", inputs: ["color", "fitInkBarToContent", "mat-stretch-tabs", "mat-align-tabs", "dynamicHeight", "selectedIndex", "headerPosition", "animationDuration", "contentTabIndex", "disablePagination", "disableRipple", "preserveContent", "backgroundColor", "aria-label", "aria-labelledby"], outputs: ["selectedIndexChange", "focusChange", "animationDone", "selectedTabChange"], exportAs: ["matTabGroup"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i2.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tabs', imports: [MatTabsModule, MatIconModule], template: `
+    <mat-tab-group
+      [selectedIndex]="selectedIndex()"
+      [class]="hostClasses()"
+      [mat-stretch-tabs]="variant() === 'stretched'"
+      (selectedIndexChange)="mfSelectedIndexChange.emit($event)"
+    >
+      @for (tab of tabs(); track tab.label) {
+        <mat-tab [disabled]="tab.disabled ?? false">
+          <ng-template mat-tab-label>
+            @if (tab.icon) {
+              <mat-icon class="mf-tabs__icon" aria-hidden="true">{{ tab.icon }}</mat-icon>
+            }
+            {{ tab.label }}
+          </ng-template>
+        </mat-tab>
+      }
+    </mat-tab-group>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-tabs .mat-mdc-tab-header{border-bottom:1px solid var(--mf-color-border)!important}.mf-tabs .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mf-color-neutral-400)!important;font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-medium)!important}.mf-tabs .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mf-color-brand)!important;font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important}.mf-tabs .mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mf-color-brand)!important}.mf-tabs__icon{margin-right:var(--mf-space-2);font-size:1.1em;height:1.1em;width:1.1em;vertical-align:middle}\n"] }]
+        }], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], selectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedIndex", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], mfSelectedIndexChange: [{ type: i0.Output, args: ["mfSelectedIndexChange"] }] } });
+
+/**
+ * Textarea de la librería ng-comps.
+ * Envuelve Angular Material `matInput` con textarea y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfTextareaComponent {
+    cdr = inject(ChangeDetectorRef);
+    ngControl = inject(NgControl, { self: true, optional: true });
+    generatedId = createUniqueId('mf-textarea');
+    disabledFromForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledFromForm" }] : /* istanbul ignore next */ []));
+    internalValue = signal('', ...(ngDevMode ? [{ debugName: "internalValue" }] : /* istanbul ignore next */ []));
+    onControlChange = () => undefined;
+    onControlTouched = () => undefined;
+    errorStateMatcher = {
+        isErrorState: (control) => Boolean(this.error() || (control?.invalid && (control.touched || control.dirty))),
+    };
+    /** ID del control */
+    id = input(undefined, ...(ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []));
+    /** Etiqueta */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible alternativa cuando no existe label visible */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos que etiquetan el control */
+    ariaLabelledby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /** Referencia externa a elementos descriptivos adicionales */
+    ariaDescribedby = input(undefined, ...(ngDevMode ? [{ debugName: "ariaDescribedby" }] : /* istanbul ignore next */ []));
+    /** Placeholder */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    /** Valor */
+    value = input('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Filas visibles */
+    rows = input(4, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    /** Tamaño */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Máximo de caracteres */
+    maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Solo lectura */
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    /** Requerido */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Mensaje de error */
+    error = input(undefined, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    /** Resize */
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    mfInput = output();
+    mfBlur = output();
+    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.');
+            }
+        });
+    }
+    controlId = computed(() => this.id() ?? this.generatedId, ...(ngDevMode ? [{ debugName: "controlId" }] : /* istanbul ignore next */ []));
+    hintId = computed(() => this.hint() ? `${this.controlId()}-hint` : null, ...(ngDevMode ? [{ debugName: "hintId" }] : /* istanbul ignore next */ []));
+    errorId = computed(() => this.error() ? `${this.controlId()}-error` : null, ...(ngDevMode ? [{ debugName: "errorId" }] : /* istanbul ignore next */ []));
+    counterId = computed(() => this.maxLength() ? `${this.controlId()}-count` : null, ...(ngDevMode ? [{ debugName: "counterId" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => mergeAriaIds(this.ariaDescribedby(), this.hintId(), this.errorId(), this.counterId()), ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    resolvedAriaLabel = computed(() => this.label() ? null : this.ariaLabel() ?? null, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.disabledFromForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    currentLength = computed(() => this.internalValue().length, ...(ngDevMode ? [{ debugName: "currentLength" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return [
+            'mf-textarea',
+            `mf-textarea--${this.size()}`,
+            `mf-textarea--resize-${this.resize()}`,
+        ].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    writeValue(value) {
+        this.internalValue.set(value ?? '');
+        this.cdr.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.onControlChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onControlTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabledFromForm.set(isDisabled);
+        this.cdr.markForCheck();
+    }
+    isInvalid() {
+        const control = this.ngControl?.control;
+        return Boolean(this.error() || (control?.invalid && (control.touched || control.dirty)));
+    }
+    onInput(event) {
+        const value = event.target.value;
+        this.internalValue.set(value);
+        this.onControlChange(value);
+        this.mfInput.emit(value);
+    }
+    onBlur() {
+        this.onControlTouched();
+        this.mfBlur.emit();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfTextareaComponent, isStandalone: true, selector: "mf-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfInput: "mfInput", mfBlur: "mfBlur" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => MfTextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, 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>
+    }
+  `, isInline: true, styles: [":host{display:block}.mf-textarea.mat-mdc-form-field{font-family:var(--mf-font-base)!important;width:100%}.mf-textarea textarea.mat-mdc-input-element{font-family:var(--mf-font-base)!important;line-height:var(--mf-leading-normal)!important}.mf-textarea .mdc-notched-outline__leading,.mf-textarea .mdc-notched-outline__notch,.mf-textarea .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important}.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important}.mf-textarea .mdc-notched-outline{border-radius:var(--mf-radius-md)!important}.mf-textarea--sm textarea.mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-textarea--md textarea.mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-textarea--lg textarea.mat-mdc-input-element{font-size:var(--mf-text-lg)!important}.mf-textarea--resize-none textarea{resize:none}.mf-textarea--resize-vertical textarea{resize:vertical}.mf-textarea--resize-horizontal textarea{resize:horizontal}.mf-textarea--resize-both textarea{resize:both}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-textarea.mat-mdc-form-field{font-family:var(--mf-font-base)!important;width:100%}.mf-textarea textarea.mat-mdc-input-element{font-family:var(--mf-font-base)!important;line-height:var(--mf-leading-normal)!important}.mf-textarea .mdc-notched-outline__leading,.mf-textarea .mdc-notched-outline__notch,.mf-textarea .mdc-notched-outline__trailing{border-color:var(--mf-color-border)!important}.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,.mf-textarea.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing{border-color:var(--mf-color-brand)!important}.mf-textarea .mdc-notched-outline{border-radius:var(--mf-radius-md)!important}.mf-textarea--sm textarea.mat-mdc-input-element{font-size:var(--mf-text-sm)!important}.mf-textarea--md textarea.mat-mdc-input-element{font-size:var(--mf-text-base)!important}.mf-textarea--lg textarea.mat-mdc-input-element{font-size:var(--mf-text-lg)!important}.mf-textarea--resize-none textarea{resize:none}.mf-textarea--resize-vertical textarea{resize:vertical}.mf-textarea--resize-horizontal textarea{resize:horizontal}.mf-textarea--resize-both textarea{resize:both}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaDescribedby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaDescribedby", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], resize: [{ type: i0.Input, args: [{ isSignal: true, alias: "resize", required: false }] }], mfInput: [{ type: i0.Output, args: ["mfInput"] }], mfBlur: [{ type: i0.Output, args: ["mfBlur"] }] } });
+
+/**
+ * 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.
+ */
+class MfToolbarComponent {
+    /** Título que se muestra en la toolbar */
+    title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('surface', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Muestra borde inferior */
+    bordered = input(true, ...(ngDevMode ? [{ debugName: "bordered" }] : /* istanbul ignore next */ []));
+    /** Toolbar fija en la parte superior */
+    sticky = input(false, ...(ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []));
+    /** Elevación sutil */
+    elevated = input(false, ...(ngDevMode ? [{ debugName: "elevated" }] : /* istanbul ignore next */ []));
+    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(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: MfToolbarComponent, isStandalone: true, selector: "mf-toolbar", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, elevated: { classPropertyName: "elevated", publicName: "elevated", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, 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>
+  `, isInline: true, styles: [":host{display:block}.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)}.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}.mf-toolbar--bordered.mat-toolbar{border-bottom:1px solid var(--mf-color-border)}.mf-toolbar--brand.mf-toolbar--bordered.mat-toolbar{border-bottom-color:#ffffff26}.mf-toolbar--sticky.mat-toolbar{position:sticky;top:0;z-index:1000}.mf-toolbar--elevated.mat-toolbar{box-shadow:var(--mf-shadow-sm)!important}.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)}.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:-.01em}\n"], dependencies: [{ kind: "ngmodule", type: MatToolbarModule }, { kind: "component", type: i1$k.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ 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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.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)}.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}.mf-toolbar--bordered.mat-toolbar{border-bottom:1px solid var(--mf-color-border)}.mf-toolbar--brand.mf-toolbar--bordered.mat-toolbar{border-bottom-color:#ffffff26}.mf-toolbar--sticky.mat-toolbar{position:sticky;top:0;z-index:1000}.mf-toolbar--elevated.mat-toolbar{box-shadow:var(--mf-shadow-sm)!important}.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)}.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:-.01em}\n"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], elevated: [{ type: i0.Input, args: [{ isSignal: true, alias: "elevated", required: false }] }] } });
+
+class MfTooltipDirective {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.4", type: MfTooltipDirective, isStandalone: true, selector: "[mfTooltip]", hostDirectives: [{ directive: i1$l.MatTooltip, inputs: ["matTooltip", "mfTooltip", "matTooltipPosition", "mfTooltipPosition", "matTooltipDisabled", "mfTooltipDisabled", "matTooltipShowDelay", "mfTooltipShowDelay", "matTooltipHideDelay", "mfTooltipHideDelay"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTooltipDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mfTooltip]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: MatTooltip,
+                            inputs: [
+                                'matTooltip: mfTooltip',
+                                'matTooltipPosition: mfTooltipPosition',
+                                'matTooltipDisabled: mfTooltipDisabled',
+                                'matTooltipShowDelay: mfTooltipShowDelay',
+                                'matTooltipHideDelay: mfTooltipHideDelay',
+                            ],
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Tooltip de la librería ng-comps.
+ * Envuelve Angular Material `matTooltip` y expone una API uniforme
+ * con look and feel de marca.
+ */
+class MfTooltipComponent {
+    /** Texto del tooltip */
+    text = input.required(...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+    /** Posición del tooltip */
+    position = input('above', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Delay para mostrar (ms) */
+    showDelay = input(200, ...(ngDevMode ? [{ debugName: "showDelay" }] : /* istanbul ignore next */ []));
+    /** Delay para ocultar (ms) */
+    hideDelay = input(0, ...(ngDevMode ? [{ debugName: "hideDelay" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return ['mf-tooltip', `mf-tooltip--${this.position()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: MfTooltipComponent, isStandalone: true, selector: "mf-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: true, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, showDelay: { classPropertyName: "showDelay", publicName: "showDelay", isSignal: true, isRequired: false, transformFunction: null }, hideDelay: { classPropertyName: "hideDelay", publicName: "hideDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span
+      [mfTooltip]="text()"
+      [mfTooltipPosition]="position()"
+      [mfTooltipDisabled]="disabled()"
+      [mfTooltipShowDelay]="showDelay()"
+      [mfTooltipHideDelay]="hideDelay()"
+      [class]="hostClasses()"
+    >
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [":host{display:inline-block}.mf-tooltip{cursor:default}\n"], dependencies: [{ kind: "directive", type: MfTooltipDirective, selector: "[mfTooltip]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: MfTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mf-tooltip', imports: [MfTooltipDirective], template: `
+    <span
+      [mfTooltip]="text()"
+      [mfTooltipPosition]="position()"
+      [mfTooltipDisabled]="disabled()"
+      [mfTooltipShowDelay]="showDelay()"
+      [mfTooltipHideDelay]="hideDelay()"
+      [class]="hostClasses()"
+    >
+      <ng-content />
+    </span>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-tooltip{cursor:default}\n"] }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], showDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelay", required: false }] }], hideDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDelay", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MfAccordionComponent, MfAlertComponent, MfAutocompleteComponent, MfAvatarComponent, MfBadgeComponent, MfBreadcrumbComponent, MfButtonComponent, MfCardComponent, MfCheckboxComponent, MfChipComponent, MfDatepickerComponent, MfDialogComponent, MfDialogService, MfDividerComponent, MfFormFieldComponent, MfGridListComponent, MfIconComponent, MfInputComponent, MfMenuComponent, MfPaginatorComponent, MfProgressBarComponent, MfProgressSpinnerComponent, MfRadioButtonComponent, MfSelectComponent, MfSidenavComponent, MfSlideToggleComponent, MfSnackbarService, MfTableComponent, MfTabsComponent, MfTextareaComponent, MfToolbarComponent, MfTooltipComponent, MfTooltipDirective };
+//# sourceMappingURL=ng-comps.mjs.map