@propbinder/mobile-design 0.2.37 → 0.2.40

package/fesm2022/propbinder-mobile-design.mjs

@@ -5,16 +5,17 @@ import { CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i1$4 from '@angular/router';
 import { Router, NavigationEnd } from '@angular/router';
 import * as i1 from '@ionic/angular/standalone';
-import { ModalController, IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, Platform, IonRefresher, IonRefresherContent, IonPopover, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonSpinner, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/angular/standalone';
+import { ModalController, IonHeader, IonToolbar, IonTitle, IonButtons, IonContent, Platform, IonRefresher, IonRefresherContent, IonPopover, IonTabBar, IonTabButton, IonLabel, IonTabs, IonTab, IonSpinner, IonPicker, IonPickerColumn, IonPickerColumnOption, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/angular/standalone';
 import { ImpactStyle, Haptics } from '@capacitor/haptics';
-import { DsIconButtonComponent, DsIconComponent, DsButtonComponent, DsAvatarComponent, DsShapeIndicatorComponent, DsTextareaComponent, DsCheckboxComponent, DsInputTimeComponent, DsLabelComponent, DsInputComponent, DsBadgeComponent } from '@propbinder/design-system';
+import { DsIconButtonComponent, DsIconComponent, DsButtonComponent, DsAvatarComponent, DsShapeIndicatorComponent, DsTextareaComponent, DsDatepickerComponent, DsCheckboxComponent, DsInputTimeComponent, DsLabelComponent, DsInputComponent, DsBadgeComponent } from '@propbinder/design-system';
 import { StatusBar, Style } from '@capacitor/status-bar';
 import { Network } from '@capacitor/network';
 import { Keyboard } from '@capacitor/keyboard';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$3 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { Camera, CameraSource, CameraResultType } from '@capacitor/camera';
+import { Capacitor } from '@capacitor/core';
+import { FilePicker } from '@capawesome/capacitor-file-picker';
 import { Subject } from 'rxjs';
 import { createAnimation } from '@ionic/core';
 import { filter } from 'rxjs/operators';
@@ -23,7 +24,7 @@ import { Pagination } from 'swiper/modules';
 import { Share } from '@capacitor/share';
 import { Filesystem, Directory } from '@capacitor/filesystem';
 import { Browser } from '@capacitor/browser';
-import { Capacitor } from '@capacitor/core';
+import { AppTrackingTransparency } from 'capacitor-plugin-app-tracking-transparency';
 
 const DEFAULT_CONFIG = {
     logoUrl: '/Assets/logos/propbinder-logomark.svg',
@@ -2498,17 +2499,18 @@ class DsMobilePostCreateBottomSheetComponent {
         this.applySafeAreaToToolbar();
         try {
             console.log('Requesting photo from library...');
-            const image = await Camera.getPhoto({
-                quality: 90,
-                allowEditing: false,
-                resultType: CameraResultType.Uri,
-                source: CameraSource.Photos, // Only show photo library, not camera
+            const result = await FilePicker.pickImages({
+                limit: 1,
             });
+            const image = result.files?.[0];
             console.log('Photo selected successfully:', image);
             // Add the image path to the array
-            if (image.webPath) {
-                this.selectedImages.update(images => [...images, image.webPath]);
-                console.log('Image added to preview:', image.webPath);
+            if (image) {
+                const imageSrc = image.path ? Capacitor.convertFileSrc(image.path) : (image.blob ? URL.createObjectURL(image.blob) : '');
+                if (imageSrc) {
+                    this.selectedImages.update(images => [...images, imageSrc]);
+                    console.log('Image added to preview:', imageSrc);
+                }
             }
             // Re-apply safe area padding immediately after returning
             // Since we're using fixed values, this won't cause flickering
@@ -5726,6 +5728,7 @@ class DsMobileSectionComponent {
               <ds-icon name="remixArrowRightSLine" size="16px" />
             </a>
           }
+          <ng-content select="[header-action]" />
         </header>
       }
       
@@ -5757,6 +5760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <ds-icon name="remixArrowRightSLine" size="16px" />
             </a>
           }
+          <ng-content select="[header-action]" />
         </header>
       }
       
@@ -6862,9 +6866,15 @@ class DsMobileDropdownComponent {
         });
     }
     /**
-     * Content projection for custom item template
+     * Content projection for custom item template (per-item renderer)
      */
     customItemTemplate;
+    /**
+     * Content projection for fully custom popover content.
+     * When provided, the item list is bypassed entirely and this template
+     * is rendered directly inside the popover — use for pickers, forms, etc.
+     */
+    customContent;
     /**
      * Optional trigger element ID for Ionic Popover positioning
      */
@@ -6875,9 +6885,10 @@ class DsMobileDropdownComponent {
      */
     keepFocusOn = input(...(ngDevMode ? [undefined, { debugName: "keepFocusOn" }] : []));
     /**
-     * Array of dropdown items to display
+     * Array of dropdown items to display.
+     * Not required when using the #customContent slot.
      */
-    items = input.required(...(ngDevMode ? [{ debugName: "items" }] : []));
+    items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     /**
      * Whether the dropdown is open
      */
@@ -6906,6 +6917,12 @@ class DsMobileDropdownComponent {
      * ARIA label for the dropdown menu
      */
     ariaLabel = input('Dropdown menu', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    /**
+     * Maximum width of the popover.
+     * Defaults to '192px' (standard dropdown width).
+     * Override when using #customContent that requires more space (e.g. '280px' for a picker).
+     */
+    maxWidth = input('192px', ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     /**
      * Emits when an item is selected
      */
@@ -6967,7 +6984,7 @@ class DsMobileDropdownComponent {
         this.itemSelected.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileDropdownComponent, isStandalone: true, selector: "ds-mobile-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOn: { classPropertyName: "keepFocusOn", publicName: "keepFocusOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, queries: [{ propertyName: "customItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileDropdownComponent, isStandalone: true, selector: "ds-mobile-dropdown", inputs: { trigger: { classPropertyName: "trigger", publicName: "trigger", isSignal: true, isRequired: false, transformFunction: null }, keepFocusOn: { classPropertyName: "keepFocusOn", publicName: "keepFocusOn", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelected: "itemSelected", closed: "closed" }, queries: [{ propertyName: "customItemTemplate", first: true, predicate: ["itemTemplate"], descendants: true }, { propertyName: "customContent", first: true, predicate: ["customContent"], descendants: true }], ngImport: i0, template: `
     <ion-popover
       [isOpen]="isOpen()"
       [trigger]="trigger()"
@@ -6981,71 +6998,77 @@ class DsMobileDropdownComponent {
       (didDismiss)="closed.emit()"
       [style.--offset-y]="offsetY()"
       [style.--offset-x]="offsetX()"
-      [style.--max-width]="'192px'"
+      [style.--max-width]="maxWidth()"
       [style.--background]="'transparent'"
       [style.--box-shadow]="'none'"
       [style.--backdrop-opacity]="'0'">
       
       <ng-template>
-        <div 
-          [class]="dropdownClasses()"
-          [style.max-height.px]="maxHeight()"
-          (mousedown)="$event.stopPropagation()"
-          (click)="$event.stopPropagation()"
-          role="menu"
-          [attr.aria-label]="ariaLabel()">
-            
-          @if (customItemTemplate) {
-            <!-- Custom template for each item -->
-            @for (item of items(); track item.id) {
-              <div
-                [class]="getItemClass(item)"
-                [attr.data-disabled]="item.disabled ? '' : null"
-                [attr.aria-disabled]="item.disabled"
-                (mousedown)="handleItemClick(item, $event)"
-                role="menuitem">
-                <ng-container 
-                  *ngTemplateOutlet="customItemTemplate; context: { $implicit: item }" />
-              </div>
+        @if (customContent) {
+          <!-- Fully custom popover content (e.g. picker, form) -->
+          <ng-container *ngTemplateOutlet="customContent" />
+        } @else {
+          <!-- Standard item list -->
+          <div 
+            [class]="dropdownClasses()"
+            [style.max-height.px]="maxHeight()"
+            (mousedown)="$event.stopPropagation()"
+            (click)="$event.stopPropagation()"
+            role="menu"
+            [attr.aria-label]="ariaLabel()">
+              
+            @if (customItemTemplate) {
+              <!-- Custom template for each item -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  <ng-container 
+                    *ngTemplateOutlet="customItemTemplate; context: { $implicit: item }" />
+                </div>
+              }
+            } @else {
+              <!-- Default three-slot template: leading - main - trailing -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  
+                  <!-- Leading slot -->
+                  @if (item.leadingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--leading">
+                      <ds-icon [name]="item.leadingIcon" size="16px" />
+                    </div>
+                  }
+                  
+                  <!-- Main slot -->
+                  @if (item.label) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--main">
+                      <span class="ds-mobile-dropdown__label">{{ item.label }}</span>
+                    </div>
+                  }
+                  
+                  <!-- Trailing slot -->
+                  @if (item.trailingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--trailing">
+                      <ds-icon [name]="item.trailingIcon" size="20px" />
+                    </div>
+                  }
+                </div>
+              }
             }
-          } @else {
-            <!-- Default three-slot template: leading - main - trailing -->
-            @for (item of items(); track item.id) {
-              <div
-                [class]="getItemClass(item)"
-                [attr.data-disabled]="item.disabled ? '' : null"
-                [attr.aria-disabled]="item.disabled"
-                (mousedown)="handleItemClick(item, $event)"
-                role="menuitem">
-                
-                <!-- Leading slot -->
-                @if (item.leadingIcon) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--leading">
-                    <ds-icon [name]="item.leadingIcon" size="16px" />
-                  </div>
-                }
-                
-                <!-- Main slot -->
-                @if (item.label) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--main">
-                    <span class="ds-mobile-dropdown__label">{{ item.label }}</span>
-                  </div>
-                }
-                
-                <!-- Trailing slot -->
-                @if (item.trailingIcon) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--trailing">
-                    <ds-icon [name]="item.trailingIcon" size="20px" />
-                  </div>
-                }
-              </div>
+            
+            @if (items().length === 0 && emptyMessage()) {
+              <div class="ds-mobile-dropdown__empty">{{ emptyMessage() }}</div>
             }
-          }
-          
-          @if (items().length === 0 && emptyMessage()) {
-            <div class="ds-mobile-dropdown__empty">{{ emptyMessage() }}</div>
-          }
-        </div>
+          </div>
+        }
       </ng-template>
     </ion-popover>
   `, isInline: true, styles: ["ion-popover{--background: transparent;--box-shadow: none;--backdrop-opacity: 0;--max-width: 192px}ion-popover::part(content){background:#ffffff80!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;box-shadow:0 2px 8px #00000014,0 4px 16px #0000001f!important;border:1px solid rgba(255,255,255,1)!important;border-radius:16px!important;padding:4px!important;outline:none!important;max-width:192px!important}ion-popover::part(backdrop){background:transparent!important}.ds-mobile-dropdown{position:relative;width:100%;background:transparent!important;border:none!important;box-shadow:none!important;overflow-y:auto;animation:slideIn var(--spring-duration-medium) var(--spring-curve-bouncy);padding:0}.ds-mobile-dropdown__item{display:flex;align-items:center;gap:12px;padding:4px 12px;background:none;width:100%;text-align:left;cursor:pointer;transition:background .15s ease;min-height:40px;justify-content:flex-start;border-radius:14px}.ds-mobile-dropdown__item:last-child{border-bottom:none}.ds-mobile-dropdown__item:hover:not(.ds-mobile-dropdown__item--disabled){background:#0000000a}.ds-mobile-dropdown__item:active:not(.ds-mobile-dropdown__item--disabled){background:#00000014;transition:background 0s}.ds-mobile-dropdown__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-mobile-dropdown__slot{display:flex;align-items:center}.ds-mobile-dropdown__slot--leading{flex-shrink:0;justify-content:center}.ds-mobile-dropdown__slot--main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;align-items:flex-start}.ds-mobile-dropdown__slot--trailing{flex-shrink:0;margin-left:auto}.ds-mobile-dropdown__label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.ds-mobile-dropdown__empty{padding:24px 16px;text-align:center;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}@keyframes slideIn{0%{opacity:0;transform:translateY(8px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}.ds-mobile-dropdown--above{animation:slideUp var(--spring-duration-medium) var(--spring-curve-bouncy)}@keyframes slideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.75)}}@keyframes slideDown{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.75)}}@keyframes slideUp{0%{opacity:0;transform:translateY(-8px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: IonPopover, selector: "ion-popover" }] });
@@ -7066,78 +7089,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       (didDismiss)="closed.emit()"
       [style.--offset-y]="offsetY()"
       [style.--offset-x]="offsetX()"
-      [style.--max-width]="'192px'"
+      [style.--max-width]="maxWidth()"
       [style.--background]="'transparent'"
       [style.--box-shadow]="'none'"
       [style.--backdrop-opacity]="'0'">
       
       <ng-template>
-        <div 
-          [class]="dropdownClasses()"
-          [style.max-height.px]="maxHeight()"
-          (mousedown)="$event.stopPropagation()"
-          (click)="$event.stopPropagation()"
-          role="menu"
-          [attr.aria-label]="ariaLabel()">
-            
-          @if (customItemTemplate) {
-            <!-- Custom template for each item -->
-            @for (item of items(); track item.id) {
-              <div
-                [class]="getItemClass(item)"
-                [attr.data-disabled]="item.disabled ? '' : null"
-                [attr.aria-disabled]="item.disabled"
-                (mousedown)="handleItemClick(item, $event)"
-                role="menuitem">
-                <ng-container 
-                  *ngTemplateOutlet="customItemTemplate; context: { $implicit: item }" />
-              </div>
+        @if (customContent) {
+          <!-- Fully custom popover content (e.g. picker, form) -->
+          <ng-container *ngTemplateOutlet="customContent" />
+        } @else {
+          <!-- Standard item list -->
+          <div 
+            [class]="dropdownClasses()"
+            [style.max-height.px]="maxHeight()"
+            (mousedown)="$event.stopPropagation()"
+            (click)="$event.stopPropagation()"
+            role="menu"
+            [attr.aria-label]="ariaLabel()">
+              
+            @if (customItemTemplate) {
+              <!-- Custom template for each item -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  <ng-container 
+                    *ngTemplateOutlet="customItemTemplate; context: { $implicit: item }" />
+                </div>
+              }
+            } @else {
+              <!-- Default three-slot template: leading - main - trailing -->
+              @for (item of items(); track item.id) {
+                <div
+                  [class]="getItemClass(item)"
+                  [attr.data-disabled]="item.disabled ? '' : null"
+                  [attr.aria-disabled]="item.disabled"
+                  (mousedown)="handleItemClick(item, $event)"
+                  role="menuitem">
+                  
+                  <!-- Leading slot -->
+                  @if (item.leadingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--leading">
+                      <ds-icon [name]="item.leadingIcon" size="16px" />
+                    </div>
+                  }
+                  
+                  <!-- Main slot -->
+                  @if (item.label) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--main">
+                      <span class="ds-mobile-dropdown__label">{{ item.label }}</span>
+                    </div>
+                  }
+                  
+                  <!-- Trailing slot -->
+                  @if (item.trailingIcon) {
+                    <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--trailing">
+                      <ds-icon [name]="item.trailingIcon" size="20px" />
+                    </div>
+                  }
+                </div>
+              }
             }
-          } @else {
-            <!-- Default three-slot template: leading - main - trailing -->
-            @for (item of items(); track item.id) {
-              <div
-                [class]="getItemClass(item)"
-                [attr.data-disabled]="item.disabled ? '' : null"
-                [attr.aria-disabled]="item.disabled"
-                (mousedown)="handleItemClick(item, $event)"
-                role="menuitem">
-                
-                <!-- Leading slot -->
-                @if (item.leadingIcon) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--leading">
-                    <ds-icon [name]="item.leadingIcon" size="16px" />
-                  </div>
-                }
-                
-                <!-- Main slot -->
-                @if (item.label) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--main">
-                    <span class="ds-mobile-dropdown__label">{{ item.label }}</span>
-                  </div>
-                }
-                
-                <!-- Trailing slot -->
-                @if (item.trailingIcon) {
-                  <div class="ds-mobile-dropdown__slot ds-mobile-dropdown__slot--trailing">
-                    <ds-icon [name]="item.trailingIcon" size="20px" />
-                  </div>
-                }
-              </div>
+            
+            @if (items().length === 0 && emptyMessage()) {
+              <div class="ds-mobile-dropdown__empty">{{ emptyMessage() }}</div>
             }
-          }
-          
-          @if (items().length === 0 && emptyMessage()) {
-            <div class="ds-mobile-dropdown__empty">{{ emptyMessage() }}</div>
-          }
-        </div>
+          </div>
+        }
       </ng-template>
     </ion-popover>
   `, styles: ["ion-popover{--background: transparent;--box-shadow: none;--backdrop-opacity: 0;--max-width: 192px}ion-popover::part(content){background:#ffffff80!important;backdrop-filter:blur(12px)!important;-webkit-backdrop-filter:blur(12px)!important;box-shadow:0 2px 8px #00000014,0 4px 16px #0000001f!important;border:1px solid rgba(255,255,255,1)!important;border-radius:16px!important;padding:4px!important;outline:none!important;max-width:192px!important}ion-popover::part(backdrop){background:transparent!important}.ds-mobile-dropdown{position:relative;width:100%;background:transparent!important;border:none!important;box-shadow:none!important;overflow-y:auto;animation:slideIn var(--spring-duration-medium) var(--spring-curve-bouncy);padding:0}.ds-mobile-dropdown__item{display:flex;align-items:center;gap:12px;padding:4px 12px;background:none;width:100%;text-align:left;cursor:pointer;transition:background .15s ease;min-height:40px;justify-content:flex-start;border-radius:14px}.ds-mobile-dropdown__item:last-child{border-bottom:none}.ds-mobile-dropdown__item:hover:not(.ds-mobile-dropdown__item--disabled){background:#0000000a}.ds-mobile-dropdown__item:active:not(.ds-mobile-dropdown__item--disabled){background:#00000014;transition:background 0s}.ds-mobile-dropdown__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.ds-mobile-dropdown__slot{display:flex;align-items:center}.ds-mobile-dropdown__slot--leading{flex-shrink:0;justify-content:center}.ds-mobile-dropdown__slot--main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;text-align:left;align-items:flex-start}.ds-mobile-dropdown__slot--trailing{flex-shrink:0;margin-left:auto}.ds-mobile-dropdown__label{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}.ds-mobile-dropdown__empty{padding:24px 16px;text-align:center;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}@keyframes slideIn{0%{opacity:0;transform:translateY(8px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}.ds-mobile-dropdown--above{animation:slideUp var(--spring-duration-medium) var(--spring-curve-bouncy)}@keyframes slideOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.75)}}@keyframes slideDown{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.75)}}@keyframes slideUp{0%{opacity:0;transform:translateY(-8px) scale(.75)}to{opacity:1;transform:translateY(0) scale(1)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { customItemTemplate: [{
                 type: ContentChild,
                 args: ['itemTemplate']
-            }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], keepFocusOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFocusOn", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+            }], customContent: [{
+                type: ContentChild,
+                args: ['customContent']
+            }], trigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "trigger", required: false }] }], keepFocusOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepFocusOn", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], itemSelected: [{ type: i0.Output, args: ["itemSelected"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /**
  * DsMobileMessageComposerComponent
@@ -7546,7 +7578,7 @@ class DsMobileMessageComposerComponent {
     }
     /**
      * Handle add photo button click from menu
-     * Uses Capacitor Camera API to open photo library directly
+     * Uses Capawesome File Picker API to open photo library directly
      * Allows multiple photo selection
      */
     async handleAddPhoto(event) {
@@ -7558,26 +7590,25 @@ class DsMobileMessageComposerComponent {
             return;
         }
         try {
-            console.log('[MessageComposer] Opening photo library');
+            //console.log('[MessageComposer] Opening photo library');
             // Calculate remaining slots
             const remainingSlots = 6 - this.attachments().length;
             // Open photo library with multiple selection using pickImages
-            const result = await Camera.pickImages({
-                quality: 90,
+            const result = await FilePicker.pickImages({
                 limit: remainingSlots, // Limit to remaining slots
             });
-            if (result.photos && result.photos.length > 0) {
-                console.log(`[MessageComposer] ${result.photos.length} photo(s) selected`);
+            if (result.files && result.files.length > 0) {
+                //console.log(`[MessageComposer] ${result.files.length} photo(s) selected`);
                 // Process each selected photo
-                for (const photo of result.photos) {
+                for (const photo of result.files) {
                     const attachmentId = `photo-${Date.now()}-${Math.random()}`;
                     // Add attachment with loading state
                     const loadingAttachment = {
                         id: attachmentId,
-                        src: photo.webPath || '',
+                        src: photo.path ? Capacitor.convertFileSrc(photo.path) : (photo.blob ? URL.createObjectURL(photo.blob) : ''),
                         type: 'image',
-                        name: `Photo ${this.attachments().length + 1}`,
-                        size: '',
+                        name: photo.name,
+                        size: this.formatFileSize(photo.size ?? 0),
                         isLoading: true,
                     };
                     this.attachments.update((attachments) => [...attachments, loadingAttachment]);
@@ -7587,7 +7618,7 @@ class DsMobileMessageComposerComponent {
                         this.attachments.update((attachments) => attachments.map((a) => (a.id === attachmentId ? { ...a, isLoading: false } : a)));
                     }, 1500); // 1.5s for testing - shows loading overlay clearly
                 }
-                console.log('[MessageComposer] All photos added successfully');
+                //console.log('[MessageComposer] All photos added successfully');
                 // Notify parent that attachments changed so it can scroll
                 this.attachmentsChanged.emit();
                 // ResizeObserver in MobileModalBase automatically handles layout adjustments
@@ -7595,7 +7626,7 @@ class DsMobileMessageComposerComponent {
         }
         catch (error) {
             if (error.message && !error.message.includes('cancel')) {
-                console.error('[MessageComposer] Error adding photo:', error);
+                //console.error('[MessageComposer] Error adding photo:', error);
             }
             // User cancelled - that's fine
         }
@@ -7894,7 +7925,7 @@ class DsMobileMessageComposerComponent {
         (change)="handleFileSelect($event)"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel"], outputs: ["itemSelected", "closed"] }] });
+  `, isInline: true, styles: [":host{display:block}.message-composer{background:var(--color-background-neutral-primary, #ffffff);border-top:1px solid var(--border-color-default);border-bottom-left-radius:0;border-bottom-right-radius:0;padding:12px 16px;width:100%;display:flex;flex-direction:column;gap:8px}.edit-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-brand-subtle, #f0edfe);border-radius:8px;animation:slideDown .2s ease-out}.edit-indicator-content{display:flex;align-items:center;gap:8px;color:var(--color-accent, #6b5ff5);flex:1;min-width:0}.edit-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;line-height:18px;color:var(--color-accent, #6b5ff5)}.cancel-edit{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-accent, #6b5ff5);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-edit:active{background:var(--color-brand-subtle, #e0dbfe)}.reply-indicator{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:8px;animation:slideDown .2s ease-out}.reply-indicator-content{display:flex;align-items:center;gap:4px;color:var(--color-text-secondary, #737373);flex:1;min-width:0}.reply-to-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reply-author{color:var(--color-accent, #6b5ff5);font-weight:600}.cancel-reply{background:none;border:none;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary, #737373);border-radius:4px;transition:background .2s ease;flex-shrink:0}.cancel-reply:active{background:var(--color-background-neutral-secondary, #f5f5f5)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.attachment-previews-section{padding:0 0 8px;animation:slideDown .2s ease-out}.attachment-previews{display:flex;flex-wrap:wrap;gap:8px}.composer-content{display:flex;align-items:center;gap:12px;width:100%;position:relative}.composer-leading-button{flex-shrink:0}.composer-leading-button::ng-deep button{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;padding:0!important;border-radius:50%!important;transition:transform .3s ease}.composer-leading-button--open::ng-deep button{transform:rotate(45deg)}.composer-input-wrapper{flex:1;display:flex;align-items:flex-start;gap:8px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:24px;padding:12px 16px;min-height:44px;position:relative}.mention-user-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.mention-user-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;color:var(--color-text-primary, #1a1a1a)}.mention-user-role{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:18px;color:var(--color-text-secondary, #737373)}.composer-input{flex:1;border:none;background:transparent;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);line-height:20px;color:var(--color-text-primary, #1a1a1a);outline:none;resize:none;min-height:20px;max-height:120px;overflow-y:auto;padding:0;margin:0}.composer-input::placeholder{color:var(--color-text-tertiary, #a0a0a0);font-size:var(--font-size-sm)}.send-button-inline{position:absolute;top:6px;right:6px;z-index:10;flex-shrink:0;opacity:0;transform:translate(20px) scale(.8);pointer-events:none;transition:opacity .15s ease-in,transform .15s ease-in}.send-button-inline.show{opacity:1;transform:translate(0) scale(1);pointer-events:auto;animation:slideInFromRight var(--spring-bouncy)}.send-button-inline::ng-deep button{width:32px!important;height:32px!important;min-width:32px!important;min-height:32px!important;padding:0!important;border-radius:50%!important}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px) scale(.8)}to{opacity:1;transform:translate(0) scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsAvatarComponent, selector: "ds-avatar", inputs: ["type", "size", "initials", "src", "alt", "iconName", "iconColor"] }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsMobileAttachmentPreviewComponent, selector: "ds-mobile-attachment-preview", inputs: ["attachment"], outputs: ["remove"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel", "maxWidth"], outputs: ["itemSelected", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileMessageComposerComponent, decorators: [{
             type: Component,
@@ -10366,7 +10397,7 @@ class DsMobileTabBarComponent {
         <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
       </div>
     </ion-tab-bar>
-  `, isInline: true, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { 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"] }] });
+  `, isInline: true, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:11px;font-weight:500;letter-spacing:-.5px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IonTabBar, selector: "ion-tab-bar", inputs: ["color", "mode", "selectedTab", "translucent"] }, { kind: "component", type: IonTabButton, selector: "ion-tab-button", inputs: ["disabled", "download", "href", "layout", "mode", "rel", "selected", "tab", "target"] }, { kind: "component", type: IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileTabBarComponent, decorators: [{
             type: Component,
@@ -10402,7 +10433,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <ds-avatar [size]="'md'" [type]="avatarType" [initials]="avatarInitials" [src]="avatarSrc" [iconName]="avatarIconName" (click)="handleAvatarClick()" />
       </div>
     </ion-tab-bar>
-  `, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:var(--font-size-xs);font-weight:400;letter-spacing:-.3px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"] }]
+  `, styles: [":host{--ds-tab-bar-height: 64px}@media (min-width: 768px){:host{display:block;--ds-tab-bar-height: 64px}}@media (max-width: 767px){:host{display:contents}}ion-tabs.ds-tabs-wrapper{height:100%;background:var(--color-header-surface)}ion-tab-button:before,ion-tab-button:after{content:none!important;display:none!important}ion-tab-button[title]:before,ion-tab-button[title]:after{display:none!important}ion-tab-button::part(native):before,ion-tab-button::part(native):after{display:none!important}.ds-tab-bar{--background: var(--color-background-neutral-primary);transition:transform .2s ease-in-out}ion-tab-bar[slot=bottom]{border-top:1px solid var(--border-color-default);padding-top:8px;padding-bottom:max(8px,calc(var(--ion-safe-area-bottom, 0px) - 16px));padding-left:12px;padding-right:12px}@media (max-width: 767px){ion-tab-bar[slot=bottom]{position:fixed;bottom:0;left:0;right:0;z-index:100}}@media (max-width: 767px){:host-context(ion-tabs:has(ds-mobile-page-details)) .ds-tab-bar{transform:translateY(100%);transition:transform .3s ease}}.ds-tab-bar__logo,.ds-tab-bar__actions{display:none}.ds-tab-bar__tabs{display:flex;width:100%;justify-content:space-around;align-items:center}@media (min-width: 769px){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)}}@media (display-mode: standalone){ion-tab-bar[slot=bottom]{padding-bottom:env(safe-area-inset-bottom,0px)!important}}@media (min-width: 768px){:host[slot=top]{order:-1!important}:host ion-tab-bar{position:relative!important;bottom:auto!important;top:0!important}ion-tab-bar[slot=top]{--background: var(--color-header-surface);position:relative!important;display:flex!important;align-items:center;padding:12px 24px;height:64px;max-width:none;bottom:auto!important;top:0!important}ion-tab-bar[slot=bottom]{position:relative!important;bottom:auto!important}ion-tabs>div:not([slot]){order:1!important}.ds-tab-bar__logo{display:flex;position:absolute;left:24px;align-items:center;color:var(--header-content-color, white)}.ds-tab-bar__actions{display:flex;position:absolute;right:24px;align-items:center;gap:12px}.ds-tab-bar__tabs{display:flex;gap:8px;align-items:center;max-width:640px;width:100%;margin:0 auto;justify-content:center;padding-left:var(--content-padding-md);padding-right:var(--content-padding-md)}.logomark{height:28px;width:auto;flex-shrink:0}}@media (min-width: 992px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-lg);padding-right:var(--content-padding-lg);justify-content:center}}@media (min-width: 1440px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-xl);padding-right:var(--content-padding-xl)}}@media (min-width: 1768px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-2xl);padding-right:var(--content-padding-2xl)}}@media (min-width: 1920px){.ds-tab-bar__tabs{max-width:640px;padding-left:var(--content-padding-3xl);padding-right:var(--content-padding-3xl)}}ion-tab-button{--color: var(--text-color-default-tertiary);--color-selected: var(--color-accent);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:visible;pointer-events:auto}ion-tab-button[title]:before{content:attr(title);position:absolute;opacity:0;pointer-events:none}.tab-icon-ripple{position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;background:var(--color-accent);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;transition:all .6s cubic-bezier(.36,1.2,.04,1.4);z-index:0}.tab-selected .tab-icon-ripple{transform:translate(-50%,-50%) scale(2);opacity:.05;animation:ripple-fade .6s cubic-bezier(.36,.5,.04,1.8) forwards}@keyframes ripple-fade{0%{opacity:0;transform:translate(-50%,-50%) scale(0)}30%{opacity:.1}to{opacity:0;transform:translate(-50%,-50%) scale(2)}}ion-tab-button::part(native){overflow:visible}ion-tab-button ion-ripple-effect{color:var(--color-accent);border-radius:1000px}ion-tab-button ion-label{font-size:11px;font-weight:500;letter-spacing:-.5px;margin-top:0}.tab-icon-wrapper{position:relative;width:24px;height:24px;display:flex;align-items:center;justify-content:center;z-index:1;margin-bottom:4px}.tab-icon-inactive,.tab-icon-active{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);transition:all .8s cubic-bezier(.36,1,.04,1)}.tab-icon-inactive{opacity:1;transform:translate(-50%,-50%) scale(1)}.tab-icon-active{opacity:0;transform:translate(-50%,calc(-50% - 12px)) scale(.5)}.tab-selected .tab-icon-inactive{opacity:0;transform:translate(-50%,-50%) scale(.5)}.tab-selected .tab-icon-active{opacity:1;transform:translate(-50%,-50%) scale(1)}@media (min-width: 768px){.ds-tab-button{flex-direction:row;height:40px;padding:0 16px!important;border-radius:40px;transition:all .2s ease;width:-moz-fit-content;width:fit-content;min-width:-moz-fit-content;min-width:fit-content;flex:0 0 auto;--color: rgba(var(--color-header-content-rgb, 255, 255, 255), .7);--color-selected: var(--color-header-content, white);color:rgba(var(--color-header-content-rgb, 255, 255, 255),.7);background:transparent;position:relative;overflow:hidden}.tab-icon-wrapper,.tab-icon-ripple{width:20px;height:20px}.ds-tab-button::part(native){border-radius:40px}.ds-tab-button:hover:not(.tab-selected){--color: var(--color-header-content, white);--color-selected: var(--color-header-content, white);color:var(--color-header-content, white);background:rgba(var(--color-header-content-rgb, 255, 255, 255),.1)}.ds-tab-button:hover:not(.tab-selected) ion-label{color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon{--icon-color: var(--color-header-content, white);color:var(--color-header-content, white)}.ds-tab-button:hover:not(.tab-selected) ds-icon svg{fill:var(--color-header-content, white)}.ds-tab-button.tab-selected,.ds-tab-button.tab-selected:hover{background:var(--color-header-accent);--color-selected: var(--color-on-header-accent, white);--color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected:hover .tab-icon-active{opacity:1!important;visibility:visible!important}.ds-tab-button.tab-selected:hover .tab-icon-inactive{opacity:0!important}.ds-tab-button.tab-selected ion-label{color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon{--icon-color: var(--color-on-header-accent, white);color:var(--color-on-header-accent, white)}.ds-tab-button.tab-selected ds-icon svg{fill:var(--color-on-header-accent, white)}.ds-tab-button .button-native{width:auto;padding:0}.ds-tab-button ion-label{font-size:var(--font-size-sm);font-weight:500;margin:0;color:inherit}.ds-tab-button .tab-icon-wrapper{margin-right:4px;margin-bottom:0}.ds-tab-button ion-ripple-effect{color:rgba(var(--header-content-color-rgb, 255, 255, 255),.3);border-radius:1000px;transform:scale(1.5)}}@media (min-width: 768px){.ds-tab-bar__actions ds-avatar{cursor:pointer;transition:transform .2s ease}.ds-tab-bar__actions ds-avatar:hover{transform:scale(1.05)}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { tabs: [{
                 type: Input
             }], avatarType: [{
@@ -10697,6 +10728,12 @@ class DsMobileSwiperComponent {
     slideNext() {
         this.swiperInstance?.slideNext();
     }
+    /**
+     * Navigate to a specific slide by index
+     */
+    slideTo(index, speed = 300) {
+        this.swiperInstance?.slideTo(index, speed);
+    }
     /**
      * Check if at the beginning
      */
@@ -15984,18 +16021,17 @@ class DsMobileNewInquiryModalComponent {
             return;
         }
         try {
-            const image = await Camera.getPhoto({
-                quality: 90,
-                allowEditing: false,
-                resultType: CameraResultType.Uri,
-                source: CameraSource.Photos, // Only show photo library
+            const result = await FilePicker.pickImages({
+                limit: 1,
             });
-            if (image.webPath) {
+            const image = result.files?.[0];
+            if (image) {
                 const newAttachment = {
                     id: `photo-${Date.now()}`,
-                    src: image.webPath,
+                    src: image.path ? Capacitor.convertFileSrc(image.path) : (image.blob ? URL.createObjectURL(image.blob) : ''),
                     type: 'image',
-                    name: `Photo ${this.attachments().length + 1}`,
+                    name: image.name || `Photo ${this.attachments().length + 1}`,
+                    size: this.formatFileSize(image.size ?? 0),
                 };
                 this.attachments.update((attachments) => [...attachments, newAttachment]);
             }
@@ -16389,6 +16425,11 @@ class DsMobileBookingModalComponent {
     modalController;
     facilityId;
     facilityTitle;
+    /**
+     * Number of days ahead available for booking selection.
+     * Defaults to 60 (2 months). Override via componentProps when opening the modal.
+     */
+    daysAhead = 60;
     swiperComponent;
     // Signals for reactive state management
     dateOptions = signal([], ...(ngDevMode ? [{ debugName: "dateOptions" }] : []));
@@ -16419,22 +16460,50 @@ class DsMobileBookingModalComponent {
             }
         }, 150);
     }
+    /**
+     * Returns true if the given date should be disabled in both the swiper and the datepicker.
+     * Weekends are disabled. Index-based mock disabling (i===3, i===7) is swiper-only and
+     * not representable as a date rule, so it is intentionally excluded here.
+     */
+    isDateUnavailable(date) {
+        return date.getDay() === 0 || date.getDay() === 6;
+    }
+    /**
+     * Computed signal that returns a fresh disabled-date function whenever dateOptions()
+     * changes. Returning a new function reference causes the datepicker's own isDateDisabled
+     * input to update, which triggers its internal computed to re-run and re-render all
+     * calendar cells with the correct disabled state.
+     * The disabledSet is pre-built once per computation for O(1) per-cell lookups.
+     */
+    dateDisabledFn = computed(() => {
+        const disabledSet = new Set(this.dateOptions()
+            .filter(opt => opt.state === 'disabled')
+            .map(opt => opt.fullDate.toDateString()));
+        return (date) => {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            const max = new Date(today);
+            max.setDate(today.getDate() + this.daysAhead - 1);
+            const d = new Date(date);
+            d.setHours(0, 0, 0, 0);
+            if (d < today || d > max)
+                return true;
+            return disabledSet.has(date.toDateString());
+        };
+    }, ...(ngDevMode ? [{ debugName: "dateDisabledFn" }] : []));
     /**
      * Generate mock date and time data
      */
     generateMockData() {
-        // Generate 14 days starting from today
         const dates = [];
         const today = new Date();
         const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
         const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
         let firstAvailableDate = null;
-        for (let i = 0; i < 14; i++) {
+        for (let i = 0; i < this.daysAhead; i++) {
             const date = new Date(today);
             date.setDate(today.getDate() + i);
-            // Mark some dates as disabled (e.g., weekends or specific dates)
-            const isWeekend = date.getDay() === 0 || date.getDay() === 6;
-            const isDisabled = isWeekend || (i === 3) || (i === 7); // Example: disable some dates
+            const isDisabled = this.isDateUnavailable(date) || (i === 3) || (i === 7);
             const dateOption = {
                 id: `date-${i}`,
                 dayName: dayNames[date.getDay()],
@@ -16522,6 +16591,23 @@ class DsMobileBookingModalComponent {
         this.timeSlots.set(updatedSlots);
         this.selectedTimeSlot.set(selectedSlot);
     }
+    /**
+     * Called when the datepicker overlay emits a date selection.
+     * Finds the matching DateOption in the swiper, selects it, and auto-scrolls to it.
+     */
+    jumpToDate(date) {
+        if (!date)
+            return;
+        const options = this.dateOptions();
+        const idx = options.findIndex(opt => opt.fullDate.toDateString() === date.toDateString());
+        if (idx === -1)
+            return;
+        const option = options[idx];
+        if (option.state === 'disabled')
+            return;
+        this.selectDate(option);
+        this.swiperComponent?.slideTo(idx);
+    }
     /**
      * Handle confirm button click
      */
@@ -16548,7 +16634,7 @@ class DsMobileBookingModalComponent {
         await this.modalController.dismiss(null, 'cancel');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingModalComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingModalComponent, isStandalone: true, selector: "ds-mobile-booking-modal", inputs: { facilityId: "facilityId", facilityTitle: "facilityTitle" }, viewQueries: [{ propertyName: "swiperComponent", first: true, predicate: DsMobileSwiperComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileBookingModalComponent, isStandalone: true, selector: "ds-mobile-booking-modal", inputs: { facilityId: "facilityId", facilityTitle: "facilityTitle", daysAhead: "daysAhead" }, viewQueries: [{ propertyName: "swiperComponent", first: true, predicate: DsMobileSwiperComponent, descendants: true }], ngImport: i0, template: `
     <ds-mobile-modal-base 
       headerTitle="Hvornår skal det være?"
       [showCloseButton]="true"
@@ -16557,6 +16643,16 @@ class DsMobileBookingModalComponent {
       
       <!-- Date Section -->
       <ds-mobile-section headline="Vælg dato">
+        <ds-datepicker
+          header-action
+          [isDateDisabled]="dateDisabledFn()"
+          (dateChange)="jumpToDate($event)">
+          <span class="calendar-link">
+            Vælg fra kalender
+            <ds-icon name="remixArrowRightSLine" size="16px" />
+          </span>
+        </ds-datepicker>
+
         <ds-mobile-swiper 
           class="date-swiper"
           [slideWidth]="'auto'" 
@@ -16610,7 +16706,7 @@ class DsMobileBookingModalComponent {
         </ds-button>
       </div>
     </ds-mobile-modal-base>
-  `, isInline: true, styles: [".date-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;padding:12px 8px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;gap:4px}.date-item .day-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:uppercase}.date-item .date-number{font-family:Brockmann,sans-serif;font-size:var(--font-size-xl, 20px);font-weight:600;color:var(--text-color-default-primary, #202227)}.date-item .month-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:capitalize}.date-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.date-item.selected .day-name,.date-item.selected .date-number,.date-item.selected .month-name{color:#fff}.date-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.date-item.disabled .day-name,.date-item.disabled .date-number,.date-item.disabled .month-name{color:var(--text-color-default-tertiary, #9a9aa2)}.date-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.time-slots-list{display:flex;flex-direction:column;gap:8px}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.time-slot-item span{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:400;color:var(--text-color-default-primary, #202227)}.time-slot-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.time-slot-item.selected span{color:#fff;font-weight:500}.time-slot-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.time-slot-item.disabled span{color:var(--text-color-default-tertiary, #9a9aa2)}.time-slot-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.booking-confirm-action{width:100%;padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5);box-sizing:border-box}.booking-confirm-action ::ng-deep ds-button{display:block;width:100%}.booking-confirm-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:48px}::ng-deep .date-swiper .swiper-slide{width:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { kind: "component", type: DsButtonComponent, selector: "ds-button", inputs: ["variant", "size", "disabled", "loading", "pressed", "expanded", "leadingIcon", "trailingIcon", "ariaLabel", "iconOnly"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [".date-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;padding:12px 8px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;gap:4px}.date-item .day-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:uppercase}.date-item .date-number{font-family:Brockmann,sans-serif;font-size:var(--font-size-xl, 20px);font-weight:600;color:var(--text-color-default-primary, #202227)}.date-item .month-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:capitalize}.date-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.date-item.selected .day-name,.date-item.selected .date-number,.date-item.selected .month-name{color:#fff}.date-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.date-item.disabled .day-name,.date-item.disabled .date-number,.date-item.disabled .month-name{color:var(--text-color-default-tertiary, #9a9aa2)}.date-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.time-slots-list{display:flex;flex-direction:column;gap:8px}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.time-slot-item span{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:400;color:var(--text-color-default-primary, #202227)}.time-slot-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.time-slot-item.selected span{color:#fff;font-weight:500}.time-slot-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.time-slot-item.disabled span{color:var(--text-color-default-tertiary, #9a9aa2)}.time-slot-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.booking-confirm-action{width:100%;padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5);box-sizing:border-box}.booking-confirm-action ::ng-deep ds-button{display:block;width:100%}.booking-confirm-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:48px}::ng-deep .date-swiper .swiper-slide{width:auto!important}.calendar-link{display:flex;align-items:center;gap:2px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}::ng-deep .cdk-overlay-container{z-index:20001}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsMobileModalBaseComponent, selector: "ds-mobile-modal-base", inputs: ["showHeader"] }, { kind: "component", type: DsMobileSectionComponent, selector: "ds-mobile-section", inputs: ["headline", "icon", "linkText", "padding", "gap", "contentGap", "showBorder", "overflow"], outputs: ["linkClick"] }, { kind: "component", type: DsMobileSwiperComponent, selector: "ds-mobile-swiper", inputs: ["slideWidth", "gap", "pagination", "autoHeight", "progressiveOpacity", "progressiveScale"] }, { kind: "component", type: DsIconComponent, selector: "ds-icon", inputs: ["name", "size", "color", "interactive"] }, { 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: DsDatepickerComponent, selector: "ds-datepicker", inputs: ["variant", "disabled", "placeholder", "ariaLabel", "ariaDescribedBy", "disableFutureDates", "disablePastDates", "isDateDisabled", "locale"], outputs: ["dateChange", "opened", "closed"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileBookingModalComponent, decorators: [{
             type: Component,
@@ -16620,7 +16716,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsMobileSectionComponent,
                         DsMobileSwiperComponent,
                         DsIconComponent,
-                        DsButtonComponent
+                        DsButtonComponent,
+                        DsDatepickerComponent
                     ], schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `
     <ds-mobile-modal-base 
       headerTitle="Hvornår skal det være?"
@@ -16630,6 +16727,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       
       <!-- Date Section -->
       <ds-mobile-section headline="Vælg dato">
+        <ds-datepicker
+          header-action
+          [isDateDisabled]="dateDisabledFn()"
+          (dateChange)="jumpToDate($event)">
+          <span class="calendar-link">
+            Vælg fra kalender
+            <ds-icon name="remixArrowRightSLine" size="16px" />
+          </span>
+        </ds-datepicker>
+
         <ds-mobile-swiper 
           class="date-swiper"
           [slideWidth]="'auto'" 
@@ -16683,11 +16790,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         </ds-button>
       </div>
     </ds-mobile-modal-base>
-  `, styles: [".date-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;padding:12px 8px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;gap:4px}.date-item .day-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:uppercase}.date-item .date-number{font-family:Brockmann,sans-serif;font-size:var(--font-size-xl, 20px);font-weight:600;color:var(--text-color-default-primary, #202227)}.date-item .month-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:capitalize}.date-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.date-item.selected .day-name,.date-item.selected .date-number,.date-item.selected .month-name{color:#fff}.date-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.date-item.disabled .day-name,.date-item.disabled .date-number,.date-item.disabled .month-name{color:var(--text-color-default-tertiary, #9a9aa2)}.date-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.time-slots-list{display:flex;flex-direction:column;gap:8px}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.time-slot-item span{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:400;color:var(--text-color-default-primary, #202227)}.time-slot-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.time-slot-item.selected span{color:#fff;font-weight:500}.time-slot-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.time-slot-item.disabled span{color:var(--text-color-default-tertiary, #9a9aa2)}.time-slot-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.booking-confirm-action{width:100%;padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5);box-sizing:border-box}.booking-confirm-action ::ng-deep ds-button{display:block;width:100%}.booking-confirm-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:48px}::ng-deep .date-swiper .swiper-slide{width:auto!important}\n"] }]
+  `, styles: [".date-item{display:flex;flex-direction:column;align-items:center;justify-content:center;width:80px;padding:12px 8px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent;gap:4px}.date-item .day-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:uppercase}.date-item .date-number{font-family:Brockmann,sans-serif;font-size:var(--font-size-xl, 20px);font-weight:600;color:var(--text-color-default-primary, #202227)}.date-item .month-name{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs, 12px);font-weight:400;color:var(--text-color-default-secondary, #71727a);text-transform:capitalize}.date-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.date-item.selected .day-name,.date-item.selected .date-number,.date-item.selected .month-name{color:#fff}.date-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.date-item.disabled .day-name,.date-item.disabled .date-number,.date-item.disabled .month-name{color:var(--text-color-default-tertiary, #9a9aa2)}.date-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.time-slots-list{display:flex;flex-direction:column;gap:8px}.time-slot-item{display:flex;align-items:center;justify-content:space-between;width:100%;padding:16px 20px;border-radius:12px;border:1px solid var(--color-border, #e5e5e5);background:var(--color-surface-primary, #ffffff);cursor:pointer;transition:all .2s ease;-webkit-tap-highlight-color:transparent}.time-slot-item span{font-family:Brockmann,sans-serif;font-size:var(--font-size-base, 16px);font-weight:400;color:var(--text-color-default-primary, #202227)}.time-slot-item.selected{background:var(--color-accent, #5d5fef);border-color:var(--color-accent, #5d5fef)}.time-slot-item.selected span{color:#fff;font-weight:500}.time-slot-item.disabled{background:var(--color-background-neutral-secondary, #f5f5f5);border-color:var(--color-border, #e5e5e5);cursor:not-allowed;opacity:.6}.time-slot-item.disabled span{color:var(--text-color-default-tertiary, #9a9aa2)}.time-slot-item:not(.disabled):not(.selected):hover{border-color:var(--color-accent, #5d5fef);background:var(--color-background-neutral-secondary, #f5f5f5)}.booking-confirm-action{width:100%;padding:16px 20px;background:var(--color-surface-primary, #ffffff);border-top:1px solid var(--color-border, #e5e5e5);box-sizing:border-box}.booking-confirm-action ::ng-deep ds-button{display:block;width:100%}.booking-confirm-action ::ng-deep ds-button button{width:100%;border-radius:100px;height:48px}::ng-deep .date-swiper .swiper-slide{width:auto!important}.calendar-link{display:flex;align-items:center;gap:2px;font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:500;color:var(--color-accent, #5d5fef);cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;line-height:1}::ng-deep .cdk-overlay-container{z-index:20001}\n"] }]
         }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { facilityId: [{
                 type: Input
             }], facilityTitle: [{
                 type: Input
+            }], daysAhead: [{
+                type: Input
             }], swiperComponent: [{
                 type: ViewChild,
                 args: [DsMobileSwiperComponent]
@@ -16937,12 +17046,14 @@ class DsMobileBookingModalService extends BaseModalService {
      * @param facilityId The ID of the facility to book
      * @param facilityTitle The display name of the facility
      * @param facilityThumbnail Optional thumbnail image URL
+     * @param daysAhead Number of days ahead available for selection (defaults to 14)
      * @returns Promise that resolves when the booking flow is complete
      */
-    async open(facilityId, facilityTitle, facilityThumbnail) {
+    async open(facilityId, facilityTitle, facilityThumbnail, daysAhead) {
         const modal = await this.createModal(DsMobileBookingModalComponent, {
             facilityId,
-            facilityTitle
+            facilityTitle,
+            ...(daysAhead !== undefined && { daysAhead })
         }, { keyboardClose: true });
         await modal.present();
         const result = await modal.onWillDismiss();
@@ -17249,18 +17360,17 @@ class DsMobileFacilityCreationModalComponent {
             return;
         }
         try {
-            const image = await Camera.getPhoto({
-                quality: 90,
-                allowEditing: false,
-                resultType: CameraResultType.Uri,
-                source: CameraSource.Photos, // Only show photo library
+            const result = await FilePicker.pickImages({
+                limit: 1,
             });
-            if (image.webPath) {
+            const image = result.files?.[0];
+            if (image) {
                 const newAttachment = {
                     id: `photo-${Date.now()}`,
-                    src: image.webPath,
+                    src: image.path ? Capacitor.convertFileSrc(image.path) : (image.blob ? URL.createObjectURL(image.blob) : ''),
                     type: 'image',
-                    name: `Photo ${this.attachments().length + 1}`,
+                    name: image.name || `Photo ${this.attachments().length + 1}`,
+                    size: this.formatFileSize(image.size ?? 0),
                 };
                 this.attachments.update((attachments) => [...attachments, newAttachment]);
             }
@@ -17431,8 +17541,8 @@ class DsMobileFacilityCreationModalComponent {
 
       <!-- List Items Section -->
       <ds-mobile-section [contentGap]="'0'">
-        <!-- Who can book -->
-        <ds-mobile-list-item 
+        <!-- Who can book - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
           [leadingSize]="'32px'" 
           [showDivider]="true" 
           [interactive]="true"
@@ -17445,7 +17555,7 @@ class DsMobileFacilityCreationModalComponent {
             <div class="detail-value">{{ whoCanBook() }}</div>
           </div>
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
+        </ds-mobile-list-item> -->
 
         <!-- When can it be booked -->
         <ds-mobile-list-item 
@@ -17466,7 +17576,7 @@ class DsMobileFacilityCreationModalComponent {
         <!-- Price -->
         <ds-mobile-list-item 
           [leadingSize]="'32px'" 
-          [showDivider]="true" 
+          [showDivider]="false" 
           [interactive]="true"
           [showDesktopMoreButton]="false"
           [align]="'center'"
@@ -17479,8 +17589,8 @@ class DsMobileFacilityCreationModalComponent {
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
         </ds-mobile-list-item>
 
-        <!-- Access requirements -->
-        <ds-mobile-list-item 
+        <!-- Access requirements - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
           [leadingSize]="'32px'" 
           [showDivider]="false" 
           [interactive]="true"
@@ -17493,7 +17603,7 @@ class DsMobileFacilityCreationModalComponent {
             <div class="detail-value">{{ accessRequirements() }}</div>
           </div>
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
+        </ds-mobile-list-item> -->
       </ds-mobile-section>
 
       <!-- Fixed Bottom Container (Slides with keyboard) -->
@@ -17587,8 +17697,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
 
       <!-- List Items Section -->
       <ds-mobile-section [contentGap]="'0'">
-        <!-- Who can book -->
-        <ds-mobile-list-item 
+        <!-- Who can book - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
           [leadingSize]="'32px'" 
           [showDivider]="true" 
           [interactive]="true"
@@ -17601,7 +17711,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             <div class="detail-value">{{ whoCanBook() }}</div>
           </div>
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
+        </ds-mobile-list-item> -->
 
         <!-- When can it be booked -->
         <ds-mobile-list-item 
@@ -17622,7 +17732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <!-- Price -->
         <ds-mobile-list-item 
           [leadingSize]="'32px'" 
-          [showDivider]="true" 
+          [showDivider]="false" 
           [interactive]="true"
           [showDesktopMoreButton]="false"
           [align]="'center'"
@@ -17635,8 +17745,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
         </ds-mobile-list-item>
 
-        <!-- Access requirements -->
-        <ds-mobile-list-item 
+        <!-- Access requirements - hidden until Propbinder API supports this field -->
+        <!-- <ds-mobile-list-item 
           [leadingSize]="'32px'" 
           [showDivider]="false" 
           [interactive]="true"
@@ -17649,7 +17759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             <div class="detail-value">{{ accessRequirements() }}</div>
           </div>
           <ds-icon content-trailing name="remixArrowRightSLine" size="20px" color="tertiary" />
-        </ds-mobile-list-item>
+        </ds-mobile-list-item> -->
       </ds-mobile-section>
 
       <!-- Fixed Bottom Container (Slides with keyboard) -->
@@ -18068,24 +18178,59 @@ var dsMobileWhoCanBookSheet = /*#__PURE__*/Object.freeze({
  * DsMobileWhenCanBookSheetComponent
  *
  * Bottom sheet for selecting when a facility can be booked (days, time range, duration).
+ * "Vælg selv" opens a drum-roll IonPopover on mobile, or inline number inputs on desktop.
  */
 class DsMobileWhenCanBookSheetComponent {
     modalController;
+    platformId = inject(PLATFORM_ID);
+    // Platform
+    isDesktop = signal(false, ...(ngDevMode ? [{ debugName: "isDesktop" }] : []));
     // State
-    selectedDays = signal(new Set(['Fre', 'Lør', 'Søn']), ...(ngDevMode ? [{ debugName: "selectedDays" }] : [])); // default to weekend
+    selectedDays = signal(new Set(['Fre', 'Lør', 'Søn']), ...(ngDevMode ? [{ debugName: "selectedDays" }] : []));
     startTime = signal('09:00', ...(ngDevMode ? [{ debugName: "startTime" }] : []));
     endTime = signal('17:30', ...(ngDevMode ? [{ debugName: "endTime" }] : []));
     selectedDuration = signal('1 time', ...(ngDevMode ? [{ debugName: "selectedDuration" }] : []));
+    /**
+     * Maximum number of days available in the "Vælg selv" picker/inputs.
+     * Defaults to 30 (one full month). Override via componentProps when opening the sheet.
+     */
+    maxDays = input(30, ...(ngDevMode ? [{ debugName: "maxDays" }] : []));
+    // Custom duration state
+    pickerOpen = signal(false, ...(ngDevMode ? [{ debugName: "pickerOpen" }] : []));
+    customDays = signal(0, ...(ngDevMode ? [{ debugName: "customDays" }] : []));
+    customHours = signal(1, ...(ngDevMode ? [{ debugName: "customHours" }] : []));
+    customMinutes = signal(0, ...(ngDevMode ? [{ debugName: "customMinutes" }] : []));
+    customDurationLabel = computed(() => {
+        const d = this.customDays();
+        const h = this.customHours();
+        const m = this.customMinutes();
+        const parts = [];
+        if (d > 0)
+            parts.push(`${d} dage`);
+        if (h > 0)
+            parts.push(`${h}t`);
+        if (m > 0)
+            parts.push(`${m}min`);
+        return parts.join(' ');
+    }, ...(ngDevMode ? [{ debugName: "customDurationLabel" }] : []));
+    showInlineInputs = computed(() => this.selectedDuration() === 'Vælg selv' && this.isDesktop(), ...(ngDevMode ? [{ debugName: "showInlineInputs" }] : []));
     // Options
     days = ['Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør', 'Søn'];
     durations = [
         { value: '30 min', label: '30 min' },
         { value: '1 time', label: '1 time' },
         { value: '2 timer', label: '2 timer' },
+        { value: 'Hele dagen', label: 'Hele dagen' },
         { value: 'Vælg selv', label: 'Vælg selv' }
     ];
+    daysOptions = computed(() => Array.from({ length: this.maxDays() + 1 }, (_, i) => i), ...(ngDevMode ? [{ debugName: "daysOptions" }] : []));
+    hours = Array.from({ length: 24 }, (_, i) => i);
+    minuteOptions = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
     // Validation
     isValid = computed(() => {
+        if (this.selectedDuration() === 'Vælg selv' && this.customDurationLabel() === '') {
+            return false;
+        }
         return this.selectedDays().size > 0 &&
             this.startTime() &&
             this.endTime();
@@ -18093,6 +18238,50 @@ class DsMobileWhenCanBookSheetComponent {
     constructor(modalController) {
         this.modalController = modalController;
     }
+    ngOnInit() {
+        if (isPlatformBrowser(this.platformId)) {
+            this.isDesktop.set(window.innerWidth >= 768);
+            window.addEventListener('resize', () => {
+                this.isDesktop.set(window.innerWidth >= 768);
+            });
+        }
+    }
+    /**
+     * Handle duration chip selection.
+     * On mobile, opening "Vælg selv" triggers the IonPopover via its trigger id.
+     * On desktop, it shows the inline inputs.
+     */
+    selectDuration(value) {
+        this.selectedDuration.set(value);
+        if (value === 'Vælg selv' && !this.isDesktop()) {
+            this.pickerOpen.set(true);
+        }
+    }
+    /**
+     * Normalizes days/hours/minutes so values never overflow their units.
+     * e.g. 0d 48t 0min → 2d 0t 0min; 0d 0t 75min → 0d 1t 15min.
+     * Caps days at maxDays().
+     */
+    normalize() {
+        const totalMinutes = this.customDays() * 24 * 60
+            + this.customHours() * 60
+            + this.customMinutes();
+        const maxTotalMinutes = this.maxDays() * 24 * 60 + 23 * 60 + 59;
+        const clamped = Math.max(0, Math.min(totalMinutes, maxTotalMinutes));
+        const d = Math.floor(clamped / (24 * 60));
+        const h = Math.floor((clamped % (24 * 60)) / 60);
+        const m = clamped % 60;
+        this.customDays.set(d);
+        this.customHours.set(h);
+        this.customMinutes.set(m);
+    }
+    /**
+     * Called when the mobile picker popover is dismissed — normalize and commit.
+     */
+    onPickerDismiss() {
+        this.normalize();
+        this.pickerOpen.set(false);
+    }
     /**
      * Toggle day selection
      */
@@ -18105,10 +18294,13 @@ class DsMobileWhenCanBookSheetComponent {
      * Confirm selection and dismiss with data
      */
     confirmSelection() {
+        const duration = this.selectedDuration() === 'Vælg selv'
+            ? this.customDurationLabel()
+            : this.selectedDuration();
         const data = {
             days: Array.from(this.selectedDays()),
             timeRange: { start: this.startTime(), end: this.endTime() },
-            duration: this.selectedDuration()
+            duration
         };
         this.modalController.dismiss({ value: data }, 'select');
     }
@@ -18119,7 +18311,7 @@ class DsMobileWhenCanBookSheetComponent {
         this.modalController.dismiss(null, 'cancel');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileWhenCanBookSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileWhenCanBookSheetComponent, isStandalone: true, selector: "ds-mobile-when-can-book-sheet", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobileWhenCanBookSheetComponent, isStandalone: true, selector: "ds-mobile-when-can-book-sheet", inputs: { maxDays: { classPropertyName: "maxDays", publicName: "maxDays", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
     <ds-mobile-bottom-sheet-wrapper>
       <!-- Header with back and done buttons -->
       <ds-mobile-bottom-sheet-header
@@ -18152,9 +18344,9 @@ class DsMobileWhenCanBookSheetComponent {
         <div class="section">
           <ds-label size="md" className="form-section-label">I tidsrummet</ds-label>
           <div class="time-inputs">
-            <ds-input-time [(ngModel)]="startTime"></ds-input-time>
+            <ds-input-time size="lg" [(ngModel)]="startTime"></ds-input-time>
             <span class="separator">til</span>
-            <ds-input-time [(ngModel)]="endTime"></ds-input-time>
+            <ds-input-time size="lg" [(ngModel)]="endTime"></ds-input-time>
           </div>
         </div>
 
@@ -18166,16 +18358,79 @@ class DsMobileWhenCanBookSheetComponent {
               <button 
                 type="button"
                 class="duration-chip"
+                [id]="duration.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
                 [class.active]="selectedDuration() === duration.value"
-                (click)="selectedDuration.set(duration.value)">
-                {{ duration.label }}
+                (click)="selectDuration(duration.value)">
+                @if (duration.value === 'Vælg selv' && selectedDuration() === 'Vælg selv') {
+                  {{ customDurationLabel() || 'Vælg selv' }}
+                } @else {
+                  {{ duration.label }}
+                }
               </button>
             }
           </div>
+
+          <!-- Desktop: inline inputs shown when "Vælg selv" is active -->
+          @if (showInlineInputs()) {
+            <div class="custom-duration-inputs">
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                [ngModel]="customHours()"
+                (ngModelChange)="customHours.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">timer</span>
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                max="59"
+                [ngModel]="customMinutes()"
+                (ngModelChange)="customMinutes.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">min</span>
+            </div>
+          }
+
+          <!-- Mobile: drum-roll popover anchored to the "Vælg selv" chip -->
+          @if (!isDesktop()) {
+            <ds-mobile-dropdown
+              trigger="vaelg-selv-chip"
+              [isOpen]="pickerOpen()"
+              maxWidth="240px"
+              position="above"
+              (closed)="onPickerDismiss()">
+              <ng-template #customContent>
+                <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
+                  <ion-picker-column
+                    [value]="customHours()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
+                    <div slot="suffix" class="picker-suffix">t</div>
+                    @for (h of hours; track h) {
+                      <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                  <ion-picker-column
+                    [value]="customMinutes()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
+                    <div slot="suffix" class="picker-suffix">min</div>
+                    @for (m of minuteOptions; track m) {
+                      <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                </ion-picker>
+              </ng-template>
+            </ds-mobile-dropdown>
+          }
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, isInline: true, styles: [".form-content{padding:16px}.section{margin-bottom:24px}.section:last-child{margin-bottom:0}::ng-deep ds-label.form-section-label{display:block;margin-bottom:12px}::ng-deep .form-section-label{font-weight:500}.day-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}.day-chip{flex:1;min-width:0;padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.day-chip:hover{background:var(--color-bg-secondary)}.day-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.time-inputs{display:flex;align-items:center;gap:12px}.separator{color:var(--color-text-secondary);font-size:14px}.duration-chips{display:flex;gap:8px;flex-wrap:wrap}.duration-chip{padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.duration-chip:hover{background:var(--color-bg-secondary)}.duration-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsInputTimeComponent, selector: "ds-input-time", inputs: ["variant", "disabled", "readonly", "required", "clearable", "ghost", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange"] }, { kind: "component", type: DsLabelComponent, selector: "ds-label", inputs: ["className", "for", "id", "size"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled"], outputs: ["leftButtonClick", "rightButtonClick"] }] });
+  `, isInline: true, styles: [".form-content{padding:16px}.section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.section:last-child{margin-bottom:0}::ng-deep ds-label.form-section-label{display:block;margin-bottom:12px}::ng-deep .form-section-label{font-weight:500}.day-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}.day-chip{flex:none;width:64px;padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.day-chip:hover{background:var(--color-bg-secondary)}.day-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.time-inputs{display:flex;align-items:center;gap:12px}.separator{color:var(--color-text-secondary);font-size:14px}.duration-chips{display:flex;gap:8px;flex-wrap:wrap}.duration-chip{padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.duration-chip:hover{background:var(--color-bg-secondary)}.duration-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.custom-duration-inputs{display:flex;align-items:center;gap:8px;margin-top:12px;animation:fadeSlideIn .15s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.duration-number-input{width:64px;padding:8px 10px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;text-align:center;outline:none;transition:border-color .2s ease}.duration-number-input:focus{border-color:var(--color-accent)}.duration-number-input::-webkit-inner-spin-button,.duration-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.duration-number-input[type=number]{-moz-appearance:textfield}.duration-unit{color:var(--color-text-secondary);font-size:14px}.picker-suffix{margin-left:-24px;font-size:13px;color:var(--color-text-secondary)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsInputTimeComponent, selector: "ds-input-time", inputs: ["variant", "disabled", "readonly", "required", "clearable", "ghost", "size", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange"] }, { kind: "component", type: DsLabelComponent, selector: "ds-label", inputs: ["className", "for", "id", "size"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled"], outputs: ["leftButtonClick", "rightButtonClick"] }, { kind: "component", type: DsMobileDropdownComponent, selector: "ds-mobile-dropdown", inputs: ["trigger", "keepFocusOn", "items", "isOpen", "position", "align", "maxHeight", "emptyMessage", "ariaLabel", "maxWidth"], outputs: ["itemSelected", "closed"] }, { kind: "component", type: IonPicker, selector: "ion-picker", inputs: ["mode"] }, { kind: "component", type: IonPickerColumn, selector: "ion-picker-column", inputs: ["color", "disabled", "mode", "value"] }, { kind: "component", type: IonPickerColumnOption, selector: "ion-picker-column-option", inputs: ["color", "disabled", "value"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileWhenCanBookSheetComponent, decorators: [{
             type: Component,
@@ -18185,7 +18440,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         DsInputTimeComponent,
                         DsLabelComponent,
                         DsMobileBottomSheetWrapperComponent,
-                        DsMobileBottomSheetHeaderComponent
+                        DsMobileBottomSheetHeaderComponent,
+                        DsMobileDropdownComponent,
+                        IonPicker,
+                        IonPickerColumn,
+                        IonPickerColumnOption,
                     ], template: `
     <ds-mobile-bottom-sheet-wrapper>
       <!-- Header with back and done buttons -->
@@ -18219,9 +18478,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         <div class="section">
           <ds-label size="md" className="form-section-label">I tidsrummet</ds-label>
           <div class="time-inputs">
-            <ds-input-time [(ngModel)]="startTime"></ds-input-time>
+            <ds-input-time size="lg" [(ngModel)]="startTime"></ds-input-time>
             <span class="separator">til</span>
-            <ds-input-time [(ngModel)]="endTime"></ds-input-time>
+            <ds-input-time size="lg" [(ngModel)]="endTime"></ds-input-time>
           </div>
         </div>
 
@@ -18233,17 +18492,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
               <button 
                 type="button"
                 class="duration-chip"
+                [id]="duration.value === 'Vælg selv' ? 'vaelg-selv-chip' : null"
                 [class.active]="selectedDuration() === duration.value"
-                (click)="selectedDuration.set(duration.value)">
-                {{ duration.label }}
+                (click)="selectDuration(duration.value)">
+                @if (duration.value === 'Vælg selv' && selectedDuration() === 'Vælg selv') {
+                  {{ customDurationLabel() || 'Vælg selv' }}
+                } @else {
+                  {{ duration.label }}
+                }
               </button>
             }
           </div>
+
+          <!-- Desktop: inline inputs shown when "Vælg selv" is active -->
+          @if (showInlineInputs()) {
+            <div class="custom-duration-inputs">
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                [ngModel]="customHours()"
+                (ngModelChange)="customHours.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">timer</span>
+              <input
+                type="number"
+                class="duration-number-input"
+                min="0"
+                max="59"
+                [ngModel]="customMinutes()"
+                (ngModelChange)="customMinutes.set(+$event)"
+                (blur)="normalize()"
+              />
+              <span class="duration-unit">min</span>
+            </div>
+          }
+
+          <!-- Mobile: drum-roll popover anchored to the "Vælg selv" chip -->
+          @if (!isDesktop()) {
+            <ds-mobile-dropdown
+              trigger="vaelg-selv-chip"
+              [isOpen]="pickerOpen()"
+              maxWidth="240px"
+              position="above"
+              (closed)="onPickerDismiss()">
+              <ng-template #customContent>
+                <ion-picker style="--background: transparent; --fade-background-rgb: transparent; --highlight-background: rgba(0, 0, 0, 0.05); --highlight-border-radius: 9999px;">
+                  <ion-picker-column
+                    [value]="customHours()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customHours.set(+($event.detail.value ?? customHours()))">
+                    <div slot="suffix" class="picker-suffix">t</div>
+                    @for (h of hours; track h) {
+                      <ion-picker-column-option [value]="h">{{ h }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                  <ion-picker-column
+                    [value]="customMinutes()"
+                    style="--padding-start: 4px; --padding-end: 4px;"
+                    (ionChange)="customMinutes.set(+($event.detail.value ?? customMinutes()))">
+                    <div slot="suffix" class="picker-suffix">min</div>
+                    @for (m of minuteOptions; track m) {
+                      <ion-picker-column-option [value]="m">{{ m }}</ion-picker-column-option>
+                    }
+                  </ion-picker-column>
+                </ion-picker>
+              </ng-template>
+            </ds-mobile-dropdown>
+          }
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, styles: [".form-content{padding:16px}.section{margin-bottom:24px}.section:last-child{margin-bottom:0}::ng-deep ds-label.form-section-label{display:block;margin-bottom:12px}::ng-deep .form-section-label{font-weight:500}.day-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}.day-chip{flex:1;min-width:0;padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.day-chip:hover{background:var(--color-bg-secondary)}.day-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.time-inputs{display:flex;align-items:center;gap:12px}.separator{color:var(--color-text-secondary);font-size:14px}.duration-chips{display:flex;gap:8px;flex-wrap:wrap}.duration-chip{padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.duration-chip:hover{background:var(--color-bg-secondary)}.duration-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}\n"] }]
-        }], ctorParameters: () => [{ type: i1.ModalController }] });
+  `, styles: [".form-content{padding:16px}.section{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.section:last-child{margin-bottom:0}::ng-deep ds-label.form-section-label{display:block;margin-bottom:12px}::ng-deep .form-section-label{font-weight:500}.day-chips{display:flex;gap:8px;flex-wrap:wrap;width:100%}.day-chip{flex:none;width:64px;padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.day-chip:hover{background:var(--color-bg-secondary)}.day-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.time-inputs{display:flex;align-items:center;gap:12px}.separator{color:var(--color-text-secondary);font-size:14px}.duration-chips{display:flex;gap:8px;flex-wrap:wrap}.duration-chip{padding:10px 16px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;outline:none}.duration-chip:hover{background:var(--color-bg-secondary)}.duration-chip.active{background:var(--color-accent);color:#fff;border-color:var(--color-accent)}.custom-duration-inputs{display:flex;align-items:center;gap:8px;margin-top:12px;animation:fadeSlideIn .15s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.duration-number-input{width:64px;padding:8px 10px;border:1px solid var(--border-color-default, #d1d5db);border-radius:8px;background:transparent;color:var(--color-text-primary);font-size:14px;font-weight:500;text-align:center;outline:none;transition:border-color .2s ease}.duration-number-input:focus{border-color:var(--color-accent)}.duration-number-input::-webkit-inner-spin-button,.duration-number-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.duration-number-input[type=number]{-moz-appearance:textfield}.duration-unit{color:var(--color-text-secondary);font-size:14px}.picker-suffix{margin-left:-24px;font-size:13px;color:var(--color-text-secondary)}\n"] }]
+        }], ctorParameters: () => [{ type: i1.ModalController }], propDecorators: { maxDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDays", required: false }] }] } });
 
 var dsMobileWhenCanBookSheet = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -18294,7 +18616,7 @@ class DsMobilePriceSheetComponent {
         this.modalController.dismiss(null, 'cancel');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePriceSheetComponent, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: DsMobilePriceSheetComponent, isStandalone: true, selector: "ds-mobile-price-sheet", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DsMobilePriceSheetComponent, isStandalone: true, selector: "ds-mobile-price-sheet", ngImport: i0, template: `
     <ds-mobile-bottom-sheet-wrapper>
       <!-- Header with back and done buttons -->
       <ds-mobile-bottom-sheet-header
@@ -18307,29 +18629,33 @@ class DsMobilePriceSheetComponent {
       </ds-mobile-bottom-sheet-header>
 
       <div class="form-content">
-        <!-- Toggle for Gratis -->
-        <div class="toggle-row" (click)="toggleFree()">
-          <ds-label size="md" className="form-section-label">Gratis</ds-label>
-          <div class="toggle-switch" [class.active]="isFree()">
-            <div class="toggle-knob"></div>
+        <div class="price-toggle-container">
+          <!-- Toggle for Gratis -->
+          <div class="toggle-row" (click)="toggleFree()">
+            <ds-label size="md" className="form-section-label">Gratis</ds-label>
+            <div class="toggle-switch" [class.active]="isFree()">
+              <div class="toggle-knob"></div>
+            </div>
           </div>
-        </div>
 
-        <!-- Custom price input -->
-        <div class="section">
-          <ds-label size="md" className="form-section-label">Hvad skal det koste?</ds-label>
-          <ds-input
-            type="number"
-            [(ngModel)]="customPrice"
-            [disabled]="isFree()"
-            placeholder="75"
-            [suffix]="'kr. per booking'"
-            class="price-input">
-          </ds-input>
+          <!-- Custom price input inside same container -->
+          @if (!isFree()) {
+            <div class="price-input-row" (click)="$event.stopPropagation()">
+              <ds-label size="md" className="form-section-label">Hvad skal det koste?</ds-label>
+              <ds-input
+                type="number"
+                size="lg"
+                [(ngModel)]="customPrice"
+                placeholder="75"
+                [suffix]="'kr. per booking'"
+                class="price-input">
+              </ds-input>
+            </div>
+          }
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, isInline: true, styles: [".form-content{padding:16px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:12px;margin-bottom:24px;cursor:pointer;transition:background .2s ease}.toggle-row:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}::ng-deep ds-label.form-section-label{display:block;margin-bottom:8px}::ng-deep .form-section-label{font-weight:500}.toggle-switch{width:51px;height:31px;background:var(--color-border-default);border-radius:16px;position:relative;transition:background .3s ease;cursor:pointer}.toggle-switch.active{background:var(--color-accent)}.toggle-knob{width:27px;height:27px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-switch.active .toggle-knob{transform:translate(20px)}.section{margin-bottom:24px}::ng-deep .price-input .ds-input__field{height:48px!important;min-height:48px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsInputComponent, selector: "ds-input", inputs: ["variant", "type", "placeholder", "disabled", "readonly", "required", "clearable", "ghost", "leadingIcon", "trailingIcon", "prefix", "suffix", "format", "align", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange", "focused", "blurred"] }, { kind: "component", type: DsLabelComponent, selector: "ds-label", inputs: ["className", "for", "id", "size"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled"], outputs: ["leftButtonClick", "rightButtonClick"] }] });
+  `, isInline: true, styles: [".form-content{padding:16px}.price-toggle-container{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #f5f5f5);border:1px solid var(--border-color-default);border-radius:12px;margin-bottom:24px;overflow:hidden}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;transition:background .2s ease}.toggle-row:hover{background:var(--color-background-neutral-primary-hover, #ebebeb)}::ng-deep ds-label.form-section-label{display:block;margin-bottom:8px}::ng-deep .form-section-label{font-weight:500}.toggle-switch{width:51px;height:32px;background:var(--color-background-neutral-tertiary);border-radius:16px;position:relative;transition:background .3s ease;cursor:pointer}.toggle-switch.active{background:var(--color-accent)}.toggle-knob{width:27px;height:27px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-switch.active .toggle-knob{transform:translate(20px)}.price-input-row{display:flex;flex-direction:column;gap:8px;padding:16px;border-top:1px solid var(--border-color-default)}::ng-deep .price-input .ds-input__field{height:48px!important;min-height:48px!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: DsInputComponent, selector: "ds-input", inputs: ["variant", "type", "placeholder", "disabled", "readonly", "required", "clearable", "ghost", "size", "leadingIcon", "trailingIcon", "prefix", "suffix", "format", "align", "ariaLabel", "ariaDescribedBy", "ariaLabelledBy"], outputs: ["valueChange", "focused", "blurred"] }, { kind: "component", type: DsLabelComponent, selector: "ds-label", inputs: ["className", "for", "id", "size"] }, { kind: "component", type: DsMobileBottomSheetWrapperComponent, selector: "ds-mobile-bottom-sheet-wrapper" }, { kind: "component", type: DsMobileBottomSheetHeaderComponent, selector: "ds-mobile-bottom-sheet-header", inputs: ["title", "leftButtonLabel", "rightButtonLabel", "rightButtonDisabled"], outputs: ["leftButtonClick", "rightButtonClick"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobilePriceSheetComponent, decorators: [{
             type: Component,
@@ -18353,29 +18679,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </ds-mobile-bottom-sheet-header>
 
       <div class="form-content">
-        <!-- Toggle for Gratis -->
-        <div class="toggle-row" (click)="toggleFree()">
-          <ds-label size="md" className="form-section-label">Gratis</ds-label>
-          <div class="toggle-switch" [class.active]="isFree()">
-            <div class="toggle-knob"></div>
+        <div class="price-toggle-container">
+          <!-- Toggle for Gratis -->
+          <div class="toggle-row" (click)="toggleFree()">
+            <ds-label size="md" className="form-section-label">Gratis</ds-label>
+            <div class="toggle-switch" [class.active]="isFree()">
+              <div class="toggle-knob"></div>
+            </div>
           </div>
-        </div>
 
-        <!-- Custom price input -->
-        <div class="section">
-          <ds-label size="md" className="form-section-label">Hvad skal det koste?</ds-label>
-          <ds-input
-            type="number"
-            [(ngModel)]="customPrice"
-            [disabled]="isFree()"
-            placeholder="75"
-            [suffix]="'kr. per booking'"
-            class="price-input">
-          </ds-input>
+          <!-- Custom price input inside same container -->
+          @if (!isFree()) {
+            <div class="price-input-row" (click)="$event.stopPropagation()">
+              <ds-label size="md" className="form-section-label">Hvad skal det koste?</ds-label>
+              <ds-input
+                type="number"
+                size="lg"
+                [(ngModel)]="customPrice"
+                placeholder="75"
+                [suffix]="'kr. per booking'"
+                class="price-input">
+              </ds-input>
+            </div>
+          }
         </div>
       </div>
     </ds-mobile-bottom-sheet-wrapper>
-  `, styles: [".form-content{padding:16px}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--color-background-neutral-secondary, #f5f5f5);border-radius:12px;margin-bottom:24px;cursor:pointer;transition:background .2s ease}.toggle-row:hover{background:var(--color-background-neutral-secondary-hover, #ebebeb)}::ng-deep ds-label.form-section-label{display:block;margin-bottom:8px}::ng-deep .form-section-label{font-weight:500}.toggle-switch{width:51px;height:31px;background:var(--color-border-default);border-radius:16px;position:relative;transition:background .3s ease;cursor:pointer}.toggle-switch.active{background:var(--color-accent)}.toggle-knob{width:27px;height:27px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-switch.active .toggle-knob{transform:translate(20px)}.section{margin-bottom:24px}::ng-deep .price-input .ds-input__field{height:48px!important;min-height:48px!important}\n"] }]
+  `, styles: [".form-content{padding:16px}.price-toggle-container{display:flex;flex-direction:column;background:var(--color-background-neutral-primary, #f5f5f5);border:1px solid var(--border-color-default);border-radius:12px;margin-bottom:24px;overflow:hidden}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:16px;cursor:pointer;transition:background .2s ease}.toggle-row:hover{background:var(--color-background-neutral-primary-hover, #ebebeb)}::ng-deep ds-label.form-section-label{display:block;margin-bottom:8px}::ng-deep .form-section-label{font-weight:500}.toggle-switch{width:51px;height:32px;background:var(--color-background-neutral-tertiary);border-radius:16px;position:relative;transition:background .3s ease;cursor:pointer}.toggle-switch.active{background:var(--color-accent)}.toggle-knob{width:27px;height:27px;background:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease;box-shadow:0 2px 4px #0000001a}.toggle-switch.active .toggle-knob{transform:translate(20px)}.price-input-row{display:flex;flex-direction:column;gap:8px;padding:16px;border-top:1px solid var(--border-color-default)}::ng-deep .price-input .ds-input__field{height:48px!important;min-height:48px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
 var dsMobilePriceSheet = /*#__PURE__*/Object.freeze({
@@ -18576,25 +18906,6 @@ class DsMobileFacilityDetailModalComponent {
             </div>
           </ds-mobile-swiper>
         
-          @if (facilityData.requirements || facilityData.bookingType) {
-            <div class="info-items-container">
-            <h2 class="section-headline">Ting, du skal vide</h2>
-              @if (facilityData.requirements) {
-                @for (requirement of facilityData.requirements; track requirement) {
-                  <div class="info-item">
-                    <ds-icon name="remixKeyLine" size="16px" color="--text-color-default-secondary" />
-                    <span>{{ requirement }}</span>
-                  </div>
-                }
-              }
-              @if (facilityData.bookingType) {
-                <div class="info-item">
-                  <ds-icon name="remixCheckboxCircleLine" size="16px" color="--text-color-default-secondary" />
-                  <span>{{ facilityData.bookingType }}</span>
-                </div>
-              }
-            </div>
-          }
         </ds-mobile-section>
       }
       
@@ -18658,25 +18969,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             </div>
           </ds-mobile-swiper>
         
-          @if (facilityData.requirements || facilityData.bookingType) {
-            <div class="info-items-container">
-            <h2 class="section-headline">Ting, du skal vide</h2>
-              @if (facilityData.requirements) {
-                @for (requirement of facilityData.requirements; track requirement) {
-                  <div class="info-item">
-                    <ds-icon name="remixKeyLine" size="16px" color="--text-color-default-secondary" />
-                    <span>{{ requirement }}</span>
-                  </div>
-                }
-              }
-              @if (facilityData.bookingType) {
-                <div class="info-item">
-                  <ds-icon name="remixCheckboxCircleLine" size="16px" color="--text-color-default-secondary" />
-                  <span>{{ facilityData.bookingType }}</span>
-                </div>
-              }
-            </div>
-          }
         </ds-mobile-section>
       }
       
@@ -21840,11 +22132,91 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 args: ['pageComponent']
             }] } });
 
+class TrackingPermissionService {
+    trackingPromptRequestedKey = 'tracking_prompt_requested_v1';
+    platform = inject(Platform);
+    trackingSettingsReminder = signal(false, ...(ngDevMode ? [{ debugName: "trackingSettingsReminder" }] : []));
+    showTrackingSettingsReminder = this.trackingSettingsReminder.asReadonly();
+    async requestOnFirstHomeEntry() {
+        if (!this.isNativeIos()) {
+            this.trackingSettingsReminder.set(false);
+            return;
+        }
+        if (this.hasRequestedTrackingPrompt()) {
+            await this.refreshTrackingStatus();
+            return;
+        }
+        try {
+            const { status } = await AppTrackingTransparency.getStatus();
+            if (status === 'notDetermined') {
+                await AppTrackingTransparency.requestPermission();
+            }
+        }
+        catch (error) {
+            console.log('Unable to request app tracking permission:', error);
+        }
+        finally {
+            this.setTrackingPromptRequested();
+            await this.refreshTrackingStatus();
+        }
+    }
+    async getTrackingStatus() {
+        if (!this.isNativeIos()) {
+            return null;
+        }
+        try {
+            const { status } = await AppTrackingTransparency.getStatus();
+            return status;
+        }
+        catch (error) {
+            console.log('Unable to read app tracking status:', error);
+            return null;
+        }
+    }
+    async openAppSettings() {
+        if (!this.isNativeIos()) {
+            return;
+        }
+        // iOS deep link for opening this app's system settings page.
+        window.location.href = 'app-settings:';
+    }
+    shouldShowSettingsReminder() {
+        return this.trackingSettingsReminder();
+    }
+    async refreshTrackingStatus() {
+        if (!this.isNativeIos()) {
+            this.trackingSettingsReminder.set(false);
+            return;
+        }
+        const status = await this.getTrackingStatus();
+        const hasRequested = this.hasRequestedTrackingPrompt();
+        this.trackingSettingsReminder.set(Boolean(hasRequested && status && status !== 'authorized'));
+    }
+    isNativeIos() {
+        return this.platform.is('ios') && this.platform.is('capacitor');
+    }
+    hasRequestedTrackingPrompt() {
+        return localStorage.getItem(this.trackingPromptRequestedKey) === '1';
+    }
+    setTrackingPromptRequested() {
+        localStorage.setItem(this.trackingPromptRequestedKey, '1');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrackingPermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrackingPermissionService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrackingPermissionService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class MobileHomePageComponent {
     router;
     userService;
     postsService;
     postModal;
+    trackingPermissionService;
     pageComponent;
     // Get recent posts from PostsService - exclude pinned post (post-4) and limit to 3
     recentPosts = computed(() => this.postsService.posts()
@@ -21878,13 +22250,17 @@ class MobileHomePageComponent {
     openInquiries = computed(() => this.allInquiries()
         .filter(inquiry => inquiry.status === 'open')
         .slice(0, 3), ...(ngDevMode ? [{ debugName: "openInquiries" }] : []));
-    constructor(router, userService, postsService, postModal) {
+    constructor(router, userService, postsService, postModal, trackingPermissionService) {
         this.router = router;
         this.userService = userService;
         this.postsService = postsService;
         this.postModal = postModal;
+        this.trackingPermissionService = trackingPermissionService;
         console.log('MobileHomePageComponent constructor');
     }
+    ngOnInit() {
+        void this.trackingPermissionService.requestOnFirstHomeEntry();
+    }
     handleRefresh(event) {
         console.log('Pull-to-refresh triggered');
         setTimeout(() => {
@@ -21921,7 +22297,7 @@ class MobileHomePageComponent {
         console.log('Navigating to inquiries page');
         this.router.navigate(['/inquiries']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$4.Router }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileHomePageComponent, deps: [{ token: i1$4.Router }, { token: UserService }, { token: PostsService }, { token: DsMobilePostDetailModalService }, { token: TrackingPermissionService }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MobileHomePageComponent, isStandalone: true, selector: "app-home-page", viewQueries: [{ propertyName: "pageComponent", first: true, predicate: ["pageComponent"], descendants: true }], ngImport: i0, template: `
     <ds-mobile-page-main
       #pageComponent
@@ -22173,7 +22549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       </ds-mobile-section>
     </ds-mobile-page-main>
   `, styles: [".posts-list,.inquiries-list{display:flex;flex-direction:column}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center}.empty-state ds-button{display:block;margin-top:16px}.empty-state ds-button::ng-deep .btn{width:100%;border-radius:9999px}.empty-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;color:var(--color-text-primary);margin-top:-16px;z-index:4}.empty-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$4.Router }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }], propDecorators: { pageComponent: [{
+        }], ctorParameters: () => [{ type: i1$4.Router }, { type: UserService }, { type: PostsService }, { type: DsMobilePostDetailModalService }, { type: TrackingPermissionService }], propDecorators: { pageComponent: [{
                 type: ViewChild,
                 args: ['pageComponent']
             }] } });
@@ -24066,18 +24442,80 @@ class MobileTabsExampleComponent {
     userService;
     router;
     whitelabelDemoModal = inject(WhitelabelDemoModalService);
+    trackingPermissionService = inject(TrackingPermissionService);
+    trackedProfileMenuItems = computed(() => {
+        const accountActions = [
+            {
+                action: 'profile',
+                title: 'Min profil',
+                icon: 'remixUser3Line',
+                destructive: false,
+            },
+            {
+                action: 'settings',
+                title: 'Indstillinger',
+                icon: 'remixSettings3Line',
+                destructive: false,
+            },
+            {
+                action: 'appearance',
+                title: 'Udseende',
+                icon: 'remixPaletteLine',
+                destructive: false,
+            },
+        ];
+        if (this.trackingPermissionService.shouldShowSettingsReminder()) {
+            accountActions.push({
+                action: 'tracking-settings',
+                title: 'Sporingsindstillinger',
+                icon: 'remixSettings3Line',
+                destructive: false,
+            });
+        }
+        return [
+            {
+                actions: accountActions,
+            },
+            {
+                actions: [
+                    {
+                        action: 'language',
+                        title: 'Sprog',
+                        subtitle: 'Dansk',
+                        flagIcon: '/Assets/country-flags/denmark.svg',
+                        icon: 'remixGlobalLine',
+                        destructive: false,
+                        showChevron: true,
+                    },
+                ],
+            },
+            {
+                actions: [
+                    {
+                        action: 'logout',
+                        title: 'Log ud',
+                        icon: 'remixLogoutBoxLine',
+                        destructive: true,
+                    },
+                ],
+            },
+        ];
+    }, ...(ngDevMode ? [{ debugName: "trackedProfileMenuItems" }] : []));
     constructor(userService, router) {
         this.userService = userService;
         this.router = router;
         console.log('MobileTabsExampleComponent constructor');
+        effect(() => {
+            this.userService.setProfileMenuItems(this.trackedProfileMenuItems());
+        });
     }
     ngOnInit() {
         console.log('MobileTabsExampleComponent ngOnInit');
         // Configure user avatar globally - this is now the single source of truth
         this.userService.setAvatarInitials('LM');
         this.userService.setAvatarType('initials');
-        // Set profile menu items globally - this will be used by both tab bar and page-main components
-        this.userService.setProfileMenuItems(this.profileMenuItems);
+        // Initial status refresh ensures menu reflects past ATT choice.
+        void this.trackingPermissionService.refreshTrackingStatus();
     }
     tabs = [
         {
@@ -24123,53 +24561,7 @@ class MobileTabsExampleComponent {
      * throughout the entire application.
      */
     get profileMenuItems() {
-        return [
-            {
-                actions: [
-                    {
-                        action: 'profile',
-                        title: 'Min profil',
-                        icon: 'remixUser3Line',
-                        destructive: false,
-                    },
-                    {
-                        action: 'settings',
-                        title: 'Indstillinger',
-                        icon: 'remixSettings3Line',
-                        destructive: false,
-                    },
-                    {
-                        action: 'appearance',
-                        title: 'Udseende',
-                        icon: 'remixPaletteLine',
-                        destructive: false,
-                    },
-                ],
-            },
-            {
-                actions: [
-                    {
-                        action: 'language',
-                        title: 'Sprog',
-                        subtitle: 'Dansk',
-                        flagIcon: '/Assets/country-flags/denmark.svg',
-                        icon: 'remixGlobalLine',
-                        destructive: false,
-                        showChevron: true,
-                    },
-                ],
-            },
-            {
-                actions: [
-                    {
-                        action: 'logout',
-                        title: 'Log ud',
-                        icon: 'remixLogoutBoxLine',
-                        destructive: true,
-                    },
-                ],
-            },
-        ];
+        return this.trackedProfileMenuItems();
     }
     /**
      * Handle profile menu action selection.
@@ -24481,6 +24873,7 @@ class MobileBookingPageComponent {
                   [bookingTime]="booking.bookingTime || ''"
                   [align]="'center'"
                   [clickable]="true"
+                  [enableLongPress]="false"
                   [showChevron]="false"
                   (bookingClick)="openFacilityDetail(booking.id)"
                 />
@@ -24588,6 +24981,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                   [bookingTime]="booking.bookingTime || ''"
                   [align]="'center'"
                   [clickable]="true"
+                  [enableLongPress]="false"
                   [showChevron]="false"
                   (bookingClick)="openFacilityDetail(booking.id)"
                 />