valtech-components 2.0.795 → 2.0.796

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

@@ -1,403 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/angular';
-import { applicationConfig, moduleMetadata } from '@storybook/angular';
-import { signal } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { BottomNavComponent } from './bottom-nav.component';
-import { NavigationService } from '../../../services/navigation';
-import { I18nService } from '../../../services/i18n';
-
-// ---------------------------------------------------------------------------
-// Mock factories
-// ---------------------------------------------------------------------------
-
-function createMockRouter() {
-  return {
-    url: '/app/home',
-    navigate: () => Promise.resolve(true),
-    events: { pipe: () => ({ subscribe: () => ({ unsubscribe: () => {} }) }) },
-  };
-}
-
-function createMockNavigationService() {
-  return {
-    navigateWithData: () => {},
-    navigateByUrl: () => {},
-  };
-}
-
-function createMockI18nService() {
-  const langSignal = signal<'es' | 'en'>('es');
-  return {
-    lang: langSignal.asReadonly(),
-    t: (key: string) => key,
-  };
-}
-
-const withMockedServices = applicationConfig({
-  providers: [
-    { provide: Router, useFactory: createMockRouter },
-    { provide: NavigationService, useFactory: createMockNavigationService },
-    { provide: I18nService, useFactory: createMockI18nService },
-  ],
-});
-
-// ---------------------------------------------------------------------------
-// Meta
-// ---------------------------------------------------------------------------
-
-const meta: Meta<BottomNavComponent> = {
-  title: 'Organisms/BottomNav',
-  component: BottomNavComponent,
-  decorators: [
-    withMockedServices,
-    moduleMetadata({
-      imports: [BottomNavComponent],
-    }),
-  ],
-  tags: ['autodocs'],
-  argTypes: {
-    props: {
-      description: 'BottomNav configuration object (BottomNavMetadata)',
-      control: 'object',
-    },
-    tabClick: {
-      action: 'tabClick',
-      description: 'Emitted when a tab is clicked',
-    },
-    fabClick: {
-      action: 'fabClick',
-      description: 'Emitted when the central FAB button is clicked',
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component: `
-## val-bottom-nav
-
-A bottom navigation bar for Ionic/Angular mobile apps. Supports tabs with icons,
-optional labels, notification badges, an optional central FAB button, and
-route-aware active state detection.
-
-### Usage
-
-\`\`\`html
-<val-bottom-nav
-  [props]="{
-    tabs: [
-      { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
-      { token: 'search', icon: { default: 'search-outline', active: 'search' }, label: 'Search', route: '/app/search' }
-    ]
-  }"
-  (tabClick)="onTabClick($event)"
-/>
-\`\`\`
-
-### Features
-
-- Active tab detection based on current route
-- Badge support (text or dot)
-- Central FAB button for primary actions
-- Translucent / floating / elevated themes
-- Safe-area padding for iOS notch
-- Animation variants: \`fade\`, \`scale\`, \`slide\`, \`none\`
-        `,
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<BottomNavComponent>;
-
-// ---------------------------------------------------------------------------
-// Stories
-// ---------------------------------------------------------------------------
-
-/**
- * Four-tab navigation typical of a social or content app.
- */
-export const Default: Story = {
-  args: {
-    props: {
-      tabs: [
-        {
-          token: 'home',
-          icon: { default: 'home-outline', active: 'home' },
-          label: 'Home',
-          route: '/app/home',
-        },
-        {
-          token: 'search',
-          icon: { default: 'search-outline', active: 'search' },
-          label: 'Search',
-          route: '/app/search',
-        },
-        {
-          token: 'notifications',
-          icon: { default: 'notifications-outline', active: 'notifications' },
-          label: 'Alerts',
-          route: '/app/notifications',
-        },
-        {
-          token: 'profile',
-          icon: { default: 'person-outline', active: 'person' },
-          label: 'Profile',
-          route: '/app/profile',
-        },
-      ],
-      theme: { elevated: true },
-    },
-  },
-};
-
-/**
- * Five tabs with a central FAB button for creating new content.
- * The FAB is inserted automatically at the midpoint between tabs.
- */
-export const WithFabButton: Story = {
-  args: {
-    props: {
-      tabs: [
-        {
-          token: 'home',
-          icon: { default: 'home-outline', active: 'home' },
-          label: 'Home',
-          route: '/app/home',
-        },
-        {
-          token: 'search',
-          icon: { default: 'search-outline', active: 'search' },
-          label: 'Explore',
-          route: '/app/search',
-        },
-        {
-          token: 'messages',
-          icon: { default: 'chatbubble-outline', active: 'chatbubble' },
-          label: 'Messages',
-          route: '/app/messages',
-        },
-        {
-          token: 'profile',
-          icon: { default: 'person-outline', active: 'person' },
-          label: 'Profile',
-          route: '/app/profile',
-        },
-      ],
-      fab: {
-        icon: 'add-outline',
-        color: 'primary',
-        ariaLabel: 'Create new post',
-        isAction: true,
-      },
-      theme: { elevated: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'A FAB button is placed at the center of the nav bar for a primary create action.',
-      },
-    },
-  },
-};
-
-/**
- * Tabs with notification badges — dot and text variants.
- */
-export const WithBadges: Story = {
-  args: {
-    props: {
-      tabs: [
-        {
-          token: 'home',
-          icon: { default: 'home-outline', active: 'home' },
-          label: 'Home',
-          route: '/app/home',
-        },
-        {
-          token: 'notifications',
-          icon: { default: 'notifications-outline', active: 'notifications' },
-          label: 'Alerts',
-          route: '/app/notifications',
-          badge: { text: '3', backgroundColor: 'danger', color: 'light' },
-        },
-        {
-          token: 'messages',
-          icon: { default: 'chatbubble-outline', active: 'chatbubble' },
-          label: 'Messages',
-          route: '/app/messages',
-          badge: { dot: true, backgroundColor: 'success' },
-        },
-        {
-          token: 'profile',
-          icon: { default: 'person-outline', active: 'person' },
-          label: 'Profile',
-          route: '/app/profile',
-        },
-      ],
-      theme: { elevated: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Badge variants: numeric counter on Alerts, dot indicator on Messages.',
-      },
-    },
-  },
-};
-
-/**
- * Icon-only mode — labels hidden for a minimal appearance.
- */
-export const IconOnly: Story = {
-  args: {
-    props: {
-      tabs: [
-        {
-          token: 'home',
-          icon: { default: 'home-outline', active: 'home' },
-          label: 'Home',
-          route: '/app/home',
-        },
-        {
-          token: 'search',
-          icon: { default: 'search-outline', active: 'search' },
-          label: 'Search',
-          route: '/app/search',
-        },
-        {
-          token: 'calendar',
-          icon: { default: 'calendar-outline', active: 'calendar' },
-          label: 'Calendar',
-          route: '/app/calendar',
-        },
-        {
-          token: 'settings',
-          icon: { default: 'settings-outline', active: 'settings' },
-          label: 'Settings',
-          route: '/app/settings',
-        },
-      ],
-      hideLabels: true,
-      theme: { elevated: true },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Setting `hideLabels: true` renders only icons, useful for compact layouts.',
-      },
-    },
-  },
-};
-
-/**
- * Floating "island" style detached from the screen edges.
- */
-export const FloatingTheme: Story = {
-  args: {
-    props: {
-      tabs: [
-        {
-          token: 'home',
-          icon: { default: 'home-outline', active: 'home' },
-          label: 'Home',
-          route: '/app/home',
-        },
-        {
-          token: 'compass',
-          icon: { default: 'compass-outline', active: 'compass' },
-          label: 'Explore',
-          route: '/app/explore',
-        },
-        {
-          token: 'heart',
-          icon: { default: 'heart-outline', active: 'heart' },
-          label: 'Saved',
-          route: '/app/saved',
-        },
-        {
-          token: 'profile',
-          icon: { default: 'person-outline', active: 'person' },
-          label: 'Profile',
-          route: '/app/profile',
-        },
-      ],
-      theme: {
-        floating: true,
-        elevated: true,
-        borderRadius: '24px',
-      },
-      safeArea: false,
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        story: 'Floating style renders the nav bar as a pill detached from screen edges.',
-      },
-    },
-  },
-};
-
-/**
- * Side-by-side showcase of the main visual variants.
- */
-export const Showcase: Story = {
-  render: () => ({
-    template: `
-      <div style="display: flex; flex-direction: column; gap: 40px; padding: 16px; max-width: 500px;">
-        <div>
-          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">Default — 4 tabs, elevated</p>
-          <val-bottom-nav [props]="{
-            tabs: [
-              { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
-              { token: 'search', icon: { default: 'search-outline', active: 'search' }, label: 'Search', route: '/app/search' },
-              { token: 'notifications', icon: { default: 'notifications-outline', active: 'notifications' }, label: 'Alerts', route: '/app/notifications' },
-              { token: 'profile', icon: { default: 'person-outline', active: 'person' }, label: 'Profile', route: '/app/profile' }
-            ],
-            theme: { elevated: true }
-          }"></val-bottom-nav>
-        </div>
-
-        <div>
-          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">With FAB button</p>
-          <val-bottom-nav [props]="{
-            tabs: [
-              { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
-              { token: 'search', icon: { default: 'search-outline', active: 'search' }, label: 'Explore', route: '/app/search' },
-              { token: 'messages', icon: { default: 'chatbubble-outline', active: 'chatbubble' }, label: 'Messages', route: '/app/messages' },
-              { token: 'profile', icon: { default: 'person-outline', active: 'person' }, label: 'Profile', route: '/app/profile' }
-            ],
-            fab: { icon: 'add-outline', color: 'primary', isAction: true, ariaLabel: 'Create' },
-            theme: { elevated: true }
-          }"></val-bottom-nav>
-        </div>
-
-        <div>
-          <p style="font-family: system-ui; font-size: 12px; color: #999; margin: 0 0 8px 0;">Icon-only</p>
-          <val-bottom-nav [props]="{
-            tabs: [
-              { token: 'home', icon: { default: 'home-outline', active: 'home' }, label: 'Home', route: '/app/home' },
-              { token: 'grid', icon: { default: 'grid-outline', active: 'grid' }, label: 'Grid', route: '/app/grid' },
-              { token: 'folder', icon: { default: 'folder-outline', active: 'folder' }, label: 'Files', route: '/app/files' },
-              { token: 'settings', icon: { default: 'settings-outline', active: 'settings' }, label: 'Settings', route: '/app/settings' }
-            ],
-            hideLabels: true,
-            theme: { elevated: true }
-          }"></val-bottom-nav>
-        </div>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Side-by-side showcase of the default, FAB, and icon-only variants.',
-      },
-    },
-  },
-};

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

@@ -1,142 +0,0 @@
-import { Color } from '@ionic/core';
-
-/**
- * Badge configuration for a nav item
- */
-export interface BottomNavBadge {
-  /** Badge text (e.g., "3", "NEW") */
-  text?: string;
-  /** Badge color */
-  color?: Color | string;
-  /** Badge background color */
-  backgroundColor?: Color | string;
-  /** Show as dot only (no text) */
-  dot?: boolean;
-}
-
-/**
- * Icon configuration - supports multiple icon sources
- */
-export interface BottomNavIcon {
-  /** Ionicon name for inactive state (e.g., 'home-outline') */
-  default: string;
-  /** Ionicon name for active state (e.g., 'home') - defaults to default if not provided */
-  active?: string;
-}
-
-/**
- * Configuration for a single nav tab item
- */
-export interface BottomNavTab {
-  /** Unique identifier for the tab */
-  token: string;
-  /** Icon configuration */
-  icon: BottomNavIcon;
-  /** Static label text */
-  label?: string;
-  /** i18n key for label */
-  labelKey?: string;
-  /** Route to navigate to (supports string or array format) */
-  route: string | string[];
-  /** Routes that should also mark this tab as active (for nested routes) */
-  activeRoutes?: string[];
-  /** Badge configuration */
-  badge?: BottomNavBadge;
-  /** Whether the tab is disabled */
-  disabled?: boolean;
-  /** Aria label for accessibility */
-  ariaLabel?: string;
-}
-
-/**
- * Configuration for the central FAB button (optional)
- */
-export interface BottomNavFab {
-  /** Icon name */
-  icon: string;
-  /** FAB color */
-  color?: Color | string;
-  /** FAB size */
-  size?: 'small' | 'default';
-  /** Route to navigate to (if navigation action) */
-  route?: string | string[];
-  /** Whether this is an action (emits event) or navigation */
-  isAction?: boolean;
-  /** Aria label for accessibility */
-  ariaLabel?: string;
-}
-
-/**
- * Theme configuration for bottom nav
- */
-export interface BottomNavTheme {
-  /** Background color (CSS variable or color value) */
-  background?: string;
-  /** Active tab color */
-  activeColor?: Color | string;
-  /** Inactive tab color */
-  inactiveColor?: Color | string;
-  /** Border radius for the nav bar */
-  borderRadius?: string;
-  /** Whether to show a top border/shadow */
-  elevated?: boolean;
-  /** Blur effect for translucent background */
-  translucent?: boolean;
-  /** Floating island style - detached from edges with rounded corners */
-  floating?: boolean;
-}
-
-/**
- * Click event emitted by bottom nav
- */
-export interface BottomNavClickEvent {
-  /** Token of the clicked item */
-  token: string;
-  /** Whether it's the FAB button */
-  isFab: boolean;
-  /** The route if navigation occurred */
-  route?: string | string[];
-}
-
-/**
- * Main metadata for val-bottom-nav component
- */
-export interface BottomNavMetadata {
-  /** Array of tab configurations */
-  tabs: BottomNavTab[];
-  /** Central FAB button configuration (optional) */
-  fab?: BottomNavFab;
-  /** i18n namespace for labels */
-  i18nNamespace?: string;
-  /** Theme configuration */
-  theme?: BottomNavTheme;
-  /** Hide labels (icon-only mode) */
-  hideLabels?: boolean;
-  /** Safe area padding for iOS notch */
-  safeArea?: boolean;
-  /** Animation style */
-  animation?: 'fade' | 'scale' | 'slide' | 'none';
-  /** Cap del ancho de la barra. Token sm|md|lg|xl|full o valor CSS crudo. Default: 'md' (720px) — bottom-nav típicamente tiene pocos tabs y se ve mejor estrecho aunque el contenido use 'xl' */
-  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | 'full' | string;
-}
-
-/**
- * Default values for BottomNavMetadata
- */
-export const BOTTOM_NAV_DEFAULTS: Required<
-  Pick<BottomNavMetadata, 'hideLabels' | 'safeArea' | 'animation' | 'maxWidth'>
-> & { theme: Required<BottomNavTheme> } = {
-  hideLabels: false,
-  safeArea: true,
-  animation: 'scale',
-  maxWidth: 'md',
-  theme: {
-    background: 'var(--ion-background-color)',
-    activeColor: 'primary',
-    inactiveColor: 'medium',
-    borderRadius: '16px 16px 0 0',
-    elevated: false,
-    translucent: true,
-    floating: false,
-  },
-};

package/src/lib/components/organisms/cards-carousel/cards-carousel.component.ts

@@ -1,118 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, Input } from '@angular/core';
-import { IonCard, IonCardContent } from '@ionic/angular/standalone';
-import { ActionHeaderComponent } from '../../molecules/action-header/action-header.component';
-import { HorizontalScrollComponent } from '../../atoms/horizontal-scroll/horizontal-scroll.component';
-import { LinkComponent } from '../../molecules/link/link.component';
-import { TitleBlockComponent } from '../../molecules/title-block/title-block.component';
-import { CardsCarouselMetadata, CarouselCardShape } from './types';
-
-/**
- * val-cards-carousel
- *
- * A horizontal carousel of cards with optional action header.
- * Combines HorizontalScroll for smooth horizontal scrolling with inline
- * card rendering for consistent card styling.
- *
- * @example
- * <val-cards-carousel
- *   [props]="{
- *     header: { title: 'Featured Items', actionType: 'link', actionLabel: 'View All' },
- *     cards: [
- *       { title: { title: 'Card 1' }, link: { text: 'Learn more', url: '/item/1' } },
- *       { title: { title: 'Card 2' }, link: { text: 'Learn more', url: '/item/2' } }
- *     ]
- *   }"
- * ></val-cards-carousel>
- *
- * @input props - Carousel configuration with cards and optional header
- */
-@Component({
-  selector: 'val-cards-carousel',
-  standalone: true,
-  imports: [
-    CommonModule,
-    HorizontalScrollComponent,
-    ActionHeaderComponent,
-    IonCard,
-    IonCardContent,
-    LinkComponent,
-    TitleBlockComponent,
-  ],
-  template: `
-    @if (props.header) {
-      <val-action-header [props]="props.header" />
-    }
-
-    <val-horizontal-scroll [items]="props.cards" [itemTemplate]="cardTemplate" />
-    <ng-template #cardTemplate let-card>
-      <ion-card class="carousel-card" [color]="card.color || ''">
-        <div class="shapes">
-          <ng-container *ngFor="let shape of card.shapes">
-            <div class="shape" [ngStyle]="mergeShapeStyle(shape)"></div>
-          </ng-container>
-        </div>
-        <ion-card-content
-          class="carousel-card__content"
-          [style.min-height]="card.minHeight || '400px'"
-          [style.min-width]="card.width || '280px'"
-          [style.max-width]="card.width || '280px'"
-        >
-          <val-title-block [props]="card.title" />
-          <val-link [props]="card.link" />
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-  `,
-  styles: `
-    :host {
-      display: block;
-    }
-
-    .carousel-card {
-      border-radius: 24px;
-      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-      margin: 10px;
-      position: relative;
-      overflow: hidden;
-
-      .shapes {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0.7;
-        pointer-events: none;
-
-        .shape {
-          position: absolute;
-          border-radius: 50%;
-        }
-      }
-
-      .carousel-card__content {
-        position: relative;
-        z-index: 1;
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        height: 100%;
-        padding: 16px;
-      }
-    }
-  `,
-})
-export class CardsCarouselComponent {
-  /**
-   * Carousel configuration with cards and optional header.
-   */
-  @Input() props: CardsCarouselMetadata = { cards: [] };
-
-  /**
-   * Merges shape color with additional styles.
-   */
-  mergeShapeStyle(shape: CarouselCardShape): { [key: string]: string | number } {
-    return { 'background-color': shape.color, ...(shape.style || {}) };
-  }
-}