@lesterarte/sefin-ui 0.0.3-dev.0 → 0.0.3-dev.10

package/types/lesterarte-sefin-ui.d.ts

@@ -1,6 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter } from '@angular/core';
-import { ControlValueAccessor } from '@angular/forms';
+import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, SimpleChanges } from '@angular/core';
 
 /**
  * Color design tokens as TypeScript constants
@@ -437,6 +436,124 @@ declare const BRAND_THEME: {
 
 type Theme = 'light' | 'dark' | 'brand';
 
+/**
+ * Shared types and interfaces
+ */
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type InputSize = 'sm' | 'md' | 'lg';
+type CardVariant = 'default' | 'elevated' | 'outlined';
+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
@@ -444,28 +561,26 @@ type Theme = 'light' | 'dark' | 'brand';
 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 loadTheme(themeName?: Theme): void;
+    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): string;
-}
-
-/**
- * Shared types and interfaces
- */
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-type ButtonSize = 'sm' | 'md' | 'lg';
-type InputSize = 'sm' | 'md' | 'lg';
-type CardVariant = 'default' | 'elevated' | 'outlined';
-interface BaseComponent {
-    disabled?: boolean;
-    class?: string;
+    static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): string;
 }
 
 declare class ButtonComponent {
@@ -481,125 +596,49 @@ declare class ButtonComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "sefin-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
-declare class IconComponent {
-    name: string;
-    size: 'sm' | 'md' | 'lg';
-    class: string;
-    get iconClasses(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sefin-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
-}
-
-declare class InputComponent implements ControlValueAccessor {
-    type: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    placeholder: string;
-    size: InputSize;
-    disabled: boolean;
-    required: boolean;
-    readonly: boolean;
-    class: string;
-    id: string;
-    blur: EventEmitter<FocusEvent>;
-    focus: EventEmitter<FocusEvent>;
-    value: string;
-    private onChange;
-    private onTouched;
-    onInput(event: Event): void;
-    onBlur(event: FocusEvent): void;
-    onFocus(event: FocusEvent): void;
-    writeValue(value: string): void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    get inputClasses(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<InputComponent, "sefin-input", never, { "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "required": { "alias": "required"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "class": { "alias": "class"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "blur": "blur"; "focus": "focus"; }, never, never, true, never>;
-}
-
-declare class FormFieldComponent {
+interface AutocompleteOption {
+    value: string | number;
     label: string;
-    hint: string;
-    error: string;
-    required: boolean;
-    disabled: boolean;
-    inputId: string;
-    inputType: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
-    placeholder: string;
-    size: 'sm' | 'md' | 'lg';
-    static ɵfac: i0.ɵɵFactoryDeclaration<FormFieldComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormFieldComponent, "sefin-form-field", never, { "label": { "alias": "label"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "error": { "alias": "error"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "inputType": { "alias": "inputType"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
-}
-
-interface DropdownOption {
-    label: string;
-    value: any;
     disabled?: boolean;
 }
-declare class DropdownComponent {
-    options: DropdownOption[];
+declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
+    inputRef?: ElementRef<HTMLInputElement>;
+    dropdownRef?: ElementRef<HTMLDivElement>;
+    containerRef?: ElementRef<HTMLDivElement>;
+    options: AutocompleteOption[];
     placeholder: string;
     disabled: boolean;
-    size: 'sm' | 'md' | 'lg';
-    selectionChange: EventEmitter<any>;
-    isOpen: boolean;
-    selectedOption: DropdownOption | null;
-    toggle(): void;
-    selectOption(option: DropdownOption): void;
-    get displayText(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<DropdownComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DropdownComponent, "sefin-dropdown", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, never, true, never>;
-}
-
-declare class CardComponent {
-    variant: CardVariant;
+    size: InputSize;
     class: string;
-    get cardClasses(): string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<CardComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<CardComponent, "sefin-card", never, { "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
-}
-
-declare class HeaderComponent {
-    title: string;
-    logo: string;
-    showUserMenu: boolean;
-    userName: string;
-    logoClick: EventEmitter<void>;
-    menuClick: EventEmitter<void>;
-    userMenuClick: EventEmitter<void>;
-    static ɵfac: i0.ɵɵFactoryDeclaration<HeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<HeaderComponent, "sefin-header", never, { "title": { "alias": "title"; "required": false; }; "logo": { "alias": "logo"; "required": false; }; "showUserMenu": { "alias": "showUserMenu"; "required": false; }; "userName": { "alias": "userName"; "required": false; }; }, { "logoClick": "logoClick"; "menuClick": "menuClick"; "userMenuClick": "userMenuClick"; }, never, never, true, never>;
-}
-
-interface LoginCredentials {
-    email: string;
-    password: string;
-}
-declare class LoginFormComponent {
-    email: string;
-    password: string;
-    error: string;
-    submit: EventEmitter<LoginCredentials>;
-    onSubmit(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<LoginFormComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LoginFormComponent, "sefin-login-form", never, {}, { "submit": "submit"; }, never, never, true, never>;
-}
-
-interface ToolbarAction {
-    label: string;
-    icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
-    action: () => void;
-}
-declare class ToolbarComponent {
-    title: string;
-    actions: ToolbarAction[];
-    actionClick: EventEmitter<ToolbarAction>;
-    onActionClick(action: ToolbarAction): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "sefin-toolbar", never, { "title": { "alias": "title"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; }, { "actionClick": "actionClick"; }, never, never, true, never>;
+    value: string | number | null;
+    minChars: number;
+    maxResults: number;
+    valueChange: EventEmitter<string | number>;
+    optionSelected: EventEmitter<AutocompleteOption>;
+    inputChange: EventEmitter<string>;
+    searchText: string;
+    filteredOptions: AutocompleteOption[];
+    isOpen: boolean;
+    selectedIndex: number;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    onClickOutside(event: MouseEvent): void;
+    onInputChange(value: string): void;
+    filterOptions(): void;
+    selectOption(option: AutocompleteOption): void;
+    onInputFocus(): void;
+    onInputBlur(): void;
+    onKeyDown(event: KeyboardEvent): void;
+    private scrollToSelected;
+    clearValue(): void;
+    get inputClasses(): string;
+    get containerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteComponent, "sefin-autocomplete", never, { "options": { "alias": "options"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; "value": { "alias": "value"; "required": false; }; "minChars": { "alias": "minChars"; "required": false; }; "maxResults": { "alias": "maxResults"; "required": false; }; }, { "valueChange": "valueChange"; "optionSelected": "optionSelected"; "inputChange": "inputChange"; }, never, never, true, never>;
 }
 
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, CardComponent, DARK_THEME, DESIGN_TOKENS, DropdownComponent, FormFieldComponent, HeaderComponent, IconComponent, InputComponent, LIGHT_THEME, LoginFormComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, TYPOGRAPHY_TOKENS, ThemeLoader, ToolbarComponent };
-export type { BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, DropdownOption, InputSize, LoginCredentials, ShadowToken, SpacingToken, Theme, ToolbarAction, TypographyToken };
+export { AutocompleteComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, DARK_THEME, DESIGN_TOKENS, LIGHT_THEME, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, TYPOGRAPHY_TOKENS, ThemeLoader };
+export type { AutocompleteOption, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, CustomTheme, InputSize, ShadowToken, SpacingToken, Theme, ThemeColors, TypographyToken };