ng-comps 0.2.0

package/types/ng-comps.d.ts

@@ -0,0 +1,917 @@
+import * as _angular_core from '@angular/core';
+import { PageEvent } from '@angular/material/paginator';
+import { MatSnackBarRef, TextOnlySnackBar } from '@angular/material/snack-bar';
+import { Sort } from '@angular/material/sort';
+
+interface MfAccordionPanel {
+    title: string;
+    description?: string;
+    content: string;
+    expanded?: boolean;
+    disabled?: boolean;
+}
+/**
+ * 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.
+ */
+declare class MfAccordionComponent {
+    /** Paneles del accordion */
+    readonly panels: _angular_core.InputSignal<MfAccordionPanel[]>;
+    /** Permite múltiples paneles abiertos */
+    readonly multi: _angular_core.InputSignal<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfAccordionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfAccordionComponent, "mf-accordion", never, { "panels": { "alias": "panels"; "required": true; "isSignal": true; }; "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type MfAlertSeverity = 'info' | 'success' | 'warning' | 'error';
+/**
+ * Alerta de la librería ng-comps.
+ * Componente de banner para mensajes de sistema, alertas y notificaciones.
+ * Ideal para dashboards y paneles administrativos.
+ */
+declare class MfAlertComponent {
+    /** Mensaje principal */
+    readonly message: _angular_core.InputSignal<string>;
+    /** Título opcional */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Severidad de la alerta */
+    readonly severity: _angular_core.InputSignal<MfAlertSeverity>;
+    /** Se puede cerrar */
+    readonly dismissible: _angular_core.InputSignal<boolean>;
+    readonly mfDismiss: _angular_core.OutputEmitterRef<void>;
+    readonly iconName: _angular_core.Signal<string>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfAlertComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfAlertComponent, "mf-alert", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "severity": { "alias": "severity"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "mfDismiss": "mfDismiss"; }, never, never, true, never>;
+}
+
+interface MfAutocompleteOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+type MfAutocompleteSize = 'sm' | 'md' | 'lg';
+/**
+ * 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`.
+ */
+declare class MfAutocompleteComponent {
+    /** Lista completa de opciones */
+    readonly options: _angular_core.InputSignal<MfAutocompleteOption[]>;
+    /** Etiqueta flotante del campo */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder del input */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Valor actual (texto en el campo) */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Tamaño del campo */
+    readonly size: _angular_core.InputSignal<MfAutocompleteSize>;
+    /** Ancho completo */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    /** Texto de ayuda debajo del campo */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Mensaje de error */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Icono al inicio del campo */
+    readonly leadingIcon: _angular_core.InputSignal<string>;
+    /** Icono al final del campo */
+    readonly trailingIcon: _angular_core.InputSignal<string>;
+    /**
+     * 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.
+     */
+    readonly panelWidth: _angular_core.InputSignal<string | number>;
+    /**
+     * Clases extra que se añaden al panel del autocomplete (overlay).
+     * La clase `mf-autocomplete-panel` siempre está presente.
+     */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    /** Emite el texto escrito en el campo */
+    readonly mfInput: _angular_core.OutputEmitterRef<string>;
+    /** Emite el valor de la opción seleccionada */
+    readonly mfOptionSelected: _angular_core.OutputEmitterRef<MfAutocompleteOption>;
+    readonly mfBlur: _angular_core.OutputEmitterRef<void>;
+    inputValue: string;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly autocompletePanelClasses: _angular_core.Signal<string>;
+    readonly filteredOptions: _angular_core.Signal<MfAutocompleteOption[]>;
+    constructor();
+    onInputChange(value: string): void;
+    onOptionSelected(event: {
+        option: {
+            value: string;
+        };
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfAutocompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfAutocompleteComponent, "mf-autocomplete", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "mfInput": "mfInput"; "mfOptionSelected": "mfOptionSelected"; "mfBlur": "mfBlur"; }, never, never, true, never>;
+}
+
+type MfAvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type MfAvatarVariant = 'circle' | 'rounded';
+/**
+ * Avatar de la librería ng-comps.
+ * Muestra una imagen de perfil, iniciales o un icono.
+ * Componente puro sin dependencia de Angular Material.
+ */
+declare class MfAvatarComponent {
+    /** URL de la imagen */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Texto alternativo */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Nombre completo para generar iniciales */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Tamaño */
+    readonly size: _angular_core.InputSignal<MfAvatarSize>;
+    /** Forma */
+    readonly variant: _angular_core.InputSignal<MfAvatarVariant>;
+    readonly initials: _angular_core.Signal<string>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfAvatarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfAvatarComponent, "mf-avatar", never, { "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type MfBadgeColor = 'brand' | 'accent' | 'error' | 'neutral';
+type MfBadgeSize = 'sm' | 'md' | 'lg';
+type MfBadgePosition = 'above-after' | 'above-before' | 'below-after' | 'below-before';
+/**
+ * Badge de la librería ng-comps.
+ * Envuelve Angular Material `matBadge` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfBadgeComponent {
+    /** Contenido del badge (texto o número) */
+    readonly content: _angular_core.InputSignal<string | number>;
+    /** Color semántico */
+    readonly color: _angular_core.InputSignal<MfBadgeColor>;
+    /** Tamaño del badge */
+    readonly size: _angular_core.InputSignal<MfBadgeSize>;
+    /** Posición del badge */
+    readonly position: _angular_core.InputSignal<MfBadgePosition>;
+    /** Ocultar el badge */
+    readonly hidden: _angular_core.InputSignal<boolean>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Superponer sobre el contenido */
+    readonly overlap: _angular_core.InputSignal<boolean>;
+    readonly matPosition: _angular_core.Signal<"above after" | "above before" | "below after" | "below before">;
+    readonly matSize: _angular_core.Signal<"small" | "medium" | "large">;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfBadgeComponent, "mf-badge", never, { "content": { "alias": "content"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "hidden": { "alias": "hidden"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "overlap": { "alias": "overlap"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface MfBreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+}
+/**
+ * Breadcrumb de la librería ng-comps.
+ * Componente de navegación jerárquica para indicar la ubicación
+ * del usuario en la aplicación.
+ */
+declare class MfBreadcrumbComponent {
+    /** Items del breadcrumb */
+    readonly items: _angular_core.InputSignal<MfBreadcrumbItem[]>;
+    /** Icono separador */
+    readonly separator: _angular_core.InputSignal<string>;
+    /** Label de accesibilidad */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly mfItemClick: _angular_core.OutputEmitterRef<MfBreadcrumbItem>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onItemClick(event: Event, item: MfBreadcrumbItem): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfBreadcrumbComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfBreadcrumbComponent, "mf-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "separator": { "alias": "separator"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "mfItemClick": "mfItemClick"; }, never, never, true, never>;
+}
+
+type MfButtonVariant = 'filled' | 'outlined' | 'text';
+type MfButtonSize = 'sm' | 'md' | 'lg';
+/**
+ * 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.
+ */
+declare class MfButtonComponent {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly variant: _angular_core.InputSignal<MfButtonVariant>;
+    readonly size: _angular_core.InputSignal<MfButtonSize>;
+    readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly leadingIcon: _angular_core.InputSignal<string>;
+    readonly trailingIcon: _angular_core.InputSignal<string>;
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly mfClick: _angular_core.OutputEmitterRef<MouseEvent>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfButtonComponent, "mf-button", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "mfClick": "mfClick"; }, never, never, true, never>;
+}
+
+type MfCardVariant = 'elevated' | 'outlined' | 'flat';
+/**
+ * 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.
+ */
+declare class MfCardComponent {
+    /** Título de la card */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Subtítulo de la card */
+    readonly subtitle: _angular_core.InputSignal<string>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfCardVariant>;
+    /** Padding interno */
+    readonly padding: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
+    /** Interactiva (hover effect) */
+    readonly interactive: _angular_core.InputSignal<boolean>;
+    readonly hasHeader: _angular_core.Signal<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfCardComponent, "mf-card", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[mfCardFooter]"], true, never>;
+}
+
+/**
+ * Checkbox de la librería ng-comps.
+ * Envuelve Angular Material `mat-checkbox` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfCheckboxComponent {
+    /** Texto del checkbox */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Estado marcado */
+    readonly checked: _angular_core.InputSignal<boolean>;
+    /** Estado indeterminado */
+    readonly indeterminate: _angular_core.InputSignal<boolean>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly mfChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onChange(event: {
+        checked: boolean;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfCheckboxComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfCheckboxComponent, "mf-checkbox", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "mfChange": "mfChange"; }, never, never, true, never>;
+}
+
+type MfChipVariant = 'filled' | 'outlined';
+type MfChipColor = 'brand' | 'accent' | 'error' | 'neutral';
+/**
+ * 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.
+ */
+declare class MfChipComponent {
+    /** Texto del chip */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfChipVariant>;
+    /** Color semántico */
+    readonly color: _angular_core.InputSignal<MfChipColor>;
+    /** Seleccionado */
+    readonly selected: _angular_core.InputSignal<boolean>;
+    /** Puede ser removido */
+    readonly removable: _angular_core.InputSignal<boolean>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Icono inicial */
+    readonly leadingIcon: _angular_core.InputSignal<string>;
+    readonly mfRemoved: _angular_core.OutputEmitterRef<void>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfChipComponent, "mf-chip", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; }, { "mfRemoved": "mfRemoved"; }, never, never, true, never>;
+}
+
+type MfDatepickerSize = 'sm' | 'md' | 'lg';
+/**
+ * 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.
+ */
+declare class MfDatepickerComponent {
+    /** Etiqueta flotante del campo */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder del input */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Tamaño del campo */
+    readonly size: _angular_core.InputSignal<MfDatepickerSize>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Valor inicial del datepicker */
+    readonly value: _angular_core.InputSignal<Date>;
+    /** Texto de ayuda debajo del campo */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Mensaje de error */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Fecha mínima seleccionable */
+    readonly min: _angular_core.InputSignal<Date>;
+    /** Fecha máxima seleccionable */
+    readonly max: _angular_core.InputSignal<Date>;
+    /** Ancho completo */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly mfChange: _angular_core.OutputEmitterRef<Date>;
+    readonly mfBlur: _angular_core.OutputEmitterRef<void>;
+    protected readonly currentValue: _angular_core.WritableSignal<Date>;
+    constructor();
+    readonly hostClasses: _angular_core.Signal<string>;
+    onDateChange(event: {
+        value: Date | null;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfDatepickerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfDatepickerComponent, "mf-datepicker", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "mfChange": "mfChange"; "mfBlur": "mfBlur"; }, never, never, true, never>;
+}
+
+/**
+ * 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?' }
+ * });
+ * ```
+ */
+declare class MfDialogComponent {
+    private readonly dialogRef;
+    /** Título del diálogo */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Mensaje descriptivo */
+    readonly message: _angular_core.InputSignal<string>;
+    /** Mostrar botón de cerrar */
+    readonly showClose: _angular_core.InputSignal<boolean>;
+    /** Mostrar área de acciones (footer) */
+    readonly showActions: _angular_core.InputSignal<boolean>;
+    readonly mfClose: _angular_core.OutputEmitterRef<void>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onClose(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfDialogComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfDialogComponent, "mf-dialog", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "showClose": { "alias": "showClose"; "required": false; "isSignal": true; }; "showActions": { "alias": "showActions"; "required": false; "isSignal": true; }; }, { "mfClose": "mfClose"; }, never, ["*", "[mfDialogActions]"], true, never>;
+}
+
+type MfDividerVariant = 'full' | 'inset' | 'middle';
+/**
+ * Divider de la librería ng-comps.
+ * Envuelve Angular Material `mat-divider` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfDividerComponent {
+    /** Orientación vertical */
+    readonly vertical: _angular_core.InputSignal<boolean>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfDividerVariant>;
+    /** Espaciado extra arriba y abajo */
+    readonly spacing: _angular_core.InputSignal<"sm" | "md" | "lg" | "none">;
+    readonly insetValue: _angular_core.Signal<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfDividerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfDividerComponent, "mf-divider", never, { "vertical": { "alias": "vertical"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "spacing": { "alias": "spacing"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class MfFormFieldComponent {
+    /** Etiqueta del campo */
+    readonly label: _angular_core.InputSignal<string>;
+    /** ID para asociar el label con el control */
+    readonly fieldId: _angular_core.InputSignal<string>;
+    /** Texto de ayuda */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Mensaje de error */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Campo requerido (muestra asterisco) */
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly labelClasses: _angular_core.Signal<string>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfFormFieldComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfFormFieldComponent, "mf-form-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "fieldId": { "alias": "fieldId"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface MfGridTile {
+    /** Título de la tile */
+    title?: string;
+    /** Subtítulo de la tile */
+    subtitle?: string;
+    /** Número de columnas que ocupa */
+    colspan?: number;
+    /** Número de filas que ocupa */
+    rowspan?: number;
+    /** Color de fondo */
+    background?: string;
+}
+/**
+ * Lista en cuadrícula de la librería ng-comps.
+ * Envuelve Angular Material `mat-grid-list` y expone una API uniforme
+ * con look and feel de marca. Soporta tiles estáticas y content projection.
+ */
+declare class MfGridListComponent {
+    /** Número de columnas */
+    readonly cols: _angular_core.InputSignal<number>;
+    /** Altura de cada fila */
+    readonly rowHeight: _angular_core.InputSignal<string | number>;
+    /** Espacio entre tiles */
+    readonly gutterSize: _angular_core.InputSignal<string>;
+    /** Tiles a renderizar */
+    readonly tiles: _angular_core.InputSignal<MfGridTile[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfGridListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfGridListComponent, "mf-grid-list", never, { "cols": { "alias": "cols"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "gutterSize": { "alias": "gutterSize"; "required": false; "isSignal": true; }; "tiles": { "alias": "tiles"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+type MfIconSize = 'sm' | 'md' | 'lg' | 'xl';
+type MfIconColor = 'default' | 'brand' | 'muted' | 'error' | 'inherit';
+/**
+ * Icono de la librería ng-comps.
+ * Envuelve Angular Material `mat-icon` y expone una API uniforme
+ * con tamaños y colores de marca.
+ */
+declare class MfIconComponent {
+    /** Nombre del icono de Material Symbols / Material Icons */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Tamaño visual del icono */
+    readonly size: _angular_core.InputSignal<MfIconSize>;
+    /** Color semántico del icono */
+    readonly color: _angular_core.InputSignal<MfIconColor>;
+    /** Etiqueta accesible. Si se omite, el icono será decorativo (aria-hidden) */
+    readonly label: _angular_core.InputSignal<string>;
+    readonly ariaHidden: _angular_core.Signal<"false" | "true">;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfIconComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfIconComponent, "mf-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type MfInputSize = 'sm' | 'md' | 'lg';
+/**
+ * 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.
+ */
+declare class MfInputComponent {
+    /** Etiqueta flotante del campo */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder del input */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Tipo de input HTML */
+    readonly type: _angular_core.InputSignal<"number" | "text" | "email" | "password" | "search" | "tel" | "url">;
+    /** Tamaño del campo */
+    readonly size: _angular_core.InputSignal<MfInputSize>;
+    /** Valor actual del campo */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Solo lectura */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Texto de ayuda debajo del campo */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Mensaje de error */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Icono al inicio */
+    readonly leadingIcon: _angular_core.InputSignal<string>;
+    /** Icono al final */
+    readonly trailingIcon: _angular_core.InputSignal<string>;
+    /** Ancho completo */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    readonly mfInput: _angular_core.OutputEmitterRef<string>;
+    readonly mfBlur: _angular_core.OutputEmitterRef<void>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onInput(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfInputComponent, "mf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "mfInput": "mfInput"; "mfBlur": "mfBlur"; }, never, never, true, never>;
+}
+
+interface MfMenuItem {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+    value: string;
+}
+/**
+ * Menu de la librería ng-comps.
+ * Envuelve Angular Material `mat-menu` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfMenuComponent {
+    /** Items del menú */
+    readonly items: _angular_core.InputSignal<MfMenuItem[]>;
+    /** Icono del trigger */
+    readonly triggerIcon: _angular_core.InputSignal<string>;
+    /** Label accesible del trigger */
+    readonly triggerLabel: _angular_core.InputSignal<string>;
+    readonly mfItemClick: _angular_core.OutputEmitterRef<string>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly triggerClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfMenuComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfMenuComponent, "mf-menu", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; }, { "mfItemClick": "mfItemClick"; }, never, never, true, never>;
+}
+
+/**
+ * Paginator de la librería ng-comps.
+ * Envuelve Angular Material `mat-paginator` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfPaginatorComponent {
+    /** Total de elementos */
+    readonly length: _angular_core.InputSignal<number>;
+    /** Tamaño de página */
+    readonly pageSize: _angular_core.InputSignal<number>;
+    /** Índice de página actual */
+    readonly pageIndex: _angular_core.InputSignal<number>;
+    /** Opciones de tamaño de página */
+    readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
+    /** Mostrar botones de primera/última página */
+    readonly showFirstLastButtons: _angular_core.InputSignal<boolean>;
+    /** Ocultar selector de tamaño de página */
+    readonly hidePageSize: _angular_core.InputSignal<boolean>;
+    readonly mfPageChange: _angular_core.OutputEmitterRef<PageEvent>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfPaginatorComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfPaginatorComponent, "mf-paginator", never, { "length": { "alias": "length"; "required": true; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; }, { "mfPageChange": "mfPageChange"; }, never, never, true, never>;
+}
+
+type MfProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
+type MfProgressBarColor = 'brand' | 'accent' | 'warn';
+/**
+ * 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.
+ */
+declare class MfProgressBarComponent {
+    /** Modo de la barra de progreso */
+    readonly mode: _angular_core.InputSignal<MfProgressBarMode>;
+    /** Valor actual (0–100) */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Valor del buffer (0–100, solo en modo buffer) */
+    readonly bufferValue: _angular_core.InputSignal<number>;
+    /** Color de la barra */
+    readonly color: _angular_core.InputSignal<MfProgressBarColor>;
+    /** Etiqueta accesible */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Muestra el porcentaje junto a la barra */
+    readonly showValue: _angular_core.InputSignal<boolean>;
+    /** Altura de la barra en px */
+    readonly height: _angular_core.InputSignal<number>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfProgressBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfProgressBarComponent, "mf-progress-bar", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "bufferValue": { "alias": "bufferValue"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type MfProgressSpinnerMode = 'determinate' | 'indeterminate';
+type MfProgressSpinnerColor = 'brand' | 'accent' | 'warn';
+/**
+ * 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.
+ */
+declare class MfProgressSpinnerComponent {
+    /** Modo del spinner */
+    readonly mode: _angular_core.InputSignal<MfProgressSpinnerMode>;
+    /** Valor actual (0–100, solo en modo determinate) */
+    readonly value: _angular_core.InputSignal<number>;
+    /** Diámetro en px */
+    readonly diameter: _angular_core.InputSignal<number>;
+    /** Grosor del trazo en px */
+    readonly strokeWidth: _angular_core.InputSignal<number>;
+    /** Color del spinner */
+    readonly color: _angular_core.InputSignal<MfProgressSpinnerColor>;
+    /** Etiqueta accesible y visible */
+    readonly label: _angular_core.InputSignal<string>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly wrapperClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfProgressSpinnerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfProgressSpinnerComponent, "mf-progress-spinner", never, { "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "diameter": { "alias": "diameter"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface MfRadioOption {
+    /** Valor de la opción */
+    value: string;
+    /** Texto visible */
+    label: string;
+    /** Deshabilitada individualmente */
+    disabled?: boolean;
+}
+type MfRadioDirection = 'horizontal' | 'vertical';
+/**
+ * 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.
+ */
+declare class MfRadioButtonComponent {
+    /** Opciones del grupo */
+    readonly options: _angular_core.InputSignal<MfRadioOption[]>;
+    /** Valor seleccionado */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Dirección del grupo */
+    readonly direction: _angular_core.InputSignal<MfRadioDirection>;
+    /** Etiqueta accesible para el grupo */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly mfChange: _angular_core.OutputEmitterRef<string>;
+    protected readonly currentValue: _angular_core.WritableSignal<string>;
+    constructor();
+    readonly hostClasses: _angular_core.Signal<string>;
+    onChange(event: {
+        value: string;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfRadioButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfRadioButtonComponent, "mf-radio-button", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "mfChange": "mfChange"; }, never, never, true, never>;
+}
+
+interface MfSelectOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+type MfSelectSize = 'sm' | 'md' | 'lg';
+/**
+ * Select de la librería ng-comps.
+ * Envuelve Angular Material `mat-select` y expone una API uniforme
+ * con look and feel de marca.
+ *
+ * El dropdown se estiliza mediante la clase global `mf-select-panel` que se
+ * inserta en el overlay. Puedes añadir clases adicionales con `panelClass`.
+ */
+declare class MfSelectComponent {
+    /** Opciones del select */
+    readonly options: _angular_core.InputSignal<MfSelectOption[]>;
+    /** Etiqueta flotante */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Valor actual */
+    readonly value: _angular_core.InputSignal<string | number | (string | number)[]>;
+    /** Selección múltiple */
+    readonly multiple: _angular_core.InputSignal<boolean>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Texto de ayuda */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Mensaje de error */
+    readonly error: _angular_core.InputSignal<string>;
+    /** Tamaño del campo */
+    readonly size: _angular_core.InputSignal<MfSelectSize>;
+    /** Ancho completo */
+    readonly fullWidth: _angular_core.InputSignal<boolean>;
+    /** Icono al inicio del campo */
+    readonly leadingIcon: _angular_core.InputSignal<string>;
+    /** Icono al final del campo */
+    readonly trailingIcon: _angular_core.InputSignal<string>;
+    /**
+     * Clases extra que se añaden al panel del dropdown (overlay).
+     * La clase `mf-select-panel` siempre está presente para los estilos base.
+     */
+    readonly panelClass: _angular_core.InputSignal<string | string[]>;
+    readonly mfSelectionChange: _angular_core.OutputEmitterRef<string | number | (string | number)[]>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    readonly panelClasses: _angular_core.Signal<string[]>;
+    onSelectionChange(event: {
+        value: string | number | (string | number)[];
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfSelectComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfSelectComponent, "mf-select", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "mfSelectionChange": "mfSelectionChange"; }, never, never, true, never>;
+}
+
+type MfSidenavMode = 'over' | 'push' | 'side';
+type MfSidenavPosition = 'start' | 'end';
+interface MfSidenavNavItem {
+    /** Nombre del icono Material (e.g. 'home', 'dashboard') */
+    icon: string;
+    /** Texto de la etiqueta */
+    label: string;
+    /** Identificador único del ítem */
+    id: string;
+    /** Ítem activo/seleccionado */
+    active?: boolean;
+    /** Deshabilitar el ítem */
+    disabled?: boolean;
+    /** Número de badge (0 oculta el badge) */
+    badge?: number;
+}
+/**
+ * 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.
+ */
+declare class MfSidenavComponent {
+    /** Abierto o cerrado */
+    readonly opened: _angular_core.InputSignal<boolean>;
+    /** Modo de apertura */
+    readonly mode: _angular_core.InputSignal<MfSidenavMode>;
+    /** Posición del panel */
+    readonly position: _angular_core.InputSignal<MfSidenavPosition>;
+    /** Muestra backdrop al abrir */
+    readonly hasBackdrop: _angular_core.InputSignal<boolean>;
+    /** Ancho del panel lateral */
+    readonly sidenavWidth: _angular_core.InputSignal<string>;
+    /** Ítems de navegación declarativos */
+    readonly navItems: _angular_core.InputSignal<MfSidenavNavItem[]>;
+    /** Título de la cabecera del sidenav */
+    readonly headerTitle: _angular_core.InputSignal<string>;
+    /** Icono Material de la cabecera */
+    readonly headerIcon: _angular_core.InputSignal<string>;
+    /** Aria-label del elemento nav */
+    readonly navAriaLabel: _angular_core.InputSignal<string>;
+    readonly mfOpenedChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Emite el ítem de navegación pulsado */
+    readonly mfNavItemClick: _angular_core.OutputEmitterRef<MfSidenavNavItem>;
+    readonly containerClasses: _angular_core.Signal<string>;
+    readonly sidenavClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfSidenavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfSidenavComponent, "mf-sidenav", never, { "opened": { "alias": "opened"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "hasBackdrop": { "alias": "hasBackdrop"; "required": false; "isSignal": true; }; "sidenavWidth": { "alias": "sidenavWidth"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerIcon": { "alias": "headerIcon"; "required": false; "isSignal": true; }; "navAriaLabel": { "alias": "navAriaLabel"; "required": false; "isSignal": true; }; }, { "mfOpenedChange": "mfOpenedChange"; "mfNavItemClick": "mfNavItemClick"; }, never, ["[mfSidenavContent]", "*"], true, never>;
+}
+
+/**
+ * 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.
+ */
+declare class MfSlideToggleComponent {
+    /** Texto descriptivo */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Estado activado */
+    readonly checked: _angular_core.InputSignal<boolean>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly mfChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onChange(event: {
+        checked: boolean;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfSlideToggleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfSlideToggleComponent, "mf-slide-toggle", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "mfChange": "mfChange"; }, never, never, true, never>;
+}
+
+type MfSnackbarType = 'info' | 'success' | 'warning' | 'error';
+interface MfSnackbarConfig {
+    message: string;
+    action?: string;
+    type?: MfSnackbarType;
+    duration?: number;
+    horizontalPosition?: 'start' | 'center' | 'end';
+    verticalPosition?: 'top' | 'bottom';
+}
+/**
+ * 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.
+ */
+declare class MfSnackbarService {
+    private readonly matSnackBar;
+    open(config: MfSnackbarConfig): MatSnackBarRef<TextOnlySnackBar>;
+    info(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar>;
+    success(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar>;
+    warning(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar>;
+    error(message: string, action?: string): MatSnackBarRef<TextOnlySnackBar>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfSnackbarService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MfSnackbarService>;
+}
+
+interface MfTableColumn {
+    key: string;
+    header: string;
+    sortable?: boolean;
+}
+type MfTableVariant = 'default' | 'striped' | 'bordered';
+/**
+ * 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.
+ */
+declare class MfTableComponent {
+    /** Columnas de la tabla */
+    readonly columns: _angular_core.InputSignal<MfTableColumn[]>;
+    /** Datos de la tabla */
+    readonly data: _angular_core.InputSignal<Record<string, unknown>[]>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfTableVariant>;
+    readonly mfSortChange: _angular_core.OutputEmitterRef<Sort>;
+    readonly mfRowClick: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    readonly displayedColumns: _angular_core.Signal<string[]>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfTableComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfTableComponent, "mf-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "mfSortChange": "mfSortChange"; "mfRowClick": "mfRowClick"; }, never, never, true, never>;
+}
+
+interface MfTab {
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+type MfTabsVariant = 'default' | 'stretched';
+/**
+ * Tabs de la librería ng-comps.
+ * Envuelve Angular Material `mat-tab-group` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfTabsComponent {
+    /** Pestañas */
+    readonly tabs: _angular_core.InputSignal<MfTab[]>;
+    /** Índice seleccionado */
+    readonly selectedIndex: _angular_core.InputSignal<number>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfTabsVariant>;
+    readonly mfSelectedIndexChange: _angular_core.OutputEmitterRef<number>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfTabsComponent, "mf-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "selectedIndex": { "alias": "selectedIndex"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "mfSelectedIndexChange": "mfSelectedIndexChange"; }, never, never, true, never>;
+}
+
+type MfTextareaSize = 'sm' | 'md' | 'lg';
+type MfTextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+/**
+ * Textarea de la librería ng-comps.
+ * Envuelve Angular Material `matInput` con textarea y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfTextareaComponent {
+    /** Etiqueta */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Placeholder */
+    readonly placeholder: _angular_core.InputSignal<string>;
+    /** Valor */
+    readonly value: _angular_core.InputSignal<string>;
+    /** Filas visibles */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Tamaño */
+    readonly size: _angular_core.InputSignal<MfTextareaSize>;
+    /** Máximo de caracteres */
+    readonly maxLength: _angular_core.InputSignal<number>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Solo lectura */
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    /** Texto de ayuda */
+    readonly hint: _angular_core.InputSignal<string>;
+    /** Resize */
+    readonly resize: _angular_core.InputSignal<MfTextareaResize>;
+    readonly mfInput: _angular_core.OutputEmitterRef<string>;
+    readonly mfBlur: _angular_core.OutputEmitterRef<void>;
+    readonly currentLength: _angular_core.Signal<number>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    onInput(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfTextareaComponent, "mf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "resize": { "alias": "resize"; "required": false; "isSignal": true; }; }, { "mfInput": "mfInput"; "mfBlur": "mfBlur"; }, never, never, true, never>;
+}
+
+type MfToolbarVariant = 'surface' | 'brand' | 'transparent';
+/**
+ * Toolbar de la librería ng-comps.
+ * Envuelve Angular Material `mat-toolbar` y expone una API uniforme
+ * con look and feel de marca. Usa content projection para acciones.
+ */
+declare class MfToolbarComponent {
+    /** Título que se muestra en la toolbar */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Variante visual */
+    readonly variant: _angular_core.InputSignal<MfToolbarVariant>;
+    /** Muestra borde inferior */
+    readonly bordered: _angular_core.InputSignal<boolean>;
+    /** Toolbar fija en la parte superior */
+    readonly sticky: _angular_core.InputSignal<boolean>;
+    /** Elevación sutil */
+    readonly elevated: _angular_core.InputSignal<boolean>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfToolbarComponent, "mf-toolbar", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "sticky": { "alias": "sticky"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, ["[mfToolbarStart]", "[mfToolbarEnd]", "*"], true, never>;
+}
+
+type MfTooltipPosition = 'above' | 'below' | 'left' | 'right';
+/**
+ * Tooltip de la librería ng-comps.
+ * Envuelve Angular Material `matTooltip` y expone una API uniforme
+ * con look and feel de marca.
+ */
+declare class MfTooltipComponent {
+    /** Texto del tooltip */
+    readonly text: _angular_core.InputSignal<string>;
+    /** Posición del tooltip */
+    readonly position: _angular_core.InputSignal<MfTooltipPosition>;
+    /** Deshabilitado */
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    /** Delay para mostrar (ms) */
+    readonly showDelay: _angular_core.InputSignal<number>;
+    /** Delay para ocultar (ms) */
+    readonly hideDelay: _angular_core.InputSignal<number>;
+    readonly hostClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MfTooltipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MfTooltipComponent, "mf-tooltip", never, { "text": { "alias": "text"; "required": true; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showDelay": { "alias": "showDelay"; "required": false; "isSignal": true; }; "hideDelay": { "alias": "hideDelay"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+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 };
+export type { MfAccordionPanel, MfAlertSeverity, MfAutocompleteOption, MfAutocompleteSize, MfAvatarSize, MfAvatarVariant, MfBadgeColor, MfBadgePosition, MfBadgeSize, MfBreadcrumbItem, MfButtonSize, MfButtonVariant, MfCardVariant, MfChipColor, MfChipVariant, MfDatepickerSize, MfDividerVariant, MfGridTile, MfIconColor, MfIconSize, MfInputSize, MfMenuItem, MfProgressBarColor, MfProgressBarMode, MfProgressSpinnerColor, MfProgressSpinnerMode, MfRadioDirection, MfRadioOption, MfSelectOption, MfSelectSize, MfSidenavMode, MfSidenavNavItem, MfSidenavPosition, MfSnackbarConfig, MfSnackbarType, MfTab, MfTableColumn, MfTableVariant, MfTabsVariant, MfTextareaResize, MfTextareaSize, MfToolbarVariant, MfTooltipPosition };