npm - @propbinder/mobile-design - Versions diffs - 0.3.38 → 0.3.39 - Mend

@propbinder/mobile-design 0.3.38 → 0.3.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/fesm2022/propbinder-mobile-design.mjs +493 -472
package/fesm2022/propbinder-mobile-design.mjs.map +1 -1
package/index.d.ts +59 -35
package/package.json +1 -1

package/fesm2022/propbinder-mobile-design.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { signal, computed, effect, Injectable, inject, Input, Component, input, output, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, ElementRef, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, ContentChild, forwardRef, ViewChild, afterNextRender, ViewEncapsulation, model, createComponent, ChangeDetectionStrategy, NgZone, Pipe, HostBinding, InjectionToken } from '@angular/core';
+import { signal, computed, effect, Injectable, inject, Input, Component, input, output, Directive, EventEmitter, HostListener, Output, PLATFORM_ID, ElementRef, CUSTOM_ELEMENTS_SCHEMA, TemplateRef, ContentChild, forwardRef, ViewChild, afterNextRender, ViewEncapsulation, model, createComponent, ChangeDetectionStrategy, NgZone, HostBinding, Pipe, InjectionToken } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$3 from '@angular/router';
@@ -6186,7 +6186,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
       <!-- Pull to refresh (only on native iOS/Android) -->
       @if (showRefresh() && isNativePlatform()) {
-      <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.4" [pullMin]="80" [pullMax]="240" closeDuration="600ms">
+      <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.5" [pullMin]="80" [pullMax]="240" [snapbackDuration]="'280ms'" closeDuration="280ms">
         <ion-refresher-content pullingIcon="remixArrowDownS" refreshingSpinner="crescent"> </ion-refresher-content>
       </ion-refresher>
       }
@@ -6275,7 +6275,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <!-- Pull to refresh (only on native iOS/Android) -->
       @if (showRefresh() && isNativePlatform()) {
-      <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.4" [pullMin]="80" [pullMax]="240" closeDuration="600ms">
+      <ion-refresher slot="fixed" (ionRefresh)="handleRefresh($event)" [pullFactor]="0.5" [pullMin]="80" [pullMax]="240" [snapbackDuration]="'280ms'" closeDuration="280ms">
         <ion-refresher-content pullingIcon="remixArrowDownS" refreshingSpinner="crescent"> </ion-refresher-content>
       </ion-refresher>
       }
@@ -6727,10 +6727,11 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
         <ion-refresher
           slot="fixed"
           (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4"
+          [pullFactor]="0.5"
           [pullMin]="80"
           [pullMax]="240"
-          closeDuration="600ms">
+          [snapbackDuration]="'280ms'"
+          closeDuration="280ms">
           <ion-refresher-content
             pullingIcon="remixArrowDownS"
             refreshingSpinner="crescent">
@@ -6819,10 +6820,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ion-refresher
           slot="fixed"
           (ionRefresh)="handleRefresh($event)"
-          [pullFactor]="0.4"
+          [pullFactor]="0.5"
           [pullMin]="80"
           [pullMax]="240"
-          closeDuration="600ms">
+          [snapbackDuration]="'280ms'"
+          closeDuration="280ms">
           <ion-refresher-content
             pullingIcon="remixArrowDownS"
             refreshingSpinner="crescent">
@@ -22211,6 +22213,7 @@ class DsMobilePostDetailModalComponent {
      */
     cancelEdit() {
         this.editingComment.set(null);
+        this.replyingTo.set(null);
         this.commentText.set('');
     }
     /**
@@ -22219,6 +22222,17 @@ class DsMobilePostDetailModalComponent {
     handleEditComment(comment) {
         // Clear reply state if active
         this.replyingTo.set(null);
+        let contentToEdit = comment.content;
+        const possibleNames = [this.post().authorName, ...(this.post().comments?.map((c) => c.authorName) || [])];
+        const uniqueNames = Array.from(new Set(possibleNames)).sort((a, b) => b.length - a.length);
+        for (const author of uniqueNames) {
+            const tagPrefix = `@${author} `;
+            if (contentToEdit.startsWith(tagPrefix)) {
+                this.replyingTo.set({ authorName: author, content: '' });
+                contentToEdit = contentToEdit.substring(tagPrefix.length);
+                break;
+            }
+        }
         // Set edit state
         this.editingComment.set({
             id: comment.id,
@@ -22227,7 +22241,7 @@ class DsMobilePostDetailModalComponent {
             timestamp: comment.timestamp,
         });
         // Populate the input with existing content
-        this.commentText.set(comment.content);
+        this.commentText.set(contentToEdit);
         // Focus the input, show keyboard, and auto-resize
         setTimeout(() => {
             if (this.commentInput?.nativeElement) {
@@ -22297,10 +22311,12 @@ class DsMobilePostDetailModalComponent {
             // console.log('[PostDetailModal] Updating comment:', text);
             const editing = this.editingComment();
             const updatedComments = currentPost.comments?.map((comment) => {
-                if (comment.id && editing.id && comment.id === editing.id) {
+                const matchesId = comment.id && editing.id && comment.id === editing.id;
+                const matchesContent = !comment.id && !editing.id && comment.authorName === editing.authorName && comment.content === editing.originalContent;
+                if (matchesId || matchesContent) {
                     return {
                         ...comment,
-                        content: text,
+                        content: finalText,
                         timestamp: `${this.textJustNow} (${this.textEdited})`,
                     };
                 }
@@ -22318,6 +22334,7 @@ class DsMobilePostDetailModalComponent {
                 });
             }
             this.editingComment.set(null);
+            this.replyingTo.set(null);
         }
         else {
             // console.log('[PostDetailModal] Submitting comment:', finalText);
@@ -22552,8 +22569,10 @@ class DsMobilePostDetailModalComponent {
               <ds-icon name="remixCloseLine" size="16px" />
             </button>
           </div>
-          } @else if (replyingTo()) {
+          }
           <!-- Reply indicator -->
+          @if (replyingTo()) {
           <div class="reply-indicator">
             <div class="reply-indicator-content">
               <ds-icon name="remixReplyLine" size="16px" />
@@ -22698,8 +22717,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <ds-icon name="remixCloseLine" size="16px" />
             </button>
           </div>
-          } @else if (replyingTo()) {
+          }
           <!-- Reply indicator -->
+          @if (replyingTo()) {
           <div class="reply-indicator">
             <div class="reply-indicator-content">
               <ds-icon name="remixReplyLine" size="16px" />
@@ -24674,6 +24695,465 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
+class DsMobileBookingDetailSheetComponent {
+    modalController;
+    /** `sheet` = bottom sheet. `modal` = `ds-modal-base` shell (active + history bookings). */
+    presentation = 'sheet';
+    data;
+    /** When true the modal sizes to its content instead of filling the screen. */
+    autoHeight = false;
+    get isModalPresentation() {
+        return this.presentation === 'modal';
+    }
+    constructor(modalController) {
+        this.modalController = modalController;
+    }
+    close() {
+        this.modalController.dismiss(null, 'backdrop');
+    }
+    cancelBooking() {
+        this.modalController.dismiss(null, 'cancel');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingDetailSheetComponent, isStandalone: true, selector: "ds-mobile-booking-detail-sheet", inputs: { presentation: "presentation", data: "data", autoHeight: "autoHeight" }, host: { properties: { "class.presentation-modal": "this.isModalPresentation" } }, ngImport: i0, template: `
+    @if (presentation === 'modal') {
+      <ds-mobile-modal-base
+        [headerTitle]="data.facilityTitle"
+        [closeButtonLabel]="'Luk'"
+        [isAutoHeight]="autoHeight"
+        [keyboardContentBehavior]="'follow'">
+        <ds-mobile-section
+          [showBorder]="false"
+          padding="20px 20px 0 20px">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+        </ds-mobile-section>
+        <ds-mobile-section padding="20px 20px 20px 20px">
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </ds-mobile-section>
+        @if (data.canCancel) {
+          <div class="booking-action">
+            <div class="booking-actions-row">
+              <ds-button
+                class="cancel-primary"
+                size="md"
+                variant="secondary"
+                (clicked)="cancelBooking()">
+                Annuller booking
+              </ds-button>
+            </div>
+          </div>
+        }
+      </ds-mobile-modal-base>
+    } @else {
+      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
+        <div class="detail-header">
+          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
+          <ds-icon-button
+            icon="remixCloseLine"
+            variant="ghost"
+            size="sm"
+            (clicked)="close()"
+            aria-label="Luk"
+          />
+        </div>
+        <div class="detail-content">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+          @if (data.canCancel) {
+            <div class="footer-button-container">
+              <div class="booking-actions-column">
+                <ds-button
+                  size="md"
+                  variant="secondary"
+                  (clicked)="cancelBooking()">
+                  Annuller booking
+                </ds-button>
+              </div>
+            </div>
+          }
+        </div>
+      </ds-mobile-bottom-sheet-wrapper>
+    }
+  `, isInline: true, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper", inputs: ["showDragHandle"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "textLoading", "textErrorTitle", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-booking-detail-sheet', standalone: true, imports: [
+                        CommonModule,
+                        DsMobileBottomSheetWrapperComponent,
+                        DsMobileModalBaseComponent,
+                        DsMobileSectionComponent,
+                        DsButtonComponent,
+                        DsIconComponent,
+                        DsIconButtonComponent,
+                    ], template: `
+    @if (presentation === 'modal') {
+      <ds-mobile-modal-base
+        [headerTitle]="data.facilityTitle"
+        [closeButtonLabel]="'Luk'"
+        [isAutoHeight]="autoHeight"
+        [keyboardContentBehavior]="'follow'">
+        <ds-mobile-section
+          [showBorder]="false"
+          padding="20px 20px 0 20px">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+        </ds-mobile-section>
+        <ds-mobile-section padding="20px 20px 20px 20px">
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+        </ds-mobile-section>
+        @if (data.canCancel) {
+          <div class="booking-action">
+            <div class="booking-actions-row">
+              <ds-button
+                class="cancel-primary"
+                size="md"
+                variant="secondary"
+                (clicked)="cancelBooking()">
+                Annuller booking
+              </ds-button>
+            </div>
+          </div>
+        }
+      </ds-mobile-modal-base>
+    } @else {
+      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
+        <div class="detail-header">
+          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
+          <ds-icon-button
+            icon="remixCloseLine"
+            variant="ghost"
+            size="sm"
+            (clicked)="close()"
+            aria-label="Luk"
+          />
+        </div>
+        <div class="detail-content">
+          <div class="hero-image-container">
+            @if (data.heroImage) {
+              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
+            } @else {
+              <div class="hero-image-placeholder">
+                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
+              </div>
+            }
+          </div>
+          <div class="booking-summary-card">
+            <div class="details-section">
+              <h3 class="details-heading">Booking detaljer</h3>
+              <div class="info-rows">
+                @if (data.bookingDate) {
+                  <div class="info-row">
+                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingDate }}</span>
+                  </div>
+                }
+                @if (data.bookingTime) {
+                  <div class="info-row">
+                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingTime }}</span>
+                  </div>
+                }
+                @if (data.price) {
+                  <div class="info-row">
+                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
+                    <span>{{ data.price }}</span>
+                  </div>
+                }
+                @if (data.bookingType) {
+                  <div class="info-row">
+                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
+                    <span>{{ data.bookingType }}</span>
+                  </div>
+                }
+                @for (req of data.requirements || []; track req) {
+                  <div class="info-row">
+                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
+                    <span>{{ req }}</span>
+                  </div>
+                }
+              </div>
+            </div>
+          </div>
+          @if (data.canCancel) {
+            <div class="footer-button-container">
+              <div class="booking-actions-column">
+                <ds-button
+                  size="md"
+                  variant="secondary"
+                  (clicked)="cancelBooking()">
+                  Annuller booking
+                </ds-button>
+              </div>
+            </div>
+          }
+        </div>
+      </ds-mobile-bottom-sheet-wrapper>
+    }
+  `, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { presentation: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], autoHeight: [{
+                type: Input
+            }], isModalPresentation: [{
+                type: HostBinding,
+                args: ['class.presentation-modal']
+            }] } });
+class DsMobileBookingDetailSheetService extends BaseModalService {
+    bottomSheet;
+    constructor(modalController, bottomSheet) {
+        super(modalController);
+        this.bottomSheet = bottomSheet;
+    }
+    /**
+     * Bottom-sheet presentation (draggable breakpoints). Prefer `openAsModal` for booking lists.
+     */
+    async open(data) {
+        const modal = await this.bottomSheet.create({
+            component: DsMobileBookingDetailSheetComponent,
+            componentProps: { data },
+            autoHeight: true,
+            backdropDismiss: true,
+            backdropBlur: true,
+        });
+        const result = await modal.onWillDismiss();
+        return { role: result.role, data: result.data ?? undefined };
+    }
+    /** `ds-modal-base` shell — used for active and past bookings. Auto-heights to content. */
+    async openAsModal(data) {
+        const modal = await this.createModal(DsMobileBookingDetailSheetComponent, { data, presentation: 'modal', autoHeight: true }, { keyboardClose: true, autoHeight: true });
+        await modal.present();
+        const result = await modal.onWillDismiss();
+        return { role: result.role, data: result.data ?? undefined };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, deps: [{ token: i1.ModalController }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileBottomSheetService }] });
+class DsMobileBookingCancelConfirmationComponent {
+    facilityTitle;
+    facilityThumbnail;
+    bookingDate;
+    bookingTime;
+    get confirmationMessage() {
+        const datePart = this.bookingDate ? ` den ${this.bookingDate}` : '';
+        return `Er du sikker på, at du vil annullere din booking af ${this.facilityTitle}${datePart}?`;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingCancelConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileBookingCancelConfirmationComponent, isStandalone: true, selector: "ds-mobile-booking-cancel-confirmation", inputs: { facilityTitle: "facilityTitle", facilityThumbnail: "facilityThumbnail", bookingDate: "bookingDate", bookingTime: "bookingTime" }, ngImport: i0, template: `
+    <ds-mobile-confirmation-sheet
+      [title]="'Annuller booking?'"
+      [message]="confirmationMessage"
+      [buttonText]="'Ja, annuller booking'"
+      [destructive]="true"
+      [secondaryButtonText]="'Luk'"
+      [secondaryButtonVariant]="'secondary'"
+      [illustrationVariant]="'delete-warning'"
+      [illustrationSize]="'140px'">
+      <ng-template #summary>
+        <ds-mobile-booking-summary
+          [facilityTitle]="facilityTitle"
+          [facilityThumbnail]="facilityThumbnail"
+          [date]="bookingDate"
+          [time]="bookingTime"
+        />
+      </ng-template>
+    </ds-mobile-confirmation-sheet>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileConfirmationSheetComponent, selector: "ds-mobile-confirmation-sheet", inputs: ["title", "message", "buttonText", "destructive", "showCancelButton", "cancelButtonText", "showIllustration", "illustrationVariant", "illustrationSize", "secondaryButtonText", "secondaryButtonVariant"] }, { kind: "component", type: DsMobileBookingSummaryComponent, selector: "ds-mobile-booking-summary", inputs: ["facilityTitle", "facilityThumbnail", "date", "time", "bookingCount"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingCancelConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'ds-mobile-booking-cancel-confirmation',
+                    standalone: true,
+                    imports: [
+                        CommonModule,
+                        DsMobileConfirmationSheetComponent,
+                        DsMobileBookingSummaryComponent
+                    ],
+                    template: `
+    <ds-mobile-confirmation-sheet
+      [title]="'Annuller booking?'"
+      [message]="confirmationMessage"
+      [buttonText]="'Ja, annuller booking'"
+      [destructive]="true"
+      [secondaryButtonText]="'Luk'"
+      [secondaryButtonVariant]="'secondary'"
+      [illustrationVariant]="'delete-warning'"
+      [illustrationSize]="'140px'">
+      <ng-template #summary>
+        <ds-mobile-booking-summary
+          [facilityTitle]="facilityTitle"
+          [facilityThumbnail]="facilityThumbnail"
+          [date]="bookingDate"
+          [time]="bookingTime"
+        />
+      </ng-template>
+    </ds-mobile-confirmation-sheet>
+  `
+                }]
+        }], propDecorators: { facilityTitle: [{
+                type: Input
+            }], facilityThumbnail: [{
+                type: Input
+            }], bookingDate: [{
+                type: Input
+            }], bookingTime: [{
+                type: Input
+            }] } });
 /**
  * DsMobileFacilityCreationModalComponent
  *
@@ -30301,393 +30781,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 }]
         }], ctorParameters: () => [] });
-class DsMobileBookingDetailSheetComponent {
-    modalController;
-    /** `sheet` = bottom sheet. `modal` = `ds-modal-base` shell (active + history bookings). */
-    presentation = 'sheet';
-    data;
-    /** When true the modal sizes to its content instead of filling the screen. */
-    autoHeight = false;
-    get isModalPresentation() {
-        return this.presentation === 'modal';
-    }
-    constructor(modalController) {
-        this.modalController = modalController;
-    }
-    close() {
-        this.modalController.dismiss(null, 'backdrop');
-    }
-    cancelBooking() {
-        this.modalController.dismiss(null, 'cancel');
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingDetailSheetComponent, isStandalone: true, selector: "ds-mobile-booking-detail-sheet", inputs: { presentation: "presentation", data: "data", autoHeight: "autoHeight" }, host: { properties: { "class.presentation-modal": "this.isModalPresentation" } }, ngImport: i0, template: `
-    @if (presentation === 'modal') {
-      <ds-mobile-modal-base
-        [headerTitle]="data.facilityTitle"
-        [closeButtonLabel]="'Luk'"
-        [isAutoHeight]="autoHeight"
-        [keyboardContentBehavior]="'follow'">
-        <ds-mobile-section
-          [showBorder]="false"
-          padding="20px 20px 0 20px">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-        </ds-mobile-section>
-        <ds-mobile-section padding="20px 20px 20px 20px">
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </ds-mobile-section>
-        @if (data.canCancel) {
-          <div class="booking-action">
-            <div class="booking-actions-row">
-              <ds-button
-                class="cancel-primary"
-                size="md"
-                variant="secondary"
-                (clicked)="cancelBooking()">
-                Annuller booking
-              </ds-button>
-            </div>
-          </div>
-        }
-      </ds-mobile-modal-base>
-    } @else {
-      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
-        <div class="detail-header">
-          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
-          <ds-icon-button
-            icon="remixCloseLine"
-            variant="ghost"
-            size="sm"
-            (clicked)="close()"
-            aria-label="Luk"
-          />
-        </div>
-        <div class="detail-content">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-          @if (data.canCancel) {
-            <div class="footer-button-container">
-              <div class="booking-actions-column">
-                <ds-button
-                  size="md"
-                  variant="secondary"
-                  (clicked)="cancelBooking()">
-                  Annuller booking
-                </ds-button>
-              </div>
-            </div>
-          }
-        </div>
-      </ds-mobile-bottom-sheet-wrapper>
-    }
-  `, isInline: true, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper", inputs: ["showDragHandle"] }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["headerTitleInteractive", "textLoading", "textErrorTitle", "showHeader"], outputs: ["titleClick"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "paddingDesktop", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ds-mobile-booking-detail-sheet', standalone: true, imports: [
-                        CommonModule,
-                        DsMobileBottomSheetWrapperComponent,
-                        DsMobileModalBaseComponent,
-                        DsMobileSectionComponent,
-                        DsButtonComponent,
-                        DsIconComponent,
-                        DsIconButtonComponent,
-                    ], template: `
-    @if (presentation === 'modal') {
-      <ds-mobile-modal-base
-        [headerTitle]="data.facilityTitle"
-        [closeButtonLabel]="'Luk'"
-        [isAutoHeight]="autoHeight"
-        [keyboardContentBehavior]="'follow'">
-        <ds-mobile-section
-          [showBorder]="false"
-          padding="20px 20px 0 20px">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-        </ds-mobile-section>
-        <ds-mobile-section padding="20px 20px 20px 20px">
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-        </ds-mobile-section>
-        @if (data.canCancel) {
-          <div class="booking-action">
-            <div class="booking-actions-row">
-              <ds-button
-                class="cancel-primary"
-                size="md"
-                variant="secondary"
-                (clicked)="cancelBooking()">
-                Annuller booking
-              </ds-button>
-            </div>
-          </div>
-        }
-      </ds-mobile-modal-base>
-    } @else {
-      <ds-mobile-bottom-sheet-wrapper [showDragHandle]="true">
-        <div class="detail-header">
-          <h2 class="detail-title">{{ data.facilityTitle }}</h2>
-          <ds-icon-button
-            icon="remixCloseLine"
-            variant="ghost"
-            size="sm"
-            (clicked)="close()"
-            aria-label="Luk"
-          />
-        </div>
-        <div class="detail-content">
-          <div class="hero-image-container">
-            @if (data.heroImage) {
-              <img [src]="data.heroImage" [alt]="data.facilityTitle" class="hero-image" />
-            } @else {
-              <div class="hero-image-placeholder">
-                <ds-icon name="remixImageLine" size="48px" color="rgba(255,255,255,0.5)" />
-              </div>
-            }
-          </div>
-          <div class="booking-summary-card">
-            <div class="details-section">
-              <h3 class="details-heading">Booking detaljer</h3>
-              <div class="info-rows">
-                @if (data.bookingDate) {
-                  <div class="info-row">
-                    <ds-icon name="remixCalendarLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingDate }}</span>
-                  </div>
-                }
-                @if (data.bookingTime) {
-                  <div class="info-row">
-                    <ds-icon name="remixTimeLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingTime }}</span>
-                  </div>
-                }
-                @if (data.price) {
-                  <div class="info-row">
-                    <ds-icon name="remixPriceTag3Line" size="16px" color="tertiary" />
-                    <span>{{ data.price }}</span>
-                  </div>
-                }
-                @if (data.bookingType) {
-                  <div class="info-row">
-                    <ds-icon name="remixCheckboxCircleLine" size="16px" color="tertiary" />
-                    <span>{{ data.bookingType }}</span>
-                  </div>
-                }
-                @for (req of data.requirements || []; track req) {
-                  <div class="info-row">
-                    <ds-icon name="remixLockLine" size="16px" color="tertiary" />
-                    <span>{{ req }}</span>
-                  </div>
-                }
-              </div>
-            </div>
-          </div>
-          @if (data.canCancel) {
-            <div class="footer-button-container">
-              <div class="booking-actions-column">
-                <ds-button
-                  size="md"
-                  variant="secondary"
-                  (clicked)="cancelBooking()">
-                  Annuller booking
-                </ds-button>
-              </div>
-            </div>
-          }
-        </div>
-      </ds-mobile-bottom-sheet-wrapper>
-    }
-  `, styles: [":host{display:block;height:auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;box-sizing:border-box}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 8px}.detail-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:12px}.detail-content{padding:8px 20px 24px;display:flex;flex-direction:column;gap:20px}.hero-image-container{width:100%;aspect-ratio:16 / 9;border-radius:12px;overflow:hidden;background:var(--color-surface-secondary, #f5f5f5)}.hero-image{width:100%;height:100%;object-fit:cover;display:block}.hero-image-placeholder{width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent, #6B5FF5) 30%,transparent),color-mix(in srgb,var(--color-accent, #6B5FF5) 60%,transparent))}.booking-summary-card{background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:16px;padding:16px}.details-section{display:flex;flex-direction:column;gap:12px}.details-heading{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:600;color:var(--text-color-default-primary, #202227);margin:0}.info-rows{display:flex;flex-direction:column;gap:8px}.info-row{display:flex;align-items:center;gap:10px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);color:var(--text-color-default-secondary, #545B66);line-height:1.4}.info-row ds-icon{flex-shrink:0}.footer-button-container{width:100%;padding:16px 20px 0}.footer-button-container ::ng-deep ds-button{display:block;width:100%}.footer-button-container ::ng-deep ds-button button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px}.booking-action{padding:16px 20px;padding-bottom:calc(16px + max(8px,env(safe-area-inset-bottom,0px) - 24px));background:var(--color-surface-primary, #ffffff)}.booking-actions-row{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}.booking-action .cancel-primary{flex:1;min-width:0;display:block}.booking-action .cancel-primary ::ng-deep button{width:100%;border-radius:100px;height:44px;min-height:44px;max-height:44px;padding-left:16px;padding-right:16px}:host.presentation-modal{display:block;height:auto;width:100%;min-height:0;overflow:hidden}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { presentation: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], autoHeight: [{
-                type: Input
-            }], isModalPresentation: [{
-                type: HostBinding,
-                args: ['class.presentation-modal']
-            }] } });
-class DsMobileBookingDetailSheetService extends BaseModalService {
-    bottomSheet;
-    constructor(modalController, bottomSheet) {
-        super(modalController);
-        this.bottomSheet = bottomSheet;
-    }
-    /**
-     * Bottom-sheet presentation (draggable breakpoints). Prefer `openAsModal` for booking lists.
-     */
-    async open(data) {
-        const modal = await this.bottomSheet.create({
-            component: DsMobileBookingDetailSheetComponent,
-            componentProps: { data },
-            autoHeight: true,
-            backdropDismiss: true,
-            backdropBlur: true,
-        });
-        const result = await modal.onWillDismiss();
-        return { role: result.role, data: result.data ?? undefined };
-    }
-    /** `ds-modal-base` shell — used for active and past bookings. Auto-heights to content. */
-    async openAsModal(data) {
-        const modal = await this.createModal(DsMobileBookingDetailSheetComponent, { data, presentation: 'modal', autoHeight: true }, { keyboardClose: true, autoHeight: true });
-        await modal.present();
-        const result = await modal.onWillDismiss();
-        return { role: result.role, data: result.data ?? undefined };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, deps: [{ token: i1.ModalController }, { token: DsMobileBottomSheetService }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingDetailSheetService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: () => [{ type: i1.ModalController }, { type: DsMobileBottomSheetService }] });
 const VENDOR_MODAL_SERVICE = new InjectionToken('VendorModalService');
 const BOOKING_DETAIL_MAP = {
     'booking-1': {
@@ -35691,78 +35784,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}.app-error{position:fixed;inset:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:40px 32px;background:var(--color-header-surface, #2D2356)}.app-error__title{font-family:Brockmann,sans-serif;font-size:var(--font-size-lg, 18px);font-weight:600;color:var(--color-header-content, #fff);text-align:center;margin:0}.app-error__description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:#ffffffa6;text-align:center;margin:0 0 8px}.app-error ds-button::ng-deep .btn{border-radius:9999px}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1$3.Router }, { type: i1.NavController }] });
-class DsMobileBookingCancelConfirmationComponent {
-    facilityTitle;
-    facilityThumbnail;
-    bookingDate;
-    bookingTime;
-    get confirmationMessage() {
-        const datePart = this.bookingDate ? ` den ${this.bookingDate}` : '';
-        return `Er du sikker på, at du vil annullere din booking af ${this.facilityTitle}${datePart}?`;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingCancelConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobileBookingCancelConfirmationComponent, isStandalone: true, selector: "ds-mobile-booking-cancel-confirmation", inputs: { facilityTitle: "facilityTitle", facilityThumbnail: "facilityThumbnail", bookingDate: "bookingDate", bookingTime: "bookingTime" }, ngImport: i0, template: `
-    <ds-mobile-confirmation-sheet
-      [title]="'Annuller booking?'"
-      [message]="confirmationMessage"
-      [buttonText]="'Ja, annuller booking'"
-      [destructive]="true"
-      [secondaryButtonText]="'Luk'"
-      [secondaryButtonVariant]="'secondary'"
-      [illustrationVariant]="'delete-warning'"
-      [illustrationSize]="'140px'">
-      <ng-template #summary>
-        <ds-mobile-booking-summary
-          [facilityTitle]="facilityTitle"
-          [facilityThumbnail]="facilityThumbnail"
-          [date]="bookingDate"
-          [time]="bookingTime"
-        />
-      </ng-template>
-    </ds-mobile-confirmation-sheet>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileConfirmationSheetComponent, selector: "ds-mobile-confirmation-sheet", inputs: ["title", "message", "buttonText", "destructive", "showCancelButton", "cancelButtonText", "showIllustration", "illustrationVariant", "illustrationSize", "secondaryButtonText", "secondaryButtonVariant"] }, { kind: "component", type: DsMobileBookingSummaryComponent, selector: "ds-mobile-booking-summary", inputs: ["facilityTitle", "facilityThumbnail", "date", "time", "bookingCount"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingCancelConfirmationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'ds-mobile-booking-cancel-confirmation',
-                    standalone: true,
-                    imports: [
-                        CommonModule,
-                        DsMobileConfirmationSheetComponent,
-                        DsMobileBookingSummaryComponent
-                    ],
-                    template: `
-    <ds-mobile-confirmation-sheet
-      [title]="'Annuller booking?'"
-      [message]="confirmationMessage"
-      [buttonText]="'Ja, annuller booking'"
-      [destructive]="true"
-      [secondaryButtonText]="'Luk'"
-      [secondaryButtonVariant]="'secondary'"
-      [illustrationVariant]="'delete-warning'"
-      [illustrationSize]="'140px'">
-      <ng-template #summary>
-        <ds-mobile-booking-summary
-          [facilityTitle]="facilityTitle"
-          [facilityThumbnail]="facilityThumbnail"
-          [date]="bookingDate"
-          [time]="bookingTime"
-        />
-      </ng-template>
-    </ds-mobile-confirmation-sheet>
-  `
-                }]
-        }], propDecorators: { facilityTitle: [{
-                type: Input
-            }], facilityThumbnail: [{
-                type: Input
-            }], bookingDate: [{
-                type: Input
-            }], bookingTime: [{
-                type: Input
-            }] } });
 const HISTORY_LINK = {
     da: 'Historik',
     en: 'History',
@@ -38860,5 +38881,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
  * Generated bundle index. Do not edit.
  */
-export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCountBadgeComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileNotificationButtonComponent, DsMobileNotificationModalComponent, DsMobileNotificationModalService, DsMobileNotificationPromptComponent, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileToggleComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, NOTIFICATION_ICON_MAP, NotificationPromptService, NotificationService, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, RelativeTimePipe, SAMPLE_NOTIFICATIONS, SectionHeaderComponent, ServicesPageComponent, SettingsModalService, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, VENDOR_MODAL_SERVICE, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition, dateBucket };
+export { AcceptInvitePageComponent, ActionCommentComponent, ActionLikeComponent, AvatarUploadPageComponent, BaseModalService, ContentRowComponent, CreateAccountPageComponent, DEFAULT_SERVICE_PAGE_LABELS, DsAppIconComponent, DsAvatarWithBadgeComponent, DsLogoComponent, DsMobileAccessSheetComponent, DsMobileActionListItemComponent, DsMobileActionsBottomSheetComponent, DsMobileAddGroupTenantsModalComponent, DsMobileAppLoadingComponent, DsMobileAttachmentPreviewComponent, DsMobileBookingCancelConfirmationComponent, DsMobileBookingConfirmationWrapperComponent, DsMobileBookingDetailSheetComponent, DsMobileBookingDetailSheetService, DsMobileBookingModalComponent, DsMobileBookingModalService, DsMobileBookingSummaryComponent, DsMobileBottomSheetHeaderComponent, DsMobileBottomSheetService, DsMobileBottomSheetWrapperComponent, DsMobileCapacitySheetComponent, DsMobileCardInlineBannerComponent, DsMobileCardInlineComponent, DsMobileCardInlineContactComponent, DsMobileCardInlineFileComponent, DsMobileChatModalComponent, DsMobileChatModalService, DsMobileActionsBottomSheetComponent as DsMobileCommentActionsBottomSheetComponent, DsMobileCommentComponent, DsMobileCommunityAdminPickerComponent, DsMobileCommunityAdminsModalComponent, DsMobileConfirmationSheetComponent, DsMobileContactListItemComponent, DsMobileContentComponent, DsMobileCountBadgeComponent, DsMobileCreateGroupModalComponent, DsMobileDropdownComponent, DsMobileEditGroupModalComponent, DsMobileEmptyStateComponent, DsMobileFabComponent, DsMobileFacilityArchiveConfirmationComponent, DsMobileFacilityCreationConfirmationWrapperComponent, DsMobileFacilityCreationModalComponent, DsMobileFacilityCreationModalService, DsMobileFacilityDeleteConfirmationComponent, DsMobileFacilityDetailModalComponent, DsMobileFacilityDetailModalService, DsMobileFileAttachmentComponent, DsMobileGlassSpinnerComponent, DsMobileGroupAvatarStackComponent, DsMobileGroupMembersModalComponent, DsMobileHandbookDetailModalComponent, DsMobileHandbookDetailModalService, DsMobileHandbookFolderComponent, DsMobileHandbookFolderMiniComponent, DsMobileHeaderContentComponent, DsMobileHeaderContentTileComponent, DsMobileIllustrationComponent, DsMobileImagePlaceholderComponent, DsMobileInlinePhotoComponent, DsMobileInlineTabsComponent, DsMobileInteractiveListItemBookingComponent, DsMobileInteractiveListItemInquiryComponent, DsMobileInteractiveListItemMessageComponent, DsMobileInteractiveListItemPostComponent, DsMobileLightboxImageComponent as DsMobileLightboxComponent, DsMobileLightboxFooterComponent, DsMobileLightboxHeaderComponent, DsMobileLightboxImageComponent, DsMobileLightboxImageWithDescriptionComponent, DsMobileLightboxPdfComponent, DsMobileLightboxService, DsMobileListItemComponent, DsMobileListItemStaticComponent, DsMobileListSearchComponent, DsMobileLoaderOverlayComponent, DsMobileLongPressDirective, DsMobileMediaActionsPanelComponent, DsMobileMessageBubbleComponent, DsMobileMessageComposerComponent, DsMobileModalBaseComponent, DsMobileModalService, DsMobileNewInquiryModalComponent, DsMobileNewInquiryModalService, DsMobileNotificationButtonComponent, DsMobileNotificationModalComponent, DsMobileNotificationModalService, DsMobileNotificationPromptComponent, DsMobileOfflineBannerComponent, DsMobilePageDetailsComponent, DsMobilePageMainComponent, DsMobilePillComponent, DsMobileActionsBottomSheetComponent as DsMobilePostActionsBottomSheetComponent, DsMobilePostComposerComponent, DsMobilePostCreateBottomSheetComponent, DsMobilePostDetailModalComponent, DsMobilePostDetailModalService, DsMobilePriceSheetComponent, DsMobileProfileActionsSheetComponent, DsMobilePromptBottomSheetComponent, DsMobilePropertyBannerComponent, DsMobileRichTextEditorComponent, DsMobileSectionComponent, DsMobileServiceVendorModalService, DsMobileServiceVendorSheetComponent, DsMobileSwiperComponent, DsMobileSwiperWithNavComponent, DsMobileSystemMessageBannerComponent, DsMobileTabBarComponent, DsMobileTabsComponent, DsMobileTenantPickerModalComponent, DsMobileToggleComponent, DsMobileWhenCanBookSheetComponent, DsMobileWhoCanBookSheetComponent, DsTextInputComponent, FamilyAccessPageComponent, FamilyAccessService, InquiriesService, InviteSuccessPageComponent, MediaPickerService, MobileBookingPageComponent, MobileCommunityPageComponent, MobileHandbookPageComponent, MobileHomePageComponent, MobileInquiriesPageComponent, MobileInquiryDetailPageComponent, MobileModalBase, MobilePageBase, MobilePostDetailPageComponent, MobileTabsExampleComponent, NOTIFICATION_ICON_MAP, NotificationPromptService, NotificationService, PageLoadingService, PostActionsComponent, PostAttachmentsComponent, PostContentComponent, PostCreatePageComponent, PostMediaComponent, PostPdfAttachmentComponent, PostTextComponent, PostsService, RelativeTimePipe, SAMPLE_NOTIFICATIONS, SectionHeaderComponent, ServicesPageComponent, SettingsModalService, SignInPageComponent, SignInToAcceptPageComponent, TenantChatPageComponent, TileContentComponent, TileIconComponent, TileLabelComponent, TileValueComponent, TrackingPermissionService, UserService, VENDOR_MODAL_SERVICE, WhitelabelDemoModalComponent, WhitelabelDemoModalService, WhitelabelService, customBackTransition, customPageTransition, dateBucket };
 //# sourceMappingURL=propbinder-mobile-design.mjs.map