@propbinder/mobile-design 0.2.9 → 0.2.11

package/fesm2022/propbinder-mobile-design.mjs

@@ -755,16 +755,16 @@ class DsMobileListItemComponent {
         if (isPlatformBrowser(this.platformId)) {
             // Show button on tablet breakpoint and above (768px+)
             const isDesktopViewport = window.innerWidth >= 768;
-            console.log('[ListItem] Desktop detection:', {
-                innerWidth: window.innerWidth,
-                isDesktopViewport
-            });
+            // console.log('[ListItem] Desktop detection:', {
+            //   innerWidth: window.innerWidth,
+            //   isDesktopViewport
+            // });
             this.isDesktop.set(isDesktopViewport);
             // Listen for window resize to update detection
             window.addEventListener('resize', () => {
                 const newIsDesktop = window.innerWidth >= 768;
                 if (newIsDesktop !== this.isDesktop()) {
-                    console.log('[ListItem] Viewport changed, updating desktop detection:', newIsDesktop);
+                    // console.log('[ListItem] Viewport changed, updating desktop detection:', newIsDesktop);
                     this.isDesktop.set(newIsDesktop);
                 }
             });
@@ -870,15 +870,15 @@ class DsMobileListItemComponent {
      * Handle click events
      */
     handleClick(event) {
-        console.log('[ListItem] Click event fired', {
-            interactive: this.interactive(),
-            disabled: this.disabled(),
-            loading: this.loading(),
-            longPressTriggered: this.longPressTriggered,
-            target: event.target
-        });
+        // console.log('[ListItem] Click event fired', {
+        //   interactive: this.interactive(),
+        //   disabled: this.disabled(),
+        //   loading: this.loading(),
+        //   longPressTriggered: this.longPressTriggered,
+        //   target: event.target
+        // });
         if (!this.interactive() || this.disabled() || this.loading()) {
-            console.log('[ListItem] Click ignored - not interactive or disabled/loading');
+            // console.log('[ListItem] Click ignored - not interactive or disabled/loading');
             return;
         }
         // Don't emit click if it came from an interactive child element
@@ -887,15 +887,15 @@ class DsMobileListItemComponent {
         const closestInteractive = target.closest('button, a, input, select, textarea, [role="button"]');
         // Check if the interactive element is a child, not the host itself
         if (closestInteractive && closestInteractive !== event.currentTarget) {
-            console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
+            // console.log('[ListItem] Click ignored - came from interactive child:', closestInteractive);
             return;
         }
         if (!this.longPressTriggered) {
-            console.log('[ListItem] Emitting itemClick');
+            // console.log('[ListItem] Emitting itemClick');
             this.itemClick.emit();
         }
         else {
-            console.log('[ListItem] Click ignored - long press was triggered');
+            // console.log('[ListItem] Click ignored - long press was triggered');
         }
         this.longPressTriggered = false;
     }
@@ -926,7 +926,7 @@ class DsMobileListItemComponent {
      * Emits moreButtonClick for parent components to handle
      */
     handleMoreButtonClick(event) {
-        console.log('[ListItem] Desktop more button clicked');
+        // console.log('[ListItem] Desktop more button clicked');
         // Stop propagation to prevent triggering itemClick
         event.stopPropagation();
         event.preventDefault();
@@ -939,42 +939,43 @@ class DsMobileListItemComponent {
       <div class="content-leading">
         <ng-content select="[content-leading]" />
       </div>
-      
+
       <div class="content-main">
         @if (title()) {
-          <h3 class="structured-title">{{ title() }}</h3>
+        <h3 class="structured-title">{{ title() }}</h3>
+        } @if (subtitle()) {
+        <p class="structured-subtitle">{{ subtitle() }}</p>
         }
-        @if (subtitle()) {
-          <p class="structured-subtitle">{{ subtitle() }}</p>
-        }
-        
+
         <ng-content select="[content-main]" />
         <ng-content />
       </div>
-      
+
       <div class="content-trailing">
-        @if (interactive() && enableLongPress() && showDesktopMoreButton() && isDesktop()) {
-          <ds-icon-button
-            class="desktop-more-button"
-            icon="remixMoreFill"
-            variant="secondary"
-            size="sm"
-            (clicked)="handleMoreButtonClick($event)"
-            aria-label="More options">
-          </ds-icon-button>
+        @if (interactive() && enableLongPress() && showDesktopMoreButton() &&
+        isDesktop()) {
+        <ds-icon-button
+          class="desktop-more-button"
+          icon="remixMoreFill"
+          variant="secondary"
+          size="sm"
+          (clicked)="handleMoreButtonClick($event)"
+          aria-label="More options"
+        >
+        </ds-icon-button>
         }
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
+  `, isInline: true, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DsIconButtonComponent, selector: "ds-icon-button", inputs: ["variant", "size", "icon", "disabled", "loading", "pressed", "expanded", "ariaLabel", "tooltip", "tooltipDisabled", "tooltipPlacement"], outputs: ["clicked", "focused", "blurred"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileListItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ds-mobile-list-item', standalone: true, imports: [CommonModule, DsIconButtonComponent], hostDirectives: [
                         {
                             directive: DsMobileLongPressDirective,
-                            outputs: ['longPress']
-                        }
+                            outputs: ['longPress'],
+                        },
                     ], host: {
                         '[class.interactive]': 'interactive() && !disabled()',
                         '[class.disabled]': 'disabled()',
@@ -993,40 +994,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '(click)': 'handleClick($event)',
                         '(keydown.enter)': 'handleKeyDown($event)',
                         '(keydown.space)': 'handleKeyDown($event)',
-                        '(longPress)': 'handleLongPress()'
+                        '(longPress)': 'handleLongPress()',
                     }, template: `
     <div class="list-item-inner">
       <div class="content-leading">
         <ng-content select="[content-leading]" />
       </div>
-      
+
       <div class="content-main">
         @if (title()) {
-          <h3 class="structured-title">{{ title() }}</h3>
-        }
-        @if (subtitle()) {
-          <p class="structured-subtitle">{{ subtitle() }}</p>
+        <h3 class="structured-title">{{ title() }}</h3>
+        } @if (subtitle()) {
+        <p class="structured-subtitle">{{ subtitle() }}</p>
         }
-        
+
         <ng-content select="[content-main]" />
         <ng-content />
       </div>
-      
+
       <div class="content-trailing">
-        @if (interactive() && enableLongPress() && showDesktopMoreButton() && isDesktop()) {
-          <ds-icon-button
-            class="desktop-more-button"
-            icon="remixMoreFill"
-            variant="secondary"
-            size="sm"
-            (clicked)="handleMoreButtonClick($event)"
-            aria-label="More options">
-          </ds-icon-button>
+        @if (interactive() && enableLongPress() && showDesktopMoreButton() &&
+        isDesktop()) {
+        <ds-icon-button
+          class="desktop-more-button"
+          icon="remixMoreFill"
+          variant="secondary"
+          size="sm"
+          (clicked)="handleMoreButtonClick($event)"
+          aria-label="More options"
+        >
+        </ds-icon-button>
         }
         <ng-content select="[content-trailing]" />
       </div>
     </div>
-  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545B66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"] }]
+  `, styles: [":host{display:block;position:relative;padding:var(--item-padding-top, 12px) 0 var(--item-padding-bottom, 12px) 0;box-sizing:border-box;--leading-size: 32px;--content-gap: 12px;--interactive-offset: 8px}:host:after{content:\"\";position:absolute;bottom:0;left:calc(var(--leading-size) + var(--content-gap));right:0;height:1px;background:var(--border-color-default, #e5e5e5);z-index:1;display:var(--divider-display, block)}:host(.no-divider):after{display:none}.list-item-inner{display:flex;flex-direction:row;align-items:flex-start;gap:var(--content-gap);position:relative}:host(.align-center) .list-item-inner{align-items:center}:host(.align-bottom) .list-item-inner{align-items:flex-end}:host(.interactive) .list-item-inner:before{content:\"\";position:absolute;top:calc(-1 * var(--interactive-offset));left:calc(-1 * var(--interactive-offset));right:calc(-1 * var(--interactive-offset));bottom:calc(-1 * var(--interactive-offset));background:var(--color-background-neutral-primary, #ffffff);border-radius:16px;z-index:-1;pointer-events:none}:host(.interactive){cursor:pointer}@media (hover: hover) and (pointer: fine){:host(.interactive):hover .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}}:host(.interactive):active .list-item-inner:before{background:var(--color-background-neutral-primary-hover, #f5f5f5)}:host(.interactive):focus-visible{outline:none}:host(.interactive):focus-visible .list-item-inner:before{outline:2px solid var(--color-brand-primary, #5d5fef);outline-offset:2px}:host(.disabled){opacity:.5;pointer-events:none}:host(.loading){pointer-events:none}:host(.variant-compact) .list-item-inner{gap:8px}.content-leading{flex-shrink:0;width:var(--leading-size);height:var(--leading-size);display:flex;align-items:flex-start;justify-content:center;position:relative;z-index:1}:host(.align-center) .content-leading{align-items:center}:host(.align-bottom) .content-leading{align-items:flex-end}.content-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;position:relative;z-index:1;justify-content:flex-start}:host(.align-center) .content-main{justify-content:center}:host(.align-bottom) .content-main{justify-content:flex-end}.content-trailing{flex-shrink:0;display:flex;align-items:flex-start;position:relative;z-index:1}.structured-title{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:600;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-primary, #202227);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.structured-subtitle{font-family:Brockmann,sans-serif;font-size:var(--font-size-sm, 14px);font-weight:400;line-height:20px;letter-spacing:-.3px;color:var(--text-color-default-secondary, #545b66);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.desktop-more-button::ng-deep button{border-radius:50%!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { leadingSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "leadingSize", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], enableLongPress: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLongPress", required: false }] }], showDesktopMoreButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDesktopMoreButton", required: false }] }], interactiveOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactiveOffset", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], showDivider: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDivider", required: false }] }], dividerSpacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerSpacing", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], moreButtonClick: [{ type: i0.Output, args: ["moreButtonClick"] }] } });
 
 /**
@@ -3028,7 +3030,7 @@ class WhitelabelDemoModalService {
      */
     async open() {
         try {
-            console.log('[WhitelabelDemoModal] Opening...');
+            // console.log('[WhitelabelDemoModal] Opening...');
             const modal = await this.modalController.create({
                 component: WhitelabelDemoModalComponent,
                 cssClass: 'ds-whitelabel-demo-modal',
@@ -3040,14 +3042,14 @@ class WhitelabelDemoModalService {
                 keyboardClose: true,
                 // Control the presenting element animation
                 enterAnimation: undefined, // Use default
-                leaveAnimation: undefined // Use default
+                leaveAnimation: undefined, // Use default
             });
-            console.log('[WhitelabelDemoModal] Modal created, presenting...');
+            // console.log('[WhitelabelDemoModal] Modal created, presenting...');
             await modal.present();
-            console.log('[WhitelabelDemoModal] Modal presented');
+            // console.log('[WhitelabelDemoModal] Modal presented');
         }
         catch (error) {
-            console.error('[WhitelabelDemoModal] Error opening modal:', error);
+            // console.error('[WhitelabelDemoModal] Error opening modal:', error);
             throw error;
         }
     }
@@ -3074,7 +3076,7 @@ class WhitelabelDemoModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: WhitelabelDemoModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -7578,19 +7580,19 @@ class DsMobileTabBarComponent {
         this.setupBreakpointDetection();
         // Debug: Log initial state
         setTimeout(() => {
-            console.log('[ds-mobile-tab-bar] Initial state:', {
-                isDesktop: this.isDesktop(),
-                windowWidth: window.innerWidth,
-                mediaQuery: this.mediaQuery?.matches,
-                userAgent: navigator.userAgent
-            });
+            // console.log('[ds-mobile-tab-bar] Initial state:', {
+            //   isDesktop: this.isDesktop(),
+            //   windowWidth: window.innerWidth,
+            //   mediaQuery: this.mediaQuery?.matches,
+            //   userAgent: navigator.userAgent
+            // });
         }, 100);
         // Watch for isDesktop changes and update slot reactively
         // effect() must be called in constructor (injection context)
         effect(() => {
             // This effect runs whenever isDesktop() changes
             const _ = this.isDesktop(); // Read the signal to create dependency
-            console.log('[ds-mobile-tab-bar] effect() triggered, isDesktop:', this.isDesktop());
+            // console.log('[ds-mobile-tab-bar] effect() triggered, isDesktop:', this.isDesktop());
             if (this.elementRef.nativeElement) {
                 // Use setTimeout to ensure DOM is ready
                 setTimeout(() => this.updateSlot(), 0);
@@ -7601,7 +7603,7 @@ class DsMobileTabBarComponent {
         // Listen to router events to detect active tab from URL
         if (this.router) {
             this.routerSubscription = this.router.events
-                .pipe(filter(event => event instanceof NavigationEnd))
+                .pipe(filter((event) => event instanceof NavigationEnd))
                 .subscribe((event) => {
                 const url = event.urlAfterRedirects || event.url;
                 // Extract the route segment (e.g., /tab-bar-test/home -> home)
@@ -7609,7 +7611,7 @@ class DsMobileTabBarComponent {
                 const lastSegment = segments[segments.length - 1];
                 // Find matching tab by route
                 if (this.tabs && lastSegment) {
-                    const matchingTab = this.tabs.find(tab => tab.route === lastSegment);
+                    const matchingTab = this.tabs.find((tab) => tab.route === lastSegment);
                     if (matchingTab) {
                         this.activeTab.set(matchingTab.route);
                     }
@@ -7641,14 +7643,14 @@ class DsMobileTabBarComponent {
         const hostSlotValue = this.isDesktop() ? 'top' : 'bottom';
         const currentHostSlot = hostElement.getAttribute('slot');
         if (currentHostSlot !== hostSlotValue) {
-            console.log('[ds-mobile-tab-bar] updateSlot: Setting HOST slot from', currentHostSlot, 'to', hostSlotValue);
+            // console.log('[ds-mobile-tab-bar] updateSlot: Setting HOST slot from', currentHostSlot, 'to', hostSlotValue);
             hostElement.setAttribute('slot', hostSlotValue);
             hostElement.slot = hostSlotValue;
         }
         // Get the ion-tab-bar element
         const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
         if (!tabBar) {
-            console.log('[ds-mobile-tab-bar] updateSlot: tabBar not found, retrying...');
+            // console.log('[ds-mobile-tab-bar] updateSlot: tabBar not found, retrying...');
             // Retry if element not found yet
             setTimeout(() => this.updateSlot(), 50);
             return;
@@ -7657,26 +7659,26 @@ class DsMobileTabBarComponent {
         const currentSlot = tabBar.getAttribute('slot');
         const currentSlotProperty = tabBar.slot;
         // Debug logging
-        console.log('[ds-mobile-tab-bar] updateSlot:', {
-            isDesktop: this.isDesktop(),
-            windowWidth: window.innerWidth,
-            slotValue,
-            currentSlotAttribute: currentSlot,
-            currentSlotProperty: currentSlotProperty,
-            tabBarElement: tabBar,
-            tabBarParent: tabBar.parentElement?.tagName,
-            tabBarInIonTabs: tabBar.closest('ion-tabs') !== null
-        });
+        // console.log('[ds-mobile-tab-bar] updateSlot:', {
+        //   isDesktop: this.isDesktop(),
+        //   windowWidth: window.innerWidth,
+        //   slotValue,
+        //   currentSlotAttribute: currentSlot,
+        //   currentSlotProperty: currentSlotProperty,
+        //   tabBarElement: tabBar,
+        //   tabBarParent: tabBar.parentElement?.tagName,
+        //   tabBarInIonTabs: tabBar.closest('ion-tabs') !== null
+        // });
         // Only update if different to avoid unnecessary DOM manipulation
         if (currentSlot !== slotValue || currentSlotProperty !== slotValue) {
-            console.log('[ds-mobile-tab-bar] updateSlot: Setting slot from', currentSlot, 'to', slotValue);
+            // console.log('[ds-mobile-tab-bar] updateSlot: Setting slot from', currentSlot, 'to', slotValue);
             // Set both attribute and property to ensure it works
             tabBar.setAttribute('slot', slotValue);
             tabBar.slot = slotValue;
             // Also try setting it on the parent ion-tabs
             const parentIonTabs = tabBar.closest('ion-tabs');
             if (parentIonTabs) {
-                console.log('[ds-mobile-tab-bar] updateSlot: Found parent ion-tabs');
+                // console.log('[ds-mobile-tab-bar] updateSlot: Found parent ion-tabs');
                 // Force Ionic to recognize the slot change
                 parentIonTabs.forceUpdate?.();
             }
@@ -7685,143 +7687,150 @@ class DsMobileTabBarComponent {
             // Verify it was set
             const verifySlot = tabBar.getAttribute('slot');
             const verifySlotProperty = tabBar.slot;
-            console.log('[ds-mobile-tab-bar] updateSlot: After update, slot attribute:', verifySlot, 'slot property:', verifySlotProperty);
+            // console.log('[ds-mobile-tab-bar] updateSlot: After update, slot attribute:', verifySlot, 'slot property:', verifySlotProperty);
             // Check computed styles
             const computedStyle = window.getComputedStyle(tabBar);
-            const parentComputedStyle = tabBar.parentElement ? window.getComputedStyle(tabBar.parentElement) : null;
+            const parentComputedStyle = tabBar.parentElement
+                ? window.getComputedStyle(tabBar.parentElement)
+                : null;
             const ionTabsForStyles = tabBar.closest('ion-tabs');
-            const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
-            console.log('[ds-mobile-tab-bar] updateSlot: Computed styles:', {
-                tabBar: {
-                    position: computedStyle.position,
-                    top: computedStyle.top,
-                    bottom: computedStyle.bottom,
-                    order: computedStyle.order,
-                    display: computedStyle.display,
-                    zIndex: computedStyle.zIndex,
-                    transform: computedStyle.transform
-                },
-                parent: parentComputedStyle ? {
-                    display: parentComputedStyle.display,
-                    flexDirection: parentComputedStyle.flexDirection,
-                    gridTemplateRows: parentComputedStyle.gridTemplateRows
-                } : null,
-                ionTabs: ionTabsComputedStyle ? {
-                    display: ionTabsComputedStyle.display,
-                    flexDirection: ionTabsComputedStyle.flexDirection,
-                    gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
-                    position: ionTabsComputedStyle.position
-                } : null,
-                tabBarRect: tabBar.getBoundingClientRect(),
-                windowHeight: window.innerHeight
-            });
+            const ionTabsComputedStyle = ionTabsForStyles
+                ? window.getComputedStyle(ionTabsForStyles)
+                : null;
+            // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles:', {
+            //   tabBar: {
+            //     position: computedStyle.position,
+            //     top: computedStyle.top,
+            //     bottom: computedStyle.bottom,
+            //     order: computedStyle.order,
+            //     display: computedStyle.display,
+            //     zIndex: computedStyle.zIndex,
+            //     transform: computedStyle.transform
+            //   },
+            //   parent: parentComputedStyle ? {
+            //     display: parentComputedStyle.display,
+            //     flexDirection: parentComputedStyle.flexDirection,
+            //     gridTemplateRows: parentComputedStyle.gridTemplateRows
+            //   } : null,
+            //   ionTabs: ionTabsComputedStyle ? {
+            //     display: ionTabsComputedStyle.display,
+            //     flexDirection: ionTabsComputedStyle.flexDirection,
+            //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
+            //     position: ionTabsComputedStyle.position
+            //   } : null,
+            //   tabBarRect: tabBar.getBoundingClientRect(),
+            //   windowHeight: window.innerHeight
+            // });
         }
         else {
-            console.log('[ds-mobile-tab-bar] updateSlot: Slot already correct, no update needed');
+            // console.log('[ds-mobile-tab-bar] updateSlot: Slot already correct, no update needed');
             // Even if slot is correct, check computed styles to see why it's not at top
             const computedStyle = window.getComputedStyle(tabBar);
             const ionTabsForStyles = tabBar.closest('ion-tabs');
-            const ionTabsComputedStyle = ionTabsForStyles ? window.getComputedStyle(ionTabsForStyles) : null;
+            const ionTabsComputedStyle = ionTabsForStyles
+                ? window.getComputedStyle(ionTabsForStyles)
+                : null;
             const tabBarRect = tabBar.getBoundingClientRect();
             // Log key values directly so they're always visible
-            console.log('[ds-mobile-tab-bar] KEY VALUES:');
-            console.log('  tabBar.position:', computedStyle.position);
-            console.log('  tabBar.top:', computedStyle.top);
-            console.log('  tabBar.bottom:', computedStyle.bottom);
-            console.log('  tabBar.order:', computedStyle.order);
-            console.log('  tabBar.display:', computedStyle.display);
-            console.log('  tabBarRect.top:', tabBarRect.top, 'px from top');
-            console.log('  tabBarRect.bottom:', tabBarRect.bottom, 'px from top');
-            console.log('  window.innerHeight:', window.innerHeight);
+            // console.log('[ds-mobile-tab-bar] KEY VALUES:');
+            // console.log('  tabBar.position:', computedStyle.position);
+            // console.log('  tabBar.top:', computedStyle.top);
+            // console.log('  tabBar.bottom:', computedStyle.bottom);
+            // console.log('  tabBar.order:', computedStyle.order);
+            // console.log('  tabBar.display:', computedStyle.display);
+            // console.log('  tabBarRect.top:', tabBarRect.top, 'px from top');
+            // console.log('  tabBarRect.bottom:', tabBarRect.bottom, 'px from top');
+            // console.log('  window.innerHeight:', window.innerHeight);
             if (ionTabsComputedStyle) {
-                console.log('  ionTabs.display:', ionTabsComputedStyle.display);
-                console.log('  ionTabs.flexDirection:', ionTabsComputedStyle.flexDirection);
-                console.log('  ionTabs.gridTemplateRows:', ionTabsComputedStyle.gridTemplateRows);
+                // console.log('  ionTabs.display:', ionTabsComputedStyle.display);
+                // console.log('  ionTabs.flexDirection:', ionTabsComputedStyle.flexDirection);
+                // console.log('  ionTabs.gridTemplateRows:', ionTabsComputedStyle.gridTemplateRows);
             }
             if (ionTabsForStyles) {
                 const children = Array.from(ionTabsForStyles.children);
-                console.log('  ionTabs children count:', children.length);
+                // console.log('  ionTabs children count:', children.length);
                 children.forEach((child, index) => {
-                    console.log(`    [${index}] ${child.tagName} slot="${child.getAttribute('slot')}" order="${window.getComputedStyle(child).order}"`);
+                    // console.log(`    [${index}] ${child.tagName} slot="${child.getAttribute('slot')}" order="${window.getComputedStyle(child).order}"`);
                 });
             }
-            console.log('[ds-mobile-tab-bar] updateSlot: Computed styles (slot correct but visually wrong):', {
-                tabBar: {
-                    position: computedStyle.position,
-                    top: computedStyle.top,
-                    bottom: computedStyle.bottom,
-                    order: computedStyle.order,
-                    display: computedStyle.display,
-                    zIndex: computedStyle.zIndex,
-                    transform: computedStyle.transform,
-                    marginTop: computedStyle.marginTop,
-                    marginBottom: computedStyle.marginBottom,
-                    width: computedStyle.width,
-                    height: computedStyle.height
-                },
-                ionTabs: ionTabsComputedStyle ? {
-                    display: ionTabsComputedStyle.display,
-                    flexDirection: ionTabsComputedStyle.flexDirection,
-                    gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
-                    gridTemplateColumns: ionTabsComputedStyle.gridTemplateColumns,
-                    position: ionTabsComputedStyle.position,
-                    alignItems: ionTabsComputedStyle.alignItems,
-                    justifyContent: ionTabsComputedStyle.justifyContent,
-                    height: ionTabsComputedStyle.height,
-                    minHeight: ionTabsComputedStyle.minHeight
-                } : null,
-                tabBarRect: {
-                    top: tabBarRect.top,
-                    bottom: tabBarRect.bottom,
-                    height: tabBarRect.height,
-                    y: tabBarRect.y,
-                    left: tabBarRect.left,
-                    right: tabBarRect.right,
-                    width: tabBarRect.width
-                },
-                windowHeight: window.innerHeight,
-                distanceFromTop: tabBarRect.top,
-                distanceFromBottom: window.innerHeight - tabBarRect.bottom,
-                // Check if tab bar is actually in the DOM at the right position
-                tabBarParent: tabBar.parentElement?.tagName,
-                tabBarNextSibling: tabBar.nextElementSibling?.tagName,
-                tabBarPreviousSibling: tabBar.previousElementSibling?.tagName,
-                // Check all children of ion-tabs to see DOM order
-                ionTabsChildren: ionTabsForStyles ? Array.from(ionTabsForStyles.children).map((child) => ({
-                    tagName: child.tagName,
-                    slot: child.getAttribute('slot'),
-                    order: window.getComputedStyle(child).order
-                })) : null
-            });
+            // console.log('[ds-mobile-tab-bar] updateSlot: Computed styles (slot correct but visually wrong):', {
+            //   tabBar: {
+            //     position: computedStyle.position,
+            //     top: computedStyle.top,
+            //     bottom: computedStyle.bottom,
+            //     order: computedStyle.order,
+            //     display: computedStyle.display,
+            //     zIndex: computedStyle.zIndex,
+            //     transform: computedStyle.transform,
+            //     marginTop: computedStyle.marginTop,
+            //     marginBottom: computedStyle.marginBottom,
+            //     width: computedStyle.width,
+            //     height: computedStyle.height
+            //   },
+            //   ionTabs: ionTabsComputedStyle ? {
+            //     display: ionTabsComputedStyle.display,
+            //     flexDirection: ionTabsComputedStyle.flexDirection,
+            //     gridTemplateRows: ionTabsComputedStyle.gridTemplateRows,
+            //     gridTemplateColumns: ionTabsComputedStyle.gridTemplateColumns,
+            //     position: ionTabsComputedStyle.position,
+            //     alignItems: ionTabsComputedStyle.alignItems,
+            //     justifyContent: ionTabsComputedStyle.justifyContent,
+            //     height: ionTabsComputedStyle.height,
+            //     minHeight: ionTabsComputedStyle.minHeight
+            //   } : null,
+            //   tabBarRect: {
+            //     top: tabBarRect.top,
+            //     bottom: tabBarRect.bottom,
+            //     height: tabBarRect.height,
+            //     y: tabBarRect.y,
+            //     left: tabBarRect.left,
+            //     right: tabBarRect.right,
+            //     width: tabBarRect.width
+            //   },
+            //   windowHeight: window.innerHeight,
+            //   distanceFromTop: tabBarRect.top,
+            //   distanceFromBottom: window.innerHeight - tabBarRect.bottom,
+            //   // Check if tab bar is actually in the DOM at the right position
+            //   tabBarParent: tabBar.parentElement?.tagName,
+            //   tabBarNextSibling: tabBar.nextElementSibling?.tagName,
+            //   tabBarPreviousSibling: tabBar.previousElementSibling?.tagName,
+            //   // Check all children of ion-tabs to see DOM order
+            //   ionTabsChildren: ionTabsForStyles ? Array.from(ionTabsForStyles.children).map((child: any) => ({
+            //     tagName: child.tagName,
+            //     slot: child.getAttribute('slot'),
+            //     order: window.getComputedStyle(child).order
+            //   })) : null
+            // });
         }
     }
     setupSlotEnforcement() {
         const hostElement = this.elementRef.nativeElement;
         const tabBar = this.elementRef.nativeElement.querySelector('ion-tab-bar');
         if (!tabBar) {
-            console.log('[ds-mobile-tab-bar] setupSlotEnforcement: tabBar not found, retrying...');
+            // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: tabBar not found, retrying...');
             // Retry if element not found yet
             setTimeout(() => this.setupSlotEnforcement(), 50);
             return;
         }
-        console.log('[ds-mobile-tab-bar] setupSlotEnforcement: Setting up MutationObserver');
+        // console.log('[ds-mobile-tab-bar] setupSlotEnforcement: Setting up MutationObserver');
         const observer = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'slot') {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'slot') {
                     const target = mutation.target;
                     const expectedSlot = this.isDesktop() ? 'top' : 'bottom';
                     // Check both host element and tab bar
                     if (target === hostElement || target === tabBar) {
                         const currentSlot = target.getAttribute('slot');
-                        console.log('[ds-mobile-tab-bar] Slot changed by external source:', {
-                            target: target.tagName,
-                            currentSlot,
-                            expectedSlot,
-                            isDesktop: this.isDesktop()
-                        });
+                        // console.log('[ds-mobile-tab-bar] Slot changed by external source:', {
+                        //   target: target.tagName,
+                        //   currentSlot,
+                        //   expectedSlot,
+                        //   isDesktop: this.isDesktop()
+                        // });
                         // If Ionic or something else changed it, force it back
                         if (currentSlot !== expectedSlot) {
-                            console.log('[ds-mobile-tab-bar] Enforcing slot back to:', expectedSlot);
+                            // console.log('[ds-mobile-tab-bar] Enforcing slot back to:', expectedSlot);
                             // Use requestAnimationFrame to avoid infinite loops
                             requestAnimationFrame(() => {
                                 target.setAttribute('slot', expectedSlot);
@@ -7835,11 +7844,11 @@ class DsMobileTabBarComponent {
         // Observe both host element and tab bar for slot changes
         observer.observe(hostElement, {
             attributes: true,
-            attributeFilter: ['slot']
+            attributeFilter: ['slot'],
         });
         observer.observe(tabBar, {
             attributes: true,
-            attributeFilter: ['slot']
+            attributeFilter: ['slot'],
         });
         // Store observer for cleanup
         this.slotEnforcementObserver = observer;
@@ -7866,11 +7875,11 @@ class DsMobileTabBarComponent {
         this.mediaQuery.addEventListener('change', this.handleBreakpointChange);
     }
     handleBreakpointChange = (e) => {
-        console.log('[ds-mobile-tab-bar] handleBreakpointChange:', {
-            matches: e.matches,
-            windowWidth: window.innerWidth,
-            previousIsDesktop: this.isDesktop()
-        });
+        // console.log('[ds-mobile-tab-bar] handleBreakpointChange:', {
+        //   matches: e.matches,
+        //   windowWidth: window.innerWidth,
+        //   previousIsDesktop: this.isDesktop()
+        // });
         this.isDesktop.set(e.matches);
         // Force update the slot when breakpoint changes
         this.updateSlot();
@@ -7880,13 +7889,15 @@ class DsMobileTabBarComponent {
             attributes: true,
             attributeFilter: ['title'],
             subtree: true,
-            childList: true
+            childList: true,
         };
         this.mutationObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
-                if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
+                if (mutation.type === 'attributes' &&
+                    mutation.attributeName === 'title') {
                     const target = mutation.target;
-                    if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
+                    if (target.tagName === 'ION-TAB-BUTTON' &&
+                        target.hasAttribute('title')) {
                         target.removeAttribute('title');
                     }
                 }
@@ -7944,13 +7955,13 @@ class DsMobileTabBarComponent {
             attributes: true,
             attributeFilter: ['selected', 'tab'],
             subtree: true,
-            childList: true
+            childList: true,
         });
         // Also watch the parent ion-tabs for changes
         observer.observe(ionTabs, {
             attributes: true,
             attributeFilter: ['selected', 'tab'],
-            subtree: true
+            subtree: true,
         });
         // Periodic check as fallback (in case events don't fire)
         setInterval(() => {
@@ -8030,17 +8041,42 @@ class DsMobileTabBarComponent {
                 actionGroups: menuItems,
                 currentLanguage: 'da', // TODO: Get from language service
                 availableLanguages: [
-                    { code: 'da', nativeName: 'Dansk', englishName: 'Danish', flagIcon: '/Assets/country-flags/denmark.svg' },
-                    { code: 'en', nativeName: 'English', englishName: 'English', flagIcon: '/Assets/country-flags/united kingdom.svg' },
-                    { code: 'sv', nativeName: 'Svenska', englishName: 'Swedish', flagIcon: '/Assets/country-flags/sweden.svg' },
-                    { code: 'no', nativeName: 'Norsk', englishName: 'Norwegian', flagIcon: '/Assets/country-flags/norway.svg' },
-                    { code: 'de', nativeName: 'Deutsch', englishName: 'German', flagIcon: '/Assets/country-flags/germany.svg' }
-                ]
+                    {
+                        code: 'da',
+                        nativeName: 'Dansk',
+                        englishName: 'Danish',
+                        flagIcon: '/Assets/country-flags/denmark.svg',
+                    },
+                    {
+                        code: 'en',
+                        nativeName: 'English',
+                        englishName: 'English',
+                        flagIcon: '/Assets/country-flags/united kingdom.svg',
+                    },
+                    {
+                        code: 'sv',
+                        nativeName: 'Svenska',
+                        englishName: 'Swedish',
+                        flagIcon: '/Assets/country-flags/sweden.svg',
+                    },
+                    {
+                        code: 'no',
+                        nativeName: 'Norsk',
+                        englishName: 'Norwegian',
+                        flagIcon: '/Assets/country-flags/norway.svg',
+                    },
+                    {
+                        code: 'de',
+                        nativeName: 'Deutsch',
+                        englishName: 'German',
+                        flagIcon: '/Assets/country-flags/germany.svg',
+                    },
+                ],
             },
             breakpoints: [0, 1],
             initialBreakpoint: 1,
             handle: true,
-            cssClass: ['ds-bottom-sheet', 'auto-height']
+            cssClass: ['ds-bottom-sheet', 'auto-height'],
         });
         await sheet.present();
         const result = await sheet.onWillDismiss();
@@ -8051,34 +8087,35 @@ class DsMobileTabBarComponent {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileTabBarComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: DsMobileTabBarComponent, isStandalone: true, selector: "ds-mobile-tab-bar", inputs: { tabs: "tabs", avatarType: "avatarType", avatarInitials: "avatarInitials", avatarSrc: "avatarSrc", avatarIconName: "avatarIconName", profileMenuItems: "profileMenuItems" }, outputs: { avatarClick: "avatarClick", profileActionSelected: "profileActionSelected" }, ngImport: i0, template: `
-    <ion-tab-bar 
-      [attr.slot]="isDesktop() ? 'top' : 'bottom'" 
+    <ion-tab-bar
+      [attr.slot]="isDesktop() ? 'top' : 'bottom'"
       class="ds-tab-bar"
-      [class.ds-tab-bar--desktop]="isDesktop()">
-      
+      [class.ds-tab-bar--desktop]="isDesktop()"
+    >
       <!-- Logo (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__logo">
         <ds-logo variant="mark" size="lg" />
       </div>
-      
+
       <!-- Tab buttons container -->
       <div class="ds-tab-bar__tabs" *ngIf="tabs">
-        <ion-tab-button 
+        <ion-tab-button
           *ngFor="let tab of tabs; trackBy: trackByTabId"
           [tab]="tab.route"
           [attr.data-icon]="tab.icon"
           [attr.data-icon-active]="tab.iconActive"
           [attr.aria-label]="tab.label"
           class="ds-tab-button ion-activatable"
-          [class.tab-selected]="isTabActive(tab.route)">
+          [class.tab-selected]="isTabActive(tab.route)"
+        >
           <div class="tab-icon-ripple"></div>
           <div class="tab-icon-wrapper">
-            <ds-icon 
+            <ds-icon
               [name]="tab.icon"
               [size]="isDesktop() ? '20px' : '24px'"
               class="tab-icon-inactive"
             />
-            <ds-icon 
+            <ds-icon
               [name]="tab.iconActive"
               [size]="isDesktop() ? '20px' : '24px'"
               class="tab-icon-active"
@@ -8087,7 +8124,7 @@ class DsMobileTabBarComponent {
           <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
         </ion-tab-button>
       </div>
-      
+
       <!-- Avatar (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__actions">
         <ds-avatar
@@ -8111,36 +8148,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         IonLabel,
                         DsIconComponent,
                         DsAvatarComponent,
-                        DsLogoComponent
+                        DsLogoComponent,
                     ], template: `
-    <ion-tab-bar 
-      [attr.slot]="isDesktop() ? 'top' : 'bottom'" 
+    <ion-tab-bar
+      [attr.slot]="isDesktop() ? 'top' : 'bottom'"
       class="ds-tab-bar"
-      [class.ds-tab-bar--desktop]="isDesktop()">
-      
+      [class.ds-tab-bar--desktop]="isDesktop()"
+    >
       <!-- Logo (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__logo">
         <ds-logo variant="mark" size="lg" />
       </div>
-      
+
       <!-- Tab buttons container -->
       <div class="ds-tab-bar__tabs" *ngIf="tabs">
-        <ion-tab-button 
+        <ion-tab-button
           *ngFor="let tab of tabs; trackBy: trackByTabId"
           [tab]="tab.route"
           [attr.data-icon]="tab.icon"
           [attr.data-icon-active]="tab.iconActive"
           [attr.aria-label]="tab.label"
           class="ds-tab-button ion-activatable"
-          [class.tab-selected]="isTabActive(tab.route)">
+          [class.tab-selected]="isTabActive(tab.route)"
+        >
           <div class="tab-icon-ripple"></div>
           <div class="tab-icon-wrapper">
-            <ds-icon 
+            <ds-icon
               [name]="tab.icon"
               [size]="isDesktop() ? '20px' : '24px'"
               class="tab-icon-inactive"
             />
-            <ds-icon 
+            <ds-icon
               [name]="tab.iconActive"
               [size]="isDesktop() ? '20px' : '24px'"
               class="tab-icon-active"
@@ -8149,7 +8187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
           <ion-label [attr.aria-hidden]="true">{{ tab.label }}</ion-label>
         </ion-tab-button>
       </div>
-      
+
       <!-- Avatar (desktop only, positioned via CSS) -->
       <div class="ds-tab-bar__actions">
         <ds-avatar
@@ -9838,8 +9876,8 @@ class DsMobileModalService {
      * ```
      */
     async open(options) {
-        console.log('[Modal] Opening modal with options:', options);
-        const { component, componentProps, cssClass, presentationStyle = 'card', backdropDismiss = true, showBackdrop = true, keyboardClose = true, swipeToClose, initialBreakpoint, breakpoints, animated = true, mode = 'ios', handleNavigationBack = true } = options;
+        // console.log('[Modal] Opening modal with options:', options);
+        const { component, componentProps, cssClass, presentationStyle = 'card', backdropDismiss = true, showBackdrop = true, keyboardClose = true, swipeToClose, initialBreakpoint, breakpoints, animated = true, mode = 'ios', handleNavigationBack = true, } = options;
         // Build modal configuration
         const modalConfig = {
             component,
@@ -9872,9 +9910,9 @@ class DsMobileModalService {
             };
         }
         const modal = await this.modalController.create(modalConfig);
-        console.log('[Modal] Modal created, presenting...');
+        // console.log('[Modal] Modal created, presenting...');
         await modal.present();
-        console.log('[Modal] Modal presented');
+        // console.log('[Modal] Modal presented');
         return modal;
     }
     /**
@@ -9895,7 +9933,7 @@ class DsMobileModalService {
             componentProps,
             presentationStyle: 'fullscreen',
             backdropDismiss: false,
-            showBackdrop: false
+            showBackdrop: false,
         });
     }
     /**
@@ -9916,7 +9954,7 @@ class DsMobileModalService {
             componentProps,
             presentationStyle: 'card',
             backdropDismiss: true,
-            showBackdrop: true
+            showBackdrop: true,
         });
     }
     /**
@@ -9945,7 +9983,7 @@ class DsMobileModalService {
             showBackdrop: true,
             swipeToClose: options?.swipeToClose ?? true,
             initialBreakpoint: options?.initialBreakpoint ?? 0.5,
-            breakpoints: options?.breakpoints ?? [0, 0.5, 0.75, 1]
+            breakpoints: options?.breakpoints ?? [0, 0.5, 0.75, 1],
         });
     }
     /**
@@ -10019,7 +10057,7 @@ class DsMobileModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -11621,8 +11659,8 @@ class DsMobilePostDetailModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(postData, options) {
-        console.log('[PostDetailModal] Opening with data:', postData);
-        console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
+        // console.log('[PostDetailModal] Opening with data:', postData);
+        // console.log('[PostDetailModal] options.onSubmitComment =', options?.onSubmitComment);
         const modal = await this.createModal(DsMobilePostDetailModalComponent, {
             postData: postData,
             loading: options?.loading ?? false,
@@ -11634,9 +11672,9 @@ class DsMobilePostDetailModalService extends BaseModalService {
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[PostDetailModal] Modal created, presenting...');
+        // console.log('[PostDetailModal] Modal created, presenting...');
         await modal.present();
-        console.log('[PostDetailModal] Modal presented');
+        // console.log('[PostDetailModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobilePostDetailModalService, providedIn: 'root' });
@@ -13212,17 +13250,17 @@ class DsMobileChatModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(chatData, options) {
-        console.log('[ChatModal] Opening with data:', chatData);
+        // console.log('[ChatModal] Opening with data:', chatData);
         const modal = await this.createModal(DsMobileChatModalComponent, {
             chatData: chatData,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[ChatModal] Modal created, presenting...');
+        // console.log('[ChatModal] Modal created, presenting...');
         await modal.present();
-        console.log('[ChatModal] Modal presented');
+        // console.log('[ChatModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, providedIn: 'root' });
@@ -13230,7 +13268,7 @@ class DsMobileChatModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileChatModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -13753,17 +13791,17 @@ class DsMobileNewInquiryModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(options) {
-        console.log('[NewInquiryModal] Opening modal with options:', options);
+        // console.log('[NewInquiryModal] Opening modal with options:', options);
         const modal = await this.createModal(DsMobileNewInquiryModalComponent, {
             onSubmit: options?.onSubmit,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: false, // Don't close on keyboard hide for this modal
         });
-        console.log('[NewInquiryModal] Modal created, presenting...');
+        // console.log('[NewInquiryModal] Modal created, presenting...');
         await modal.present();
-        console.log('[NewInquiryModal] Modal presented');
+        // console.log('[NewInquiryModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, providedIn: 'root' });
@@ -13771,7 +13809,7 @@ class DsMobileNewInquiryModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileNewInquiryModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });
 
@@ -14320,17 +14358,17 @@ class DsMobileHandbookDetailModalService extends BaseModalService {
      * @returns Promise that resolves when the modal is presented
      */
     async open(handbookData, options) {
-        console.log('[HandbookDetailModal] Opening with data:', handbookData);
+        // console.log('[HandbookDetailModal] Opening with data:', handbookData);
         const modal = await this.createModal(DsMobileHandbookDetailModalComponent, {
             handbookData: handbookData,
             loading: options?.loading ?? false,
-            error: options?.error
+            error: options?.error,
         }, {
             keyboardClose: true, // Keep keyboard close behavior for this modal
         });
-        console.log('[HandbookDetailModal] Modal created, presenting...');
+        // console.log('[HandbookDetailModal] Modal created, presenting...');
         await modal.present();
-        console.log('[HandbookDetailModal] Modal presented');
+        // console.log('[HandbookDetailModal] Modal presented');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, deps: [{ token: i1.ModalController }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, providedIn: 'root' });
@@ -14338,7 +14376,7 @@ class DsMobileHandbookDetailModalService extends BaseModalService {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DsMobileHandbookDetailModalService, decorators: [{
             type: Injectable,
             args: [{
-                    providedIn: 'root'
+                    providedIn: 'root',
                 }]
         }], ctorParameters: () => [{ type: i1.ModalController }] });