@juligc99/loro-ui 0.0.16 → 0.0.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juligc99/loro-ui",
-  "version": "0.0.16",
+  "version": "0.0.17",
   "description": "Loro UI design system and Angular component library.",
   "author": "juligc99",
   "license": "MIT",

package/types/juligc99-loro-ui.d.ts

@@ -1183,34 +1183,61 @@ declare class LoroBadge {
     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>;
 }
 
-type LoroCardVariant = 'default' | 'tinted' | 'danger' | 'selectable' | 'benefit' | 'benefit-showcase' | 'home-hero' | 'home-primary' | 'home-secondary';
+type LoroCardVariant = 'default' | 'tinted' | 'danger' | 'selectable';
+type LoroCardBenefitVariant = 'benefit' | 'benefit-showcase';
+type LoroCardLinkVariant = 'primary' | 'secondary' | 'hero';
 type LoroCardJustify = 'start' | 'center' | 'end';
-declare class LoroCard {
-    title: _angular_core.InputSignal<string>;
-    description: _angular_core.InputSignal<string>;
-    icon: _angular_core.InputSignal<LoroIconName | null>;
-    iconSize: _angular_core.InputSignal<number>;
-    iconColor: _angular_core.InputSignal<string>;
-    link: _angular_core.InputSignal<string>;
-    variant: _angular_core.InputSignal<LoroCardVariant>;
-    justify: _angular_core.InputSignal<LoroCardJustify>;
-    mobileJustify: _angular_core.InputSignal<LoroCardJustify>;
-    selected: _angular_core.InputSignal<boolean>;
-    showArrow: _angular_core.InputSignal<boolean>;
-    arrowSize: _angular_core.InputSignal<number>;
-    heroGreeting: _angular_core.InputSignal<string>;
-    heroSubtitle: _angular_core.InputSignal<string>;
-    heroAvatarSrc: _angular_core.InputSignal<string | null>;
-    heroAvatarAlt: _angular_core.InputSignal<string>;
-    heroAvatarIcon: _angular_core.InputSignal<LoroIconName>;
-    heroAvatarIconSize: _angular_core.InputSignal<number>;
-    heroVisualImage: _angular_core.InputSignal<LoroImageName | null>;
-    heroVisualAlt: _angular_core.InputSignal<string>;
-    protected readonly resolvedIconSize: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCard, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCard, "loro-card", never, { "title": { "alias": "title"; "required": false; "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; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "mobileJustify": { "alias": "mobileJustify"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; "arrowSize": { "alias": "arrowSize"; "required": false; "isSignal": true; }; "heroGreeting": { "alias": "heroGreeting"; "required": false; "isSignal": true; }; "heroSubtitle": { "alias": "heroSubtitle"; "required": false; "isSignal": true; }; "heroAvatarSrc": { "alias": "heroAvatarSrc"; "required": false; "isSignal": true; }; "heroAvatarAlt": { "alias": "heroAvatarAlt"; "required": false; "isSignal": true; }; "heroAvatarIcon": { "alias": "heroAvatarIcon"; "required": false; "isSignal": true; }; "heroAvatarIconSize": { "alias": "heroAvatarIconSize"; "required": false; "isSignal": true; }; "heroVisualImage": { "alias": "heroVisualImage"; "required": false; "isSignal": true; }; "heroVisualAlt": { "alias": "heroVisualAlt"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+type LoroCardBenefitIconName = LoroIconName;
+type LoroCardBenefitIconColor = LoroIconColorToken;
+type LoroCardBenefitIconSize = 12 | 14 | 16 | 18 | 20 | 22 | 24 | 28 | 32;
+type LoroCardLinkAvatarSize = LoroCardBenefitIconSize;
+type LoroCardHomeVariant = LoroCardLinkVariant;
+
+declare class LoroCardBenefit {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconName | null>;
+    readonly iconSize: _angular_core.InputSignal<LoroCardBenefitIconSize>;
+    readonly iconColor: _angular_core.InputSignal<_juligc99_loro_ui.LoroIconColorToken>;
+    protected readonly hasIcon: _angular_core.Signal<boolean>;
+    protected readonly hasDescription: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardBenefit, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LoroCardBenefit, "loro-card-benefit", 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; }; }, {}, never, never, true, never>;
+}
+
+declare class LoroCardNavigation {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly description: _angular_core.InputSignal<string>;
+    readonly icon: _angular_core.InputSignal<LoroIconName | null>;
+    readonly iconSize: _angular_core.InputSignal<number>;
+    readonly iconColor: _angular_core.InputSignal<string>;
+    readonly link: _angular_core.InputSignal<string>;
+    readonly disabled: _angular_core.InputSignal<boolean>;
+    readonly showArrow: _angular_core.InputSignal<boolean>;
+    readonly arrowSize: _angular_core.InputSignal<number>;
+    protected readonly hasDescription: _angular_core.Signal<boolean>;
+    protected readonly isInteractive: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardNavigation, never>;
+    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>;
 }
 
+declare class LoroCardLink {
+    readonly title: _angular_core.InputSignal<string>;
+    readonly subtitle: _angular_core.InputSignal<string>;
+    readonly avatarImage: _angular_core.InputSignal<string | null>;
+    readonly iconSize: _angular_core.InputSignal<_juligc99_loro_ui.LoroCardBenefitIconSize>;
+    readonly illustration: _angular_core.InputSignal<LoroImageName | null>;
+    protected readonly avatarLoadFailed: _angular_core.WritableSignal<boolean>;
+    protected readonly shouldShowAvatarImage: _angular_core.Signal<boolean>;
+    protected onAvatarImageError(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LoroCardLink, never>;
+    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>;
+}
+
+declare const LoroCardDefaultIconSize = 28;
+declare const LoroCardDefaultArrowSize = 16;
+declare const LoroCardDefaultHeroAvatarIconSize = 22;
+
 type LoroCardNavVariant = 'default' | 'danger' | 'soft';
 type LoroCardNavTrailing = 'arrow' | 'toggle' | 'radio' | 'text' | 'badge' | 'none';
 declare class LoroCardNav {
@@ -1845,5 +1872,5 @@ declare class LoroHapticsService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<LoroHapticsService>;
 }
 
-export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCard, LoroCardNav, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
-export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardJustify, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };
+export { Footer, LORO_BUTTON_CLASSES, LORO_BUTTON_COLORS, LORO_BUTTON_DEFAULTS, LORO_BUTTON_ICON_MODES, LORO_BUTTON_SIZES, LORO_BUTTON_TYPES, LORO_BUTTON_VARIANTS, LORO_ICON_ASSETS, LORO_ICON_LEGACY_NAMES, LORO_ICON_PATHS, LORO_IMAGE_ASSETS, LORO_IMAGE_LEGACY_NAMES, LORO_IMAGE_PATHS, LoroAccordion, LoroAlert, LoroAppNav, LoroAssistantCard, LoroAuthField, LoroAuthSocialButton, LoroBadge, LoroButton, LoroCardBenefit, LoroCardDefaultArrowSize, LoroCardDefaultHeroAvatarIconSize, LoroCardDefaultIconSize, LoroCardLink, LoroCardNav, LoroCardNavigation, LoroCheckbox, LoroDashboardCard, LoroDivider, LoroDropdown, LoroFilterChip, LoroHapticsService, LoroIcon, LoroImage, LoroInput, LoroModal, LoroNotification, LoroNotificationPanel, LoroNotificationRow, LoroProductRow, LoroProductSection, LoroProfileCard, LoroProfileHero, LoroRadio, LoroSegmentedControl, LoroSelect, LoroSpinner, LoroStatCard, LoroStoreRankCard, LoroSummaryBar, LoroTab, LoroTextArea, LoroToast, LoroToggle, LoroUpload };
+export type { LoroAlertAnnouncement, LoroAlertVariant, LoroAppNavClick, LoroAppNavItem, LoroAuthFieldState, LoroBadgeVariant, LoroButtonColor, LoroButtonHtmlType, LoroButtonIconMode, LoroButtonSize, LoroButtonType, LoroButtonVariant, LoroButtonWidth, LoroCardBenefitIconColor, LoroCardBenefitIconName, LoroCardBenefitIconSize, LoroCardBenefitVariant, LoroCardHomeVariant, LoroCardJustify, LoroCardLinkAvatarSize, LoroCardLinkVariant, LoroCardNavTrailing, LoroCardNavVariant, LoroCardVariant, LoroDividerAlign, LoroDropdownOption, LoroIconAsset, LoroIconAssetName, LoroIconColor, LoroIconColorToken, LoroIconLegacyName, LoroIconName, LoroIconRenderMode, LoroIconSize, LoroImageAsset, LoroImageAssetName, LoroImageLegacyName, LoroImageName, LoroInputState, LoroInputUnit, LoroInputVariant, LoroModalPlacement, LoroModalSize, LoroNotificationItem, LoroProductRowStatus, LoroProductRowVariant, LoroRadioVariant, LoroSegmentedOption, LoroStatCardVariant, LoroStoreRankCardVariant, LoroTabAlign, LoroTabOption, LoroToastPosition, LoroToastVariant };