@propbinder/mobile-design 0.0.1 → 0.0.21

package/index.d.ts

@@ -2,8 +2,9 @@ import * as _angular_core from '@angular/core';
 import { AfterViewInit, ElementRef, OnDestroy, EventEmitter, OnInit, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
 import { IonContent, NavController, ModalController, GestureController } from '@ionic/angular/standalone';
 import { ImpactStyle } from '@capacitor/haptics';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { BreakpointObserver } from '@angular/cdk/layout';
+import { Animation } from '@ionic/angular';
 
 /**
  * Content width preset values
@@ -1367,7 +1368,7 @@ 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$1 {
+interface TabConfig$2 {
     id: string;
     label: string;
     route: string;
@@ -1410,7 +1411,7 @@ declare class DsMobileAppLayoutComponent implements AfterViewInit {
     showBackButton: _angular_core.InputSignal<boolean>;
     showPullToRefresh: _angular_core.InputSignal<boolean>;
     showTabBar: _angular_core.InputSignal<boolean>;
-    tabs: _angular_core.InputSignal<TabConfig$1[]>;
+    tabs: _angular_core.InputSignal<TabConfig$2[]>;
     avatarType: _angular_core.InputSignal<"initials" | "photo" | "icon">;
     avatarInitials: _angular_core.InputSignal<string>;
     avatarSrc: _angular_core.InputSignal<string>;
@@ -1435,7 +1436,7 @@ declare class DsMobileAppLayoutComponent implements AfterViewInit {
     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>;
 }
 
-interface TabConfig {
+interface TabConfig$1 {
     id: string;
     label: string;
     route: string;
@@ -1463,7 +1464,7 @@ interface TabConfig {
  */
 declare class DsMobileTabsComponent implements OnInit, AfterViewInit {
     private elementRef;
-    tabs: TabConfig[];
+    tabs: TabConfig$1[];
     avatarType: 'initials' | 'photo' | 'icon';
     avatarInitials: string;
     avatarSrc: string;
@@ -1478,7 +1479,7 @@ declare class DsMobileTabsComponent implements OnInit, AfterViewInit {
     ngOnDestroy(): void;
     private setupTitleRemovalObserver;
     private removeTitleAttributes;
-    trackByTabId(index: number, tab: TabConfig): string;
+    trackByTabId(index: number, tab: TabConfig$1): string;
     isTabActive(tabId: string): boolean;
     handleAvatarClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileTabsComponent, never>;
@@ -2856,5 +2857,358 @@ declare class DsMobileHandbookFolderMiniComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileHandbookFolderMiniComponent, "ds-mobile-handbook-folder-mini", never, { "variant": { "alias": "variant"; "required": false; }; "iconName": { "alias": "iconName"; "required": false; }; }, {}, never, never, true, never>;
 }
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileTabsComponent, MobilePageBase, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent };
-export type { ActionGroup, ActionItem, ActionResult, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContentWidth, HeaderVariant, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig };
+/**
+ * User service for managing current user data globally
+ */
+declare class UserService {
+    private _avatarInitials;
+    private _avatarType;
+    private _avatarSrc;
+    readonly avatarInitials: _angular_core.Signal<string>;
+    readonly avatarType: _angular_core.Signal<"initials" | "photo" | "icon">;
+    readonly avatarSrc: _angular_core.Signal<string>;
+    /**
+     * Update avatar configuration
+     */
+    setAvatarInitials(initials: string): void;
+    setAvatarType(type: 'initials' | 'photo' | 'icon'): void;
+    setAvatarSrc(src: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UserService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<UserService>;
+}
+
+declare class MobileCommunityPageComponent {
+    private router;
+    private route;
+    private bottomSheet;
+    private lightbox;
+    private postModal;
+    userService: UserService;
+    userPosts: _angular_core.WritableSignal<any[]>;
+    showStaticPosts: _angular_core.WritableSignal<boolean>;
+    hasAnyPosts: _angular_core.Signal<boolean>;
+    constructor(router: Router, route: ActivatedRoute, bottomSheet: DsMobileBottomSheetService, lightbox: DsMobileLightboxService, postModal: DsMobilePostDetailModalService, userService: UserService);
+    handleRefresh(event: any): void;
+    /**
+     * Open post detail modal
+     * This provides a better UX than route navigation:
+     * - Maintains scroll position
+     * - Native iOS-style modal feel
+     * - Proper close button that works
+     */
+    openPost(postId: string, focusComment?: boolean): Promise<void>;
+    /**
+     * Open user-created post detail modal
+     */
+    openUserPost(index: number, focusComment?: boolean): Promise<void>;
+    openPostCreator(): Promise<void>;
+    /**
+     * Open an image in the lightbox viewer
+     * Prevents the post click event from firing
+     */
+    openImageLightbox(imageSrc: string, title: string, description: string, event: Event): Promise<void>;
+    openHouseRulesPdf(): Promise<void>;
+    /**
+     * Handle long press on a post to show action sheet
+     */
+    handlePostLongPress(postIdOrIndex: string | number, isOwnPost: boolean): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileCommunityPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileCommunityPageComponent, "app-mobile-community-page", never, {}, {}, never, never, true, never>;
+}
+
+declare class MobileHandbookPageComponent {
+    userService: UserService;
+    utilitiesItems: HandbookItem[];
+    sikkerhedsudstyrItems: HandbookItem[];
+    serviceContractsItems: HandbookItem[];
+    equipmentItems: HandbookItem[];
+    constructor(userService: UserService);
+    handleRefresh(event: any): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHandbookPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHandbookPageComponent, "app-mobile-handbook-page", never, {}, {}, never, never, true, never>;
+}
+
+declare class MobileHomePageComponent {
+    private navCtrl;
+    userService: UserService;
+    constructor(navCtrl: NavController, userService: UserService);
+    handleRefresh(event: any): void;
+    navigateToDetail(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHomePageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHomePageComponent, "app-home-page", never, {}, {}, never, never, true, never>;
+}
+
+interface TabItem {
+    id: string;
+    label: string;
+    badge?: number;
+}
+
+interface Inquiry {
+    id: string;
+    title: string;
+    description: string;
+    status: 'open' | 'closed';
+    timestamp: string;
+    category: 'maintenance' | 'plumbing' | 'electrical' | 'heating' | 'security' | 'appliance' | 'other';
+}
+declare class MobileInquiriesPageComponent {
+    userService: UserService;
+    private navCtrl;
+    constructor(userService: UserService, navCtrl: NavController);
+    filterStatus: _angular_core.WritableSignal<"open" | "closed" | "all">;
+    tabItems: TabItem[];
+    inquiries: _angular_core.WritableSignal<Inquiry[]>;
+    filteredInquiries: _angular_core.Signal<Inquiry[]>;
+    openInquiries: _angular_core.Signal<Inquiry[]>;
+    closedInquiries: _angular_core.Signal<Inquiry[]>;
+    setFilter(status: 'all' | 'open' | 'closed'): void;
+    getInquiryIcon(category: string): string;
+    openInquiryDetail(inquiryId: string): void;
+    showInquiryActions(inquiryId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiriesPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiriesPageComponent, "app-mobile-inquiries-page", never, {}, {}, never, never, true, never>;
+}
+
+interface ActivityItem {
+    id: string;
+    type: 'assignment' | 'status_change' | 'creation';
+    actor?: string;
+    actorInitials?: string;
+    title: string;
+    description?: string;
+    timestamp: string;
+    date: string;
+    iconName: string;
+    iconBgColor?: string;
+}
+interface MessageThread {
+    id: string;
+    senderName: string;
+    senderAvatar: string;
+    senderInitials: string;
+    message: string;
+    role: string;
+    timestamp: string;
+    unread: boolean;
+}
+declare class MobileInquiryDetailPageComponent extends MobilePageBase implements AfterViewInit {
+    userService: UserService;
+    private navCtrl;
+    private elementRef;
+    ionContent?: IonContent;
+    private platform;
+    isNativePlatform: _angular_core.Signal<boolean>;
+    inquiryTitle: string;
+    activeTab: _angular_core.WritableSignal<string>;
+    tabItems: TabItem[];
+    activities: ActivityItem[];
+    messageThreads: MessageThread[];
+    unreadMessagesCount: _angular_core.Signal<number>;
+    constructor(userService: UserService, navCtrl: NavController, elementRef: ElementRef);
+    ngAfterViewInit(): void;
+    setActiveTab(tabId: string): void;
+    goBack(): void;
+    handleScroll(event: any): void;
+    handleRefresh(event: any): void;
+    openMessage(messageId: string): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileInquiryDetailPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileInquiryDetailPageComponent, "app-mobile-inquiry-detail-page", never, {}, {}, never, never, true, never>;
+}
+
+interface TabConfig {
+    id: string;
+    label: string;
+    route: string;
+    icon: string;
+    iconActive: string;
+}
+
+declare class MobileTabsExampleComponent implements OnInit {
+    userService: UserService;
+    private modalController;
+    private router;
+    constructor(userService: UserService, modalController: ModalController, router: Router);
+    ngOnInit(): void;
+    tabs: TabConfig[];
+    handleAvatarClick(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileTabsExampleComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileTabsExampleComponent, "app-mobile-tabs-example", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * PostCreatePageComponent
+ *
+ * Full-screen detail page for creating new posts in the community feed.
+ * Features Threads-inspired interface with rich text editing capabilities.
+ */
+declare class PostCreatePageComponent implements AfterViewInit, OnInit {
+    private router;
+    private route;
+    userService: UserService;
+    textareaInput?: ElementRef<HTMLTextAreaElement>;
+    postContent: string;
+    username: _angular_core.WritableSignal<string>;
+    placeholder: _angular_core.WritableSignal<string>;
+    isEditMode: _angular_core.WritableSignal<boolean>;
+    postId: _angular_core.WritableSignal<string | null>;
+    pageTitle: _angular_core.WritableSignal<string>;
+    submitButtonLabel: _angular_core.WritableSignal<string>;
+    constructor(router: Router, route: ActivatedRoute, userService: UserService);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    handleInput(): void;
+    canPost(): boolean;
+    handleCancel(): void;
+    handlePost(): void;
+    handleAddImage(): void;
+    handleAddEmoji(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PostCreatePageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PostCreatePageComponent, "app-post-create-page", never, {}, {}, never, never, true, never>;
+}
+
+declare class MobilePostDetailPageComponent {
+    private lightbox;
+    private bottomSheet;
+    repliesCount: number;
+    constructor(lightbox: DsMobileLightboxService, bottomSheet: DsMobileBottomSheetService);
+    /**
+     * Open an image in the lightbox viewer
+     */
+    openImageLightbox(imageSrc: string, title: string, description: string): void;
+    /**
+     * Handle long press on a comment to show action sheet
+     */
+    handleCommentLongPress(authorName: string, content: string, isOwnComment: boolean): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobilePostDetailPageComponent, never>;
+    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;
+    primaryColor: string;
+    secondaryColor: 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: () => string;
+    readonly logoMarkUrl: () => string;
+    readonly logoAlt: () => string;
+    readonly primaryColor: () => string;
+    readonly secondaryColor: () => string;
+    readonly organizationName: () => string;
+    readonly organizationId: () => 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(primaryColor: string, secondaryColor: string): void;
+    /**
+     * Reset to default configuration
+     */
+    resetToDefault(): void;
+    /**
+     * Apply colors to CSS custom properties
+     * This updates the actual CSS variables used throughout the app
+     */
+    private applyColors;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<WhitelabelService>;
+}
+
+/**
+ * Whitelabel Demo Page
+ *
+ * Demonstrates the whitelabeling system with live color and logo switching.
+ */
+declare class WhitelabelDemoPage implements OnInit {
+    whitelabelService: WhitelabelService;
+    customPrimaryColor: string;
+    customSecondaryColor: string;
+    uploadedFullLogoName: string;
+    uploadedLogomarkName: 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;
+    applyCustomColors(): void;
+    private updateCustomColorInputs;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WhitelabelDemoPage, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WhitelabelDemoPage, "app-whitelabel-demo", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Custom page transition - iOS-style push/pop
+ *
+ * FORWARD (navigating TO detail):
+ * - Entering page (detail): slides in from RIGHT, z-index 10 (on top)
+ * - Leaving page (list): slides LEFT slightly, z-index 9 (underneath)
+ *
+ * REVERSE (swipe back FROM detail):
+ * - Entering page (list): slides in from LEFT, z-index 9 (underneath)
+ * - Leaving page (detail): slides out to RIGHT, z-index 10 (on top)
+ */
+declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
+/**
+ * Custom back transition - iOS style where page slides out to reveal page underneath
+ * The entering page (inquiries) slides in from the LEFT underneath
+ * The leaving page (detail) slides out to the RIGHT on top
+ */
+declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
+
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsMobileActionsBottomSheetComponent, DsMobileAppLayoutComponent, DsMobileBottomSheetService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileContentSectionComponent, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileInlinePhotoComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileLongPressDirective, DsMobileModalService, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostCardComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, 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, BottomSheetOptions, ActionResult as CommentActionResult, CommentData, ContentWidth, HeaderVariant, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, ModalOptions, ActionResult as PostActionResult, PostDetailData, TabConfig$1 as TabConfig };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@propbinder/mobile-design",
-  "version": "0.0.1",
+  "version": "0.0.21",
   "peerDependencies": {
-    "@angular/common": "^20.3.0",
-    "@angular/core": "^20.3.0"
+    "@angular/common": "^20.3.0 || ^21.0.0",
+    "@angular/core": "^20.3.0 || ^21.0.0"
   },
   "dependencies": {
     "tslib": "^2.3.0"