@eagami/ui 0.5.0 → 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 +86 -17
- package/fesm2022/eagami-ui.mjs +580 -212
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +5 -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 +125 -3
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,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,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;
|
|
@@ -179,6 +213,46 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
179
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>;
|
|
180
214
|
}
|
|
181
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
|
+
|
|
182
256
|
type DialogSize = 'sm' | 'md' | 'lg' | 'full';
|
|
183
257
|
declare class DialogComponent {
|
|
184
258
|
private readonly dialogEl;
|
|
@@ -271,6 +345,11 @@ declare class CameraIconComponent {
|
|
|
271
345
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CameraIconComponent, "ea-icon-camera", never, {}, {}, never, never, true, never>;
|
|
272
346
|
}
|
|
273
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
|
+
|
|
274
353
|
declare class CheckIconComponent {
|
|
275
354
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CheckIconComponent, never>;
|
|
276
355
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CheckIconComponent, "ea-icon-check", never, {}, {}, never, never, true, never>;
|
|
@@ -431,6 +510,21 @@ declare class RadioComponent {
|
|
|
431
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>;
|
|
432
511
|
}
|
|
433
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
|
+
|
|
434
528
|
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
435
529
|
declare class SpinnerComponent {
|
|
436
530
|
readonly size: _angular_core.InputSignal<SpinnerSize>;
|
|
@@ -468,6 +562,34 @@ declare class SwitchComponent implements ControlValueAccessor {
|
|
|
468
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>;
|
|
469
563
|
}
|
|
470
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
|
+
|
|
471
593
|
type TextareaSize = 'sm' | 'md' | 'lg';
|
|
472
594
|
type TextareaStatus = 'default' | 'error' | 'success';
|
|
473
595
|
type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
|
|
@@ -564,5 +686,5 @@ declare class TooltipDirective implements OnDestroy {
|
|
|
564
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>;
|
|
565
687
|
}
|
|
566
688
|
|
|
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 };
|
|
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 };
|