@propbinder/mobile-design 0.2.47 → 0.2.50

package/src/components/ds-mobile-tabs.css

@@ -0,0 +1,407 @@
+/* ============================================
+   HOST
+   ============================================ */
+
+:host {
+  display: block;
+  height: 100%;
+}
+
+/* ============================================
+   ION-TABS BASE
+   ============================================ */
+
+ion-tabs {
+  height: 100%;
+  background: var(--color-brand-secondary);
+}
+
+/* ============================================
+   TAB BAR - MOBILE (BOTTOM)
+   ============================================ */
+
+.ds-tab-bar {
+  --background: var(--color-background-neutral-primary);
+  /* No delay when appearing - start immediately */
+  transition: transform 0.20s ease-in-out;
+}
+
+/* Mobile: Fixed position for slide transitions */
+ion-tab-bar[slot="bottom"] {
+  border-top: 1px solid var(--border-color-default);
+  padding-top: 8px;
+  /* Web browser: 8px minimum, iOS native/web: safe area calculation */
+  padding-bottom: max(8px, var(--app-safe-bottom, 0px));
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+@media (max-width: 767px) {
+  ion-tab-bar[slot="bottom"] {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    padding-bottom: max(8px, var(--app-safe-bottom, 0px));
+  }
+}
+
+/* Android gesture navigation needs extra breathing room for labels */
+@media (max-width: 767px) {
+  :host-context(.plt-android) ion-tab-bar[slot="bottom"] {
+    padding-bottom: max(8px, var(--app-safe-bottom, 0px)) !important;
+  }
+}
+
+/* Hide tab bar when detail page is active with slide-out animation (Mobile only) */
+@media (max-width: 767px) {
+
+  /* Only hide if the detail page is NOT hidden (active) */
+  ion-tabs:has(ds-mobile-page-details:not(.ion-page-hidden)) .ds-tab-bar {
+    transform: translateY(100%);
+    /* Add delay when hiding - wait 650ms so it starts hiding 50ms before page transition ends */
+    transition: transform 0.3s ease;
+  }
+}
+
+/* Mobile: hide logo and avatar, show tab buttons in a row */
+.ds-tab-bar__logo,
+.ds-tab-bar__actions {
+  display: none;
+}
+
+.ds-tab-bar__tabs {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* On larger screens or PWA mode, remove the extra Safari toolbar padding */
+@media (min-width: 769px) {
+  ion-tab-bar[slot="bottom"] {
+    padding-bottom: var(--app-safe-bottom, 0px);
+  }
+}
+
+@media (display-mode: standalone) {
+  ion-tab-bar[slot="bottom"] {
+    padding-bottom: var(--app-safe-bottom, 0px) !important;
+  }
+}
+
+/* ============================================
+   TAB BAR - DESKTOP (TOP)
+   ============================================ */
+
+@media (min-width: 768px) {
+  ion-tab-bar[slot="top"] {
+    --background: var(--color-brand-secondary);
+    position: relative;
+    /* NOT absolute - part of layout flow */
+    display: flex;
+    align-items: center;
+    padding: 12px 24px;
+    height: 64px;
+    max-width: none;
+  }
+
+  /* Show logo and avatar on desktop */
+  .ds-tab-bar__logo {
+    display: flex;
+    position: absolute;
+    left: 24px;
+    align-items: center;
+  }
+
+  .ds-tab-bar__actions {
+    display: flex;
+    position: absolute;
+    right: 24px;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .ds-tab-bar__tabs {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    max-width: 640px;
+    width: 100%;
+    margin: 0 auto;
+    justify-content: center;
+    padding-left: var(--content-padding-md);
+    padding-right: var(--content-padding-md);
+  }
+
+  .logomark {
+    height: 28px;
+    width: auto;
+    flex-shrink: 0;
+  }
+}
+
+@media (min-width: 992px) {
+  .ds-tab-bar__tabs {
+    max-width: 640px;
+    padding-left: var(--content-padding-lg);
+    padding-right: var(--content-padding-lg);
+    justify-content: center;
+  }
+}
+
+@media (min-width: 1440px) {
+  .ds-tab-bar__tabs {
+    max-width: 640px;
+    padding-left: var(--content-padding-xl);
+    padding-right: var(--content-padding-xl);
+  }
+}
+
+@media (min-width: 1768px) {
+  .ds-tab-bar__tabs {
+    max-width: 640px;
+    padding-left: var(--content-padding-2xl);
+    padding-right: var(--content-padding-2xl);
+  }
+}
+
+@media (min-width: 1920px) {
+  .ds-tab-bar__tabs {
+    max-width: 640px;
+    padding-left: var(--content-padding-3xl);
+    padding-right: var(--content-padding-3xl);
+  }
+}
+
+/* ============================================
+   TAB BUTTONS - MOBILE
+   ============================================ */
+
+ion-tab-button {
+  --color: var(--text-color-default-tertiary);
+  --color-selected: var(--color-accent);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: visible;
+}
+
+/* Custom ripple effect - positioned in center of tab button */
+.tab-icon-ripple {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-accent);
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.6s cubic-bezier(0.36, 1.2, 0.04, 1.4);
+  z-index: 0;
+}
+
+/* Trigger ripple on tab selection */
+.tab-selected .tab-icon-ripple {
+  transform: translate(-50%, -50%) scale(2);
+  opacity: 0.05;
+  animation: ripple-fade 0.6s cubic-bezier(0.36, 0.5, 0.04, 1.8) forwards;
+}
+
+@keyframes ripple-fade {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0);
+  }
+
+  30% {
+    opacity: 0.1;
+  }
+
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(2);
+  }
+}
+
+/* Allow ripple to expand beyond button */
+ion-tab-button::part(native) {
+  overflow: visible;
+}
+
+ion-tab-button ion-ripple-effect {
+  color: var(--color-accent);
+  border-radius: 1000px;
+}
+
+ion-tab-button ion-label {
+  font-size: var(--font-size-xs);
+  font-weight: 500;
+  letter-spacing: -0.3px;
+  margin-top: 0;
+}
+
+
+/* ============================================
+   TAB ICON ANIMATION
+   ============================================ */
+
+/* Icon wrapper - relative positioning context */
+.tab-icon-wrapper {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  /* Above ripple */
+  margin-bottom: 4px;
+}
+
+/* Both icons positioned absolutely and centered */
+.tab-icon-inactive,
+.tab-icon-active {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: all 0.8s cubic-bezier(0.36, 1, 0.04, 1);
+}
+
+/* Start state (inactive tab) */
+.tab-icon-inactive {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+.tab-icon-active {
+  opacity: 0;
+  transform: translate(-50%, calc(-50% - 12px)) scale(0.5);
+}
+
+/* End state (active tab) */
+.tab-selected .tab-icon-inactive {
+  opacity: 0;
+  transform: translate(-50%, -50%) scale(0.5);
+}
+
+.tab-selected .tab-icon-active {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+/* ============================================
+   TAB BUTTONS - DESKTOP
+   ============================================ */
+
+@media (min-width: 768px) {
+  .ds-tab-button {
+    flex-direction: row;
+    height: 40px;
+    padding: 0px 16px !important;
+    border-radius: 40px;
+    transition: all 0.2s ease;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: -moz-fit-content;
+    min-width: fit-content;
+    flex: 0 0 auto;
+    --color: rgba(var(--color-secondary-content-rgb, 255, 255, 255), 0.7);
+    --color-selected: var(--color-secondary-content, white);
+    color: rgba(var(--color-secondary-content-rgb, 255, 255, 255), 0.7);
+    background: rgba(var(--color-secondary-content-rgb, 255, 255, 255), 0.1);
+    position: relative;
+    overflow: hidden;
+  }
+
+  /* Desktop: smaller icon wrapper */
+  .tab-icon-wrapper {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Desktop: smaller ripple */
+  .tab-icon-ripple {
+    width: 20px;
+    height: 20px;
+  }
+
+  /* Ensure native button respects the rounded shape */
+  .ds-tab-button::part(native) {
+    border-radius: 40px;
+  }
+
+  .ds-tab-button:hover:not(.tab-selected) {
+    --color: var(--color-secondary-content, white);
+    --color-selected: var(--color-secondary-content, white);
+    color: var(--color-secondary-content, white);
+  }
+
+  .ds-tab-button:hover:not(.tab-selected) ion-label {
+    color: var(--color-secondary-content, white);
+  }
+
+  .ds-tab-button:hover:not(.tab-selected) ds-icon {
+    --icon-color: var(--color-secondary-content, white);
+    color: var(--color-secondary-content, white);
+  }
+
+  .ds-tab-button:hover:not(.tab-selected) ds-icon svg {
+    fill: var(--color-secondary-content, white);
+  }
+
+  .ds-tab-button.tab-selected {
+    background: var(--color-accent);
+    --color-selected: var(--color-on-accent, white);
+    --color: var(--color-on-accent, white);
+    color: var(--color-on-accent, white);
+  }
+
+  .ds-tab-button.tab-selected ion-label {
+    color: var(--color-on-accent, white);
+  }
+
+  .ds-tab-button .button-native {
+    width: auto;
+    padding: 0;
+  }
+
+  .ds-tab-button ion-label {
+    font-size: var(--font-size-sm);
+    font-weight: 500;
+    margin: 0;
+    color: inherit;
+  }
+
+  .ds-tab-button .tab-icon-wrapper {
+    margin-right: 4px;
+    margin-bottom: 0px;
+  }
+
+  .ds-tab-button ion-ripple-effect {
+    color: rgba(var(--header-content-color-rgb, 255, 255, 255), 0.3);
+    border-radius: 1000px;
+    transform: scale(1.5);
+  }
+}
+
+/* ============================================
+   AVATAR STYLING
+   ============================================ */
+
+@media (min-width: 768px) {
+  .ds-tab-bar__actions ds-avatar {
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .ds-tab-bar__actions ds-avatar:hover {
+    transform: scale(1.05);
+  }
+}

package/src/components/ds-mobile-tabs.ts

@@ -0,0 +1,216 @@
+import { Component, Input, Output, EventEmitter, signal, OnInit, OnDestroy, AfterViewInit, ElementRef, inject, PLATFORM_ID } from '@angular/core';
+import { CommonModule, isPlatformBrowser } from '@angular/common';
+import { 
+  IonTabs, 
+  IonTabBar, 
+  IonTabButton, 
+  IonLabel
+} from '@ionic/angular/standalone';
+import { DsIconComponent, DsAvatarComponent } from '@propbinder/design-system';
+import { DsLogoComponent } from './logo/ds-logo';
+
+export interface TabConfig {
+  id: string;
+  label: string;
+  route: string;
+  icon: string;
+  iconActive: string;
+}
+
+/**
+ * DsMobileTabsComponent
+ * 
+ * Responsive tab navigation that adapts from mobile to desktop:
+ * - Mobile (< 768px): Bottom tab bar with icons + labels
+ * - Desktop (≥ 768px): Top navigation bar with logo, tabs, and avatar
+ * 
+ * Wraps ion-tabs to maintain native routing functionality while
+ * providing a responsive navigation experience with branding.
+ * 
+ * @example
+ * ```html
+ * <ds-mobile-tabs
+ *   [tabs]="tabsConfig"
+ *   [avatarInitials]="'JD'"
+ *   (avatarClick)="handleAvatarClick()"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'ds-mobile-tabs',
+  standalone: true,
+  imports: [
+    CommonModule,
+    IonTabs,
+    IonTabBar,
+    IonTabButton,
+    IonLabel,
+    DsIconComponent,
+    DsAvatarComponent,
+    DsLogoComponent
+  ],
+  styleUrls: ['./ds-mobile-tabs.css'],
+  template: `
+    <ion-tabs>
+      <ion-tab-bar 
+        [attr.slot]="isDesktop() ? 'top' : 'bottom'" 
+        class="ds-tab-bar"
+        [class.ds-tab-bar--desktop]="isDesktop()">
+        
+        <!-- Logo (desktop only, full logo in header) -->
+        <div class="ds-tab-bar__logo">
+          <ds-logo variant="full" size="lg" />
+        </div>
+        
+        <!-- Tab buttons container -->
+        <div class="ds-tab-bar__tabs" *ngIf="tabs">
+          <ion-tab-button 
+            *ngFor="let tab of tabs; trackBy: trackByTabId"
+            [tab]="tab.id"
+            [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.id)">
+            <div class="tab-icon-ripple"></div>
+            <div class="tab-icon-wrapper">
+              <ds-icon 
+                [name]="tab.icon"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-inactive"
+              />
+              <ds-icon 
+                [name]="tab.iconActive"
+                [size]="isDesktop() ? '20px' : '24px'"
+                class="tab-icon-active"
+              />
+            </div>
+            <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
+            [initials]="avatarInitials"
+            [type]="avatarType"
+            [src]="avatarSrc"
+            [iconName]="avatarIconName"
+            (click)="handleAvatarClick()"
+            style="cursor: pointer;"
+          />
+        </div>
+      </ion-tab-bar>
+    </ion-tabs>
+  `
+})
+export class DsMobileTabsComponent implements OnInit, OnDestroy, AfterViewInit {
+  private platformId = inject(PLATFORM_ID);
+  private resizeListener?: () => void;
+  private mutationObserver?: MutationObserver;
+  
+  // Inputs
+  @Input() tabs: TabConfig[] = [];
+  
+  // Avatar inputs
+  @Input() avatarType: 'initials' | 'photo' | 'icon' = 'initials';
+  @Input() avatarInitials: string = 'U';
+  @Input() avatarSrc: string = '';
+  @Input() avatarIconName: string = 'remixUser3Line';
+  
+  // Outputs
+  @Output() avatarClick = new EventEmitter<void>();
+  
+  // Internal state
+  activeTab = signal<string>('');
+  isDesktop = signal<boolean>(false);
+  
+  constructor(private elementRef: ElementRef) {}
+  
+  ngOnInit(): void {
+    console.log('DsMobileTabsComponent initialized');
+    
+    // Only run breakpoint detection in browser
+    if (isPlatformBrowser(this.platformId)) {
+      // Initial check
+      this.checkBreakpoint();
+      
+      // Listen for window resize
+      this.resizeListener = () => this.checkBreakpoint();
+      window.addEventListener('resize', this.resizeListener);
+    }
+  }
+  
+  ngAfterViewInit(): void {
+    // Initial removal
+    this.removeTitleAttributes();
+    
+    // Set up mutation observer to continuously remove title attributes
+    this.setupTitleRemovalObserver();
+  }
+  
+  ngOnDestroy(): void {
+    if (isPlatformBrowser(this.platformId) && this.resizeListener) {
+      window.removeEventListener('resize', this.resizeListener);
+    }
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  
+  private setupTitleRemovalObserver(): void {
+    const config = { 
+      attributes: true, 
+      attributeFilter: ['title'],
+      subtree: true,
+      childList: true
+    };
+    
+    this.mutationObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'title') {
+          const target = mutation.target as HTMLElement;
+          if (target.tagName === 'ION-TAB-BUTTON' && target.hasAttribute('title')) {
+            target.removeAttribute('title');
+          }
+        }
+      });
+      // Also do a sweep after any changes
+      this.removeTitleAttributes();
+    });
+    
+    this.mutationObserver.observe(this.elementRef.nativeElement, config);
+  }
+  
+  private removeTitleAttributes(): void {
+    const tabButtons = this.elementRef.nativeElement.querySelectorAll('ion-tab-button');
+    tabButtons.forEach((button: HTMLElement) => {
+      if (button.hasAttribute('title')) {
+        button.removeAttribute('title');
+      }
+      // Also remove from the native button inside shadow DOM
+      const nativeButton = button.shadowRoot?.querySelector('button');
+      if (nativeButton?.hasAttribute('title')) {
+        nativeButton.removeAttribute('title');
+      }
+    });
+  }
+  
+  private checkBreakpoint(): void {
+    // 768px matches the @media (min-width: 768px) in CSS
+    this.isDesktop.set(window.innerWidth >= 768);
+  }
+  
+  trackByTabId(index: number, tab: TabConfig): string {
+    return tab.id;
+  }
+  
+  isTabActive(tabId: string): boolean {
+    return this.activeTab() === tabId;
+  }
+  
+  handleAvatarClick(): void {
+    this.avatarClick.emit();
+  }
+}
+