@lesterarte/sefin-ui 0.0.3-dev.20 → 0.0.3-dev.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.3-dev.20",
+  "version": "0.0.3-dev.21",
   "description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
   "keywords": [
     "angular",

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, SimpleChanges, AfterViewInit } from '@angular/core';
+import { EventEmitter, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 
 /**
@@ -589,6 +589,48 @@ declare class ThemeLoader {
     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;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "sefin-avatar", never, { "size": { "alias": "size"; "required": false; }; "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+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;
+    /** Additional CSS classes */
+    class: string;
+    get badgeClasses(): string;
+    get displayValue(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BadgeComponent, "sefin-badge", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "dot": { "alias": "dot"; "required": false; }; "max": { "alias": "max"; "required": false; }; "value": { "alias": "value"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class ButtonComponent {
     /** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
     variant: ButtonVariant;
@@ -629,6 +671,51 @@ declare class IconButtonComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<IconButtonComponent, "sefin-icon-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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
+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;
+    clicked: EventEmitter<MouseEvent>;
+    onClick(event: MouseEvent): void;
+    get buttonClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<FabButtonComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FabButtonComponent, "sefin-fab-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; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+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;
+    /** Additional CSS classes */
+    class: string;
+    removed: EventEmitter<MouseEvent>;
+    clicked: EventEmitter<MouseEvent>;
+    onRemove(event: MouseEvent): void;
+    onClick(event: MouseEvent): void;
+    get chipClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChipComponent, "sefin-chip", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "removed": "removed"; "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
 type LinkVariant = 'default' | 'primary' | 'secondary' | 'underline';
 type LinkSize = 'sm' | 'md' | 'lg';
 declare class LinkComponent {
@@ -670,48 +757,6 @@ declare class StackComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<StackComponent, "sefin-stack", never, { "direction": { "alias": "direction"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "align": { "alias": "align"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
-interface AutocompleteOption {
-    value: string | number;
-    label: string;
-    disabled?: boolean;
-}
-declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
-    inputRef?: ElementRef<HTMLInputElement>;
-    dropdownRef?: ElementRef<HTMLDivElement>;
-    containerRef?: ElementRef<HTMLDivElement>;
-    options: AutocompleteOption[];
-    placeholder: string;
-    disabled: boolean;
-    size: InputSize;
-    class: string;
-    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 class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
     checkboxInput?: ElementRef<HTMLInputElement>;
     size: InputSize;
@@ -815,7 +860,49 @@ declare class TypographyComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<TypographyComponent, "sefin-typography", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "weight": { "alias": "weight"; "required": false; }; "color": { "alias": "color"; "required": false; }; "lineHeight": { "alias": "lineHeight"; "required": false; }; "class": { "alias": "class"; "required": false; }; "text": { "alias": "text"; "required": false; }; }, {}, never, ["*", "*", "*", "*", "*", "*", "*", "*"], true, never>;
 }
 
+interface AutocompleteOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
+    inputRef?: ElementRef<HTMLInputElement>;
+    dropdownRef?: ElementRef<HTMLDivElement>;
+    containerRef?: ElementRef<HTMLDivElement>;
+    options: AutocompleteOption[];
+    placeholder: string;
+    disabled: boolean;
+    size: InputSize;
+    class: string;
+    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 { AutocompleteComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS, CheckboxComponent, DARK_THEME, DESIGN_TOKENS, IconButtonComponent, LIGHT_THEME, LinkComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, ThemeLoader, TypographyComponent };
-export type { AutocompleteOption, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName, CustomTheme, InputSize, LinkSize, LinkVariant, SelectOption, ShadowToken, SpacingToken, Theme, ThemeColors, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
+export { AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, DARK_THEME, DESIGN_TOKENS, FabButtonComponent, IconButtonComponent, LIGHT_THEME, LinkComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, ThemeLoader, TypographyComponent };
+export type { AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, CustomTheme, FabSize, InputSize, LinkSize, LinkVariant, SelectOption, ShadowToken, SpacingToken, Theme, ThemeColors, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };