@propbinder/mobile-design 0.2.1 → 0.2.3

package/index.d.ts

@@ -1311,7 +1311,7 @@ declare class DsMobileListItemComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    align: _angular_core.InputSignal<"top" | "center" | "bottom">;
     /**
      * Whether the list item is interactive (clickable and long-pressable)
      * When true, adds interactive background, cursor pointer, and touch handlers
@@ -1397,7 +1397,7 @@ declare class DsMobileListItemComponent {
     /**
      * Handle keyboard events (Enter/Space)
      */
-    handleKeyDown(event: KeyboardEvent): void;
+    handleKeyDown(event: Event): void;
     /**
      * Handle long press events from the directive
      * Set the flag to prevent the subsequent click event
@@ -3841,6 +3841,140 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsTextInputComponent, "ds-text-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "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; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "autocomplete": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "inputmode": { "alias": "inputmode"; "required": false; "isSignal": true; }; "autoClearError": { "alias": "autoClearError"; "required": false; "isSignal": true; }; "validator": { "alias": "validator"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "blur": "blur"; "focus": "focus"; "errorCleared": "errorCleared"; }, never, never, true, never>;
 }
 
+interface WhitelabelConfig {
+    logoUrl: string;
+    logoMarkUrl: string;
+    logoAlt: string;
+    logoWidth?: number;
+    logoHeight?: number;
+    logoMarkWidth?: number;
+    logoMarkHeight?: number;
+    primarySurface: string;
+    primaryContent: string;
+    secondarySurface: string;
+    secondaryContent: string;
+    organizationName: string;
+    organizationId: string;
+}
+/**
+ * WhitelabelService
+ *
+ * Manages whitelabel configuration including logos and brand colors.
+ * Automatically updates CSS custom properties when colors change.
+ *
+ * @example
+ * Initialize with custom config:
+ * ```typescript
+ * whitelabelService.initialize({
+ *   logoUrl: '/Assets/logos/acme-logo.svg',
+ *   logoMarkUrl: '/Assets/logos/acme-mark.svg',
+ *   primaryColor: '#2563eb',
+ *   secondaryColor: '#3b82f6',
+ *   organizationName: 'Acme Corp'
+ * });
+ * ```
+ *
+ * Load from API:
+ * ```typescript
+ * await whitelabelService.loadFromApi('acme-corp');
+ * ```
+ */
+declare class WhitelabelService {
+    private _config;
+    readonly logoUrl: _angular_core.Signal<string>;
+    readonly logoMarkUrl: _angular_core.Signal<string>;
+    readonly logoAlt: _angular_core.Signal<string>;
+    readonly logoHeight: _angular_core.Signal<number>;
+    readonly primarySurface: _angular_core.Signal<string>;
+    readonly primaryContent: _angular_core.Signal<string>;
+    readonly secondarySurface: _angular_core.Signal<string>;
+    readonly secondaryContent: _angular_core.Signal<string>;
+    readonly organizationName: _angular_core.Signal<string>;
+    readonly organizationId: _angular_core.Signal<string>;
+    readonly config: _angular_core.Signal<WhitelabelConfig>;
+    constructor();
+    /**
+     * Initialize whitelabel configuration
+     * Call this early in app initialization (app.config.ts or app.component.ts)
+     */
+    initialize(config: Partial<WhitelabelConfig>): void;
+    /**
+     * Load whitelabel config from API
+     * Typically called on app startup based on subdomain, user tenant, etc.
+     *
+     * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
+     */
+    loadFromApi(organizationId?: string): Promise<void>;
+    /**
+     * Update config dynamically (e.g., when user switches organizations)
+     */
+    updateConfig(updates: Partial<WhitelabelConfig>): void;
+    /**
+     * Update only the brand colors
+     */
+    updateColors(colors: {
+        primarySurface?: string;
+        primaryContent?: string;
+        secondarySurface?: string;
+        secondaryContent?: string;
+    }): void;
+    /**
+     * Reset to default configuration
+     */
+    resetToDefault(): void;
+    /**
+     * Convert hex color to RGB values
+     */
+    private hexToRgb;
+    /**
+     * Apply colors to CSS custom properties and native StatusBar
+     * This updates the actual CSS variables used throughout the app
+     * and the native status bar color on mobile devices
+     */
+    private applyColors;
+    /**
+     * Update the native status bar color
+     * Note: This only works on Android. On iOS, the status bar is transparent
+     * and shows the web content behind it (controlled by CSS variables)
+     */
+    private updateNativeStatusBar;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelService>;
+}
+
+type AvatarType = 'initials' | 'photo' | 'icon';
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type BadgePosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+/**
+ * DsAvatarWithBadgeComponent
+ *
+ * Displays an avatar with a logomark badge overlay.
+ * Useful for showing user avatars with organization branding.
+ *
+ * @example
+ * ```html
+ * <ds-avatar-with-badge
+ *   [type]="'initials'"
+ *   [initials]="'JD'"
+ *   [size]="'lg'"
+ *   [badgePosition]="'bottom-right'"
+ * />
+ * ```
+ */
+declare class DsAvatarWithBadgeComponent {
+    whitelabelService: WhitelabelService;
+    type: AvatarType;
+    size: AvatarSize;
+    initials: string;
+    src: string;
+    iconName: string;
+    showBadge: boolean;
+    badgePosition: BadgePosition;
+    badgeClasses: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsAvatarWithBadgeComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsAvatarWithBadgeComponent, "ds-avatar-with-badge", never, { "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "initials": { "alias": "initials"; "required": false; }; "src": { "alias": "src"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; }; "badgePosition": { "alias": "badgePosition"; "required": false; }; }, {}, never, never, true, never>;
+}
+
 /**
  * User service for managing current user data globally
  */
@@ -4087,107 +4221,6 @@ declare class MobilePostDetailPageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobilePostDetailPageComponent, "app-mobile-post-detail-page", never, {}, {}, never, never, true, never>;
 }
 
-interface WhitelabelConfig {
-    logoUrl: string;
-    logoMarkUrl: string;
-    logoAlt: string;
-    logoWidth?: number;
-    logoHeight?: number;
-    logoMarkWidth?: number;
-    logoMarkHeight?: number;
-    primarySurface: string;
-    primaryContent: string;
-    secondarySurface: string;
-    secondaryContent: string;
-    organizationName: string;
-    organizationId: string;
-}
-/**
- * WhitelabelService
- *
- * Manages whitelabel configuration including logos and brand colors.
- * Automatically updates CSS custom properties when colors change.
- *
- * @example
- * Initialize with custom config:
- * ```typescript
- * whitelabelService.initialize({
- *   logoUrl: '/Assets/logos/acme-logo.svg',
- *   logoMarkUrl: '/Assets/logos/acme-mark.svg',
- *   primaryColor: '#2563eb',
- *   secondaryColor: '#3b82f6',
- *   organizationName: 'Acme Corp'
- * });
- * ```
- *
- * Load from API:
- * ```typescript
- * await whitelabelService.loadFromApi('acme-corp');
- * ```
- */
-declare class WhitelabelService {
-    private _config;
-    readonly logoUrl: _angular_core.Signal<string>;
-    readonly logoMarkUrl: _angular_core.Signal<string>;
-    readonly logoAlt: _angular_core.Signal<string>;
-    readonly logoHeight: _angular_core.Signal<number>;
-    readonly primarySurface: _angular_core.Signal<string>;
-    readonly primaryContent: _angular_core.Signal<string>;
-    readonly secondarySurface: _angular_core.Signal<string>;
-    readonly secondaryContent: _angular_core.Signal<string>;
-    readonly organizationName: _angular_core.Signal<string>;
-    readonly organizationId: _angular_core.Signal<string>;
-    readonly config: _angular_core.Signal<WhitelabelConfig>;
-    constructor();
-    /**
-     * Initialize whitelabel configuration
-     * Call this early in app initialization (app.config.ts or app.component.ts)
-     */
-    initialize(config: Partial<WhitelabelConfig>): void;
-    /**
-     * Load whitelabel config from API
-     * Typically called on app startup based on subdomain, user tenant, etc.
-     *
-     * @param organizationId - The organization identifier (subdomain, tenant ID, etc.)
-     */
-    loadFromApi(organizationId?: string): Promise<void>;
-    /**
-     * Update config dynamically (e.g., when user switches organizations)
-     */
-    updateConfig(updates: Partial<WhitelabelConfig>): void;
-    /**
-     * Update only the brand colors
-     */
-    updateColors(colors: {
-        primarySurface?: string;
-        primaryContent?: string;
-        secondarySurface?: string;
-        secondaryContent?: string;
-    }): void;
-    /**
-     * Reset to default configuration
-     */
-    resetToDefault(): void;
-    /**
-     * Convert hex color to RGB values
-     */
-    private hexToRgb;
-    /**
-     * Apply colors to CSS custom properties and native StatusBar
-     * This updates the actual CSS variables used throughout the app
-     * and the native status bar color on mobile devices
-     */
-    private applyColors;
-    /**
-     * Update the native status bar color
-     * Note: This only works on Android. On iOS, the status bar is transparent
-     * and shows the web content behind it (controlled by CSS variables)
-     */
-    private updateNativeStatusBar;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelService>;
-}
-
 /**
  * Whitelabel Demo Page
  *
@@ -4231,5 +4264,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAvatarWithBadgeComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, WhitelabelService, customBackTransition, customPageTransition };
+export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.2.01",
+  "version": "0.2.03",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"