import { CommonModule } from '@angular/common';
import { Component, computed, EventEmitter, inject, input, Output, signal } from '@angular/core';
import { NavigationEnd, Router } from '@angular/router';
import { IonIcon, IonRippleEffect } from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
import { filter } from 'rxjs';
import { I18nService } from '../../../services/i18n';
import { NavigationService } from '../../../services/navigation';
import { 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';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
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 }
 *   }"
 * />
 * ```
 */
export class BottomNavComponent {
    constructor() {
        this.router = inject(Router);
        this.navigation = inject(NavigationService);
        this.i18n = inject(I18nService);
        /** Component configuration */
        this.props = input({ tabs: [] });
        /** Event emitted when a tab is clicked */
        this.tabClick = new EventEmitter();
        /** Event emitted when the FAB button is clicked */
        this.fabClick = new EventEmitter();
        /** Current active route signal for reactive updates */
        this.currentRoute = signal('');
        /** Merged configuration with defaults */
        this.config = computed(() => ({
            ...BOTTOM_NAV_DEFAULTS,
            ...this.props(),
            theme: {
                ...BOTTOM_NAV_DEFAULTS.theme,
                ...this.props().theme,
            },
        }));
        /** Computed tabs with FAB inserted if present */
        this.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, // FAB placeholder
                ...tabs.slice(midpoint),
            ];
        });
    }
    /** Check if a tab is currently active */
    isActive(tab) {
        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) {
        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) {
        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() {
        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) {
        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() {
        // 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.urlAfterRedirects);
        });
    }
    ngOnDestroy() {
        this.routerSubscription?.unsubscribe();
    }
    /** Handle tab click */
    onTabClick(tab) {
        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() {
        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) {
        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;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: BottomNavComponent, isStandalone: true, selector: "val-bottom-nav", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tabClick: "tabClick", fabClick: "fabClick" }, ngImport: i0, 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>
  `, isInline: true, styles: [":host{display:block;position:fixed;bottom:0;left:0;right:0;z-index:100;pointer-events:none}.bottom-nav{--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;--bottom-nav-height: 56px;--bottom-nav-fab-size: 56px;--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}@media (min-width: 576px){.bottom-nav{--bottom-nav-height: 64px}}.bottom-nav--elevated{box-shadow:0 -4px 20px #00000014}.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.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),.06)}.bottom-nav--floating{margin:0 auto 8px;width:calc(100% - 32px);border-radius:32px;border:1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0),.08);box-shadow:0 4px 24px #00000014,0 8px 32px #0000000a;--bottom-nav-radius: 32px}.bottom-nav--floating.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.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),.08)}.bottom-nav--floating.bottom-nav--elevated{box-shadow:0 4px 24px #0000001a,0 12px 48px #00000014}.bottom-nav--safe-area{padding-bottom:env(safe-area-inset-bottom,0);height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0))}.bottom-nav--floating.bottom-nav--safe-area{margin-bottom:calc(8px + env(safe-area-inset-bottom,0));padding-bottom:0;height:var(--bottom-nav-height)}.bottom-nav__container{display:flex;align-items:center;justify-content:space-around;height:var(--bottom-nav-height);max-width:500px;margin:0 auto}.bottom-nav__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 .2s ease;max-width:80px;--ripple-color: var(--bottom-nav-active)}.bottom-nav__tab:focus-visible{outline:2px solid var(--bottom-nav-active);outline-offset:-2px;border-radius:8px}.bottom-nav__tab--active{color:var(--bottom-nav-active)}.bottom-nav__tab--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bottom-nav__tab[data-animation=scale] .bottom-nav__tab-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}.bottom-nav__tab[data-animation=scale].bottom-nav__tab--active .bottom-nav__tab-icon{transform:scale(1.15)}.bottom-nav__tab[data-animation=fade]{transition:opacity .2s ease,color .2s ease}.bottom-nav__tab[data-animation=fade]:not(.bottom-nav__tab--active){opacity:.6}.bottom-nav__tab[data-animation=slide] .bottom-nav__tab-label{transition:transform .2s ease,opacity .2s ease;transform:translateY(6px);opacity:0}.bottom-nav__tab[data-animation=slide].bottom-nav__tab--active .bottom-nav__tab-label{transform:translateY(0);opacity:1}.bottom-nav__tab-icon{position:relative;font-size:1.5rem;line-height:1}.bottom-nav__tab-icon ion-icon{display:block}.bottom-nav__tab-label{font-size:.6875rem;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.01em}.bottom-nav__badge{position:absolute;top:-4px;right:-10px;min-width:18px;height:18px;padding:0 5px;font-size:.625rem;font-weight:600;line-height:18px;text-align:center;color:#fff;background-color:var(--ion-color-danger);border-radius:9px;box-shadow:0 1px 3px #0003}.bottom-nav__badge--dot{min-width:10px;width:10px;height:10px;padding:0;top:-2px;right:-4px;border-radius:50%}.bottom-nav__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) * -.35);background:var(--fab-color);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.75rem;box-shadow:0 4px 14px rgba(var(--ion-color-primary-rgb, 56, 128, 255),.4);transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease;overflow:hidden;--ripple-color: rgba(255, 255, 255, .3)}.bottom-nav__fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(var(--ion-color-primary-rgb, 56, 128, 255),.5)}.bottom-nav__fab:active{transform:scale(.95)}.bottom-nav__fab:focus-visible{outline:3px solid white;outline-offset:2px}.bottom-nav__fab--small{--bottom-nav-fab-size: 48px;font-size:1.5rem;margin-top:-14.4px}.bottom-nav__fab ion-icon{display:block}.bottom-nav--hide-labels{--bottom-nav-height: 56px}.bottom-nav--hide-labels .bottom-nav__tab-label{display:none}.bottom-nav--hide-labels .bottom-nav__tab-icon{font-size:1.625rem}:host-context(body.font-large) .bottom-nav{--bottom-nav-height: 56px}:host-context(body.font-large) .bottom-nav .bottom-nav__tab-label{display:none}:host-context(body.font-large) .bottom-nav .bottom-nav__tab-icon{font-size:1.625rem}:host-context(.dark) .bottom-nav--translucent,:host-context(.ion-palette-dark) .bottom-nav--translucent,:host-context(html.ion-palette-dark) .bottom-nav--translucent,:host-context(body.dark) .bottom-nav--translucent,:host-context([data-theme=dark]) .bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 18, 18, 18),.85);border-top-color:#ffffff14}:host-context(.dark) .bottom-nav--elevated,:host-context(.ion-palette-dark) .bottom-nav--elevated,:host-context(html.ion-palette-dark) .bottom-nav--elevated,:host-context(body.dark) .bottom-nav--elevated,:host-context([data-theme=dark]) .bottom-nav--elevated{box-shadow:0 -4px 20px #0000004d}:host-context(.dark) .bottom-nav--floating,:host-context(.ion-palette-dark) .bottom-nav--floating,:host-context(html.ion-palette-dark) .bottom-nav--floating,:host-context(body.dark) .bottom-nav--floating,:host-context([data-theme=dark]) .bottom-nav--floating{border-color:#ffffff1a;box-shadow:0 4px 24px #0003,0 8px 32px #00000026}:host-context(.dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(.ion-palette-dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(html.ion-palette-dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(body.dark) .bottom-nav--floating.bottom-nav--translucent,:host-context([data-theme=dark]) .bottom-nav--floating.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 18, 18, 18),.88);border-color:#ffffff1a}:host-context(.dark) .bottom-nav__fab,:host-context(.ion-palette-dark) .bottom-nav__fab,:host-context(html.ion-palette-dark) .bottom-nav__fab,:host-context(body.dark) .bottom-nav__fab,:host-context([data-theme=dark]) .bottom-nav__fab{box-shadow:0 4px 14px #00000080}:host-context(.dark) .bottom-nav__fab:hover,:host-context(.ion-palette-dark) .bottom-nav__fab:hover,:host-context(html.ion-palette-dark) .bottom-nav__fab:hover,:host-context(body.dark) .bottom-nav__fab:hover,:host-context([data-theme=dark]) .bottom-nav__fab:hover{box-shadow:0 6px 20px #0009}@supports (padding-bottom: env(safe-area-inset-bottom)){.bottom-nav--safe-area .bottom-nav__container{height:var(--bottom-nav-height)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonRippleEffect, selector: "ion-ripple-effect", inputs: ["type"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BottomNavComponent, decorators: [{
            type: Component,
            args: [{ 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>
  `, styles: [":host{display:block;position:fixed;bottom:0;left:0;right:0;z-index:100;pointer-events:none}.bottom-nav{--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;--bottom-nav-height: 56px;--bottom-nav-fab-size: 56px;--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}@media (min-width: 576px){.bottom-nav{--bottom-nav-height: 64px}}.bottom-nav--elevated{box-shadow:0 -4px 20px #00000014}.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.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),.06)}.bottom-nav--floating{margin:0 auto 8px;width:calc(100% - 32px);border-radius:32px;border:1px solid rgba(var(--ion-text-color-rgb, 0, 0, 0),.08);box-shadow:0 4px 24px #00000014,0 8px 32px #0000000a;--bottom-nav-radius: 32px}.bottom-nav--floating.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 255, 255, 255),.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),.08)}.bottom-nav--floating.bottom-nav--elevated{box-shadow:0 4px 24px #0000001a,0 12px 48px #00000014}.bottom-nav--safe-area{padding-bottom:env(safe-area-inset-bottom,0);height:calc(var(--bottom-nav-height) + env(safe-area-inset-bottom,0))}.bottom-nav--floating.bottom-nav--safe-area{margin-bottom:calc(8px + env(safe-area-inset-bottom,0));padding-bottom:0;height:var(--bottom-nav-height)}.bottom-nav__container{display:flex;align-items:center;justify-content:space-around;height:var(--bottom-nav-height);max-width:500px;margin:0 auto}.bottom-nav__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 .2s ease;max-width:80px;--ripple-color: var(--bottom-nav-active)}.bottom-nav__tab:focus-visible{outline:2px solid var(--bottom-nav-active);outline-offset:-2px;border-radius:8px}.bottom-nav__tab--active{color:var(--bottom-nav-active)}.bottom-nav__tab--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.bottom-nav__tab[data-animation=scale] .bottom-nav__tab-icon{transition:transform .2s cubic-bezier(.4,0,.2,1)}.bottom-nav__tab[data-animation=scale].bottom-nav__tab--active .bottom-nav__tab-icon{transform:scale(1.15)}.bottom-nav__tab[data-animation=fade]{transition:opacity .2s ease,color .2s ease}.bottom-nav__tab[data-animation=fade]:not(.bottom-nav__tab--active){opacity:.6}.bottom-nav__tab[data-animation=slide] .bottom-nav__tab-label{transition:transform .2s ease,opacity .2s ease;transform:translateY(6px);opacity:0}.bottom-nav__tab[data-animation=slide].bottom-nav__tab--active .bottom-nav__tab-label{transform:translateY(0);opacity:1}.bottom-nav__tab-icon{position:relative;font-size:1.5rem;line-height:1}.bottom-nav__tab-icon ion-icon{display:block}.bottom-nav__tab-label{font-size:.6875rem;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;letter-spacing:.01em}.bottom-nav__badge{position:absolute;top:-4px;right:-10px;min-width:18px;height:18px;padding:0 5px;font-size:.625rem;font-weight:600;line-height:18px;text-align:center;color:#fff;background-color:var(--ion-color-danger);border-radius:9px;box-shadow:0 1px 3px #0003}.bottom-nav__badge--dot{min-width:10px;width:10px;height:10px;padding:0;top:-2px;right:-4px;border-radius:50%}.bottom-nav__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) * -.35);background:var(--fab-color);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.75rem;box-shadow:0 4px 14px rgba(var(--ion-color-primary-rgb, 56, 128, 255),.4);transition:transform .2s cubic-bezier(.4,0,.2,1),box-shadow .2s ease;overflow:hidden;--ripple-color: rgba(255, 255, 255, .3)}.bottom-nav__fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(var(--ion-color-primary-rgb, 56, 128, 255),.5)}.bottom-nav__fab:active{transform:scale(.95)}.bottom-nav__fab:focus-visible{outline:3px solid white;outline-offset:2px}.bottom-nav__fab--small{--bottom-nav-fab-size: 48px;font-size:1.5rem;margin-top:-14.4px}.bottom-nav__fab ion-icon{display:block}.bottom-nav--hide-labels{--bottom-nav-height: 56px}.bottom-nav--hide-labels .bottom-nav__tab-label{display:none}.bottom-nav--hide-labels .bottom-nav__tab-icon{font-size:1.625rem}:host-context(body.font-large) .bottom-nav{--bottom-nav-height: 56px}:host-context(body.font-large) .bottom-nav .bottom-nav__tab-label{display:none}:host-context(body.font-large) .bottom-nav .bottom-nav__tab-icon{font-size:1.625rem}:host-context(.dark) .bottom-nav--translucent,:host-context(.ion-palette-dark) .bottom-nav--translucent,:host-context(html.ion-palette-dark) .bottom-nav--translucent,:host-context(body.dark) .bottom-nav--translucent,:host-context([data-theme=dark]) .bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 18, 18, 18),.85);border-top-color:#ffffff14}:host-context(.dark) .bottom-nav--elevated,:host-context(.ion-palette-dark) .bottom-nav--elevated,:host-context(html.ion-palette-dark) .bottom-nav--elevated,:host-context(body.dark) .bottom-nav--elevated,:host-context([data-theme=dark]) .bottom-nav--elevated{box-shadow:0 -4px 20px #0000004d}:host-context(.dark) .bottom-nav--floating,:host-context(.ion-palette-dark) .bottom-nav--floating,:host-context(html.ion-palette-dark) .bottom-nav--floating,:host-context(body.dark) .bottom-nav--floating,:host-context([data-theme=dark]) .bottom-nav--floating{border-color:#ffffff1a;box-shadow:0 4px 24px #0003,0 8px 32px #00000026}:host-context(.dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(.ion-palette-dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(html.ion-palette-dark) .bottom-nav--floating.bottom-nav--translucent,:host-context(body.dark) .bottom-nav--floating.bottom-nav--translucent,:host-context([data-theme=dark]) .bottom-nav--floating.bottom-nav--translucent{background:rgba(var(--ion-background-color-rgb, 18, 18, 18),.88);border-color:#ffffff1a}:host-context(.dark) .bottom-nav__fab,:host-context(.ion-palette-dark) .bottom-nav__fab,:host-context(html.ion-palette-dark) .bottom-nav__fab,:host-context(body.dark) .bottom-nav__fab,:host-context([data-theme=dark]) .bottom-nav__fab{box-shadow:0 4px 14px #00000080}:host-context(.dark) .bottom-nav__fab:hover,:host-context(.ion-palette-dark) .bottom-nav__fab:hover,:host-context(html.ion-palette-dark) .bottom-nav__fab:hover,:host-context(body.dark) .bottom-nav__fab:hover,:host-context([data-theme=dark]) .bottom-nav__fab:hover{box-shadow:0 6px 20px #0009}@supports (padding-bottom: env(safe-area-inset-bottom)){.bottom-nav--safe-area .bottom-nav__container{height:var(--bottom-nav-height)}}\n"] }]
        }], propDecorators: { tabClick: [{
                type: Output
            }], fabClick: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64, 