ng-comps 0.2.0

package/fesm2022/ng-comps.mjs

@@ -0,0 +1,2479 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component, output, effect, signal, inject, Injectable } from '@angular/core';
+import * as i1 from '@angular/material/expansion';
+import { MatExpansionModule } from '@angular/material/expansion';
+import * as i1$1 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
+import * as i1$2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i2 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i1$3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i5 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i1$4 from '@angular/material/badge';
+import { MatBadgeModule } from '@angular/material/badge';
+import * as i1$5 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i1$6 from '@angular/material/card';
+import { MatCardModule } from '@angular/material/card';
+import * as i1$7 from '@angular/material/checkbox';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import * as i1$8 from '@angular/material/chips';
+import { MatChipsModule } from '@angular/material/chips';
+import * as i1$9 from '@angular/material/datepicker';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import * as i1$a from '@angular/material/divider';
+import { MatDividerModule } from '@angular/material/divider';
+import * as i1$b from '@angular/material/grid-list';
+import { MatGridListModule } from '@angular/material/grid-list';
+import * as i1$c from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
+import * as i1$d from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import * as i1$e from '@angular/material/progress-bar';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import * as i1$f from '@angular/material/progress-spinner';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import * as i1$g from '@angular/material/radio';
+import { MatRadioModule } from '@angular/material/radio';
+import * as i2$1 from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import * as i1$h from '@angular/material/sidenav';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import * as i1$i from '@angular/material/slide-toggle';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import * as i1$j from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import * as i2$2 from '@angular/material/sort';
+import { MatSortModule } from '@angular/material/sort';
+import * as i1$k from '@angular/material/tabs';
+import { MatTabsModule } from '@angular/material/tabs';
+import * as i1$l from '@angular/material/toolbar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import * as i1$m from '@angular/material/tooltip';
+import { MatTooltipModule } 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]="'Cerrar alerta'"
+        >
+          <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: i1$1.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]="'Cerrar alerta'"
+        >
+          <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"] }] } });
+
+/**
+ * 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 {
+    /** Lista completa de opciones */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    /** 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();
+    inputValue = '';
+    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.inputValue.toLowerCase().trim();
+        if (!query)
+            return this.options();
+        return this.options().filter((o) => o.label.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.inputValue = this.value();
+        });
+    }
+    onInputChange(value) {
+        this.mfInput.emit(value);
+    }
+    onOptionSelected(event) {
+        const label = event.option.value;
+        const match = this.options().find((o) => o.label === label);
+        if (match) {
+            this.mfOptionSelected.emit(match);
+        }
+    }
+    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 }, label: { classPropertyName: "label", publicName: "label", 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 }, 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" }, 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
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [matAutocomplete]="auto"
+        [(ngModel)]="inputValue"
+        (ngModelChange)="onInputChange($event)"
+        (blur)="mfBlur.emit()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+      <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>
+  `, 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: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.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: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: [
+                        FormsModule,
+                        MatAutocompleteModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                    ], 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
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [matAutocomplete]="auto"
+        [(ngModel)]="inputValue"
+        (ngModelChange)="onInputChange($event)"
+        (blur)="mfBlur.emit()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+      <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>
+  `, 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 }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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 */ []));
+    /** Tamaño */
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Forma */
+    variant = input('circle', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    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 */ []));
+    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 }, 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]="alt()"
+        [class]="hostClasses()"
+      />
+    } @else {
+      <span [class]="hostClasses()" [attr.aria-label]="alt()">
+        {{ 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]="alt()"
+        [class]="hostClasses()"
+      />
+    } @else {
+      <span [class]="hostClasses()" [attr.aria-label]="alt()">
+        {{ 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"] }]
+        }], 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 }] }], 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 */ []));
+    /** 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 */ []));
+    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 }, 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()"
+      [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$4.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()"
+      [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"] }]
+        }], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", 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: i1$1.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 {
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    mfClick = output();
+    hostClasses = computed(() => {
+        const classes = ['mf-btn', `mf-btn--${this.variant()}`, `mf-btn--${this.size()}`];
+        if (this.fullWidth())
+            classes.push('mf-btn--full');
+        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: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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 } }, outputs: { mfClick: "mfClick" }, ngImport: i0, template: `
+    @if (variant() === 'filled') {
+      <button
+        mat-flat-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <span>{{ label() }}</span>
+        @if (trailingIcon()) {
+          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+        }
+      </button>
+    } @else if (variant() === 'outlined') {
+      <button
+        mat-stroked-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <span>{{ label() }}</span>
+        @if (trailingIcon()) {
+          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+        }
+      </button>
+    } @else {
+      <button
+        mat-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <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--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--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[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}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$5.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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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 (variant() === 'filled') {
+      <button
+        mat-flat-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <span>{{ label() }}</span>
+        @if (trailingIcon()) {
+          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+        }
+      </button>
+    } @else if (variant() === 'outlined') {
+      <button
+        mat-stroked-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <span>{{ label() }}</span>
+        @if (trailingIcon()) {
+          <mat-icon aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+        }
+      </button>
+    } @else {
+      <button
+        mat-button
+        [type]="type()"
+        [disabled]="disabled()"
+        [class]="hostClasses()"
+        (click)="mfClick.emit($event)"
+      >
+        @if (leadingIcon()) {
+          <mat-icon aria-hidden="true">{{ leadingIcon() }}</mat-icon>
+        }
+        <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--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--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[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}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], 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 }] }], 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$6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$6.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i1$6.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i1$6.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i1$6.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 {
+    /** Texto del checkbox */
+    label = input.required(...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    mfChange = output();
+    hostClasses = computed(() => {
+        const classes = ['mf-checkbox'];
+        if (this.disabled())
+            classes.push('mf-checkbox--disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.mfChange.emit(event.checked);
+    }
+    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.1.0", version: "21.2.4", type: MfCheckboxComponent, isStandalone: true, selector: "mf-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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 } }, outputs: { mfChange: "mfChange" }, ngImport: i0, template: `
+    <mat-checkbox
+      [checked]="checked()"
+      [disabled]="disabled()"
+      [indeterminate]="indeterminate()"
+      [class]="hostClasses()"
+      (change)="onChange($event)"
+    >
+      {{ label() }}
+    </mat-checkbox>
+  `, isInline: true, styles: [":host{display:inline-block}.mf-checkbox{font-family:var(--mf-font-base)!important}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$7.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], template: `
+    <mat-checkbox
+      [checked]="checked()"
+      [disabled]="disabled()"
+      [indeterminate]="indeterminate()"
+      [class]="hostClasses()"
+      (change)="onChange($event)"
+    >
+      {{ label() }}
+    </mat-checkbox>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.mf-checkbox{font-family:var(--mf-font-base)!important}.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}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], 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 }] }], 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]="'Eliminar ' + 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$8.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$8.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i1$8.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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]="'Eliminar ' + 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 {
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    /** 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 */ []));
+    mfChange = output();
+    mfBlur = output();
+    currentValue = signal(null, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.currentValue.set(this.value());
+        });
+    }
+    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 */ []));
+    onDateChange(event) {
+        this.currentValue.set(event.value);
+        this.mfChange.emit(event.value);
+    }
+    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: { label: { classPropertyName: "label", publicName: "label", 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 }, 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 } }, outputs: { mfChange: "mfChange", mfBlur: "mfBlur" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <input
+        matInput
+        [matDatepicker]="picker"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [min]="min()"
+        [max]="max()"
+        [ngModel]="currentValue()"
+        (dateChange)="onDateChange($event)"
+        (blur)="mfBlur.emit()"
+      />
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="disabled()">
+        <mat-icon matDatepickerToggleIcon aria-hidden="true">calendar_month</mat-icon>
+      </mat-datepicker-toggle>
+      <mat-datepicker #picker />
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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$9.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i1$9.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i1$9.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i1$9.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i1$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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,
+                        FormsModule,
+                    ], template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <input
+        matInput
+        [matDatepicker]="picker"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [min]="min()"
+        [max]="max()"
+        [ngModel]="currentValue()"
+        (dateChange)="onDateChange($event)"
+        (blur)="mfBlur.emit()"
+      />
+      <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="disabled()">
+        <mat-icon matDatepickerToggleIcon aria-hidden="true">calendar_month</mat-icon>
+      </mat-datepicker-toggle>
+      <mat-datepicker #picker />
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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 }] }], 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,
+    });
+    /** Título del diálogo */
+    title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* 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 */ []));
+    mfClose = output();
+    hostClasses = computed(() => {
+        return '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: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, 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 } }, outputs: { mfClose: "mfClose" }, ngImport: i0, template: `
+    <div [class]="hostClasses()">
+      <div class="mf-dialog__header">
+        <h2 class="mf-dialog__title">{{ title() }}</h2>
+        @if (showClose()) {
+          <button
+            class="mf-dialog__close"
+            (click)="onClose()"
+            aria-label="Cerrar diálogo"
+            type="button"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+
+      @if (message()) {
+        <div class="mf-dialog__body">
+          <p class="mf-dialog__message">{{ message() }}</p>
+        </div>
+      }
+
+      <div class="mf-dialog__content">
+        <ng-content />
+      </div>
+
+      @if (showActions()) {
+        <div 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;padding:var(--mf-space-6) var(--mf-space-6) var(--mf-space-3)}.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{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--mf-radius-sm, 6px);color:var(--mf-color-neutral-400);cursor:pointer;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: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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()">
+      <div class="mf-dialog__header">
+        <h2 class="mf-dialog__title">{{ title() }}</h2>
+        @if (showClose()) {
+          <button
+            class="mf-dialog__close"
+            (click)="onClose()"
+            aria-label="Cerrar diálogo"
+            type="button"
+          >
+            <mat-icon>close</mat-icon>
+          </button>
+        }
+      </div>
+
+      @if (message()) {
+        <div class="mf-dialog__body">
+          <p class="mf-dialog__message">{{ message() }}</p>
+        </div>
+      }
+
+      <div class="mf-dialog__content">
+        <ng-content />
+      </div>
+
+      @if (showActions()) {
+        <div 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;padding:var(--mf-space-6) var(--mf-space-6) var(--mf-space-3)}.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{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;border-radius:var(--mf-radius-sm, 6px);color:var(--mf-color-neutral-400);cursor:pointer;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"] }]
+        }], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], 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 }] }], mfClose: [{ type: i0.Output, args: ["mfClose"] }] } });
+
+/**
+ * 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$a.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 */ []));
+    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"] }]
+        }], 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$b.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i1$b.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i1$b.MatGridTileText, selector: "mat-grid-tile-header, mat-grid-tile-footer" }, { kind: "directive", type: i1$b.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: i1$1.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 {
+    /** Etiqueta flotante del campo */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    /** 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();
+    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 */ []));
+    onInput(event) {
+        const target = event.target;
+        this.mfInput.emit(target.value);
+    }
+    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: { label: { classPropertyName: "label", publicName: "label", 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 }, 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" }, 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
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="mfBlur.emit()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.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: i1$1.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], 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
+        [type]="type()"
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="mfBlur.emit()"
+      />
+      @if (trailingIcon()) {
+        <mat-icon matSuffix aria-hidden="true">{{ trailingIcon() }}</mat-icon>
+      }
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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('Abrir menú', ...(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$c.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$c.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i1$c.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$5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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$d.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 */ []));
+    /** 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 */ []));
+    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 }, 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" [attr.aria-label]="label() || null">
+      @if (label()) {
+        <span class="mf-progress-bar__label">{{ label() }}</span>
+      }
+      <mat-progress-bar
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [bufferValue]="bufferValue()"
+      />
+      @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$e.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" [attr.aria-label]="label() || null">
+      @if (label()) {
+        <span class="mf-progress-bar__label">{{ label() }}</span>
+      }
+      <mat-progress-bar
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [bufferValue]="bufferValue()"
+      />
+      @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"] }]
+        }], 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 }] }], 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 */ []));
+    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 } }, ngImport: i0, template: `
+    <div [class]="wrapperClasses()" [attr.aria-label]="label() || 'Cargando'">
+      <mat-progress-spinner
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [diameter]="diameter()"
+        [strokeWidth]="strokeWidth()"
+      />
+      @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$f.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()" [attr.aria-label]="label() || 'Cargando'">
+      <mat-progress-spinner
+        [class]="hostClasses()"
+        [mode]="mode()"
+        [value]="value()"
+        [diameter]="diameter()"
+        [strokeWidth]="strokeWidth()"
+      />
+      @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"] }]
+        }], 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 }] }] } });
+
+/**
+ * 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 {
+    /** Opciones del grupo */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Valor seleccionado */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Dirección del grupo */
+    direction = input('vertical', ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
+    /** Etiqueta accesible para el grupo */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    currentValue = signal(undefined, ...(ngDevMode ? [{ debugName: "currentValue" }] : /* istanbul ignore next */ []));
+    constructor() {
+        effect(() => {
+            this.currentValue.set(this.value());
+        });
+    }
+    hostClasses = computed(() => {
+        return `mf-radio mf-radio--${this.direction()}`;
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.currentValue.set(event.value);
+        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 }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 } }, outputs: { mfChange: "mfChange" }, ngImport: i0, template: `
+    <mat-radio-group
+      [class]="hostClasses()"
+      [disabled]="disabled()"
+      [ngModel]="currentValue()"
+      (change)="onChange($event)"
+      [attr.aria-label]="ariaLabel() || null"
+    >
+      @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>
+  `, isInline: true, styles: [":host{display:block}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$g.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$g.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"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], 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, FormsModule], template: `
+    <mat-radio-group
+      [class]="hostClasses()"
+      [disabled]="disabled()"
+      [ngModel]="currentValue()"
+      (change)="onChange($event)"
+      [attr.aria-label]="ariaLabel() || null"
+    >
+      @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>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.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}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", 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 {
+    /** Opciones del select */
+    options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+    /** Etiqueta flotante */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    /** 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();
+    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 */ []));
+    onSelectionChange(event) {
+        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 }, label: { classPropertyName: "label", publicName: "label", 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 }, 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" }, 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
+        [value]="value()"
+        [disabled]="disabled()"
+        [multiple]="multiple()"
+        [placeholder]="placeholder()"
+        [panelClass]="panelClasses()"
+        (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>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1$3.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$1.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: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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], 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
+        [value]="value()"
+        [disabled]="disabled()"
+        [multiple]="multiple()"
+        [placeholder]="placeholder()"
+        [panelClass]="panelClasses()"
+        (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>{{ hint() }}</mat-hint>
+      }
+      @if (error()) {
+        <mat-error>{{ error() }}</mat-error>
+      }
+    </mat-form-field>
+  `, 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"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], 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('Navegación principal', ...(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 }} notificaciones">
+                      {{ 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$h.MatSidenav, selector: "mat-sidenav", inputs: ["fixedInViewport", "fixedTopGap", "fixedBottomGap"], exportAs: ["matSidenav"] }, { kind: "component", type: i1$h.MatSidenavContainer, selector: "mat-sidenav-container", exportAs: ["matSidenavContainer"] }, { kind: "component", type: i1$h.MatSidenavContent, selector: "mat-sidenav-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1$1.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 }} notificaciones">
+                      {{ 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 {
+    /** Texto descriptivo */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /** Estado activado */
+    checked = input(false, ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** Deshabilitado */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    mfChange = output();
+    hostClasses = computed(() => {
+        const classes = ['mf-slide-toggle'];
+        if (this.disabled())
+            classes.push('mf-slide-toggle--disabled');
+        return classes.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    onChange(event) {
+        this.mfChange.emit(event.checked);
+    }
+    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.1.0", version: "21.2.4", type: MfSlideToggleComponent, isStandalone: true, selector: "mf-slide-toggle", inputs: { label: { classPropertyName: "label", publicName: "label", 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 } }, outputs: { mfChange: "mfChange" }, ngImport: i0, template: `
+    <mat-slide-toggle
+      [checked]="checked()"
+      [disabled]="disabled()"
+      [class]="hostClasses()"
+      (change)="onChange($event)"
+    >
+      {{ label() }}
+    </mat-slide-toggle>
+  `, isInline: true, styles: [":host{display:inline-block}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatSlideToggleModule }, { kind: "component", type: i1$i.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], template: `
+    <mat-slide-toggle
+      [checked]="checked()"
+      [disabled]="disabled()"
+      [class]="hostClasses()"
+      (change)="onChange($event)"
+    >
+      {{ label() }}
+    </mat-slide-toggle>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.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}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", 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 ?? 4000,
+            horizontalPosition: config.horizontalPosition ?? 'end',
+            verticalPosition: config.verticalPosition ?? 'bottom',
+            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' });
+    }
+    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' }]
+        }] });
+
+/**
+ * Table de la librería ng-comps.
+ * Envuelve Angular Material `mat-table` y expone una API uniforme
+ * con look and feel de marca. Ideal para dashboards y paneles de datos.
+ */
+class MfTableComponent {
+    /** Columnas de la tabla */
+    columns = input.required(...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+    /** Datos de la tabla */
+    data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+    /** Variante visual */
+    variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    mfSortChange = output();
+    mfRowClick = output();
+    displayedColumns = computed(() => this.columns().map(c => c.key), ...(ngDevMode ? [{ debugName: "displayedColumns" }] : /* istanbul ignore next */ []));
+    hostClasses = computed(() => {
+        return ['mf-table', `mf-table--${this.variant()}`].join(' ');
+    }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
+    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: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfSortChange: "mfSortChange", mfRowClick: "mfRowClick" }, ngImport: i0, template: `
+    <div class="mf-table__wrapper" [class]="hostClasses()">
+      <table
+        mat-table
+        [dataSource]="data()"
+        matSort
+        (matSortChange)="mfSortChange.emit($event)"
+      >
+        @for (col of columns(); track col.key) {
+          <ng-container [matColumnDef]="col.key">
+            @if (col.sortable) {
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ col.header }}</th>
+            } @else {
+              <th mat-header-cell *matHeaderCellDef>{{ col.header }}</th>
+            }
+            <td mat-cell *matCellDef="let row">{{ row[col.key] }}</td>
+          </ng-container>
+        }
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns()" (click)="mfRowClick.emit(row)"></tr>
+      </table>
+    </div>
+  `, isInline: true, styles: [":host{display:block}.mf-table__wrapper{overflow-x:auto;border-radius:var(--mf-radius-md);border:1px solid var(--mf-color-border)}.mf-table .mat-mdc-table{width:100%;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-neutral-600)!important;background-color:var(--mf-color-neutral-50)!important;border-bottom-color:var(--mf-color-border)!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;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:var(--mf-color-brand-light)!important;cursor:pointer}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:var(--mf-color-neutral-50)}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatTableModule }, { kind: "component", type: i1$j.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i1$j.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i1$j.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i1$j.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i1$j.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i1$j.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i1$j.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i1$j.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i1$j.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i1$j.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "ngmodule", type: MatSortModule }, { kind: "directive", type: i2$2.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i2$2.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }], 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], template: `
+    <div class="mf-table__wrapper" [class]="hostClasses()">
+      <table
+        mat-table
+        [dataSource]="data()"
+        matSort
+        (matSortChange)="mfSortChange.emit($event)"
+      >
+        @for (col of columns(); track col.key) {
+          <ng-container [matColumnDef]="col.key">
+            @if (col.sortable) {
+              <th mat-header-cell *matHeaderCellDef mat-sort-header>{{ col.header }}</th>
+            } @else {
+              <th mat-header-cell *matHeaderCellDef>{{ col.header }}</th>
+            }
+            <td mat-cell *matCellDef="let row">{{ row[col.key] }}</td>
+          </ng-container>
+        }
+
+        <tr mat-header-row *matHeaderRowDef="displayedColumns()"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns()" (click)="mfRowClick.emit(row)"></tr>
+      </table>
+    </div>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}.mf-table__wrapper{overflow-x:auto;border-radius:var(--mf-radius-md);border:1px solid var(--mf-color-border)}.mf-table .mat-mdc-table{width:100%;font-family:var(--mf-font-base)!important}.mf-table .mat-mdc-header-cell{font-family:var(--mf-font-base)!important;font-weight:var(--mf-weight-bold)!important;font-size:var(--mf-text-sm)!important;color:var(--mf-color-neutral-600)!important;background-color:var(--mf-color-neutral-50)!important;border-bottom-color:var(--mf-color-border)!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;border-bottom-color:var(--mf-color-border)!important}.mf-table .mat-mdc-row:hover{background-color:var(--mf-color-brand-light)!important;cursor:pointer}.mf-table--striped .mat-mdc-row:nth-child(2n){background-color:var(--mf-color-neutral-50)}.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}\n"] }]
+        }], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], mfSortChange: [{ type: i0.Output, args: ["mfSortChange"] }], 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$k.MatTabLabel, selector: "[mat-tab-label], [matTabLabel]" }, { kind: "component", type: i1$k.MatTab, selector: "mat-tab", inputs: ["disabled", "label", "aria-label", "aria-labelledby", "labelClass", "bodyClass", "id"], exportAs: ["matTab"] }, { kind: "component", type: i1$k.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: i1$1.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 {
+    /** Etiqueta */
+    label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : /* 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 */ []));
+    /** Texto de ayuda */
+    hint = input(undefined, ...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
+    /** Resize */
+    resize = input('vertical', ...(ngDevMode ? [{ debugName: "resize" }] : /* istanbul ignore next */ []));
+    mfInput = output();
+    mfBlur = output();
+    currentLength = computed(() => this.value().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 */ []));
+    onInput(event) {
+        const value = event.target.value;
+        this.mfInput.emit(value);
+    }
+    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: { label: { classPropertyName: "label", publicName: "label", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { mfInput: "mfInput", mfBlur: "mfBlur" }, ngImport: i0, template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <textarea
+        matInput
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [rows]="rows()"
+        [attr.maxlength]="maxLength() ?? null"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="mfBlur.emit()"
+      ></textarea>
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (maxLength()) {
+        <mat-hint align="end">{{ currentLength() }} / {{ maxLength() }}</mat-hint>
+      }
+    </mat-form-field>
+  `, 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: i5.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: i1$3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$3.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], template: `
+    <mat-form-field [appearance]="'outline'" [class]="hostClasses()">
+      @if (label()) {
+        <mat-label>{{ label() }}</mat-label>
+      }
+      <textarea
+        matInput
+        [placeholder]="placeholder()"
+        [disabled]="disabled()"
+        [readonly]="readonly()"
+        [rows]="rows()"
+        [attr.maxlength]="maxLength() ?? null"
+        [value]="value()"
+        (input)="onInput($event)"
+        (blur)="mfBlur.emit()"
+      ></textarea>
+      @if (hint()) {
+        <mat-hint>{{ hint() }}</mat-hint>
+      }
+      @if (maxLength()) {
+        <mat-hint align="end">{{ currentLength() }} / {{ maxLength() }}</mat-hint>
+      }
+    </mat-form-field>
+  `, 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"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", 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 }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", 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$l.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 }] }] } });
+
+/**
+ * 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
+      [matTooltip]="text()"
+      [matTooltipPosition]="position()"
+      [matTooltipDisabled]="disabled()"
+      [matTooltipShowDelay]="showDelay()"
+      [matTooltipHideDelay]="hideDelay()"
+      [class]="hostClasses()"
+    >
+      <ng-content />
+    </span>
+  `, isInline: true, styles: [":host{display:inline-block}.mf-tooltip{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1$m.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], 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: [MatTooltipModule], template: `
+    <span
+      [matTooltip]="text()"
+      [matTooltipPosition]="position()"
+      [matTooltipDisabled]="disabled()"
+      [matTooltipShowDelay]="showDelay()"
+      [matTooltipHideDelay]="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, MfDividerComponent, MfFormFieldComponent, MfGridListComponent, MfIconComponent, MfInputComponent, MfMenuComponent, MfPaginatorComponent, MfProgressBarComponent, MfProgressSpinnerComponent, MfRadioButtonComponent, MfSelectComponent, MfSidenavComponent, MfSlideToggleComponent, MfSnackbarService, MfTableComponent, MfTabsComponent, MfTextareaComponent, MfToolbarComponent, MfTooltipComponent };
+//# sourceMappingURL=ng-comps.mjs.map