@propbinder/mobile-design 0.2.30 → 0.2.33

package/fesm2022/propbinder-mobile-design.mjs

@@ -49,7 +49,7 @@ const DEFAULT_CONFIG = {
     signInBgGradientEnd: '#8A9BFF', // Gradient bottom color
     signInContentColor: '#1a1a1a', // Default dark text color
     organizationName: 'Propbinder',
-    organizationId: 'default'
+    organizationId: 'default',
 };
 /**
  * WhitelabelService
@@ -92,11 +92,16 @@ class WhitelabelService {
         }
         // Otherwise calculate height based on logoSize
         switch (size) {
-            case 'sm': return 24;
-            case 'md': return 28;
-            case 'lg': return 32;
-            case 'xl': return 36;
-            default: return 28;
+            case 'sm':
+                return 24;
+            case 'md':
+                return 28;
+            case 'lg':
+                return 32;
+            case 'xl':
+                return 36;
+            default:
+                return 28;
         }
     }, ...(ngDevMode ? [{ debugName: "logoHeight" }] : []));
     appIconSurface = computed(() => this._config().appIconSurface, ...(ngDevMode ? [{ debugName: "appIconSurface" }] : []));
@@ -154,9 +159,7 @@ class WhitelabelService {
                 if (isOnSignInPage) {
                     // On sign-in page - use sign-in background color
                     const config = this._config();
-                    const backgroundColor = config.signInBgType === 'gradient'
-                        ? config.signInBgGradientStart
-                        : config.signInBgSolid;
+                    const backgroundColor = config.signInBgType === 'gradient' ? config.signInBgGradientStart : config.signInBgSolid;
                     const style = this.getStatusBarStyleForColor(backgroundColor);
                     StatusBar.setBackgroundColor({ color: backgroundColor }).catch(() => { });
                     StatusBar.setStyle({ style }).catch(() => { });
@@ -176,9 +179,9 @@ class WhitelabelService {
      * Call this early in app initialization (app.config.ts or app.component.ts)
      */
     initialize(config) {
-        this._config.update(current => ({
+        this._config.update((current) => ({
             ...current,
-            ...config
+            ...config,
         }));
     }
     /**
@@ -193,7 +196,7 @@ class WhitelabelService {
             // const response = await fetch(`/api/whitelabel/${organizationId || 'default'}`);
             // const config = await response.json();
             // this.initialize(config);
-            console.log('Loading whitelabel config from API for:', organizationId);
+            //console.log('Loading whitelabel config from API for:', organizationId);
             // Example: Different configs for different organizations
             if (organizationId === 'demo-client') {
                 this.initialize({
@@ -209,7 +212,7 @@ class WhitelabelService {
                     headerAccent: 'rgba(255, 255, 255, 0.15)',
                     onHeaderAccent: '#FFFFFF',
                     organizationName: 'Demo Client',
-                    organizationId: 'demo-client'
+                    organizationId: 'demo-client',
                 });
             }
             else if (organizationId === 'cobblestone') {
@@ -233,7 +236,7 @@ class WhitelabelService {
                     signInBgGradientEnd: '#BDC3C7',
                     signInContentColor: '#1a1a1a',
                     organizationName: 'Cobblestone',
-                    organizationId: 'cobblestone'
+                    organizationId: 'cobblestone',
                 });
             }
             // Add more organization-specific configs as needed
@@ -253,9 +256,9 @@ class WhitelabelService {
      * Update only the brand colors
      */
     updateColors(colors) {
-        this._config.update(current => ({
+        this._config.update((current) => ({
             ...current,
-            ...colors
+            ...colors,
         }));
     }
     /**
@@ -269,11 +272,13 @@ class WhitelabelService {
      */
     hexToRgb(hex) {
         const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
-        return result ? {
-            r: parseInt(result[1], 16),
-            g: parseInt(result[2], 16),
-            b: parseInt(result[3], 16)
-        } : null;
+        return result
+            ? {
+                r: parseInt(result[1], 16),
+                g: parseInt(result[2], 16),
+                b: parseInt(result[3], 16),
+            }
+            : null;
     }
     /**
      * Calculate relative luminance of a color (WCAG standard)
@@ -419,7 +424,7 @@ class WhitelabelService {
             }
             // Update tab button selected color directly
             // CSS variable inheritance doesn't always work dynamically with Ionic components
-            document.querySelectorAll('ion-tab-button').forEach(tabButton => {
+            document.querySelectorAll('ion-tab-button').forEach((tabButton) => {
                 tabButton.style.setProperty('--color-selected', accent);
             });
             // ============================================
@@ -536,21 +541,21 @@ class WhitelabelService {
             }
             // Update native StatusBar color (Capacitor - Android only, iOS ignores this)
             this.updateNativeStatusBar(headerSurface);
-            console.log('Applied whitelabel colors:', {
-                appIconSurface,
-                appIconContent,
-                accent,
-                accentHover,
-                accentActive,
-                onAccent,
-                headerSurface,
-                headerContent,
-                headerAccent,
-                headerAccentHover,
-                headerAccentActive,
-                onHeaderAccent,
-                signInContentColor
-            });
+            // console.log('Applied whitelabel colors:', {
+            //   appIconSurface,
+            //   appIconContent,
+            //   accent,
+            //   accentHover,
+            //   accentActive,
+            //   onAccent,
+            //   headerSurface,
+            //   headerContent,
+            //   headerAccent,
+            //   headerAccentHover,
+            //   headerAccentActive,
+            //   onHeaderAccent,
+            //   signInContentColor
+            // });
         }
     }
     /**
@@ -574,7 +579,7 @@ class WhitelabelService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WhitelabelService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [] });
 
@@ -5538,15 +5543,15 @@ class DsMobileContentComponent {
      */
     layout = input('stacked', ...(ngDevMode ? [{ debugName: "layout" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileContentComponent, isStandalone: true, selector: "ds-mobile-content", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.layout-stacked": "layout() === \"stacked\"", "class.layout-grid-2": "layout() === \"grid-2\"", "class.layout-grid-3": "layout() === \"grid-3\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:32px;max-width:640px;margin:0 auto}:host.layout-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}:host.layout-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 768px){:host.layout-grid-2,:host.layout-grid-3{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: DsMobileContentComponent, isStandalone: true, selector: "ds-mobile-content", inputs: { layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.layout-stacked": "layout() === \"stacked\"", "class.layout-grid-2": "layout() === \"grid-2\"", "class.layout-grid-3": "layout() === \"grid-3\"" } }, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto}:host.layout-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}:host.layout-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 768px){:host.layout-grid-2,:host.layout-grid-3{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-content', standalone: true, imports: [CommonModule], host: {
                         '[class.layout-stacked]': 'layout() === "stacked"',
                         '[class.layout-grid-2]': 'layout() === "grid-2"',
-                        '[class.layout-grid-3]': 'layout() === "grid-3"'
-                    }, template: `<ng-content />`, styles: [":host{display:flex;flex-direction:column;gap:32px;max-width:640px;margin:0 auto}:host.layout-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}:host.layout-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 768px){:host.layout-grid-2,:host.layout-grid-3{grid-template-columns:1fr}}\n"] }]
+                        '[class.layout-grid-3]': 'layout() === "grid-3"',
+                    }, template: `<ng-content />`, styles: [":host{display:flex;flex-direction:column;gap:16px;max-width:640px;margin:0 auto}:host.layout-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}:host.layout-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media (max-width: 768px){:host.layout-grid-2,:host.layout-grid-3{grid-template-columns:1fr}}\n"] }]
         }], propDecorators: { layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
 /**
  * SectionHeaderComponent
@@ -5565,7 +5570,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{ selector: 'section-header', standalone: true, host: {
                         '[class.w-half]': 'width() === "half"',
                         '[class.w-third]': 'width() === "third"',
-                        '[class.w-full]': 'width() === "full"'
+                        '[class.w-full]': 'width() === "full"',
                     }, template: `<ng-content />`, styles: [":host{height:20px;border-radius:8px;background:var(--color-background-neutral-tertiary);display:block}:host.w-half{width:50%}:host.w-third{width:33%}:host.w-full{width:100%}\n"] }]
         }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
 /**
@@ -13327,7 +13332,7 @@ class DsMobileModalBaseComponent extends MobileModalBase {
       <ng-content select="[fixed-bottom]"></ng-content>
       <ng-content select="[footer]"></ng-content>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.error-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.error-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff);padding-bottom:var(--keyboard-height, 0px);transition:padding-bottom .3s cubic-bezier(.215,.61,.355,1)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DsMobileModalBaseComponent, decorators: [{
             type: Component,
@@ -13416,7 +13421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       <ng-content select="[fixed-bottom]"></ng-content>
       <ng-content select="[footer]"></ng-content>
     </div>
-  `, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.error-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"] }]
+  `, styles: [":host{display:block;position:relative;height:100%;width:100%}:host(.is-auto-height){height:auto}.modal-base-content{--background: var(--color-background-neutral-primary, #ffffff)}.modal-base-content.is-auto-height{--height: auto;height:auto!important;flex:0 0 auto;display:block;contain:none!important}.modal-base-content.is-auto-height::part(scroll){position:relative!important;display:block!important;height:auto!important;overflow:visible!important}.modal-wrapper{display:flex;flex-direction:column;width:100%;background:var(--color-background-neutral-primary, #ffffff)}.modal-wrapper.is-auto-height{flex:0 0 auto}.modal-header{position:sticky;top:0;z-index:10;background:var(--color-background-neutral-primary, #ffffff);border-bottom:1px solid var(--border-color-default);padding:16px}.header-content{display:flex;align-items:center;justify-content:space-between;gap:12px}.header-leading{flex-shrink:0;display:flex;align-items:center}.header-leading:empty{display:none}.header-content:has(.header-leading:empty){gap:16px}.header-main{display:flex;flex-direction:column;min-width:0;flex:1;gap:2px}.modal-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--color-text-primary, #1a1a1a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.modal-meta{font-family:Brockmann,sans-serif;font-size:var(--font-size-xs);font-weight:400;line-height:1.2;letter-spacing:-.26px;color:var(--color-text-tertiary, #737373);display:flex;align-items:center;gap:6px}.close-button{flex-shrink:0;border-radius:50%}.close-button::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.close-button-absolute{position:absolute;top:16px;right:16px;z-index:100;flex-shrink:0;border-radius:50%}.close-button-absolute::ng-deep button{border-radius:50%!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;display:flex!important;align-items:center!important;justify-content:center!important}.modal-content-container{display:flex;flex-direction:column;width:100%;max-width:640px;margin:0 auto;flex:1;position:relative;padding-bottom:var(--fixed-bottom-height, 0px);transition:padding-bottom .3s ease-out}:host-context(ion-modal.auto-height) .modal-content-container,.modal-wrapper.is-auto-height .modal-content-container{flex:0 0 auto}.modal-wrapper.headerless .modal-content-container{padding-top:0}.modal-main-content{display:flex;flex-direction:column;width:100%;padding-top:0;padding-left:var(--modal-content-padding, 20px);padding-right:var(--modal-content-padding, 20px);padding-bottom:var(--modal-content-padding, 20px)}.modal-main-content.content-hidden,.state-hidden{display:none}.custom-loading-slot,.custom-error-slot{width:100%}.modal-loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.loading-spinner{width:48px;height:48px;border:3px solid var(--color-background-neutral-secondary, #f0f0f0);border-top-color:var(--color-primary-base, #2563eb);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin-top:16px}.modal-error-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center;gap:16px}.error-state-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-base);font-weight:600;line-height:1.3;color:var(--color-text-primary, #1a1a1a);margin:0}.error-state-description{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm);font-weight:400;line-height:1.4;color:var(--color-text-secondary, #737373);margin:0}.modal-fixed-bottom{position:fixed;bottom:0;left:0;right:0;z-index:1000;pointer-events:none;background:var(--color-background-neutral-primary, #ffffff);box-shadow:0 300px 0 300px var(--color-background-neutral-primary, #ffffff);transform:translateY(calc(-1 * var(--keyboard-height, 0px)));transition:transform .3s cubic-bezier(.215,.61,.355,1);max-width:100vw;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}.modal-fixed-bottom.is-auto-height{position:relative;bottom:auto;left:auto;right:auto;transform:none!important;box-shadow:none;z-index:1;background:var(--color-background-neutral-primary, #ffffff);padding-bottom:var(--keyboard-height, 0px);transition:padding-bottom .3s cubic-bezier(.215,.61,.355,1)}.modal-fixed-bottom>*{pointer-events:auto}.modal-fixed-bottom.bottom-hidden{display:none}@supports (padding: env(safe-area-inset-bottom)){.modal-content-container{padding-bottom:env(safe-area-inset-bottom)}}@media (prefers-reduced-motion: reduce){.modal-fixed-bottom{transition:none}.loading-spinner{animation:none}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { ionContent: [{
                 type: ViewChild,
                 args: [IonContent, { read: IonContent }]
@@ -16358,6 +16363,7 @@ class DsMobileNewInquiryModalService extends BaseModalService {
             breakpoints: [0, 1],
             initialBreakpoint: 1,
             handle: false,
+            presentingElement: undefined,
         });
         console.log('[NewInquiryModal] Modal created, presenting...');
         await modal.present();
@@ -24092,36 +24098,36 @@ class MobileTabsExampleComponent {
             label: 'Hjem',
             route: 'home',
             icon: 'remixHomeSmile2Line',
-            iconActive: 'remixHomeSmile2Fill'
+            iconActive: 'remixHomeSmile2Fill',
         },
         {
             id: 'inquiries',
             label: 'Henvendelser',
             route: 'inquiries',
             icon: 'remixFileList3Line',
-            iconActive: 'remixFileList3Fill'
+            iconActive: 'remixFileList3Fill',
         },
         {
             id: 'announcements',
             label: 'Fællesskab',
             route: 'announcements',
             icon: 'remixCommunityLine',
-            iconActive: 'remixCommunityFill'
+            iconActive: 'remixCommunityFill',
         },
         {
             id: 'booking',
             label: 'Booking',
             route: 'booking',
             icon: 'remixCalendarCheckLine',
-            iconActive: 'remixCalendarCheckFill'
+            iconActive: 'remixCalendarCheckFill',
         },
         {
             id: 'handbook',
             label: 'Håndbog',
             route: 'handbook',
             icon: 'remixBook2Line',
-            iconActive: 'remixBook2Fill'
-        }
+            iconActive: 'remixBook2Fill',
+        },
     ];
     /**
      * Profile menu items configuration.
@@ -24137,21 +24143,21 @@ class MobileTabsExampleComponent {
                         action: 'profile',
                         title: 'Min profil',
                         icon: 'remixUser3Line',
-                        destructive: false
+                        destructive: false,
                     },
                     {
                         action: 'settings',
                         title: 'Indstillinger',
                         icon: 'remixSettings3Line',
-                        destructive: false
+                        destructive: false,
                     },
                     {
                         action: 'appearance',
                         title: 'Udseende',
                         icon: 'remixPaletteLine',
-                        destructive: false
-                    }
-                ]
+                        destructive: false,
+                    },
+                ],
             },
             {
                 actions: [
@@ -24162,9 +24168,9 @@ class MobileTabsExampleComponent {
                         flagIcon: '/Assets/country-flags/denmark.svg',
                         icon: 'remixGlobalLine',
                         destructive: false,
-                        showChevron: true
-                    }
-                ]
+                        showChevron: true,
+                    },
+                ],
             },
             {
                 actions: [
@@ -24172,10 +24178,10 @@ class MobileTabsExampleComponent {
                         action: 'logout',
                         title: 'Log ud',
                         icon: 'remixLogoutBoxLine',
-                        destructive: true
-                    }
-                ]
-            }
+                        destructive: true,
+                    },
+                ],
+            },
         ];
     }
     /**
@@ -24214,10 +24220,11 @@ class MobileTabsExampleComponent {
         [avatarInitials]="userService.avatarInitials()"
         [avatarType]="userService.avatarType()"
         [profileMenuItems]="profileMenuItems"
-        (profileActionSelected)="handleProfileAction($event)">
+        (profileActionSelected)="handleProfileAction($event)"
+      >
       </ds-mobile-tab-bar>
     </ion-tabs>
-  `, isInline: true, styles: [":host{display:block;height:100vh;width:100vw;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected"] }] });
+  `, isInline: true, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonTabs, selector: "ion-tabs" }, { kind: "component", type: DsMobileTabBarComponent, selector: "ds-mobile-tab-bar", inputs: ["tabs", "avatarType", "avatarInitials", "avatarSrc", "avatarIconName", "profileMenuItems"], outputs: ["avatarClick", "profileActionSelected"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MobileTabsExampleComponent, decorators: [{
             type: Component,
@@ -24230,10 +24237,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
         [avatarInitials]="userService.avatarInitials()"
         [avatarType]="userService.avatarType()"
         [profileMenuItems]="profileMenuItems"
-        (profileActionSelected)="handleProfileAction($event)">
+        (profileActionSelected)="handleProfileAction($event)"
+      >
       </ds-mobile-tab-bar>
     </ion-tabs>
-  `, styles: [":host{display:block;height:100vh;width:100vw;position:relative}\n"] }]
+  `, styles: [":host{display:block;height:100dvh;width:100vw;position:relative}\n"] }]
         }], ctorParameters: () => [{ type: UserService }, { type: i1$4.Router }] });
 
 class MobileBookingPageComponent {