@propbinder/mobile-design 0.2.50 → 0.2.52

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

@@ -1,407 +0,0 @@
-/* ============================================
-   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

@@ -1,216 +0,0 @@
-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();
-  }
-}
-