@propbinder/mobile-design 0.2.30 → 0.2.31

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 }] }] } });
 /**
@@ -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();