@eagami/ui 0.4.1 → 0.6.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 +87 -7
- package/fesm2022/eagami-ui.mjs +1012 -323
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +5 -6
- package/src/styles/tokens/_elevation.scss +16 -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 +162 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@eagami/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.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,8 @@
|
|
|
39
35
|
"types": "./types/eagami-ui.d.ts",
|
|
40
36
|
"default": "./fesm2022/eagami-ui.mjs"
|
|
41
37
|
}
|
|
38
|
+
},
|
|
39
|
+
"dependencies": {
|
|
40
|
+
"tslib": "^2.3.0"
|
|
42
41
|
}
|
|
43
42
|
}
|
|
@@ -7,27 +7,29 @@
|
|
|
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
|
|
19
19
|
--shadow-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.45);
|
|
20
|
+
--shadow-focus-ring-error: 0 0 0 3px var(--color-error-200);
|
|
21
|
+
--shadow-focus-ring-success: 0 0 0 3px var(--color-success-200);
|
|
20
22
|
|
|
21
23
|
// ---------------------------------------------------------------------------
|
|
22
24
|
// Z-index scale
|
|
23
25
|
// ---------------------------------------------------------------------------
|
|
24
|
-
--z-index-base:
|
|
25
|
-
--z-index-raised:
|
|
26
|
+
--z-index-base: 0;
|
|
27
|
+
--z-index-raised: 10;
|
|
26
28
|
--z-index-dropdown: 100;
|
|
27
|
-
--z-index-sticky:
|
|
28
|
-
--z-index-overlay:
|
|
29
|
-
--z-index-modal:
|
|
30
|
-
--z-index-popover:
|
|
31
|
-
--z-index-toast:
|
|
32
|
-
--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;
|
|
33
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,8 +1,42 @@
|
|
|
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;
|
|
@@ -21,16 +55,19 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
21
55
|
readonly exportQuality: _angular_core.InputSignal<number>;
|
|
22
56
|
readonly exportType: _angular_core.InputSignal<string>;
|
|
23
57
|
readonly cropped: _angular_core.OutputEmitterRef<AvatarEditorCropEvent>;
|
|
58
|
+
readonly removed: _angular_core.OutputEmitterRef<void>;
|
|
24
59
|
readonly fileError: _angular_core.OutputEmitterRef<string>;
|
|
25
60
|
readonly hasImage: _angular_core.WritableSignal<boolean>;
|
|
26
61
|
readonly isDragOver: _angular_core.WritableSignal<boolean>;
|
|
27
62
|
readonly zoom: _angular_core.WritableSignal<number>;
|
|
63
|
+
readonly canRevert: _angular_core.Signal<boolean>;
|
|
28
64
|
private image;
|
|
29
65
|
private offsetX;
|
|
30
66
|
private offsetY;
|
|
31
67
|
private dragStartX;
|
|
32
68
|
private dragStartY;
|
|
33
69
|
private isDragging;
|
|
70
|
+
private hasDragged;
|
|
34
71
|
private initialOffsetX;
|
|
35
72
|
private initialOffsetY;
|
|
36
73
|
readonly hostClasses: _angular_core.Signal<{
|
|
@@ -38,6 +75,7 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
38
75
|
'ea-avatar-editor--has-image': boolean;
|
|
39
76
|
'ea-avatar-editor--drag-over': boolean;
|
|
40
77
|
}>;
|
|
78
|
+
private readonly injector;
|
|
41
79
|
private readonly boundWheel;
|
|
42
80
|
constructor();
|
|
43
81
|
ngOnDestroy(): void;
|
|
@@ -60,9 +98,11 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
60
98
|
setZoom(value: number): void;
|
|
61
99
|
onZoomInput(event: Event): void;
|
|
62
100
|
removeImage(): void;
|
|
101
|
+
revertImage(): void;
|
|
63
102
|
exportCrop(): void;
|
|
64
103
|
private loadFromUrl;
|
|
65
104
|
private loadFile;
|
|
105
|
+
private scheduleDrawAfterRender;
|
|
66
106
|
private centerImage;
|
|
67
107
|
private getScale;
|
|
68
108
|
private getDrawParams;
|
|
@@ -70,7 +110,7 @@ declare class AvatarEditorComponent implements OnDestroy {
|
|
|
70
110
|
private draw;
|
|
71
111
|
private clearCanvas;
|
|
72
112
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AvatarEditorComponent, never>;
|
|
73
|
-
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"; "fileError": "fileError"; }, never, never, true, never>;
|
|
113
|
+
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>;
|
|
74
114
|
}
|
|
75
115
|
|
|
76
116
|
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
@@ -173,6 +213,46 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
173
213
|
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>;
|
|
174
214
|
}
|
|
175
215
|
|
|
216
|
+
type CodeInputSize = 'sm' | 'md' | 'lg';
|
|
217
|
+
type CodeInputStatus = 'default' | 'error' | 'success';
|
|
218
|
+
declare class CodeInputComponent implements ControlValueAccessor {
|
|
219
|
+
readonly digitEls: _angular_core.Signal<readonly ElementRef<HTMLInputElement>[]>;
|
|
220
|
+
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
221
|
+
readonly length: _angular_core.InputSignal<number>;
|
|
222
|
+
readonly size: _angular_core.InputSignal<CodeInputSize>;
|
|
223
|
+
readonly status: _angular_core.InputSignal<CodeInputStatus>;
|
|
224
|
+
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
225
|
+
readonly errorMsg: _angular_core.InputSignal<string | undefined>;
|
|
226
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
227
|
+
readonly required: _angular_core.InputSignal<boolean>;
|
|
228
|
+
readonly id: _angular_core.InputSignal<string>;
|
|
229
|
+
readonly value: _angular_core.ModelSignal<string>;
|
|
230
|
+
readonly focusedIndex: _angular_core.WritableSignal<number>;
|
|
231
|
+
private readonly _formDisabled;
|
|
232
|
+
readonly completed: _angular_core.OutputEmitterRef<string>;
|
|
233
|
+
private onChange;
|
|
234
|
+
private onTouched;
|
|
235
|
+
readonly isDisabled: _angular_core.Signal<boolean>;
|
|
236
|
+
readonly resolvedStatus: _angular_core.Signal<CodeInputStatus>;
|
|
237
|
+
readonly showError: _angular_core.Signal<boolean>;
|
|
238
|
+
readonly showHint: _angular_core.Signal<boolean>;
|
|
239
|
+
readonly digits: _angular_core.Signal<string[]>;
|
|
240
|
+
readonly indices: _angular_core.Signal<number[]>;
|
|
241
|
+
writeValue(val: string): void;
|
|
242
|
+
registerOnChange(fn: (value: string) => void): void;
|
|
243
|
+
registerOnTouched(fn: () => void): void;
|
|
244
|
+
setDisabledState(isDisabled: boolean): void;
|
|
245
|
+
handleInput(event: Event, index: number): void;
|
|
246
|
+
handleKeydown(event: KeyboardEvent, index: number): void;
|
|
247
|
+
handlePaste(event: ClipboardEvent): void;
|
|
248
|
+
handleFocus(index: number): void;
|
|
249
|
+
handleBlur(): void;
|
|
250
|
+
focus(): void;
|
|
251
|
+
private focusDigit;
|
|
252
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CodeInputComponent, never>;
|
|
253
|
+
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>;
|
|
254
|
+
}
|
|
255
|
+
|
|
176
256
|
type DialogSize = 'sm' | 'md' | 'lg' | 'full';
|
|
177
257
|
declare class DialogComponent {
|
|
178
258
|
private readonly dialogEl;
|
|
@@ -260,6 +340,16 @@ declare class AlertCircleIconComponent {
|
|
|
260
340
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertCircleIconComponent, "ea-icon-alert-circle", never, {}, {}, never, never, true, never>;
|
|
261
341
|
}
|
|
262
342
|
|
|
343
|
+
declare class CameraIconComponent {
|
|
344
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CameraIconComponent, never>;
|
|
345
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CameraIconComponent, "ea-icon-camera", never, {}, {}, never, never, true, never>;
|
|
346
|
+
}
|
|
347
|
+
|
|
348
|
+
declare class ChevronDownIconComponent {
|
|
349
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ChevronDownIconComponent, never>;
|
|
350
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ChevronDownIconComponent, "ea-icon-chevron-down", never, {}, {}, never, never, true, never>;
|
|
351
|
+
}
|
|
352
|
+
|
|
263
353
|
declare class CheckIconComponent {
|
|
264
354
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckIconComponent, never>;
|
|
265
355
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckIconComponent, "ea-icon-check", never, {}, {}, never, never, true, never>;
|
|
@@ -290,6 +380,31 @@ declare class LoaderIconComponent {
|
|
|
290
380
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoaderIconComponent, "ea-icon-loader", never, {}, {}, never, never, true, never>;
|
|
291
381
|
}
|
|
292
382
|
|
|
383
|
+
declare class MinusIconComponent {
|
|
384
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MinusIconComponent, never>;
|
|
385
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MinusIconComponent, "ea-icon-minus", never, {}, {}, never, never, true, never>;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
declare class PlusIconComponent {
|
|
389
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PlusIconComponent, never>;
|
|
390
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PlusIconComponent, "ea-icon-plus", never, {}, {}, never, never, true, never>;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
declare class RotateCcwIconComponent {
|
|
394
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RotateCcwIconComponent, never>;
|
|
395
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RotateCcwIconComponent, "ea-icon-rotate-ccw", never, {}, {}, never, never, true, never>;
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
declare class TrashIconComponent {
|
|
399
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TrashIconComponent, never>;
|
|
400
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TrashIconComponent, "ea-icon-trash", never, {}, {}, never, never, true, never>;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
declare class UploadIconComponent {
|
|
404
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UploadIconComponent, never>;
|
|
405
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UploadIconComponent, "ea-icon-upload", never, {}, {}, never, never, true, never>;
|
|
406
|
+
}
|
|
407
|
+
|
|
293
408
|
declare class UserIconComponent {
|
|
294
409
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserIconComponent, never>;
|
|
295
410
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<UserIconComponent, "ea-icon-user", never, {}, {}, never, never, true, never>;
|
|
@@ -395,6 +510,21 @@ declare class RadioComponent {
|
|
|
395
510
|
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>;
|
|
396
511
|
}
|
|
397
512
|
|
|
513
|
+
type SkeletonVariant = 'text' | 'circle' | 'rect';
|
|
514
|
+
declare class SkeletonComponent {
|
|
515
|
+
readonly variant: _angular_core.InputSignal<SkeletonVariant>;
|
|
516
|
+
readonly width: _angular_core.InputSignal<string | undefined>;
|
|
517
|
+
readonly height: _angular_core.InputSignal<string | undefined>;
|
|
518
|
+
readonly animated: _angular_core.InputSignal<boolean>;
|
|
519
|
+
readonly hostStyles: _angular_core.Signal<Record<string, string>>;
|
|
520
|
+
readonly hostClasses: _angular_core.Signal<{
|
|
521
|
+
[x: string]: boolean;
|
|
522
|
+
'ea-skeleton--animated': boolean;
|
|
523
|
+
}>;
|
|
524
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SkeletonComponent, never>;
|
|
525
|
+
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>;
|
|
526
|
+
}
|
|
527
|
+
|
|
398
528
|
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
399
529
|
declare class SpinnerComponent {
|
|
400
530
|
readonly size: _angular_core.InputSignal<SpinnerSize>;
|
|
@@ -432,6 +562,34 @@ declare class SwitchComponent implements ControlValueAccessor {
|
|
|
432
562
|
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>;
|
|
433
563
|
}
|
|
434
564
|
|
|
565
|
+
declare class TabComponent implements OnInit, OnDestroy {
|
|
566
|
+
private readonly tabs;
|
|
567
|
+
readonly value: _angular_core.InputSignal<string>;
|
|
568
|
+
readonly label: _angular_core.InputSignal<string>;
|
|
569
|
+
readonly disabled: _angular_core.InputSignal<boolean>;
|
|
570
|
+
readonly isActive: _angular_core.Signal<boolean>;
|
|
571
|
+
ngOnInit(): void;
|
|
572
|
+
ngOnDestroy(): void;
|
|
573
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabComponent, never>;
|
|
574
|
+
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>;
|
|
575
|
+
}
|
|
576
|
+
|
|
577
|
+
type TabsVariant = 'underline' | 'filled';
|
|
578
|
+
type TabsSize = 'sm' | 'md' | 'lg';
|
|
579
|
+
declare class TabsComponent {
|
|
580
|
+
readonly registeredTabs: _angular_core.WritableSignal<TabComponent[]>;
|
|
581
|
+
readonly variant: _angular_core.InputSignal<TabsVariant>;
|
|
582
|
+
readonly size: _angular_core.InputSignal<TabsSize>;
|
|
583
|
+
readonly activeTab: _angular_core.ModelSignal<string>;
|
|
584
|
+
readonly tabChange: _angular_core.OutputEmitterRef<string>;
|
|
585
|
+
registerTab(tab: TabComponent): void;
|
|
586
|
+
unregisterTab(tab: TabComponent): void;
|
|
587
|
+
selectTab(value: string): void;
|
|
588
|
+
handleKeydown(event: KeyboardEvent): void;
|
|
589
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
|
|
590
|
+
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>;
|
|
591
|
+
}
|
|
592
|
+
|
|
435
593
|
type TextareaSize = 'sm' | 'md' | 'lg';
|
|
436
594
|
type TextareaStatus = 'default' | 'error' | 'success';
|
|
437
595
|
type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
@@ -528,5 +686,5 @@ declare class TooltipDirective implements OnDestroy {
|
|
|
528
686
|
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>;
|
|
529
687
|
}
|
|
530
688
|
|
|
531
|
-
export { AlertCircleIconComponent, AvatarComponent, AvatarEditorComponent, BadgeComponent, ButtonComponent, CardComponent, CheckIconComponent, CheckboxComponent, DialogComponent, DividerComponent, DropdownComponent, EyeIconComponent, EyeOffIconComponent, GoogleIconComponent, InfoIconComponent, InputComponent, LoaderIconComponent, RadioComponent, RadioGroupComponent, SpinnerComponent, SwitchComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, UserIconComponent, XIconComponent };
|
|
532
|
-
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 };
|
|
689
|
+
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, RadioComponent, RadioGroupComponent, RotateCcwIconComponent, SkeletonComponent, SpinnerComponent, SwitchComponent, TabComponent, TabsComponent, TextareaComponent, ToastComponent, ToastService, TooltipDirective, TrashIconComponent, UploadIconComponent, UserIconComponent, XIconComponent };
|
|
690
|
+
export type { AlertVariant, AvatarEditorCropEvent, AvatarEditorShape, AvatarShape, AvatarSize, BadgeSize, BadgeVariant, ButtonSize, ButtonType, ButtonVariant, CardHeaderAlign, CardPadding, CardVariant, CheckboxSize, CodeInputSize, CodeInputStatus, DialogSize, DividerOrientation, DropdownOption, DropdownSize, InputSize, InputStatus, InputType, RadioOrientation, RadioSize, SkeletonVariant, SpinnerSize, SwitchSize, TabsSize, TabsVariant, TextareaResize, TextareaSize, TextareaStatus, Toast, ToastOptions, ToastVariant, TooltipPosition };
|