@propbinder/mobile-design 0.2.10 → 0.2.11

package/fesm2022/propbinder-mobile-design.mjs

@@ -7580,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);
@@ -7603,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)
@@ -7611,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);
                     }
@@ -7643,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;
@@ -7659,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?.();
             }
@@ -7687,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);
@@ -7837,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;
@@ -7868,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();
@@ -7882,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');
                     }
                 }
@@ -7946,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(() => {
@@ -8032,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();
@@ -8053,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"
@@ -8089,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
@@ -8113,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"
@@ -8151,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