@propbinder/mobile-design 0.3.38 → 0.3.40

package/fesm2022/propbinder-mobile-design.mjs

@@ -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';
@@ -665,62 +665,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             }] } });
 
 /**
- * DsMobileGlassSpinnerComponent
+ * DsMobileSkeletonLoaderComponent
  *
- * Reusable loader overlay with a glassmorphism (blurred) background and a spinner.
- * This is useful when you want to show a loading state without covering the entire screen
- * with a solid background, but rather blurring the content behind it.
+ * Reusable skeleton list loader overlay.
+ * Features a modern shimmer layout representing list data.
  *
  * Features:
- * - Glassmorphism blurred background
- * - Centered animated spinner
- * - Customizable spinner size
- * - Absolute positioning to cover parent
+ * - Skeleton list layout mimicking standard data rows
+ * - Shimmer animation effect
+ * - Transparent background (overlays content directly)
  */
-class DsMobileGlassSpinnerComponent {
-    /**
-     * Size of the spinner in pixels
-     * @default 24
-     */
-    spinnerSize = input(24, ...(ngDevMode ? [{ debugName: "spinnerSize" }] : []));
+class DsMobileSkeletonLoaderComponent {
     /**
      * Border radius of the overlay in pixels (should match parent's border radius)
      * @default 0
      */
     borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileGlassSpinnerComponent, isStandalone: true, selector: "ds-mobile-glass-spinner", inputs: { spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <div 
-      class="glass-spinner-overlay" 
-      [style.border-radius.px]="borderRadius()"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading">
-      <div 
-        class="spinner" 
-        [style.width.px]="spinnerSize()"
-        [style.height.px]="spinnerSize()">
-      </div>
-    </div>
-  `, isInline: true, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileSkeletonLoaderComponent, isStandalone: true, selector: "ds-mobile-skeleton-loader", inputs: { borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div 
+      class="skeleton-loader-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div class="skeleton-list">
+        <!-- Generate 4 skeleton rows to mimic a generic list -->
+        @for (i of [1, 2, 3, 4]; track i) {
+          <div class="skeleton-item">
+            <div class="skeleton-avatar shimmer"></div>
+            <div class="skeleton-text-container">
+              <div class="skeleton-text-line shimmer"></div>
+              <div class="skeleton-text-line shimmer short"></div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileSkeletonLoaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
-    <div 
-      class="glass-spinner-overlay" 
-      [style.border-radius.px]="borderRadius()"
-      role="status"
-      aria-live="polite"
-      aria-label="Loading">
-      <div 
-        class="spinner" 
-        [style.width.px]="spinnerSize()"
-        [style.height.px]="spinnerSize()">
-      </div>
-    </div>
-  `, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"] }]
-        }], propDecorators: { spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
+            args: [{ selector: 'ds-mobile-skeleton-loader', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="skeleton-loader-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div class="skeleton-list">
+        <!-- Generate 4 skeleton rows to mimic a generic list -->
+        @for (i of [1, 2, 3, 4]; track i) {
+          <div class="skeleton-item">
+            <div class="skeleton-avatar shimmer"></div>
+            <div class="skeleton-text-container">
+              <div class="skeleton-text-line shimmer"></div>
+              <div class="skeleton-text-line shimmer short"></div>
+            </div>
+          </div>
+        }
+      </div>
+    </div>
+  `, styles: [":host{display:contents}.skeleton-loader-overlay{position:absolute;inset:0;display:flex;flex-direction:column;z-index:9999;border-radius:inherit;padding:16px;overflow:hidden;pointer-events:none}.skeleton-list{display:flex;flex-direction:column;gap:24px;width:100%}.skeleton-item{display:flex;flex-direction:row;align-items:center;gap:16px;width:100%}.skeleton-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0}.skeleton-text-container{display:flex;flex-direction:column;gap:10px;flex-grow:1}.skeleton-text-line{height:12px;border-radius:6px;width:100%}.skeleton-text-line.short{width:60%}.shimmer{background:var(--color-background-tertiary, #f0f0f0);background-image:linear-gradient(90deg,#fff0 0,#ffffff80 40px,#fff0 80px);background-size:600px 100%;animation:shimmer 1.5s infinite linear}@keyframes shimmer{0%{background-position:-300px 0}to{background-position:300px 0}}@media (prefers-color-scheme: dark){.shimmer{background:var(--color-background-tertiary-dark, #2a2a2a);background-image:linear-gradient(90deg,#fff0 0,#ffffff0d 40px,#fff0 80px)}}\n"] }]
+        }], propDecorators: { borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
 
 class DsMobileCountBadgeComponent {
     count = input.required(...(ngDevMode ? [{ debugName: "count" }] : []));
@@ -6186,7 +6193,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>
       }
@@ -6211,7 +6218,7 @@ class DsMobilePageMainComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-glass-spinner [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6223,11 +6230,11 @@ class DsMobilePageMainComponent extends MobilePageBase {
         </div>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", ".header-main{padding:0 20px;height:72px}.header-main__title{transform:translate(-50%) translateY(-100%);opacity:0;transition:transform .6s ease,opacity .6s ease;padding:0;--color: var(--color-header-content)}.header-scrolled .header-main__title{opacity:1;transform:translate(-50%) translateY(0)}.header-main__actions{display:flex;align-items:center;gap:8px}.header-main__actions ds-avatar{cursor:pointer;-webkit-tap-highlight-color:transparent}@keyframes logoSlideIn{0%{transform:translateY(-200%);scale:.75;opacity:0}to{transform:translateY(0);scale:1;opacity:1}}.logo--first-entry{animation:logoSlideIn .75s var(--spring-curve-bouncy) .7s both}@media (min-width: 768px){.header-main{padding:16px 24px;height:88px}.header-main__title{display:none}}ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsLogoComponent, selector: "ds-logo", inputs: ["variant", "size", "customHeight", "customWidth"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius"] }, { kind: "component", type: DsMobileNotificationButtonComponent, selector: "ds-mobile-notification-button", inputs: ["count"], outputs: ["clicked"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageMainComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileGlassSpinnerComponent, DsMobileNotificationButtonComponent], host: {
+            args: [{ selector: 'ds-mobile-page-main', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonContent, IonRefresher, IonRefresherContent, DsAvatarComponent, DsLogoComponent, DsMobileSkeletonLoaderComponent, DsMobileNotificationButtonComponent], host: {
                         '[style.--content-wrapper-padding]': 'contentPadding()'
                     }, template: `
     <!-- Fixed header at top -->
@@ -6275,7 +6282,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>
       }
@@ -6300,7 +6307,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-glass-spinner [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6727,10 +6734,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">
@@ -6766,7 +6774,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-glass-spinner [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -6777,7 +6785,7 @@ class DsMobilePageDetailsComponent extends MobilePageBase {
         </div>
       </div>
     </ion-content>
-  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileGlassSpinnerComponent, selector: "ds-mobile-glass-spinner", inputs: ["spinnerSize", "borderRadius"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
+  `, isInline: true, styles: [":host{display:flex;flex-direction:column;align-items:center;height:100%;background:var(--color-header-surface);width:100%}:host ion-header{background:var(--color-header-surface);box-shadow:none;height:72px;min-height:72px;margin-top:var(--app-header-top-offset)}:host ion-header ion-toolbar{--background: var(--color-header-surface);--border-width: 0;--box-shadow: none;--padding-top: 0;--padding-bottom: 0;--padding-start: 0;--padding-end: 0;--min-height: 72px;height:72px;min-height:72px;padding:0}@media (min-width: 768px){:host ion-header{height:88px;min-height:88px}:host ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}}@media (min-width: 768px){:host ion-header{display:none;height:auto}}:host .header-main,:host .header-details,.header-details{display:flex;align-items:center;justify-content:space-between;background:var(--color-header-surface);position:relative}:host .header-main__title,:host .header-details .header-title,.header-details .header-title{position:absolute;left:50%;transform:translate(-50%);font-size:var(--font-size-base);font-weight:600;color:var(--color-header-content);margin:0;padding:0;--color: var(--color-header-content)}.header-details .header-title{transform:translate(-50%) translateY(-100%);opacity:0!important;pointer-events:none;transition:transform .2s ease,opacity .2s ease!important}.header-scrolled .header-details .header-title{opacity:1!important;pointer-events:auto;transform:translate(-50%) translateY(0)}:host .header-details .back-button,.header-details .back-button{background:none;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:opacity var(--transition-duration-fast, .2s) var(--ease-smooth, ease);z-index:10;position:relative}:host .header-details .back-button:hover,.header-details .back-button:hover{opacity:.8}:host .header-details .back-button:active,.header-details .back-button:active{opacity:.6}:host ion-content{--background: var(--color-header-surface);--padding-top: 0;--padding-start: 0;--padding-end: 0;--padding-bottom: 0;border-radius:24px 24px 0 0;overflow:hidden}:host ion-content::part(scroll){display:flex;flex-direction:column;min-height:100%;-webkit-overflow-scrolling:touch}.plt-ios :host ion-content{--background: var(--color-background-neutral-primary)}@media (min-width: 768px){:host ion-content{border-radius:24px 24px 0 0}}:host ion-header[collapse=condense]{display:none}@media (min-width: 768px){:host ion-header[collapse=condense]{display:none}}:host ion-refresher{z-index:0}:host ion-refresher-content{--color: var(--color-header-content)}:host .content-wrapper{width:100%;position:relative;z-index:20;flex:1;display:flex;flex-direction:column;background:var(--color-background-neutral-primary);border-radius:24px 24px 0 0;overflow:visible;transform:translateZ(0);will-change:transform;isolation:isolate;box-shadow:0 300px 0 0 var(--color-background-neutral-primary);padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px);padding-bottom:calc(var(--mobile-content-spacing) + var(--mobile-tab-bar-height) + var(--app-safe-bottom, 0px))}:host .content-inner{max-width:640px;margin:0 auto;width:100%}@media (min-width: 768px){:host .content-wrapper{padding-top:0;padding-left:var(--content-wrapper-padding, 20px);padding-right:var(--content-wrapper-padding, 20px)}}:host .header-expandable{background:var(--color-header-surface);padding:32px 20px 24px;color:var(--header-content-color, white);position:sticky;top:0;z-index:5;transition:opacity .1s ease-out,transform .1s ease-out;flex:0 0 auto;min-height:-moz-min-content;min-height:min-content}:host .header-expandable-inner{display:flex;flex-direction:column;gap:20px;max-width:640px;margin:0 auto}:host .header-expandable__text{margin-bottom:0;gap:4px;display:flex;flex-direction:column}:host .header-expandable__title{font-size:var(--font-size-2xl);font-weight:600;color:var(--header-content-color, white);margin:0}:host .header-expandable__subtitle{font-size:var(--font-size-sm);font-weight:400;color:var(--header-content-color, white);opacity:.85;margin:0}@media (min-width: 768px){:host .header-expandable{padding:48px 20px 32px}:host .header-expandable__title{font-size:var(--font-size-3xl)}:host .header-expandable__subtitle{font-size:var(--font-size-base)}}@media (min-width: 992px){:host .header-expandable{padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg)}}@media (min-width: 1440px){:host .header-expandable{padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){:host .header-expandable{padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){:host .header-expandable{padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}\n", "ion-refresher{--color: var(--color-header-content)}ion-refresher-content{--color: var(--color-header-content)}ion-refresher-content::part(spinner){color:var(--color-header-content)}.header-details{gap:12px;padding:0 20px;height:72px;min-height:72px}:host .header-details .back-button{width:36px;height:36px;border-radius:50%;background:color-mix(in srgb,var(--color-header-content) 10%,transparent)!important;flex-shrink:0;border:none;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-header-content);transition:background var(--transition-duration-fast) var(--ease-smooth);z-index:10}:host .header-details .back-button:hover{background:color-mix(in srgb,var(--color-header-content) 16%,transparent)!important}:host .header-details .back-button:active{background:color-mix(in srgb,var(--color-header-content) 22%,transparent)!important}.header-details .header-title{left:64px}@media (min-width: 768px){ion-header{display:block!important;height:88px;min-height:88px}ion-header ion-toolbar{--min-height: 88px;height:88px;min-height:88px}.header-details{padding:16px 24px;height:88px;min-height:88px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: IonRefresher, selector: "ion-refresher", inputs: ["closeDuration", "disabled", "mode", "pullFactor", "pullMax", "pullMin", "snapbackDuration"] }, { kind: "component", type: IonRefresherContent, selector: "ion-refresher-content", inputs: ["pullingIcon", "pullingText", "refreshingSpinner", "refreshingText"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileSkeletonLoaderComponent, selector: "ds-mobile-skeleton-loader", inputs: ["borderRadius"] }, { kind: "component", type: DsMobileInlineTabsComponent, selector: "ds-mobile-inline-tabs", inputs: ["tabs", "activeTab"], outputs: ["tabChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePageDetailsComponent, decorators: [{
             type: Component,
@@ -6790,7 +6798,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         IonRefresher,
                         IonRefresherContent,
                         DsIconComponent,
-                        DsMobileGlassSpinnerComponent,
+                        DsMobileSkeletonLoaderComponent,
                         DsMobileInlineTabsComponent
                     ], host: {
                         '[style.--content-wrapper-padding]': 'contentPadding()'
@@ -6819,10 +6827,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">
@@ -6858,7 +6867,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <!-- Content wrapper -->
       <div class="content-wrapper">
         @if (contentLoading()) {
-          <ds-mobile-glass-spinner [borderRadius]="24" />
+          <ds-mobile-skeleton-loader [borderRadius]="24" />
         }
 
         <!-- Offline indicator slot (appears at top of content) -->
@@ -7929,6 +7938,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
   `, styles: [":host{display:block;max-width:640px;cursor:pointer;transition:all .2s ease}.composer-container{display:flex;align-items:center;gap:12px}.composer-input-wrapper{flex:1;min-width:0}.composer-input{width:100%;background:rgba(var(--header-content-color-rgb, 255, 255, 255),.1);border:none;border-radius:24px;padding:10px 16px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:20px;letter-spacing:-.3px;color:rgba(var(--header-content-color-rgb, 255, 255, 255),.75);outline:none;cursor:pointer;transition:all .2s ease;pointer-events:none;-webkit-user-select:none;user-select:none}.composer-input::placeholder{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.75);opacity:1}@media (hover: hover){:host:hover .composer-input{opacity:.8}}\n"] }]
         }], propDecorators: { avatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarInitials", required: false }] }], avatarType: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarType", required: false }] }], avatarSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarSrc", required: false }] }], avatarIconName: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarIconName", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], buttonText: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonText", required: false }] }], composerClick: [{ type: i0.Output, args: ["composerClick"] }] } });
 
+/**
+ * DsMobileGlassSpinnerComponent
+ *
+ * Reusable loader overlay with a glassmorphism (blurred) background and a spinner.
+ * This is useful when you want to show a loading state without covering the entire screen
+ * with a solid background, but rather blurring the content behind it.
+ *
+ * Features:
+ * - Glassmorphism blurred background
+ * - Centered animated spinner
+ * - Customizable spinner size
+ * - Absolute positioning to cover parent
+ */
+class DsMobileGlassSpinnerComponent {
+    /**
+     * Size of the spinner in pixels
+     * @default 24
+     */
+    spinnerSize = input(24, ...(ngDevMode ? [{ debugName: "spinnerSize" }] : []));
+    /**
+     * Border radius of the overlay in pixels (should match parent's border radius)
+     * @default 0
+     */
+    borderRadius = input(0, ...(ngDevMode ? [{ debugName: "borderRadius" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileGlassSpinnerComponent, isStandalone: true, selector: "ds-mobile-glass-spinner", inputs: { spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, borderRadius: { classPropertyName: "borderRadius", publicName: "borderRadius", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div 
+      class="glass-spinner-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div 
+        class="spinner" 
+        [style.width.px]="spinnerSize()"
+        [style.height.px]="spinnerSize()">
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileGlassSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ds-mobile-glass-spinner', standalone: true, imports: [CommonModule], template: `
+    <div 
+      class="glass-spinner-overlay" 
+      [style.border-radius.px]="borderRadius()"
+      role="status"
+      aria-live="polite"
+      aria-label="Loading">
+      <div 
+        class="spinner" 
+        [style.width.px]="spinnerSize()"
+        [style.height.px]="spinnerSize()">
+      </div>
+    </div>
+  `, styles: [":host{display:contents}.glass-spinner-overlay{position:absolute;inset:0;background:#fff6;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;border-radius:inherit}.spinner{border:2px solid var(--color-border-neutral-secondary, #E5E5E5);border-top-color:var(--color-accent, #6B5FF5);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-color-scheme: dark){.glass-spinner-overlay{background:#0000004d}.spinner{border-color:#fff3;border-top-color:var(--color-accent, #6B5FF5)}}\n"] }]
+        }], propDecorators: { spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], borderRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderRadius", required: false }] }] } });
+
 /**
  * DsMobileAttachmentPreviewComponent
  *
@@ -22211,6 +22278,7 @@ class DsMobilePostDetailModalComponent {
      */
     cancelEdit() {
         this.editingComment.set(null);
+        this.replyingTo.set(null);
         this.commentText.set('');
     }
     /**
@@ -22219,6 +22287,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 +22306,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 +22376,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 +22399,7 @@ class DsMobilePostDetailModalComponent {
                 });
             }
             this.editingComment.set(null);
+            this.replyingTo.set(null);
         }
         else {
             // console.log('[PostDetailModal] Submitting comment:', finalText);
@@ -22552,8 +22634,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 +22782,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 +24760,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 +30846,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 +35849,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 +38946,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