import * as i0 from '@angular/core'; import { Injector, EventEmitter, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, AfterViewChecked, ChangeDetectorRef, NgZone, TemplateRef } from '@angular/core'; import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms'; import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { Router } from '@angular/router'; /** * Color design tokens as TypeScript constants * Based on Secretaría de Finanzas brand guidelines * These values are the source of truth for all color tokens */ declare const COLOR_TOKENS: { readonly primary: { readonly 50: "#e6f7fb"; readonly 100: "#b3e5f0"; readonly 200: "#80d3e5"; readonly 300: "#4dc1da"; readonly 400: "#2ab0cf"; readonly 500: "#55C3D8"; readonly 600: "#4aafc4"; readonly 700: "#3f9bb0"; readonly 800: "#34879c"; readonly 900: "#297388"; }; readonly secondary: { readonly 50: "#f5f5f5"; readonly 100: "#e8e8e8"; readonly 200: "#cecece"; readonly 300: "#b5b5b5"; readonly 400: "#9b9b9b"; readonly 500: "#828282"; readonly 600: "#686868"; readonly 700: "#4f4f4f"; readonly 800: "#383838"; readonly 900: "#2a2a2a"; }; readonly neutral: { readonly 50: "#ffffff"; readonly 100: "#f5f5f5"; readonly 200: "#cecece"; readonly 300: "#b5b5b5"; readonly 400: "#9b9b9b"; readonly 500: "#828282"; readonly 600: "#686868"; readonly 700: "#4f4f4f"; readonly 800: "#383838"; readonly 900: "#2a2a2a"; }; readonly success: { readonly 50: "#e8f5e9"; readonly 100: "#c8e6c9"; readonly 200: "#a5d6a7"; readonly 300: "#81c784"; readonly 400: "#66bb6a"; readonly 500: "#4caf50"; readonly 600: "#43a047"; readonly 700: "#388e3c"; readonly 800: "#2e7d32"; readonly 900: "#1b5e20"; }; readonly warning: { readonly 50: "#fff3e0"; readonly 100: "#ffe0b2"; readonly 200: "#ffcc80"; readonly 300: "#ffb74d"; readonly 400: "#ffa726"; readonly 500: "#ff9800"; readonly 600: "#fb8c00"; readonly 700: "#f57c00"; readonly 800: "#ef6c00"; readonly 900: "#e65100"; }; readonly error: { readonly 50: "#ffebee"; readonly 100: "#ffcdd2"; readonly 200: "#ef9a9a"; readonly 300: "#e57373"; readonly 400: "#ef5350"; readonly 500: "#f44336"; readonly 600: "#e53935"; readonly 700: "#d32f2f"; readonly 800: "#c62828"; readonly 900: "#b71c1c"; }; readonly info: { readonly 50: "#e0f2f1"; readonly 100: "#b2dfdb"; readonly 200: "#80cbc4"; readonly 300: "#4db6ac"; readonly 400: "#26a69a"; readonly 500: "#009688"; readonly 600: "#00897b"; readonly 700: "#00796b"; readonly 800: "#00695c"; readonly 900: "#004d40"; }; readonly brand: { readonly darkGray: "#383838"; readonly lightGray: "#cecece"; readonly lightBlue: "#55C3D8"; readonly white: "#ffffff"; }; }; /** * Color token names for CSS variable generation */ type ColorTokenName = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error' | 'info' | 'brand'; type ColorShade = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; /** * Spacing design tokens * Based on 8px grid system */ declare const SPACING_TOKENS: { readonly xs: "4px"; readonly sm: "8px"; readonly md: "16px"; readonly lg: "24px"; readonly xl: "32px"; readonly '2xl': "48px"; readonly '3xl': "64px"; readonly '4xl': "96px"; readonly '5xl': "128px"; }; type SpacingToken = keyof typeof SPACING_TOKENS; /** * Component and icon size design tokens * Single reference scale (sm/md/lg) aligned with TextField/FormField across the platform */ declare const INPUT_HEIGHT_TOKENS: { readonly sm: "34px"; readonly md: "40px"; readonly lg: "44px"; }; declare const COMPONENT_HEIGHT_TOKENS: { readonly sm: "34px"; readonly md: "40px"; readonly lg: "44px"; }; declare const CHIP_HEIGHT_TOKENS: { readonly sm: "24px"; readonly md: "32px"; readonly lg: "40px"; }; declare const ICON_SIZE_TOKENS: { readonly xs: "12px"; readonly sm: "16px"; readonly md: "20px"; readonly lg: "24px"; readonly xl: "32px"; readonly '2xl': "48px"; }; declare const CONTROL_SIZE_TOKENS: { readonly sm: "16px"; readonly md: "20px"; readonly lg: "24px"; }; type ComponentHeightToken = keyof typeof COMPONENT_HEIGHT_TOKENS; type InputHeightToken = keyof typeof INPUT_HEIGHT_TOKENS; type ChipHeightToken = keyof typeof CHIP_HEIGHT_TOKENS; type IconSizeToken = keyof typeof ICON_SIZE_TOKENS; type ControlSizeToken = keyof typeof CONTROL_SIZE_TOKENS; /** * Typography design tokens * Based on Secretaría de Finanzas brand guidelines - Pluto typeface */ declare const TYPOGRAPHY_TOKENS: { readonly fontFamily: { readonly base: "'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"; readonly mono: "'Fira Code', 'Courier New', monospace"; }; readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly '2xl': "1.5rem"; readonly '3xl': "1.875rem"; readonly '4xl': "2.25rem"; readonly '5xl': "3rem"; }; readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.5; readonly relaxed: 1.75; }; }; type TypographyToken = keyof typeof TYPOGRAPHY_TOKENS; /** * Border radius design tokens */ declare const BORDER_RADIUS_TOKENS: { readonly none: "0"; readonly sm: "4px"; readonly md: "8px"; readonly lg: "12px"; readonly xl: "16px"; readonly '2xl': "24px"; readonly full: "9999px"; }; type BorderRadiusToken = keyof typeof BORDER_RADIUS_TOKENS; /** * Shadow design tokens */ declare const SHADOW_TOKENS: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; }; type ShadowToken = keyof typeof SHADOW_TOKENS; /** * Design tokens index * Central export for all design tokens */ /** * All design tokens combined */ declare const DESIGN_TOKENS: { colors: () => Promise<{ readonly primary: { readonly 50: "#e6f7fb"; readonly 100: "#b3e5f0"; readonly 200: "#80d3e5"; readonly 300: "#4dc1da"; readonly 400: "#2ab0cf"; readonly 500: "#55C3D8"; readonly 600: "#4aafc4"; readonly 700: "#3f9bb0"; readonly 800: "#34879c"; readonly 900: "#297388"; }; readonly secondary: { readonly 50: "#f5f5f5"; readonly 100: "#e8e8e8"; readonly 200: "#cecece"; readonly 300: "#b5b5b5"; readonly 400: "#9b9b9b"; readonly 500: "#828282"; readonly 600: "#686868"; readonly 700: "#4f4f4f"; readonly 800: "#383838"; readonly 900: "#2a2a2a"; }; readonly neutral: { readonly 50: "#ffffff"; readonly 100: "#f5f5f5"; readonly 200: "#cecece"; readonly 300: "#b5b5b5"; readonly 400: "#9b9b9b"; readonly 500: "#828282"; readonly 600: "#686868"; readonly 700: "#4f4f4f"; readonly 800: "#383838"; readonly 900: "#2a2a2a"; }; readonly success: { readonly 50: "#e8f5e9"; readonly 100: "#c8e6c9"; readonly 200: "#a5d6a7"; readonly 300: "#81c784"; readonly 400: "#66bb6a"; readonly 500: "#4caf50"; readonly 600: "#43a047"; readonly 700: "#388e3c"; readonly 800: "#2e7d32"; readonly 900: "#1b5e20"; }; readonly warning: { readonly 50: "#fff3e0"; readonly 100: "#ffe0b2"; readonly 200: "#ffcc80"; readonly 300: "#ffb74d"; readonly 400: "#ffa726"; readonly 500: "#ff9800"; readonly 600: "#fb8c00"; readonly 700: "#f57c00"; readonly 800: "#ef6c00"; readonly 900: "#e65100"; }; readonly error: { readonly 50: "#ffebee"; readonly 100: "#ffcdd2"; readonly 200: "#ef9a9a"; readonly 300: "#e57373"; readonly 400: "#ef5350"; readonly 500: "#f44336"; readonly 600: "#e53935"; readonly 700: "#d32f2f"; readonly 800: "#c62828"; readonly 900: "#b71c1c"; }; readonly info: { readonly 50: "#e0f2f1"; readonly 100: "#b2dfdb"; readonly 200: "#80cbc4"; readonly 300: "#4db6ac"; readonly 400: "#26a69a"; readonly 500: "#009688"; readonly 600: "#00897b"; readonly 700: "#00796b"; readonly 800: "#00695c"; readonly 900: "#004d40"; }; readonly brand: { readonly darkGray: "#383838"; readonly lightGray: "#cecece"; readonly lightBlue: "#55C3D8"; readonly white: "#ffffff"; }; }>; spacing: () => Promise<{ readonly xs: "4px"; readonly sm: "8px"; readonly md: "16px"; readonly lg: "24px"; readonly xl: "32px"; readonly '2xl': "48px"; readonly '3xl': "64px"; readonly '4xl': "96px"; readonly '5xl': "128px"; }>; sizes: () => Promise<{ readonly sm: "34px"; readonly md: "40px"; readonly lg: "44px"; }>; typography: () => Promise<{ readonly fontFamily: { readonly base: "'Pluto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif"; readonly mono: "'Fira Code', 'Courier New', monospace"; }; readonly fontSize: { readonly xs: "0.75rem"; readonly sm: "0.875rem"; readonly base: "1rem"; readonly lg: "1.125rem"; readonly xl: "1.25rem"; readonly '2xl': "1.5rem"; readonly '3xl': "1.875rem"; readonly '4xl': "2.25rem"; readonly '5xl': "3rem"; }; readonly fontWeight: { readonly light: 300; readonly normal: 400; readonly medium: 500; readonly semibold: 600; readonly bold: 700; }; readonly lineHeight: { readonly tight: 1.25; readonly normal: 1.5; readonly relaxed: 1.75; }; }>; borderRadius: () => Promise<{ readonly none: "0"; readonly sm: "4px"; readonly md: "8px"; readonly lg: "12px"; readonly xl: "16px"; readonly '2xl': "24px"; readonly full: "9999px"; }>; shadow: () => Promise<{ readonly none: "none"; readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)"; readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"; readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)"; }>; }; /** * Light theme configuration * Based on Secretaría de Finanzas brand colors */ declare const LIGHT_THEME: { readonly name: "light"; readonly colors: { readonly primary: "#55C3D8"; readonly 'primary-dark': "#3f9bb0"; readonly 'primary-light': "#4dc1da"; readonly secondary: "#383838"; readonly 'secondary-dark': "#2a2a2a"; readonly 'secondary-light': "#686868"; readonly background: "#ffffff"; readonly 'background-elevated': "#ffffff"; readonly surface: "#ffffff"; readonly 'surface-hover': "#cecece"; readonly 'surface-hover-subtle': "#f5f5f5"; readonly 'surface-option-hover': "#e6f7fb"; readonly text: "#383838"; readonly 'text-secondary': "#686868"; readonly 'text-disabled': "#9b9b9b"; readonly placeholder: "#b5b5b5"; readonly border: "#cecece"; readonly 'border-focus': "#55C3D8"; readonly success: "#4caf50"; readonly warning: "#ff9800"; readonly error: "#f44336"; readonly info: "#009688"; }; }; /** * Dark theme configuration * Based on Secretaría de Finanzas brand colors (inverted) */ declare const DARK_THEME: { readonly name: "dark"; readonly colors: { readonly primary: "#55C3D8"; readonly 'primary-dark': "#4dc1da"; readonly 'primary-light': "#3f9bb0"; readonly secondary: "#cecece"; readonly 'secondary-dark': "#9b9b9b"; readonly 'secondary-light': "#cecece"; readonly background: "#383838"; readonly 'background-elevated': "#4f4f4f"; readonly surface: "#4f4f4f"; readonly 'surface-hover': "#686868"; readonly 'surface-hover-subtle': "#686868"; readonly 'surface-option-hover': "#34879c"; readonly text: "#ffffff"; readonly 'text-secondary': "#cecece"; readonly 'text-disabled': "#828282"; readonly placeholder: "#828282"; readonly border: "#686868"; readonly 'border-focus': "#55C3D8"; readonly success: "#66bb6a"; readonly warning: "#ffa726"; readonly error: "#ef5350"; readonly info: "#26a69a"; }; }; /** * Brand theme configuration * Exact colors from Secretaría de Finanzas brand guidelines */ declare const BRAND_THEME: { readonly name: "brand"; readonly colors: { readonly primary: "#55C3D8"; readonly 'primary-dark': "#3f9bb0"; readonly 'primary-light': "#4dc1da"; readonly secondary: "#383838"; readonly 'secondary-dark': "#2a2a2a"; readonly 'secondary-light': "#686868"; readonly background: "#ffffff"; readonly 'background-elevated': "#ffffff"; readonly surface: "#ffffff"; readonly 'surface-hover': "#cecece"; readonly 'surface-hover-subtle': "#f5f5f5"; readonly 'surface-option-hover': "#e6f7fb"; readonly text: "#383838"; readonly 'text-secondary': "#686868"; readonly 'text-disabled': "#9b9b9b"; readonly placeholder: "#b5b5b5"; readonly border: "#cecece"; readonly 'border-focus': "#55C3D8"; readonly success: "#4caf50"; readonly warning: "#ff9800"; readonly error: "#f44336"; readonly info: "#009688"; }; }; /** * Themes index */ type Theme = 'light' | 'dark' | 'brand'; /** * Shared types and interfaces */ type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link' | 'warning' | 'success' | 'info'; type ButtonSize = 'sm' | 'md' | 'lg'; /** Border radius for buttons. Maps to design tokens: none/sm/md/lg/xl/full */ type ButtonRounded = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'; /** Border radius for inputs and buttons. Maps to --sefin-radius-* tokens. Default: md */ type BorderRadiusSize = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'; type InputSize = 'sm' | 'md' | 'lg'; type CardVariant = 'default' | 'elevated' | 'outlined'; /** Card border radius. Maps to design tokens: xs=none, sm/md/lg/xl/2xl use same token names. */ type CardRounded = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span'; type TypographySize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'; type TypographyWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold'; type TypographyColor = 'text' | 'text-secondary' | 'text-disabled' | 'primary' | 'secondary' | 'success' | 'warning' | 'error'; type TypographyLineHeight = 'tight' | 'normal' | 'relaxed'; interface BaseComponent { disabled?: boolean; class?: string; } /** * Theme color configuration */ interface ThemeColors { primary: string; 'primary-dark'?: string; 'primary-light'?: string; secondary: string; 'secondary-dark'?: string; 'secondary-light'?: string; background: string; 'background-elevated'?: string; surface: string; 'surface-hover'?: string; text: string; 'text-secondary'?: string; 'text-disabled'?: string; border: string; 'border-focus'?: string; success?: string; warning?: string; error?: string; info?: string; [key: string]: string | undefined; } /** * Custom theme configuration interface * Allows users to create their own themes with custom colors, typography, spacing, etc. * Supports both single theme and light/dark variants. */ interface CustomTheme { name: string; colors: ThemeColors; /** * Optional light and dark variants for the theme * If provided, allows switching between light and dark modes */ variants?: { light?: ThemeColors; dark?: ThemeColors; }; typography?: { fontFamily?: { base?: string; mono?: string; [key: string]: string | undefined; }; fontSize?: { xs?: string; sm?: string; base?: string; lg?: string; xl?: string; '2xl'?: string; '3xl'?: string; '4xl'?: string; '5xl'?: string; [key: string]: string | undefined; }; fontWeight?: { light?: number; normal?: number; medium?: number; semibold?: number; bold?: number; [key: string]: number | undefined; }; lineHeight?: { tight?: number; normal?: number; relaxed?: number; [key: string]: number | undefined; }; }; spacing?: { xs?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; '3xl'?: string; '4xl'?: string; '5xl'?: string; [key: string]: string | undefined; }; borderRadius?: { none?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; full?: string; [key: string]: string | undefined; }; shadow?: { none?: string; sm?: string; md?: string; lg?: string; xl?: string; '2xl'?: string; [key: string]: string | undefined; }; } /** * Theme loader utility * Generates CSS variables from design tokens */ declare class ThemeLoader { /** * Load a theme and apply it to the document root * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support */ static loadTheme(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): void; /** * Load a custom theme variant (light or dark) * @param customTheme - CustomTheme object with variants support * @param variant - Variant to load ('light' or 'dark') */ static loadThemeVariant(customTheme: CustomTheme, variant: 'light' | 'dark'): void; /** * Get theme configuration by name */ private static getTheme; /** * Get all CSS variables as a string (useful for SSR or static generation) * @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object * @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support */ static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): string; } type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; declare class AvatarComponent { /** Avatar size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */ size: AvatarSize; /** Image source URL */ src?: string; /** Alt text for the image */ alt: string; /** Initials to display when no image is provided */ initials?: string; /** Whether to show a border/ring around the avatar */ bordered: boolean; /** Additional CSS classes */ class: string; get avatarClasses(): string; get displayInitials(): string; onImageError(event: Event): void; get iconSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl'; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error'; type BadgeSize = 'sm' | 'md' | 'lg'; declare class BadgeComponent { /** Badge variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' */ variant: BadgeVariant; /** Badge size. Options: 'sm' | 'md' | 'lg' */ size: BadgeSize; /** Whether the badge should be displayed as a dot (no text) */ dot: boolean; /** Maximum number to show before displaying as "+N" */ max?: number; /** Badge value (number or text) */ value?: number | string; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; get badgeClasses(): string; get displayValue(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; declare class IconComponent { private injector; private sanitizer; constructor(injector: Injector); /** Icon name from Lucide Angular (e.g., 'home', 'search', 'user') */ name?: string; /** Icon size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */ size: IconSize; /** Custom color for the icon */ color?: string; /** Whether the icon should be rotated 180 degrees */ rotate: boolean; /** Whether the icon should be flipped horizontally */ flipH: boolean; /** Whether the icon should be flipped vertically */ flipV: boolean; /** Additional CSS classes */ class: string; get iconClasses(): string; get sizeValue(): number; get lucideIconName(): string | undefined; get iconSvgHtml(): any; private escapeHtml; private getTransform; /** * Resolves color input to a valid SVG stroke value. * SEFIN token names (e.g. "primary", "error") are mapped to CSS variables. */ private resolveColor; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type SpinnerSize = 'sm' | 'md' | 'lg'; type SpinnerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default'; declare class SpinnerComponent { /** Spinner size. Options: 'sm' | 'md' | 'lg' */ size: SpinnerSize; /** Spinner variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' */ variant: SpinnerVariant; /** Whether the spinner should be displayed inline (smaller margins) */ inline: boolean; /** Additional CSS classes */ class: string; get spinnerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ButtonIconPosition = 'start' | 'end'; declare class ButtonComponent { /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link' */ variant: ButtonVariant; /** Button size. Options: 'sm' | 'md' | 'lg' */ size: ButtonSize; /** Whether the button is disabled */ disabled: boolean; /** Whether the button is in loading state */ loading: boolean; /** Whether the button should take full width of the container */ fullWidth: boolean; /** Button type. Options: 'button' | 'submit' | 'reset' */ type: 'button' | 'submit' | 'reset'; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** @deprecated Use borderRadius instead. Kept for backward compatibility. */ set rounded(value: BorderRadiusSize); /** Icon name (e.g. 'external-link', 'chevron-right'). When set, an icon is shown at start or end of the button. */ icon?: string; /** Position of the icon relative to the button content. Options: 'start' | 'end' */ iconPosition: ButtonIconPosition; /** Icon size. If not set, defaults to a size that matches the button size. */ iconSize?: IconSize; /** Additional CSS classes */ class: string; /** Resolved icon size: uses iconSize input or maps from button size. */ get resolvedIconSize(): IconSize; /** Resolved spinner size: keeps the loader proportional to button size. */ get resolvedSpinnerSize(): SpinnerSize; clicked: EventEmitter; onClick(event: MouseEvent): void; get buttonClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; static ngAcceptInputType_loading: unknown; } type IconTileVariant = 'default' | 'elevated'; type IconTileShape = 'rounded' | 'square'; type IconTileSize = 'sm' | 'md' | 'lg'; declare class IconTileComponent { /** Icon name (same as sefin-icon, e.g. 'share-2', 'file', 'settings') */ icon: string; /** Visual variant. Options: 'default' (flat) | 'elevated' (with shadow) */ variant: IconTileVariant; /** Shape. Options: 'rounded' (with border-radius) | 'square' (no border-radius) */ shape: IconTileShape; /** Tile size. Options: 'sm' | 'md' | 'lg' */ size: IconTileSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md (applies when shape is 'rounded') */ borderRadius: BorderRadiusSize; /** Disabled state (reduces opacity, decorative only) */ disabled: boolean; /** Additional CSS classes */ class: string; get tileClasses(): string; get iconSize(): 'sm' | 'md' | 'lg'; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class IconButtonComponent { /** Visual style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link' | 'warning' | 'success' | 'info' */ variant: ButtonVariant; /** Button size. Options: 'sm' | 'md' | 'lg' */ size: ButtonSize; /** Whether the button is disabled */ disabled: boolean; /** Button type. Options: 'button' | 'submit' | 'reset' */ type: 'button' | 'submit' | 'reset'; /** Additional CSS classes */ class: string; /** Accessibility label for the button */ ariaLabel: string; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** @deprecated Use borderRadius="full" instead. Whether the button should be rounded (circular) */ set rounded(value: boolean); clicked: EventEmitter; onClick(event: MouseEvent): void; get buttonClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type FabSize = 'sm' | 'md' | 'lg'; declare class FabButtonComponent { /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */ variant: ButtonVariant; /** FAB size. Options: 'sm' | 'md' | 'lg' */ size: FabSize; /** Whether the button is disabled */ disabled: boolean; /** Button type. Options: 'button' | 'submit' | 'reset' */ type: 'button' | 'submit' | 'reset'; /** Additional CSS classes */ class: string; /** Accessibility label for the button */ ariaLabel: string; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; clicked: EventEmitter; onClick(event: MouseEvent): void; get buttonClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ChipVariant = 'default' | 'primary' | 'secondary' | 'outline' | 'ghost'; type ChipSize = 'sm' | 'md' | 'lg'; declare class ChipComponent { /** Chip variant style. Options: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' */ variant: ChipVariant; /** Chip size. Options: 'sm' | 'md' | 'lg' */ size: ChipSize; /** Whether the chip is disabled */ disabled: boolean; /** Whether the chip can be removed (shows remove button) */ removable: boolean; /** Whether the chip is selected (for selectable chips) */ selected: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; removed: EventEmitter; clicked: EventEmitter; onRemove(event: MouseEvent): void; onClick(event: MouseEvent): void; get chipClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'; type TagSize = 'sm' | 'md' | 'lg'; declare class TagComponent { /** Tag variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' */ variant: TagVariant; /** Tag size. Options: 'sm' | 'md' | 'lg' */ size: TagSize; /** Icon name to display before the tag content */ icon?: string; /** Whether the tag can be removed (shows remove button) */ removable: boolean; /** Whether the tag is disabled */ disabled: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when the tag is removed */ removed: EventEmitter; onRemove(event: MouseEvent): void; get tagClasses(): string; get iconSize(): 'xs' | 'sm' | 'md'; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type LinkVariant = 'default' | 'primary' | 'secondary' | 'underline'; type LinkSize = 'sm' | 'md' | 'lg'; type LinkIconPosition = 'start' | 'end'; declare class LinkComponent { /** Link variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */ variant: LinkVariant; /** Link size. Options: 'sm' | 'md' | 'lg' */ size: LinkSize; /** Whether the link is disabled */ disabled: boolean; /** Link URL */ href?: string; /** Link target attribute (e.g., '_blank') */ target?: string; /** Link rel attribute */ rel?: string; /** Additional CSS classes */ class: string; /** Whether to show underline */ underline: boolean; /** Icon name (e.g. 'external-link', 'chevron-right'). When set, an icon is shown at start or end of the link. */ icon?: string; /** Position of the icon relative to the link text. Options: 'start' | 'end' */ iconPosition: LinkIconPosition; /** Icon size. If not set, defaults to a size that matches the link size (sm→sm, md→md, lg→md). */ iconSize?: IconSize; /** Resolved icon size: uses iconSize input or maps from link size. */ get resolvedIconSize(): IconSize; get linkClasses(): string; onClick(event: Event): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** Breakpoint names aligned with Container/Grid (sm: 640px, md: 768px, lg: 1024px, xl: 1280px). */ type StackBreakpoint = 'sm' | 'md' | 'lg' | 'xl'; declare class StackComponent { /** Base flex direction (mobile-first). */ direction: 'row' | 'column'; /** Direction from 640px (sm). */ directionSm?: 'row' | 'column'; /** Direction from 768px (md). */ directionMd?: 'row' | 'column'; /** Direction from 1024px (lg). */ directionLg?: 'row' | 'column'; /** Direction from 1280px (xl). */ directionXl?: 'row' | 'column'; spacing?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; align: 'start' | 'center' | 'end' | 'stretch'; justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'; wrap: boolean; class: string; get stackClasses(): string; get spacingValue(): string; get stackStyles(): { [key: string]: string; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'; type ContainerVariant = 'default' | 'fluid' | 'fixed'; type ContainerLayout = 'default' | 'centered'; declare class ContainerComponent { /** Container size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */ size: ContainerSize; /** Container variant. Options: 'default' | 'fluid' | 'fixed' */ variant: ContainerVariant; /** Whether the container has padding */ padding: boolean; /** Layout mode. 'centered' = flex center with full viewport height */ layout: ContainerLayout; /** Optional custom max-width (e.g. '500px', '50rem'). When set, overrides size max-width. */ maxWidth?: string; /** Additional CSS classes */ class: string; /** Forwards the class input to the host so parent styles can target sefin-container */ get hostClass(): string; hostDisplay: string; hostWidth: string; get hostMaxWidth(): string; hostMarginLeft: string; hostMarginRight: string; hostBoxSizing: string; get containerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges { checkboxInput?: ElementRef; size: InputSize; disabled: boolean; indeterminate: boolean; class: string; label: string; name: string; value: boolean; /** Whether the field is in error state (for form validation) */ error: boolean; errorMessage: string; valueChange: EventEmitter; checkedChange: EventEmitter; private onChange; private onTouched; ngAfterViewInit(): void; ngOnChanges(changes: SimpleChanges): void; onCheckboxChange(event: Event): void; writeValue(value: boolean): void; registerOnChange(fn: (value: boolean) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; get hasErrorState(): boolean; get wrapperClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class RadioComponent implements ControlValueAccessor { radioInput?: ElementRef; size: InputSize; disabled: boolean; class: string; label: string; name: string; value: string | number; checked: boolean; /** Whether the field is in error state (typically set on parent radio group) */ error: boolean; errorMessage: string; valueChange: EventEmitter; checkedChange: EventEmitter; private onChange; private onTouched; onRadioChange(event: Event): void; writeValue(value: string | number): void; registerOnChange(fn: (value: string | number) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; get hasErrorState(): boolean; get wrapperClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface SelectOption { value: string | number; label: string; disabled?: boolean; } declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges { containerRef?: ElementRef; dropdownRef?: ElementRef; buttonRef?: ElementRef; options: SelectOption[]; placeholder: string; hint: string; /** Whether the field is in error state (can be set by parent for external validation) */ error: boolean; errorMessage: string; disabled: boolean; size: InputSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; class: string; id: string; value: string | number | null; valueChange: EventEmitter; optionSelected: EventEmitter; internalId: string; isOpen: boolean; selectedIndex: number; private onChange; private onTouched; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; onClickOutside(event: MouseEvent): void; onEscapeKey(event: Event): void; toggleDropdown(): void; openDropdown(): void; closeDropdown(): void; selectOption(option: SelectOption): void; onKeyDown(event: KeyboardEvent): void; private updateSelectedIndex; private scrollToSelected; getSelectedLabel(): string; writeValue(value: string | number | null): void; registerOnChange(fn: (value: string | number | null) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; /** True when the field should show error state */ get hasErrorState(): boolean; get displayError(): boolean; get buttonClasses(): string; get containerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class SwitchComponent implements ControlValueAccessor { size: InputSize; disabled: boolean; class: string; label: string; name: string; value: boolean; /** Whether the field is in error state (for form validation) */ error: boolean; errorMessage: string; valueChange: EventEmitter; checkedChange: EventEmitter; private onChange; private onTouched; onSwitchChange(event: Event): void; writeValue(value: boolean): void; registerOnChange(fn: (value: boolean) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; get hasErrorState(): boolean; get wrapperClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class TypographyComponent { variant: TypographyVariant; size?: TypographySize; weight?: TypographyWeight; color: TypographyColor; lineHeight?: TypographyLineHeight; class: string; text: string; get typographyClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type DividerOrientation = 'horizontal' | 'vertical'; type DividerVariant = 'solid' | 'dashed' | 'dotted'; declare class DividerComponent { /** Divider orientation. Options: 'horizontal' | 'vertical' */ orientation: DividerOrientation; /** Divider variant style. Options: 'solid' | 'dashed' | 'dotted' */ variant: DividerVariant; /** Spacing around the divider (margin) */ spacing: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; /** Thickness of the divider */ thickness: 'thin' | 'medium' | 'thick'; /** Additional CSS classes */ class: string; get dividerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ProgressBarVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error'; type ProgressBarSize = 'sm' | 'md' | 'lg'; declare class ProgressBarComponent { /** Progress value (0-100) */ value: number; /** Progress bar variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' */ variant: ProgressBarVariant; /** Progress bar size. Options: 'sm' | 'md' | 'lg' */ size: ProgressBarSize; /** Whether to show the progress percentage label */ showLabel: boolean; /** Whether the progress bar is in indeterminate state (animated) */ indeterminate: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; get progressBarClasses(): string; get clampedValue(): number; get percentageText(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TooltipPosition = 'top' | 'bottom' | 'left' | 'right'; type TooltipTrigger = 'hover' | 'click' | 'focus'; /** Inline position for fixed tooltip (viewport coordinates) */ interface TooltipFixedPosition { top: number; left: number; } declare class TooltipComponent implements AfterViewInit, AfterViewChecked, OnDestroy { private cdr; /** Tooltip text content */ text: string; /** Tooltip position. Options: 'top' | 'bottom' | 'left' | 'right' */ position: TooltipPosition; /** Trigger event. Options: 'hover' | 'click' | 'focus' */ trigger: TooltipTrigger; /** Delay before showing tooltip (in milliseconds) */ delay: number; /** Whether the tooltip is disabled */ disabled: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; tooltipContent: ElementRef; tooltipTrigger: ElementRef; isVisible: boolean; /** Fixed position in viewport; set when visible so tooltip escapes parent stacking context */ fixedPosition: TooltipFixedPosition | null; private showTimeout?; private hideTimeout?; private positionScheduled; /** When true, tooltip DOM node was moved to document.body to escape table/transform clipping */ private isPortaledToBody; constructor(cdr: ChangeDetectorRef); ngAfterViewInit(): void; ngAfterViewChecked(): void; /** Position tooltip with fixed coordinates and portal to body so it is not clipped by parent overflow/transform (e.g. table row). */ private updateFixedPosition; /** Move tooltip back to wrapper so it is inside the component tree (required before hide/destroy). */ private portalTooltipBackToWrapper; ngOnDestroy(): void; onMouseEnter(event: Event): void; onMouseLeave(event: Event): void; onClick(event: Event): void; onFocus(event: Event): void; onBlur(event: Event): void; show(): void; hide(): void; toggle(): void; private clearTimeouts; private handleOutsideClick; get tooltipClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type AlertVariant = 'success' | 'warning' | 'error' | 'info' | 'default'; type AlertSize = 'sm' | 'md' | 'lg'; declare class AlertComponent { /** Alert variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */ variant: AlertVariant; /** Alert size. Options: 'sm' | 'md' | 'lg' */ size: AlertSize; /** Alert title (optional) */ title?: string; /** Whether the alert can be dismissed (shows close button) */ dismissible: boolean; /** Whether to show an icon */ showIcon: boolean; /** Whether the alert is visible */ visible: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when the alert is dismissed */ dismissed: EventEmitter; onDismiss(): void; get alertClasses(): string; get iconName(): string; get iconSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl'; get iconColor(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ToastVariant = 'success' | 'warning' | 'error' | 'info' | 'default'; type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center'; declare class ToastComponent implements OnInit, OnDestroy { private cdr; /** Toast variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */ variant: ToastVariant; /** Toast position. Options: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' */ position: ToastPosition; /** Toast title (optional) */ title?: string; /** Toast message */ message: string; /** Duration in milliseconds before auto-dismiss (0 = no auto-dismiss) */ duration: number; /** Whether to show an icon */ showIcon: boolean; /** Whether the toast can be dismissed manually */ dismissible: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when the toast is dismissed */ dismissed: EventEmitter; isVisible: boolean; isExiting: boolean; isPaused: boolean; private dismissTimeout?; private exitAnimationTimeout?; private remainingTime; private startTime; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngOnDestroy(): void; private startTimer; private clearTimer; private clearExitAnimation; pauseTimer(): void; resumeTimer(): void; onCloseClick(event: MouseEvent): void; dismiss(): void; get toastClasses(): string; get iconName(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TextFieldVariant = 'outlined' | 'filled' | 'standard'; type TextFieldSize = 'sm' | 'md' | 'lg'; type TextFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'; declare class TextFieldComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy { inputRef?: ElementRef; /** TextField variant style. Options: 'outlined' | 'filled' | 'standard' */ variant: TextFieldVariant; /** TextField size. Options: 'sm' | 'md' | 'lg' */ size: TextFieldSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' */ type: TextFieldType; /** Placeholder text */ placeholder: string; /** Helper text shown below the input */ hint: string; /** Whether the field is in error state (can be set by parent for external validation) */ error: boolean; /** Error message to display */ errorMessage: string; /** Whether the field is required */ required: boolean; /** Whether the field is disabled */ disabled: boolean; /** Whether the field is readonly */ readonly: boolean; /** Maximum length of the input */ maxLength?: number; /** Minimum length of the input */ minLength?: number; /** Pattern for validation (regex string) */ pattern?: string; /** Leading icon name */ leadingIcon?: string; /** Trailing icon name */ trailingIcon?: string; /** Whether to show character counter */ showCounter: boolean; /** Autocomplete attribute */ autocomplete?: string; /** Input name attribute */ name: string; /** Input id attribute */ id: string; /** Additional CSS classes */ class: string; /** Custom validation function */ customValidator?: (value: string) => string | null; /** Event emitted when the value changes */ valueChange: EventEmitter; /** Event emitted when the input is focused */ focused: EventEmitter; /** Event emitted when the input is blurred */ blurred: EventEmitter; /** Event emitted when trailing icon is clicked */ trailingIconClick: EventEmitter; value: string; isFocused: boolean; hasError: boolean; internalErrorMessage: string; private onChange; private onTouched; private destroy$; private control?; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; private generateIdIfNeeded; onInput(event: Event): void; onFocus(event: FocusEvent): void; onBlur(event: FocusEvent): void; onTrailingIconClick(event: MouseEvent): void; private validateField; /** True when the field should show error state (internal validation, explicit error flag, or external errorMessage) */ get hasErrorState(): boolean; get displayError(): boolean; get displayErrorMessage(): string; get characterCount(): number; get textFieldClasses(): string; writeValue(value: string): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; validate(control: AbstractControl): ValidationErrors | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'; type ImageLoading = 'lazy' | 'eager'; type ImageRounded = 'none' | 'sm' | 'md' | 'lg' | 'full'; declare class ImageComponent implements OnInit, OnChanges { /** Image source URL (required) */ src?: string; /** Alt text for the image (required for accessibility) */ alt: string; /** Image width (can be a number in pixels or a string like '100%', 'auto', etc.) */ width?: string | number; /** Image height (can be a number in pixels or a string like '100%', 'auto', etc.) */ height?: string | number; /** How the image should be resized to fit its container. Options: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down' */ fit: ImageFit; /** Loading strategy. Options: 'lazy' | 'eager' */ loading: ImageLoading; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** @deprecated Use borderRadius instead. Options: 'none' | 'sm' | 'md' | 'lg' | 'full' */ set rounded(value: ImageRounded); /** Aspect ratio (e.g., '16/9', '4/3', '1/1') */ aspectRatio?: string; /** Placeholder/fallback image URL to show if main image fails to load */ fallback?: string; /** Whether the image is disabled (reduced opacity) */ disabled: boolean; /** Additional CSS classes */ class: string; /** Sizes attribute for responsive images */ sizes?: string; /** Srcset attribute for responsive images */ srcset?: string; hasError: boolean; currentSrc: string | null; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; private updateCurrentSrc; onImageError(event: Event): void; onImageLoad(): void; get imageClasses(): string; get imageStyles(): { [key: string]: string | number; }; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TabVariant = 'default' | 'primary' | 'secondary' | 'underline'; type TabSize = 'sm' | 'md' | 'lg'; declare class TabComponent { /** Tab variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */ variant: TabVariant; /** Tab size. Options: 'sm' | 'md' | 'lg' */ size: TabSize; /** Whether the tab is disabled */ disabled: boolean; /** Whether the tab is active */ active: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; clicked: EventEmitter; onClick(event: MouseEvent): void; get tabClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type RateSize = 'sm' | 'md' | 'lg'; type RateIcon = 'star' | 'heart' | 'thumb'; declare class RateComponent { /** Current rating value (0 to max) */ set value(value: number); get value(): number; private _value; /** Maximum rating value */ max: number; /** Whether the rating is disabled */ disabled: boolean; /** Whether the rating is readonly */ readonly: boolean; /** Whether to allow half stars */ allowHalf: boolean; /** Icon type. Options: 'star' | 'heart' | 'thumb' */ icon: RateIcon; /** Rate size. Options: 'sm' | 'md' | 'lg' */ size: RateSize; /** Whether to show text with rating */ showText: boolean; /** Additional CSS classes */ class: string; /** Event emitted when rating changes */ valueChange: EventEmitter; /** Event emitted when rating is hovered */ hoverChange: EventEmitter; /** Internal hover value */ private _hoverValue; readonly items: i0.Signal; get rateClasses(): string; isInteractive(): boolean; getDisplayValue(): number; getIconState(index: number): 'full' | 'half' | 'empty'; onItemClick(index: number): void; onItemHover(index: number | null): void; onHalfClick(index: number, isLeftHalf: boolean): void; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type SpacerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'; type SpacerOrientation = 'vertical' | 'horizontal'; declare class SpacerComponent { /** Size of the spacer. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' */ size: SpacerSize; /** Orientation of the spacer. Options: 'vertical' | 'horizontal' */ orientation: SpacerOrientation; /** Additional CSS classes */ class: string; get spacerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type GridGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'; type GridAlign = 'start' | 'center' | 'end' | 'stretch'; type GridJustify = 'start' | 'center' | 'end' | 'stretch'; declare class GridComponent { /** Number of columns (1-12). Ignored when autoColumns is true. */ columns: number; /** Columns at sm breakpoint (min-width: 640px). */ columnsSm?: number; /** Columns at md breakpoint (min-width: 768px). */ columnsMd?: number; /** Columns at lg breakpoint (min-width: 1024px). */ columnsLg?: number; /** Columns at xl breakpoint (min-width: 1280px). */ columnsXl?: number; /** Use auto-fit responsive columns (repeat(auto-fit, minmax(minColumnWidth, 1fr))). */ autoColumns: boolean; /** Minimum column width when autoColumns is true (e.g. '250px', '20rem'). */ minColumnWidth: string; /** Gap between items. Uses spacing tokens. */ gap: GridGap; /** Alignment of items (align-items). */ align: GridAlign; /** Justification of items (justify-items). */ justify: GridJustify; /** Additional CSS classes. */ class: string; get gridClasses(): string; get gridStyles(): { [key: string]: string; }; private clampColumns; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type SkeletonShape = 'text' | 'circle' | 'rect'; type SkeletonSize = 'sm' | 'md' | 'lg'; type SkeletonAnimation = 'pulse' | 'wave' | 'none'; declare class SkeletonComponent { /** Shape of the skeleton. Options: 'text' (line) | 'circle' | 'rect' (rectangle block) */ shape: SkeletonShape; /** Size. Options: 'sm' | 'md' | 'lg'. Affects height for text/rect, diameter for circle. */ size: SkeletonSize; /** Animation style. Options: 'pulse' | 'wave' | 'none' */ animation: SkeletonAnimation; /** Optional custom width (e.g. '100%', '80px'). Overrides default width for text/rect. */ width: string | undefined; /** Optional custom height (e.g. '24px'). Overrides default height for text/rect. */ height: string | undefined; /** Additional CSS classes */ class: string; get skeletonClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class AccordionItemComponent { /** Title text for the accordion header */ title: string; /** Whether the accordion item is expanded */ expanded: boolean; /** Whether the accordion item is disabled */ disabled: boolean; /** Additional CSS classes */ class: string; /** Event emitted when the accordion item is toggled */ toggle: EventEmitter; onHeaderClick(): void; get accordionClasses(): string; get headerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface AutocompleteOption { value: string | number; label: string; disabled?: boolean; } declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges { inputRef?: ElementRef; dropdownRef?: ElementRef; containerRef?: ElementRef; options: AutocompleteOption[]; placeholder: string; hint: string; /** Whether the field is in error state (can be set by parent for external validation) */ error: boolean; errorMessage: string; disabled: boolean; size: InputSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; class: string; id: string; value: string | number | null; minChars: number; maxResults: number; valueChange: EventEmitter; optionSelected: EventEmitter; inputChange: EventEmitter; searchText: string; filteredOptions: AutocompleteOption[]; isOpen: boolean; selectedIndex: number; private isSelectingOption; internalId: string; ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; onClickOutside(event: MouseEvent): void; onInputChange(value: string): void; filterOptions(): void; onOptionMouseDown(event: MouseEvent, option: AutocompleteOption): void; selectOption(option: AutocompleteOption): void; onInputFocus(): void; onInputBlur(): void; onKeyDown(event: KeyboardEvent): void; private scrollToSelected; clearValue(): void; /** True when the field should show error state */ get hasErrorState(): boolean; get displayError(): boolean; get inputClasses(): string; get containerClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface BreadcrumbItem { label: string; href?: string; icon?: string; } type BreadcrumbSeparator = 'slash' | 'chevron' | 'arrow'; type BreadcrumbSize = 'sm' | 'md' | 'lg'; declare class BreadcrumbsComponent { private sanitizer; /** Array of breadcrumb items */ items: BreadcrumbItem[]; /** Separator style. Options: 'slash' | 'chevron' | 'arrow' */ separator: BreadcrumbSeparator; /** Breadcrumb size. Options: 'sm' | 'md' | 'lg' */ size: BreadcrumbSize; /** Additional CSS classes */ class: string; constructor(sanitizer: DomSanitizer); get breadcrumbsClasses(): string; isLastItem(index: number): boolean; getSeparatorIcon(): string; sanitizeHtml(html: string | undefined): SafeHtml | string; getSeparatorIconSafe(): SafeHtml; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } interface ButtonGroupOption { label: string; value: string | number; disabled?: boolean; icon?: string; } type ButtonGroupVariant = 'default' | 'segmented'; type ButtonGroupSize = 'sm' | 'md' | 'lg'; declare class ButtonGroupComponent { private sanitizer; constructor(sanitizer: DomSanitizer); /** Array of button options */ options: ButtonGroupOption[]; /** Selected value (for segmented variant) */ value: string | number | null; /** Whether multiple selection is allowed (for default variant) */ multiple: boolean; /** Selected values (for multiple selection) */ selectedValues: (string | number)[]; /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */ variant: ButtonVariant; /** Button size. Options: 'sm' | 'md' | 'lg' */ size: ButtonSize; /** Button group variant. Options: 'default' | 'segmented' */ groupVariant: ButtonGroupVariant; /** Whether the button group is disabled */ disabled: boolean; /** Whether buttons should take full width of the container */ fullWidth: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when value changes (for segmented variant) */ valueChange: EventEmitter; /** Event emitted when selected values change (for multiple selection) */ selectedValuesChange: EventEmitter<(string | number)[]>; /** Event emitted when a button is clicked */ buttonClick: EventEmitter; get buttonGroupClasses(): string; isSelected(option: ButtonGroupOption): boolean; onButtonClick(option: ButtonGroupOption, event?: MouseEvent): void; handleButtonClick(option: ButtonGroupOption): (event: MouseEvent) => void; getButtonVariant(option: ButtonGroupOption): ButtonVariant; getButtonClasses(option: ButtonGroupOption): string; sanitizeHtml(html: string | undefined): SafeHtml | string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class CardComponent { private el; /** Card variant style. Options: 'default' | 'elevated' | 'outlined' */ variant: CardVariant; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** @deprecated Use borderRadius instead. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' */ set rounded(value: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'); /** Whether the card is clickable/interactive (enables smooth primary border on hover/focus) */ clickable: boolean; /** Whether the card is disabled */ disabled: boolean; /** Card padding size. Options: 'none' | 'sm' | 'md' | 'lg' */ padding: 'none' | 'sm' | 'md' | 'lg'; /** Additional CSS classes */ class: string; constructor(el: ElementRef); onKeydown(event: KeyboardEvent): void; get cardClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type DateFormat = 'DD/MM/YYYY' | 'MM/DD/YYYY' | 'YYYY-MM-DD' | 'DD-MM-YYYY'; type DatePickerMode = 'single' | 'range'; interface DateRange { start: Date | null; end: Date | null; } declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy { private cdr; private ngZone; containerRef?: ElementRef; inputWrapperRef?: ElementRef; textfieldRef?: TextFieldComponent; calendarRef?: ElementRef; /** Approximate calendar popup height for placement calculation (px). */ private static readonly CALENDAR_POPUP_HEIGHT; /** Minimum gap from viewport edge when opening below/above (px). */ private static readonly CALENDAR_VIEWPORT_GAP; value: Date | DateRange | null; placeholder: string; disabled: boolean; error: boolean; errorMessage: string; hint: string; size: InputSize; format: DateFormat; mode: DatePickerMode; minDate?: Date; maxDate?: Date; showTodayButton: boolean; showClearButton: boolean; firstDayOfWeek: 0 | 1; valueChange: EventEmitter; dateSelected: EventEmitter; isOpen: boolean; /** Placement of the calendar popup: 'below' or 'above' the input. */ calendarPlacement: 'below' | 'above'; currentMonth: Date; selectedDate: Date | null; rangeStart: Date | null; rangeEnd: Date | null; displayValue: string; viewMode: 'month' | 'year'; private months; private days; constructor(cdr: ChangeDetectorRef, ngZone: NgZone); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; ngOnChanges(changes: SimpleChanges): void; private justOpened; private isSelectingDate; private openingTimeout?; onClickOutside(event: MouseEvent): void; onKeyDown(event: KeyboardEvent): void; private initializeDates; toggleCalendar(): void; openCalendar(): void; /** * Updates calendar popup placement (above or below) so it stays within viewport * (e.g. when inside a modal with no space below). */ private updateCalendarPlacement; closeCalendar(): void; toggleViewMode(event?: MouseEvent): void; getYears(): number[]; selectYear(year: number, event?: MouseEvent): void; getMonths(): { index: number; name: string; }[]; selectMonth(monthIndex: number): void; onTextFieldClick(event?: MouseEvent): void; onTextFieldFocus(event?: FocusEvent): void; onTrailingIconClick(event: MouseEvent): void; getCalendarDays(): (Date | null)[]; isToday(date: Date): boolean; isSelected(date: Date): boolean; isInRange(date: Date): boolean; isRangeStart(date: Date): boolean; isRangeEnd(date: Date): boolean; isDisabled(date: Date): boolean; onDayMouseDown(day: Date, event: MouseEvent): void; selectDate(date: Date, event?: MouseEvent): void; trackByDate(index: number, day: Date | null): string; previousMonth(event?: MouseEvent): void; nextMonth(event?: MouseEvent): void; goToToday(): void; clearValue(): void; formatDate(date: Date): string; private updateDisplay; getMonthName(): string; getYear(): number; getDayNames(): string[]; get containerClasses(): string; get hasErrorState(): boolean; getCurrentYear(): number; isCurrentYear(year: number): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Dropdown menu item types */ type DropdownMenuItem = { /** Unique identifier for the menu item */ id?: string | number; /** Display label for the menu item */ label: string; /** Optional icon name from the SEFIN UI icon library (e.g., 'home', 'edit', 'settings', 'chevron-right') */ icon?: string; /** Whether the item is disabled */ disabled?: boolean; /** Whether the item is a divider (separator) */ divider?: false; /** Optional submenu items */ submenu?: DropdownMenuItem[]; /** Optional action handler */ action?: () => void; /** Optional CSS class for the item */ class?: string; /** Optional data attributes */ data?: Record; } | { /** Whether the item is a divider (separator) */ divider: true; /** Unique identifier for the menu item (optional for dividers) */ id?: string | number; /** Optional CSS class for the item */ class?: string; /** Optional data attributes */ data?: Record; }; /** * Type guard to check if an item is not a divider */ declare function isMenuItem(item: DropdownMenuItem): item is Extract; type DropdownMenuPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end'; type DropdownMenuSize = 'sm' | 'md' | 'lg'; /** * Header information for dropdown menu */ interface DropdownMenuHeader { /** Primary text (e.g., user name) */ title: string; /** Secondary text (e.g., email, role) */ subtitle?: string; /** Optional icon name */ icon?: string; } declare class DropdownMenuComponent implements OnInit, OnDestroy { containerRef?: ElementRef; menuRef?: ElementRef; triggerRef?: ElementRef; /** Menu items to display */ items: DropdownMenuItem[]; /** Optional header information (e.g., user profile) */ header?: DropdownMenuHeader; /** Whether the dropdown is disabled */ disabled: boolean; /** Placement of the dropdown menu relative to trigger */ placement: DropdownMenuPlacement; /** Size of the menu items */ size: DropdownMenuSize; /** Whether the menu is open by default */ open: boolean; /** Whether to close menu when an item is clicked */ closeOnClick: boolean; /** Custom trigger element template (via content projection) */ triggerTemplate?: TemplateRef; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when menu opens */ opened: EventEmitter; /** Event emitted when menu closes */ closed: EventEmitter; /** Event emitted when a menu item is clicked */ itemClicked: EventEmitter; isOpen: boolean; selectedIndex: number; activeSubmenuIndex: number | null; ngOnInit(): void; ngOnDestroy(): void; onClickOutside(event: MouseEvent): void; onKeyDown(event: KeyboardEvent): void; toggleMenu(): void; openMenu(): void; closeMenu(): void; handleItemClick(item: DropdownMenuItem): void; toggleSubmenu(index: number): void; openSubmenu(index: number): void; closeSubmenu(): void; navigateDown(): void; navigateUp(): void; scrollToSelected(): void; getVisibleItems(): Array>; get containerClasses(): string; get menuClasses(): string; getItemClasses(item: DropdownMenuItem, index: number): string; getSubmenuClasses(item: DropdownMenuItem, index: number): string; getIconSize(): 'xs' | 'sm' | 'md' | 'lg' | 'xl'; getIconWrapperClasses(item: DropdownMenuItem): string; getItemIcon(item: DropdownMenuItem): string | undefined; getItemLabel(item: DropdownMenuItem): string; getItemSubmenu(item: DropdownMenuItem): DropdownMenuItem[]; hasSubmenu(item: DropdownMenuItem): boolean; isItemDisabled(item: DropdownMenuItem): boolean; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type FormFieldVariant = 'outlined' | 'filled' | 'standard'; type FormFieldSize = 'sm' | 'md' | 'lg'; type FormFieldType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'; declare class FormFieldComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy { private cdr; inputRef?: ElementRef; /** Label text for the field */ label: string; /** FormField variant style. Options: 'outlined' | 'filled' | 'standard' */ variant: FormFieldVariant; /** FormField size. Options: 'sm' | 'md' | 'lg' */ size: FormFieldSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Input type. Options: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' */ type: FormFieldType; /** Placeholder text */ placeholder: string; /** Helper text shown below the input */ hint: string; /** Whether the field is in error state (can be set by parent for external validation) */ error: boolean; /** Error message to display */ errorMessage: string; /** Whether the field is required */ required: boolean; /** Whether the field is disabled */ disabled: boolean; /** Whether the field is readonly */ readonly: boolean; /** Maximum length of the input */ maxLength?: number; /** Minimum length of the input */ minLength?: number; /** Pattern for validation (regex string) */ pattern?: string; /** Leading icon name */ leadingIcon?: string; /** Trailing icon name */ trailingIcon?: string; /** Whether to show character counter */ showCounter: boolean; /** Autocomplete attribute */ autocomplete?: string; /** Input name attribute */ name: string; /** Input id attribute */ id: string; /** Additional CSS classes */ class: string; /** Custom validation function */ customValidator?: (value: string) => string | null; /** Event emitted when the value changes */ valueChange: EventEmitter; /** Event emitted when the input is focused */ focused: EventEmitter; /** Event emitted when the input is blurred */ blurred: EventEmitter; /** Event emitted when trailing icon is clicked */ trailingIconClick: EventEmitter; value: string; isFocused: boolean; hasError: boolean; internalErrorMessage: string; internalId: string; private onChange; private onTouched; private destroy$; private control?; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; private generateIdIfNeeded; get fieldId(): string; get labelId(): string; get inputId(): string; get hintId(): string; onInput(event: Event): void; onFocus(event: FocusEvent): void; onBlur(event: FocusEvent): void; onTrailingIconClick(event: MouseEvent): void; private validateField; /** True when the field should show error state (internal validation, explicit error flag, or external errorMessage) */ get hasErrorState(): boolean; get displayError(): boolean; get displayErrorMessage(): string; get characterCount(): number; get formFieldClasses(): string; writeValue(value: string | null | undefined): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; validate(control: AbstractControl): ValidationErrors | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type PaginationSize = 'sm' | 'md' | 'lg'; type PaginationVariant = 'default' | 'compact'; declare class PaginationComponent { /** Current page (1-based) */ set currentPage(value: number); get currentPage(): number; private _currentPage; /** Total number of pages */ set totalPages(value: number); get totalPages(): number; private _totalPages; /** Total number of items (alternative to totalPages) */ set totalItems(value: number | undefined); get totalItems(): number | undefined; private _totalItems; /** Items per page (used when totalItems is provided) */ itemsPerPage: number; /** Number of page buttons to show on each side of current page */ siblingCount: number; /** Show first and last page buttons */ showFirstLast: boolean; /** Show previous and next buttons */ showPrevNext: boolean; /** Pagination size. Options: 'sm' | 'md' | 'lg' */ size: PaginationSize; /** Pagination variant. Options: 'default' | 'compact' */ variant: PaginationVariant; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when page changes */ pageChange: EventEmitter; /** Computed total pages (from totalItems or direct input) */ readonly computedTotalPages: i0.Signal; /** Computed page numbers to display */ readonly pageNumbers: i0.Signal<(string | number)[]>; get paginationClasses(): string; isDisabled(direction: 'prev' | 'next'): boolean; goToPage(page: number | string): void; goToPrevious(): void; goToNext(): void; goToFirst(): void; goToLast(): void; isEllipsis(item: number | string): boolean; isCurrentPage(page: number | string): boolean; getAriaCurrent(page: number | string): string | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type TextareaVariant = 'outlined' | 'filled' | 'standard'; type TextareaSize = 'sm' | 'md' | 'lg'; declare class TextareaComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy { textareaRef?: ElementRef; /** Textarea variant style. Options: 'outlined' | 'filled' | 'standard' */ variant: TextareaVariant; /** Textarea size. Options: 'sm' | 'md' | 'lg' */ size: TextareaSize; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Placeholder text */ placeholder: string; /** Helper text shown below the textarea */ hint: string; /** Whether the field is in error state (can be set by parent for external validation) */ error: boolean; /** Error message to display */ errorMessage: string; /** Whether the field is required */ required: boolean; /** Whether the field is disabled */ disabled: boolean; /** Whether the field is readonly */ readonly: boolean; /** Maximum length of the input */ maxLength?: number; /** Minimum length of the input */ minLength?: number; /** Pattern for validation (regex string) */ pattern?: string; /** Number of visible text lines */ rows: number; /** Number of visible text columns */ cols?: number; /** Whether to auto-resize based on content */ autoResize: boolean; /** Minimum height when auto-resize is enabled */ minHeight?: number; /** Maximum height when auto-resize is enabled */ maxHeight?: number; /** Whether to show character counter */ showCounter: boolean; /** Autocomplete attribute */ autocomplete?: string; /** Textarea name attribute */ name: string; /** Textarea id attribute */ id: string; /** Additional CSS classes */ class: string; /** Custom validation function */ customValidator?: (value: string) => string | null; /** Initial value for the textarea (for non-reactive forms) */ set value(val: string); get value(): string; /** Event emitted when the value changes */ valueChange: EventEmitter; /** Event emitted when the textarea is focused */ focused: EventEmitter; /** Event emitted when the textarea is blurred */ blurred: EventEmitter; private _value; isFocused: boolean; hasError: boolean; internalErrorMessage: string; currentHeight: number; private onChange; private onTouched; private destroy$; private control?; ngOnInit(): void; ngAfterViewInit(): void; ngOnDestroy(): void; private generateIdIfNeeded; onInput(event: Event): void; onFocus(event: FocusEvent): void; onBlur(event: FocusEvent): void; private adjustHeight; private validateField; /** True when the field should show error state (internal validation, explicit error flag, or external errorMessage) */ get hasErrorState(): boolean; get displayError(): boolean; get displayErrorMessage(): string; get characterCount(): number; get textareaClasses(): string; writeValue(value: string): void; registerOnChange(fn: (value: string) => void): void; registerOnTouched(fn: () => void): void; setDisabledState(isDisabled: boolean): void; validate(control: AbstractControl): ValidationErrors | null; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full'; declare class ModalComponent implements OnChanges { private cdr; /** Whether the modal is open */ isOpen: boolean; /** Modal size. Options: 'sm' | 'md' | 'lg' | 'xl' | 'full' */ size: ModalSize; /** Whether to show overlay backdrop */ showOverlay: boolean; /** Whether to close on overlay click */ closeOnOverlayClick: boolean; /** Whether to close on escape key */ closeOnEscape: boolean; /** Whether to show close button */ showCloseButton: boolean; /** Modal title (optional) */ title?: string; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Additional CSS classes */ class: string; /** Event emitted when modal opens */ opened: EventEmitter; /** Event emitted when modal closes */ closed: EventEmitter; constructor(cdr: ChangeDetectorRef); ngOnChanges(changes: SimpleChanges): void; /** Overlay click handler */ handleOverlayClick(): void; /** Close handler */ handleClose(): void; /** Close button click handler */ handleCloseButtonClick(event: MouseEvent): void; /** Escape key handler */ handleEscapeKey(event: KeyboardEvent): void; /** Get modal container classes */ get modalClasses(): string; /** Get overlay classes */ get overlayClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Full-page loading screen that acts as a blocking backdrop. * Displays a title and cycles through an array of messages with animation. */ declare class LoadingScreenComponent implements OnInit, OnChanges, OnDestroy { private cdr; /** Whether the loading screen is visible (backdrop blocks the page). */ visible: boolean; /** Title shown above the messages. */ title: string; /** Array of messages to cycle through. If empty, no message line is shown. */ messages: string[]; /** Interval in ms between message changes. Default: 3000. */ messageIntervalMs: number; /** Additional CSS classes for the panel container. */ class: string; /** Current message index for cycling. */ currentMessageIndex: number; /** Whether the current message is animating in (for CSS transition). */ messageVisible: boolean; private intervalId; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; ngOnDestroy(): void; /** Start cycling through messages when visible and messages exist. */ private startMessageCycle; private clearMessageCycle; /** Get current message to display. */ get currentMessage(): string; get overlayClasses(): string; get panelClasses(): string; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Column type for table cells */ type TableColumnType = 'text' | 'number' | 'date' | 'badge' | 'actions'; /** * Text alignment options */ type TableColumnAlign = 'left' | 'center' | 'right'; /** * Sort direction */ type SortDirection = 'asc' | 'desc' | ''; /** * Table column definition */ interface TableColumn { /** Unique key for the column (should match a property in data objects) */ key: string; /** Column header label */ header: string; /** Column type for formatting/rendering */ type?: TableColumnType; /** Text alignment */ align?: TableColumnAlign; /** Column width (CSS value, e.g., '100px', '20%') */ width?: string; /** Whether column is sortable */ sortable?: boolean; /** Whether column is sticky (e.g., first/last column) */ sticky?: boolean; /** Whether column sticks to left or right when sticky */ stickyEnd?: boolean; /** Custom cell template */ cellTemplate?: TemplateRef; } /** * Table density mode */ type TableDensity = 'compact' | 'comfortable'; /** * Selection mode */ type SelectionMode = 'single' | 'multiple'; /** * Page change event payload */ interface PageChangeEvent { pageIndex: number; pageSize: number; } /** * Sort change event payload */ interface SortChangeEvent { active: string; direction: SortDirection; } /** * Helper function to build displayed columns array including selection and actions */ declare function buildDisplayedColumns(columns: TableColumn[], selectable: boolean, hasActions: boolean): string[]; declare class TableComponent implements OnInit, OnChanges { private cdr; /** Column definitions */ columns: TableColumn[]; /** Table data */ set data(value: any[]); /** Internal signal for data so computed signals react to Input changes (OnPush + computed require signal deps) */ private readonly dataSignal; /** Property key used for tracking rows (default: 'id') */ trackByKey: string; /** Empty state message */ emptyText: string; /** Table density */ density: TableDensity; /** Striped rows */ striped: boolean; /** Row hover effect */ hover: boolean; /** Enable row selection */ selectable: boolean; /** Selection mode: 'single' or 'multiple' */ selectionMode: SelectionMode; /** * When true, clicking a row selects it (single selection) and keeps it visually selected. * Emits the selected item via selectedRowChange and selectionChanged. * Works with or without selectable (checkbox column); when used without selectable, only row click selects. */ selectRowOnClick: boolean; /** Enable pagination */ pagination: boolean; /** Page size options */ pageSizeOptions: number[]; /** Current page size */ pageSize: number; /** * Current page (1-based). When set, keeps the table in sync with parent (e.g. server-side pagination). * Required for server-side mode: pass the parent's page number so the pagination UI stays in sync * when data refreshes or the parent resets the page. If not set, the table manages page internally. */ set currentPageInput(value: number | undefined); /** Total items (for server-side mode) */ total: number | undefined; /** Enable sorting */ sort: boolean; /** Server-side mode (don't slice data locally) */ serverSide: boolean; /** Sticky header */ stickyHeader: boolean; /** Header actions template slot */ headerActionsTemplate?: TemplateRef; /** Empty state icon template slot */ emptyIconTemplate?: TemplateRef; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Row clicked event */ rowClicked: EventEmitter; /** Selection changed event */ selectionChanged: EventEmitter; /** * Emits the single selected row when selectRowOnClick is true and the user clicks a row. * Convenience output for row-click selection; selectionChanged also emits with [row]. */ selectedRowChange: EventEmitter; /** Page changed event */ pageChanged: EventEmitter; /** Sort changed event */ sortChanged: EventEmitter; /** Host class when empty - ensures table does not shrink below empty state in flex contexts */ get isEmptyHostClass(): boolean; readonly selectedItems: i0.WritableSignal; readonly currentSortColumn: i0.WritableSignal; readonly currentSortDirection: i0.WritableSignal; readonly currentPage: i0.WritableSignal; readonly currentPageSize: i0.WritableSignal; readonly sortedData: i0.Signal; readonly paginatedData: i0.Signal; readonly displayedData: i0.Signal; readonly totalPages: i0.Signal; readonly isEmpty: i0.Signal; readonly hasActionsColumn: i0.Signal; readonly totalColspan: i0.Signal; readonly isAllSelected: i0.Signal; readonly isIndeterminate: i0.Signal; readonly sortIcons: { readonly unsorted: "M3 4.5L6 1.5L9 4.5M3 7.5L6 10.5L9 7.5"; readonly ascending: "M3 7.5L6 4.5L9 7.5"; readonly descending: "M3 4.5L6 7.5L9 4.5"; }; constructor(cdr: ChangeDetectorRef); ngOnInit(): void; ngOnChanges(changes: SimpleChanges): void; /** * Validates component inputs and logs warnings for invalid configurations * @private */ private validateInputs; trackByFn(index: number, item: any): any; /** * Gets the cell value from a row, supporting nested property paths (e.g., 'user.name') * @param row - The row data object * @param column - The column definition * @returns The cell value or undefined if not found */ getCellValue(row: any, column: TableColumn): any; /** * Formats a cell value based on its type * @param value - The value to format * @param type - The column type * @param column - Optional column definition for additional formatting options * @returns Formatted string representation */ formatCellValue(value: any, type?: TableColumnType, column?: TableColumn): string; /** * Parses a value into a Date object * @param value - The value to parse (Date, string, or number timestamp) * @returns A Date object */ private parseDate; onRowClick(row: any): void; /** * Handles column sorting when header is clicked * @param column - The column to sort by * @param event - Optional keyboard event for accessibility */ onSort(column: TableColumn, event?: KeyboardEvent): void; onPageChange(page: number): void; isSelected(row: any): boolean; /** * Toggles the selection state of a row * @param checked - Whether the row should be selected * @param row - The row to toggle selection for */ toggleRowSelection(checked: boolean, row?: any): void; /** * Toggles selection for all rows on the current page * @param checked - Whether all rows should be selected */ toggleSelectAll(checked: boolean): void; /** * Gets the unique identifier for an item using the trackByKey * @param item - The item to get the ID for * @returns The item's ID or the item itself if no ID property exists * @private */ private getItemId; /** * Gets CSS classes for a column cell * @param column - The column definition * @returns Space-separated string of CSS classes */ getColumnClass(column: TableColumn): string; /** * Gets CSS classes for the table element * @returns Space-separated string of CSS classes */ getTableClasses(): string; /** Gets CSS classes for the table container (includes border radius) */ getContainerClasses(): string; /** * Gets the width CSS value for a column. * With table-layout: auto, only explicit widths are set; columns without width * let the browser distribute space based on content needs. * @param column - The column definition * @returns The width value when explicitly set, undefined otherwise */ getColumnWidth(column: TableColumn): string | undefined; /** * Gets the appropriate sort icon path for a column * @param column - The column to get the icon for * @returns The SVG path string for the sort icon */ getSortIconPath(column: TableColumn): string; /** * Determines if a column should show the unsorted icon * @param column - The column to check * @returns True if unsorted icon should be shown */ showUnsortedIcon(column: TableColumn): boolean; /** * Determines if a column should show the ascending icon * @param column - The column to check * @returns True if ascending icon should be shown */ showAscendingIcon(column: TableColumn): boolean; /** * Determines if a column should show the descending icon * @param column - The column to check * @returns True if descending icon should be shown */ showDescendingIcon(column: TableColumn): boolean; /** * Gets the ARIA sort state for a column * @param column - The column to get the sort state for * @returns The ARIA sort value ('ascending', 'descending', or 'none') */ getAriaSort(column: TableColumn): string; /** * Gets the ARIA label for a sortable column header * @param column - The column to get the label for * @returns The ARIA label string or null if not sortable */ getSortAriaLabel(column: TableColumn): string | null; /** * Generates page numbers array for pagination display * This method is currently not used in the template but kept for potential future use * @returns Array of page numbers and ellipsis strings */ getPageNumbers(): (number | string)[]; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Sidebar navigation item interface */ interface NavItem { /** Label text for the navigation item */ label: string; /** Route path for navigation */ route?: string; /** Icon name from lucide icons */ icon?: string; /** Child navigation items */ children?: NavItem[]; /** Whether the item is expanded (for items with children) */ expanded?: boolean; } declare class SidebarComponent implements OnInit, OnDestroy, OnChanges { private router; private cdr; private sanitizer; /** Navigation items array */ navItems: NavItem[]; /** Mobile mode flag */ isMobile: boolean | null; /** Sidebar open state (for mobile) */ isOpen: boolean; /** Sidebar collapsed state (for desktop) */ isCollapsed: boolean; /** Header title text */ headerTitle: string; /** Header subtitle text */ headerSubtitle: string; /** Header icon name */ headerIcon: string; /** Footer version text */ footerVersion: string; /** Show footer */ showFooter: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Toggle collapse event */ toggleCollapse: EventEmitter; /** Toggle open event (for mobile) */ toggleOpen: EventEmitter; /** Close event (for mobile) */ close: EventEmitter; currentRoute: string; private routerSubscription?; private mediaQueryHandler?; private mediaQuery?; private _autoDetectedMobile; get effectiveIsMobile(): boolean; readonly primaryColor = "#55C3D8"; readonly textColor = "#383838"; constructor(router: Router, cdr: ChangeDetectorRef, sanitizer: DomSanitizer); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngOnDestroy(): void; updateExpandedStates(): void; hasActiveChild(item: NavItem, currentRoute: string): boolean; toggleExpand(item: NavItem): void; isActive(route: string): boolean; navigate(route: string): void; hasChildren(item: NavItem): boolean; handleToggleCollapse(): void; handleToggleOpen(): void; handleClose(): void; /** * Get SVG icon as SafeHtml based on icon name */ getIconSvg(iconName: string, size?: number): SafeHtml; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * Drawer position/anchor type */ type DrawerPosition = 'left' | 'right' | 'top' | 'bottom'; /** * Directive to mark a custom close control for the drawer. * When content is projected with this directive, the default close button is not shown. * Use it on the element that should act as the close trigger, e.g.: * */ declare class DrawerCloseDirective { static ɵfac: i0.ɵɵFactoryDeclaration; static ɵdir: i0.ɵɵDirectiveDeclaration; } declare class DrawerComponent { /** Drawer open state */ isOpen: boolean; /** Drawer position/anchor (left, right, top, bottom) */ position: DrawerPosition; /** Minimum drawer width (for left/right positions) */ minWidth: string; /** Minimum drawer height (for top/bottom positions) */ minHeight: string; /** Whether to show overlay backdrop */ showOverlay: boolean; /** Whether to close on overlay click */ closeOnOverlayClick: boolean; /** Whether to close on escape key */ closeOnEscape: boolean; /** * Whether to show the default close button in the drawer header. * When false, the user can add their own close button inside the drawer content * or project a custom close control via the sefinDrawerClose slot. */ showCloseButton: boolean; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Close event */ close: EventEmitter; /** Custom close control projected with sefinDrawerClose directive; when set, default button is hidden */ customClose?: DrawerCloseDirective; /** Overlay click handler */ handleOverlayClick(): void; /** Close handler */ handleClose(): void; /** Escape key handler */ handleEscapeKey(event: KeyboardEvent): void; /** Get drawer container classes */ get drawerClasses(): string; /** Whether the user projected a custom close control (then we do not show the default button) */ get hasCustomClose(): boolean; /** Get drawer container styles */ get drawerStyles(): Record; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } declare class AppBarComponent implements OnInit, OnDestroy, OnChanges { private sanitizer; /** App bar title */ title: string; /** App bar subtitle */ subtitle?: string; /** Logo icon name */ logoIcon?: string; /** Logo image URL */ logoImage?: string; /** Show menu button */ showMenuButton: boolean; /** Mobile mode flag */ isMobile: boolean | null; /** App bar actions */ actions: Array<{ icon: string; label: string; disabled?: boolean; class?: string; }>; /** Elevation level (0-24) */ elevation: number; /** Border radius. Options: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'. Default: md */ borderRadius: BorderRadiusSize; /** Menu button clicked event */ menuClicked: EventEmitter; /** Action clicked event */ actionClicked: EventEmitter<{ icon: string; label: string; }>; private _autoDetectedMobile; private mediaQueryHandler?; private mediaQuery?; get effectiveIsMobile(): boolean; readonly primaryColor = "#55C3D8"; readonly textColor = "#383838"; constructor(sanitizer: DomSanitizer); ngOnChanges(changes: SimpleChanges): void; ngOnInit(): void; ngOnDestroy(): void; handleMenuClick(): void; handleActionClick(action: { icon: string; label: string; }): void; /** * Get SVG icon as SafeHtml based on icon name */ getIconSvg(iconName: string, size?: number): SafeHtml; static ɵfac: i0.ɵɵFactoryDeclaration; static ɵcmp: i0.ɵɵComponentDeclaration; } /** * App bar action button interface */ interface AppBarAction { /** Icon name from lucide icons */ icon: string; /** Action label for accessibility */ label: string; /** Whether the action is disabled */ disabled?: boolean; /** Custom CSS class */ class?: string; } declare const STYLES_PATH = "./styles/index.scss"; export { AccordionItemComponent, AlertComponent, AppBarComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, CHIP_HEIGHT_TOKENS, COLOR_TOKENS, COMPONENT_HEIGHT_TOKENS, CONTROL_SIZE_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, DrawerCloseDirective, DrawerComponent, DropdownMenuComponent, FabButtonComponent, FormFieldComponent, GridComponent, ICON_SIZE_TOKENS, INPUT_HEIGHT_TOKENS, IconButtonComponent, IconComponent, IconTileComponent, ImageComponent, LIGHT_THEME, LinkComponent, LoadingScreenComponent, ModalComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SidebarComponent, SkeletonComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TableComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, buildDisplayedColumns, isMenuItem }; export type { AlertSize, AlertVariant, AppBarAction, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusSize, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonIconPosition, ButtonRounded, ButtonSize, ButtonVariant, CardRounded, CardVariant, ChipHeightToken, ChipSize, ChipVariant, ColorShade, ColorTokenName, ComponentHeightToken, ContainerLayout, ContainerSize, ContainerVariant, ControlSizeToken, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, DrawerPosition, DropdownMenuHeader, DropdownMenuItem, DropdownMenuPlacement, DropdownMenuSize, FabSize, FormFieldSize, FormFieldType, FormFieldVariant, GridAlign, GridGap, GridJustify, IconSize, IconSizeToken, IconTileShape, IconTileSize, IconTileVariant, ImageFit, ImageLoading, ImageRounded, InputHeightToken, InputSize, LinkIconPosition, LinkSize, LinkVariant, ModalSize, NavItem, PageChangeEvent, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, SelectionMode, ShadowToken, SkeletonAnimation, SkeletonShape, SkeletonSize, SortChangeEvent, SortDirection, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, StackBreakpoint, TabSize, TabVariant, TableColumn, TableColumnAlign, TableColumnType, TableDensity, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipFixedPosition, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };