@propbinder/mobile-design 0.2.28 → 0.2.30

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { OnDestroy, AfterViewInit, OnInit, ElementRef, OnChanges, Injector, SimpleChanges, TemplateRef, EventEmitter, ApplicationRef, EnvironmentInjector, Type, AfterContentInit, ChangeDetectorRef } from '@angular/core';
+import { OnDestroy, OnInit, ElementRef, EventEmitter, TemplateRef, AfterViewInit, OnChanges, Injector, SimpleChanges, AfterContentInit, ChangeDetectorRef, 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';
@@ -313,7 +313,15 @@ declare class DsMobileBottomSheetService {
  * DsMobileBottomSheetWrapperComponent
  *
  * A wrapper component that provides common layout styling for all bottom sheets.
- * Handles safe area insets and provides consistent layout structure.
+ * Handles safe area insets, provides consistent layout structure, and automatic
+ * keyboard handling using the same approach as modal base.
+ *
+ * Features:
+ * - Automatic keyboard push-up behavior (same as MobileModalBase)
+ * - Auto-height for bottom sheets
+ * - Safe area inset handling
+ * - Consistent styling across all bottom sheets
+ * - Only responds to keyboard when this bottom sheet is the top-most modal
  *
  * Usage:
  * Wrap your bottom sheet content with this component using ng-content projection.
@@ -325,11 +333,167 @@ declare class DsMobileBottomSheetService {
  * </ds-mobile-bottom-sheet-wrapper>
  * ```
  */
-declare class DsMobileBottomSheetWrapperComponent {
+declare class DsMobileBottomSheetWrapperComponent implements OnInit, OnDestroy {
+    private elementRef;
+    private modalController;
+    constructor(elementRef: ElementRef);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Set up keyboard event listeners to adjust bottom sheet position
+     * Uses --keyboard-height-sheet variable (separate from modal's --keyboard-height)
+     * Only responds if this bottom sheet is the currently active (top-most) modal
+     */
+    private setupKeyboardListeners;
+    /**
+     * Clean up keyboard event listeners
+     */
+    private cleanupKeyboardListeners;
+    /**
+     * Get the parent ion-modal element
+     */
+    private getModalElement;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBottomSheetWrapperComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBottomSheetWrapperComponent, "ds-mobile-bottom-sheet-wrapper", never, {}, {}, never, ["*"], true, never>;
 }
 
+/**
+ * DsMobileBottomSheetHeaderComponent
+ *
+ * Reusable header component for bottom sheets with left button, center title, and right button.
+ * Styling matches the language switcher pattern (source of truth).
+ *
+ * Usage:
+ * ```html
+ * <ds-mobile-bottom-sheet-header
+ *   title="Sheet Title"
+ *   leftButtonLabel="Tilbage"
+ *   rightButtonLabel="Færdig"
+ *   [rightButtonDisabled]="!isValid()"
+ *   (leftButtonClick)="handleCancel()"
+ *   (rightButtonClick)="handleConfirm()">
+ * </ds-mobile-bottom-sheet-header>
+ * ```
+ */
+declare class DsMobileBottomSheetHeaderComponent {
+    /**
+     * Center title text
+     */
+    title: string;
+    /**
+     * Left button label
+     * @default 'Tilbage'
+     */
+    leftButtonLabel: string;
+    /**
+     * Right button label
+     * @default 'Færdig'
+     */
+    rightButtonLabel: string;
+    /**
+     * Disable right button
+     * @default false
+     */
+    rightButtonDisabled: boolean;
+    /**
+     * Emitted when left button is clicked
+     */
+    leftButtonClick: EventEmitter<void>;
+    /**
+     * Emitted when right button is clicked
+     */
+    rightButtonClick: EventEmitter<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBottomSheetHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBottomSheetHeaderComponent, "ds-mobile-bottom-sheet-header", never, { "title": { "alias": "title"; "required": false; }; "leftButtonLabel": { "alias": "leftButtonLabel"; "required": false; }; "rightButtonLabel": { "alias": "rightButtonLabel"; "required": false; }; "rightButtonDisabled": { "alias": "rightButtonDisabled"; "required": false; }; }, { "leftButtonClick": "leftButtonClick"; "rightButtonClick": "rightButtonClick"; }, never, never, true, never>;
+}
+
+/**
+ * DsMobileConfirmationSheetComponent
+ *
+ * Generic bottom sheet for displaying confirmation messages with optional summary content.
+ * Highly flexible and reusable across different confirmation scenarios.
+ *
+ * **Features:**
+ * - Customizable title and message
+ * - Optional illustration with variant selection
+ * - Content projection for custom summary section
+ * - Customizable button text and action
+ *
+ * @example
+ * ```typescript
+ * // Simple confirmation
+ * const sheet = await modalController.create({
+ *   component: DsMobileConfirmationSheetComponent,
+ *   componentProps: {
+ *     title: 'Booking accepteret',
+ *     message: 'Din booking er bekræftet.',
+ *     buttonText: 'Luk',
+ *     illustrationVariant: 'confirmation'
+ *   },
+ *   breakpoints: [0, 1],
+ *   initialBreakpoint: 1,
+ *   handle: true,
+ *   cssClass: ['ds-bottom-sheet', 'auto-height']
+ * });
+ * await sheet.present();
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- With custom summary content -->
+ * <ds-mobile-confirmation-sheet
+ *   title="Post created"
+ *   message="Your post has been published successfully."
+ *   buttonText="Done">
+ *   <div summary>
+ *     <!-- Custom summary content here -->
+ *   </div>
+ * </ds-mobile-confirmation-sheet>
+ * ```
+ */
+declare class DsMobileConfirmationSheetComponent {
+    private modalController;
+    /**
+     * Confirmation title
+     */
+    title: string;
+    /**
+     * Confirmation message
+     */
+    message: string;
+    /**
+     * Button text
+     * @default 'Luk'
+     */
+    buttonText: string;
+    /**
+     * Whether to show the illustration
+     * @default true
+     */
+    showIllustration: boolean;
+    /**
+     * Illustration variant
+     * @default 'confirmation'
+     */
+    illustrationVariant: 'post' | 'inquiry' | 'confirmation';
+    /**
+     * Illustration size
+     * @default '120px'
+     */
+    illustrationSize: string;
+    /**
+     * Optional summary content template
+     */
+    summaryTemplate?: TemplateRef<any>;
+    constructor(modalController: ModalController);
+    /**
+     * Handle button click - dismisses the sheet
+     */
+    handleButtonClick(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileConfirmationSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileConfirmationSheetComponent, "ds-mobile-confirmation-sheet", never, { "title": { "alias": "title"; "required": true; }; "message": { "alias": "message"; "required": true; }; "buttonText": { "alias": "buttonText"; "required": false; }; "showIllustration": { "alias": "showIllustration"; "required": false; }; "illustrationVariant": { "alias": "illustrationVariant"; "required": false; }; "illustrationSize": { "alias": "illustrationSize"; "required": false; }; }, {}, ["summaryTemplate"], never, true, never>;
+}
+
 /**
  * DsMobilePostCreateBottomSheetComponent
  *
@@ -2368,14 +2532,20 @@ declare class DsMobileLongPressDirective implements OnDestroy {
  * </ds-mobile-list-item>
  * ```
  */
-declare class DsMobileListItemComponent {
+declare class DsMobileListItemComponent implements AfterViewInit {
     private platformId;
+    private elementRef;
     /**
      * Detect if viewport is desktop size
      * Use viewport width for breakpoint detection (show button on tablet and above)
      */
     isDesktop: _angular_core.WritableSignal<boolean>;
     constructor();
+    ngAfterViewInit(): void;
+    /**
+     * Check if leading content slot has actual content projected
+     */
+    private checkLeadingContent;
     /**
      * CSS size value for the leading content area (e.g., '32px', '40px', '48px')
      * Defaults to '32px' for standard list item avatars/icons
@@ -2464,9 +2634,9 @@ declare class DsMobileListItemComponent {
     private longPressTriggered;
     /**
      * Check if leading content slot has content
-     * Always true to maintain consistent layout
+     * Dynamically updated after view initialization
      */
-    hasLeadingContent: _angular_core.Signal<boolean>;
+    hasLeadingContent: _angular_core.WritableSignal<boolean>;
     /**
      * Check if trailing content slot has content
      * Always true to maintain consistent layout
@@ -2657,6 +2827,13 @@ declare class DsMobileInteractiveListItemPostComponent {
      * - 'compact' - Compact display for nested/related posts
      */
     variant: _angular_core.InputSignal<"compact" | undefined>;
+    /**
+     * Vertical alignment of content
+     * - 'top' - Align to top (default)
+     * - 'center' - Align to center
+     * - 'bottom' - Align to bottom
+     */
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
     /**
      * Whether the post card is clickable
      */
@@ -2685,7 +2862,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; }; "enableLongPress": { "alias": "enableLongPress"; "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; }; "align": { "alias": "align"; "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
@@ -2873,6 +3050,13 @@ declare class DsMobileInteractiveListItemInquiryComponent {
      * - 'compact' - Compact display
      */
     variant: _angular_core.InputSignal<"compact" | undefined>;
+    /**
+     * Vertical alignment of content
+     * - 'top' - Align to top (default)
+     * - 'center' - Align to center
+     * - 'bottom' - Align to bottom
+     */
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
     /**
      * Whether the inquiry item is clickable
      */
@@ -2904,7 +3088,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; }; "enableLongPress": { "alias": "enableLongPress"; "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; }; "align": { "alias": "align"; "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>;
 }
 
 /**
@@ -2965,6 +3149,13 @@ declare class DsMobileInteractiveListItemMessageComponent {
      * Whether the message item is clickable
      */
     clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * Vertical alignment of content
+     * - 'top' - Align to top (default)
+     * - 'center' - Align to center
+     * - 'bottom' - Align to bottom
+     */
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
     /**
      * Emits when the message item is clicked
      */
@@ -2976,7 +3167,7 @@ declare class DsMobileInteractiveListItemMessageComponent {
     handleMessageClick(): void;
     handleLongPress(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemMessageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "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; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemMessageComponent, "ds-mobile-interactive-list-item-message", never, { "senderName": { "alias": "senderName"; "required": true; "isSignal": true; }; "senderRole": { "alias": "senderRole"; "required": true; "isSignal": true; }; "timestamp": { "alias": "timestamp"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "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; }; "unread": { "alias": "unread"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; }, { "messageClick": "messageClick"; "longPress": "longPress"; }, never, never, true, never>;
 }
 
 /**
@@ -3032,6 +3223,113 @@ 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>;
 }
 
+/**
+ * DsMobileInteractiveListItemBookingComponent
+ *
+ * Specialized interactive list item for displaying facility bookings.
+ * Built on top of ds-mobile-list-item base component.
+ * Displays facility thumbnail, title, description, booking dates/times, and availability status.
+ *
+ * @example
+ * ```html
+ * <!-- Active booking variant -->
+ * <ds-mobile-interactive-list-item-booking
+ *   [thumbnail]="'assets/facility.jpg'"
+ *   [facilityTitle]="'Gæsteparkering'"
+ *   [bookingDate]="'14. februar, 2026'"
+ *   [bookingTime]="'9:00 - 17:00'"
+ *   [clickable]="false">
+ * </ds-mobile-interactive-list-item-booking>
+ *
+ * <!-- Available facility variant -->
+ * <ds-mobile-interactive-list-item-booking
+ *   [thumbnail]="'assets/facility.jpg'"
+ *   [facilityTitle]="'Boremaskinen'"
+ *   [description]="'Book a guest parking spot to give your visitors...'"
+ *   [availabilityStatus]="'available-today'"
+ *   [statusLabel]="'Ledig i dag'"
+ *   [clickable]="true"
+ *   [enableLongPress]="false"
+ *   (bookingClick)="openBooking()">
+ * </ds-mobile-interactive-list-item-booking>
+ * ```
+ */
+declare class DsMobileInteractiveListItemBookingComponent {
+    /**
+     * Facility thumbnail image URL
+     */
+    thumbnail: _angular_core.InputSignal<string>;
+    /**
+     * Facility title
+     */
+    facilityTitle: _angular_core.InputSignal<string>;
+    /**
+     * Facility description/preview text (only for available facilities)
+     */
+    description: _angular_core.InputSignal<string>;
+    /**
+     * Booking date (only for active bookings, e.g., "14. februar, 2026")
+     */
+    bookingDate: _angular_core.InputSignal<string>;
+    /**
+     * Booking time range (only for active bookings, e.g., "9:00 - 17:00")
+     */
+    bookingTime: _angular_core.InputSignal<string>;
+    /**
+     * Availability status (only for available facilities)
+     */
+    availabilityStatus: _angular_core.InputSignal<"available-today" | "available-from" | "unavailable" | undefined>;
+    /**
+     * Status label text (e.g., "Ledig i dag", "Ledig fra 28. februar, 2026")
+     */
+    statusLabel: _angular_core.InputSignal<string>;
+    /**
+     * Display variant
+     * - undefined (default) - Standard display
+     * - 'compact' - Compact display
+     */
+    variant: _angular_core.InputSignal<"compact" | undefined>;
+    /**
+     * Vertical alignment of content
+     * - 'top' - Align to top (default)
+     * - 'center' - Align to center
+     * - 'bottom' - Align to bottom
+     */
+    align: _angular_core.InputSignal<"center" | "top" | "bottom">;
+    /**
+     * Whether the booking item is clickable
+     */
+    clickable: _angular_core.InputSignal<boolean>;
+    /**
+     * 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 booking item is clicked (if clickable)
+     */
+    bookingClick: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Emits when the booking item is long-pressed
+     */
+    longPress: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Get status indicator variant based on availability status
+     */
+    getStatusVariant(): 'brand' | 'warning' | 'grey';
+    handleBookingClick(): void;
+    handleLongPress(): void;
+    handleMoreButtonClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileInteractiveListItemBookingComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileInteractiveListItemBookingComponent, "ds-mobile-interactive-list-item-booking", never, { "thumbnail": { "alias": "thumbnail"; "required": false; "isSignal": true; }; "facilityTitle": { "alias": "facilityTitle"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "bookingDate": { "alias": "bookingDate"; "required": false; "isSignal": true; }; "bookingTime": { "alias": "bookingTime"; "required": false; "isSignal": true; }; "availabilityStatus": { "alias": "availabilityStatus"; "required": false; "isSignal": true; }; "statusLabel": { "alias": "statusLabel"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "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; }; }, { "bookingClick": "bookingClick"; "longPress": "longPress"; }, never, never, true, never>;
+}
+
 interface TabConfig {
     id: string;
     label: string;
@@ -3268,11 +3566,69 @@ declare class DsMobileSwiperComponent implements AfterViewInit, OnDestroy {
      * Check if at the end
      */
     isEnd(): boolean;
+    /**
+     * Get the total number of slides
+     */
+    getSlideCount(): number;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSwiperComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSwiperComponent, "ds-mobile-swiper", never, { "slideWidth": { "alias": "slideWidth"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "pagination": { "alias": "pagination"; "required": false; "isSignal": true; }; "autoHeight": { "alias": "autoHeight"; "required": false; "isSignal": true; }; "progressiveOpacity": { "alias": "progressiveOpacity"; "required": false; "isSignal": true; }; "progressiveScale": { "alias": "progressiveScale"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+/**
+ * DsMobileSwiperWithNavComponent
+ *
+ * Wrapper component that adds navigation buttons to a ds-mobile-swiper.
+ * Automatically handles button states (disabled at start/end) and mobile visibility.
+ *
+ * Features:
+ * - Automatic prev/next navigation buttons
+ * - Auto-hide buttons when there's only one slide
+ * - Auto-disable buttons at start/end of swiper
+ * - Hidden on mobile devices (< 768px)
+ * - No pointer-events blocking using display: contents
+ * - Self-contained navigation logic
+ *
+ * Usage:
+ * ```html
+ * <ds-mobile-swiper-with-nav>
+ *   <ds-mobile-swiper [slideWidth]="'100%'" [gap]="32">
+ *     <div class="swiper-slide">Slide 1</div>
+ *     <div class="swiper-slide">Slide 2</div>
+ *   </ds-mobile-swiper>
+ * </ds-mobile-swiper-with-nav>
+ * ```
+ */
+declare class DsMobileSwiperWithNavComponent implements AfterContentInit {
+    private cdr;
+    swiper?: DsMobileSwiperComponent;
+    constructor(cdr: ChangeDetectorRef);
+    ngAfterContentInit(): void;
+    /**
+     * Navigate to previous slide
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide
+     */
+    slideNext(): void;
+    /**
+     * Check if at first slide
+     */
+    isFirstSlide(): boolean;
+    /**
+     * Check if at last slide
+     */
+    isLastSlide(): boolean;
+    /**
+     * Check if navigation buttons should be shown
+     * Hide buttons if there's only one slide
+     */
+    shouldShowNavButtons(): boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileSwiperWithNavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileSwiperWithNavComponent, "ds-mobile-swiper-with-nav", never, {}, {}, ["swiper"], ["*"], true, never>;
+}
+
 /**
  * Media file types supported by the lightbox
  */
@@ -4184,6 +4540,7 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * Set up keyboard event listeners to adjust component position
      * Uses --keyboard-height for fixed bottom composer and adds padding to scroll area.
      * Adjusts scroll position so content smoothly follows the keyboard up (like Messenger/Telegram).
+     * Only responds if this modal is the currently active (top-most) modal.
      * @protected
      */
     protected setupKeyboardListeners(): void;
@@ -4198,6 +4555,11 @@ declare abstract class MobileModalBase implements OnInit, OnDestroy {
      * @protected
      */
     protected cleanupKeyboardListeners(): void;
+    /**
+     * Check if the given modal element is this modal component's parent modal
+     * @protected
+     */
+    protected isThisModal(modalElement: HTMLIonModalElement): boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileModalBase, never>;
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MobileModalBase, never, never, { "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "headerTitle": { "alias": "headerTitle"; "required": false; "isSignal": true; }; "headerMeta": { "alias": "headerMeta"; "required": false; "isSignal": true; }; "closeButtonLabel": { "alias": "closeButtonLabel"; "required": false; "isSignal": true; }; "enableKeyboardHandling": { "alias": "enableKeyboardHandling"; "required": false; "isSignal": true; }; "hasFixedBottom": { "alias": "hasFixedBottom"; "required": false; "isSignal": true; }; "contentPadding": { "alias": "contentPadding"; "required": false; "isSignal": true; }; "isAutoHeight": { "alias": "isAutoHeight"; "required": false; "isSignal": true; }; }, { "closed": "closed"; "keyboardWillShow": "keyboardWillShow"; "keyboardWillHide": "keyboardWillHide"; }, never, never, true, never>;
 }
@@ -5517,55 +5879,755 @@ declare class DsMobileNewInquiryModalService extends BaseModalService {
 }
 
 /**
- * Handbook detail data interface
- *
- * Represents a handbook category/folder with its sections/items.
- * Use this interface to map your API response data to the component.
- *
- * @example
- * ```typescript
- * const handbookData: HandbookDetailData = {
- *   title: 'Access Systems',
- *   variant: 'blue',
- *   iconName: 'remixKey2Line',
- *   itemCount: 5,
- *   items: [...]
- * };
- * ```
+ * Date option interface for date selection
  */
-interface HandbookDetailData {
-    /** Category/folder title */
-    title: string;
-    /** Color variant: 'success', 'warning', 'destructive', 'blue', 'light-purple', 'pink', 'salmon-orange', 'orange', 'lime-green', 'grey' */
-    variant: string;
-    /** Icon name from design system (e.g., 'remixKey2Line', 'remixLightbulbLine') */
-    iconName: string;
-    /** Total number of items/sections in this category */
-    itemCount: number;
-    /** Array of handbook sections/items */
-    items?: HandbookItem[];
+interface DateOption {
+    id: string;
+    dayName: string;
+    date: string;
+    monthName: string;
+    fullDate: Date;
+    state: 'default' | 'selected' | 'disabled';
 }
 /**
- * Handbook section/item interface
+ * Time slot interface for time selection
+ */
+interface TimeSlot {
+    id: string;
+    startTime: string;
+    endTime: string;
+    state: 'default' | 'selected' | 'disabled';
+}
+/**
+ * Booking result returned when user confirms booking
+ */
+interface BookingResult {
+    facilityId: string;
+    facilityTitle: string;
+    selectedDate: DateOption;
+    selectedTimeSlot: TimeSlot;
+    timestamp: Date;
+}
+/**
+ * DsMobileBookingModalComponent
  *
- * Represents a single section within a handbook category.
- * Each section can have a title, description, images, contacts, and attachments.
+ * Full-screen modal for booking facilities with date and time selection.
+ * Features swipeable date selection and vertical time slot list.
  *
  * @example
  * ```typescript
- * const item: HandbookItem = {
- *   title: 'Key Box Entrance',
- *   description: 'Key box located at main entrance...',
- *   images: ['https://api.example.com/images/keybox.jpg'],
- *   contacts: [{ name: 'Security Co', initials: 'S', phoneNumber: '+45 12345678' }],
- *   attachments: [{ name: 'Manual.pdf', type: 'pdf', url: 'https://...' }]
- * };
+ * const modal = await modalController.create({
+ *   component: DsMobileBookingModalComponent,
+ *   componentProps: {
+ *     facilityId: 'facility-1',
+ *     facilityTitle: 'Boremaskinen'
+ *   }
+ * });
+ * await modal.present();
+ * const result = await modal.onWillDismiss<BookingResult>();
  * ```
  */
-interface HandbookItem {
-    /** Section title */
-    title: string;
-    /** Optional section description */
+declare class DsMobileBookingModalComponent implements AfterViewInit {
+    private modalController;
+    facilityId: string;
+    facilityTitle: string;
+    swiperComponent?: DsMobileSwiperComponent;
+    dateOptions: _angular_core.WritableSignal<DateOption[]>;
+    timeSlots: _angular_core.WritableSignal<TimeSlot[]>;
+    selectedDate: _angular_core.WritableSignal<DateOption | null>;
+    selectedTimeSlot: _angular_core.WritableSignal<TimeSlot | null>;
+    isConfirming: _angular_core.WritableSignal<boolean>;
+    canConfirm: _angular_core.Signal<boolean>;
+    constructor(modalController: ModalController);
+    /**
+     * After view init - force swiper update to fix initial positioning
+     */
+    ngAfterViewInit(): void;
+    /**
+     * Generate mock date and time data
+     */
+    private generateMockData;
+    /**
+     * Generate time slots based on selected date
+     */
+    private generateTimeSlots;
+    /**
+     * Handle date selection
+     */
+    selectDate(selectedDate: DateOption): void;
+    /**
+     * Handle time slot selection
+     */
+    selectTime(selectedSlot: TimeSlot): void;
+    /**
+     * Handle confirm button click
+     */
+    handleConfirm(): Promise<void>;
+    /**
+     * Handle close button click
+     */
+    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>;
+}
+
+/**
+ * DsMobileBookingModalService
+ *
+ * Service for managing the booking modal flow:
+ * 1. Opens the booking modal for date/time selection
+ * 2. On confirmation, opens the confirmation bottom sheet
+ *
+ * @example
+ * ```typescript
+ * constructor(private bookingModalService: DsMobileBookingModalService) {}
+ *
+ * async openBooking() {
+ *   await this.bookingModalService.open('facility-1', 'Boremaskinen');
+ * }
+ * ```
+ */
+declare class DsMobileBookingModalService extends BaseModalService {
+    constructor(modalController: ModalController);
+    /**
+     * Open the booking modal for a facility
+     *
+     * @param facilityId The ID of the facility to book
+     * @param facilityTitle The display name of the facility
+     * @param facilityThumbnail Optional thumbnail image URL
+     * @returns Promise that resolves when the booking flow is complete
+     */
+    open(facilityId: string, facilityTitle: string, facilityThumbnail?: string): Promise<void>;
+    /**
+     * Dismiss all open modals
+     */
+    private dismissAllModals;
+    /**
+     * Open the confirmation bottom sheet after successful booking
+     *
+     * @param booking The booking result data
+     * @param facilityThumbnail Optional thumbnail image URL
+     * @returns Promise that resolves when the sheet is dismissed
+     */
+    private openConfirmationSheet;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBookingModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileBookingModalService>;
+}
+
+/**
+ * DsMobileBookingSummaryComponent
+ *
+ * Displays a booking summary with facility info, thumbnail, date and time.
+ * Designed to be used within the generic confirmation sheet.
+ *
+ * @example
+ * ```html
+ * <ds-mobile-booking-summary
+ *   [facilityTitle]="'Festlokale på taget'"
+ *   [facilityThumbnail]="'/path/to/image.jpg'"
+ *   [date]="'Tue 19 Nov'"
+ *   [time]="'14:00 - 16:00'"
+ * />
+ * ```
+ */
+declare class DsMobileBookingSummaryComponent {
+    /**
+     * Facility title
+     */
+    facilityTitle: string;
+    /**
+     * Optional facility thumbnail URL
+     */
+    facilityThumbnail?: string;
+    /**
+     * Formatted date string (e.g., "Tue 19 Nov")
+     */
+    date?: string;
+    /**
+     * Formatted time string (e.g., "14:00 - 16:00")
+     */
+    time?: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBookingSummaryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBookingSummaryComponent, "ds-mobile-booking-summary", never, { "facilityTitle": { "alias": "facilityTitle"; "required": true; }; "facilityThumbnail": { "alias": "facilityThumbnail"; "required": false; }; "date": { "alias": "date"; "required": false; }; "time": { "alias": "time"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileBookingConfirmationWrapperComponent
+ *
+ * Wrapper component that uses the generic confirmation sheet
+ * specifically for booking confirmations.
+ *
+ * This component handles the booking-specific formatting and
+ * uses content projection to pass the booking summary to the generic sheet.
+ */
+declare class DsMobileBookingConfirmationWrapperComponent {
+    booking: BookingResult;
+    facilityThumbnail?: string;
+    get confirmationMessage(): string;
+    get formattedDate(): string;
+    get formattedTime(): string;
+    private formatFullDate;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileBookingConfirmationWrapperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileBookingConfirmationWrapperComponent, "ds-mobile-booking-confirmation-wrapper", never, { "booking": { "alias": "booking"; "required": false; }; "facilityThumbnail": { "alias": "facilityThumbnail"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * New facility form data
+ */
+interface NewFacilityData {
+    title: string;
+    description: string;
+    whoCanBook: string;
+    whenCanBook: string;
+    price: string;
+    accessRequirements: string;
+    attachments: AttachmentData[];
+}
+/**
+ * DsMobileFacilityCreationModalComponent
+ *
+ * Modal component for creating new facilities.
+ * Uses ds-mobile-modal-base for consistent layout and behavior.
+ *
+ * Features:
+ * - Title and description fields
+ * - Interactive list items for facility options
+ * - Bottom sheet pickers for selections
+ * - Photo upload with preview
+ * - Form validation
+ *
+ * This component is typically not used directly - use DsMobileFacilityCreationModalService instead.
+ */
+declare class DsMobileFacilityCreationModalComponent implements OnInit, AfterViewInit {
+    private modalController;
+    private bottomSheetService;
+    titleInputRef?: ElementRef<HTMLElement>;
+    titleInput?: DsTextareaComponent;
+    fileInput?: ElementRef<HTMLInputElement>;
+    /**
+     * Loading state for the modal
+     */
+    loading: boolean;
+    /**
+     * Error message to display
+     */
+    error?: string;
+    /**
+     * Callback function when form is submitted
+     */
+    onSubmit?: (data: NewFacilityData) => void | Promise<void>;
+    /**
+     * Placeholder for the title field
+     */
+    titlePlaceholder: string;
+    /**
+     * Placeholder for the description field
+     */
+    descriptionPlaceholder: string;
+    /**
+     * Label for the submit button
+     */
+    submitButtonLabel: string;
+    /**
+     * Form title field
+     */
+    title: string;
+    /**
+     * Form description field
+     */
+    description: string;
+    /**
+     * Attachments array
+     */
+    attachments: _angular_core.WritableSignal<AttachmentData[]>;
+    /**
+     * Who can book signal
+     */
+    whoCanBook: _angular_core.WritableSignal<string>;
+    /**
+     * When can it be booked signal
+     */
+    whenCanBook: _angular_core.WritableSignal<string>;
+    /**
+     * Price signal
+     */
+    price: _angular_core.WritableSignal<string>;
+    /**
+     * Access requirements signal
+     */
+    accessRequirements: _angular_core.WritableSignal<string>;
+    /**
+     * Form validation state
+     */
+    isFormValid: _angular_core.WritableSignal<boolean>;
+    /**
+     * Submitting state
+     */
+    isSubmitting: _angular_core.WritableSignal<boolean>;
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    /**
+     * Auto-resize the title textarea based on content
+     */
+    private autoResizeTitleTextarea;
+    /**
+     * Handle title change with auto-resize
+     */
+    handleTitleChange(value: string): void;
+    /**
+     * Validate form fields
+     */
+    validateForm(): void;
+    /**
+     * Open who can book sheet
+     */
+    openWhoSheet(): Promise<void>;
+    /**
+     * Open when can it be booked sheet
+     */
+    openWhenSheet(): Promise<void>;
+    /**
+     * Open price sheet
+     */
+    openPriceSheet(): Promise<void>;
+    /**
+     * Open access requirements sheet
+     */
+    openAccessSheet(): Promise<void>;
+    /**
+     * Add a new photo from camera/library
+     */
+    addPhoto(): Promise<void>;
+    /**
+     * Remove an attachment
+     */
+    removeAttachment(attachmentId: string): void;
+    /**
+     * Handle attachment button click
+     */
+    handleAddAttachment(): void;
+    /**
+     * Detect file type from file name or mime type
+     */
+    private detectFileType;
+    /**
+     * Format file size for display
+     */
+    private formatFileSize;
+    /**
+     * Handle file selection from file input
+     */
+    handleFileSelect(event: Event): void;
+    /**
+     * Handle form submission
+     */
+    handleSubmit(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFacilityCreationModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFacilityCreationModalComponent, "ds-mobile-facility-creation-modal", never, { "loading": { "alias": "loading"; "required": false; }; "error": { "alias": "error"; "required": false; }; "onSubmit": { "alias": "onSubmit"; "required": false; }; "titlePlaceholder": { "alias": "titlePlaceholder"; "required": false; }; "descriptionPlaceholder": { "alias": "descriptionPlaceholder"; "required": false; }; "submitButtonLabel": { "alias": "submitButtonLabel"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Options for opening the facility creation modal
+ */
+interface FacilityCreationModalOptions {
+    /** Callback function when facility is submitted */
+    onSubmit?: (data: NewFacilityData) => void | Promise<void>;
+    /** Initial loading state */
+    loading?: boolean;
+    /** Initial error message */
+    error?: string;
+    /** Custom placeholder for title field */
+    titlePlaceholder?: string;
+    /** Custom placeholder for description field */
+    descriptionPlaceholder?: string;
+    /** Custom label for submit button */
+    submitButtonLabel?: string;
+}
+/**
+ * DsMobileFacilityCreationModalService
+ *
+ * Service for displaying the facility creation modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ *
+ * Features:
+ * - Full-screen modal with form
+ * - Title and description inputs
+ * - Interactive list items for facility options
+ * - Bottom sheet pickers
+ * - Form validation
+ * - Submit handling with confirmation sheet
+ * - Loading and error states
+ *
+ * @example
+ * ```typescript
+ * constructor(private facilityCreationModal: DsMobileFacilityCreationModalService) {}
+ *
+ * async createNewFacility(): Promise<void> {
+ *   await this.facilityCreationModal.open({
+ *     onSubmit: async (data) => {
+ *       console.log('Creating facility:', data);
+ *       await this.apiService.createFacility(data);
+ *       await this.facilityCreationModal.close();
+ *     }
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileFacilityCreationModalService extends BaseModalService {
+    constructor(modalController: ModalController);
+    /**
+     * Open the facility creation modal
+     *
+     * @param options Modal options including onSubmit callback
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(options?: FacilityCreationModalOptions): Promise<void>;
+    /**
+     * Open the confirmation bottom sheet after successful facility creation
+     *
+     * @param facilityData The created facility data
+     * @returns Promise that resolves when the sheet is dismissed
+     */
+    private openConfirmationSheet;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFacilityCreationModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileFacilityCreationModalService>;
+}
+
+/**
+ * DsMobileFacilityCreationConfirmationWrapperComponent
+ *
+ * Wrapper component that uses the generic confirmation sheet
+ * specifically for facility creation confirmations.
+ *
+ * This component displays a summary of the created facility.
+ */
+declare class DsMobileFacilityCreationConfirmationWrapperComponent {
+    facilityData: NewFacilityData;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFacilityCreationConfirmationWrapperComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFacilityCreationConfirmationWrapperComponent, "ds-mobile-facility-creation-confirmation-wrapper", never, { "facilityData": { "alias": "facilityData"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+interface WhoCanBookOption {
+    value: string;
+    label: string;
+    isMaster?: boolean;
+}
+/**
+ * DsMobileWhoCanBookSheetComponent
+ *
+ * Bottom sheet for selecting who can book a facility (multi-select with checkboxes).
+ */
+declare class DsMobileWhoCanBookSheetComponent {
+    private modalController;
+    options: WhoCanBookOption[];
+    selectedOptions: _angular_core.WritableSignal<Set<string>>;
+    hasSelectionChanged: _angular_core.Signal<boolean>;
+    constructor(modalController: ModalController);
+    /**
+     * Toggle an option on/off
+     * Special logic for 'alle': when toggled on, selects all options; when toggled off, deselects all
+     */
+    toggleOption(value: string): void;
+    /**
+     * Confirm selection and dismiss with selected options
+     */
+    confirmSelection(): void;
+    /**
+     * Dismiss without saving
+     */
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileWhoCanBookSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileWhoCanBookSheetComponent, "ds-mobile-who-can-book-sheet", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileWhenCanBookSheetComponent
+ *
+ * Bottom sheet for selecting when a facility can be booked (days, time range, duration).
+ */
+declare class DsMobileWhenCanBookSheetComponent {
+    private modalController;
+    selectedDays: _angular_core.WritableSignal<Set<string>>;
+    startTime: _angular_core.WritableSignal<string>;
+    endTime: _angular_core.WritableSignal<string>;
+    selectedDuration: _angular_core.WritableSignal<string>;
+    days: string[];
+    durations: {
+        value: string;
+        label: string;
+    }[];
+    isValid: _angular_core.Signal<string | false>;
+    constructor(modalController: ModalController);
+    /**
+     * Toggle day selection
+     */
+    toggleDay(day: string): void;
+    /**
+     * Confirm selection and dismiss with data
+     */
+    confirmSelection(): void;
+    /**
+     * Dismiss without saving
+     */
+    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>;
+}
+
+/**
+ * DsMobilePriceSheetComponent
+ *
+ * Bottom sheet for setting facility booking price with toggle for free and custom price input.
+ */
+declare class DsMobilePriceSheetComponent {
+    private modalController;
+    isFree: _angular_core.WritableSignal<boolean>;
+    customPrice: _angular_core.WritableSignal<string>;
+    isValid: _angular_core.Signal<boolean>;
+    constructor(modalController: ModalController);
+    /**
+     * Toggle the "Gratis" (free) option
+     */
+    toggleFree(): void;
+    /**
+     * Confirm selection and dismiss with price value
+     */
+    confirmSelection(): void;
+    /**
+     * Dismiss without saving
+     */
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobilePriceSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobilePriceSheetComponent, "ds-mobile-price-sheet", never, {}, {}, never, never, true, never>;
+}
+
+interface AccessRequirementOption {
+    value: string;
+    label: string;
+}
+/**
+ * DsMobileAccessSheetComponent
+ *
+ * Bottom sheet for selecting facility access requirements (multi-select with checkboxes).
+ */
+declare class DsMobileAccessSheetComponent {
+    private modalController;
+    options: AccessRequirementOption[];
+    selectedRestrictions: _angular_core.WritableSignal<Set<string>>;
+    constructor(modalController: ModalController);
+    /**
+     * Toggle an option on/off
+     */
+    toggleOption(value: string): void;
+    /**
+     * Confirm selection and dismiss with selected restrictions
+     */
+    confirmSelection(): void;
+    /**
+     * Dismiss without saving
+     */
+    dismiss(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileAccessSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileAccessSheetComponent, "ds-mobile-access-sheet", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * Facility data interface for the modal
+ *
+ * Represents a facility with its content, images, requirements, and restrictions.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const facilityData: FacilityDetailData = {
+ *   id: 'facility-1',
+ *   facilityTitle: 'Festlokale på taget',
+ *   heroImage: '/Assets/Dummy-photos/balcony-view.jpg',
+ *   fullDescription: '<p>The rooftop terrace...</p>',
+ *   requirements: ['Kræver nøglekort'],
+ *   bookingType: 'Instant booking',
+ *   expectations: '<p>The terrace is furnished...</p>',
+ *   restrictions: ['No smoking...']
+ * };
+ * ```
+ */
+interface FacilityDetailData {
+    /** Unique facility identifier */
+    id: string;
+    /** Facility title/name */
+    facilityTitle: string;
+    /** Hero image URL for the top of the modal */
+    heroImage?: string;
+    /** Full description of the facility (HTML rich text) */
+    fullDescription: string;
+    /** List of requirements (e.g., "Kræver nøglekort") */
+    requirements?: string[];
+    /** Booking type (e.g., "Instant booking") */
+    bookingType?: string;
+    /** Expectations section content (HTML rich text) */
+    expectations?: string;
+    /** List of restrictions */
+    restrictions?: string[];
+    /** Availability status for display */
+    availabilityStatus?: string;
+    /** Status label text */
+    statusLabel?: string;
+    /** Booking date (for active bookings) */
+    bookingDate?: string;
+    /** Booking time range (for active bookings) */
+    bookingTime?: string;
+}
+/**
+ * DsMobileFacilityDetailModalComponent
+ *
+ * Modal wrapper for displaying facility details with rich content.
+ * Follows the same pattern as the post detail modal for consistent behavior.
+ *
+ * Features:
+ * - Hero image with swiper support
+ * - Requirements and booking type display
+ * - Rich text description
+ * - Expectations section
+ * - Restrictions list
+ * - Fixed bottom booking button
+ * - Native modal controls (close, swipe down)
+ * - Safe area support
+ *
+ * This component is typically not used directly - use DsMobileFacilityDetailModalService instead.
+ *
+ * @example
+ * ```typescript
+ * // Don't instantiate directly - use the service:
+ * constructor(private facilityModal: DsMobileFacilityDetailModalService) {}
+ *
+ * openFacility() {
+ *   this.facilityModal.open({
+ *     id: 'facility-1',
+ *     facilityTitle: 'Festlokale på taget',
+ *     fullDescription: '<p>Description...</p>'
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileFacilityDetailModalComponent {
+    private modalController;
+    private bookingModalService;
+    /**
+     * Facility data to display in the modal
+     */
+    facilityData: FacilityDetailData;
+    constructor(modalController: ModalController, bookingModalService: DsMobileBookingModalService);
+    /**
+     * Handle booking button click
+     * Opens the booking modal for date/time selection
+     */
+    handleBookNow(): Promise<void>;
+    /**
+     * Close the modal
+     */
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFacilityDetailModalComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<DsMobileFacilityDetailModalComponent, "ds-mobile-facility-detail-modal", never, { "facilityData": { "alias": "facilityData"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * DsMobileFacilityDetailModalService
+ *
+ * Service for displaying facility details in a full-screen modal.
+ * Built on Ionic's modal system with native gestures and animations.
+ * Follows the same pattern as DsMobilePostDetailModalService for consistent behavior.
+ *
+ * Features:
+ * - Full facility information display
+ * - Hero image with swiper
+ * - Rich text description support
+ * - Requirements and booking type display
+ * - Restrictions list
+ * - Fixed bottom booking button
+ * - Native modal animations
+ * - Safe area support
+ *
+ * @example
+ * ```typescript
+ * constructor(private facilityModal: DsMobileFacilityDetailModalService) {}
+ *
+ * async openFacility() {
+ *   await this.facilityModal.open({
+ *     id: 'facility-1',
+ *     facilityTitle: 'Festlokale på taget',
+ *     heroImage: '/Assets/Dummy-photos/balcony-view.jpg',
+ *     fullDescription: '<p>The rooftop terrace is designed...</p>',
+ *     requirements: ['Kræver nøglekort'],
+ *     bookingType: 'Instant booking',
+ *     expectations: '<p>The terrace is furnished...</p>',
+ *     restrictions: ['No smoking or vaping...']
+ *   });
+ * }
+ * ```
+ */
+declare class DsMobileFacilityDetailModalService extends BaseModalService {
+    constructor(modalController: ModalController);
+    /**
+     * Open the facility detail modal
+     *
+     * @param facilityData Facility data to display
+     * @returns Promise that resolves when the modal is presented
+     */
+    open(facilityData: FacilityDetailData): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<DsMobileFacilityDetailModalService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<DsMobileFacilityDetailModalService>;
+}
+
+/**
+ * Handbook detail data interface
+ *
+ * Represents a handbook category/folder with its sections/items.
+ * Use this interface to map your API response data to the component.
+ *
+ * @example
+ * ```typescript
+ * const handbookData: HandbookDetailData = {
+ *   title: 'Access Systems',
+ *   variant: 'blue',
+ *   iconName: 'remixKey2Line',
+ *   itemCount: 5,
+ *   items: [...]
+ * };
+ * ```
+ */
+interface HandbookDetailData {
+    /** Category/folder title */
+    title: string;
+    /** Color variant: 'success', 'warning', 'destructive', 'blue', 'light-purple', 'pink', 'salmon-orange', 'orange', 'lime-green', 'grey' */
+    variant: string;
+    /** Icon name from design system (e.g., 'remixKey2Line', 'remixLightbulbLine') */
+    iconName: string;
+    /** Total number of items/sections in this category */
+    itemCount: number;
+    /** Array of handbook sections/items */
+    items?: HandbookItem[];
+}
+/**
+ * Handbook section/item interface
+ *
+ * Represents a single section within a handbook category.
+ * Each section can have a title, description, images, contacts, and attachments.
+ *
+ * @example
+ * ```typescript
+ * const item: HandbookItem = {
+ *   title: 'Key Box Entrance',
+ *   description: 'Key box located at main entrance...',
+ *   images: ['https://api.example.com/images/keybox.jpg'],
+ *   contacts: [{ name: 'Security Co', initials: 'S', phoneNumber: '+45 12345678' }],
+ *   attachments: [{ name: 'Manual.pdf', type: 'pdf', url: 'https://...' }]
+ * };
+ * ```
+ */
+interface HandbookItem {
+    /** Section title */
+    title: string;
+    /** Optional section description */
     description?: string;
     /** Array of image URLs to display */
     images?: string[];
@@ -6235,9 +7297,9 @@ declare class DsMobileIllustrationComponent {
     private sanitizer;
     /**
      * Predefined illustration variant
-     * Available variants: 'post', 'inquiry'
+     * Available variants: 'post', 'inquiry', 'confirmation'
      */
-    variant: _angular_core.InputSignal<"post" | "inquiry">;
+    variant: _angular_core.InputSignal<"post" | "inquiry" | "confirmation">;
     /**
      * Illustration size (width and height)
      * @default '120px'
@@ -6621,6 +7683,59 @@ declare class MobileTabsExampleComponent implements OnInit {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileTabsExampleComponent, "app-mobile-tabs-example", never, {}, {}, never, never, true, never>;
 }
 
+interface FacilityDetail {
+    id: string;
+    thumbnail: string;
+    facilityTitle: string;
+    description: string;
+    availabilityStatus?: 'available-today' | 'available-from' | 'unavailable';
+    statusLabel?: string;
+    heroImage?: string;
+    fullDescription: string;
+    requirements?: string[];
+    bookingType?: string;
+    expectations?: string;
+    restrictions?: string[];
+    bookingDate?: string;
+    bookingTime?: string;
+}
+declare class MobileBookingPageComponent {
+    private facilityModal;
+    private facilityCreationModal;
+    pageComponent: DsMobilePageMainComponent;
+    bookingsSwiper?: DsMobileSwiperComponent;
+    constructor(facilityModal: DsMobileFacilityDetailModalService, facilityCreationModal: DsMobileFacilityCreationModalService);
+    activeBookings: _angular_core.WritableSignal<FacilityDetail[]>;
+    availableFacilities: _angular_core.WritableSignal<FacilityDetail[]>;
+    handleRefresh(event: any): void;
+    /**
+     * Navigate to previous slide
+     */
+    slidePrev(): void;
+    /**
+     * Navigate to next slide
+     */
+    slideNext(): void;
+    /**
+     * Check if at first slide
+     */
+    isFirstSlide(): boolean;
+    /**
+     * Check if at last slide
+     */
+    isLastSlide(): boolean;
+    /**
+     * Open facility detail modal
+     */
+    openFacilityDetail(facilityId: string): Promise<void>;
+    /**
+     * Open facility creation modal
+     */
+    openFacilityCreationModal(): Promise<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileBookingPageComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileBookingPageComponent, "app-mobile-booking-page", never, {}, {}, never, never, true, never>;
+}
+
 /**
  * PostCreatePageComponent
  *
@@ -6820,5 +7935,5 @@ declare const customPageTransition: (_: HTMLElement, opts: any) => Animation;
  */
 declare const customBackTransition: (_: HTMLElement, opts: any) => Animation;
 
-export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFileAttachmentComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileSwiperComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsTextInputComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
-export type { ActionGroup, ActionItem, ActionResult, AppIconSize, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, DropdownAlign, DropdownPosition, DsMobileDropdownItem, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, LogoSize, LogoVariant, ModalOptions, NetworkStatus, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, WhitelabelConfig };
+export { ActionCommentComponent, ActionLikeComponent, ContentRowComponent, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileDropdownComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePropertyBannerComponent, DsMobileSectionComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, SectionHeaderComponent, SignInPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, UserService, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition };
+export type { ActionGroup, ActionItem, ActionResult, AppIconSize, AttachmentData, AttachmentFileType, AttachmentItem, AvatarSize, AvatarType, BadgePosition, BookingResult, BottomSheetOptions, ChatAttachment, ChatMessage, ChatModalData, ChatParticipant, Comment, ActionResult as CommentActionResult, CommentData, ContactItem, ContentWidth, DateOption, DropdownAlign, DropdownPosition, DsMobileDropdownItem, FacilityCreationModalOptions, FacilityDetailData, HandbookDetailData, HandbookItem, InlineTabItem, InquiryPhoto, Language, LightboxAuthor, LightboxImage, LightboxImageOptions, LightboxMediaFile, LightboxMediaType, LightboxOptions, LightboxPdf, LightboxPdfOptions, LogoSize, LogoVariant, ModalOptions, NetworkStatus, NewFacilityData, NewInquiryData, NewInquiryModalOptions, Post, ActionResult as PostActionResult, PostDetailData, TabConfig, TimeSlot, WhitelabelConfig };