@eagami/ui 0.5.0 → 0.7.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/README.md +128 -32
- package/fesm2022/eagami-ui.mjs +784 -332
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +6 -6
- package/src/styles/tokens/_elevation.scss +14 -14
- package/src/styles/tokens/_motion.scss +20 -19
- package/src/styles/tokens/_shape.scss +11 -11
- package/src/styles/tokens/_spacing.scss +40 -40
- package/types/eagami-ui.d.ts +174 -5
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eagami/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "Lightweight, accessible Angular UI component library built on CSS custom properties",
|
|
5
5
|
"author": "Michal Wiraszka <michal@eagami.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -23,11 +23,7 @@
|
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@angular/common": "^21.0.0",
|
|
25
25
|
"@angular/core": "^21.0.0",
|
|
26
|
-
"@angular/forms": "^21.0.0"
|
|
27
|
-
"rxjs": "^7.0.0"
|
|
28
|
-
},
|
|
29
|
-
"dependencies": {
|
|
30
|
-
"tslib": "^2.3.0"
|
|
26
|
+
"@angular/forms": "^21.0.0"
|
|
31
27
|
},
|
|
32
28
|
"module": "fesm2022/eagami-ui.mjs",
|
|
33
29
|
"typings": "types/eagami-ui.d.ts",
|
|
@@ -39,5 +35,9 @@
|
|
|
39
35
|
"types": "./types/eagami-ui.d.ts",
|
|
40
36
|
"default": "./fesm2022/eagami-ui.mjs"
|
|
41
37
|
}
|
|
38
|
+
},
|
|
39
|
+
"type": "module",
|
|
40
|
+
"dependencies": {
|
|
41
|
+
"tslib": "^2.3.0"
|
|
42
42
|
}
|
|
43
43
|
}
|
|
@@ -7,12 +7,12 @@
|
|
|
7
7
|
// Box shadows
|
|
8
8
|
// ---------------------------------------------------------------------------
|
|
9
9
|
--shadow-none: none;
|
|
10
|
-
--shadow-xs:
|
|
11
|
-
--shadow-sm:
|
|
12
|
-
--shadow-md:
|
|
13
|
-
--shadow-lg:
|
|
14
|
-
--shadow-xl:
|
|
15
|
-
--shadow-2xl:
|
|
10
|
+
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
11
|
+
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
12
|
+
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
13
|
+
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
14
|
+
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
|
15
|
+
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
16
16
|
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);
|
|
17
17
|
|
|
18
18
|
// Focus ring — used for keyboard accessibility across all interactive elements
|
|
@@ -23,13 +23,13 @@
|
|
|
23
23
|
// ---------------------------------------------------------------------------
|
|
24
24
|
// Z-index scale
|
|
25
25
|
// ---------------------------------------------------------------------------
|
|
26
|
-
--z-index-base:
|
|
27
|
-
--z-index-raised:
|
|
26
|
+
--z-index-base: 0;
|
|
27
|
+
--z-index-raised: 10;
|
|
28
28
|
--z-index-dropdown: 100;
|
|
29
|
-
--z-index-sticky:
|
|
30
|
-
--z-index-overlay:
|
|
31
|
-
--z-index-modal:
|
|
32
|
-
--z-index-popover:
|
|
33
|
-
--z-index-toast:
|
|
34
|
-
--z-index-tooltip:
|
|
29
|
+
--z-index-sticky: 200;
|
|
30
|
+
--z-index-overlay: 300;
|
|
31
|
+
--z-index-modal: 400;
|
|
32
|
+
--z-index-popover: 500;
|
|
33
|
+
--z-index-toast: 600;
|
|
34
|
+
--z-index-tooltip: 700;
|
|
35
35
|
}
|
|
@@ -6,44 +6,45 @@
|
|
|
6
6
|
// ---------------------------------------------------------------------------
|
|
7
7
|
// Duration
|
|
8
8
|
// ---------------------------------------------------------------------------
|
|
9
|
-
--duration-instant:
|
|
10
|
-
--duration-fast:
|
|
11
|
-
--duration-normal:
|
|
12
|
-
--duration-slow:
|
|
13
|
-
--duration-slower:
|
|
9
|
+
--duration-instant: 0ms;
|
|
10
|
+
--duration-fast: 100ms;
|
|
11
|
+
--duration-normal: 200ms;
|
|
12
|
+
--duration-slow: 300ms;
|
|
13
|
+
--duration-slower: 500ms;
|
|
14
14
|
|
|
15
15
|
// ---------------------------------------------------------------------------
|
|
16
16
|
// Easing
|
|
17
17
|
// ---------------------------------------------------------------------------
|
|
18
|
-
--ease-linear:
|
|
19
|
-
--ease-in:
|
|
20
|
-
--ease-out:
|
|
21
|
-
--ease-in-out:
|
|
22
|
-
--ease-spring:
|
|
18
|
+
--ease-linear: linear;
|
|
19
|
+
--ease-in: cubic-bezier(0.4, 0, 1, 1);
|
|
20
|
+
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
|
21
|
+
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
|
22
|
+
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
23
23
|
|
|
24
24
|
// ---------------------------------------------------------------------------
|
|
25
25
|
// Composed transition shortcuts
|
|
26
26
|
// ---------------------------------------------------------------------------
|
|
27
|
-
--transition-colors:
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
27
|
+
--transition-colors:
|
|
28
|
+
color var(--duration-fast) var(--ease-out),
|
|
29
|
+
background-color var(--duration-fast) var(--ease-out),
|
|
30
|
+
border-color var(--duration-fast) var(--ease-out),
|
|
31
|
+
fill var(--duration-fast) var(--ease-out);
|
|
31
32
|
|
|
32
|
-
--transition-shadow:
|
|
33
|
+
--transition-shadow: box-shadow var(--duration-fast) var(--ease-out);
|
|
33
34
|
|
|
34
35
|
--transition-transform: transform var(--duration-normal) var(--ease-spring);
|
|
35
36
|
|
|
36
|
-
--transition-opacity:
|
|
37
|
+
--transition-opacity: opacity var(--duration-normal) var(--ease-out);
|
|
37
38
|
|
|
38
|
-
--transition-all:
|
|
39
|
+
--transition-all: all var(--duration-normal) var(--ease-in-out);
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
// Respect reduced-motion preferences
|
|
42
43
|
@media (prefers-reduced-motion: reduce) {
|
|
43
44
|
:root {
|
|
44
|
-
--duration-fast:
|
|
45
|
+
--duration-fast: 0ms;
|
|
45
46
|
--duration-normal: 0ms;
|
|
46
|
-
--duration-slow:
|
|
47
|
+
--duration-slow: 0ms;
|
|
47
48
|
--duration-slower: 0ms;
|
|
48
49
|
}
|
|
49
50
|
}
|
|
@@ -7,20 +7,20 @@
|
|
|
7
7
|
// Border radius
|
|
8
8
|
// ---------------------------------------------------------------------------
|
|
9
9
|
--radius-none: 0;
|
|
10
|
-
--radius-xs:
|
|
11
|
-
--radius-sm:
|
|
12
|
-
--radius-md:
|
|
13
|
-
--radius-lg:
|
|
14
|
-
--radius-xl:
|
|
15
|
-
--radius-2xl:
|
|
16
|
-
--radius-3xl:
|
|
17
|
-
--radius-full: 9999px;
|
|
10
|
+
--radius-xs: 0.125rem; // 2px
|
|
11
|
+
--radius-sm: 0.25rem; // 4px
|
|
12
|
+
--radius-md: 0.375rem; // 6px
|
|
13
|
+
--radius-lg: 0.5rem; // 8px
|
|
14
|
+
--radius-xl: 0.75rem; // 12px
|
|
15
|
+
--radius-2xl: 1rem; // 16px
|
|
16
|
+
--radius-3xl: 1.5rem; // 24px
|
|
17
|
+
--radius-full: 9999px; // pill / circle
|
|
18
18
|
|
|
19
19
|
// ---------------------------------------------------------------------------
|
|
20
20
|
// Border width
|
|
21
21
|
// ---------------------------------------------------------------------------
|
|
22
|
-
--border-width-none:
|
|
23
|
-
--border-width-thin:
|
|
22
|
+
--border-width-none: 0;
|
|
23
|
+
--border-width-thin: 1px;
|
|
24
24
|
--border-width-medium: 2px;
|
|
25
|
-
--border-width-thick:
|
|
25
|
+
--border-width-thick: 4px;
|
|
26
26
|
}
|
|
@@ -4,54 +4,54 @@
|
|
|
4
4
|
// =============================================================================
|
|
5
5
|
|
|
6
6
|
:root {
|
|
7
|
-
--space-0:
|
|
8
|
-
--space-px:
|
|
9
|
-
--space-0-5: 0.125rem;
|
|
10
|
-
--space-1:
|
|
11
|
-
--space-1-5: 0.375rem;
|
|
12
|
-
--space-2:
|
|
13
|
-
--space-2-5: 0.625rem;
|
|
14
|
-
--space-3:
|
|
15
|
-
--space-3-5: 0.875rem;
|
|
16
|
-
--space-4:
|
|
17
|
-
--space-5:
|
|
18
|
-
--space-6:
|
|
19
|
-
--space-7:
|
|
20
|
-
--space-8:
|
|
21
|
-
--space-9:
|
|
22
|
-
--space-10:
|
|
23
|
-
--space-11:
|
|
24
|
-
--space-12:
|
|
25
|
-
--space-14:
|
|
26
|
-
--space-16:
|
|
27
|
-
--space-20:
|
|
28
|
-
--space-24:
|
|
29
|
-
--space-32:
|
|
7
|
+
--space-0: 0;
|
|
8
|
+
--space-px: 1px;
|
|
9
|
+
--space-0-5: 0.125rem; // 2px
|
|
10
|
+
--space-1: 0.25rem; // 4px
|
|
11
|
+
--space-1-5: 0.375rem; // 6px
|
|
12
|
+
--space-2: 0.5rem; // 8px
|
|
13
|
+
--space-2-5: 0.625rem; // 10px
|
|
14
|
+
--space-3: 0.75rem; // 12px
|
|
15
|
+
--space-3-5: 0.875rem; // 14px
|
|
16
|
+
--space-4: 1rem; // 16px
|
|
17
|
+
--space-5: 1.25rem; // 20px
|
|
18
|
+
--space-6: 1.5rem; // 24px
|
|
19
|
+
--space-7: 1.75rem; // 28px
|
|
20
|
+
--space-8: 2rem; // 32px
|
|
21
|
+
--space-9: 2.25rem; // 36px
|
|
22
|
+
--space-10: 2.5rem; // 40px
|
|
23
|
+
--space-11: 2.75rem; // 44px
|
|
24
|
+
--space-12: 3rem; // 48px
|
|
25
|
+
--space-14: 3.5rem; // 56px
|
|
26
|
+
--space-16: 4rem; // 64px
|
|
27
|
+
--space-20: 5rem; // 80px
|
|
28
|
+
--space-24: 6rem; // 96px
|
|
29
|
+
--space-32: 8rem; // 128px
|
|
30
30
|
|
|
31
31
|
// ---------------------------------------------------------------------------
|
|
32
32
|
// Layout / component-specific semantic spacing
|
|
33
33
|
// ---------------------------------------------------------------------------
|
|
34
34
|
|
|
35
35
|
// Component padding (inset)
|
|
36
|
-
--inset-xs:
|
|
37
|
-
--inset-sm:
|
|
38
|
-
--inset-md:
|
|
39
|
-
--inset-lg:
|
|
40
|
-
--inset-xl:
|
|
36
|
+
--inset-xs: var(--space-1) var(--space-2); // 4px 8px
|
|
37
|
+
--inset-sm: var(--space-1-5) var(--space-3); // 6px 12px
|
|
38
|
+
--inset-md: var(--space-2) var(--space-4); // 8px 16px
|
|
39
|
+
--inset-lg: var(--space-3) var(--space-6); // 12px 24px
|
|
40
|
+
--inset-xl: var(--space-4) var(--space-8); // 16px 32px
|
|
41
41
|
|
|
42
42
|
// Stack (vertical gap between siblings)
|
|
43
|
-
--stack-2xs: var(--space-1);
|
|
44
|
-
--stack-xs:
|
|
45
|
-
--stack-sm:
|
|
46
|
-
--stack-md:
|
|
47
|
-
--stack-lg:
|
|
48
|
-
--stack-xl:
|
|
49
|
-
--stack-2xl: var(--space-12);
|
|
43
|
+
--stack-2xs: var(--space-1); // 4px
|
|
44
|
+
--stack-xs: var(--space-2); // 8px
|
|
45
|
+
--stack-sm: var(--space-3); // 12px
|
|
46
|
+
--stack-md: var(--space-4); // 16px
|
|
47
|
+
--stack-lg: var(--space-6); // 24px
|
|
48
|
+
--stack-xl: var(--space-8); // 32px
|
|
49
|
+
--stack-2xl: var(--space-12); // 48px
|
|
50
50
|
|
|
51
51
|
// Inline (horizontal gap between siblings)
|
|
52
|
-
--inline-2xs: var(--space-1);
|
|
53
|
-
--inline-xs:
|
|
54
|
-
--inline-sm:
|
|
55
|
-
--inline-md:
|
|
56
|
-
--inline-lg:
|
|
52
|
+
--inline-2xs: var(--space-1); // 4px
|
|
53
|
+
--inline-xs: var(--space-2); // 8px
|
|
54
|
+
--inline-sm: var(--space-3); // 12px
|
|
55
|
+
--inline-md: var(--space-4); // 16px
|
|
56
|
+
--inline-lg: var(--space-6); // 24px
|
|
57
57
|
}
|
package/types/eagami-ui.d.ts
CHANGED
|
@@ -1,13 +1,52 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { OnDestroy, ElementRef, AfterViewInit } from '@angular/core';
|
|
2
|
+
import { OnDestroy, ElementRef, AfterViewInit, OnInit } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
import * as _eagami_ui from '@eagami/ui';
|
|
5
5
|
|
|
6
|
+
declare class AccordionComponent {
|
|
7
|
+
readonly multi: _angular_core.InputSignal<boolean>;
|
|
8
|
+
readonly expandedItems: _angular_core.WritableSignal<Set<string>>;
|
|
9
|
+
toggle(value: string): void;
|
|
10
|
+
isExpanded(value: string): boolean;
|
|
11
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
|
|
12
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "ea-accordion", never, { "multi": { "alias": "multi"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
declare class AccordionItemComponent {
|
|
16
|
+
private readonly accordion;
|
|
17
|
+
readonly value: _angular_core.InputSignal<string>;
|
|
18
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
19
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
20
|
+
readonly isExpanded: _angular_core.Signal<boolean>;
|
|
21
|
+
toggle(): void;
|
|
22
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionItemComponent, never>;
|
|
23
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionItemComponent, "ea-accordion-item", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
type AlertVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
27
|
+
declare class AlertComponent {
|
|
28
|
+
readonly variant: _angular_core.InputSignal<AlertVariant>;
|
|
29
|
+
readonly dismissible: _angular_core.InputSignal<boolean>;
|
|
30
|
+
readonly visible: _angular_core.ModelSignal<boolean>;
|
|
31
|
+
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
32
|
+
readonly alertClasses: _angular_core.Signal<{
|
|
33
|
+
[x: string]: boolean;
|
|
34
|
+
}>;
|
|
35
|
+
dismiss(): void;
|
|
36
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertComponent, never>;
|
|
37
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertComponent, "ea-alert", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; "dismissed": "dismissed"; }, never, ["*"], true, never>;
|
|
38
|
+
}
|
|
39
|
+
|
|
6
40
|
type AvatarEditorShape = 'circle' | 'square';
|
|
7
41
|
interface AvatarEditorCropEvent {
|
|
8
42
|
blob: Blob;
|
|
9
43
|
dataUrl: string;
|
|
10
44
|
}
|
|
45
|
+
interface AvatarEditorCropState {
|
|
46
|
+
zoom: number;
|
|
47
|
+
offsetX: number;
|
|
48
|
+
offsetY: number;
|
|
49
|
+
}
|
|
11
50
|
declare class AvatarEditorComponent implements OnDestroy {
|
|
12
51
|
readonly canvasEl: _angular_core.Signal<ElementRef<HTMLCanvasElement> | undefined>;
|
|
13
52
|
readonly fileInputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
|
|
@@ -20,9 +59,12 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
20
59
|
readonly maxZoom: _angular_core.InputSignal<number>;
|
|
21
60
|
readonly exportQuality: _angular_core.InputSignal<number>;
|
|
22
61
|
readonly exportType: _angular_core.InputSignal<string>;
|
|
62
|
+
readonly cropState: _angular_core.InputSignal<AvatarEditorCropState | null | undefined>;
|
|
23
63
|
readonly cropped: _angular_core.OutputEmitterRef<AvatarEditorCropEvent>;
|
|
64
|
+
readonly fileSelected: _angular_core.OutputEmitterRef<File>;
|
|
24
65
|
readonly removed: _angular_core.OutputEmitterRef<void>;
|
|
25
66
|
readonly fileError: _angular_core.OutputEmitterRef<string>;
|
|
67
|
+
readonly cropStateChange: _angular_core.OutputEmitterRef<AvatarEditorCropState>;
|
|
26
68
|
readonly hasImage: _angular_core.WritableSignal<boolean>;
|
|
27
69
|
readonly isDragOver: _angular_core.WritableSignal<boolean>;
|
|
28
70
|
readonly zoom: _angular_core.WritableSignal<number>;
|
|
@@ -36,6 +78,7 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
36
78
|
private hasDragged;
|
|
37
79
|
private initialOffsetX;
|
|
38
80
|
private initialOffsetY;
|
|
81
|
+
private _initialSrcLoaded;
|
|
39
82
|
readonly hostClasses: _angular_core.Signal<{
|
|
40
83
|
[x: string]: boolean;
|
|
41
84
|
'ea-avatar-editor--has-image': boolean;
|
|
@@ -65,7 +108,7 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
65
108
|
onZoomInput(event: Event): void;
|
|
66
109
|
removeImage(): void;
|
|
67
110
|
revertImage(): void;
|
|
68
|
-
exportCrop():
|
|
111
|
+
exportCrop(): Promise<Blob>;
|
|
69
112
|
private loadFromUrl;
|
|
70
113
|
private loadFile;
|
|
71
114
|
private scheduleDrawAfterRender;
|
|
@@ -74,9 +117,10 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
74
117
|
private getDrawParams;
|
|
75
118
|
private clampOffset;
|
|
76
119
|
private draw;
|
|
120
|
+
private emitCropStateChange;
|
|
77
121
|
private clearCanvas;
|
|
78
122
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarEditorComponent, never>;
|
|
79
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarEditorComponent, "ea-avatar-editor", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": false; "isSignal": true; }; "currentSrc": { "alias": "currentSrc"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "exportQuality": { "alias": "exportQuality"; "required": false; "isSignal": true; }; "exportType": { "alias": "exportType"; "required": false; "isSignal": true; }; }, { "cropped": "cropped"; "removed": "removed"; "fileError": "fileError"; }, never, never, true, never>;
|
|
123
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AvatarEditorComponent, "ea-avatar-editor", never, { "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "canvasSize": { "alias": "canvasSize"; "required": false; "isSignal": true; }; "currentSrc": { "alias": "currentSrc"; "required": false; "isSignal": true; }; "accept": { "alias": "accept"; "required": false; "isSignal": true; }; "maxFileSize": { "alias": "maxFileSize"; "required": false; "isSignal": true; }; "minZoom": { "alias": "minZoom"; "required": false; "isSignal": true; }; "maxZoom": { "alias": "maxZoom"; "required": false; "isSignal": true; }; "exportQuality": { "alias": "exportQuality"; "required": false; "isSignal": true; }; "exportType": { "alias": "exportType"; "required": false; "isSignal": true; }; "cropState": { "alias": "cropState"; "required": false; "isSignal": true; }; }, { "cropped": "cropped"; "fileSelected": "fileSelected"; "removed": "removed"; "fileError": "fileError"; "cropStateChange": "cropStateChange"; }, never, never, true, never>;
|
|
80
124
|
}
|
|
81
125
|
|
|
82
126
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -179,6 +223,46 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
179
223
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckboxComponent, "ea-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
|
|
180
224
|
}
|
|
181
225
|
|
|
226
|
+
type CodeInputSize = 'sm' | 'md' | 'lg';
|
|
227
|
+
type CodeInputStatus = 'default' | 'error' | 'success';
|
|
228
|
+
declare class CodeInputComponent implements ControlValueAccessor {
|
|
229
|
+
readonly digitEls: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
|
|
230
|
+
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
231
|
+
readonly length: _angular_core.InputSignal<number>;
|
|
232
|
+
readonly size: _angular_core.InputSignal<CodeInputSize>;
|
|
233
|
+
readonly status: _angular_core.InputSignal<CodeInputStatus>;
|
|
234
|
+
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
235
|
+
readonly errorMsg: _angular_core.InputSignal<string | undefined>;
|
|
236
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
237
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
238
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
239
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
240
|
+
readonly focusedIndex: _angular_core.WritableSignal<number>;
|
|
241
|
+
private readonly _formDisabled;
|
|
242
|
+
readonly completed: _angular_core.OutputEmitterRef<string>;
|
|
243
|
+
private onChange;
|
|
244
|
+
private onTouched;
|
|
245
|
+
readonly isDisabled: _angular_core.Signal<boolean>;
|
|
246
|
+
readonly resolvedStatus: _angular_core.Signal<CodeInputStatus>;
|
|
247
|
+
readonly showError: _angular_core.Signal<boolean>;
|
|
248
|
+
readonly showHint: _angular_core.Signal<boolean>;
|
|
249
|
+
readonly digits: _angular_core.Signal<string[]>;
|
|
250
|
+
readonly indices: _angular_core.Signal<number[]>;
|
|
251
|
+
writeValue(val: string): void;
|
|
252
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
253
|
+
registerOnTouched(fn: () => void): void;
|
|
254
|
+
setDisabledState(isDisabled: boolean): void;
|
|
255
|
+
handleInput(event: Event, index: number): void;
|
|
256
|
+
handleKeydown(event: KeyboardEvent, index: number): void;
|
|
257
|
+
handlePaste(event: ClipboardEvent): void;
|
|
258
|
+
handleFocus(index: number): void;
|
|
259
|
+
handleBlur(): void;
|
|
260
|
+
focus(): void;
|
|
261
|
+
private focusDigit;
|
|
262
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeInputComponent, never>;
|
|
263
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CodeInputComponent, "ea-code-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "completed": "completed"; }, never, never, true, never>;
|
|
264
|
+
}
|
|
265
|
+
|
|
182
266
|
type DialogSize = 'sm' | 'md' | 'lg' | 'full';
|
|
183
267
|
declare class DialogComponent {
|
|
184
268
|
private readonly dialogEl;
|
|
@@ -271,6 +355,11 @@ declare class CameraIconComponent {
|
|
|
271
355
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CameraIconComponent, "ea-icon-camera", never, {}, {}, never, never, true, never>;
|
|
272
356
|
}
|
|
273
357
|
|
|
358
|
+
declare class ChevronDownIconComponent {
|
|
359
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChevronDownIconComponent, never>;
|
|
360
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChevronDownIconComponent, "ea-icon-chevron-down", never, {}, {}, never, never, true, never>;
|
|
361
|
+
}
|
|
362
|
+
|
|
274
363
|
declare class CheckIconComponent {
|
|
275
364
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckIconComponent, never>;
|
|
276
365
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckIconComponent, "ea-icon-check", never, {}, {}, never, never, true, never>;
|
|
@@ -388,6 +477,26 @@ declare class InputComponent implements ControlValueAccessor, AfterViewInit {
|
|
|
388
477
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<InputComponent, "ea-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "error"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autofocus": { "alias": "autofocus"; "required": false; "isSignal": true; }; "showPasswordToggle": { "alias": "showPasswordToggle"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "inputFocused": "inputFocused"; "inputBlurred": "inputBlurred"; }, never, ["[slot=prefix]", "[slot=suffix]"], true, never>;
|
|
389
478
|
}
|
|
390
479
|
|
|
480
|
+
type ProgressBarVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
|
|
481
|
+
type ProgressBarSize = 'sm' | 'md' | 'lg';
|
|
482
|
+
declare class ProgressBarComponent {
|
|
483
|
+
readonly value: _angular_core.InputSignal<number>;
|
|
484
|
+
readonly max: _angular_core.InputSignal<number>;
|
|
485
|
+
readonly variant: _angular_core.InputSignal<ProgressBarVariant>;
|
|
486
|
+
readonly size: _angular_core.InputSignal<ProgressBarSize>;
|
|
487
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
488
|
+
readonly showValue: _angular_core.InputSignal<boolean>;
|
|
489
|
+
readonly indeterminate: _angular_core.InputSignal<boolean>;
|
|
490
|
+
readonly percentage: _angular_core.Signal<number>;
|
|
491
|
+
readonly percentageRounded: _angular_core.Signal<number>;
|
|
492
|
+
readonly hostClasses: _angular_core.Signal<{
|
|
493
|
+
[x: string]: boolean;
|
|
494
|
+
'ea-progress-bar--indeterminate': boolean;
|
|
495
|
+
}>;
|
|
496
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ProgressBarComponent, never>;
|
|
497
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ProgressBarComponent, "ea-progress-bar", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
498
|
+
}
|
|
499
|
+
|
|
391
500
|
type RadioSize = 'sm' | 'md' | 'lg';
|
|
392
501
|
type RadioOrientation = 'vertical' | 'horizontal';
|
|
393
502
|
declare class RadioGroupComponent implements ControlValueAccessor {
|
|
@@ -431,6 +540,21 @@ declare class RadioComponent {
|
|
|
431
540
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RadioComponent, "ea-radio", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
432
541
|
}
|
|
433
542
|
|
|
543
|
+
type SkeletonVariant = 'text' | 'circle' | 'rect';
|
|
544
|
+
declare class SkeletonComponent {
|
|
545
|
+
readonly variant: _angular_core.InputSignal<SkeletonVariant>;
|
|
546
|
+
readonly width: _angular_core.InputSignal<string | undefined>;
|
|
547
|
+
readonly height: _angular_core.InputSignal<string | undefined>;
|
|
548
|
+
readonly animated: _angular_core.InputSignal<boolean>;
|
|
549
|
+
readonly hostStyles: _angular_core.Signal<Record<string, string>>;
|
|
550
|
+
readonly hostClasses: _angular_core.Signal<{
|
|
551
|
+
[x: string]: boolean;
|
|
552
|
+
'ea-skeleton--animated': boolean;
|
|
553
|
+
}>;
|
|
554
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
|
|
555
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SkeletonComponent, "ea-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "animated": { "alias": "animated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
556
|
+
}
|
|
557
|
+
|
|
434
558
|
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
435
559
|
declare class SpinnerComponent {
|
|
436
560
|
readonly size: _angular_core.InputSignal<SpinnerSize>;
|
|
@@ -468,6 +592,51 @@ declare class SwitchComponent implements ControlValueAccessor {
|
|
|
468
592
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SwitchComponent, "ea-switch", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "id": { "alias": "id"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "changed": "changed"; }, never, never, true, never>;
|
|
469
593
|
}
|
|
470
594
|
|
|
595
|
+
declare class TabComponent implements OnInit, OnDestroy {
|
|
596
|
+
private readonly tabs;
|
|
597
|
+
readonly value: _angular_core.InputSignal<string>;
|
|
598
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
599
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
600
|
+
readonly isActive: _angular_core.Signal<boolean>;
|
|
601
|
+
ngOnInit(): void;
|
|
602
|
+
ngOnDestroy(): void;
|
|
603
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
|
|
604
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabComponent, "ea-tab", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
type TabsVariant = 'underline' | 'filled';
|
|
608
|
+
type TabsSize = 'sm' | 'md' | 'lg';
|
|
609
|
+
declare class TabsComponent {
|
|
610
|
+
readonly registeredTabs: _angular_core.WritableSignal<TabComponent[]>;
|
|
611
|
+
readonly variant: _angular_core.InputSignal<TabsVariant>;
|
|
612
|
+
readonly size: _angular_core.InputSignal<TabsSize>;
|
|
613
|
+
readonly activeTab: _angular_core.ModelSignal<string>;
|
|
614
|
+
readonly tabChange: _angular_core.OutputEmitterRef<string>;
|
|
615
|
+
registerTab(tab: TabComponent): void;
|
|
616
|
+
unregisterTab(tab: TabComponent): void;
|
|
617
|
+
selectTab(value: string): void;
|
|
618
|
+
handleKeydown(event: KeyboardEvent): void;
|
|
619
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
|
|
620
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ea-tabs", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": false; "isSignal": true; }; }, { "activeTab": "activeTabChange"; "tabChange": "tabChange"; }, never, ["*"], true, never>;
|
|
621
|
+
}
|
|
622
|
+
|
|
623
|
+
type TagVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
|
|
624
|
+
type TagSize = 'sm' | 'md' | 'lg';
|
|
625
|
+
declare class TagComponent {
|
|
626
|
+
readonly variant: _angular_core.InputSignal<TagVariant>;
|
|
627
|
+
readonly size: _angular_core.InputSignal<TagSize>;
|
|
628
|
+
readonly removable: _angular_core.InputSignal<boolean>;
|
|
629
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
630
|
+
readonly removed: _angular_core.OutputEmitterRef<void>;
|
|
631
|
+
readonly hostClasses: _angular_core.Signal<{
|
|
632
|
+
[x: string]: boolean;
|
|
633
|
+
'ea-tag--disabled': boolean;
|
|
634
|
+
}>;
|
|
635
|
+
onRemove(event: MouseEvent): void;
|
|
636
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TagComponent, never>;
|
|
637
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TagComponent, "ea-tag", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "removable": { "alias": "removable"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "removed": "removed"; }, never, ["*"], true, never>;
|
|
638
|
+
}
|
|
639
|
+
|
|
471
640
|
type TextareaSize = 'sm' | 'md' | 'lg';
|
|
472
641
|
type TextareaStatus = 'default' | 'error' | 'success';
|
|
473
642
|
type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
@@ -564,5 +733,5 @@ declare class TooltipDirective implements OnDestroy {
|
|
|
564
733
|
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[eaTooltip]", never, { "eaTooltip": { "alias": "eaTooltip"; "required": true; "isSignal": true; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
565
734
|
}
|
|
566
735
|
|
|
567
|
-
export { AlertCircleIconComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SpinnerComponent, SwitchComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
|
|
568
|
-
export type { AvatarEditorCropEvent, AvatarEditorShape, AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, DialogSize, DividerOrientation, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, RadioOrientation, RadioSize, SpinnerSize, SwitchSize, TextareaResize, TextareaSize, TextareaStatus, Toast, ToastOptions, ToastVariant, TooltipPosition };
|
|
736
|
+
export { AccordionComponent, AccordionItemComponent, AlertCircleIconComponent, AlertComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CameraIconComponent, CardComponent, CheckIconComponent, CheckboxComponent, ChevronDownIconComponent, CodeInputComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, MinusIconComponent, PlusIconComponent, ProgressBarComponent, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TagComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
|
|
737
|
+
export type { AlertVariant, AvatarEditorCropEvent, AvatarEditorCropState, AvatarEditorShape, AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, CodeInputStatus, DialogSize, DividerOrientation, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, ProgressBarSize, ProgressBarVariant, RadioOrientation, RadioSize, SkeletonVariant, SpinnerSize, SwitchSize, TabsSize, TabsVariant, TagSize, TagVariant, TextareaResize, TextareaSize, TextareaStatus, Toast, ToastOptions, ToastVariant, TooltipPosition };
|