@juligc99/loro-ui 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -118
- package/assets/loro-ui/icons/x.svg +3 -0
- package/assets/loro-ui/loro-assets.generated.ts +10 -2
- package/design-tokens/loro-theme.scss +45 -27
- package/fesm2022/juligc99-loro-ui.mjs +931 -1328
- package/fesm2022/juligc99-loro-ui.mjs.map +1 -1
- package/package.json +2 -2
- package/styles/animations/.gitkeep +0 -0
- package/styles/functions/.gitkeep +0 -0
- package/styles/{_breakpoints.scss → functions/_breakpoints.scss} +13 -0
- package/styles/mixins/.gitkeep +0 -0
- package/styles/mixins/_text.scss +22 -0
- package/styles/tokens/.gitkeep +0 -0
- package/styles/utilities/.gitkeep +0 -0
- package/types/juligc99-loro-ui.d.ts +284 -611
|
@@ -1,10 +1,20 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import
|
|
3
|
-
import { FormValueControl, WithOptionalFieldTree, ValidationError, FormCheckboxControl } from '@angular/forms/signals';
|
|
2
|
+
import { FormCheckboxControl, WithOptionalFieldTree, ValidationError, FormValueControl } from '@angular/forms/signals';
|
|
4
3
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
4
|
+
interface LoroFooterLink {
|
|
5
|
+
/** Visible label rendered in the footer link. */
|
|
6
|
+
label: string;
|
|
7
|
+
/** Destination URL for the footer link. */
|
|
8
|
+
href: string;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
declare class LoroFooter {
|
|
12
|
+
/** Main footer copy shown before the link list. */
|
|
13
|
+
title: _angular_core.InputSignal<string>;
|
|
14
|
+
/** Inline footer navigation links. */
|
|
15
|
+
links: _angular_core.InputSignal<LoroFooterLink[]>;
|
|
16
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroFooter, never>;
|
|
17
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroFooter, "loro-footer", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
8
18
|
}
|
|
9
19
|
|
|
10
20
|
type LoroAssetLayer = 'Action' | 'Brand' | 'Direction' | 'Home' | 'Illustrations' | 'Navigation' | 'Product' | 'Products' | 'Screens' | 'Social' | 'Status' | 'Stores';
|
|
@@ -350,6 +360,11 @@ declare const LORO_ICON_ASSETS: readonly [{
|
|
|
350
360
|
readonly path: "assets/loro-ui/icons/warning.svg";
|
|
351
361
|
readonly layer: "Status";
|
|
352
362
|
readonly fileName: "warning.svg";
|
|
363
|
+
}, {
|
|
364
|
+
readonly name: "icon-x";
|
|
365
|
+
readonly path: "assets/loro-ui/icons/x.svg";
|
|
366
|
+
readonly layer: "Product";
|
|
367
|
+
readonly fileName: "x.svg";
|
|
353
368
|
}];
|
|
354
369
|
declare const LORO_ICON_PATHS: {
|
|
355
370
|
readonly "icon-apple": "assets/loro-ui/icons/apple.svg";
|
|
@@ -418,6 +433,7 @@ declare const LORO_ICON_PATHS: {
|
|
|
418
433
|
readonly "icon-trend": "assets/loro-ui/icons/trend.svg";
|
|
419
434
|
readonly "icon-user": "assets/loro-ui/icons/user.svg";
|
|
420
435
|
readonly "icon-warning": "assets/loro-ui/icons/warning.svg";
|
|
436
|
+
readonly "icon-x": "assets/loro-ui/icons/x.svg";
|
|
421
437
|
};
|
|
422
438
|
declare const LORO_ICON_LEGACY_NAMES: {
|
|
423
439
|
readonly apple: "icon-apple";
|
|
@@ -486,6 +502,7 @@ declare const LORO_ICON_LEGACY_NAMES: {
|
|
|
486
502
|
readonly trend: "icon-trend";
|
|
487
503
|
readonly user: "icon-user";
|
|
488
504
|
readonly warning: "icon-warning";
|
|
505
|
+
readonly x: "icon-x";
|
|
489
506
|
};
|
|
490
507
|
type LoroIconAssetName = keyof typeof LORO_ICON_PATHS;
|
|
491
508
|
type LoroIconLegacyName = keyof typeof LORO_ICON_LEGACY_NAMES;
|
|
@@ -882,8 +899,8 @@ declare class LoroIcon {
|
|
|
882
899
|
decorative: _angular_core.InputSignal<boolean>;
|
|
883
900
|
color: _angular_core.InputSignal<string>;
|
|
884
901
|
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">;
|
|
902
|
+
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" | "icon-x">;
|
|
903
|
+
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" | "assets/loro-ui/icons/x.svg">;
|
|
887
904
|
protected readonly altText: _angular_core.Signal<string>;
|
|
888
905
|
protected readonly resolvedSize: _angular_core.Signal<string>;
|
|
889
906
|
protected readonly resolvedColor: _angular_core.Signal<string>;
|
|
@@ -891,16 +908,21 @@ declare class LoroIcon {
|
|
|
891
908
|
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
909
|
}
|
|
893
910
|
|
|
911
|
+
type LoroAccordionIconName = LoroIconName | null;
|
|
912
|
+
|
|
894
913
|
declare class LoroAccordion {
|
|
895
|
-
title: _angular_core.InputSignal<string>;
|
|
896
|
-
icon: _angular_core.InputSignal<
|
|
897
|
-
expanded: _angular_core.InputSignal<boolean>;
|
|
898
|
-
expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
914
|
+
readonly title: _angular_core.InputSignal<string>;
|
|
915
|
+
readonly icon: _angular_core.InputSignal<LoroAccordionIconName>;
|
|
916
|
+
readonly expanded: _angular_core.InputSignal<boolean>;
|
|
917
|
+
readonly expandedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
918
|
+
protected readonly isExpanded: _angular_core.WritableSignal<boolean>;
|
|
919
|
+
constructor();
|
|
920
|
+
protected toggleExpanded(): void;
|
|
899
921
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAccordion, never>;
|
|
900
922
|
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
923
|
}
|
|
902
924
|
|
|
903
|
-
interface
|
|
925
|
+
interface LoroNavItem {
|
|
904
926
|
id: string;
|
|
905
927
|
label: string;
|
|
906
928
|
icon: LoroIconName;
|
|
@@ -908,26 +930,42 @@ interface LoroAppNavItem {
|
|
|
908
930
|
badge?: string | number | null;
|
|
909
931
|
disabled?: boolean;
|
|
910
932
|
}
|
|
911
|
-
interface
|
|
912
|
-
item:
|
|
933
|
+
interface LoroNavClick {
|
|
934
|
+
item: LoroNavItem;
|
|
913
935
|
section: 'main' | 'utility';
|
|
914
936
|
}
|
|
915
|
-
|
|
937
|
+
|
|
938
|
+
declare class LoroNav {
|
|
939
|
+
/** Shared haptics feedback for taps and drag selection. */
|
|
916
940
|
private readonly haptics;
|
|
917
|
-
|
|
918
|
-
private readonly mobilePointerActive;
|
|
941
|
+
/** Keeps track of the active pointer only while the mobile slider is captured. */
|
|
919
942
|
private activePointerId;
|
|
943
|
+
/** Continuous slider position used while dragging on mobile. */
|
|
944
|
+
private readonly previewMobilePosition;
|
|
945
|
+
/** Locally selected mobile index so the active state updates immediately. */
|
|
946
|
+
private readonly activeMobileIndex;
|
|
947
|
+
/** Tracks whether the pointer is currently captured by the mobile nav. */
|
|
948
|
+
private readonly mobilePointerActive;
|
|
949
|
+
/** Prevents the release click from firing twice after a swipe selection. */
|
|
920
950
|
private suppressNextMobileClick;
|
|
921
|
-
items
|
|
922
|
-
|
|
951
|
+
/** Main navigation items. */
|
|
952
|
+
items: _angular_core.InputSignal<LoroNavItem[]>;
|
|
953
|
+
/** Optional utility actions shown on desktop. */
|
|
954
|
+
utilityItems: _angular_core.InputSignal<LoroNavItem[]>;
|
|
955
|
+
/** Accessible label for the navigation landmark. */
|
|
923
956
|
ariaLabel: _angular_core.InputSignal<string>;
|
|
957
|
+
/** Enables or hides the desktop utility block. */
|
|
924
958
|
showUtilityItems: _angular_core.InputSignal<boolean>;
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
959
|
+
/** Shows or hides the item labels in desktop and mobile navigation. */
|
|
960
|
+
showLabels: _angular_core.InputSignal<boolean>;
|
|
961
|
+
/** Emits the selected main item. */
|
|
962
|
+
itemClick: _angular_core.OutputEmitterRef<LoroNavItem>;
|
|
963
|
+
/** Emits the selected utility item. */
|
|
964
|
+
utilityItemClick: _angular_core.OutputEmitterRef<LoroNavItem>;
|
|
965
|
+
/** Emits the selected item and section metadata. */
|
|
966
|
+
navItemClick: _angular_core.OutputEmitterRef<LoroNavClick>;
|
|
967
|
+
protected readonly desktopItems: _angular_core.Signal<LoroNavItem[]>;
|
|
968
|
+
protected readonly mobileItems: _angular_core.Signal<LoroNavItem[]>;
|
|
931
969
|
protected readonly mobileVisualSlotCount: _angular_core.Signal<number>;
|
|
932
970
|
private readonly selectedMobileIndex;
|
|
933
971
|
protected readonly mobileSliderPosition: _angular_core.Signal<number>;
|
|
@@ -935,559 +973,130 @@ declare class LoroAppNav {
|
|
|
935
973
|
protected readonly mobileItemCount: _angular_core.Signal<number>;
|
|
936
974
|
protected readonly selectedMobileItemId: _angular_core.Signal<string>;
|
|
937
975
|
protected isMobileItemVisualActive(index: number): boolean;
|
|
938
|
-
onMainItemClick(item:
|
|
939
|
-
protected onMobileItemClick(item:
|
|
976
|
+
onMainItemClick(item: LoroNavItem): void;
|
|
977
|
+
protected onMobileItemClick(item: LoroNavItem): void;
|
|
940
978
|
protected onMobilePointerDown(event: PointerEvent): void;
|
|
941
979
|
protected onMobilePointerMove(event: PointerEvent): void;
|
|
942
980
|
protected onMobilePointerUp(event: PointerEvent): void;
|
|
943
981
|
protected onMobilePointerCancel(event: PointerEvent): void;
|
|
944
|
-
onUtilityItemClick(item:
|
|
982
|
+
onUtilityItemClick(item: LoroNavItem): void;
|
|
945
983
|
private emitMainItem;
|
|
984
|
+
private selectMobileItem;
|
|
985
|
+
/** Maps a pointer X coordinate to a zero-based visual slot index. */
|
|
946
986
|
private getMobileVisualSlotPosition;
|
|
947
987
|
protected mobileItemGridColumn(index: number): number;
|
|
948
|
-
private mobileItemIndexToVisualSlot;
|
|
949
988
|
private getNearestEnabledMobileIndex;
|
|
989
|
+
/** Releases pointer capture and clears transient mobile drag state. */
|
|
950
990
|
private releaseMobilePointer;
|
|
951
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<
|
|
952
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<
|
|
991
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroNav, never>;
|
|
992
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroNav, "loro-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; }; "showLabels": { "alias": "showLabels"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "utilityItemClick": "utilityItemClick"; "navItemClick": "navItemClick"; }, never, never, true, never>;
|
|
953
993
|
}
|
|
954
994
|
|
|
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';
|
|
995
|
+
type LoroBadgeVariant = 'success' | 'error' | 'info' | 'warning' | 'neutral';
|
|
1003
996
|
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
997
|
+
declare class LoroBadge {
|
|
998
|
+
label: _angular_core.InputSignal<string>;
|
|
999
|
+
variant: _angular_core.InputSignal<LoroBadgeVariant>;
|
|
1000
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroBadge, never>;
|
|
1001
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroBadge, "loro-badge", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1002
|
+
}
|
|
1003
|
+
|
|
1004
|
+
type LoroButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'soft' | 'social' | 'loading' | 'disabled';
|
|
1005
|
+
type LoroButtonWidth = 'fit-content' | 'full';
|
|
1006
|
+
type LoroButtonIconSize = 16 | 18 | 20 | 22 | 24 | 28 | 32 | 36 | 40;
|
|
1010
1007
|
|
|
1011
|
-
/**
|
|
1012
|
-
* Default input values for LoroButton
|
|
1013
|
-
*/
|
|
1014
1008
|
declare const LORO_BUTTON_DEFAULTS: {
|
|
1015
1009
|
readonly text: "";
|
|
1016
|
-
readonly
|
|
1017
|
-
readonly
|
|
1018
|
-
readonly
|
|
1019
|
-
readonly
|
|
1020
|
-
readonly
|
|
1021
|
-
readonly
|
|
1022
|
-
readonly
|
|
1023
|
-
readonly
|
|
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: "";
|
|
1010
|
+
readonly icon: null;
|
|
1011
|
+
readonly iconColor: null;
|
|
1012
|
+
readonly iconOnly: false;
|
|
1013
|
+
readonly iconSize: LoroButtonIconSize;
|
|
1014
|
+
readonly variant: LoroButtonVariant;
|
|
1015
|
+
readonly width: LoroButtonWidth;
|
|
1016
|
+
readonly ariaLabel: "";
|
|
1017
|
+
readonly ariaDescription: "";
|
|
1032
1018
|
};
|
|
1033
|
-
/**
|
|
1034
|
-
* Valid options for button variants
|
|
1035
|
-
*/
|
|
1036
1019
|
declare const LORO_BUTTON_VARIANTS: readonly LoroButtonVariant[];
|
|
1037
|
-
|
|
1038
|
-
|
|
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
|
-
};
|
|
1020
|
+
declare const LORO_BUTTON_WIDTHS: readonly LoroButtonWidth[];
|
|
1021
|
+
declare const LORO_BUTTON_ICON_SIZES: readonly LoroButtonIconSize[];
|
|
1073
1022
|
|
|
1074
1023
|
/**
|
|
1075
|
-
*
|
|
1024
|
+
* Reusable action button with a compact public API.
|
|
1076
1025
|
*
|
|
1077
|
-
*
|
|
1078
|
-
*
|
|
1079
|
-
*
|
|
1080
|
-
* @example
|
|
1081
|
-
* ```html
|
|
1082
|
-
* <loro-button
|
|
1083
|
-
* [text]="'Click me'"
|
|
1084
|
-
* variant="primary"
|
|
1085
|
-
* size="md"
|
|
1086
|
-
* (change)="onButtonClick()"
|
|
1087
|
-
* />
|
|
1088
|
-
* ```
|
|
1026
|
+
* Mobile-first by default. Desktop refinements live in the component stylesheet
|
|
1027
|
+
* through the shared breakpoint helpers.
|
|
1089
1028
|
*/
|
|
1090
1029
|
declare class LoroButton {
|
|
1091
|
-
label
|
|
1030
|
+
/** Visible text label rendered inside the button. */
|
|
1092
1031
|
text: _angular_core.InputSignal<string>;
|
|
1093
|
-
icon
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1032
|
+
/** Optional icon from the Loro icon registry. */
|
|
1033
|
+
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1034
|
+
/** Optional icon color override, supported for tertiary variant. */
|
|
1035
|
+
iconColor: _angular_core.InputSignal<string | null>;
|
|
1036
|
+
/** Renders a square icon-only action when true. */
|
|
1037
|
+
iconOnly: _angular_core.InputSignal<boolean>;
|
|
1038
|
+
/** Typed icon size token shared with Storybook controls. */
|
|
1039
|
+
iconSize: _angular_core.InputSignal<LoroButtonIconSize>;
|
|
1040
|
+
/** Visual treatment and semantic state of the button. */
|
|
1101
1041
|
variant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
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>;
|
|
1042
|
+
/** Width behavior for inline or full-row actions. */
|
|
1043
|
+
width: _angular_core.InputSignal<LoroButtonWidth>;
|
|
1044
|
+
/** Accessible name override. Required for icon-only usage when no text exists. */
|
|
1111
1045
|
ariaLabel: _angular_core.InputSignal<string>;
|
|
1046
|
+
/** Optional extra accessible description. */
|
|
1112
1047
|
ariaDescription: _angular_core.InputSignal<string>;
|
|
1048
|
+
/** Single activation output for click and keyboard button semantics. */
|
|
1113
1049
|
buttonClick: _angular_core.OutputEmitterRef<void>;
|
|
1114
|
-
|
|
1115
|
-
sanChange: _angular_core.OutputEmitterRef<void>;
|
|
1050
|
+
/** Normalized visible text used by the template and accessibility fallbacks. */
|
|
1116
1051
|
protected readonly resolvedText: _angular_core.Signal<string>;
|
|
1117
|
-
|
|
1118
|
-
protected readonly
|
|
1119
|
-
|
|
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>;
|
|
1052
|
+
/** Loading is modeled as a visual variant to keep the public API small. */
|
|
1053
|
+
protected readonly isLoading: _angular_core.Signal<boolean>;
|
|
1054
|
+
/** Disabled states are also modeled through variants. */
|
|
1127
1055
|
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1128
|
-
|
|
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
|
-
|
|
1137
|
-
declare class LoroImage {
|
|
1138
|
-
name: _angular_core.InputSignal<LoroImageName>;
|
|
1139
|
-
alt: _angular_core.InputSignal<string>;
|
|
1140
|
-
size: _angular_core.InputSignal<string>;
|
|
1141
|
-
width: _angular_core.InputSignal<string>;
|
|
1142
|
-
height: _angular_core.InputSignal<string>;
|
|
1143
|
-
fit: _angular_core.InputSignal<"contain" | "cover">;
|
|
1144
|
-
protected readonly assetName: _angular_core.Signal<"image-al-loro-design-library-home-ai" | "image-favicon-apple-touch-icon" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-any" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-dark" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-2" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-2" | "image-favicon-favicon" | "image-home-icon-ai" | "image-home-icon-basket" | "image-home-icon-compare" | "image-home-icon-expiry" | "image-home-icon-pantry" | "image-home-icon-scan" | "image-image-home" | "image-logo-despensa-buy" | "image-logo-list-buy" | "image-loro-apaisado" | "image-loro-apaisado-blanco" | "image-loro-card-buy" | "image-loro-card-caducidad" | "image-loro-card-comparativa" | "image-loro-card-ia" | "image-loro-card-qr" | "image-loro-despensa" | "image-loro-icon-default" | "image-loro-spinner-ring" | "image-loro-tittle-sub" | "image-pantry-cabinet" | "image-pantry-metric-chart" | "image-product-bananas" | "image-product-milk" | "image-product-pasta" | "image-product-rice" | "image-product-tomatoes" | "image-product-yogurt" | "image-store-ahorramas" | "image-store-alcampo" | "image-store-aldi" | "image-store-bonpreu" | "image-store-caprabo" | "image-store-carrefour" | "image-store-consum" | "image-store-coviran" | "image-store-dia" | "image-store-el-corte-ingles" | "image-store-eroski" | "image-store-froiz" | "image-store-gadis" | "image-store-lidl" | "image-store-mercadona">;
|
|
1145
|
-
protected readonly src: _angular_core.Signal<"assets/loro-ui/images/al-loro-design-library-home-ai.png" | "assets/loro-ui/favicons/apple-touch-icon.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Any.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Dark.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-2.png" | "assets/loro-ui/favicons/favicon.svg" | "assets/loro-ui/images/home-icon-ai.svg" | "assets/loro-ui/images/home-icon-basket.svg" | "assets/loro-ui/images/home-icon-compare.svg" | "assets/loro-ui/images/home-icon-expiry.svg" | "assets/loro-ui/images/home-icon-pantry.svg" | "assets/loro-ui/images/home-icon-scan.svg" | "assets/loro-ui/images/image-home.png" | "assets/loro-ui/images/logo-despensa-buy.png" | "assets/loro-ui/images/logo-list-buy.png" | "assets/loro-ui/images/loro-apaisado.png" | "assets/loro-ui/images/loro-apaisado-blanco.png" | "assets/loro-ui/images/loro-card-buy.png" | "assets/loro-ui/images/loro-card-caducidad.png" | "assets/loro-ui/images/loro-card-comparativa.png" | "assets/loro-ui/images/loro-card-ia.png" | "assets/loro-ui/images/loro-card-qr.png" | "assets/loro-ui/images/loro-despensa.png" | "assets/loro-ui/images/loro-icon-default.png" | "assets/loro-ui/images/loro-spinner-ring.svg" | "assets/loro-ui/images/loro-tittle-sub.png" | "assets/loro-ui/images/pantry-cabinet.svg" | "assets/loro-ui/images/pantry-metric-chart.svg" | "assets/loro-ui/images/product-bananas.svg" | "assets/loro-ui/images/product-milk.svg" | "assets/loro-ui/images/product-pasta.svg" | "assets/loro-ui/images/product-rice.svg" | "assets/loro-ui/images/product-tomatoes.svg" | "assets/loro-ui/images/product-yogurt.svg" | "assets/loro-ui/images/store-ahorramas.svg" | "assets/loro-ui/images/store-alcampo.png" | "assets/loro-ui/images/store-aldi.svg" | "assets/loro-ui/images/store-bonpreu.svg" | "assets/loro-ui/images/store-caprabo.svg" | "assets/loro-ui/images/store-carrefour.svg" | "assets/loro-ui/images/store-consum.png" | "assets/loro-ui/images/store-coviran.png" | "assets/loro-ui/images/store-dia.svg" | "assets/loro-ui/images/store-el-corte-ingles.svg" | "assets/loro-ui/images/store-eroski.png" | "assets/loro-ui/images/store-froiz.svg" | "assets/loro-ui/images/store-gadis.png" | "assets/loro-ui/images/store-lidl.svg" | "assets/loro-ui/images/store-mercadona.svg">;
|
|
1146
|
-
protected readonly altText: _angular_core.Signal<string>;
|
|
1147
|
-
protected readonly resolvedWidth: _angular_core.Signal<string>;
|
|
1148
|
-
protected readonly resolvedHeight: _angular_core.Signal<string>;
|
|
1149
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroImage, never>;
|
|
1150
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroImage, "loro-image", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1151
|
-
}
|
|
1152
|
-
|
|
1153
|
-
declare class LoroAssistantCard {
|
|
1154
|
-
title: _angular_core.InputSignal<string>;
|
|
1155
|
-
description: _angular_core.InputSignal<string>;
|
|
1156
|
-
imageName: _angular_core.InputSignal<LoroImageName | null>;
|
|
1157
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1158
|
-
actionLabel: _angular_core.InputSignal<string>;
|
|
1159
|
-
actionIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1160
|
-
actionVariant: _angular_core.InputSignal<LoroButtonVariant>;
|
|
1161
|
-
action: _angular_core.OutputEmitterRef<void>;
|
|
1162
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAssistantCard, never>;
|
|
1163
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAssistantCard, "loro-assistant-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": true; "isSignal": true; }; "imageName": { "alias": "imageName"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionIcon": { "alias": "actionIcon"; "required": false; "isSignal": true; }; "actionVariant": { "alias": "actionVariant"; "required": false; "isSignal": true; }; }, { "action": "action"; }, never, never, true, never>;
|
|
1164
|
-
}
|
|
1165
|
-
|
|
1166
|
-
declare class LoroAuthSocialButton {
|
|
1167
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1168
|
-
label: _angular_core.InputSignal<string>;
|
|
1169
|
-
outline: _angular_core.InputSignal<boolean>;
|
|
1170
|
-
selected: _angular_core.InputSignal<boolean>;
|
|
1171
|
-
iconSize: _angular_core.InputSignal<number>;
|
|
1172
|
-
protected readonly nativeIconSrc: _angular_core.Signal<"assets/loro-ui/icons/apple.svg" | "assets/loro-ui/icons/google.svg" | "">;
|
|
1173
|
-
protected releaseFocus(event: Event): void;
|
|
1174
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthSocialButton, never>;
|
|
1175
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthSocialButton, "loro-auth-social-button", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1176
|
-
}
|
|
1177
|
-
|
|
1178
|
-
type LoroBadgeVariant = 'success' | 'error' | 'info' | 'warning' | 'neutral';
|
|
1179
|
-
declare class LoroBadge {
|
|
1180
|
-
label: _angular_core.InputSignal<string>;
|
|
1181
|
-
variant: _angular_core.InputSignal<LoroBadgeVariant>;
|
|
1182
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroBadge, never>;
|
|
1183
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroBadge, "loro-badge", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1184
|
-
}
|
|
1185
|
-
|
|
1186
|
-
type LoroCardVariant = 'default' | 'tinted' | 'danger' | 'selectable';
|
|
1187
|
-
type LoroCardBenefitVariant = 'benefit' | 'benefit-showcase';
|
|
1188
|
-
type LoroCardLinkVariant = 'primary' | 'secondary' | 'hero';
|
|
1189
|
-
type LoroCardJustify = 'start' | 'center' | 'end';
|
|
1190
|
-
type LoroCardBenefitIconName = LoroIconName;
|
|
1191
|
-
type LoroCardBenefitIconColor = LoroIconColorToken;
|
|
1192
|
-
type LoroCardBenefitIconSize = 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 32;
|
|
1193
|
-
type LoroCardLinkAvatarSize = LoroCardBenefitIconSize;
|
|
1194
|
-
type LoroCardHomeVariant = LoroCardLinkVariant;
|
|
1195
|
-
|
|
1196
|
-
declare class LoroCardBenefit {
|
|
1197
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
1198
|
-
readonly description: _angular_core.InputSignal<string>;
|
|
1199
|
-
readonly icon: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconName | null>;
|
|
1200
|
-
readonly iconSize: _angular_core.InputSignal<LoroCardBenefitIconSize>;
|
|
1201
|
-
readonly iconColor: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconColorToken>;
|
|
1056
|
+
/** Icons are hidden while loading so the spinner is the only visual affordance. */
|
|
1202
1057
|
protected readonly hasIcon: _angular_core.Signal<boolean>;
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
readonly
|
|
1211
|
-
|
|
1212
|
-
readonly
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1216
|
-
|
|
1217
|
-
readonly arrowSize: _angular_core.InputSignal<number>;
|
|
1218
|
-
protected readonly hasDescription: _angular_core.Signal<boolean>;
|
|
1219
|
-
protected readonly isInteractive: _angular_core.Signal<boolean>;
|
|
1220
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardNavigation, never>;
|
|
1221
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardNavigation, "loro-card-navigation", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "arrowSize": { "alias": "arrowSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1222
|
-
}
|
|
1223
|
-
|
|
1224
|
-
declare class LoroCardLink {
|
|
1225
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
1226
|
-
readonly subtitle: _angular_core.InputSignal<string>;
|
|
1227
|
-
readonly avatarImage: _angular_core.InputSignal<string | null>;
|
|
1228
|
-
readonly iconSize: _angular_core.InputSignal<_juligc99_loro_ui.LoroCardBenefitIconSize>;
|
|
1229
|
-
readonly illustration: _angular_core.InputSignal<LoroImageName | null>;
|
|
1230
|
-
protected readonly avatarLoadFailed: _angular_core.WritableSignal<boolean>;
|
|
1231
|
-
protected readonly shouldShowAvatarImage: _angular_core.Signal<boolean>;
|
|
1232
|
-
protected onAvatarImageError(): void;
|
|
1233
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardLink, never>;
|
|
1234
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardLink, "loro-card-link", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "avatarImage": { "alias": "avatarImage"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1235
|
-
}
|
|
1236
|
-
|
|
1237
|
-
declare const LoroCardDefaultIconSize = 28;
|
|
1238
|
-
declare const LoroCardDefaultArrowSize = 16;
|
|
1239
|
-
declare const LoroCardDefaultHeroAvatarIconSize = 22;
|
|
1240
|
-
|
|
1241
|
-
type LoroCardNavVariant = 'default' | 'danger' | 'soft';
|
|
1242
|
-
type LoroCardNavTrailing = 'arrow' | 'toggle' | 'radio' | 'text' | 'badge' | 'none';
|
|
1243
|
-
declare class LoroCardNav {
|
|
1244
|
-
private readonly router;
|
|
1245
|
-
title: _angular_core.InputSignal<string>;
|
|
1246
|
-
description: _angular_core.InputSignal<string>;
|
|
1247
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1248
|
-
iconSize: _angular_core.InputSignal<number>;
|
|
1249
|
-
iconColor: _angular_core.InputSignal<string>;
|
|
1250
|
-
route: _angular_core.InputSignal<string>;
|
|
1251
|
-
variant: _angular_core.InputSignal<LoroCardNavVariant>;
|
|
1252
|
-
trailing: _angular_core.InputSignal<LoroCardNavTrailing>;
|
|
1253
|
-
value: _angular_core.InputSignal<string>;
|
|
1254
|
-
checked: _angular_core.InputSignal<boolean>;
|
|
1255
|
-
selected: _angular_core.InputSignal<boolean>;
|
|
1256
|
-
badgeLabel: _angular_core.InputSignal<string>;
|
|
1257
|
-
badgeVariant: _angular_core.InputSignal<LoroBadgeVariant>;
|
|
1258
|
-
itemClick: _angular_core.OutputEmitterRef<void>;
|
|
1259
|
-
checkedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
1260
|
-
selectedChange: _angular_core.OutputEmitterRef<string>;
|
|
1261
|
-
protected activate(): void;
|
|
1262
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardNav, never>;
|
|
1263
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardNav, "loro-card-nav", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "trailing": { "alias": "trailing"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "badgeLabel": { "alias": "badgeLabel"; "required": false; "isSignal": true; }; "badgeVariant": { "alias": "badgeVariant"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "checkedChange": "checkedChange"; "selectedChange": "selectedChange"; }, never, never, true, never>;
|
|
1264
|
-
}
|
|
1265
|
-
|
|
1266
|
-
declare class LoroDashboardCard {
|
|
1267
|
-
private readonly haptics;
|
|
1268
|
-
title: _angular_core.InputSignal<string>;
|
|
1269
|
-
description: _angular_core.InputSignal<string>;
|
|
1270
|
-
link: _angular_core.InputSignal<string>;
|
|
1271
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1272
|
-
illustration: _angular_core.InputSignal<LoroImageName | null>;
|
|
1273
|
-
variant: _angular_core.InputSignal<"home" | "default">;
|
|
1274
|
-
showArrow: _angular_core.InputSignal<boolean>;
|
|
1275
|
-
iconSize: _angular_core.InputSignal<number>;
|
|
1276
|
-
arrowSize: _angular_core.InputSignal<number>;
|
|
1277
|
-
onCardClick(): void;
|
|
1278
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroDashboardCard, never>;
|
|
1279
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroDashboardCard, "loro-dashboard-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "link": { "alias": "link"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "illustration": { "alias": "illustration"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "arrowSize": { "alias": "arrowSize"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1280
|
-
}
|
|
1281
|
-
|
|
1282
|
-
type LoroDividerAlign = 'left' | 'center' | 'right';
|
|
1283
|
-
declare class LoroDivider {
|
|
1284
|
-
text: _angular_core.InputSignal<string>;
|
|
1285
|
-
align: _angular_core.InputSignal<LoroDividerAlign>;
|
|
1286
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroDivider, never>;
|
|
1287
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroDivider, "loro-divider", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1288
|
-
}
|
|
1289
|
-
|
|
1290
|
-
type LoroProductRowVariant = 'basket' | 'pantry' | 'compare';
|
|
1291
|
-
type LoroProductRowStatus = 'ok' | 'warning' | 'expiring';
|
|
1292
|
-
declare class LoroProductRow {
|
|
1293
|
-
variant: _angular_core.InputSignal<LoroProductRowVariant>;
|
|
1294
|
-
name: _angular_core.InputSignal<string>;
|
|
1295
|
-
meta: _angular_core.InputSignal<string>;
|
|
1296
|
-
imageName: _angular_core.InputSignal<LoroImageName | null>;
|
|
1297
|
-
quantityLabel: _angular_core.InputSignal<string>;
|
|
1298
|
-
quantity: _angular_core.InputSignal<number | null>;
|
|
1299
|
-
unit: _angular_core.InputSignal<string>;
|
|
1300
|
-
total: _angular_core.InputSignal<number>;
|
|
1301
|
-
checked: _angular_core.InputSignal<boolean>;
|
|
1302
|
-
divider: _angular_core.InputSignal<boolean>;
|
|
1303
|
-
status: _angular_core.InputSignal<LoroProductRowStatus>;
|
|
1304
|
-
prices: _angular_core.InputSignal<readonly {
|
|
1305
|
-
store: string;
|
|
1306
|
-
value: number;
|
|
1307
|
-
best?: boolean;
|
|
1308
|
-
logoName?: LoroImageName | null;
|
|
1309
|
-
}[]>;
|
|
1310
|
-
checkedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
1311
|
-
quantityChange: _angular_core.OutputEmitterRef<number>;
|
|
1312
|
-
increment: _angular_core.OutputEmitterRef<void>;
|
|
1313
|
-
decrement: _angular_core.OutputEmitterRef<void>;
|
|
1314
|
-
rowRemove: _angular_core.OutputEmitterRef<void>;
|
|
1315
|
-
protected readonly swipeDragging: _angular_core.WritableSignal<boolean>;
|
|
1316
|
-
protected readonly swipeArmed: _angular_core.WritableSignal<boolean>;
|
|
1317
|
-
protected readonly swipeRemoving: _angular_core.WritableSignal<boolean>;
|
|
1318
|
-
private readonly swipeOffsetX;
|
|
1319
|
-
private touchStartX;
|
|
1320
|
-
private touchStartY;
|
|
1321
|
-
private touchStartedOnInteractive;
|
|
1322
|
-
private touchMoved;
|
|
1323
|
-
private suppressNextClick;
|
|
1324
|
-
protected swipeTransform(): string | null;
|
|
1325
|
-
protected deleteActionTransform(): string | null;
|
|
1326
|
-
protected isSwipeRemovable(): boolean;
|
|
1327
|
-
protected quantityValue(): string;
|
|
1328
|
-
protected updateQuantity(value: string): void;
|
|
1329
|
-
protected onRowTouchStart(event: TouchEvent): void;
|
|
1330
|
-
protected onRowTouchMove(event: TouchEvent): void;
|
|
1331
|
-
protected onRowTouchEnd(event: TouchEvent): void;
|
|
1332
|
-
protected onRowTouchCancel(): void;
|
|
1333
|
-
protected onBasketClick(event: MouseEvent): void;
|
|
1334
|
-
private formatQuantity;
|
|
1335
|
-
private normalizedUnit;
|
|
1336
|
-
protected formatCurrency(value: number): string;
|
|
1337
|
-
private resetSwipe;
|
|
1338
|
-
private triggerRemove;
|
|
1339
|
-
private isMobileViewport;
|
|
1340
|
-
private isInteractiveTarget;
|
|
1341
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroProductRow, never>;
|
|
1342
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroProductRow, "loro-product-row", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "imageName": { "alias": "imageName"; "required": false; "isSignal": true; }; "quantityLabel": { "alias": "quantityLabel"; "required": false; "isSignal": true; }; "quantity": { "alias": "quantity"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "divider": { "alias": "divider"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "prices": { "alias": "prices"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; "quantityChange": "quantityChange"; "increment": "increment"; "decrement": "decrement"; "rowRemove": "rowRemove"; }, never, never, true, never>;
|
|
1343
|
-
}
|
|
1344
|
-
|
|
1345
|
-
declare class LoroProductSection {
|
|
1346
|
-
title: _angular_core.InputSignal<string>;
|
|
1347
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1348
|
-
collapsible: _angular_core.InputSignal<boolean>;
|
|
1349
|
-
protected readonly expanded: _angular_core.WritableSignal<boolean>;
|
|
1350
|
-
protected toggle(): void;
|
|
1351
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroProductSection, never>;
|
|
1352
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroProductSection, "loro-product-section", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1353
|
-
}
|
|
1354
|
-
|
|
1355
|
-
declare class LoroProfileCard {
|
|
1356
|
-
name: _angular_core.InputSignal<string>;
|
|
1357
|
-
email: _angular_core.InputSignal<string>;
|
|
1358
|
-
imageSrc: _angular_core.InputSignal<string | null>;
|
|
1359
|
-
changePhotoLabel: _angular_core.InputSignal<string>;
|
|
1360
|
-
changePhotoLoadingLabel: _angular_core.InputSignal<string>;
|
|
1361
|
-
changePhotoLoading: _angular_core.InputSignal<boolean>;
|
|
1362
|
-
changePhotoDisabled: _angular_core.InputSignal<boolean>;
|
|
1363
|
-
changePhotoClick: _angular_core.OutputEmitterRef<void>;
|
|
1364
|
-
private readonly imageFailed;
|
|
1365
|
-
constructor();
|
|
1366
|
-
protected resolvedImageSrc(): string | null;
|
|
1367
|
-
protected onImageError(): void;
|
|
1368
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroProfileCard, never>;
|
|
1369
|
-
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>;
|
|
1370
|
-
}
|
|
1371
|
-
|
|
1372
|
-
type LoroProfileHeroVariant = 'default' | 'compact' | 'large' | 'support';
|
|
1373
|
-
declare class LoroProfileHero {
|
|
1374
|
-
variant: _angular_core.InputSignal<LoroProfileHeroVariant>;
|
|
1375
|
-
firstName: _angular_core.InputSignal<string>;
|
|
1376
|
-
eyebrow: _angular_core.InputSignal<string>;
|
|
1377
|
-
greeting: _angular_core.InputSignal<string>;
|
|
1378
|
-
profileImageSrc: _angular_core.InputSignal<string | null>;
|
|
1379
|
-
profileImageAlt: _angular_core.InputSignal<string>;
|
|
1380
|
-
avatarIconName: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconName>;
|
|
1381
|
-
avatarIconSize: _angular_core.InputSignal<number>;
|
|
1382
|
-
avatarAlt: _angular_core.InputSignal<string>;
|
|
1383
|
-
avatarSize: _angular_core.InputSignal<string>;
|
|
1384
|
-
avatarRadius: _angular_core.InputSignal<string>;
|
|
1385
|
-
parrotImageName: _angular_core.InputSignal<LoroImageName>;
|
|
1386
|
-
parrotImageAlt: _angular_core.InputSignal<string>;
|
|
1387
|
-
parrotMobileWidth: _angular_core.InputSignal<string>;
|
|
1388
|
-
parrotWebWidth: _angular_core.InputSignal<string>;
|
|
1389
|
-
eyebrowFontSize: _angular_core.InputSignal<string>;
|
|
1390
|
-
titleFontSize: _angular_core.InputSignal<string>;
|
|
1391
|
-
greetingFontSize: _angular_core.InputSignal<string>;
|
|
1392
|
-
elevated: _angular_core.InputSignal<boolean>;
|
|
1393
|
-
avatarIconCssSize(): string;
|
|
1394
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroProfileHero, never>;
|
|
1395
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroProfileHero, "loro-profile-hero", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "firstName": { "alias": "firstName"; "required": false; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "greeting": { "alias": "greeting"; "required": false; "isSignal": true; }; "profileImageSrc": { "alias": "profileImageSrc"; "required": false; "isSignal": true; }; "profileImageAlt": { "alias": "profileImageAlt"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "avatarIconSize": { "alias": "avatarIconSize"; "required": false; "isSignal": true; }; "avatarAlt": { "alias": "avatarAlt"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; "avatarRadius": { "alias": "avatarRadius"; "required": false; "isSignal": true; }; "parrotImageName": { "alias": "parrotImageName"; "required": false; "isSignal": true; }; "parrotImageAlt": { "alias": "parrotImageAlt"; "required": false; "isSignal": true; }; "parrotMobileWidth": { "alias": "parrotMobileWidth"; "required": false; "isSignal": true; }; "parrotWebWidth": { "alias": "parrotWebWidth"; "required": false; "isSignal": true; }; "eyebrowFontSize": { "alias": "eyebrowFontSize"; "required": false; "isSignal": true; }; "titleFontSize": { "alias": "titleFontSize"; "required": false; "isSignal": true; }; "greetingFontSize": { "alias": "greetingFontSize"; "required": false; "isSignal": true; }; "elevated": { "alias": "elevated"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1396
|
-
}
|
|
1397
|
-
|
|
1398
|
-
type LoroStatCardVariant = 'default' | 'tinted' | 'danger' | 'compare-summary' | 'compare-inline' | 'image-corner' | 'card-basket';
|
|
1399
|
-
declare class LoroStatCard {
|
|
1400
|
-
title: _angular_core.InputSignal<string>;
|
|
1401
|
-
value: _angular_core.InputSignal<string>;
|
|
1402
|
-
description: _angular_core.InputSignal<string>;
|
|
1403
|
-
eyebrow: _angular_core.InputSignal<string>;
|
|
1404
|
-
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1405
|
-
iconSize: _angular_core.InputSignal<number>;
|
|
1406
|
-
image: _angular_core.InputSignal<LoroImageName | null>;
|
|
1407
|
-
topImage: _angular_core.InputSignal<LoroImageName | null>;
|
|
1408
|
-
variant: _angular_core.InputSignal<LoroStatCardVariant>;
|
|
1409
|
-
total: _angular_core.InputSignal<number>;
|
|
1410
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroStatCard, never>;
|
|
1411
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroStatCard, "loro-stat-card", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "image": { "alias": "image"; "required": false; "isSignal": true; }; "topImage": { "alias": "topImage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1412
|
-
}
|
|
1413
|
-
|
|
1414
|
-
type LoroStoreRankCardVariant = 'default' | 'compact';
|
|
1415
|
-
declare class LoroStoreRankCard {
|
|
1416
|
-
rank: _angular_core.InputSignal<number>;
|
|
1417
|
-
name: _angular_core.InputSignal<string>;
|
|
1418
|
-
price: _angular_core.InputSignal<number>;
|
|
1419
|
-
delta: _angular_core.InputSignal<number>;
|
|
1420
|
-
logoName: _angular_core.InputSignal<LoroImageName | null>;
|
|
1421
|
-
best: _angular_core.InputSignal<boolean>;
|
|
1422
|
-
variant: _angular_core.InputSignal<LoroStoreRankCardVariant>;
|
|
1423
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroStoreRankCard, never>;
|
|
1424
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroStoreRankCard, "loro-store-rank-card", never, { "rank": { "alias": "rank"; "required": true; "isSignal": true; }; "name": { "alias": "name"; "required": true; "isSignal": true; }; "price": { "alias": "price"; "required": true; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "logoName": { "alias": "logoName"; "required": false; "isSignal": true; }; "best": { "alias": "best"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1425
|
-
}
|
|
1426
|
-
|
|
1427
|
-
declare class LoroSummaryBar {
|
|
1428
|
-
totalLabel: _angular_core.InputSignal<string>;
|
|
1429
|
-
total: _angular_core.InputSignal<number>;
|
|
1430
|
-
primaryLabel: _angular_core.InputSignal<string>;
|
|
1431
|
-
secondaryLabel: _angular_core.InputSignal<string>;
|
|
1432
|
-
helper: _angular_core.InputSignal<string>;
|
|
1433
|
-
leftImage: _angular_core.InputSignal<LoroImageName>;
|
|
1434
|
-
rightImage: _angular_core.InputSignal<LoroImageName>;
|
|
1435
|
-
primaryDisabled: _angular_core.InputSignal<boolean>;
|
|
1436
|
-
secondaryDisabled: _angular_core.InputSignal<boolean>;
|
|
1437
|
-
primaryAction: _angular_core.OutputEmitterRef<void>;
|
|
1438
|
-
secondaryAction: _angular_core.OutputEmitterRef<void>;
|
|
1439
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroSummaryBar, never>;
|
|
1440
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroSummaryBar, "loro-summary-bar", never, { "totalLabel": { "alias": "totalLabel"; "required": false; "isSignal": true; }; "total": { "alias": "total"; "required": true; "isSignal": true; }; "primaryLabel": { "alias": "primaryLabel"; "required": false; "isSignal": true; }; "secondaryLabel": { "alias": "secondaryLabel"; "required": false; "isSignal": true; }; "helper": { "alias": "helper"; "required": false; "isSignal": true; }; "leftImage": { "alias": "leftImage"; "required": false; "isSignal": true; }; "rightImage": { "alias": "rightImage"; "required": false; "isSignal": true; }; "primaryDisabled": { "alias": "primaryDisabled"; "required": false; "isSignal": true; }; "secondaryDisabled": { "alias": "secondaryDisabled"; "required": false; "isSignal": true; }; }, { "primaryAction": "primaryAction"; "secondaryAction": "secondaryAction"; }, never, never, true, never>;
|
|
1441
|
-
}
|
|
1442
|
-
|
|
1443
|
-
type LoroTabAlign = 'flex' | 'block';
|
|
1444
|
-
interface LoroTabOption {
|
|
1445
|
-
readonly value: string;
|
|
1446
|
-
readonly label: string;
|
|
1447
|
-
readonly icon?: LoroIconName | null;
|
|
1448
|
-
readonly ariaLabel?: string;
|
|
1449
|
-
}
|
|
1450
|
-
declare class LoroTab {
|
|
1451
|
-
options: _angular_core.InputSignal<readonly LoroTabOption[]>;
|
|
1452
|
-
value: _angular_core.InputSignal<string>;
|
|
1453
|
-
ariaLabel: _angular_core.InputSignal<string>;
|
|
1454
|
-
align: _angular_core.InputSignal<LoroTabAlign>;
|
|
1455
|
-
iconSize: _angular_core.InputSignal<number>;
|
|
1456
|
-
change: _angular_core.OutputEmitterRef<string>;
|
|
1457
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroTab, never>;
|
|
1458
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroTab, "loro-tab", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; }, { "change": "change"; }, never, never, true, never>;
|
|
1058
|
+
/** Labels are hidden for icon-only buttons and loading buttons. */
|
|
1059
|
+
protected readonly showLabel: _angular_core.Signal<boolean>;
|
|
1060
|
+
/** Social buttons preserve their original icon artwork colors by default. */
|
|
1061
|
+
protected readonly iconRenderMode: _angular_core.Signal<LoroIconRenderMode>;
|
|
1062
|
+
/** Tertiary can override button foreground (text/icon) using iconColor. */
|
|
1063
|
+
protected readonly resolvedTertiaryColor: _angular_core.Signal<string | null>;
|
|
1064
|
+
/** Tertiary can override icon color while other variants keep currentColor styling. */
|
|
1065
|
+
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
1066
|
+
/** Falls back to visible text when no explicit accessible label is provided. */
|
|
1067
|
+
protected readonly resolvedAriaLabel: _angular_core.Signal<string | null>;
|
|
1068
|
+
/** Prevents emissions for visual disabled/loading states. */
|
|
1069
|
+
protected onClick(): void;
|
|
1070
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroButton, never>;
|
|
1071
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroButton, "loro-button", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaDescription": { "alias": "ariaDescription"; "required": false; "isSignal": true; }; }, { "buttonClick": "buttonClick"; }, never, ["*"], true, never>;
|
|
1459
1072
|
}
|
|
1460
1073
|
|
|
1461
1074
|
type LoroAlertVariant = 'neutral' | 'info' | 'success' | 'warning' | 'error';
|
|
1462
1075
|
type LoroAlertAnnouncement = 'auto' | 'polite' | 'assertive' | 'off';
|
|
1076
|
+
|
|
1463
1077
|
declare class LoroAlert {
|
|
1464
|
-
/** Visible heading. Keep it short and specific. */
|
|
1465
1078
|
readonly title: _angular_core.InputSignal<string>;
|
|
1466
|
-
/** Plain text body for common inline alerts. Rich content can still be projected. */
|
|
1467
1079
|
readonly message: _angular_core.InputSignal<string>;
|
|
1468
|
-
/** Semantic visual treatment. Meaning must never depend on colour alone. */
|
|
1469
1080
|
readonly variant: _angular_core.InputSignal<LoroAlertVariant>;
|
|
1470
|
-
/** Controls live-region behaviour for dynamically inserted messages. */
|
|
1471
1081
|
readonly announcement: _angular_core.InputSignal<LoroAlertAnnouncement>;
|
|
1472
|
-
/** Allows programmatic focus without adding the alert to the Tab order. */
|
|
1473
1082
|
readonly focusable: _angular_core.InputSignal<boolean>;
|
|
1474
|
-
/** Shows the built-in action button when a label is supplied. */
|
|
1475
1083
|
readonly actionLabel: _angular_core.InputSignal<string>;
|
|
1476
|
-
/** Shows a close button and emits dismissed when activated. */
|
|
1477
1084
|
readonly dismissible: _angular_core.InputSignal<boolean>;
|
|
1478
|
-
/** Accessible name for the icon-only close button. */
|
|
1479
1085
|
readonly dismissLabel: _angular_core.InputSignal<string>;
|
|
1480
|
-
/** Emitted by the built-in action button. */
|
|
1481
1086
|
readonly action: _angular_core.OutputEmitterRef<void>;
|
|
1482
|
-
/** Emitted by the close button. The parent decides whether to remove the alert. */
|
|
1483
1087
|
readonly dismissed: _angular_core.OutputEmitterRef<void>;
|
|
1484
1088
|
protected readonly resolvedIcon: _angular_core.Signal<LoroIconName>;
|
|
1485
1089
|
protected readonly resolvedIconColor: _angular_core.Signal<string>;
|
|
1090
|
+
protected readonly actionIconColor: _angular_core.Signal<string>;
|
|
1486
1091
|
protected readonly role: _angular_core.Signal<"status" | "alert" | null>;
|
|
1487
1092
|
protected readonly ariaLive: _angular_core.Signal<"polite" | "assertive" | null>;
|
|
1488
1093
|
private readonly resolvedAnnouncement;
|
|
1094
|
+
private resolveIconName;
|
|
1095
|
+
private resolveVariantIconColor;
|
|
1096
|
+
private resolveRole;
|
|
1097
|
+
private resolveAriaLive;
|
|
1489
1098
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAlert, never>;
|
|
1490
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAlert, "loro-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "announcement": { "alias": "announcement"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; "dismissed": "dismissed"; }, never,
|
|
1099
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAlert, "loro-alert", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "announcement": { "alias": "announcement"; "required": false; "isSignal": true; }; "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "dismissLabel": { "alias": "dismissLabel"; "required": false; "isSignal": true; }; }, { "action": "action"; "dismissed": "dismissed"; }, never, never, true, never>;
|
|
1491
1100
|
}
|
|
1492
1101
|
|
|
1493
1102
|
declare class LoroNotification {
|
|
@@ -1594,37 +1203,6 @@ declare class LoroToast {
|
|
|
1594
1203
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToast, "loro-toast", never, { "message": { "alias": "message"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "dismiss": "dismiss"; }, never, never, true, never>;
|
|
1595
1204
|
}
|
|
1596
1205
|
|
|
1597
|
-
type LoroAuthFieldState = 'default' | 'error';
|
|
1598
|
-
declare class LoroAuthField implements FormValueControl<string> {
|
|
1599
|
-
icon: _angular_core.InputSignal<LoroIconName>;
|
|
1600
|
-
label: _angular_core.InputSignal<string>;
|
|
1601
|
-
placeholder: _angular_core.InputSignal<string>;
|
|
1602
|
-
value: _angular_core.ModelSignal<string>;
|
|
1603
|
-
type: _angular_core.InputSignal<"email" | "text" | "password">;
|
|
1604
|
-
autocomplete: _angular_core.InputSignal<string>;
|
|
1605
|
-
selected: _angular_core.InputSignal<boolean>;
|
|
1606
|
-
state: _angular_core.InputSignal<LoroAuthFieldState>;
|
|
1607
|
-
errorMessage: _angular_core.InputSignal<string>;
|
|
1608
|
-
errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
|
|
1609
|
-
invalid: _angular_core.InputSignal<boolean>;
|
|
1610
|
-
disabled: _angular_core.InputSignal<boolean>;
|
|
1611
|
-
readonly: _angular_core.InputSignal<boolean>;
|
|
1612
|
-
required: _angular_core.InputSignal<boolean>;
|
|
1613
|
-
touched: _angular_core.ModelSignal<boolean>;
|
|
1614
|
-
valueChange: _angular_core.OutputEmitterRef<string>;
|
|
1615
|
-
protected readonly errorId: string;
|
|
1616
|
-
protected readonly errorText: _angular_core.Signal<string>;
|
|
1617
|
-
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
1618
|
-
protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
|
|
1619
|
-
protected showToggle(): boolean;
|
|
1620
|
-
protected resolvedType(): "email" | "text" | "password";
|
|
1621
|
-
protected updateValue(value: string): void;
|
|
1622
|
-
protected markAsTouched(): void;
|
|
1623
|
-
protected toggleVisibility(): void;
|
|
1624
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroAuthField, never>;
|
|
1625
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroAuthField, "loro-auth-field", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "valueChange": "valueChange"; }, never, never, true, never>;
|
|
1626
|
-
}
|
|
1627
|
-
|
|
1628
1206
|
declare class LoroCheckbox implements FormCheckboxControl {
|
|
1629
1207
|
checked: _angular_core.ModelSignal<boolean>;
|
|
1630
1208
|
touched: _angular_core.ModelSignal<boolean>;
|
|
@@ -1675,7 +1253,7 @@ declare class LoroFilterChip {
|
|
|
1675
1253
|
}
|
|
1676
1254
|
|
|
1677
1255
|
type LoroInputUnit = 'kg' | 'ud';
|
|
1678
|
-
type LoroInputVariant = 'default' | 'withIcon' | 'search' | 'photo' | 'stepper';
|
|
1256
|
+
type LoroInputVariant = 'default' | 'withIcon' | 'search' | 'photo' | 'stepper' | 'auth';
|
|
1679
1257
|
type LoroInputState = 'default' | 'error' | 'success' | 'loading';
|
|
1680
1258
|
declare class LoroInput implements FormValueControl<string> {
|
|
1681
1259
|
label: _angular_core.InputSignal<string>;
|
|
@@ -1685,13 +1263,14 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1685
1263
|
type: _angular_core.InputSignal<"email" | "search" | "text" | "tel" | "password">;
|
|
1686
1264
|
name: _angular_core.InputSignal<string>;
|
|
1687
1265
|
autocomplete: _angular_core.InputSignal<string>;
|
|
1688
|
-
inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "
|
|
1266
|
+
inputmode: _angular_core.InputSignal<"" | "email" | "search" | "text" | "tel" | "none" | "url" | "numeric" | "decimal">;
|
|
1689
1267
|
icon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1690
1268
|
iconSize: _angular_core.InputSignal<number>;
|
|
1691
1269
|
trailingIcon: _angular_core.InputSignal<LoroIconName | null>;
|
|
1692
1270
|
trailingIconSize: _angular_core.InputSignal<number>;
|
|
1693
1271
|
trailingAriaLabel: _angular_core.InputSignal<string>;
|
|
1694
1272
|
variant: _angular_core.InputSignal<LoroInputVariant>;
|
|
1273
|
+
selected: _angular_core.InputSignal<boolean>;
|
|
1695
1274
|
state: _angular_core.InputSignal<LoroInputState>;
|
|
1696
1275
|
errorMessage: _angular_core.InputSignal<string>;
|
|
1697
1276
|
errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
|
|
@@ -1711,6 +1290,10 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1711
1290
|
protected readonly hasError: _angular_core.Signal<boolean>;
|
|
1712
1291
|
protected readonly hasSuccess: _angular_core.Signal<boolean>;
|
|
1713
1292
|
protected readonly hasLoading: _angular_core.Signal<boolean>;
|
|
1293
|
+
protected readonly isAuthVariant: _angular_core.Signal<boolean>;
|
|
1294
|
+
protected readonly passwordVisible: _angular_core.ModelSignal<boolean>;
|
|
1295
|
+
protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
|
|
1296
|
+
protected readonly resolvedType: _angular_core.Signal<"email" | "search" | "text" | "tel" | "password">;
|
|
1714
1297
|
protected readonly resolvedLeadingIconColor: _angular_core.Signal<string>;
|
|
1715
1298
|
protected readonly resolvedTrailingIconColor: _angular_core.Signal<string>;
|
|
1716
1299
|
focus(options?: FocusOptions): void;
|
|
@@ -1718,6 +1301,7 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1718
1301
|
protected normalizeValue(value: string): void;
|
|
1719
1302
|
protected updateValue(value: string): void;
|
|
1720
1303
|
protected markAsTouched(): void;
|
|
1304
|
+
protected togglePasswordVisibility(): void;
|
|
1721
1305
|
private coerceNumber;
|
|
1722
1306
|
private formatValue;
|
|
1723
1307
|
protected normalizedUnit(): LoroInputUnit;
|
|
@@ -1727,7 +1311,7 @@ declare class LoroInput implements FormValueControl<string> {
|
|
|
1727
1311
|
private clampValue;
|
|
1728
1312
|
private sanitizeValue;
|
|
1729
1313
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroInput, never>;
|
|
1730
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroInput, "loro-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingIconSize": { "alias": "trailingIconSize"; "required": false; "isSignal": true; }; "trailingAriaLabel": { "alias": "trailingAriaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "trailingClick": "trailingClick"; }, never, never, true, never>;
|
|
1314
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroInput, "loro-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconSize": { "alias": "iconSize"; "required": false; "isSignal": true; }; "trailingIcon": { "alias": "trailingIcon"; "required": false; "isSignal": true; }; "trailingIconSize": { "alias": "trailingIconSize"; "required": false; "isSignal": true; }; "trailingAriaLabel": { "alias": "trailingAriaLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "state": { "alias": "state"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "passwordVisible": { "alias": "passwordVisible"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "touched": "touchedChange"; "trailingClick": "trailingClick"; "passwordVisible": "passwordVisibleChange"; }, never, never, true, never>;
|
|
1731
1315
|
}
|
|
1732
1316
|
|
|
1733
1317
|
type LoroRadioVariant = 'default' | 'row';
|
|
@@ -1801,76 +1385,165 @@ declare class LoroToggle implements FormCheckboxControl {
|
|
|
1801
1385
|
errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
|
|
1802
1386
|
touched: _angular_core.ModelSignal<boolean>;
|
|
1803
1387
|
ariaLabel: _angular_core.InputSignal<string>;
|
|
1804
|
-
|
|
1388
|
+
protected readonly isChecked: _angular_core.Signal<boolean>;
|
|
1389
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1805
1390
|
protected toggle(): void;
|
|
1806
1391
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroToggle, never>;
|
|
1807
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToggle, "loro-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange";
|
|
1392
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroToggle, "loro-toggle", never, { "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "checked": "checkedChange"; "touched": "touchedChange"; }, never, never, true, never>;
|
|
1808
1393
|
}
|
|
1809
1394
|
|
|
1810
|
-
|
|
1395
|
+
type LoroCardSelectorMediaKind = 'image' | 'pdf' | 'word' | 'archive' | 'other';
|
|
1396
|
+
interface LoroCardSelectorAction {
|
|
1397
|
+
ariaLabel: string;
|
|
1398
|
+
icon: LoroIconName;
|
|
1399
|
+
iconSize?: LoroButtonIconSize;
|
|
1400
|
+
}
|
|
1401
|
+
|
|
1402
|
+
type LoroUploadVariant = 'default' | 'error' | 'success' | 'info' | 'disabled';
|
|
1403
|
+
interface LoroUploadFileView {
|
|
1404
|
+
file: File;
|
|
1405
|
+
kind: LoroCardSelectorMediaKind;
|
|
1406
|
+
displayName: string;
|
|
1407
|
+
sizeLabel: string;
|
|
1408
|
+
previewUrl: string | null;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
declare class LoroUpload implements FormValueControl<File[]> {
|
|
1412
|
+
private readonly destroyRef;
|
|
1413
|
+
private readonly control;
|
|
1414
|
+
private readonly previewUrls;
|
|
1415
|
+
private readonly cleanupPreviewUrls;
|
|
1811
1416
|
label: _angular_core.InputSignal<string>;
|
|
1812
1417
|
title: _angular_core.InputSignal<string>;
|
|
1813
1418
|
description: _angular_core.InputSignal<string>;
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1419
|
+
errorMessage: _angular_core.InputSignal<string>;
|
|
1420
|
+
variant: _angular_core.InputSignal<LoroUploadVariant>;
|
|
1421
|
+
multiple: _angular_core.InputSignal<boolean>;
|
|
1422
|
+
maxFiles: _angular_core.InputSignal<number>;
|
|
1423
|
+
errors: _angular_core.InputSignal<readonly WithOptionalFieldTree<ValidationError>[]>;
|
|
1424
|
+
touched: _angular_core.ModelSignal<boolean>;
|
|
1425
|
+
value: _angular_core.ModelSignal<File[]>;
|
|
1426
|
+
protected readonly isDragging: _angular_core.ModelSignal<boolean>;
|
|
1427
|
+
protected readonly limitErrorMessage: _angular_core.WritableSignal<string>;
|
|
1428
|
+
protected readonly uploadId: string;
|
|
1429
|
+
protected readonly errorText: _angular_core.Signal<string>;
|
|
1430
|
+
protected readonly resolvedMaxFiles: _angular_core.Signal<number>;
|
|
1431
|
+
protected readonly resolvedVariant: _angular_core.Signal<LoroUploadVariant>;
|
|
1432
|
+
protected readonly hasFiles: _angular_core.Signal<boolean>;
|
|
1433
|
+
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
1434
|
+
protected readonly isLimitExceeded: _angular_core.Signal<boolean>;
|
|
1435
|
+
protected readonly resolvedErrorMessage: _angular_core.Signal<string>;
|
|
1436
|
+
protected readonly displayFiles: _angular_core.Signal<readonly LoroUploadFileView[]>;
|
|
1437
|
+
focus(options?: FocusOptions): void;
|
|
1438
|
+
protected onDragOver(event: DragEvent): void;
|
|
1439
|
+
protected onDragLeave(event: DragEvent): void;
|
|
1440
|
+
protected onDrop(event: DragEvent): void;
|
|
1441
|
+
protected onInputChange(event: Event): void;
|
|
1442
|
+
protected removeFile(index: number): void;
|
|
1443
|
+
protected trackByFileName(index: number, file: File): string;
|
|
1444
|
+
private commitFiles;
|
|
1445
|
+
private setFiles;
|
|
1446
|
+
private formatFileSize;
|
|
1447
|
+
private resolveFileKind;
|
|
1448
|
+
private getPreviewUrl;
|
|
1449
|
+
private syncPreviewUrls;
|
|
1818
1450
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroUpload, never>;
|
|
1819
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroUpload, "loro-upload", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "
|
|
1451
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroUpload, "loro-upload", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "maxFiles": { "alias": "maxFiles"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; "touched": { "alias": "touched"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "isDragging": { "alias": "isDragging"; "required": false; "isSignal": true; }; }, { "touched": "touchedChange"; "value": "valueChange"; "isDragging": "isDraggingChange"; }, never, never, true, never>;
|
|
1452
|
+
}
|
|
1453
|
+
|
|
1454
|
+
declare class LoroCardSelector {
|
|
1455
|
+
title: _angular_core.InputSignal<string>;
|
|
1456
|
+
description: _angular_core.InputSignal<string>;
|
|
1457
|
+
mediaKind: _angular_core.InputSignal<LoroCardSelectorMediaKind>;
|
|
1458
|
+
mediaImage: _angular_core.InputSignal<string | null>;
|
|
1459
|
+
action: _angular_core.InputSignal<LoroCardSelectorAction>;
|
|
1460
|
+
actionClick: _angular_core.OutputEmitterRef<void>;
|
|
1461
|
+
protected readonly hasMediaImage: _angular_core.Signal<boolean>;
|
|
1462
|
+
protected readonly resolvedMediaLabel: _angular_core.Signal<"IMG" | "PDF" | "DOC" | "ZIP" | "FILE">;
|
|
1463
|
+
protected readonly resolvedAction: _angular_core.Signal<LoroCardSelectorAction>;
|
|
1464
|
+
protected onActionClick(): void;
|
|
1465
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardSelector, never>;
|
|
1466
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardSelector, "loro-card-selector", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "mediaKind": { "alias": "mediaKind"; "required": false; "isSignal": true; }; "mediaImage": { "alias": "mediaImage"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; }, { "actionClick": "actionClick"; }, never, never, true, never>;
|
|
1820
1467
|
}
|
|
1821
1468
|
|
|
1822
|
-
type LoroModalSize = 'sm' | 'md' | 'lg';
|
|
1823
|
-
type LoroModalPlacement = 'center' | 'sheet';
|
|
1824
1469
|
declare class LoroModal {
|
|
1825
1470
|
private readonly document;
|
|
1826
|
-
private
|
|
1827
|
-
|
|
1471
|
+
private readonly swipe;
|
|
1472
|
+
/** Mobile swipe closes after a deliberate downward pull. */
|
|
1473
|
+
private readonly closeDragThreshold;
|
|
1474
|
+
/** Keeps body/html locked while the modal is open. */
|
|
1475
|
+
private readonly lockScrollEffect;
|
|
1828
1476
|
open: _angular_core.InputSignal<boolean>;
|
|
1829
1477
|
title: _angular_core.InputSignal<string>;
|
|
1830
1478
|
ariaLabel: _angular_core.InputSignal<string>;
|
|
1831
|
-
|
|
1832
|
-
placement: _angular_core.InputSignal<LoroModalPlacement>;
|
|
1833
|
-
dismissible: _angular_core.InputSignal<boolean>;
|
|
1834
|
-
sheetDragToClose: _angular_core.InputSignal<boolean>;
|
|
1835
|
-
sheetRestTop: _angular_core.InputSignal<string>;
|
|
1836
|
-
showBackdrop: _angular_core.InputSignal<boolean>;
|
|
1837
|
-
closeOnBackdrop: _angular_core.InputSignal<boolean>;
|
|
1479
|
+
backdrop: _angular_core.InputSignal<boolean>;
|
|
1838
1480
|
modalClose: _angular_core.OutputEmitterRef<void>;
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1842
|
-
protected readonly
|
|
1843
|
-
|
|
1844
|
-
|
|
1481
|
+
/** Tracks the sheet translation so the panel follows the finger. */
|
|
1482
|
+
protected readonly dragTranslateY: _angular_core.WritableSignal<number>;
|
|
1483
|
+
/** Disables the transition while the finger is down. */
|
|
1484
|
+
protected readonly isDragging: _angular_core.WritableSignal<boolean>;
|
|
1485
|
+
/** Applies the current drag offset without mutating layout flow. */
|
|
1486
|
+
protected readonly dialogTransform: _angular_core.Signal<string>;
|
|
1845
1487
|
protected requestClose(): void;
|
|
1846
|
-
|
|
1847
|
-
protected
|
|
1848
|
-
|
|
1849
|
-
protected
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
private clampSheetTop;
|
|
1853
|
-
private collapsedSheetTop;
|
|
1854
|
-
private maxSheetTop;
|
|
1855
|
-
private viewportHeight;
|
|
1856
|
-
private safeAreaInsetTop;
|
|
1488
|
+
/** Starts the swipe gesture only for touch pointers. */
|
|
1489
|
+
protected onDragStart(event: PointerEvent): void;
|
|
1490
|
+
/** Keeps the dialog aligned with the active touch point. */
|
|
1491
|
+
protected onDragMove(event: PointerEvent): void;
|
|
1492
|
+
/** Closes only when the swipe crosses the configured threshold. */
|
|
1493
|
+
protected onDragEnd(): void;
|
|
1857
1494
|
private lockDocumentScroll;
|
|
1858
|
-
|
|
1859
|
-
private
|
|
1495
|
+
/** Caps the live translation so the sheet feels stable on small screens. */
|
|
1496
|
+
private getMaxDragTranslateY;
|
|
1860
1497
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroModal, never>;
|
|
1861
|
-
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; }; "
|
|
1498
|
+
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; }; "backdrop": { "alias": "backdrop"; "required": false; "isSignal": true; }; }, { "modalClose": "modalClose"; }, never, ["*", "[loro-modal-actions]"], true, never>;
|
|
1862
1499
|
}
|
|
1863
1500
|
|
|
1864
|
-
declare class
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1501
|
+
declare class LoroHeader {
|
|
1502
|
+
/** Centered page title shown in the header. */
|
|
1503
|
+
title: _angular_core.InputSignal<string>;
|
|
1504
|
+
/** Keeps the header fixed to the top when true. */
|
|
1505
|
+
fixed: _angular_core.InputSignal<boolean>;
|
|
1506
|
+
/** Shows or hides the back action on mobile. */
|
|
1507
|
+
showBack: _angular_core.InputSignal<boolean>;
|
|
1508
|
+
/** Unread notification badge count. */
|
|
1509
|
+
notificationCount: _angular_core.InputSignal<number>;
|
|
1510
|
+
/** Controls the notification trigger active state. */
|
|
1511
|
+
notificationOpen: _angular_core.InputSignal<boolean>;
|
|
1512
|
+
/** Accessible label for the header landmark. */
|
|
1513
|
+
accountSummaryAriaLabel: _angular_core.InputSignal<string>;
|
|
1514
|
+
/** Accessible label for the back button. */
|
|
1515
|
+
backAriaLabel: _angular_core.InputSignal<string>;
|
|
1516
|
+
/** Accessible label for the notification trigger. */
|
|
1517
|
+
notificationAriaLabel: _angular_core.InputSignal<string>;
|
|
1518
|
+
/** Accessible label for the AI action. */
|
|
1519
|
+
aiAriaLabel: _angular_core.InputSignal<string>;
|
|
1520
|
+
/** Accessible label for the settings action. */
|
|
1521
|
+
settingsAriaLabel: _angular_core.InputSignal<string>;
|
|
1522
|
+
/** Emits when the back action is pressed. */
|
|
1523
|
+
backClick: _angular_core.OutputEmitterRef<void>;
|
|
1524
|
+
/** Emits when the notification action is pressed. */
|
|
1525
|
+
notificationClick: _angular_core.OutputEmitterRef<void>;
|
|
1526
|
+
/** Emits when the AI action is pressed. */
|
|
1527
|
+
aiClick: _angular_core.OutputEmitterRef<void>;
|
|
1528
|
+
/** Emits when the settings action is pressed. */
|
|
1529
|
+
settingsClick: _angular_core.OutputEmitterRef<void>;
|
|
1530
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroHeader, never>;
|
|
1531
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroHeader, "loro-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "fixed": { "alias": "fixed"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; "notificationCount": { "alias": "notificationCount"; "required": false; "isSignal": true; }; "notificationOpen": { "alias": "notificationOpen"; "required": false; "isSignal": true; }; "accountSummaryAriaLabel": { "alias": "accountSummaryAriaLabel"; "required": true; "isSignal": true; }; "backAriaLabel": { "alias": "backAriaLabel"; "required": true; "isSignal": true; }; "notificationAriaLabel": { "alias": "notificationAriaLabel"; "required": true; "isSignal": true; }; "aiAriaLabel": { "alias": "aiAriaLabel"; "required": true; "isSignal": true; }; "settingsAriaLabel": { "alias": "settingsAriaLabel"; "required": true; "isSignal": true; }; }, { "backClick": "backClick"; "notificationClick": "notificationClick"; "aiClick": "aiClick"; "settingsClick": "settingsClick"; }, never, never, true, never>;
|
|
1532
|
+
}
|
|
1533
|
+
|
|
1534
|
+
type LoroImageSize = number | string;
|
|
1535
|
+
|
|
1536
|
+
declare class LoroImage {
|
|
1537
|
+
readonly name: _angular_core.InputSignal<LoroImageName>;
|
|
1538
|
+
readonly alt: _angular_core.InputSignal<string>;
|
|
1539
|
+
readonly size: _angular_core.InputSignal<LoroImageSize | null>;
|
|
1540
|
+
protected readonly assetName: _angular_core.Signal<"image-al-loro-design-library-home-ai" | "image-favicon-apple-touch-icon" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-any" | "image-favicon-assets-xcassets-appicon-appiconset-appicon-dark" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-2732x2732-2" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-1" | "image-favicon-assets-xcassets-splash-imageset-splash-dark-2732x2732-2" | "image-favicon-favicon" | "image-home-icon-ai" | "image-home-icon-basket" | "image-home-icon-compare" | "image-home-icon-expiry" | "image-home-icon-pantry" | "image-home-icon-scan" | "image-image-home" | "image-logo-despensa-buy" | "image-logo-list-buy" | "image-loro-apaisado" | "image-loro-apaisado-blanco" | "image-loro-card-buy" | "image-loro-card-caducidad" | "image-loro-card-comparativa" | "image-loro-card-ia" | "image-loro-card-qr" | "image-loro-despensa" | "image-loro-icon-default" | "image-loro-spinner-ring" | "image-loro-tittle-sub" | "image-pantry-cabinet" | "image-pantry-metric-chart" | "image-product-bananas" | "image-product-milk" | "image-product-pasta" | "image-product-rice" | "image-product-tomatoes" | "image-product-yogurt" | "image-store-ahorramas" | "image-store-alcampo" | "image-store-aldi" | "image-store-bonpreu" | "image-store-caprabo" | "image-store-carrefour" | "image-store-consum" | "image-store-coviran" | "image-store-dia" | "image-store-el-corte-ingles" | "image-store-eroski" | "image-store-froiz" | "image-store-gadis" | "image-store-lidl" | "image-store-mercadona">;
|
|
1541
|
+
protected readonly src: _angular_core.Signal<"assets/loro-ui/images/al-loro-design-library-home-ai.png" | "assets/loro-ui/favicons/apple-touch-icon.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Any.png" | "assets/loro-ui/favicons/Assets.xcassets/AppIcon.appiconset/AppIcon-Dark.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-2732x2732-2.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-1.png" | "assets/loro-ui/favicons/Assets.xcassets/Splash.imageset/splash-dark-2732x2732-2.png" | "assets/loro-ui/favicons/favicon.svg" | "assets/loro-ui/images/home-icon-ai.svg" | "assets/loro-ui/images/home-icon-basket.svg" | "assets/loro-ui/images/home-icon-compare.svg" | "assets/loro-ui/images/home-icon-expiry.svg" | "assets/loro-ui/images/home-icon-pantry.svg" | "assets/loro-ui/images/home-icon-scan.svg" | "assets/loro-ui/images/image-home.png" | "assets/loro-ui/images/logo-despensa-buy.png" | "assets/loro-ui/images/logo-list-buy.png" | "assets/loro-ui/images/loro-apaisado.png" | "assets/loro-ui/images/loro-apaisado-blanco.png" | "assets/loro-ui/images/loro-card-buy.png" | "assets/loro-ui/images/loro-card-caducidad.png" | "assets/loro-ui/images/loro-card-comparativa.png" | "assets/loro-ui/images/loro-card-ia.png" | "assets/loro-ui/images/loro-card-qr.png" | "assets/loro-ui/images/loro-despensa.png" | "assets/loro-ui/images/loro-icon-default.png" | "assets/loro-ui/images/loro-spinner-ring.svg" | "assets/loro-ui/images/loro-tittle-sub.png" | "assets/loro-ui/images/pantry-cabinet.svg" | "assets/loro-ui/images/pantry-metric-chart.svg" | "assets/loro-ui/images/product-bananas.svg" | "assets/loro-ui/images/product-milk.svg" | "assets/loro-ui/images/product-pasta.svg" | "assets/loro-ui/images/product-rice.svg" | "assets/loro-ui/images/product-tomatoes.svg" | "assets/loro-ui/images/product-yogurt.svg" | "assets/loro-ui/images/store-ahorramas.svg" | "assets/loro-ui/images/store-alcampo.png" | "assets/loro-ui/images/store-aldi.svg" | "assets/loro-ui/images/store-bonpreu.svg" | "assets/loro-ui/images/store-caprabo.svg" | "assets/loro-ui/images/store-carrefour.svg" | "assets/loro-ui/images/store-consum.png" | "assets/loro-ui/images/store-coviran.png" | "assets/loro-ui/images/store-dia.svg" | "assets/loro-ui/images/store-el-corte-ingles.svg" | "assets/loro-ui/images/store-eroski.png" | "assets/loro-ui/images/store-froiz.svg" | "assets/loro-ui/images/store-gadis.png" | "assets/loro-ui/images/store-lidl.svg" | "assets/loro-ui/images/store-mercadona.svg">;
|
|
1542
|
+
protected readonly altText: _angular_core.Signal<string>;
|
|
1543
|
+
protected readonly resolvedSize: _angular_core.Signal<string | null>;
|
|
1544
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroImage, never>;
|
|
1545
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroImage, "loro-image", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1873
1546
|
}
|
|
1874
1547
|
|
|
1875
|
-
export {
|
|
1876
|
-
export type { LoroAlertAnnouncement, LoroAlertVariant,
|
|
1548
|
+
export { LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_SIZES, LORO_BUTTON_VARIANTS, LORO_BUTTON_WIDTHS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroBadge, LoroButton, LoroCardSelector, LoroCheckbox, LoroDropdown, LoroFilterChip, LoroFooter, LoroHeader, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNav, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
|
|
1549
|
+
export type { LoroAlertAnnouncement, LoroAlertVariant, LoroBadgeVariant, LoroButtonIconSize, LoroButtonVariant, LoroButtonWidth, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroImageSize, LoroInputState, LoroInputUnit, LoroInputVariant, LoroNavClick, LoroNavItem, LoroNotificationItem, LoroRadioVariant, LoroSegmentedOption, LoroToastPosition, LoroToastVariant };
|