@lesterarte/sefin-ui 0.0.20 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lesterarte/sefin-ui",
-  "version": "0.0.20",
+  "version": "0.0.23",
   "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,6 +1,7 @@
 import * as i0 from '@angular/core';
 import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef, NgZone } from '@angular/core';
 import { ControlValueAccessor, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 
 /**
  * Color design tokens as TypeScript constants
@@ -639,6 +640,8 @@ declare class ButtonComponent {
     size: ButtonSize;
     /** Whether the button is disabled */
     disabled: boolean;
+    /** Whether the button should take full width of the container */
+    fullWidth: boolean;
     /** Button type. Options: 'button' | 'submit' | 'reset' */
     type: 'button' | 'submit' | 'reset';
     /** Additional CSS classes */
@@ -647,7 +650,7 @@ declare class ButtonComponent {
     onClick(event: MouseEvent): void;
     get buttonClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    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>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "sefin-button", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "type": { "alias": "type"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
 }
 
 type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -1249,6 +1252,81 @@ declare class ImageComponent implements OnInit, OnChanges {
     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>;
 }
 
+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;
+    /** Additional CSS classes */
+    class: string;
+    clicked: EventEmitter<MouseEvent>;
+    onClick(event: MouseEvent): void;
+    get tabClasses(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabComponent, "sefin-tab", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "active": { "alias": "active"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}
+
+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<number>;
+    /** Event emitted when rating is hovered */
+    hoverChange: EventEmitter<number>;
+    /** Internal hover value */
+    private _hoverValue;
+    readonly items: i0.Signal<number[]>;
+    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<RateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RateComponent, "sefin-rate", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "allowHalf": { "alias": "allowHalf"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showText": { "alias": "showText"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "hoverChange": "hoverChange"; }, never, never, true, never>;
+}
+
+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<SpacerComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SpacerComponent, "sefin-spacer", never, { "size": { "alias": "size"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 declare class AccordionItemComponent {
     /** Title text for the accordion header */
     title: string;
@@ -1311,6 +1389,79 @@ declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
     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>;
 }
 
+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<BreadcrumbsComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BreadcrumbsComponent, "sefin-breadcrumbs", never, { "items": { "alias": "items"; "required": false; }; "separator": { "alias": "separator"; "required": false; }; "size": { "alias": "size"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+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;
+    /** Additional CSS classes */
+    class: string;
+    /** Event emitted when value changes (for segmented variant) */
+    valueChange: EventEmitter<string | number>;
+    /** Event emitted when selected values change (for multiple selection) */
+    selectedValuesChange: EventEmitter<(string | number)[]>;
+    /** Event emitted when a button is clicked */
+    buttonClick: EventEmitter<ButtonGroupOption>;
+    get buttonGroupClasses(): string;
+    isSelected(option: ButtonGroupOption): boolean;
+    onButtonClick(option: ButtonGroupOption): void;
+    getButtonClasses(option: ButtonGroupOption): string;
+    sanitizeHtml(html: string | undefined): SafeHtml | string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ButtonGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonGroupComponent, "sefin-button-group", never, { "options": { "alias": "options"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "selectedValues": { "alias": "selectedValues"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "groupVariant": { "alias": "groupVariant"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "fullWidth": { "alias": "fullWidth"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "valueChange": "valueChange"; "selectedValuesChange": "selectedValuesChange"; "buttonClick": "buttonClick"; }, never, never, true, never>;
+}
+
 declare class CardComponent {
     /** Card variant style. Options: 'default' | 'elevated' | 'outlined' */
     variant: CardVariant;
@@ -1412,6 +1563,55 @@ declare class DatepickerComponent implements OnInit, OnChanges, AfterViewInit, O
     static ɵcmp: i0.ɵɵComponentDeclaration<DatepickerComponent, "sefin-datepicker", never, { "value": { "alias": "value"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "format": { "alias": "format"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "showTodayButton": { "alias": "showTodayButton"; "required": false; }; "showClearButton": { "alias": "showClearButton"; "required": false; }; "firstDayOfWeek": { "alias": "firstDayOfWeek"; "required": false; }; }, { "valueChange": "valueChange"; "dateSelected": "dateSelected"; }, never, never, true, never>;
 }
 
+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;
+    /** Additional CSS classes */
+    class: string;
+    /** Event emitted when page changes */
+    pageChange: EventEmitter<number>;
+    /** Computed total pages (from totalItems or direct input) */
+    readonly computedTotalPages: i0.Signal<number>;
+    /** 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<PaginationComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PaginationComponent, "sefin-pagination", never, { "currentPage": { "alias": "currentPage"; "required": false; }; "totalPages": { "alias": "totalPages"; "required": false; }; "totalItems": { "alias": "totalItems"; "required": false; }; "itemsPerPage": { "alias": "itemsPerPage"; "required": false; }; "siblingCount": { "alias": "siblingCount"; "required": false; }; "showFirstLast": { "alias": "showFirstLast"; "required": false; }; "showPrevNext": { "alias": "showPrevNext"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "pageChange": "pageChange"; }, never, never, true, never>;
+}
+
 type TextareaVariant = 'outlined' | 'filled' | 'standard';
 type TextareaSize = 'sm' | 'md' | 'lg';
 declare class TextareaComponent implements ControlValueAccessor, Validator, OnInit, AfterViewInit, OnDestroy {
@@ -1502,5 +1702,5 @@ declare class TextareaComponent implements ControlValueAccessor, Validator, OnIn
 
 declare const STYLES_PATH = "./styles/index.scss";
 
-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 };
+export { AccordionItemComponent, AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, BreadcrumbsComponent, ButtonComponent, ButtonGroupComponent, COLOR_TOKENS, CardComponent, CheckboxComponent, ChipComponent, ContainerComponent, DARK_THEME, DESIGN_TOKENS, DatepickerComponent, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, ImageComponent, LIGHT_THEME, LinkComponent, PaginationComponent, ProgressBarComponent, RadioComponent, RateComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpacerComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TabComponent, TagComponent, TextFieldComponent, TextareaComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent };
+export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSize, ButtonGroupOption, ButtonGroupSize, ButtonGroupVariant, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, ContainerSize, ContainerVariant, CustomTheme, DateFormat, DatePickerMode, DateRange, DividerOrientation, DividerVariant, FabSize, IconSize, ImageFit, ImageLoading, ImageRounded, InputSize, LinkSize, LinkVariant, PaginationSize, PaginationVariant, ProgressBarSize, ProgressBarVariant, RateIcon, RateSize, SelectOption, ShadowToken, SpacerOrientation, SpacerSize, SpacingToken, SpinnerSize, SpinnerVariant, TabSize, TabVariant, TagSize, TagVariant, TextFieldSize, TextFieldType, TextFieldVariant, TextareaSize, TextareaVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };