@propbinder/mobile-design 0.2.11 → 0.2.12

package/index.d.ts

@@ -5,6 +5,8 @@ import { ImpactStyle } from '@capacitor/haptics';
 import { DsTextareaComponent } from '@propbinder/design-system';
 import { ControlValueAccessor } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
+import * as rxjs from 'rxjs';
+import * as _propbinder_mobile_design from '@propbinder/mobile-design';
 import { Animation } from '@ionic/angular';
 
 /**
@@ -1872,7 +1874,7 @@ declare class DsMobileListItemComponent {
      * - 'center' - Align to center
      * - 'bottom' - Align to bottom
      */
-    align: _angular_core.InputSignal<"top" | "bottom" | "center">;
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
     /**
      * Whether the list item is interactive (clickable and long-pressable)
      * When true, adds interactive background, cursor pointer, and touch handlers
@@ -2041,6 +2043,7 @@ declare class DsMobileListItemStaticComponent {
  *   [timestamp]="'2h ago'"
  *   [avatarInitials]="'JD'"
  *   [clickable]="true"
+ *   [enableLongPress]="true"
  *   (postClick)="openPost()">
  *
  *   <post-content>
@@ -2097,6 +2100,13 @@ declare class DsMobileInteractiveListItemPostComponent {
      * Whether the post card is clickable
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable long-press interaction when clickable is true
+     * Set to false to disable long-press but keep click
+     * Also controls visibility of desktop "more" button
+     * @default true
+     */
+    enableLongPress: _angular_core.InputSignal<boolean>;
     /**
      * Emits when the post card is clicked (if clickable)
      */
@@ -2114,7 +2124,7 @@ declare class DsMobileInteractiveListItemPostComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemPostComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemPostComponent, "ds-mobile-interactive-list-item-post", never, { "authorName": { "alias": "authorName"; "required": true; "isSignal": true; }; "authorRole": { "alias": "authorRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "avatarInitials": { "alias": "avatarInitials"; "required": false; "isSignal": true; }; "avatarType": { "alias": "avatarType"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarIconName": { "alias": "avatarIconName"; "required": false; "isSignal": true; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "postClick": "postClick"; "commentClick": "commentClick"; "longPress": "longPress"; }, never, ["post-menu", "post-content", "post-actions"], true, never>;
 }
 /**
  * PostContentComponent
@@ -2262,6 +2272,7 @@ declare class PostPdfAttachmentComponent {
  *   [timestamp]="'12 days ago'"
  *   [iconName]="'remixCalendarLine'"
  *   [clickable]="true"
+ *   [enableLongPress]="true"
  *   (inquiryClick)="openInquiry()">
  * </ds-mobile-interactive-list-item-inquiry>
  * ```
@@ -2309,6 +2320,13 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * Whether to show chevron icon
      */
     showChevron: _angular_core.InputSignal<boolean>;
+    /**
+     * Enable long-press interaction when clickable is true
+     * Set to false to disable long-press but keep click
+     * Also controls visibility of desktop "more" button
+     * @default true
+     */
+    enableLongPress: _angular_core.InputSignal<boolean>;
     /**
      * Emits when the inquiry item is clicked (if clickable)
      */
@@ -2325,7 +2343,7 @@ declare class DsMobileInteractiveListItemInquiryComponent {
     handleLongPress(): void;
     handleMoreButtonClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemInquiryComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemInquiryComponent, "ds-mobile-interactive-list-item-inquiry", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": true; "isSignal": true; }; "iconName": { "alias": "iconName"; "required": false; "isSignal": true; }; "iconColor": { "alias": "iconColor"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "showChevron": { "alias": "showChevron"; "required": false; "isSignal": true; }; "enableLongPress": { "alias": "enableLongPress"; "required": false; "isSignal": true; }; }, { "inquiryClick": "inquiryClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -3991,7 +4009,7 @@ declare class DsMobileCardInlineComponent {
      * - 'default' - Column layout with standard padding (gap: 12px, padding: 10px 12px)
      * - 'compact' - Row layout with reduced padding (gap: 8px, padding: 10px)
      */
-    variant: _angular_core.InputSignal<"default" | "compact">;
+    variant: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Whether the card is disabled
      * Disables all interactions and reduces opacity
@@ -4054,7 +4072,7 @@ declare class DsMobileCardInlineBannerComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Emits when the banner is clicked
      */
@@ -4105,7 +4123,7 @@ declare class DsMobileCardInlineContactComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Whether the contact item is clickable
      */
@@ -4162,7 +4180,7 @@ declare class DsMobileCardInlineFileComponent {
      * - 'default' - Standard padding and column layout
      * - 'compact' - Reduced padding and row layout
      */
-    layout: _angular_core.InputSignal<"default" | "compact">;
+    layout: _angular_core.InputSignal<"compact" | "default">;
     /**
      * Optional URL to open when clicked
      * If provided, clicking the card will open this URL in a new tab
@@ -5467,6 +5485,8 @@ declare class UserService {
     readonly avatarType: _angular_core.Signal<"initials" | "photo" | "icon">;
     readonly avatarSrc: _angular_core.Signal<string>;
     readonly profileMenuItems: _angular_core.Signal<ActionGroup[] | undefined>;
+    private profileActionSelectedSubject;
+    readonly profileActionSelected$: rxjs.Observable<ActionResult>;
     /**
      * Update avatar configuration
      */
@@ -5479,6 +5499,10 @@ declare class UserService {
      * if they don't receive profileMenuItems as an input.
      */
     setProfileMenuItems(items: ActionGroup[]): void;
+    /**
+     * Notify subscribers that a profile action was selected
+     */
+    notifyProfileAction(result: ActionResult): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserService, never>;
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<UserService>;
 }
@@ -5592,6 +5616,7 @@ declare class MobileCommunityPageComponent {
     userService: UserService;
     private postsService;
     allPosts: _angular_core.Signal<Post[]>;
+    pinnedPosts: _angular_core.Signal<Post[]>;
     hasAnyPosts: _angular_core.Signal<boolean>;
     hasMorePosts: _angular_core.Signal<boolean>;
     constructor(router: Router, route: ActivatedRoute, bottomSheet: DsMobileBottomSheetService, lightbox: DsMobileLightboxService, postModal: DsMobilePostDetailModalService, userService: UserService, postsService: PostsService);
@@ -5634,13 +5659,25 @@ declare class MobileHandbookPageComponent {
 }
 
 declare class MobileHomePageComponent {
-    private navCtrl;
+    private router;
     userService: UserService;
-    constructor(navCtrl: NavController, userService: UserService);
+    private postsService;
+    private postModal;
+    recentPosts: _angular_core.Signal<_propbinder_mobile_design.Post[]>;
+    private allInquiries;
+    openInquiries: _angular_core.Signal<{
+        id: string;
+        title: string;
+        description: string;
+        status: "open";
+        timestamp: string;
+    }[]>;
+    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService);
     handleRefresh(event: any): void;
-    handlePostClick(): void;
-    handleContactClick(contactType: string): void;
-    handleFileClick(fileType: string): void;
+    openPost(postId: string, focusComment?: boolean): Promise<void>;
+    openInquiryDetail(inquiryId: string): void;
+    navigateToCommunity(): void;
+    navigateToInquiries(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHomePageComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHomePageComponent, "app-home-page", never, {}, {}, never, never, true, never>;
 }

package/package.json

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

package/styles/ionic.css

@@ -834,3 +834,18 @@ ion-app ion-router-outlet.ion-page-hidden {
 
 /* Dark mode support removed - modals should not change based on system dark mode */
 
+/* ============================================
+   GLOBAL BUTTON INTERACTIVE STATES
+   Consistent button behavior across all ds-button instances
+   ============================================ */
+
+/* Base transition */
+ds-button .btn {
+  transition: all 0.2s ease !important;
+}
+
+/* Active/pressed/click state - scale down slightly */
+ds-button .btn:active:not(:disabled) {
+  transform: scale(0.98) !important;
+}
+

package/styles/mobile-common.css

@@ -77,7 +77,7 @@
 
 /* Section Headlines */
 .section-headline {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-base);
   font-weight: 600;
   color: var(--text-color-default-primary);
   padding: 16px 0;