@propbinder/mobile-design 0.0.28 → 0.1.0

package/index.d.ts

@@ -3,7 +3,6 @@ import { AfterViewInit, ElementRef, OnDestroy, EventEmitter, OnInit, Application
 import { IonContent, NavController, ModalController, GestureController } from '@ionic/angular/standalone';
 import { ImpactStyle } from '@capacitor/haptics';
 import { Router, ActivatedRoute } from '@angular/router';
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { Animation } from '@ionic/angular';
 
 /**
@@ -444,7 +443,7 @@ declare class DsMobilePostCardComponent {
      * - 'detail' - Full detail view
      * - 'compact' - Compact display for nested/related posts
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "feed" | "detail">;
     /**
      * Whether the post card is clickable
      */
@@ -944,7 +943,7 @@ declare class DsMobileListItemComponent {
      * - 'detail' - Full detail view
      * - 'compact' - Compact display for nested/related items
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "feed" | "detail">;
     /**
      * Whether the list item is interactive (clickable and long-pressable)
      * When true, adds interactive background, cursor pointer, and touch handlers
@@ -1046,57 +1045,6 @@ declare class DsMobileListItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemComponent, "ds-mobile-list-item", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; "showDesktopMoreButton": { "alias": "showDesktopMoreButton"; "required": false; "isSignal": true; }; "interactiveOffset": { "alias": "interactiveOffset"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showDivider": { "alias": "showDivider"; "required": false; "isSignal": true; }; "dividerSpacing": { "alias": "dividerSpacing"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; "moreButtonClick": "moreButtonClick"; }, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, [{ directive: typeof DsMobileLongPressDirective; inputs: {}; outputs: { "longPress": "longPress"; }; }]>;
 }
 
-/**
- * DsMobileListItemStaticComponent
- *
- * A read-only version of the interactive list item component.
- * Used for displaying static information without interaction.
- *
- * This component has the same structure as the interactive list item but without:
- * - Padding
- * - Rounded corners
- * - Hover states
- * - Click interactions
- * - Background fill (transparent)
- *
- * @example
- * ```html
- * <ds-mobile-list-item-static
- *   [leadingSize]="'40px'">
- *
- *   <div content-leading>
- *     <ds-avatar initials="JD" />
- *   </div>
- *
- *   <div content-main>
- *     <h3>Main Content</h3>
- *     <p>Supporting text goes here...</p>
- *   </div>
- *
- *   <div content-trailing>
- *     <span>Info</span>
- *   </div>
- * </ds-mobile-list-item-static>
- * ```
- */
-declare class DsMobileListItemStaticComponent {
-    /**
-     * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
-     * Defaults to '32px' for standard list item avatars
-     */
-    leadingSize: _angular_core.InputSignal<string>;
-    /**
-     * Check if leading content slot has content
-     */
-    hasLeadingContent: _angular_core.Signal<boolean>;
-    /**
-     * Check if trailing content slot has content
-     */
-    hasTrailingContent: _angular_core.Signal<boolean>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileListItemStaticComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileListItemStaticComponent, "ds-mobile-list-item-static", never, { "leadingSize": { "alias": "leadingSize"; "required": false; "isSignal": true; }; }, {}, never, ["[content-leading]", "[content-main]", "*", "[content-trailing]"], true, never>;
-}
-
 /**
  * DsMobileInteractiveListItemPostComponent
  *
@@ -1165,7 +1113,7 @@ declare class DsMobileInteractiveListItemPostComponent {
      * - 'detail' - Full detail view
      * - 'compact' - Compact display for nested/related posts
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "feed" | "detail">;
     /**
      * Whether the post card is clickable
      */
@@ -1270,7 +1218,7 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * - 'detail' - Full detail view
      * - 'compact' - Compact display
      */
-    variant: _angular_core.InputSignal<"feed" | "detail" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "feed" | "detail">;
     /**
      * Whether the inquiry item is clickable
      */
@@ -1419,81 +1367,63 @@ declare class DsMobileContactListItemComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileContactListItemComponent, "ds-mobile-contact-list-item", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "initials": { "alias": "initials"; "required": true; "isSignal": true; }; "contactPerson": { "alias": "contactPerson"; "required": false; "isSignal": true; }; "phoneNumber": { "alias": "phoneNumber"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "contactClick": "contactClick"; }, never, never, true, never>;
 }
 
-interface TabConfig$2 {
+interface TabConfig$1 {
     id: string;
     label: string;
     route: string;
     icon: string;
     iconActive: string;
 }
-type HeaderVariant = 'home' | 'simple' | 'back' | 'none';
 /**
- * DsMobileAppLayoutComponent
+ * DsMobileTabBarComponent
  *
- * A complete mobile application shell component based on actual mobile page patterns.
- * Provides tab navigation, flexible headers, and mobile-optimized layout.
+ * Responsive navigation tab bar that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
  *
- * Features:
- * - Tab bar navigation with active state
- * - Multiple header variants (home with logomark, simple title, back button)
- * - Pull-to-refresh support
- * - Purple brand background with content wrapper
- * - iOS safe area support
+ * Use this component INSIDE your own `ion-tabs` when Angular routing
+ * requires `ion-tabs` to be a direct child in your component.
  *
  * @example
  * ```html
- * <ds-mobile-app-layout
- *   [showTabBar]="true"
- *   [tabs]="tabsConfig"
- *   [headerVariant]="'home'"
- *   [avatarInitials]="'JD'"
- * />
+ * <!-- In your component with child routes -->
+ * <ion-tabs>
+ *   <ds-mobile-tab-bar
+ *     [tabs]="tabs"
+ *     [avatarInitials]="'JD'"
+ *     (avatarClick)="handleAvatarClick()"
+ *   />
+ * </ion-tabs>
  * ```
  */
-declare class DsMobileAppLayoutComponent implements AfterViewInit {
-    private router;
+declare class DsMobileTabBarComponent implements OnInit, AfterViewInit, OnDestroy {
     private elementRef;
-    private breakpointObserver;
-    ionContent: IonContent;
-    private platform;
-    isNativePlatform: _angular_core.Signal<boolean>;
-    headerVariant: _angular_core.InputSignal<HeaderVariant>;
-    pageTitle: _angular_core.InputSignal<string>;
-    showBackButton: _angular_core.InputSignal<boolean>;
-    showPullToRefresh: _angular_core.InputSignal<boolean>;
-    showTabBar: _angular_core.InputSignal<boolean>;
-    tabs: _angular_core.InputSignal<TabConfig$2[]>;
-    avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
-    avatarInitials: _angular_core.InputSignal<string>;
-    avatarSrc: _angular_core.InputSignal<string>;
-    avatarIconName: _angular_core.InputSignal<string>;
-    backClick: _angular_core.OutputEmitterRef<void>;
-    refresh: _angular_core.OutputEmitterRef<any>;
-    avatarClick: _angular_core.OutputEmitterRef<void>;
-    scroll: _angular_core.OutputEmitterRef<any>;
-    private scrollY;
+    tabs: TabConfig$1[];
+    avatarType: 'initials' | 'photo' | 'icon';
+    avatarInitials: string;
+    avatarSrc: string;
+    avatarIconName: string;
+    avatarClick: EventEmitter<void>;
     activeTab: _angular_core.WritableSignal<string>;
     isDesktop: _angular_core.WritableSignal<boolean>;
-    constructor(router: Router, elementRef: ElementRef, breakpointObserver: BreakpointObserver);
+    private mutationObserver?;
+    private resizeObserver?;
+    private mediaQuery?;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
     ngAfterViewInit(): void;
-    handleScroll(event: any): void;
-    handleRefresh(event: any): Promise<void>;
-    handleBackClick(): void;
-    handleAvatarClick(): void;
-    navigateToTab(route: string): void;
-    private ensureScrollable;
+    ngOnDestroy(): void;
+    private setupBreakpointDetection;
+    private handleBreakpointChange;
+    private setupTitleRemovalObserver;
+    private removeTitleAttributes;
+    trackByTabId(index: number, tab: TabConfig$1): string;
     isTabActive(tabId: string): boolean;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileAppLayoutComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileAppLayoutComponent, "ds-mobile-app-layout", never, { "headerVariant": { "alias": "headerVariant"; "required": false; "isSignal": true; }; "pageTitle": { "alias": "pageTitle"; "required": false; "isSignal": true; }; "showBackButton": { "alias": "showBackButton"; "required": false; "isSignal": true; }; "showPullToRefresh": { "alias": "showPullToRefresh"; "required": false; "isSignal": true; }; "showTabBar": { "alias": "showTabBar"; "required": false; "isSignal": true; }; "tabs": { "alias": "tabs"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; }, { "backClick": "backClick"; "refresh": "refresh"; "avatarClick": "avatarClick"; "scroll": "scroll"; }, never, ["*"], true, never>;
+    handleAvatarClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabBarComponent, "ds-mobile-tab-bar", never, { "tabs": { "alias": "tabs"; "required": false; }; "avatarType": { "alias": "avatarType"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
 }
 
-interface TabConfig$1 {
-    id: string;
-    label: string;
-    route: string;
-    icon: string;
-    iconActive: string;
-}
 /**
  * DsMobileTabsComponent
  *
@@ -1504,6 +1434,11 @@ interface TabConfig$1 {
  * Wraps ion-tabs to maintain native routing functionality while
  * providing a responsive navigation experience with branding.
  *
+ * NOTE: This component wraps `ion-tabs` internally. If your Angular
+ * routing requires `ion-tabs` to be a direct child in your component
+ * (e.g., when using `ion-router-outlet` in app.html), use the
+ * `DsMobileTabBarComponent` directly inside your own `ion-tabs` instead.
+ *
  * @example
  * ```html
  * <ds-mobile-tabs
@@ -1513,44 +1448,35 @@ interface TabConfig$1 {
  * />
  * ```
  */
-declare class DsMobileTabsComponent implements OnInit, AfterViewInit {
-    private elementRef;
+declare class DsMobileTabsComponent implements OnInit {
     tabs: TabConfig$1[];
     avatarType: 'initials' | 'photo' | 'icon';
     avatarInitials: string;
     avatarSrc: string;
     avatarIconName: string;
     avatarClick: EventEmitter<void>;
-    activeTab: _angular_core.WritableSignal<string>;
-    isDesktop: _angular_core.WritableSignal<boolean>;
-    private mutationObserver?;
-    constructor(elementRef: ElementRef);
+    constructor();
     ngOnInit(): void;
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private setupTitleRemovalObserver;
-    private removeTitleAttributes;
     trackByTabId(index: number, tab: TabConfig$1): string;
-    isTabActive(tabId: string): boolean;
     handleAvatarClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabsComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabsComponent, "ds-mobile-tabs", never, { "tabs": { "alias": "tabs"; "required": false; }; "avatarType": { "alias": "avatarType"; "required": false; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; }; }, { "avatarClick": "avatarClick"; }, never, never, true, never>;
 }
 
-interface TabItem {
+interface InlineTabItem {
     id: string;
     label: string;
     badge?: number;
 }
 /**
- * DsMobileTabBarComponent
+ * DsMobileInlineTabsComponent
  *
- * Pill-style tab bar for filtering/switching views
+ * Pill-style inline tabs for filtering/switching views
  * Used in the purple header section of pages
  *
  * @example
  * ```html
- * <ds-mobile-tab-bar
+ * <ds-mobile-inline-tabs
  *   [tabs]="[
  *     { id: 'all', label: 'All' },
  *     { id: 'open', label: 'Open' },
@@ -1558,14 +1484,14 @@ interface TabItem {
  *   ]"
  *   [activeTab]="'all'"
  *   (tabChange)="handleTabChange($event)">
- * </ds-mobile-tab-bar>
+ * </ds-mobile-inline-tabs>
  * ```
  */
-declare class DsMobileTabBarComponent {
+declare class DsMobileInlineTabsComponent {
     /**
      * Array of tab items to display
      */
-    tabs: _angular_core.InputSignal<TabItem[]>;
+    tabs: _angular_core.InputSignal<InlineTabItem[]>;
     /**
      * Currently active tab ID
      */
@@ -1575,8 +1501,8 @@ declare class DsMobileTabBarComponent {
      */
     tabChange: _angular_core.OutputEmitterRef<string>;
     handleTabClick(tabId: string): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabBarComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileTabBarComponent, "ds-mobile-tab-bar", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInlineTabsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInlineTabsComponent, "ds-mobile-inline-tabs", never, { "tabs": { "alias": "tabs"; "required": true; "isSignal": true; }; "activeTab": { "alias": "activeTab"; "required": true; "isSignal": true; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
 }
 
 interface ActionResult {
@@ -2761,55 +2687,6 @@ interface ContactItem {
     contactPerson?: string;
     phoneNumber?: string;
 }
-/**
- * DsMobileHandbookDetailModalComponent
- *
- * Modal wrapper for displaying handbook folder details.
- *
- * Features:
- * - Folder content display
- * - Items list with descriptions
- * - Images and attachments
- * - Contact information
- * - Native modal controls (close, swipe down)
- * - Safe area support
- *
- * This component is typically not used directly - use DsMobileHandbookDetailModalService instead.
- */
-declare class DsMobileHandbookDetailModalComponent {
-    private modalController;
-    handbookData: HandbookDetailData;
-    handbook: _angular_core.WritableSignal<HandbookDetailData>;
-    constructor(modalController: ModalController);
-    ngOnInit(): void;
-    /**
-     * Split handbook items to enforce content structure rules:
-     * - Never mix photos and documents (attachments) in the same section
-     * - Never mix contact persons and attachments together in the same section
-     *
-     * This method splits items that violate these rules into multiple display items.
-     * Each resulting item will have only compatible content types.
-     */
-    splitItemsByContentRules(item: HandbookItem): HandbookItem[];
-    /**
-     * Get all display items with enforced content structure rules applied
-     */
-    getDisplayItems(): HandbookItem[];
-    /**
-     * Close the modal
-     */
-    close(): void;
-    /**
-     * Handle contact click
-     */
-    handleContactClick(contact: ContactItem): void;
-    /**
-     * Handle attachment click
-     */
-    handleAttachmentClick(attachment: AttachmentItem): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileHandbookDetailModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookDetailModalComponent, "ds-mobile-handbook-detail-modal", never, { "handbookData": { "alias": "handbookData"; "required": false; }; }, {}, never, never, true, never>;
-}
 
 /**
  * DsMobileHandbookDetailModalService
@@ -3092,8 +2969,8 @@ declare class MobileInquiriesPageComponent {
     userService: UserService;
     private navCtrl;
     constructor(userService: UserService, navCtrl: NavController);
-    filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
-    tabItems: TabItem[];
+    filterStatus: _angular_core.WritableSignal<"all" | "open" | "closed">;
+    tabItems: InlineTabItem[];
     inquiries: _angular_core.WritableSignal<Inquiry[]>;
     filteredInquiries: _angular_core.Signal<Inquiry[]>;
     openInquiries: _angular_core.Signal<Inquiry[]>;
@@ -3137,7 +3014,7 @@ declare class MobileInquiryDetailPageComponent extends MobilePageBase implements
     isNativePlatform: _angular_core.Signal<boolean>;
     inquiryTitle: string;
     activeTab: _angular_core.WritableSignal<string>;
-    tabItems: TabItem[];
+    tabItems: InlineTabItem[];
     activities: ActivityItem[];
     messageThreads: MessageThread[];
     unreadMessagesCount: _angular_core.Signal<number>;
@@ -3164,6 +3041,7 @@ declare class MobileTabsExampleComponent implements OnInit {
     userService: UserService;
     private modalController;
     private router;
+    private whitelabelDemoModal;
     constructor(userService: UserService, modalController: ModalController, router: Router);
     ngOnInit(): void;
     tabs: TabConfig[];
@@ -3228,8 +3106,10 @@ interface WhitelabelConfig {
     logoHeight?: number;
     logoMarkWidth?: number;
     logoMarkHeight?: number;
-    primaryColor: string;
-    secondaryColor: string;
+    primarySurface: string;
+    primaryContent: string;
+    secondarySurface: string;
+    secondaryContent: string;
     organizationName: string;
     organizationId: string;
 }
@@ -3258,13 +3138,16 @@ interface WhitelabelConfig {
  */
 declare class WhitelabelService {
     private _config;
-    readonly logoUrl: () => string;
-    readonly logoMarkUrl: () => string;
-    readonly logoAlt: () => string;
-    readonly primaryColor: () => string;
-    readonly secondaryColor: () => string;
-    readonly organizationName: () => string;
-    readonly organizationId: () => string;
+    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();
     /**
@@ -3286,16 +3169,32 @@ declare class WhitelabelService {
     /**
      * Update only the brand colors
      */
-    updateColors(primaryColor: string, secondaryColor: string): void;
+    updateColors(colors: {
+        primarySurface?: string;
+        primaryContent?: string;
+        secondarySurface?: string;
+        secondaryContent?: string;
+    }): void;
     /**
      * Reset to default configuration
      */
     resetToDefault(): void;
     /**
-     * Apply colors to CSS custom properties
+     * 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>;
 }
@@ -3303,24 +3202,20 @@ declare class WhitelabelService {
 /**
  * Whitelabel Demo Page
  *
- * Demonstrates the whitelabeling system with live color and logo switching.
+ * Demonstrates the whitelabeling system with theme selection, brand colors, and logo previews.
  */
 declare class WhitelabelDemoPage implements OnInit {
     whitelabelService: WhitelabelService;
-    customPrimaryColor: string;
-    customSecondaryColor: string;
-    uploadedFullLogoName: string;
-    uploadedLogomarkName: string;
+    currentTheme: string;
+    customPrimarySurface: string;
+    customPrimaryContent: string;
+    customSecondarySurface: string;
+    customSecondaryContent: string;
     ngOnInit(): void;
-    handleFullLogoUpload(event: Event): void;
-    handleLogomarkUpload(event: Event): void;
-    resetFullLogo(): void;
-    resetLogomark(): void;
-    configJson(): string;
     applyDefaultTheme(): void;
-    applyBlueTheme(): void;
-    applyGreenTheme(): void;
-    applyOrangeTheme(): void;
+    applyCejTheme(): void;
+    applyPkaTheme(): void;
+    applyClaveTheme(): void;
     applyCustomColors(): void;
     private updateCustomColorInputs;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoPage, never>;
@@ -3346,5 +3241,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoPage, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AttachmentItem, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, HandbookDetailData, HandbookItem, HeaderVariant, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig$1 as TabConfig, TabItem };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabBarComponent, DsMobileTabsComponent, 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, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContentWidth, InlineTabItem, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig$1 as TabConfig, WhitelabelConfig };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.0.28",
+  "version": "0.1.0",
   "peerDependencies": {
     "@angular/common": "^20.3.0 || ^21.0.0",
     "@angular/core": "^20.3.0 || ^21.0.0"
@@ -28,6 +28,15 @@
     "./styles/globals.css": {
       "default": "./styles/globals.css"
     },
+    "./styles/ionic.css": {
+      "default": "./styles/ionic.css"
+    },
+    "./styles/mobile-common.css": {
+      "default": "./styles/mobile-common.css"
+    },
+    "./styles/mobile-page-base.css": {
+      "default": "./styles/mobile-page-base.css"
+    },
     "./ui/*": {
       "default": "./ui/*"
     },