valtech-components 2.0.787 → 2.0.795

package/src/lib/components/organisms/bottom-nav/bottom-nav.component.scss

@@ -0,0 +1,343 @@
+:host {
+  display: block;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  pointer-events: none;
+}
+
+.bottom-nav {
+  // CSS Variables with defaults
+  --bottom-nav-bg: var(--ion-background-color);
+  --bottom-nav-active: var(--ion-color-primary);
+  --bottom-nav-inactive: var(--ion-color-medium);
+  --bottom-nav-radius: 16px 16px 0 0;
+  // Mobile-first: 56px base. >=576px sube a 64px (más aire en desktop).
+  // En iOS PWA standalone, safe-area-inset-bottom (~34px) se suma vía
+  // `&--safe-area` rule → total ~90px, lo cual era percibido como "rechoncho"
+  // con base 64. Bajar a 56 compensa.
+  --bottom-nav-height: 56px;
+  --bottom-nav-fab-size: 56px;
+
+  @media (min-width: 576px) {
+    --bottom-nav-height: 64px;
+  }
+  --bottom-nav-max-width: var(--val-container-md, 720px);
+  --fab-color: var(--ion-color-primary);
+
+  pointer-events: auto;
+  background: var(--bottom-nav-bg);
+  border-radius: var(--bottom-nav-radius);
+  height: var(--bottom-nav-height);
+  padding: 0 8px;
+  max-width: var(--bottom-nav-max-width);
+  margin: 0 auto;
+
+  // Elevated style with shadow
+  &--elevated {
+    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
+  }
+
+  // Translucent (glassmorphism) style
+  &--translucent {
+    background: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.75);
+    backdrop-filter: blur(20px) saturate(180%);
+    -webkit-backdrop-filter: blur(20px) saturate(180%);
+    border-top: 1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.06);
+  }
+
+  // Floating island style
+  &--floating {
+    margin: 0 auto 8px;
+    width: calc(100% - 32px); // preserva gap lateral en mobile; max-width hereda del .bottom-nav
+    border-radius: 32px;
+    border: 1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+    box-shadow:
+      0 4px 24px rgba(0, 0, 0, 0.08),
+      0 8px 32px rgba(0, 0, 0, 0.04);
+
+    // Override default radius
+    --bottom-nav-radius: 32px;
+  }
+
+  // Floating + Translucent combo
+  &--floating#{&}--translucent {
+    background: rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.82);
+    backdrop-filter: blur(28px) saturate(200%);
+    -webkit-backdrop-filter: blur(28px) saturate(200%);
+    border: 1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+  }
+
+  // Floating + Elevated combo
+  &--floating#{&}--elevated {
+    box-shadow:
+      0 4px 24px rgba(0, 0, 0, 0.1),
+      0 12px 48px rgba(0, 0, 0, 0.08);
+  }
+
+  // Safe area for iOS — pill NO-floating: añade padding-bottom para que el
+  // contenido visible no entre en el home-indicator strip.
+  &--safe-area {
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0));
+  }
+
+  // Floating + Safe area combo: el pill se LEVANTA arriba del home indicator
+  // vía margin. NO crece de altura ni agrega padding interno (ya está flotando).
+  // El `&--floating#{&}--safe-area` aplica DESPUÉS de `&--safe-area` y
+  // sobrescribe los efectos no deseados.
+  &--floating#{&}--safe-area {
+    margin-bottom: calc(8px + env(safe-area-inset-bottom, 0));
+    padding-bottom: 0;
+    height: var(--bottom-nav-height);
+  }
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: var(--bottom-nav-height);
+    max-width: 500px; // cap interno: agrupa items al centro aunque .bottom-nav sea más ancho
+    margin: 0 auto;
+  }
+
+  // Tab Button
+  &__tab {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    height: 100%;
+    padding: 8px 4px;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    color: var(--bottom-nav-inactive);
+    transition: color 0.2s ease;
+    max-width: 80px;
+
+    --ripple-color: var(--bottom-nav-active);
+
+    &:focus-visible {
+      outline: 2px solid var(--bottom-nav-active);
+      outline-offset: -2px;
+      border-radius: 8px;
+    }
+
+    &--active {
+      color: var(--bottom-nav-active);
+    }
+
+    &--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // Animation: Scale
+    &[data-animation='scale'] {
+      .bottom-nav__tab-icon {
+        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      &.bottom-nav__tab--active .bottom-nav__tab-icon {
+        transform: scale(1.15);
+      }
+    }
+
+    // Animation: Fade
+    &[data-animation='fade'] {
+      transition:
+        opacity 0.2s ease,
+        color 0.2s ease;
+
+      &:not(.bottom-nav__tab--active) {
+        opacity: 0.6;
+      }
+    }
+
+    // Animation: Slide (label slides in)
+    &[data-animation='slide'] {
+      .bottom-nav__tab-label {
+        transition:
+          transform 0.2s ease,
+          opacity 0.2s ease;
+        transform: translateY(6px);
+        opacity: 0;
+      }
+
+      &.bottom-nav__tab--active .bottom-nav__tab-label {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    }
+  }
+
+  &__tab-icon {
+    position: relative;
+    font-size: 24px;
+    line-height: 1;
+
+    ion-icon {
+      display: block;
+    }
+  }
+
+  &__tab-label {
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    letter-spacing: 0.01em;
+  }
+
+  // Badge
+  &__badge {
+    position: absolute;
+    top: -4px;
+    right: -10px;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    font-size: 10px;
+    font-weight: 600;
+    line-height: 18px;
+    text-align: center;
+    color: white;
+    background-color: var(--ion-color-danger);
+    border-radius: 9px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+
+    &--dot {
+      min-width: 10px;
+      width: 10px;
+      height: 10px;
+      padding: 0;
+      top: -2px;
+      right: -4px;
+      border-radius: 50%;
+    }
+  }
+
+  // FAB Button
+  &__fab {
+    position: relative;
+    flex-shrink: 0;
+    width: var(--bottom-nav-fab-size);
+    height: var(--bottom-nav-fab-size);
+    margin: 0 12px;
+    margin-top: calc(var(--bottom-nav-fab-size) * -0.35);
+    background: var(--fab-color);
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 28px;
+    box-shadow: 0 4px 14px rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.4);
+    transition:
+      transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
+      box-shadow 0.2s ease;
+    overflow: hidden;
+
+    --ripple-color: rgba(255, 255, 255, 0.3);
+
+    &:hover {
+      transform: scale(1.08);
+      box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:focus-visible {
+      outline: 3px solid white;
+      outline-offset: 2px;
+    }
+
+    &--small {
+      --bottom-nav-fab-size: 48px;
+      font-size: 24px;
+      margin-top: calc(48px * -0.3);
+    }
+
+    ion-icon {
+      display: block;
+    }
+  }
+
+  // Hide labels mode
+  &--hide-labels {
+    --bottom-nav-height: 56px;
+
+    .bottom-nav__tab-label {
+      display: none;
+    }
+
+    .bottom-nav__tab-icon {
+      font-size: 26px;
+    }
+  }
+}
+
+// Dark mode support — class-based ONLY. Apps deben usar `dark.class.css` palette
+// + ThemeService que toggle `body.dark`/`html.ion-palette-dark`. La regla por
+// `@media (prefers-color-scheme: dark)` fue removida porque pintaba el navbar
+// oscuro según OS aunque el user tuviera tema light manual.
+:host-context(.dark),
+:host-context(.ion-palette-dark),
+:host-context(html.ion-palette-dark),
+:host-context(body.dark),
+:host-context([data-theme='dark']) {
+  .bottom-nav {
+    &--translucent {
+      background: rgba(var(--ion-background-color-rgb, 18, 18, 18), 0.85);
+      border-top-color: rgba(255, 255, 255, 0.08);
+    }
+
+    &--elevated {
+      box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
+    }
+
+    &--floating {
+      border-color: rgba(255, 255, 255, 0.1);
+      box-shadow:
+        0 4px 24px rgba(0, 0, 0, 0.2),
+        0 8px 32px rgba(0, 0, 0, 0.15);
+
+      &.bottom-nav--translucent {
+        background: rgba(var(--ion-background-color-rgb, 18, 18, 18), 0.88);
+        border-color: rgba(255, 255, 255, 0.1);
+      }
+    }
+
+    &__fab {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+
+      &:hover {
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+}
+
+// iOS safe area additional support
+@supports (padding-bottom: env(safe-area-inset-bottom)) {
+  .bottom-nav--safe-area {
+    .bottom-nav__container {
+      height: var(--bottom-nav-height);
+    }
+  }
+}

package/src/lib/components/organisms/bottom-nav/bottom-nav.component.ts

@@ -0,0 +1,361 @@
+import { CommonModule } from '@angular/common';
+import { Component, computed, EventEmitter, inject, input, OnDestroy, OnInit, Output, signal } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { IonIcon, IonRippleEffect } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { filter, Subscription } from 'rxjs';
+import { I18nService } from '../../../services/i18n';
+import { NavigationService } from '../../../services/navigation';
+import { BottomNavMetadata, BottomNavTab, BottomNavClickEvent, BOTTOM_NAV_DEFAULTS } from './types';
+
+// Register common navigation icons
+import {
+  home,
+  homeOutline,
+  search,
+  searchOutline,
+  person,
+  personOutline,
+  settings,
+  settingsOutline,
+  notifications,
+  notificationsOutline,
+  add,
+  addOutline,
+  heart,
+  heartOutline,
+  cart,
+  cartOutline,
+  chatbubble,
+  chatbubbleOutline,
+  compass,
+  compassOutline,
+  grid,
+  gridOutline,
+  list,
+  listOutline,
+  calendar,
+  calendarOutline,
+  folder,
+  folderOutline,
+  documents,
+  documentsOutline,
+  statsChart,
+  statsChartOutline,
+} from 'ionicons/icons';
+
+addIcons({
+  home,
+  homeOutline,
+  search,
+  searchOutline,
+  person,
+  personOutline,
+  settings,
+  settingsOutline,
+  notifications,
+  notificationsOutline,
+  add,
+  addOutline,
+  heart,
+  heartOutline,
+  cart,
+  cartOutline,
+  chatbubble,
+  chatbubbleOutline,
+  compass,
+  compassOutline,
+  grid,
+  gridOutline,
+  list,
+  listOutline,
+  calendar,
+  calendarOutline,
+  folder,
+  folderOutline,
+  documents,
+  documentsOutline,
+  statsChart,
+  statsChartOutline,
+});
+
+/**
+ * val-bottom-nav
+ *
+ * A modern bottom navigation bar component with support for tabs,
+ * optional central FAB button, badges, and route-based active state detection.
+ *
+ * @example Basic usage
+ * ```html
+ * <val-bottom-nav
+ *   [props]="{
+ *     tabs: [
+ *       { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
+ *       { token: 'settings', icon: { default: 'settings-outline', active: 'settings' }, label: 'Settings', route: '/app/settings' }
+ *     ]
+ *   }"
+ *   (tabClick)="onTabClick($event)"
+ * />
+ * ```
+ *
+ * @example With i18n and translucent theme
+ * ```html
+ * <val-bottom-nav
+ *   [props]="{
+ *     tabs: [
+ *       { token: 'home', icon: { default: 'home-outline' }, labelKey: 'menuHome', route: '/app/home' },
+ *       { token: 'settings', icon: { default: 'settings-outline' }, labelKey: 'menuSettings', route: '/app/settings' }
+ *     ],
+ *     i18nNamespace: 'Menu',
+ *     theme: { translucent: true }
+ *   }"
+ * />
+ * ```
+ */
+@Component({
+  selector: 'val-bottom-nav',
+  standalone: true,
+  imports: [CommonModule, IonIcon, IonRippleEffect],
+  template: `
+    <nav
+      class="bottom-nav"
+      [class.bottom-nav--elevated]="config().theme.elevated"
+      [class.bottom-nav--translucent]="config().theme.translucent"
+      [class.bottom-nav--floating]="config().theme.floating"
+      [class.bottom-nav--safe-area]="config().safeArea"
+      [class.bottom-nav--hide-labels]="config().hideLabels"
+      [ngStyle]="getThemeStyles()"
+      role="navigation"
+      aria-label="Bottom navigation"
+    >
+      <div class="bottom-nav__container">
+        @for (item of displayTabs(); track $index) {
+          @if (item === null && config().fab) {
+            <!-- FAB Button -->
+            <button
+              class="bottom-nav__fab"
+              [class.bottom-nav__fab--small]="config().fab!.size === 'small'"
+              [style.--fab-color]="resolveColor(config().fab!.color || 'primary')"
+              (click)="onFabClick()"
+              [attr.aria-label]="config().fab!.ariaLabel || 'Action button'"
+              type="button"
+            >
+              <ion-ripple-effect></ion-ripple-effect>
+              <ion-icon [name]="config().fab!.icon"></ion-icon>
+            </button>
+          } @else if (item) {
+            <!-- Tab Item -->
+            <button
+              class="bottom-nav__tab"
+              [class.bottom-nav__tab--active]="isActive(item)"
+              [class.bottom-nav__tab--disabled]="item.disabled"
+              [attr.data-animation]="config().animation"
+              (click)="onTabClick(item)"
+              [attr.aria-label]="item.ariaLabel || getLabel(item)"
+              [attr.aria-current]="isActive(item) ? 'page' : null"
+              [disabled]="item.disabled"
+              type="button"
+            >
+              <ion-ripple-effect></ion-ripple-effect>
+
+              <div class="bottom-nav__tab-icon">
+                <ion-icon [name]="getIcon(item)"></ion-icon>
+
+                <!-- Badge -->
+                @if (item.badge) {
+                  <span
+                    class="bottom-nav__badge"
+                    [class.bottom-nav__badge--dot]="item.badge.dot"
+                    [style.color]="item.badge.color ? resolveColor(item.badge.color) : null"
+                    [style.background-color]="
+                      item.badge.backgroundColor ? resolveColor(item.badge.backgroundColor) : null
+                    "
+                  >
+                    @if (!item.badge.dot && item.badge.text) {
+                      {{ item.badge.text }}
+                    }
+                  </span>
+                }
+              </div>
+
+              @if (!config().hideLabels && getLabel(item)) {
+                <span class="bottom-nav__tab-label">{{ getLabel(item) }}</span>
+              }
+            </button>
+          }
+        }
+      </div>
+    </nav>
+  `,
+  styleUrls: ['./bottom-nav.component.scss'],
+})
+export class BottomNavComponent implements OnInit, OnDestroy {
+  private router = inject(Router);
+  private navigation = inject(NavigationService);
+  private i18n = inject(I18nService);
+  private routerSubscription?: Subscription;
+
+  /** Component configuration */
+  readonly props = input<BottomNavMetadata>({ tabs: [] });
+
+  /** Event emitted when a tab is clicked */
+  @Output() tabClick = new EventEmitter<BottomNavClickEvent>();
+
+  /** Event emitted when the FAB button is clicked */
+  @Output() fabClick = new EventEmitter<void>();
+
+  /** Current active route signal for reactive updates */
+  private currentRoute = signal<string>('');
+
+  /** Merged configuration with defaults */
+  config = computed(() => ({
+    ...BOTTOM_NAV_DEFAULTS,
+    ...this.props(),
+    theme: {
+      ...BOTTOM_NAV_DEFAULTS.theme,
+      ...this.props().theme,
+    },
+  }));
+
+  /** Computed tabs with FAB inserted if present */
+  displayTabs = computed(() => {
+    const tabs = this.config().tabs;
+    const fab = this.config().fab;
+
+    if (!fab) return tabs;
+
+    // Insert placeholder at center for FAB positioning
+    const midpoint = Math.floor(tabs.length / 2);
+    return [
+      ...tabs.slice(0, midpoint),
+      null as unknown as BottomNavTab, // FAB placeholder
+      ...tabs.slice(midpoint),
+    ];
+  });
+
+  /** Check if a tab is currently active */
+  isActive(tab: BottomNavTab): boolean {
+    const route = this.currentRoute();
+    if (!route) return false;
+
+    // Check main route
+    const tabRoute = Array.isArray(tab.route) ? tab.route.join('/') : tab.route;
+    if (route.startsWith(tabRoute)) return true;
+
+    // Check additional active routes
+    if (tab.activeRoutes) {
+      return tab.activeRoutes.some(r => route.startsWith(r));
+    }
+
+    return false;
+  }
+
+  /** Get the appropriate icon for a tab based on active state */
+  getIcon(tab: BottomNavTab): string {
+    const active = this.isActive(tab);
+    if (active && tab.icon.active) {
+      return tab.icon.active;
+    }
+    return tab.icon.default;
+  }
+
+  /** Get translated label for a tab */
+  getLabel(tab: BottomNavTab): string {
+    if (tab.label) return tab.label;
+    if (tab.labelKey) {
+      this.i18n.lang(); // Track language changes for reactivity
+      return this.i18n.t(tab.labelKey, this.config().i18nNamespace);
+    }
+    return '';
+  }
+
+  /** Get CSS variables for theming */
+  getThemeStyles(): Record<string, string> {
+    const theme = this.config().theme;
+    return {
+      '--bottom-nav-bg': theme.background || '',
+      '--bottom-nav-active': this.resolveColor(theme.activeColor),
+      '--bottom-nav-inactive': this.resolveColor(theme.inactiveColor),
+      '--bottom-nav-radius': theme.borderRadius || '',
+      '--bottom-nav-max-width': this.resolveMaxWidth(this.config().maxWidth),
+    };
+  }
+
+  /** Resolve maxWidth token (sm|md|lg|xl|full) to CSS var or raw value */
+  resolveMaxWidth(v?: string): string {
+    switch (v) {
+      case 'sm':
+        return 'var(--val-container-sm, 540px)';
+      case 'md':
+        return 'var(--val-container-md, 720px)';
+      case 'lg':
+        return 'var(--val-container-lg, 880px)';
+      case 'xl':
+        return 'var(--val-container-xl, 1100px)';
+      case 'full':
+        return 'none';
+      case undefined:
+      case '':
+        return 'var(--val-container-md, 720px)';
+      default:
+        return v;
+    }
+  }
+
+  ngOnInit(): void {
+    // Set initial route
+    this.currentRoute.set(this.router.url);
+
+    // Subscribe to route changes
+    this.routerSubscription = this.router.events
+      .pipe(filter(event => event instanceof NavigationEnd))
+      .subscribe(event => {
+        this.currentRoute.set((event as NavigationEnd).urlAfterRedirects);
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.routerSubscription?.unsubscribe();
+  }
+
+  /** Handle tab click */
+  onTabClick(tab: BottomNavTab): void {
+    if (tab.disabled) return;
+
+    // Emit event
+    this.tabClick.emit({
+      token: tab.token,
+      isFab: false,
+      route: tab.route,
+    });
+
+    // Navigate
+    const route = Array.isArray(tab.route) ? tab.route : [tab.route];
+    this.router.navigate(route);
+  }
+
+  /** Handle FAB click */
+  onFabClick(): void {
+    const fab = this.config().fab;
+    if (!fab) return;
+
+    // Emit event
+    this.fabClick.emit();
+
+    // Navigate if route is defined and not an action-only button
+    if (fab.route && !fab.isAction) {
+      const route = Array.isArray(fab.route) ? fab.route : [fab.route];
+      this.router.navigate(route);
+    }
+  }
+
+  /** Resolve Ionic color name to CSS variable */
+  resolveColor(color?: string): string {
+    if (!color) return '';
+    const ionicColors = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'light', 'medium', 'dark'];
+    if (ionicColors.includes(color)) {
+      return `var(--ion-color-${color})`;
+    }
+    return color;
+  }
+}