@lesterarte/sefin-ui 0.0.4 → 0.0.6-dev.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/lesterarte-sefin-ui.mjs +1428 -278
- package/fesm2022/lesterarte-sefin-ui.mjs.map +1 -1
- package/package.json +12 -10
- package/types/lesterarte-sefin-ui.d.ts +380 -45
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lesterarte/sefin-ui",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6-dev.0",
|
|
4
4
|
"description": "Sefin Design System - A comprehensive Angular UI library based on Atomic Design and design tokens",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -22,6 +22,8 @@
|
|
|
22
22
|
"@angular/forms": "^21.0.0"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
+
"lucide": "^0.562.0",
|
|
26
|
+
"lucide-angular": "^0.562.0",
|
|
25
27
|
"tslib": "^2.3.0"
|
|
26
28
|
},
|
|
27
29
|
"sideEffects": [
|
|
@@ -33,6 +35,15 @@
|
|
|
33
35
|
"es2022": "./fesm2022/lesterarte-sefin-ui.mjs",
|
|
34
36
|
"fesm2022": "./fesm2022/lesterarte-sefin-ui.mjs",
|
|
35
37
|
"typings": "./types/lesterarte-sefin-ui.d.ts",
|
|
38
|
+
"files": [
|
|
39
|
+
"fesm2022",
|
|
40
|
+
"types",
|
|
41
|
+
"package.json",
|
|
42
|
+
"README.md"
|
|
43
|
+
],
|
|
44
|
+
"publishConfig": {
|
|
45
|
+
"access": "public"
|
|
46
|
+
},
|
|
36
47
|
"exports": {
|
|
37
48
|
".": {
|
|
38
49
|
"types": "./types/lesterarte-sefin-ui.d.ts",
|
|
@@ -42,14 +53,5 @@
|
|
|
42
53
|
"./package.json": {
|
|
43
54
|
"default": "./package.json"
|
|
44
55
|
}
|
|
45
|
-
},
|
|
46
|
-
"files": [
|
|
47
|
-
"fesm2022",
|
|
48
|
-
"types",
|
|
49
|
-
"package.json",
|
|
50
|
-
"README.md"
|
|
51
|
-
],
|
|
52
|
-
"publishConfig": {
|
|
53
|
-
"access": "public"
|
|
54
56
|
}
|
|
55
57
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter,
|
|
2
|
+
import { EventEmitter, Injector, AfterViewInit, OnChanges, ElementRef, SimpleChanges, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -589,6 +589,48 @@ declare class ThemeLoader {
|
|
|
589
589
|
static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): string;
|
|
590
590
|
}
|
|
591
591
|
|
|
592
|
+
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
593
|
+
declare class AvatarComponent {
|
|
594
|
+
/** Avatar size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
|
|
595
|
+
size: AvatarSize;
|
|
596
|
+
/** Image source URL */
|
|
597
|
+
src?: string;
|
|
598
|
+
/** Alt text for the image */
|
|
599
|
+
alt: string;
|
|
600
|
+
/** Initials to display when no image is provided */
|
|
601
|
+
initials?: string;
|
|
602
|
+
/** Whether to show a border/ring around the avatar */
|
|
603
|
+
bordered: boolean;
|
|
604
|
+
/** Additional CSS classes */
|
|
605
|
+
class: string;
|
|
606
|
+
get avatarClasses(): string;
|
|
607
|
+
get displayInitials(): string;
|
|
608
|
+
onImageError(event: Event): void;
|
|
609
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
|
|
610
|
+
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>;
|
|
611
|
+
}
|
|
612
|
+
|
|
613
|
+
type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
|
|
614
|
+
type BadgeSize = 'sm' | 'md' | 'lg';
|
|
615
|
+
declare class BadgeComponent {
|
|
616
|
+
/** Badge variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
|
|
617
|
+
variant: BadgeVariant;
|
|
618
|
+
/** Badge size. Options: 'sm' | 'md' | 'lg' */
|
|
619
|
+
size: BadgeSize;
|
|
620
|
+
/** Whether the badge should be displayed as a dot (no text) */
|
|
621
|
+
dot: boolean;
|
|
622
|
+
/** Maximum number to show before displaying as "+N" */
|
|
623
|
+
max?: number;
|
|
624
|
+
/** Badge value (number or text) */
|
|
625
|
+
value?: number | string;
|
|
626
|
+
/** Additional CSS classes */
|
|
627
|
+
class: string;
|
|
628
|
+
get badgeClasses(): string;
|
|
629
|
+
get displayValue(): string;
|
|
630
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<BadgeComponent, never>;
|
|
631
|
+
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>;
|
|
632
|
+
}
|
|
633
|
+
|
|
592
634
|
declare class ButtonComponent {
|
|
593
635
|
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
594
636
|
variant: ButtonVariant;
|
|
@@ -607,6 +649,54 @@ declare class ButtonComponent {
|
|
|
607
649
|
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>;
|
|
608
650
|
}
|
|
609
651
|
|
|
652
|
+
type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
653
|
+
declare class IconComponent {
|
|
654
|
+
private injector;
|
|
655
|
+
private sanitizer;
|
|
656
|
+
constructor(injector: Injector);
|
|
657
|
+
/** Icon name from Lucide Angular (e.g., 'home', 'search', 'user') */
|
|
658
|
+
name?: string;
|
|
659
|
+
/** Icon size. Options: 'xs' | 'sm' | 'md' | 'lg' | 'xl' */
|
|
660
|
+
size: IconSize;
|
|
661
|
+
/** Custom color for the icon */
|
|
662
|
+
color?: string;
|
|
663
|
+
/** Whether the icon should be rotated 180 degrees */
|
|
664
|
+
rotate: boolean;
|
|
665
|
+
/** Whether the icon should be flipped horizontally */
|
|
666
|
+
flipH: boolean;
|
|
667
|
+
/** Whether the icon should be flipped vertically */
|
|
668
|
+
flipV: boolean;
|
|
669
|
+
/** Additional CSS classes */
|
|
670
|
+
class: string;
|
|
671
|
+
get iconClasses(): string;
|
|
672
|
+
get sizeValue(): number;
|
|
673
|
+
get lucideIconName(): string | undefined;
|
|
674
|
+
get iconSvgHtml(): any;
|
|
675
|
+
private escapeHtml;
|
|
676
|
+
private getTransform;
|
|
677
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<IconComponent, never>;
|
|
678
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<IconComponent, "sefin-icon", never, { "name": { "alias": "name"; "required": false; }; "size": { "alias": "size"; "required": false; }; "color": { "alias": "color"; "required": false; }; "rotate": { "alias": "rotate"; "required": false; }; "flipH": { "alias": "flipH"; "required": false; }; "flipV": { "alias": "flipV"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
/**
|
|
682
|
+
* Lucide Icon Map
|
|
683
|
+
* Maps icon names to Lucide Angular components
|
|
684
|
+
* This allows us to use Lucide icons internally while maintaining our API
|
|
685
|
+
*/
|
|
686
|
+
declare const LUCIDE_ICON_MAP: Record<string, () => Promise<{
|
|
687
|
+
default: any;
|
|
688
|
+
}>>;
|
|
689
|
+
/**
|
|
690
|
+
* Get Lucide icon component by name
|
|
691
|
+
*/
|
|
692
|
+
declare function getLucideIcon(name: string): (() => Promise<{
|
|
693
|
+
default: any;
|
|
694
|
+
}>) | null;
|
|
695
|
+
/**
|
|
696
|
+
* Check if an icon name has a Lucide mapping
|
|
697
|
+
*/
|
|
698
|
+
declare function hasLucideIcon(name: string): boolean;
|
|
699
|
+
|
|
610
700
|
declare class IconButtonComponent {
|
|
611
701
|
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
612
702
|
variant: ButtonVariant;
|
|
@@ -629,6 +719,72 @@ declare class IconButtonComponent {
|
|
|
629
719
|
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>;
|
|
630
720
|
}
|
|
631
721
|
|
|
722
|
+
type FabSize = 'sm' | 'md' | 'lg';
|
|
723
|
+
declare class FabButtonComponent {
|
|
724
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
725
|
+
variant: ButtonVariant;
|
|
726
|
+
/** FAB size. Options: 'sm' | 'md' | 'lg' */
|
|
727
|
+
size: FabSize;
|
|
728
|
+
/** Whether the button is disabled */
|
|
729
|
+
disabled: boolean;
|
|
730
|
+
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
731
|
+
type: 'button' | 'submit' | 'reset';
|
|
732
|
+
/** Additional CSS classes */
|
|
733
|
+
class: string;
|
|
734
|
+
/** Accessibility label for the button */
|
|
735
|
+
ariaLabel: string;
|
|
736
|
+
clicked: EventEmitter<MouseEvent>;
|
|
737
|
+
onClick(event: MouseEvent): void;
|
|
738
|
+
get buttonClasses(): string;
|
|
739
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<FabButtonComponent, never>;
|
|
740
|
+
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>;
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
type ChipVariant = 'default' | 'primary' | 'secondary' | 'outline' | 'ghost';
|
|
744
|
+
type ChipSize = 'sm' | 'md' | 'lg';
|
|
745
|
+
declare class ChipComponent {
|
|
746
|
+
/** Chip variant style. Options: 'default' | 'primary' | 'secondary' | 'outline' | 'ghost' */
|
|
747
|
+
variant: ChipVariant;
|
|
748
|
+
/** Chip size. Options: 'sm' | 'md' | 'lg' */
|
|
749
|
+
size: ChipSize;
|
|
750
|
+
/** Whether the chip is disabled */
|
|
751
|
+
disabled: boolean;
|
|
752
|
+
/** Whether the chip can be removed (shows remove button) */
|
|
753
|
+
removable: boolean;
|
|
754
|
+
/** Whether the chip is selected (for selectable chips) */
|
|
755
|
+
selected: boolean;
|
|
756
|
+
/** Additional CSS classes */
|
|
757
|
+
class: string;
|
|
758
|
+
removed: EventEmitter<MouseEvent>;
|
|
759
|
+
clicked: EventEmitter<MouseEvent>;
|
|
760
|
+
onRemove(event: MouseEvent): void;
|
|
761
|
+
onClick(event: MouseEvent): void;
|
|
762
|
+
get chipClasses(): string;
|
|
763
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ChipComponent, never>;
|
|
764
|
+
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>;
|
|
765
|
+
}
|
|
766
|
+
|
|
767
|
+
type TagVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
|
|
768
|
+
type TagSize = 'sm' | 'md' | 'lg';
|
|
769
|
+
declare class TagComponent {
|
|
770
|
+
/** Tag variant style. Options: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' */
|
|
771
|
+
variant: TagVariant;
|
|
772
|
+
/** Tag size. Options: 'sm' | 'md' | 'lg' */
|
|
773
|
+
size: TagSize;
|
|
774
|
+
/** Whether the tag can be removed (shows remove button) */
|
|
775
|
+
removable: boolean;
|
|
776
|
+
/** Whether the tag is disabled */
|
|
777
|
+
disabled: boolean;
|
|
778
|
+
/** Additional CSS classes */
|
|
779
|
+
class: string;
|
|
780
|
+
/** Event emitted when the tag is removed */
|
|
781
|
+
removed: EventEmitter<MouseEvent>;
|
|
782
|
+
onRemove(event: MouseEvent): void;
|
|
783
|
+
get tagClasses(): string;
|
|
784
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
785
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TagComponent, "sefin-tag", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
|
|
786
|
+
}
|
|
787
|
+
|
|
632
788
|
type LinkVariant = 'default' | 'primary' | 'secondary' | 'underline';
|
|
633
789
|
type LinkSize = 'sm' | 'md' | 'lg';
|
|
634
790
|
declare class LinkComponent {
|
|
@@ -670,48 +826,6 @@ declare class StackComponent {
|
|
|
670
826
|
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>;
|
|
671
827
|
}
|
|
672
828
|
|
|
673
|
-
interface AutocompleteOption {
|
|
674
|
-
value: string | number;
|
|
675
|
-
label: string;
|
|
676
|
-
disabled?: boolean;
|
|
677
|
-
}
|
|
678
|
-
declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
|
|
679
|
-
inputRef?: ElementRef<HTMLInputElement>;
|
|
680
|
-
dropdownRef?: ElementRef<HTMLDivElement>;
|
|
681
|
-
containerRef?: ElementRef<HTMLDivElement>;
|
|
682
|
-
options: AutocompleteOption[];
|
|
683
|
-
placeholder: string;
|
|
684
|
-
disabled: boolean;
|
|
685
|
-
size: InputSize;
|
|
686
|
-
class: string;
|
|
687
|
-
value: string | number | null;
|
|
688
|
-
minChars: number;
|
|
689
|
-
maxResults: number;
|
|
690
|
-
valueChange: EventEmitter<string | number>;
|
|
691
|
-
optionSelected: EventEmitter<AutocompleteOption>;
|
|
692
|
-
inputChange: EventEmitter<string>;
|
|
693
|
-
searchText: string;
|
|
694
|
-
filteredOptions: AutocompleteOption[];
|
|
695
|
-
isOpen: boolean;
|
|
696
|
-
selectedIndex: number;
|
|
697
|
-
ngOnInit(): void;
|
|
698
|
-
ngOnChanges(changes: SimpleChanges): void;
|
|
699
|
-
ngOnDestroy(): void;
|
|
700
|
-
onClickOutside(event: MouseEvent): void;
|
|
701
|
-
onInputChange(value: string): void;
|
|
702
|
-
filterOptions(): void;
|
|
703
|
-
selectOption(option: AutocompleteOption): void;
|
|
704
|
-
onInputFocus(): void;
|
|
705
|
-
onInputBlur(): void;
|
|
706
|
-
onKeyDown(event: KeyboardEvent): void;
|
|
707
|
-
private scrollToSelected;
|
|
708
|
-
clearValue(): void;
|
|
709
|
-
get inputClasses(): string;
|
|
710
|
-
get containerClasses(): string;
|
|
711
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
|
|
712
|
-
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>;
|
|
713
|
-
}
|
|
714
|
-
|
|
715
829
|
declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
|
|
716
830
|
checkboxInput?: ElementRef<HTMLInputElement>;
|
|
717
831
|
size: InputSize;
|
|
@@ -737,6 +851,29 @@ declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit,
|
|
|
737
851
|
static ɵcmp: i0.ɵɵComponentDeclaration<CheckboxComponent, "sefin-checkbox", never, { "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "class": { "alias": "class"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
|
|
738
852
|
}
|
|
739
853
|
|
|
854
|
+
declare class RadioComponent implements ControlValueAccessor {
|
|
855
|
+
radioInput?: ElementRef<HTMLInputElement>;
|
|
856
|
+
size: InputSize;
|
|
857
|
+
disabled: boolean;
|
|
858
|
+
class: string;
|
|
859
|
+
label: string;
|
|
860
|
+
name: string;
|
|
861
|
+
value: string | number;
|
|
862
|
+
checked: boolean;
|
|
863
|
+
valueChange: EventEmitter<string | number>;
|
|
864
|
+
checkedChange: EventEmitter<boolean>;
|
|
865
|
+
private onChange;
|
|
866
|
+
private onTouched;
|
|
867
|
+
onRadioChange(event: Event): void;
|
|
868
|
+
writeValue(value: string | number): void;
|
|
869
|
+
registerOnChange(fn: (value: string | number) => void): void;
|
|
870
|
+
registerOnTouched(fn: () => void): void;
|
|
871
|
+
setDisabledState(isDisabled: boolean): void;
|
|
872
|
+
get wrapperClasses(): string;
|
|
873
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<RadioComponent, never>;
|
|
874
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<RadioComponent, "sefin-radio", never, { "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; "label": { "alias": "label"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
|
|
875
|
+
}
|
|
876
|
+
|
|
740
877
|
interface SelectOption {
|
|
741
878
|
value: string | number;
|
|
742
879
|
label: string;
|
|
@@ -815,7 +952,205 @@ declare class TypographyComponent {
|
|
|
815
952
|
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>;
|
|
816
953
|
}
|
|
817
954
|
|
|
955
|
+
type DividerOrientation = 'horizontal' | 'vertical';
|
|
956
|
+
type DividerVariant = 'solid' | 'dashed' | 'dotted';
|
|
957
|
+
declare class DividerComponent {
|
|
958
|
+
/** Divider orientation. Options: 'horizontal' | 'vertical' */
|
|
959
|
+
orientation: DividerOrientation;
|
|
960
|
+
/** Divider variant style. Options: 'solid' | 'dashed' | 'dotted' */
|
|
961
|
+
variant: DividerVariant;
|
|
962
|
+
/** Spacing around the divider (margin) */
|
|
963
|
+
spacing: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
964
|
+
/** Thickness of the divider */
|
|
965
|
+
thickness: 'thin' | 'medium' | 'thick';
|
|
966
|
+
/** Additional CSS classes */
|
|
967
|
+
class: string;
|
|
968
|
+
get dividerClasses(): string;
|
|
969
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<DividerComponent, never>;
|
|
970
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<DividerComponent, "sefin-divider", never, { "orientation": { "alias": "orientation"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "spacing": { "alias": "spacing"; "required": false; }; "thickness": { "alias": "thickness"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
971
|
+
}
|
|
972
|
+
|
|
973
|
+
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
974
|
+
type SpinnerVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default';
|
|
975
|
+
declare class SpinnerComponent {
|
|
976
|
+
/** Spinner size. Options: 'sm' | 'md' | 'lg' */
|
|
977
|
+
size: SpinnerSize;
|
|
978
|
+
/** Spinner variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'default' */
|
|
979
|
+
variant: SpinnerVariant;
|
|
980
|
+
/** Whether the spinner should be displayed inline (smaller margins) */
|
|
981
|
+
inline: boolean;
|
|
982
|
+
/** Additional CSS classes */
|
|
983
|
+
class: string;
|
|
984
|
+
get spinnerClasses(): string;
|
|
985
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SpinnerComponent, never>;
|
|
986
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SpinnerComponent, "sefin-spinner", never, { "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
type ProgressBarVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error';
|
|
990
|
+
type ProgressBarSize = 'sm' | 'md' | 'lg';
|
|
991
|
+
declare class ProgressBarComponent {
|
|
992
|
+
/** Progress value (0-100) */
|
|
993
|
+
value: number;
|
|
994
|
+
/** Progress bar variant color. Options: 'primary' | 'secondary' | 'success' | 'warning' | 'error' */
|
|
995
|
+
variant: ProgressBarVariant;
|
|
996
|
+
/** Progress bar size. Options: 'sm' | 'md' | 'lg' */
|
|
997
|
+
size: ProgressBarSize;
|
|
998
|
+
/** Whether to show the progress percentage label */
|
|
999
|
+
showLabel: boolean;
|
|
1000
|
+
/** Whether the progress bar is in indeterminate state (animated) */
|
|
1001
|
+
indeterminate: boolean;
|
|
1002
|
+
/** Additional CSS classes */
|
|
1003
|
+
class: string;
|
|
1004
|
+
get progressBarClasses(): string;
|
|
1005
|
+
get clampedValue(): number;
|
|
1006
|
+
get percentageText(): string;
|
|
1007
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
|
|
1008
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ProgressBarComponent, "sefin-progress-bar", never, { "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showLabel": { "alias": "showLabel"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
1012
|
+
type TooltipTrigger = 'hover' | 'click' | 'focus';
|
|
1013
|
+
declare class TooltipComponent implements AfterViewInit, OnDestroy {
|
|
1014
|
+
private cdr;
|
|
1015
|
+
/** Tooltip text content */
|
|
1016
|
+
text: string;
|
|
1017
|
+
/** Tooltip position. Options: 'top' | 'bottom' | 'left' | 'right' */
|
|
1018
|
+
position: TooltipPosition;
|
|
1019
|
+
/** Trigger event. Options: 'hover' | 'click' | 'focus' */
|
|
1020
|
+
trigger: TooltipTrigger;
|
|
1021
|
+
/** Delay before showing tooltip (in milliseconds) */
|
|
1022
|
+
delay: number;
|
|
1023
|
+
/** Whether the tooltip is disabled */
|
|
1024
|
+
disabled: boolean;
|
|
1025
|
+
/** Additional CSS classes */
|
|
1026
|
+
class: string;
|
|
1027
|
+
tooltipContent: ElementRef<HTMLDivElement>;
|
|
1028
|
+
tooltipTrigger: ElementRef<HTMLDivElement>;
|
|
1029
|
+
isVisible: boolean;
|
|
1030
|
+
private showTimeout?;
|
|
1031
|
+
private hideTimeout?;
|
|
1032
|
+
constructor(cdr: ChangeDetectorRef);
|
|
1033
|
+
ngAfterViewInit(): void;
|
|
1034
|
+
ngOnDestroy(): void;
|
|
1035
|
+
onMouseEnter(event: Event): void;
|
|
1036
|
+
onMouseLeave(event: Event): void;
|
|
1037
|
+
onClick(event: Event): void;
|
|
1038
|
+
onFocus(event: Event): void;
|
|
1039
|
+
onBlur(event: Event): void;
|
|
1040
|
+
show(): void;
|
|
1041
|
+
hide(): void;
|
|
1042
|
+
toggle(): void;
|
|
1043
|
+
private clearTimeouts;
|
|
1044
|
+
private handleOutsideClick;
|
|
1045
|
+
get tooltipClasses(): string;
|
|
1046
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
|
|
1047
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "sefin-tooltip", never, { "text": { "alias": "text"; "required": false; }; "position": { "alias": "position"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "delay": { "alias": "delay"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
1048
|
+
}
|
|
1049
|
+
|
|
1050
|
+
type AlertVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
|
|
1051
|
+
type AlertSize = 'sm' | 'md' | 'lg';
|
|
1052
|
+
declare class AlertComponent {
|
|
1053
|
+
/** Alert variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
|
|
1054
|
+
variant: AlertVariant;
|
|
1055
|
+
/** Alert size. Options: 'sm' | 'md' | 'lg' */
|
|
1056
|
+
size: AlertSize;
|
|
1057
|
+
/** Alert title (optional) */
|
|
1058
|
+
title?: string;
|
|
1059
|
+
/** Whether the alert can be dismissed (shows close button) */
|
|
1060
|
+
dismissible: boolean;
|
|
1061
|
+
/** Whether to show an icon */
|
|
1062
|
+
showIcon: boolean;
|
|
1063
|
+
/** Whether the alert is visible */
|
|
1064
|
+
visible: boolean;
|
|
1065
|
+
/** Additional CSS classes */
|
|
1066
|
+
class: string;
|
|
1067
|
+
/** Event emitted when the alert is dismissed */
|
|
1068
|
+
dismissed: EventEmitter<void>;
|
|
1069
|
+
onDismiss(): void;
|
|
1070
|
+
get alertClasses(): string;
|
|
1071
|
+
get iconClass(): string;
|
|
1072
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AlertComponent, never>;
|
|
1073
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<AlertComponent, "sefin-alert", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "title": { "alias": "title"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
1074
|
+
}
|
|
1075
|
+
|
|
1076
|
+
type ToastVariant = 'success' | 'warning' | 'error' | 'info' | 'default';
|
|
1077
|
+
type ToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
1078
|
+
declare class ToastComponent implements OnInit, OnDestroy {
|
|
1079
|
+
private cdr;
|
|
1080
|
+
/** Toast variant style. Options: 'success' | 'warning' | 'error' | 'info' | 'default' */
|
|
1081
|
+
variant: ToastVariant;
|
|
1082
|
+
/** Toast position. Options: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center' */
|
|
1083
|
+
position: ToastPosition;
|
|
1084
|
+
/** Toast title (optional) */
|
|
1085
|
+
title?: string;
|
|
1086
|
+
/** Toast message */
|
|
1087
|
+
message: string;
|
|
1088
|
+
/** Duration in milliseconds before auto-dismiss (0 = no auto-dismiss) */
|
|
1089
|
+
duration: number;
|
|
1090
|
+
/** Whether to show an icon */
|
|
1091
|
+
showIcon: boolean;
|
|
1092
|
+
/** Whether the toast can be dismissed manually */
|
|
1093
|
+
dismissible: boolean;
|
|
1094
|
+
/** Additional CSS classes */
|
|
1095
|
+
class: string;
|
|
1096
|
+
/** Event emitted when the toast is dismissed */
|
|
1097
|
+
dismissed: EventEmitter<void>;
|
|
1098
|
+
isVisible: boolean;
|
|
1099
|
+
isExiting: boolean;
|
|
1100
|
+
private dismissTimeout?;
|
|
1101
|
+
constructor(cdr: ChangeDetectorRef);
|
|
1102
|
+
ngOnInit(): void;
|
|
1103
|
+
ngOnDestroy(): void;
|
|
1104
|
+
dismiss(): void;
|
|
1105
|
+
get toastClasses(): string;
|
|
1106
|
+
get iconClass(): string;
|
|
1107
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ToastComponent, never>;
|
|
1108
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ToastComponent, "sefin-toast", never, { "variant": { "alias": "variant"; "required": false; }; "position": { "alias": "position"; "required": false; }; "title": { "alias": "title"; "required": false; }; "message": { "alias": "message"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "showIcon": { "alias": "showIcon"; "required": false; }; "dismissible": { "alias": "dismissible"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, { "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
1109
|
+
}
|
|
1110
|
+
|
|
1111
|
+
interface AutocompleteOption {
|
|
1112
|
+
value: string | number;
|
|
1113
|
+
label: string;
|
|
1114
|
+
disabled?: boolean;
|
|
1115
|
+
}
|
|
1116
|
+
declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
|
|
1117
|
+
inputRef?: ElementRef<HTMLInputElement>;
|
|
1118
|
+
dropdownRef?: ElementRef<HTMLDivElement>;
|
|
1119
|
+
containerRef?: ElementRef<HTMLDivElement>;
|
|
1120
|
+
options: AutocompleteOption[];
|
|
1121
|
+
placeholder: string;
|
|
1122
|
+
disabled: boolean;
|
|
1123
|
+
size: InputSize;
|
|
1124
|
+
class: string;
|
|
1125
|
+
value: string | number | null;
|
|
1126
|
+
minChars: number;
|
|
1127
|
+
maxResults: number;
|
|
1128
|
+
valueChange: EventEmitter<string | number>;
|
|
1129
|
+
optionSelected: EventEmitter<AutocompleteOption>;
|
|
1130
|
+
inputChange: EventEmitter<string>;
|
|
1131
|
+
searchText: string;
|
|
1132
|
+
filteredOptions: AutocompleteOption[];
|
|
1133
|
+
isOpen: boolean;
|
|
1134
|
+
selectedIndex: number;
|
|
1135
|
+
ngOnInit(): void;
|
|
1136
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
1137
|
+
ngOnDestroy(): void;
|
|
1138
|
+
onClickOutside(event: MouseEvent): void;
|
|
1139
|
+
onInputChange(value: string): void;
|
|
1140
|
+
filterOptions(): void;
|
|
1141
|
+
selectOption(option: AutocompleteOption): void;
|
|
1142
|
+
onInputFocus(): void;
|
|
1143
|
+
onInputBlur(): void;
|
|
1144
|
+
onKeyDown(event: KeyboardEvent): void;
|
|
1145
|
+
private scrollToSelected;
|
|
1146
|
+
clearValue(): void;
|
|
1147
|
+
get inputClasses(): string;
|
|
1148
|
+
get containerClasses(): string;
|
|
1149
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteComponent, never>;
|
|
1150
|
+
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>;
|
|
1151
|
+
}
|
|
1152
|
+
|
|
818
1153
|
declare const STYLES_PATH = "./styles/index.scss";
|
|
819
1154
|
|
|
820
|
-
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 };
|
|
821
|
-
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 };
|
|
1155
|
+
export { AlertComponent, AutocompleteComponent, AvatarComponent, BORDER_RADIUS_TOKENS, BRAND_THEME, BadgeComponent, ButtonComponent, COLOR_TOKENS, CheckboxComponent, ChipComponent, DARK_THEME, DESIGN_TOKENS, DividerComponent, FabButtonComponent, IconButtonComponent, IconComponent, LIGHT_THEME, LUCIDE_ICON_MAP, LinkComponent, ProgressBarComponent, RadioComponent, SHADOW_TOKENS, SPACING_TOKENS, STYLES_PATH, SelectComponent, SpinnerComponent, StackComponent, SwitchComponent, TYPOGRAPHY_TOKENS, TagComponent, ThemeLoader, ToastComponent, TooltipComponent, TypographyComponent, getLucideIcon, hasLucideIcon };
|
|
1156
|
+
export type { AlertSize, AlertVariant, AutocompleteOption, AvatarSize, BadgeSize, BadgeVariant, BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ChipSize, ChipVariant, ColorShade, ColorTokenName, CustomTheme, DividerOrientation, DividerVariant, FabSize, IconSize, InputSize, LinkSize, LinkVariant, ProgressBarSize, ProgressBarVariant, SelectOption, ShadowToken, SpacingToken, SpinnerSize, SpinnerVariant, TagSize, TagVariant, Theme, ThemeColors, ToastPosition, ToastVariant, TooltipPosition, TooltipTrigger, TypographyColor, TypographyLineHeight, TypographySize, TypographyToken, TypographyVariant, TypographyWeight };
|