@propbinder/mobile-design 0.2.36 → 0.2.40

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, OnInit, ElementRef, EventEmitter, TemplateRef, AfterViewInit, OnChanges, Injector, SimpleChanges, AfterContentInit, ChangeDetectorRef, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
+import { OnDestroy, OnInit, ElementRef, EventEmitter, TemplateRef, AfterViewInit, OnChanges, Injector, SimpleChanges, ChangeDetectorRef, AfterContentInit, ApplicationRef, EnvironmentInjector, Type } from '@angular/core';
 import { ModalController, IonContent, NavController, GestureController, ModalOptions as ModalOptions$1 } from '@ionic/angular/standalone';
 import { Style } from '@capacitor/status-bar';
 import { ImpactStyle } from '@capacitor/haptics';
@@ -9,6 +9,7 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Router, ActivatedRoute } from '@angular/router';
 import * as rxjs from 'rxjs';
 import * as _propbinder_mobile_design from '@propbinder/mobile-design';
+import { AppTrackingStatus } from 'capacitor-plugin-app-tracking-transparency';
 import { Animation } from '@ionic/angular';
 
 /**
@@ -910,7 +911,7 @@ declare class WhitelabelService {
     readonly logoUrl: _angular_core.Signal<string>;
     readonly logoMarkUrl: _angular_core.Signal<string>;
     readonly logoAlt: _angular_core.Signal<string>;
-    readonly logoSize: _angular_core.Signal<"sm" | "md" | "lg" | "xl">;
+    readonly logoSize: _angular_core.Signal<"md" | "sm" | "lg" | "xl">;
     readonly logoHeight: _angular_core.Signal<number>;
     readonly appIconSurface: _angular_core.Signal<string>;
     readonly appIconContent: _angular_core.Signal<string>;
@@ -1291,7 +1292,7 @@ declare class DsMobileSectionComponent {
      */
     handleLinkClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSectionComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSectionComponent, "ds-mobile-section", never, { "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "contentGap": { "alias": "contentGap"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; "overflow": { "alias": "overflow"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSectionComponent, "ds-mobile-section", never, { "headline": { "alias": "headline"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "linkText": { "alias": "linkText"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "contentGap": { "alias": "contentGap"; "required": false; "isSignal": true; }; "showBorder": { "alias": "showBorder"; "required": false; "isSignal": true; }; "overflow": { "alias": "overflow"; "required": false; "isSignal": true; }; }, { "linkClick": "linkClick"; }, never, ["[header-action]", "*"], true, never>;
 }
 
 /**
@@ -1862,9 +1863,15 @@ declare class DsMobileDropdownComponent {
     private elementRef;
     constructor();
     /**
-     * Content projection for custom item template
+     * Content projection for custom item template (per-item renderer)
      */
     customItemTemplate?: TemplateRef<any>;
+    /**
+     * Content projection for fully custom popover content.
+     * When provided, the item list is bypassed entirely and this template
+     * is rendered directly inside the popover — use for pickers, forms, etc.
+     */
+    customContent?: TemplateRef<any>;
     /**
      * Optional trigger element ID for Ionic Popover positioning
      */
@@ -1875,7 +1882,8 @@ declare class DsMobileDropdownComponent {
      */
     keepFocusOn: _angular_core.InputSignal<ElementRef<any> | undefined>;
     /**
-     * Array of dropdown items to display
+     * Array of dropdown items to display.
+     * Not required when using the #customContent slot.
      */
     items: _angular_core.InputSignal<DsMobileDropdownItem[]>;
     /**
@@ -1906,6 +1914,12 @@ declare class DsMobileDropdownComponent {
      * ARIA label for the dropdown menu
      */
     ariaLabel: _angular_core.InputSignal<string>;
+    /**
+     * Maximum width of the popover.
+     * Defaults to '192px' (standard dropdown width).
+     * Override when using #customContent that requires more space (e.g. '280px' for a picker).
+     */
+    maxWidth: _angular_core.InputSignal<string>;
     /**
      * Emits when an item is selected
      */
@@ -1922,7 +1936,7 @@ declare class DsMobileDropdownComponent {
      * Computed offset Y for Ionic Popover
      * Uses CSS variable for precise control
      */
-    offsetY: _angular_core.Signal<"4px" | "-4px">;
+    offsetY: _angular_core.Signal<"-4px" | "4px">;
     /**
      * Computed offset X for Ionic Popover
      * Negative value to shift left by trigger position + add 20px left margin
@@ -1937,7 +1951,7 @@ declare class DsMobileDropdownComponent {
      */
     handleItemClick(item: DsMobileDropdownItem, event: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileDropdownComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileDropdownComponent, "ds-mobile-dropdown", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "keepFocusOn": { "alias": "keepFocusOn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "closed": "closed"; }, ["customItemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileDropdownComponent, "ds-mobile-dropdown", never, { "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "keepFocusOn": { "alias": "keepFocusOn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "isOpen": { "alias": "isOpen"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "maxWidth": { "alias": "maxWidth"; "required": false; "isSignal": true; }; }, { "itemSelected": "itemSelected"; "closed": "closed"; }, ["customItemTemplate", "customContent"], never, true, never>;
 }
 
 /**
@@ -1965,6 +1979,8 @@ declare class DsMobileDropdownComponent {
  * ```
  */
 declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestroy {
+    private cdr;
+    constructor(cdr: ChangeDetectorRef);
     /**
      * Avatar initials
      */
@@ -2074,8 +2090,9 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     mentionDropdownItems: _angular_core.Signal<DsMobileDropdownItem[]>;
     /**
      * Attachment menu items
+     * Static list to prevent change detection loops
      */
-    attachmentMenuItems: _angular_core.Signal<DsMobileDropdownItem[]>;
+    readonly attachmentMenuItems: DsMobileDropdownItem[];
     /**
      * Emits when a message is sent
      */
@@ -2182,7 +2199,7 @@ declare class DsMobileMessageComposerComponent implements AfterViewInit, OnDestr
     closeAttachmentMenu(event?: MouseEvent): void;
     /**
      * Handle add photo button click from menu
-     * Uses Capacitor Camera API to open photo library directly
+     * Uses Capawesome File Picker API to open photo library directly
      * Allows multiple photo selection
      */
     handleAddPhoto(event?: MouseEvent): Promise<void>;
@@ -3558,6 +3575,10 @@ declare class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
      * Navigate to next slide
      */
     slideNext(): void;
+    /**
+     * Navigate to a specific slide by index
+     */
+    slideTo(index: number, speed?: number): void;
     /**
      * Check if at the beginning
      */
@@ -5950,6 +5971,11 @@ declare class DsMobileBookingModalComponent implements AfterViewInit {
     private modalController;
     facilityId: string;
     facilityTitle: string;
+    /**
+     * Number of days ahead available for booking selection.
+     * Defaults to 60 (2 months). Override via componentProps when opening the modal.
+     */
+    daysAhead: number;
     swiperComponent?: DsMobileSwiperComponent;
     dateOptions: _angular_core.WritableSignal<DateOption[]>;
     timeSlots: _angular_core.WritableSignal<TimeSlot[]>;
@@ -5962,6 +5988,20 @@ declare class DsMobileBookingModalComponent implements AfterViewInit {
      * After view init - force swiper update to fix initial positioning
      */
     ngAfterViewInit(): void;
+    /**
+     * Returns true if the given date should be disabled in both the swiper and the datepicker.
+     * Weekends are disabled. Index-based mock disabling (i===3, i===7) is swiper-only and
+     * not representable as a date rule, so it is intentionally excluded here.
+     */
+    private isDateUnavailable;
+    /**
+     * Computed signal that returns a fresh disabled-date function whenever dateOptions()
+     * changes. Returning a new function reference causes the datepicker's own isDateDisabled
+     * input to update, which triggers its internal computed to re-run and re-render all
+     * calendar cells with the correct disabled state.
+     * The disabledSet is pre-built once per computation for O(1) per-cell lookups.
+     */
+    dateDisabledFn: _angular_core.Signal<(date: Date) => boolean>;
     /**
      * Generate mock date and time data
      */
@@ -5978,6 +6018,11 @@ declare class DsMobileBookingModalComponent implements AfterViewInit {
      * Handle time slot selection
      */
     selectTime(selectedSlot: TimeSlot): void;
+    /**
+     * Called when the datepicker overlay emits a date selection.
+     * Finds the matching DateOption in the swiper, selects it, and auto-scrolls to it.
+     */
+    jumpToDate(date: Date | null): void;
     /**
      * Handle confirm button click
      */
@@ -5987,7 +6032,7 @@ declare class DsMobileBookingModalComponent implements AfterViewInit {
      */
     handleClose(): Promise<void>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBookingModalComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBookingModalComponent, "ds-mobile-booking-modal", never, { "facilityId": { "alias": "facilityId"; "required": false; }; "facilityTitle": { "alias": "facilityTitle"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBookingModalComponent, "ds-mobile-booking-modal", never, { "facilityId": { "alias": "facilityId"; "required": false; }; "facilityTitle": { "alias": "facilityTitle"; "required": false; }; "daysAhead": { "alias": "daysAhead"; "required": false; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -6014,9 +6059,10 @@ declare class DsMobileBookingModalService extends BaseModalService {
      * @param facilityId The ID of the facility to book
      * @param facilityTitle The display name of the facility
      * @param facilityThumbnail Optional thumbnail image URL
+     * @param daysAhead Number of days ahead available for selection (defaults to 14)
      * @returns Promise that resolves when the booking flow is complete
      */
-    open(facilityId: string, facilityTitle: string, facilityThumbnail?: string): Promise<void>;
+    open(facilityId: string, facilityTitle: string, facilityThumbnail?: string, daysAhead?: number): Promise<void>;
     /**
      * Dismiss all open modals
      */
@@ -6363,20 +6409,54 @@ declare class DsMobileWhoCanBookSheetComponent {
  * DsMobileWhenCanBookSheetComponent
  *
  * Bottom sheet for selecting when a facility can be booked (days, time range, duration).
+ * "Vælg selv" opens a drum-roll IonPopover on mobile, or inline number inputs on desktop.
  */
-declare class DsMobileWhenCanBookSheetComponent {
+declare class DsMobileWhenCanBookSheetComponent implements OnInit {
     private modalController;
+    private platformId;
+    isDesktop: _angular_core.WritableSignal<boolean>;
     selectedDays: _angular_core.WritableSignal<Set<string>>;
     startTime: _angular_core.WritableSignal<string>;
     endTime: _angular_core.WritableSignal<string>;
     selectedDuration: _angular_core.WritableSignal<string>;
+    /**
+     * Maximum number of days available in the "Vælg selv" picker/inputs.
+     * Defaults to 30 (one full month). Override via componentProps when opening the sheet.
+     */
+    maxDays: _angular_core.InputSignal<number>;
+    pickerOpen: _angular_core.WritableSignal<boolean>;
+    customDays: _angular_core.WritableSignal<number>;
+    customHours: _angular_core.WritableSignal<number>;
+    customMinutes: _angular_core.WritableSignal<number>;
+    customDurationLabel: _angular_core.Signal<string>;
+    showInlineInputs: _angular_core.Signal<boolean>;
     days: string[];
     durations: {
         value: string;
         label: string;
     }[];
+    daysOptions: _angular_core.Signal<number[]>;
+    hours: number[];
+    minuteOptions: number[];
     isValid: _angular_core.Signal<string | false>;
     constructor(modalController: ModalController);
+    ngOnInit(): void;
+    /**
+     * Handle duration chip selection.
+     * On mobile, opening "Vælg selv" triggers the IonPopover via its trigger id.
+     * On desktop, it shows the inline inputs.
+     */
+    selectDuration(value: string): void;
+    /**
+     * Normalizes days/hours/minutes so values never overflow their units.
+     * e.g. 0d 48t 0min → 2d 0t 0min; 0d 0t 75min → 0d 1t 15min.
+     * Caps days at maxDays().
+     */
+    normalize(): void;
+    /**
+     * Called when the mobile picker popover is dismissed — normalize and commit.
+     */
+    onPickerDismiss(): void;
     /**
      * Toggle day selection
      */
@@ -6390,7 +6470,7 @@ declare class DsMobileWhenCanBookSheetComponent {
      */
     dismiss(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileWhenCanBookSheetComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileWhenCanBookSheetComponent, "ds-mobile-when-can-book-sheet", never, {}, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileWhenCanBookSheetComponent, "ds-mobile-when-can-book-sheet", never, { "maxDays": { "alias": "maxDays"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 /**
@@ -7004,7 +7084,7 @@ declare class DsMobileHandbookFolderMiniComponent {
  * ```
  */
 declare class DsTextInputComponent implements ControlValueAccessor {
-    type: _angular_core.InputSignal<"search" | "text" | "email" | "password" | "tel" | "url">;
+    type: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "url" | "password">;
     placeholder: _angular_core.InputSignal<string>;
     disabled: _angular_core.InputSignal<boolean>;
     readonly: _angular_core.InputSignal<boolean>;
@@ -7012,7 +7092,7 @@ declare class DsTextInputComponent implements ControlValueAccessor {
     hasError: _angular_core.InputSignal<boolean>;
     errorMessage: _angular_core.InputSignal<string>;
     autocomplete: _angular_core.InputSignal<string>;
-    inputmode: _angular_core.InputSignal<"search" | "text" | "numeric" | "email" | "tel" | "url" | undefined>;
+    inputmode: _angular_core.InputSignal<"search" | "text" | "email" | "tel" | "url" | "numeric" | undefined>;
     autoClearError: _angular_core.InputSignal<boolean>;
     validator: _angular_core.InputSignal<((value: string) => boolean) | null>;
     valueChange: _angular_core.OutputEmitterRef<string>;
@@ -7083,7 +7163,7 @@ declare class DsMobileFabComponent implements AfterViewInit, OnDestroy {
      * Note: FAB is always 56px circular, but this affects the icon size
      * @default 'md'
      */
-    size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    size: _angular_core.InputSignal<"md" | "sm" | "lg">;
     /**
      * ARIA label for accessibility
      * @required - Always provide a descriptive label
@@ -7572,11 +7652,29 @@ declare class MobileHandbookPageComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHandbookPageComponent, "app-mobile-handbook-page", never, {}, {}, never, never, true, never>;
 }
 
-declare class MobileHomePageComponent {
+declare class TrackingPermissionService {
+    private readonly trackingPromptRequestedKey;
+    private readonly platform;
+    private readonly trackingSettingsReminder;
+    readonly showTrackingSettingsReminder: _angular_core.Signal<boolean>;
+    requestOnFirstHomeEntry(): Promise<void>;
+    getTrackingStatus(): Promise<AppTrackingStatus | null>;
+    openAppSettings(): Promise<void>;
+    shouldShowSettingsReminder(): boolean;
+    refreshTrackingStatus(): Promise<void>;
+    private isNativeIos;
+    private hasRequestedTrackingPrompt;
+    private setTrackingPromptRequested;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<TrackingPermissionService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<TrackingPermissionService>;
+}
+
+declare class MobileHomePageComponent implements OnInit {
     private router;
     userService: UserService;
     private postsService;
     private postModal;
+    private trackingPermissionService;
     pageComponent: DsMobilePageMainComponent;
     recentPosts: _angular_core.Signal<_propbinder_mobile_design.Post[]>;
     private allInquiries;
@@ -7587,7 +7685,8 @@ declare class MobileHomePageComponent {
         status: "open";
         timestamp: string;
     }[]>;
-    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService);
+    constructor(router: Router, userService: UserService, postsService: PostsService, postModal: DsMobilePostDetailModalService, trackingPermissionService: TrackingPermissionService);
+    ngOnInit(): void;
     handleRefresh(event: any): void;
     openPost(postId: string, focusComment?: boolean): Promise<void>;
     openInquiryDetail(inquiryId: string): void;
@@ -7679,6 +7778,8 @@ declare class MobileTabsExampleComponent implements OnInit {
     userService: UserService;
     private router;
     private whitelabelDemoModal;
+    private trackingPermissionService;
+    private trackedProfileMenuItems;
     constructor(userService: UserService, router: Router);
     ngOnInit(): void;
     tabs: TabConfig[];

package/package.json

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