@lesterarte/sefin-ui 0.0.18-dev.0 → 0.0.19-dev.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.18-dev.0",
+  "version": "0.0.19-dev.0",
   "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

@@ -1113,6 +1113,7 @@ declare class ToastComponent implements OnInit, OnDestroy {
     private clearExitAnimation;
     pauseTimer(): void;
     resumeTimer(): void;
+    onCloseClick(event: MouseEvent): void;
     dismiss(): void;
     get toastClasses(): string;
     get iconName(): string;
@@ -1203,6 +1204,69 @@ declare class TextFieldComponent implements ControlValueAccessor, Validator, OnI
     static ɵcmp: i0.ɵɵComponentDeclaration<TextFieldComponent, "sefin-textfield", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "hint": { "alias": "hint"; "required": false; }; "errorMessage": { "alias": "errorMessage"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; "minLength": { "alias": "minLength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "leadingIcon": { "alias": "leadingIcon"; "required": false; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; }; "showCounter": { "alias": "showCounter"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "class": { "alias": "class"; "required": false; }; "customValidator": { "alias": "customValidator"; "required": false; }; }, { "valueChange": "valueChange"; "focused": "focused"; "blurred": "blurred"; "trailingIconClick": "trailingIconClick"; }, never, never, true, never>;
 }
 
+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;
+    /** Whether the image should have rounded corners. Options: 'none' | 'sm' | 'md' | 'lg' | 'full' */
+    rounded: 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<ImageComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ImageComponent, "sefin-image", never, { "src": { "alias": "src"; "required": false; }; "alt": { "alias": "alt"; "required": false; }; "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; "fit": { "alias": "fit"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "aspectRatio": { "alias": "aspectRatio"; "required": false; }; "fallback": { "alias": "fallback"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "sizes": { "alias": "sizes"; "required": false; }; "srcset": { "alias": "srcset"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+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<boolean>;
+    onHeaderClick(): void;
+    get accordionClasses(): string;
+    get headerClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AccordionItemComponent, "sefin-accordion-item", never, { "title": { "alias": "title"; "required": false; }; "expanded": { "alias": "expanded"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "toggle": "toggle"; }, never, ["*"], true, never>;
+}
+
 interface AutocompleteOption {
     value: string | number;
     label: string;
@@ -1227,12 +1291,14 @@ declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
     filteredOptions: AutocompleteOption[];
     isOpen: boolean;
     selectedIndex: number;
+    private isSelectingOption;
     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;
@@ -1436,5 +1502,5 @@ declare class TextareaComponent implements ControlValueAccessor, Validator, OnIn
 
 declare const STYLES_PATH = "./styles/index.scss";
 
-export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
-export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, IconSize, InputSize, LinkSize, LinkVariant, ProgressBarSize, ProgressBarVariant, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, ProgressBarSize, ProgressBarVariant, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };