@juligc99/loro-ui 0.0.15 → 0.0.16
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/fesm2022/juligc99-loro-ui.mjs +110 -111
- package/fesm2022/juligc99-loro-ui.mjs.map +1 -1
- package/package.json +12 -10
- package/types/juligc99-loro-ui.d.ts +282 -283
|
@@ -1,5 +1,4 @@
|
|
|
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';
|
|
3
2
|
import * as _juligc99_loro_ui from '@juligc99/loro-ui';
|
|
4
3
|
import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
|
|
5
4
|
|
|
@@ -8,249 +7,6 @@ declare class Footer {
|
|
|
8
7
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "loro-footer", never, {}, {}, never, never, true, never>;
|
|
9
8
|
}
|
|
10
9
|
|
|
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
|
-
|
|
254
10
|
type LoroAssetLayer = 'Action' | 'Brand' | 'Direction' | 'Home' | 'Illustrations' | 'Navigation' | 'Product' | 'Products' | 'Screens' | 'Social' | 'Status' | 'Stores';
|
|
255
11
|
type LoroIconAsset = {
|
|
256
12
|
readonly name: string;
|
|
@@ -1115,6 +871,269 @@ type LoroImageAssetName = keyof typeof LORO_IMAGE_PATHS;
|
|
|
1115
871
|
type LoroImageLegacyName = keyof typeof LORO_IMAGE_LEGACY_NAMES;
|
|
1116
872
|
type LoroImageName = LoroImageAssetName | LoroImageLegacyName;
|
|
1117
873
|
|
|
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 draggedMobileIndex;
|
|
918
|
+
private readonly mobilePointerActive;
|
|
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
|
+
/**
|
|
956
|
+
* LoroButton Type Definitions
|
|
957
|
+
*
|
|
958
|
+
* Centralized type definitions for the LoroButton component.
|
|
959
|
+
* Use these types for consistency across the application.
|
|
960
|
+
*
|
|
961
|
+
* @example
|
|
962
|
+
* const config: LoroButtonConfig = {
|
|
963
|
+
* variant: 'primary',
|
|
964
|
+
* size: 'md',
|
|
965
|
+
* disabled: false,
|
|
966
|
+
* };
|
|
967
|
+
*/
|
|
968
|
+
/**
|
|
969
|
+
* Visual variant style of the button
|
|
970
|
+
* @type {'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation'}
|
|
971
|
+
*/
|
|
972
|
+
type LoroButtonVariant = 'primary' | 'outline' | 'ghost' | 'danger' | 'soft' | 'social' | 'action' | 'navigation';
|
|
973
|
+
/**
|
|
974
|
+
* Button visual type (semantic grouping)
|
|
975
|
+
* @type {'primary' | 'secondary' | 'tertiary'}
|
|
976
|
+
*/
|
|
977
|
+
type LoroButtonType = 'primary' | 'secondary' | 'tertiary';
|
|
978
|
+
/**
|
|
979
|
+
* Button color theme
|
|
980
|
+
* @type {'primary' | 'secondary' | 'tertiary' | 'danger'}
|
|
981
|
+
*/
|
|
982
|
+
type LoroButtonColor = 'primary' | 'secondary' | 'tertiary' | 'danger';
|
|
983
|
+
/**
|
|
984
|
+
* Button size preset
|
|
985
|
+
* @type {'sm' | 'md' | 'lg'}
|
|
986
|
+
*/
|
|
987
|
+
type LoroButtonSize = 'sm' | 'md' | 'lg';
|
|
988
|
+
/**
|
|
989
|
+
* Button width behavior
|
|
990
|
+
* @type {'fit-content' | 'full'}
|
|
991
|
+
*/
|
|
992
|
+
type LoroButtonWidth = 'fit-content' | 'full';
|
|
993
|
+
/**
|
|
994
|
+
* Icon display mode within the button
|
|
995
|
+
* @type {'none' | 'with-icon' | 'only-icon'}
|
|
996
|
+
*/
|
|
997
|
+
type LoroButtonIconMode = 'none' | 'with-icon' | 'only-icon';
|
|
998
|
+
/**
|
|
999
|
+
* Button HTML type
|
|
1000
|
+
* @type {'button' | 'submit' | 'reset'}
|
|
1001
|
+
*/
|
|
1002
|
+
type LoroButtonHtmlType = 'button' | 'submit' | 'reset';
|
|
1003
|
+
|
|
1004
|
+
/**
|
|
1005
|
+
* LoroButton Constants
|
|
1006
|
+
*
|
|
1007
|
+
* Default values, valid options, and configuration constants for the LoroButton component.
|
|
1008
|
+
* Update these to maintain consistency across all button usage.
|
|
1009
|
+
*/
|
|
1010
|
+
|
|
1011
|
+
/**
|
|
1012
|
+
* Default input values for LoroButton
|
|
1013
|
+
*/
|
|
1014
|
+
declare const LORO_BUTTON_DEFAULTS: {
|
|
1015
|
+
readonly text: "";
|
|
1016
|
+
readonly label: "";
|
|
1017
|
+
readonly variant: "primary";
|
|
1018
|
+
readonly type: "primary";
|
|
1019
|
+
readonly color: "primary";
|
|
1020
|
+
readonly size: "md";
|
|
1021
|
+
readonly fullWidth: false;
|
|
1022
|
+
readonly buttonWidth: "fit-content";
|
|
1023
|
+
readonly disabled: false;
|
|
1024
|
+
readonly loading: false;
|
|
1025
|
+
readonly selected: false;
|
|
1026
|
+
readonly htmlType: "button";
|
|
1027
|
+
readonly iconMode: "none";
|
|
1028
|
+
readonly socialMobileCompact: true;
|
|
1029
|
+
readonly iconSize: 23;
|
|
1030
|
+
readonly iconButtonSize: null;
|
|
1031
|
+
readonly iconColor: "";
|
|
1032
|
+
};
|
|
1033
|
+
/**
|
|
1034
|
+
* Valid options for button variants
|
|
1035
|
+
*/
|
|
1036
|
+
declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
|
|
1037
|
+
/**
|
|
1038
|
+
* Valid options for button types
|
|
1039
|
+
*/
|
|
1040
|
+
declare const LORO_BUTTON_TYPES: readonly LoroButtonType[];
|
|
1041
|
+
/**
|
|
1042
|
+
* Valid options for button colors
|
|
1043
|
+
*/
|
|
1044
|
+
declare const LORO_BUTTON_COLORS: readonly LoroButtonColor[];
|
|
1045
|
+
/**
|
|
1046
|
+
* Valid options for button sizes
|
|
1047
|
+
*/
|
|
1048
|
+
declare const LORO_BUTTON_SIZES: readonly LoroButtonSize[];
|
|
1049
|
+
/**
|
|
1050
|
+
* Valid options for icon modes
|
|
1051
|
+
*/
|
|
1052
|
+
declare const LORO_BUTTON_ICON_MODES: readonly LoroButtonIconMode[];
|
|
1053
|
+
/**
|
|
1054
|
+
* CSS class names used by LoroButton (BEM notation)
|
|
1055
|
+
*/
|
|
1056
|
+
declare const LORO_BUTTON_CLASSES: {
|
|
1057
|
+
readonly container: "loro-button";
|
|
1058
|
+
readonly variant: (variant: LoroButtonVariant) => string;
|
|
1059
|
+
readonly size: (size: LoroButtonSize) => string;
|
|
1060
|
+
readonly color: (color: LoroButtonColor) => string;
|
|
1061
|
+
readonly width: (width: LoroButtonWidth) => "loro-button--full" | undefined;
|
|
1062
|
+
readonly state: {
|
|
1063
|
+
readonly disabled: "loro-button--disabled";
|
|
1064
|
+
readonly loading: "loro-button--loading";
|
|
1065
|
+
readonly selected: "loro-button--selected";
|
|
1066
|
+
};
|
|
1067
|
+
readonly elements: {
|
|
1068
|
+
readonly label: "loro-button__label";
|
|
1069
|
+
readonly spinner: "loro-button__spinner";
|
|
1070
|
+
readonly srStatus: "loro-button__sr-status";
|
|
1071
|
+
};
|
|
1072
|
+
};
|
|
1073
|
+
|
|
1074
|
+
/**
|
|
1075
|
+
* LoroButton Component
|
|
1076
|
+
*
|
|
1077
|
+
* A versatile, accessible button component with multiple variants, sizes, and states.
|
|
1078
|
+
* Follows Angular 21 best practices with signals, OnPush change detection, and semantic HTML.
|
|
1079
|
+
*
|
|
1080
|
+
* @example
|
|
1081
|
+
* ```html
|
|
1082
|
+
* <loro-button
|
|
1083
|
+
* [text]="'Click me'"
|
|
1084
|
+
* variant="primary"
|
|
1085
|
+
* size="md"
|
|
1086
|
+
* (change)="onButtonClick()"
|
|
1087
|
+
* />
|
|
1088
|
+
* ```
|
|
1089
|
+
*/
|
|
1090
|
+
declare class LoroButton {
|
|
1091
|
+
label: _angular_core.InputSignal<string>;
|
|
1092
|
+
text: _angular_core.InputSignal<string>;
|
|
1093
|
+
icon: _angular_core.InputSignal<LoroIconName | LoroButtonIconMode | null>;
|
|
1094
|
+
iconContent: _angular_core.InputSignal<LoroIconName | null>;
|
|
1095
|
+
iconMode: _angular_core.InputSignal<LoroButtonIconMode>;
|
|
1096
|
+
iconSize: _angular_core.InputSignal<LoroIconSize>;
|
|
1097
|
+
iconButtonSize: _angular_core.InputSignal<LoroIconSize | null>;
|
|
1098
|
+
iconColor: _angular_core.InputSignal<string>;
|
|
1099
|
+
socialMobileCompact: _angular_core.InputSignal<boolean>;
|
|
1100
|
+
selected: _angular_core.InputSignal<boolean>;
|
|
1101
|
+
variant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
1102
|
+
typeButton: _angular_core.InputSignal<LoroButtonType>;
|
|
1103
|
+
color: _angular_core.InputSignal<LoroButtonColor>;
|
|
1104
|
+
size: _angular_core.InputSignal<LoroButtonSize>;
|
|
1105
|
+
fullWidth: _angular_core.InputSignal<boolean>;
|
|
1106
|
+
buttonWidth: _angular_core.InputSignal<LoroButtonWidth>;
|
|
1107
|
+
disabled: _angular_core.InputSignal<boolean>;
|
|
1108
|
+
loading: _angular_core.InputSignal<boolean>;
|
|
1109
|
+
type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
1110
|
+
formId: _angular_core.InputSignal<string>;
|
|
1111
|
+
ariaLabel: _angular_core.InputSignal<string>;
|
|
1112
|
+
ariaDescription: _angular_core.InputSignal<string>;
|
|
1113
|
+
buttonClick: _angular_core.OutputEmitterRef<void>;
|
|
1114
|
+
change: _angular_core.OutputEmitterRef<void>;
|
|
1115
|
+
sanChange: _angular_core.OutputEmitterRef<void>;
|
|
1116
|
+
protected readonly resolvedText: _angular_core.Signal<string>;
|
|
1117
|
+
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName | null>;
|
|
1118
|
+
protected readonly resolvedIconMode: _angular_core.Signal<LoroButtonIconMode>;
|
|
1119
|
+
protected readonly resolvedButtonWidth: _angular_core.Signal<LoroButtonWidth>;
|
|
1120
|
+
protected readonly resolvedIconButtonSize: _angular_core.Signal<string>;
|
|
1121
|
+
protected readonly resolvedTypeButton: _angular_core.Signal<LoroButtonType>;
|
|
1122
|
+
protected readonly resolvedColor: _angular_core.Signal<LoroButtonColor>;
|
|
1123
|
+
protected readonly showIcon: _angular_core.Signal<boolean>;
|
|
1124
|
+
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
1125
|
+
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
1126
|
+
protected readonly resolvedIconRenderMode: _angular_core.Signal<LoroIconRenderMode>;
|
|
1127
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1128
|
+
protected readonly showSpinner: _angular_core.Signal<boolean>;
|
|
1129
|
+
protected readonly loadingAriaLabel: _angular_core.Signal<string>;
|
|
1130
|
+
protected emitChange(): void;
|
|
1131
|
+
protected defaultIconColor(): LoroIconColor;
|
|
1132
|
+
private isIconMode;
|
|
1133
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
|
|
1134
|
+
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>;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1118
1137
|
declare class LoroImage {
|
|
1119
1138
|
name: _angular_core.InputSignal<LoroImageName>;
|
|
1120
1139
|
alt: _angular_core.InputSignal<string>;
|
|
@@ -1135,9 +1154,9 @@ declare class LoroAssistantCard {
|
|
|
1135
1154
|
title: _angular_core.InputSignal<string>;
|
|
1136
1155
|
description: _angular_core.InputSignal<string>;
|
|
1137
1156
|
imageName: _angular_core.InputSignal<LoroImageName | null>;
|
|
1138
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1157
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1139
1158
|
actionLabel: _angular_core.InputSignal<string>;
|
|
1140
|
-
actionIcon: _angular_core.InputSignal<LoroIconName
|
|
1159
|
+
actionIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1141
1160
|
actionVariant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
1142
1161
|
action: _angular_core.OutputEmitterRef<void>;
|
|
1143
1162
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAssistantCard, never>;
|
|
@@ -1145,7 +1164,7 @@ declare class LoroAssistantCard {
|
|
|
1145
1164
|
}
|
|
1146
1165
|
|
|
1147
1166
|
declare class LoroAuthSocialButton {
|
|
1148
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1167
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1149
1168
|
label: _angular_core.InputSignal<string>;
|
|
1150
1169
|
outline: _angular_core.InputSignal<boolean>;
|
|
1151
1170
|
selected: _angular_core.InputSignal<boolean>;
|
|
@@ -1169,7 +1188,7 @@ type LoroCardJustify = 'start' | 'center' | 'end';
|
|
|
1169
1188
|
declare class LoroCard {
|
|
1170
1189
|
title: _angular_core.InputSignal<string>;
|
|
1171
1190
|
description: _angular_core.InputSignal<string>;
|
|
1172
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1191
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1173
1192
|
iconSize: _angular_core.InputSignal<number>;
|
|
1174
1193
|
iconColor: _angular_core.InputSignal<string>;
|
|
1175
1194
|
link: _angular_core.InputSignal<string>;
|
|
@@ -1183,7 +1202,7 @@ declare class LoroCard {
|
|
|
1183
1202
|
heroSubtitle: _angular_core.InputSignal<string>;
|
|
1184
1203
|
heroAvatarSrc: _angular_core.InputSignal<string | null>;
|
|
1185
1204
|
heroAvatarAlt: _angular_core.InputSignal<string>;
|
|
1186
|
-
heroAvatarIcon: _angular_core.InputSignal<LoroIconName
|
|
1205
|
+
heroAvatarIcon: _angular_core.InputSignal<LoroIconName>;
|
|
1187
1206
|
heroAvatarIconSize: _angular_core.InputSignal<number>;
|
|
1188
1207
|
heroVisualImage: _angular_core.InputSignal<LoroImageName | null>;
|
|
1189
1208
|
heroVisualAlt: _angular_core.InputSignal<string>;
|
|
@@ -1198,7 +1217,7 @@ declare class LoroCardNav {
|
|
|
1198
1217
|
private readonly router;
|
|
1199
1218
|
title: _angular_core.InputSignal<string>;
|
|
1200
1219
|
description: _angular_core.InputSignal<string>;
|
|
1201
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1220
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1202
1221
|
iconSize: _angular_core.InputSignal<number>;
|
|
1203
1222
|
iconColor: _angular_core.InputSignal<string>;
|
|
1204
1223
|
route: _angular_core.InputSignal<string>;
|
|
@@ -1222,7 +1241,7 @@ declare class LoroDashboardCard {
|
|
|
1222
1241
|
title: _angular_core.InputSignal<string>;
|
|
1223
1242
|
description: _angular_core.InputSignal<string>;
|
|
1224
1243
|
link: _angular_core.InputSignal<string>;
|
|
1225
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1244
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1226
1245
|
illustration: _angular_core.InputSignal<LoroImageName | null>;
|
|
1227
1246
|
variant: _angular_core.InputSignal<"home" | "default">;
|
|
1228
1247
|
showArrow: _angular_core.InputSignal<boolean>;
|
|
@@ -1298,7 +1317,7 @@ declare class LoroProductRow {
|
|
|
1298
1317
|
|
|
1299
1318
|
declare class LoroProductSection {
|
|
1300
1319
|
title: _angular_core.InputSignal<string>;
|
|
1301
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1320
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1302
1321
|
collapsible: _angular_core.InputSignal<boolean>;
|
|
1303
1322
|
protected readonly expanded: _angular_core.WritableSignal<boolean>;
|
|
1304
1323
|
protected toggle(): void;
|
|
@@ -1355,7 +1374,7 @@ declare class LoroStatCard {
|
|
|
1355
1374
|
value: _angular_core.InputSignal<string>;
|
|
1356
1375
|
description: _angular_core.InputSignal<string>;
|
|
1357
1376
|
eyebrow: _angular_core.InputSignal<string>;
|
|
1358
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1377
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1359
1378
|
iconSize: _angular_core.InputSignal<number>;
|
|
1360
1379
|
image: _angular_core.InputSignal<LoroImageName | null>;
|
|
1361
1380
|
topImage: _angular_core.InputSignal<LoroImageName | null>;
|
|
@@ -1398,7 +1417,7 @@ type LoroTabAlign = 'flex' | 'block';
|
|
|
1398
1417
|
interface LoroTabOption {
|
|
1399
1418
|
readonly value: string;
|
|
1400
1419
|
readonly label: string;
|
|
1401
|
-
readonly icon?: LoroIconName
|
|
1420
|
+
readonly icon?: LoroIconName | null;
|
|
1402
1421
|
readonly ariaLabel?: string;
|
|
1403
1422
|
}
|
|
1404
1423
|
declare class LoroTab {
|
|
@@ -1435,7 +1454,7 @@ declare class LoroAlert {
|
|
|
1435
1454
|
readonly action: _angular_core.OutputEmitterRef<void>;
|
|
1436
1455
|
/** Emitted by the close button. The parent decides whether to remove the alert. */
|
|
1437
1456
|
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
1438
|
-
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName
|
|
1457
|
+
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName>;
|
|
1439
1458
|
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
1440
1459
|
protected readonly role: _angular_core.Signal<"status" | "alert" | null>;
|
|
1441
1460
|
protected readonly ariaLive: _angular_core.Signal<"polite" | "assertive" | null>;
|
|
@@ -1466,7 +1485,7 @@ interface LoroNotificationItem {
|
|
|
1466
1485
|
title: string;
|
|
1467
1486
|
message: string;
|
|
1468
1487
|
time?: string;
|
|
1469
|
-
icon?: LoroIconName
|
|
1488
|
+
icon?: LoroIconName;
|
|
1470
1489
|
unread?: boolean;
|
|
1471
1490
|
}
|
|
1472
1491
|
declare class LoroNotificationPanel {
|
|
@@ -1477,7 +1496,7 @@ declare class LoroNotificationPanel {
|
|
|
1477
1496
|
markAllLabel: _angular_core.InputSignal<string>;
|
|
1478
1497
|
showClearAll: _angular_core.InputSignal<boolean>;
|
|
1479
1498
|
clearAllLabel: _angular_core.InputSignal<string>;
|
|
1480
|
-
emptyIcon: _angular_core.InputSignal<LoroIconName
|
|
1499
|
+
emptyIcon: _angular_core.InputSignal<LoroIconName>;
|
|
1481
1500
|
emptyTitle: _angular_core.InputSignal<string>;
|
|
1482
1501
|
emptyMessage: _angular_core.InputSignal<string>;
|
|
1483
1502
|
itemClick: _angular_core.OutputEmitterRef<LoroNotificationItem>;
|
|
@@ -1495,7 +1514,7 @@ declare class LoroNotificationRow {
|
|
|
1495
1514
|
title: _angular_core.InputSignal<string>;
|
|
1496
1515
|
message: _angular_core.InputSignal<string>;
|
|
1497
1516
|
time: _angular_core.InputSignal<string>;
|
|
1498
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1517
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1499
1518
|
unread: _angular_core.InputSignal<boolean>;
|
|
1500
1519
|
rowClick: _angular_core.OutputEmitterRef<void>;
|
|
1501
1520
|
rowRemove: _angular_core.OutputEmitterRef<void>;
|
|
@@ -1550,7 +1569,7 @@ declare class LoroToast {
|
|
|
1550
1569
|
|
|
1551
1570
|
type LoroAuthFieldState = 'default' | 'error';
|
|
1552
1571
|
declare class LoroAuthField implements FormValueControl<string> {
|
|
1553
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1572
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1554
1573
|
label: _angular_core.InputSignal<string>;
|
|
1555
1574
|
placeholder: _angular_core.InputSignal<string>;
|
|
1556
1575
|
value: _angular_core.ModelSignal<string>;
|
|
@@ -1621,7 +1640,7 @@ declare class LoroDropdown implements FormValueControl<string> {
|
|
|
1621
1640
|
declare class LoroFilterChip {
|
|
1622
1641
|
label: _angular_core.InputSignal<string>;
|
|
1623
1642
|
value: _angular_core.InputSignal<string>;
|
|
1624
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1643
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1625
1644
|
active: _angular_core.InputSignal<boolean>;
|
|
1626
1645
|
selected: _angular_core.OutputEmitterRef<string>;
|
|
1627
1646
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroFilterChip, never>;
|
|
@@ -1640,9 +1659,9 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1640
1659
|
name: _angular_core.InputSignal<string>;
|
|
1641
1660
|
autocomplete: _angular_core.InputSignal<string>;
|
|
1642
1661
|
inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "none" | "tel" | "url" | "numeric" | "decimal">;
|
|
1643
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1662
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1644
1663
|
iconSize: _angular_core.InputSignal<number>;
|
|
1645
|
-
trailingIcon: _angular_core.InputSignal<LoroIconName
|
|
1664
|
+
trailingIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1646
1665
|
trailingIconSize: _angular_core.InputSignal<number>;
|
|
1647
1666
|
trailingAriaLabel: _angular_core.InputSignal<string>;
|
|
1648
1667
|
variant: _angular_core.InputSignal<LoroInputVariant>;
|
|
@@ -1719,7 +1738,7 @@ declare class LoroSelect {
|
|
|
1719
1738
|
title: _angular_core.InputSignal<string>;
|
|
1720
1739
|
subtitle: _angular_core.InputSignal<string>;
|
|
1721
1740
|
meta: _angular_core.InputSignal<string>;
|
|
1722
|
-
icon: _angular_core.InputSignal<LoroIconName
|
|
1741
|
+
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1723
1742
|
badge: _angular_core.InputSignal<string>;
|
|
1724
1743
|
status: _angular_core.InputSignal<string>;
|
|
1725
1744
|
selected: _angular_core.InputSignal<boolean>;
|
|
@@ -1815,26 +1834,6 @@ declare class LoroModal {
|
|
|
1815
1834
|
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>;
|
|
1816
1835
|
}
|
|
1817
1836
|
|
|
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
|
-
|
|
1838
1837
|
declare class LoroHapticsService {
|
|
1839
1838
|
private readonly document;
|
|
1840
1839
|
private readonly vibration;
|