@juligc99/loro-ui 0.0.13 → 0.0.15
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/design-tokens/loro-theme.scss +20 -0
- package/fesm2022/juligc99-loro-ui.mjs +275 -1967
- package/fesm2022/juligc99-loro-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/juligc99-loro-ui.d.ts +293 -156
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
+
import { LoroIconName as LoroIconName$1, LoroIconSize as LoroIconSize$1, LoroIconRenderMode as LoroIconRenderMode$1, LoroIconColor as LoroIconColor$1 } from '@loro-ui/components/resources/loro-icon';
|
|
2
3
|
import * as _juligc99_loro_ui from '@juligc99/loro-ui';
|
|
3
4
|
import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
|
|
4
5
|
|
|
@@ -7,6 +8,249 @@ declare class Footer {
|
|
|
7
8
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "loro-footer", never, {}, {}, never, never, true, never>;
|
|
8
9
|
}
|
|
9
10
|
|
|
11
|
+
declare class LoroAccordion {
|
|
12
|
+
title: _angular_core.InputSignal<string>;
|
|
13
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
14
|
+
expanded: _angular_core.InputSignal<boolean>;
|
|
15
|
+
expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
16
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAccordion, never>;
|
|
17
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAccordion, "loro-accordion", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
interface LoroAppNavItem {
|
|
21
|
+
id: string;
|
|
22
|
+
label: string;
|
|
23
|
+
icon: LoroIconName$1;
|
|
24
|
+
active?: boolean;
|
|
25
|
+
badge?: string | number | null;
|
|
26
|
+
disabled?: boolean;
|
|
27
|
+
}
|
|
28
|
+
interface LoroAppNavClick {
|
|
29
|
+
item: LoroAppNavItem;
|
|
30
|
+
section: 'main' | 'utility';
|
|
31
|
+
}
|
|
32
|
+
declare class LoroAppNav {
|
|
33
|
+
private readonly haptics;
|
|
34
|
+
private readonly draggedMobileIndex;
|
|
35
|
+
private readonly mobilePointerActive;
|
|
36
|
+
private activePointerId;
|
|
37
|
+
private suppressNextMobileClick;
|
|
38
|
+
items: _angular_core.InputSignal<LoroAppNavItem[]>;
|
|
39
|
+
utilityItems: _angular_core.InputSignal<LoroAppNavItem[]>;
|
|
40
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
41
|
+
showUtilityItems: _angular_core.InputSignal<boolean>;
|
|
42
|
+
compactDesktop: _angular_core.InputSignal<boolean>;
|
|
43
|
+
itemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
|
|
44
|
+
utilityItemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
|
|
45
|
+
navItemClick: _angular_core.OutputEmitterRef<LoroAppNavClick>;
|
|
46
|
+
protected readonly desktopItems: _angular_core.Signal<LoroAppNavItem[]>;
|
|
47
|
+
protected readonly mobileItems: _angular_core.Signal<LoroAppNavItem[]>;
|
|
48
|
+
protected readonly mobileVisualSlotCount: _angular_core.Signal<number>;
|
|
49
|
+
private readonly selectedMobileIndex;
|
|
50
|
+
protected readonly mobileSliderPosition: _angular_core.Signal<number>;
|
|
51
|
+
protected readonly isMobileDragging: _angular_core.Signal<boolean>;
|
|
52
|
+
protected readonly mobileItemCount: _angular_core.Signal<number>;
|
|
53
|
+
protected readonly selectedMobileItemId: _angular_core.Signal<string>;
|
|
54
|
+
protected isMobileItemVisualActive(index: number): boolean;
|
|
55
|
+
onMainItemClick(item: LoroAppNavItem): void;
|
|
56
|
+
protected onMobileItemClick(item: LoroAppNavItem): void;
|
|
57
|
+
protected onMobilePointerDown(event: PointerEvent): void;
|
|
58
|
+
protected onMobilePointerMove(event: PointerEvent): void;
|
|
59
|
+
protected onMobilePointerUp(event: PointerEvent): void;
|
|
60
|
+
protected onMobilePointerCancel(event: PointerEvent): void;
|
|
61
|
+
onUtilityItemClick(item: LoroAppNavItem): void;
|
|
62
|
+
private emitMainItem;
|
|
63
|
+
private getMobileVisualSlotPosition;
|
|
64
|
+
protected mobileItemGridColumn(index: number): number;
|
|
65
|
+
private mobileItemIndexToVisualSlot;
|
|
66
|
+
private getNearestEnabledMobileIndex;
|
|
67
|
+
private releaseMobilePointer;
|
|
68
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAppNav, never>;
|
|
69
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAppNav, "loro-app-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "utilityItems": { "alias": "utilityItems"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showUtilityItems": { "alias": "showUtilityItems"; "required": false; "isSignal": true; }; "compactDesktop": { "alias": "compactDesktop"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* LoroButton Type Definitions
|
|
74
|
+
*
|
|
75
|
+
* Centralized type definitions for the LoroButton component.
|
|
76
|
+
* Use these types for consistency across the application.
|
|
77
|
+
*
|
|
78
|
+
* @example
|
|
79
|
+
* const config: LoroButtonConfig = {
|
|
80
|
+
* variant: 'primary',
|
|
81
|
+
* size: 'md',
|
|
82
|
+
* disabled: false,
|
|
83
|
+
* };
|
|
84
|
+
*/
|
|
85
|
+
/**
|
|
86
|
+
* Visual variant style of the button
|
|
87
|
+
* @type {'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation'}
|
|
88
|
+
*/
|
|
89
|
+
type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
|
|
90
|
+
/**
|
|
91
|
+
* Button visual type (semantic grouping)
|
|
92
|
+
* @type {'primary' | 'secondary' | 'tertiary'}
|
|
93
|
+
*/
|
|
94
|
+
type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
|
|
95
|
+
/**
|
|
96
|
+
* Button color theme
|
|
97
|
+
* @type {'primary' | 'secondary' | 'tertiary' | 'danger'}
|
|
98
|
+
*/
|
|
99
|
+
type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
|
|
100
|
+
/**
|
|
101
|
+
* Button size preset
|
|
102
|
+
* @type {'sm' | 'md' | 'lg'}
|
|
103
|
+
*/
|
|
104
|
+
type LoroButtonSize = 'sm' | 'md' | 'lg';
|
|
105
|
+
/**
|
|
106
|
+
* Button width behavior
|
|
107
|
+
* @type {'fit-content' | 'full'}
|
|
108
|
+
*/
|
|
109
|
+
type LoroButtonWidth = 'fit-content' | 'full';
|
|
110
|
+
/**
|
|
111
|
+
* Icon display mode within the button
|
|
112
|
+
* @type {'none' | 'with-icon' | 'only-icon'}
|
|
113
|
+
*/
|
|
114
|
+
type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
|
|
115
|
+
/**
|
|
116
|
+
* Button HTML type
|
|
117
|
+
* @type {'button' | 'submit' | 'reset'}
|
|
118
|
+
*/
|
|
119
|
+
type LoroButtonHtmlType = 'button' | 'submit' | 'reset';
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* LoroButton Constants
|
|
123
|
+
*
|
|
124
|
+
* Default values, valid options, and configuration constants for the LoroButton component.
|
|
125
|
+
* Update these to maintain consistency across all button usage.
|
|
126
|
+
*/
|
|
127
|
+
|
|
128
|
+
/**
|
|
129
|
+
* Default input values for LoroButton
|
|
130
|
+
*/
|
|
131
|
+
declare const LORO_BUTTON_DEFAULTS: {
|
|
132
|
+
readonly text: "";
|
|
133
|
+
readonly label: "";
|
|
134
|
+
readonly variant: "primary";
|
|
135
|
+
readonly type: "primary";
|
|
136
|
+
readonly color: "primary";
|
|
137
|
+
readonly size: "md";
|
|
138
|
+
readonly fullWidth: false;
|
|
139
|
+
readonly buttonWidth: "fit-content";
|
|
140
|
+
readonly disabled: false;
|
|
141
|
+
readonly loading: false;
|
|
142
|
+
readonly selected: false;
|
|
143
|
+
readonly htmlType: "button";
|
|
144
|
+
readonly iconMode: "none";
|
|
145
|
+
readonly socialMobileCompact: true;
|
|
146
|
+
readonly iconSize: 23;
|
|
147
|
+
readonly iconButtonSize: null;
|
|
148
|
+
readonly iconColor: "";
|
|
149
|
+
};
|
|
150
|
+
/**
|
|
151
|
+
* Valid options for button variants
|
|
152
|
+
*/
|
|
153
|
+
declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
|
|
154
|
+
/**
|
|
155
|
+
* Valid options for button types
|
|
156
|
+
*/
|
|
157
|
+
declare const LORO_BUTTON_TYPES: readonly LoroButtonType[];
|
|
158
|
+
/**
|
|
159
|
+
* Valid options for button colors
|
|
160
|
+
*/
|
|
161
|
+
declare const LORO_BUTTON_COLORS: readonly LoroButtonColor[];
|
|
162
|
+
/**
|
|
163
|
+
* Valid options for button sizes
|
|
164
|
+
*/
|
|
165
|
+
declare const LORO_BUTTON_SIZES: readonly LoroButtonSize[];
|
|
166
|
+
/**
|
|
167
|
+
* Valid options for icon modes
|
|
168
|
+
*/
|
|
169
|
+
declare const LORO_BUTTON_ICON_MODES: readonly LoroButtonIconMode[];
|
|
170
|
+
/**
|
|
171
|
+
* CSS class names used by LoroButton (BEM notation)
|
|
172
|
+
*/
|
|
173
|
+
declare const LORO_BUTTON_CLASSES: {
|
|
174
|
+
readonly container: "loro-button";
|
|
175
|
+
readonly variant: (variant: LoroButtonVariant) => string;
|
|
176
|
+
readonly size: (size: LoroButtonSize) => string;
|
|
177
|
+
readonly color: (color: LoroButtonColor) => string;
|
|
178
|
+
readonly width: (width: LoroButtonWidth) => "loro-button--full" | undefined;
|
|
179
|
+
readonly state: {
|
|
180
|
+
readonly disabled: "loro-button--disabled";
|
|
181
|
+
readonly loading: "loro-button--loading";
|
|
182
|
+
readonly selected: "loro-button--selected";
|
|
183
|
+
};
|
|
184
|
+
readonly elements: {
|
|
185
|
+
readonly label: "loro-button__label";
|
|
186
|
+
readonly spinner: "loro-button__spinner";
|
|
187
|
+
readonly srStatus: "loro-button__sr-status";
|
|
188
|
+
};
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
/**
|
|
192
|
+
* LoroButton Component
|
|
193
|
+
*
|
|
194
|
+
* A versatile, accessible button component with multiple variants, sizes, and states.
|
|
195
|
+
* Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
|
|
196
|
+
*
|
|
197
|
+
* @example
|
|
198
|
+
* ```html
|
|
199
|
+
* <loro-button
|
|
200
|
+
* [text]="'Click me'"
|
|
201
|
+
* variant="primary"
|
|
202
|
+
* size="md"
|
|
203
|
+
* (change)="onButtonClick()"
|
|
204
|
+
* />
|
|
205
|
+
* ```
|
|
206
|
+
*/
|
|
207
|
+
declare class LoroButton {
|
|
208
|
+
label: _angular_core.InputSignal<string>;
|
|
209
|
+
text: _angular_core.InputSignal<string>;
|
|
210
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | LoroButtonIconMode | null>;
|
|
211
|
+
iconContent: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
212
|
+
iconMode: _angular_core.InputSignal<LoroButtonIconMode>;
|
|
213
|
+
iconSize: _angular_core.InputSignal<LoroIconSize$1>;
|
|
214
|
+
iconButtonSize: _angular_core.InputSignal<LoroIconSize$1 | null>;
|
|
215
|
+
iconColor: _angular_core.InputSignal<string>;
|
|
216
|
+
socialMobileCompact: _angular_core.InputSignal<boolean>;
|
|
217
|
+
selected: _angular_core.InputSignal<boolean>;
|
|
218
|
+
variant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
219
|
+
typeButton: _angular_core.InputSignal<LoroButtonType>;
|
|
220
|
+
color: _angular_core.InputSignal<LoroButtonColor>;
|
|
221
|
+
size: _angular_core.InputSignal<LoroButtonSize>;
|
|
222
|
+
fullWidth: _angular_core.InputSignal<boolean>;
|
|
223
|
+
buttonWidth: _angular_core.InputSignal<LoroButtonWidth>;
|
|
224
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
225
|
+
loading: _angular_core.InputSignal<boolean>;
|
|
226
|
+
type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
227
|
+
formId: _angular_core.InputSignal<string>;
|
|
228
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
229
|
+
ariaDescription: _angular_core.InputSignal<string>;
|
|
230
|
+
buttonClick: _angular_core.OutputEmitterRef<void>;
|
|
231
|
+
change: _angular_core.OutputEmitterRef<void>;
|
|
232
|
+
sanChange: _angular_core.OutputEmitterRef<void>;
|
|
233
|
+
protected readonly resolvedText: _angular_core.Signal<string>;
|
|
234
|
+
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName$1 | null>;
|
|
235
|
+
protected readonly resolvedIconMode: _angular_core.Signal<LoroButtonIconMode>;
|
|
236
|
+
protected readonly resolvedButtonWidth: _angular_core.Signal<LoroButtonWidth>;
|
|
237
|
+
protected readonly resolvedIconButtonSize: _angular_core.Signal<string>;
|
|
238
|
+
protected readonly resolvedTypeButton: _angular_core.Signal<LoroButtonType>;
|
|
239
|
+
protected readonly resolvedColor: _angular_core.Signal<LoroButtonColor>;
|
|
240
|
+
protected readonly showIcon: _angular_core.Signal<boolean>;
|
|
241
|
+
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
242
|
+
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
243
|
+
protected readonly resolvedIconRenderMode: _angular_core.Signal<LoroIconRenderMode$1>;
|
|
244
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
245
|
+
protected readonly showSpinner: _angular_core.Signal<boolean>;
|
|
246
|
+
protected readonly loadingAriaLabel: _angular_core.Signal<string>;
|
|
247
|
+
protected emitChange(): void;
|
|
248
|
+
protected defaultIconColor(): LoroIconColor$1;
|
|
249
|
+
private isIconMode;
|
|
250
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
|
|
251
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroButton, "loro-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconContent": { "alias": "iconContent"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconButtonSize": { "alias": "iconButtonSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "socialMobileCompact": { "alias": "socialMobileCompact"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "typeButton": { "alias": "typeButton"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "buttonWidth": { "alias": "buttonWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "formId": { "alias": "formId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "change": "change"; "sanChange": "sanChange"; }, never, never, true, never>;
|
|
252
|
+
}
|
|
253
|
+
|
|
10
254
|
type LoroAssetLayer = 'Action' | 'Brand' | 'Direction' | 'Home' | 'Illustrations' | 'Navigation' | 'Product' | 'Products' | 'Screens' | 'Social' | 'Status' | 'Stores';
|
|
11
255
|
type LoroIconAsset = {
|
|
12
256
|
readonly name: string;
|
|
@@ -871,140 +1115,6 @@ type LoroImageAssetName = keyof typeof LORO_IMAGE_PATHS;
|
|
|
871
1115
|
type LoroImageLegacyName = keyof typeof LORO_IMAGE_LEGACY_NAMES;
|
|
872
1116
|
type LoroImageName = LoroImageAssetName | LoroImageLegacyName;
|
|
873
1117
|
|
|
874
|
-
type LoroIconColorToken = 'default' | 'primary' | 'primary-strong' | 'primary-deep' | 'text' | 'muted' | 'success' | 'danger' | 'warning' | 'inverse';
|
|
875
|
-
type LoroIconColor = LoroIconColorToken | string;
|
|
876
|
-
type LoroIconRenderMode = 'mask' | 'origin';
|
|
877
|
-
type LoroIconSize = number | string;
|
|
878
|
-
declare class LoroIcon {
|
|
879
|
-
name: _angular_core.InputSignal<LoroIconName>;
|
|
880
|
-
size: _angular_core.InputSignal<LoroIconSize>;
|
|
881
|
-
alt: _angular_core.InputSignal<string>;
|
|
882
|
-
decorative: _angular_core.InputSignal<boolean>;
|
|
883
|
-
color: _angular_core.InputSignal<string>;
|
|
884
|
-
renderMode: _angular_core.InputSignal<LoroIconRenderMode>;
|
|
885
|
-
protected readonly assetName: _angular_core.Signal<"icon-apple" | "icon-arrow-right" | "icon-auto" | "icon-back" | "icon-bag" | "icon-barcode" | "icon-bell" | "icon-bottle" | "icon-bulb" | "icon-calendar" | "icon-camera" | "icon-cart" | "icon-chart-bar" | "icon-chat" | "icon-check" | "icon-checkbox-empty" | "icon-chevron-down" | "icon-chevron-right" | "icon-chevron-up" | "icon-clock" | "icon-download" | "icon-email" | "icon-eye-off" | "icon-eye" | "icon-globe" | "icon-google" | "icon-headset" | "icon-help" | "icon-home" | "icon-info" | "icon-laptop" | "icon-leaf" | "icon-list" | "icon-location" | "icon-lock" | "icon-logout" | "icon-megaphone" | "icon-moon" | "icon-more-vertical" | "icon-nav-compare" | "icon-nav-home" | "icon-nav-list" | "icon-nav-pantry" | "icon-pantry-stock" | "icon-paperclip" | "icon-phone" | "icon-plus-user" | "icon-plus" | "icon-scanner" | "icon-search" | "icon-send" | "icon-settings" | "icon-shelf" | "icon-shield-alert" | "icon-shield" | "icon-star" | "icon-store" | "icon-sun" | "icon-tablet" | "icon-tag" | "icon-tick-circle" | "icon-trash-white" | "icon-trash" | "icon-trend" | "icon-user" | "icon-warning">;
|
|
886
|
-
protected readonly src: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/arrow-right.svg" | "assets/loro-ui/icons/auto.svg" | "assets/loro-ui/icons/back.svg" | "assets/loro-ui/icons/bag.svg" | "assets/loro-ui/icons/barcode.svg" | "assets/loro-ui/icons/bell.svg" | "assets/loro-ui/icons/bottle.svg" | "assets/loro-ui/icons/bulb.svg" | "assets/loro-ui/icons/calendar.svg" | "assets/loro-ui/icons/camera.svg" | "assets/loro-ui/icons/cart.svg" | "assets/loro-ui/icons/chart-bar.svg" | "assets/loro-ui/icons/chat.svg" | "assets/loro-ui/icons/check.svg" | "assets/loro-ui/icons/checkbox-empty.svg" | "assets/loro-ui/icons/chevron-down.svg" | "assets/loro-ui/icons/chevron-right.svg" | "assets/loro-ui/icons/chevron-up.svg" | "assets/loro-ui/icons/clock.svg" | "assets/loro-ui/icons/download.svg" | "assets/loro-ui/icons/email.svg" | "assets/loro-ui/icons/eye-off.svg" | "assets/loro-ui/icons/eye.svg" | "assets/loro-ui/icons/globe.svg" | "assets/loro-ui/icons/google.svg" | "assets/loro-ui/icons/headset.svg" | "assets/loro-ui/icons/help.svg" | "assets/loro-ui/icons/home.svg" | "assets/loro-ui/icons/info.svg" | "assets/loro-ui/icons/laptop.svg" | "assets/loro-ui/icons/leaf.svg" | "assets/loro-ui/icons/list.svg" | "assets/loro-ui/icons/location.svg" | "assets/loro-ui/icons/lock.svg" | "assets/loro-ui/icons/logout.svg" | "assets/loro-ui/icons/megaphone.svg" | "assets/loro-ui/icons/moon.svg" | "assets/loro-ui/icons/more-vertical.svg" | "assets/loro-ui/icons/nav-compare.svg" | "assets/loro-ui/icons/nav-home.svg" | "assets/loro-ui/icons/nav-list.svg" | "assets/loro-ui/icons/nav-pantry.svg" | "assets/loro-ui/icons/pantry-stock.svg" | "assets/loro-ui/icons/paperclip.svg" | "assets/loro-ui/icons/phone.svg" | "assets/loro-ui/icons/plus-user.svg" | "assets/loro-ui/icons/plus.svg" | "assets/loro-ui/icons/scanner.svg" | "assets/loro-ui/icons/search.svg" | "assets/loro-ui/icons/send.svg" | "assets/loro-ui/icons/settings.svg" | "assets/loro-ui/icons/shelf.svg" | "assets/loro-ui/icons/shield-alert.svg" | "assets/loro-ui/icons/shield.svg" | "assets/loro-ui/icons/star.svg" | "assets/loro-ui/icons/store.svg" | "assets/loro-ui/icons/sun.svg" | "assets/loro-ui/icons/tablet.svg" | "assets/loro-ui/icons/tag.svg" | "assets/loro-ui/icons/tick-circle.svg" | "assets/loro-ui/icons/trash-white.svg" | "assets/loro-ui/icons/trash.svg" | "assets/loro-ui/icons/trend.svg" | "assets/loro-ui/icons/user.svg" | "assets/loro-ui/icons/warning.svg">;
|
|
887
|
-
protected readonly altText: _angular_core.Signal<string>;
|
|
888
|
-
protected readonly resolvedSize: _angular_core.Signal<string>;
|
|
889
|
-
protected readonly resolvedColor: _angular_core.Signal<string>;
|
|
890
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroIcon, never>;
|
|
891
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroIcon, "loro-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "renderMode": { "alias": "renderMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
892
|
-
}
|
|
893
|
-
|
|
894
|
-
declare class LoroAccordion {
|
|
895
|
-
title: _angular_core.InputSignal<string>;
|
|
896
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
897
|
-
expanded: _angular_core.InputSignal<boolean>;
|
|
898
|
-
expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
899
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAccordion, never>;
|
|
900
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAccordion, "loro-accordion", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expandedChange": "expandedChange"; }, never, ["*"], true, never>;
|
|
901
|
-
}
|
|
902
|
-
|
|
903
|
-
interface LoroAppNavItem {
|
|
904
|
-
id: string;
|
|
905
|
-
label: string;
|
|
906
|
-
icon: LoroIconName;
|
|
907
|
-
active?: boolean;
|
|
908
|
-
badge?: string | number | null;
|
|
909
|
-
disabled?: boolean;
|
|
910
|
-
}
|
|
911
|
-
interface LoroAppNavClick {
|
|
912
|
-
item: LoroAppNavItem;
|
|
913
|
-
section: 'main' | 'utility';
|
|
914
|
-
}
|
|
915
|
-
declare class LoroAppNav {
|
|
916
|
-
private readonly haptics;
|
|
917
|
-
private readonly draggedMobilePosition;
|
|
918
|
-
private readonly draggedMobileIndex;
|
|
919
|
-
private activePointerId;
|
|
920
|
-
private suppressNextMobileClick;
|
|
921
|
-
items: _angular_core.InputSignal<LoroAppNavItem[]>;
|
|
922
|
-
utilityItems: _angular_core.InputSignal<LoroAppNavItem[]>;
|
|
923
|
-
ariaLabel: _angular_core.InputSignal<string>;
|
|
924
|
-
showUtilityItems: _angular_core.InputSignal<boolean>;
|
|
925
|
-
compactDesktop: _angular_core.InputSignal<boolean>;
|
|
926
|
-
itemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
|
|
927
|
-
utilityItemClick: _angular_core.OutputEmitterRef<LoroAppNavItem>;
|
|
928
|
-
navItemClick: _angular_core.OutputEmitterRef<LoroAppNavClick>;
|
|
929
|
-
protected readonly desktopItems: _angular_core.Signal<LoroAppNavItem[]>;
|
|
930
|
-
protected readonly mobileItems: _angular_core.Signal<LoroAppNavItem[]>;
|
|
931
|
-
protected readonly mobileVisualSlotCount: _angular_core.Signal<number>;
|
|
932
|
-
private readonly selectedMobileIndex;
|
|
933
|
-
protected readonly mobileSliderPosition: _angular_core.Signal<number>;
|
|
934
|
-
protected readonly isMobileDragging: _angular_core.Signal<boolean>;
|
|
935
|
-
protected readonly mobileItemCount: _angular_core.Signal<number>;
|
|
936
|
-
protected readonly selectedMobileItemId: _angular_core.Signal<string>;
|
|
937
|
-
protected isMobileItemVisualActive(index: number): boolean;
|
|
938
|
-
onMainItemClick(item: LoroAppNavItem): void;
|
|
939
|
-
protected onMobileItemClick(item: LoroAppNavItem): void;
|
|
940
|
-
protected onMobilePointerDown(event: PointerEvent): void;
|
|
941
|
-
protected onMobilePointerMove(event: PointerEvent): void;
|
|
942
|
-
protected onMobilePointerUp(event: PointerEvent): void;
|
|
943
|
-
protected onMobilePointerCancel(event: PointerEvent): void;
|
|
944
|
-
onUtilityItemClick(item: LoroAppNavItem): void;
|
|
945
|
-
private emitMainItem;
|
|
946
|
-
private getMobileVisualSlotPosition;
|
|
947
|
-
protected mobileItemGridColumn(index: number): number;
|
|
948
|
-
private mobileItemIndexToVisualSlot;
|
|
949
|
-
private getNearestEnabledMobileIndex;
|
|
950
|
-
private releaseMobilePointer;
|
|
951
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAppNav, never>;
|
|
952
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAppNav, "loro-app-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "utilityItems": { "alias": "utilityItems"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "showUtilityItems": { "alias": "showUtilityItems"; "required": false; "isSignal": true; }; "compactDesktop": { "alias": "compactDesktop"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
|
|
953
|
-
}
|
|
954
|
-
|
|
955
|
-
type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
|
|
956
|
-
type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
|
|
957
|
-
type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
|
|
958
|
-
type LoroButtonSize = 'sm' | 'md' | 'lg';
|
|
959
|
-
type LoroButtonWidth = 'fit-content' | 'full';
|
|
960
|
-
type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
|
|
961
|
-
declare class LoroButton {
|
|
962
|
-
label: _angular_core.InputSignal<string>;
|
|
963
|
-
text: _angular_core.InputSignal<string>;
|
|
964
|
-
icon: _angular_core.InputSignal<LoroIconName | LoroButtonIconMode | null>;
|
|
965
|
-
iconContent: _angular_core.InputSignal<LoroIconName | null>;
|
|
966
|
-
iconMode: _angular_core.InputSignal<LoroButtonIconMode>;
|
|
967
|
-
iconSize: _angular_core.InputSignal<LoroIconSize>;
|
|
968
|
-
iconButtonSize: _angular_core.InputSignal<LoroIconSize | null>;
|
|
969
|
-
iconColor: _angular_core.InputSignal<string>;
|
|
970
|
-
socialMobileCompact: _angular_core.InputSignal<boolean>;
|
|
971
|
-
selected: _angular_core.InputSignal<boolean>;
|
|
972
|
-
variant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
973
|
-
typeButton: _angular_core.InputSignal<LoroButtonType>;
|
|
974
|
-
color: _angular_core.InputSignal<LoroButtonColor>;
|
|
975
|
-
size: _angular_core.InputSignal<LoroButtonSize>;
|
|
976
|
-
fullWidth: _angular_core.InputSignal<boolean>;
|
|
977
|
-
buttonWidth: _angular_core.InputSignal<LoroButtonWidth>;
|
|
978
|
-
disabled: _angular_core.InputSignal<boolean>;
|
|
979
|
-
loading: _angular_core.InputSignal<boolean>;
|
|
980
|
-
type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
981
|
-
formId: _angular_core.InputSignal<string>;
|
|
982
|
-
ariaLabel: _angular_core.InputSignal<string>;
|
|
983
|
-
ariaDescription: _angular_core.InputSignal<string>;
|
|
984
|
-
buttonClick: _angular_core.OutputEmitterRef<void>;
|
|
985
|
-
change: _angular_core.OutputEmitterRef<void>;
|
|
986
|
-
sanChange: _angular_core.OutputEmitterRef<void>;
|
|
987
|
-
protected readonly resolvedText: _angular_core.Signal<string>;
|
|
988
|
-
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName | null>;
|
|
989
|
-
protected readonly resolvedIconMode: _angular_core.Signal<LoroButtonIconMode>;
|
|
990
|
-
protected readonly resolvedButtonWidth: _angular_core.Signal<LoroButtonWidth>;
|
|
991
|
-
protected readonly resolvedIconButtonSize: _angular_core.Signal<string>;
|
|
992
|
-
protected readonly resolvedTypeButton: _angular_core.Signal<LoroButtonType>;
|
|
993
|
-
protected readonly resolvedColor: _angular_core.Signal<LoroButtonColor>;
|
|
994
|
-
protected readonly showIcon: _angular_core.Signal<boolean>;
|
|
995
|
-
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
996
|
-
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
997
|
-
protected readonly resolvedIconRenderMode: _angular_core.Signal<LoroIconRenderMode>;
|
|
998
|
-
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
999
|
-
protected readonly showSpinner: _angular_core.Signal<boolean>;
|
|
1000
|
-
protected readonly loadingAriaLabel: _angular_core.Signal<string>;
|
|
1001
|
-
protected emitChange(): void;
|
|
1002
|
-
protected defaultIconColor(): LoroIconColor;
|
|
1003
|
-
private isIconMode;
|
|
1004
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
|
|
1005
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroButton, "loro-button", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconContent": { "alias": "iconContent"; "required": false; "isSignal": true; }; "iconMode": { "alias": "iconMode"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconButtonSize": { "alias": "iconButtonSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "socialMobileCompact": { "alias": "socialMobileCompact"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "typeButton": { "alias": "typeButton"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; "buttonWidth": { "alias": "buttonWidth"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "formId": { "alias": "formId"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; "change": "change"; "sanChange": "sanChange"; }, never, never, true, never>;
|
|
1006
|
-
}
|
|
1007
|
-
|
|
1008
1118
|
declare class LoroImage {
|
|
1009
1119
|
name: _angular_core.InputSignal<LoroImageName>;
|
|
1010
1120
|
alt: _angular_core.InputSignal<string>;
|
|
@@ -1025,9 +1135,9 @@ declare class LoroAssistantCard {
|
|
|
1025
1135
|
title: _angular_core.InputSignal<string>;
|
|
1026
1136
|
description: _angular_core.InputSignal<string>;
|
|
1027
1137
|
imageName: _angular_core.InputSignal<LoroImageName | null>;
|
|
1028
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1138
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1029
1139
|
actionLabel: _angular_core.InputSignal<string>;
|
|
1030
|
-
actionIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1140
|
+
actionIcon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1031
1141
|
actionVariant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
1032
1142
|
action: _angular_core.OutputEmitterRef<void>;
|
|
1033
1143
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAssistantCard, never>;
|
|
@@ -1035,7 +1145,7 @@ declare class LoroAssistantCard {
|
|
|
1035
1145
|
}
|
|
1036
1146
|
|
|
1037
1147
|
declare class LoroAuthSocialButton {
|
|
1038
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1148
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1039
1149
|
label: _angular_core.InputSignal<string>;
|
|
1040
1150
|
outline: _angular_core.InputSignal<boolean>;
|
|
1041
1151
|
selected: _angular_core.InputSignal<boolean>;
|
|
@@ -1059,7 +1169,7 @@ type LoroCardJustify = 'start' | 'center' | 'end';
|
|
|
1059
1169
|
declare class LoroCard {
|
|
1060
1170
|
title: _angular_core.InputSignal<string>;
|
|
1061
1171
|
description: _angular_core.InputSignal<string>;
|
|
1062
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1172
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1063
1173
|
iconSize: _angular_core.InputSignal<number>;
|
|
1064
1174
|
iconColor: _angular_core.InputSignal<string>;
|
|
1065
1175
|
link: _angular_core.InputSignal<string>;
|
|
@@ -1073,7 +1183,7 @@ declare class LoroCard {
|
|
|
1073
1183
|
heroSubtitle: _angular_core.InputSignal<string>;
|
|
1074
1184
|
heroAvatarSrc: _angular_core.InputSignal<string | null>;
|
|
1075
1185
|
heroAvatarAlt: _angular_core.InputSignal<string>;
|
|
1076
|
-
heroAvatarIcon: _angular_core.InputSignal<LoroIconName>;
|
|
1186
|
+
heroAvatarIcon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1077
1187
|
heroAvatarIconSize: _angular_core.InputSignal<number>;
|
|
1078
1188
|
heroVisualImage: _angular_core.InputSignal<LoroImageName | null>;
|
|
1079
1189
|
heroVisualAlt: _angular_core.InputSignal<string>;
|
|
@@ -1088,7 +1198,7 @@ declare class LoroCardNav {
|
|
|
1088
1198
|
private readonly router;
|
|
1089
1199
|
title: _angular_core.InputSignal<string>;
|
|
1090
1200
|
description: _angular_core.InputSignal<string>;
|
|
1091
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1201
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1092
1202
|
iconSize: _angular_core.InputSignal<number>;
|
|
1093
1203
|
iconColor: _angular_core.InputSignal<string>;
|
|
1094
1204
|
route: _angular_core.InputSignal<string>;
|
|
@@ -1112,7 +1222,7 @@ declare class LoroDashboardCard {
|
|
|
1112
1222
|
title: _angular_core.InputSignal<string>;
|
|
1113
1223
|
description: _angular_core.InputSignal<string>;
|
|
1114
1224
|
link: _angular_core.InputSignal<string>;
|
|
1115
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1225
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1116
1226
|
illustration: _angular_core.InputSignal<LoroImageName | null>;
|
|
1117
1227
|
variant: _angular_core.InputSignal<"home" | "default">;
|
|
1118
1228
|
showArrow: _angular_core.InputSignal<boolean>;
|
|
@@ -1188,7 +1298,7 @@ declare class LoroProductRow {
|
|
|
1188
1298
|
|
|
1189
1299
|
declare class LoroProductSection {
|
|
1190
1300
|
title: _angular_core.InputSignal<string>;
|
|
1191
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1301
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1192
1302
|
collapsible: _angular_core.InputSignal<boolean>;
|
|
1193
1303
|
protected readonly expanded: _angular_core.WritableSignal<boolean>;
|
|
1194
1304
|
protected toggle(): void;
|
|
@@ -1200,13 +1310,17 @@ declare class LoroProfileCard {
|
|
|
1200
1310
|
name: _angular_core.InputSignal<string>;
|
|
1201
1311
|
email: _angular_core.InputSignal<string>;
|
|
1202
1312
|
imageSrc: _angular_core.InputSignal<string | null>;
|
|
1313
|
+
changePhotoLabel: _angular_core.InputSignal<string>;
|
|
1314
|
+
changePhotoLoadingLabel: _angular_core.InputSignal<string>;
|
|
1315
|
+
changePhotoLoading: _angular_core.InputSignal<boolean>;
|
|
1316
|
+
changePhotoDisabled: _angular_core.InputSignal<boolean>;
|
|
1203
1317
|
changePhotoClick: _angular_core.OutputEmitterRef<void>;
|
|
1204
1318
|
private readonly imageFailed;
|
|
1205
1319
|
constructor();
|
|
1206
1320
|
protected resolvedImageSrc(): string | null;
|
|
1207
1321
|
protected onImageError(): void;
|
|
1208
1322
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroProfileCard, never>;
|
|
1209
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroProfileCard, "loro-profile-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": true; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; }, { "changePhotoClick": "changePhotoClick"; }, never, never, true, never>;
|
|
1323
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroProfileCard, "loro-profile-card", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": true; "isSignal": true; }; "imageSrc": { "alias": "imageSrc"; "required": false; "isSignal": true; }; "changePhotoLabel": { "alias": "changePhotoLabel"; "required": false; "isSignal": true; }; "changePhotoLoadingLabel": { "alias": "changePhotoLoadingLabel"; "required": false; "isSignal": true; }; "changePhotoLoading": { "alias": "changePhotoLoading"; "required": false; "isSignal": true; }; "changePhotoDisabled": { "alias": "changePhotoDisabled"; "required": false; "isSignal": true; }; }, { "changePhotoClick": "changePhotoClick"; }, never, never, true, never>;
|
|
1210
1324
|
}
|
|
1211
1325
|
|
|
1212
1326
|
type LoroProfileHeroVariant = 'default' | 'compact' | 'large' | 'support';
|
|
@@ -1241,7 +1355,7 @@ declare class LoroStatCard {
|
|
|
1241
1355
|
value: _angular_core.InputSignal<string>;
|
|
1242
1356
|
description: _angular_core.InputSignal<string>;
|
|
1243
1357
|
eyebrow: _angular_core.InputSignal<string>;
|
|
1244
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1358
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1245
1359
|
iconSize: _angular_core.InputSignal<number>;
|
|
1246
1360
|
image: _angular_core.InputSignal<LoroImageName | null>;
|
|
1247
1361
|
topImage: _angular_core.InputSignal<LoroImageName | null>;
|
|
@@ -1284,7 +1398,7 @@ type LoroTabAlign = 'flex' | 'block';
|
|
|
1284
1398
|
interface LoroTabOption {
|
|
1285
1399
|
readonly value: string;
|
|
1286
1400
|
readonly label: string;
|
|
1287
|
-
readonly icon?: LoroIconName | null;
|
|
1401
|
+
readonly icon?: LoroIconName$1 | null;
|
|
1288
1402
|
readonly ariaLabel?: string;
|
|
1289
1403
|
}
|
|
1290
1404
|
declare class LoroTab {
|
|
@@ -1321,7 +1435,7 @@ declare class LoroAlert {
|
|
|
1321
1435
|
readonly action: _angular_core.OutputEmitterRef<void>;
|
|
1322
1436
|
/** Emitted by the close button. The parent decides whether to remove the alert. */
|
|
1323
1437
|
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
1324
|
-
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName>;
|
|
1438
|
+
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName$1>;
|
|
1325
1439
|
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
1326
1440
|
protected readonly role: _angular_core.Signal<"status" | "alert" | null>;
|
|
1327
1441
|
protected readonly ariaLive: _angular_core.Signal<"polite" | "assertive" | null>;
|
|
@@ -1352,7 +1466,7 @@ interface LoroNotificationItem {
|
|
|
1352
1466
|
title: string;
|
|
1353
1467
|
message: string;
|
|
1354
1468
|
time?: string;
|
|
1355
|
-
icon?: LoroIconName;
|
|
1469
|
+
icon?: LoroIconName$1;
|
|
1356
1470
|
unread?: boolean;
|
|
1357
1471
|
}
|
|
1358
1472
|
declare class LoroNotificationPanel {
|
|
@@ -1363,7 +1477,7 @@ declare class LoroNotificationPanel {
|
|
|
1363
1477
|
markAllLabel: _angular_core.InputSignal<string>;
|
|
1364
1478
|
showClearAll: _angular_core.InputSignal<boolean>;
|
|
1365
1479
|
clearAllLabel: _angular_core.InputSignal<string>;
|
|
1366
|
-
emptyIcon: _angular_core.InputSignal<LoroIconName>;
|
|
1480
|
+
emptyIcon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1367
1481
|
emptyTitle: _angular_core.InputSignal<string>;
|
|
1368
1482
|
emptyMessage: _angular_core.InputSignal<string>;
|
|
1369
1483
|
itemClick: _angular_core.OutputEmitterRef<LoroNotificationItem>;
|
|
@@ -1371,6 +1485,8 @@ declare class LoroNotificationPanel {
|
|
|
1371
1485
|
markAllRead: _angular_core.OutputEmitterRef<void>;
|
|
1372
1486
|
clearAll: _angular_core.OutputEmitterRef<void>;
|
|
1373
1487
|
protected readonly hasUnread: _angular_core.Signal<boolean>;
|
|
1488
|
+
protected onMarkAllReadClick(event: Event): void;
|
|
1489
|
+
protected onClearAllClick(event: Event): void;
|
|
1374
1490
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroNotificationPanel, never>;
|
|
1375
1491
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroNotificationPanel, "loro-notification-panel", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "presentation": { "alias": "presentation"; "required": false; "isSignal": true; }; "showMarkAll": { "alias": "showMarkAll"; "required": false; "isSignal": true; }; "markAllLabel": { "alias": "markAllLabel"; "required": false; "isSignal": true; }; "showClearAll": { "alias": "showClearAll"; "required": false; "isSignal": true; }; "clearAllLabel": { "alias": "clearAllLabel"; "required": false; "isSignal": true; }; "emptyIcon": { "alias": "emptyIcon"; "required": false; "isSignal": true; }; "emptyTitle": { "alias": "emptyTitle"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "itemRemove": "itemRemove"; "markAllRead": "markAllRead"; "clearAll": "clearAll"; }, never, never, true, never>;
|
|
1376
1492
|
}
|
|
@@ -1379,7 +1495,7 @@ declare class LoroNotificationRow {
|
|
|
1379
1495
|
title: _angular_core.InputSignal<string>;
|
|
1380
1496
|
message: _angular_core.InputSignal<string>;
|
|
1381
1497
|
time: _angular_core.InputSignal<string>;
|
|
1382
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1498
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1383
1499
|
unread: _angular_core.InputSignal<boolean>;
|
|
1384
1500
|
rowClick: _angular_core.OutputEmitterRef<void>;
|
|
1385
1501
|
rowRemove: _angular_core.OutputEmitterRef<void>;
|
|
@@ -1434,7 +1550,7 @@ declare class LoroToast {
|
|
|
1434
1550
|
|
|
1435
1551
|
type LoroAuthFieldState = 'default' | 'error';
|
|
1436
1552
|
declare class LoroAuthField implements FormValueControl<string> {
|
|
1437
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1553
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1438
1554
|
label: _angular_core.InputSignal<string>;
|
|
1439
1555
|
placeholder: _angular_core.InputSignal<string>;
|
|
1440
1556
|
value: _angular_core.ModelSignal<string>;
|
|
@@ -1505,7 +1621,7 @@ declare class LoroDropdown implements FormValueControl<string> {
|
|
|
1505
1621
|
declare class LoroFilterChip {
|
|
1506
1622
|
label: _angular_core.InputSignal<string>;
|
|
1507
1623
|
value: _angular_core.InputSignal<string>;
|
|
1508
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1624
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1509
1625
|
active: _angular_core.InputSignal<boolean>;
|
|
1510
1626
|
selected: _angular_core.OutputEmitterRef<string>;
|
|
1511
1627
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroFilterChip, never>;
|
|
@@ -1524,9 +1640,9 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1524
1640
|
name: _angular_core.InputSignal<string>;
|
|
1525
1641
|
autocomplete: _angular_core.InputSignal<string>;
|
|
1526
1642
|
inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "none" | "tel" | "url" | "numeric" | "decimal">;
|
|
1527
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1643
|
+
icon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1528
1644
|
iconSize: _angular_core.InputSignal<number>;
|
|
1529
|
-
trailingIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1645
|
+
trailingIcon: _angular_core.InputSignal<LoroIconName$1 | null>;
|
|
1530
1646
|
trailingIconSize: _angular_core.InputSignal<number>;
|
|
1531
1647
|
trailingAriaLabel: _angular_core.InputSignal<string>;
|
|
1532
1648
|
variant: _angular_core.InputSignal<LoroInputVariant>;
|
|
@@ -1603,7 +1719,7 @@ declare class LoroSelect {
|
|
|
1603
1719
|
title: _angular_core.InputSignal<string>;
|
|
1604
1720
|
subtitle: _angular_core.InputSignal<string>;
|
|
1605
1721
|
meta: _angular_core.InputSignal<string>;
|
|
1606
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1722
|
+
icon: _angular_core.InputSignal<LoroIconName$1>;
|
|
1607
1723
|
badge: _angular_core.InputSignal<string>;
|
|
1608
1724
|
status: _angular_core.InputSignal<string>;
|
|
1609
1725
|
selected: _angular_core.InputSignal<boolean>;
|
|
@@ -1681,6 +1797,7 @@ declare class LoroModal {
|
|
|
1681
1797
|
protected readonly backdropOpacity: _angular_core.Signal<string>;
|
|
1682
1798
|
constructor();
|
|
1683
1799
|
protected requestClose(): void;
|
|
1800
|
+
protected onCloseClick(event: Event): void;
|
|
1684
1801
|
protected onSheetTouchStart(event: TouchEvent, dialog: HTMLElement): void;
|
|
1685
1802
|
protected onSheetTouchMove(event: TouchEvent): void;
|
|
1686
1803
|
protected onSheetTouchEnd(): void;
|
|
@@ -1698,6 +1815,26 @@ declare class LoroModal {
|
|
|
1698
1815
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroModal, "loro-modal", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "placement": { "alias": "placement"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "sheetDragToClose": { "alias": "sheetDragToClose"; "required": false; "isSignal": true; }; "sheetRestTop": { "alias": "sheetRestTop"; "required": false; "isSignal": true; }; "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; "closeOnBackdrop": { "alias": "closeOnBackdrop"; "required": false; "isSignal": true; }; }, { "modalClose": "modalClose"; }, never, ["*", "[loro-modal-actions]"], true, never>;
|
|
1699
1816
|
}
|
|
1700
1817
|
|
|
1818
|
+
type LoroIconColorToken = 'default' | 'primary' | 'primary-strong' | 'primary-deep' | 'text' | 'muted' | 'success' | 'danger' | 'warning' | 'inverse';
|
|
1819
|
+
type LoroIconColor = LoroIconColorToken | string;
|
|
1820
|
+
type LoroIconRenderMode = 'mask' | 'origin';
|
|
1821
|
+
type LoroIconSize = number | string;
|
|
1822
|
+
declare class LoroIcon {
|
|
1823
|
+
name: _angular_core.InputSignal<LoroIconName>;
|
|
1824
|
+
size: _angular_core.InputSignal<LoroIconSize>;
|
|
1825
|
+
alt: _angular_core.InputSignal<string>;
|
|
1826
|
+
decorative: _angular_core.InputSignal<boolean>;
|
|
1827
|
+
color: _angular_core.InputSignal<string>;
|
|
1828
|
+
renderMode: _angular_core.InputSignal<LoroIconRenderMode>;
|
|
1829
|
+
protected readonly assetName: _angular_core.Signal<"icon-apple" | "icon-arrow-right" | "icon-auto" | "icon-back" | "icon-bag" | "icon-barcode" | "icon-bell" | "icon-bottle" | "icon-bulb" | "icon-calendar" | "icon-camera" | "icon-cart" | "icon-chart-bar" | "icon-chat" | "icon-check" | "icon-checkbox-empty" | "icon-chevron-down" | "icon-chevron-right" | "icon-chevron-up" | "icon-clock" | "icon-download" | "icon-email" | "icon-eye-off" | "icon-eye" | "icon-globe" | "icon-google" | "icon-headset" | "icon-help" | "icon-home" | "icon-info" | "icon-laptop" | "icon-leaf" | "icon-list" | "icon-location" | "icon-lock" | "icon-logout" | "icon-megaphone" | "icon-moon" | "icon-more-vertical" | "icon-nav-compare" | "icon-nav-home" | "icon-nav-list" | "icon-nav-pantry" | "icon-pantry-stock" | "icon-paperclip" | "icon-phone" | "icon-plus-user" | "icon-plus" | "icon-scanner" | "icon-search" | "icon-send" | "icon-settings" | "icon-shelf" | "icon-shield-alert" | "icon-shield" | "icon-star" | "icon-store" | "icon-sun" | "icon-tablet" | "icon-tag" | "icon-tick-circle" | "icon-trash-white" | "icon-trash" | "icon-trend" | "icon-user" | "icon-warning">;
|
|
1830
|
+
protected readonly src: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/arrow-right.svg" | "assets/loro-ui/icons/auto.svg" | "assets/loro-ui/icons/back.svg" | "assets/loro-ui/icons/bag.svg" | "assets/loro-ui/icons/barcode.svg" | "assets/loro-ui/icons/bell.svg" | "assets/loro-ui/icons/bottle.svg" | "assets/loro-ui/icons/bulb.svg" | "assets/loro-ui/icons/calendar.svg" | "assets/loro-ui/icons/camera.svg" | "assets/loro-ui/icons/cart.svg" | "assets/loro-ui/icons/chart-bar.svg" | "assets/loro-ui/icons/chat.svg" | "assets/loro-ui/icons/check.svg" | "assets/loro-ui/icons/checkbox-empty.svg" | "assets/loro-ui/icons/chevron-down.svg" | "assets/loro-ui/icons/chevron-right.svg" | "assets/loro-ui/icons/chevron-up.svg" | "assets/loro-ui/icons/clock.svg" | "assets/loro-ui/icons/download.svg" | "assets/loro-ui/icons/email.svg" | "assets/loro-ui/icons/eye-off.svg" | "assets/loro-ui/icons/eye.svg" | "assets/loro-ui/icons/globe.svg" | "assets/loro-ui/icons/google.svg" | "assets/loro-ui/icons/headset.svg" | "assets/loro-ui/icons/help.svg" | "assets/loro-ui/icons/home.svg" | "assets/loro-ui/icons/info.svg" | "assets/loro-ui/icons/laptop.svg" | "assets/loro-ui/icons/leaf.svg" | "assets/loro-ui/icons/list.svg" | "assets/loro-ui/icons/location.svg" | "assets/loro-ui/icons/lock.svg" | "assets/loro-ui/icons/logout.svg" | "assets/loro-ui/icons/megaphone.svg" | "assets/loro-ui/icons/moon.svg" | "assets/loro-ui/icons/more-vertical.svg" | "assets/loro-ui/icons/nav-compare.svg" | "assets/loro-ui/icons/nav-home.svg" | "assets/loro-ui/icons/nav-list.svg" | "assets/loro-ui/icons/nav-pantry.svg" | "assets/loro-ui/icons/pantry-stock.svg" | "assets/loro-ui/icons/paperclip.svg" | "assets/loro-ui/icons/phone.svg" | "assets/loro-ui/icons/plus-user.svg" | "assets/loro-ui/icons/plus.svg" | "assets/loro-ui/icons/scanner.svg" | "assets/loro-ui/icons/search.svg" | "assets/loro-ui/icons/send.svg" | "assets/loro-ui/icons/settings.svg" | "assets/loro-ui/icons/shelf.svg" | "assets/loro-ui/icons/shield-alert.svg" | "assets/loro-ui/icons/shield.svg" | "assets/loro-ui/icons/star.svg" | "assets/loro-ui/icons/store.svg" | "assets/loro-ui/icons/sun.svg" | "assets/loro-ui/icons/tablet.svg" | "assets/loro-ui/icons/tag.svg" | "assets/loro-ui/icons/tick-circle.svg" | "assets/loro-ui/icons/trash-white.svg" | "assets/loro-ui/icons/trash.svg" | "assets/loro-ui/icons/trend.svg" | "assets/loro-ui/icons/user.svg" | "assets/loro-ui/icons/warning.svg">;
|
|
1831
|
+
protected readonly altText: _angular_core.Signal<string>;
|
|
1832
|
+
protected readonly resolvedSize: _angular_core.Signal<string>;
|
|
1833
|
+
protected readonly resolvedColor: _angular_core.Signal<string>;
|
|
1834
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroIcon, never>;
|
|
1835
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroIcon, "loro-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "decorative": { "alias": "decorative"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "renderMode": { "alias": "renderMode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1701
1838
|
declare class LoroHapticsService {
|
|
1702
1839
|
private readonly document;
|
|
1703
1840
|
private readonly vibration;
|
|
@@ -1709,5 +1846,5 @@ declare class LoroHapticsService {
|
|
|
1709
1846
|
static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoroHapticsService>;
|
|
1710
1847
|
}
|
|
1711
1848
|
|
|
1712
|
-
export { Footer, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
|
|
1713
|
-
export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };
|
|
1849
|
+
export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
|
|
1850
|
+
export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };
|