@lesterarte/sefin-ui 0.0.3 → 0.0.4
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/README.md +70 -5
- package/fesm2022/lesterarte-sefin-ui.mjs +971 -222
- package/fesm2022/lesterarte-sefin-ui.mjs.map +1 -1
- package/package.json +2 -5
- package/types/lesterarte-sefin-ui.d.ts +324 -108
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter } from '@angular/core';
|
|
2
|
+
import { EventEmitter, OnInit, OnDestroy, OnChanges, ElementRef, SimpleChanges, AfterViewInit } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -437,6 +437,129 @@ declare const BRAND_THEME: {
|
|
|
437
437
|
|
|
438
438
|
type Theme = 'light' | 'dark' | 'brand';
|
|
439
439
|
|
|
440
|
+
/**
|
|
441
|
+
* Shared types and interfaces
|
|
442
|
+
*/
|
|
443
|
+
type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
|
|
444
|
+
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
445
|
+
type InputSize = 'sm' | 'md' | 'lg';
|
|
446
|
+
type CardVariant = 'default' | 'elevated' | 'outlined';
|
|
447
|
+
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span';
|
|
448
|
+
type TypographySize = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
|
|
449
|
+
type TypographyWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
|
|
450
|
+
type TypographyColor = 'text' | 'text-secondary' | 'text-disabled' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
|
|
451
|
+
type TypographyLineHeight = 'tight' | 'normal' | 'relaxed';
|
|
452
|
+
interface BaseComponent {
|
|
453
|
+
disabled?: boolean;
|
|
454
|
+
class?: string;
|
|
455
|
+
}
|
|
456
|
+
/**
|
|
457
|
+
* Theme color configuration
|
|
458
|
+
*/
|
|
459
|
+
interface ThemeColors {
|
|
460
|
+
primary: string;
|
|
461
|
+
'primary-dark'?: string;
|
|
462
|
+
'primary-light'?: string;
|
|
463
|
+
secondary: string;
|
|
464
|
+
'secondary-dark'?: string;
|
|
465
|
+
'secondary-light'?: string;
|
|
466
|
+
background: string;
|
|
467
|
+
'background-elevated'?: string;
|
|
468
|
+
surface: string;
|
|
469
|
+
'surface-hover'?: string;
|
|
470
|
+
text: string;
|
|
471
|
+
'text-secondary'?: string;
|
|
472
|
+
'text-disabled'?: string;
|
|
473
|
+
border: string;
|
|
474
|
+
'border-focus'?: string;
|
|
475
|
+
success?: string;
|
|
476
|
+
warning?: string;
|
|
477
|
+
error?: string;
|
|
478
|
+
info?: string;
|
|
479
|
+
[key: string]: string | undefined;
|
|
480
|
+
}
|
|
481
|
+
/**
|
|
482
|
+
* Custom theme configuration interface
|
|
483
|
+
* Allows users to create their own themes with custom colors, typography, spacing, etc.
|
|
484
|
+
* Supports both single theme and light/dark variants.
|
|
485
|
+
*/
|
|
486
|
+
interface CustomTheme {
|
|
487
|
+
name: string;
|
|
488
|
+
colors: ThemeColors;
|
|
489
|
+
/**
|
|
490
|
+
* Optional light and dark variants for the theme
|
|
491
|
+
* If provided, allows switching between light and dark modes
|
|
492
|
+
*/
|
|
493
|
+
variants?: {
|
|
494
|
+
light?: ThemeColors;
|
|
495
|
+
dark?: ThemeColors;
|
|
496
|
+
};
|
|
497
|
+
typography?: {
|
|
498
|
+
fontFamily?: {
|
|
499
|
+
base?: string;
|
|
500
|
+
mono?: string;
|
|
501
|
+
[key: string]: string | undefined;
|
|
502
|
+
};
|
|
503
|
+
fontSize?: {
|
|
504
|
+
xs?: string;
|
|
505
|
+
sm?: string;
|
|
506
|
+
base?: string;
|
|
507
|
+
lg?: string;
|
|
508
|
+
xl?: string;
|
|
509
|
+
'2xl'?: string;
|
|
510
|
+
'3xl'?: string;
|
|
511
|
+
'4xl'?: string;
|
|
512
|
+
'5xl'?: string;
|
|
513
|
+
[key: string]: string | undefined;
|
|
514
|
+
};
|
|
515
|
+
fontWeight?: {
|
|
516
|
+
light?: number;
|
|
517
|
+
normal?: number;
|
|
518
|
+
medium?: number;
|
|
519
|
+
semibold?: number;
|
|
520
|
+
bold?: number;
|
|
521
|
+
[key: string]: number | undefined;
|
|
522
|
+
};
|
|
523
|
+
lineHeight?: {
|
|
524
|
+
tight?: number;
|
|
525
|
+
normal?: number;
|
|
526
|
+
relaxed?: number;
|
|
527
|
+
[key: string]: number | undefined;
|
|
528
|
+
};
|
|
529
|
+
};
|
|
530
|
+
spacing?: {
|
|
531
|
+
xs?: string;
|
|
532
|
+
sm?: string;
|
|
533
|
+
md?: string;
|
|
534
|
+
lg?: string;
|
|
535
|
+
xl?: string;
|
|
536
|
+
'2xl'?: string;
|
|
537
|
+
'3xl'?: string;
|
|
538
|
+
'4xl'?: string;
|
|
539
|
+
'5xl'?: string;
|
|
540
|
+
[key: string]: string | undefined;
|
|
541
|
+
};
|
|
542
|
+
borderRadius?: {
|
|
543
|
+
none?: string;
|
|
544
|
+
sm?: string;
|
|
545
|
+
md?: string;
|
|
546
|
+
lg?: string;
|
|
547
|
+
xl?: string;
|
|
548
|
+
'2xl'?: string;
|
|
549
|
+
full?: string;
|
|
550
|
+
[key: string]: string | undefined;
|
|
551
|
+
};
|
|
552
|
+
shadow?: {
|
|
553
|
+
none?: string;
|
|
554
|
+
sm?: string;
|
|
555
|
+
md?: string;
|
|
556
|
+
lg?: string;
|
|
557
|
+
xl?: string;
|
|
558
|
+
'2xl'?: string;
|
|
559
|
+
[key: string]: string | undefined;
|
|
560
|
+
};
|
|
561
|
+
}
|
|
562
|
+
|
|
440
563
|
/**
|
|
441
564
|
* Theme loader utility
|
|
442
565
|
* Generates CSS variables from design tokens
|
|
@@ -444,35 +567,38 @@ type Theme = 'light' | 'dark' | 'brand';
|
|
|
444
567
|
declare class ThemeLoader {
|
|
445
568
|
/**
|
|
446
569
|
* Load a theme and apply it to the document root
|
|
570
|
+
* @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
|
|
571
|
+
* @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
|
|
572
|
+
*/
|
|
573
|
+
static loadTheme(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): void;
|
|
574
|
+
/**
|
|
575
|
+
* Load a custom theme variant (light or dark)
|
|
576
|
+
* @param customTheme - CustomTheme object with variants support
|
|
577
|
+
* @param variant - Variant to load ('light' or 'dark')
|
|
447
578
|
*/
|
|
448
|
-
static
|
|
579
|
+
static loadThemeVariant(customTheme: CustomTheme, variant: 'light' | 'dark'): void;
|
|
449
580
|
/**
|
|
450
581
|
* Get theme configuration by name
|
|
451
582
|
*/
|
|
452
583
|
private static getTheme;
|
|
453
584
|
/**
|
|
454
585
|
* Get all CSS variables as a string (useful for SSR or static generation)
|
|
586
|
+
* @param themeName - Predefined theme name ('light', 'dark', 'brand') or a CustomTheme object
|
|
587
|
+
* @param variant - Optional variant ('light' or 'dark') for CustomTheme with variants support
|
|
455
588
|
*/
|
|
456
|
-
static getThemeCSS(themeName?: Theme): string;
|
|
457
|
-
}
|
|
458
|
-
|
|
459
|
-
/**
|
|
460
|
-
* Shared types and interfaces
|
|
461
|
-
*/
|
|
462
|
-
type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
|
|
463
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
464
|
-
type InputSize = 'sm' | 'md' | 'lg';
|
|
465
|
-
type CardVariant = 'default' | 'elevated' | 'outlined';
|
|
466
|
-
interface BaseComponent {
|
|
467
|
-
disabled?: boolean;
|
|
468
|
-
class?: string;
|
|
589
|
+
static getThemeCSS(themeName?: Theme | CustomTheme, variant?: 'light' | 'dark'): string;
|
|
469
590
|
}
|
|
470
591
|
|
|
471
592
|
declare class ButtonComponent {
|
|
593
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
472
594
|
variant: ButtonVariant;
|
|
595
|
+
/** Button size. Options: 'sm' | 'md' | 'lg' */
|
|
473
596
|
size: ButtonSize;
|
|
597
|
+
/** Whether the button is disabled */
|
|
474
598
|
disabled: boolean;
|
|
599
|
+
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
475
600
|
type: 'button' | 'submit' | 'reset';
|
|
601
|
+
/** Additional CSS classes */
|
|
476
602
|
class: string;
|
|
477
603
|
clicked: EventEmitter<MouseEvent>;
|
|
478
604
|
onClick(event: MouseEvent): void;
|
|
@@ -481,125 +607,215 @@ declare class ButtonComponent {
|
|
|
481
607
|
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>;
|
|
482
608
|
}
|
|
483
609
|
|
|
484
|
-
declare class
|
|
485
|
-
|
|
486
|
-
|
|
610
|
+
declare class IconButtonComponent {
|
|
611
|
+
/** Button variant style. Options: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' */
|
|
612
|
+
variant: ButtonVariant;
|
|
613
|
+
/** Button size. Options: 'sm' | 'md' | 'lg' */
|
|
614
|
+
size: ButtonSize;
|
|
615
|
+
/** Whether the button is disabled */
|
|
616
|
+
disabled: boolean;
|
|
617
|
+
/** Button type. Options: 'button' | 'submit' | 'reset' */
|
|
618
|
+
type: 'button' | 'submit' | 'reset';
|
|
619
|
+
/** Additional CSS classes */
|
|
487
620
|
class: string;
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
621
|
+
/** Accessibility label for the button */
|
|
622
|
+
ariaLabel: string;
|
|
623
|
+
/** Whether the button should be rounded (circular) */
|
|
624
|
+
rounded: boolean;
|
|
625
|
+
clicked: EventEmitter<MouseEvent>;
|
|
626
|
+
onClick(event: MouseEvent): void;
|
|
627
|
+
get buttonClasses(): string;
|
|
628
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<IconButtonComponent, never>;
|
|
629
|
+
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>;
|
|
491
630
|
}
|
|
492
631
|
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
632
|
+
type LinkVariant = 'default' | 'primary' | 'secondary' | 'underline';
|
|
633
|
+
type LinkSize = 'sm' | 'md' | 'lg';
|
|
634
|
+
declare class LinkComponent {
|
|
635
|
+
/** Link variant style. Options: 'default' | 'primary' | 'secondary' | 'underline' */
|
|
636
|
+
variant: LinkVariant;
|
|
637
|
+
/** Link size. Options: 'sm' | 'md' | 'lg' */
|
|
638
|
+
size: LinkSize;
|
|
639
|
+
/** Whether the link is disabled */
|
|
497
640
|
disabled: boolean;
|
|
498
|
-
|
|
499
|
-
|
|
641
|
+
/** Link URL */
|
|
642
|
+
href?: string;
|
|
643
|
+
/** Link target attribute (e.g., '_blank') */
|
|
644
|
+
target?: string;
|
|
645
|
+
/** Link rel attribute */
|
|
646
|
+
rel?: string;
|
|
647
|
+
/** Additional CSS classes */
|
|
500
648
|
class: string;
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
onInput(event: Event): void;
|
|
508
|
-
onBlur(event: FocusEvent): void;
|
|
509
|
-
onFocus(event: FocusEvent): void;
|
|
510
|
-
writeValue(value: string): void;
|
|
511
|
-
registerOnChange(fn: (value: string) => void): void;
|
|
512
|
-
registerOnTouched(fn: () => void): void;
|
|
513
|
-
setDisabledState(isDisabled: boolean): void;
|
|
514
|
-
get inputClasses(): string;
|
|
515
|
-
static ɵfac: i0.ɵɵFactoryDeclaration<InputComponent, never>;
|
|
516
|
-
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>;
|
|
649
|
+
/** Whether to show underline */
|
|
650
|
+
underline: boolean;
|
|
651
|
+
get linkClasses(): string;
|
|
652
|
+
onClick(event: Event): void;
|
|
653
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LinkComponent, never>;
|
|
654
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LinkComponent, "sefin-link", never, { "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "rel": { "alias": "rel"; "required": false; }; "class": { "alias": "class"; "required": false; }; "underline": { "alias": "underline"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
517
655
|
}
|
|
518
656
|
|
|
519
|
-
declare class
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
657
|
+
declare class StackComponent {
|
|
658
|
+
direction: 'row' | 'column';
|
|
659
|
+
spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
660
|
+
align: 'start' | 'center' | 'end' | 'stretch';
|
|
661
|
+
justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
662
|
+
wrap: boolean;
|
|
663
|
+
class: string;
|
|
664
|
+
get stackClasses(): string;
|
|
665
|
+
get spacingValue(): string;
|
|
666
|
+
get stackStyles(): {
|
|
667
|
+
[key: string]: string;
|
|
668
|
+
};
|
|
669
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<StackComponent, never>;
|
|
670
|
+
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>;
|
|
531
671
|
}
|
|
532
672
|
|
|
533
|
-
interface
|
|
673
|
+
interface AutocompleteOption {
|
|
674
|
+
value: string | number;
|
|
534
675
|
label: string;
|
|
535
|
-
value: any;
|
|
536
676
|
disabled?: boolean;
|
|
537
677
|
}
|
|
538
|
-
declare class
|
|
539
|
-
|
|
678
|
+
declare class AutocompleteComponent implements OnInit, OnDestroy, OnChanges {
|
|
679
|
+
inputRef?: ElementRef<HTMLInputElement>;
|
|
680
|
+
dropdownRef?: ElementRef<HTMLDivElement>;
|
|
681
|
+
containerRef?: ElementRef<HTMLDivElement>;
|
|
682
|
+
options: AutocompleteOption[];
|
|
540
683
|
placeholder: string;
|
|
541
684
|
disabled: boolean;
|
|
542
|
-
size:
|
|
543
|
-
|
|
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[];
|
|
544
695
|
isOpen: boolean;
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
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>;
|
|
551
713
|
}
|
|
552
714
|
|
|
553
|
-
declare class
|
|
554
|
-
|
|
715
|
+
declare class CheckboxComponent implements ControlValueAccessor, AfterViewInit, OnChanges {
|
|
716
|
+
checkboxInput?: ElementRef<HTMLInputElement>;
|
|
717
|
+
size: InputSize;
|
|
718
|
+
disabled: boolean;
|
|
719
|
+
indeterminate: boolean;
|
|
555
720
|
class: string;
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
721
|
+
label: string;
|
|
722
|
+
name: string;
|
|
723
|
+
value: boolean;
|
|
724
|
+
valueChange: EventEmitter<boolean>;
|
|
725
|
+
checkedChange: EventEmitter<boolean>;
|
|
726
|
+
private onChange;
|
|
727
|
+
private onTouched;
|
|
728
|
+
ngAfterViewInit(): void;
|
|
729
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
730
|
+
onCheckboxChange(event: Event): void;
|
|
731
|
+
writeValue(value: boolean): void;
|
|
732
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
733
|
+
registerOnTouched(fn: () => void): void;
|
|
734
|
+
setDisabledState(isDisabled: boolean): void;
|
|
735
|
+
get wrapperClasses(): string;
|
|
736
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CheckboxComponent, never>;
|
|
737
|
+
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>;
|
|
571
738
|
}
|
|
572
739
|
|
|
573
|
-
interface
|
|
574
|
-
|
|
575
|
-
|
|
740
|
+
interface SelectOption {
|
|
741
|
+
value: string | number;
|
|
742
|
+
label: string;
|
|
743
|
+
disabled?: boolean;
|
|
576
744
|
}
|
|
577
|
-
declare class
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
745
|
+
declare class SelectComponent implements ControlValueAccessor, OnInit, OnDestroy, OnChanges {
|
|
746
|
+
containerRef?: ElementRef<HTMLDivElement>;
|
|
747
|
+
dropdownRef?: ElementRef<HTMLDivElement>;
|
|
748
|
+
buttonRef?: ElementRef<HTMLButtonElement>;
|
|
749
|
+
options: SelectOption[];
|
|
750
|
+
placeholder: string;
|
|
751
|
+
disabled: boolean;
|
|
752
|
+
size: InputSize;
|
|
753
|
+
class: string;
|
|
754
|
+
value: string | number | null;
|
|
755
|
+
valueChange: EventEmitter<string | number>;
|
|
756
|
+
optionSelected: EventEmitter<SelectOption>;
|
|
757
|
+
isOpen: boolean;
|
|
758
|
+
selectedIndex: number;
|
|
759
|
+
private onChange;
|
|
760
|
+
private onTouched;
|
|
761
|
+
ngOnInit(): void;
|
|
762
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
763
|
+
ngOnDestroy(): void;
|
|
764
|
+
onClickOutside(event: MouseEvent): void;
|
|
765
|
+
onEscapeKey(event: Event): void;
|
|
766
|
+
toggleDropdown(): void;
|
|
767
|
+
openDropdown(): void;
|
|
768
|
+
closeDropdown(): void;
|
|
769
|
+
selectOption(option: SelectOption): void;
|
|
770
|
+
onKeyDown(event: KeyboardEvent): void;
|
|
771
|
+
private updateSelectedIndex;
|
|
772
|
+
private scrollToSelected;
|
|
773
|
+
getSelectedLabel(): string;
|
|
774
|
+
writeValue(value: string | number | null): void;
|
|
775
|
+
registerOnChange(fn: (value: string | number | null) => void): void;
|
|
776
|
+
registerOnTouched(fn: () => void): void;
|
|
777
|
+
setDisabledState(isDisabled: boolean): void;
|
|
778
|
+
get buttonClasses(): string;
|
|
779
|
+
get containerClasses(): string;
|
|
780
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
|
|
781
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "sefin-select", 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; }; }, { "valueChange": "valueChange"; "optionSelected": "optionSelected"; }, never, never, true, never>;
|
|
585
782
|
}
|
|
586
783
|
|
|
587
|
-
|
|
784
|
+
declare class SwitchComponent implements ControlValueAccessor {
|
|
785
|
+
size: InputSize;
|
|
786
|
+
disabled: boolean;
|
|
787
|
+
class: string;
|
|
588
788
|
label: string;
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
789
|
+
name: string;
|
|
790
|
+
value: boolean;
|
|
791
|
+
valueChange: EventEmitter<boolean>;
|
|
792
|
+
checkedChange: EventEmitter<boolean>;
|
|
793
|
+
private onChange;
|
|
794
|
+
private onTouched;
|
|
795
|
+
onSwitchChange(event: Event): void;
|
|
796
|
+
writeValue(value: boolean): void;
|
|
797
|
+
registerOnChange(fn: (value: boolean) => void): void;
|
|
798
|
+
registerOnTouched(fn: () => void): void;
|
|
799
|
+
setDisabledState(isDisabled: boolean): void;
|
|
800
|
+
get wrapperClasses(): string;
|
|
801
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SwitchComponent, never>;
|
|
802
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SwitchComponent, "sefin-switch", 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; }; }, { "valueChange": "valueChange"; "checkedChange": "checkedChange"; }, never, never, true, never>;
|
|
592
803
|
}
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
804
|
+
|
|
805
|
+
declare class TypographyComponent {
|
|
806
|
+
variant: TypographyVariant;
|
|
807
|
+
size?: TypographySize;
|
|
808
|
+
weight?: TypographyWeight;
|
|
809
|
+
color: TypographyColor;
|
|
810
|
+
lineHeight?: TypographyLineHeight;
|
|
811
|
+
class: string;
|
|
812
|
+
text?: string;
|
|
813
|
+
get typographyClasses(): string;
|
|
814
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<TypographyComponent, never>;
|
|
815
|
+
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>;
|
|
600
816
|
}
|
|
601
817
|
|
|
602
818
|
declare const STYLES_PATH = "./styles/index.scss";
|
|
603
819
|
|
|
604
|
-
export { BORDER_RADIUS_TOKENS, BRAND_THEME, ButtonComponent, COLOR_TOKENS,
|
|
605
|
-
export type { BaseComponent, BorderRadiusToken, ButtonSize, ButtonVariant, CardVariant, ColorShade, ColorTokenName,
|
|
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 };
|