valtech-components 2.0.691 → 2.0.692

package/src/lib/components/organisms/tabbed-content/tabbed-content.component.ts

@@ -1,165 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  signal,
-  computed,
-  ChangeDetectionStrategy,
-  OnInit,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { SegmentControlComponent } from '../../molecules/segment-control/segment-control.component';
-import { SegmentControlMetadata, SegmentOption } from '../../molecules/segment-control/types';
-import { TabbedContentMetadata, TabbedContentTab, TabbedContentContext } from './types';
-
-/**
- * val-tabbed-content
- *
- * A container component that combines segment navigation with dynamic content panels.
- * Uses segment-control internally for tab navigation and renders the associated
- * template for the active tab.
- *
- * @example Basic usage with templates
- * ```html
- * <ng-template #catalogTemplate>
- *   <div>Catalog Content</div>
- * </ng-template>
- * <ng-template #settingsTemplate>
- *   <div>Settings Content</div>
- * </ng-template>
- *
- * <val-tabbed-content [props]="{
- *   tabs: [
- *     { value: 'catalog', label: 'Catalog', icon: 'layers-outline', template: catalogTemplate },
- *     { value: 'settings', label: 'Settings', icon: 'settings-outline', template: settingsTemplate }
- *   ],
- *   selectedTab: 'catalog',
- *   scrollable: true,
- *   animated: true
- * }" (tabChange)="onTabChange($event)"></val-tabbed-content>
- * ```
- *
- * @input props: TabbedContentMetadata - Configuration for the tabbed content
- * @output tabChange: string - Emits the selected tab value when changed
- */
-@Component({
-  selector: 'val-tabbed-content',
-  standalone: true,
-  imports: [CommonModule, SegmentControlComponent],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `
-    <div
-      class="tabbed-content"
-      [class]="props.cssClass"
-      [style.--animation-duration]="animationDuration()"
-    >
-      <!-- Segment Control Navigation -->
-      <val-segment-control
-        [props]="segmentControlProps()"
-        (segmentChange)="onSegmentChange($event)"
-      ></val-segment-control>
-
-      <!-- Tab Content Panel -->
-      <div
-        class="tabbed-content__panel"
-        [class.tabbed-content__panel--animated]="props.animated !== false"
-        [class.tabbed-content__panel--transitioning]="isTransitioning()"
-      >
-        @if (activeTab(); as tab) {
-          <ng-container
-            *ngTemplateOutlet="tab.template; context: getTemplateContext(tab)"
-          ></ng-container>
-        }
-      </div>
-    </div>
-  `,
-  styleUrls: ['./tabbed-content.component.scss'],
-})
-export class TabbedContentComponent implements OnInit {
-  /**
-   * Configuration object for the tabbed content.
-   */
-  @Input() props!: TabbedContentMetadata;
-
-  /**
-   * Emits when the active tab changes.
-   */
-  @Output() tabChange = new EventEmitter<string>();
-
-  /** Currently selected tab value */
-  private selectedValue = signal<string>('');
-
-  /** Whether a transition is in progress */
-  isTransitioning = signal<boolean>(false);
-
-  /** Computed animation duration string */
-  animationDuration = computed(() => `${this.props.animationDuration || 300}ms`);
-
-  /** Computed segment control props derived from tabs config */
-  segmentControlProps = computed<SegmentControlMetadata>(() => {
-    const options: SegmentOption[] = this.props.tabs.map(tab => ({
-      value: tab.value,
-      label: tab.label,
-      icon: tab.icon,
-      disabled: tab.disabled,
-      layout: tab.layout || 'icon-top',
-    }));
-
-    return {
-      options,
-      value: this.selectedValue(),
-      color: this.props.color || 'primary',
-      scrollable: this.props.scrollable ?? false,
-      swipeGesture: this.props.swipeGesture ?? true,
-      mode: this.props.mode,
-    };
-  });
-
-  /** Computed active tab object */
-  activeTab = computed<TabbedContentTab | undefined>(() => {
-    return this.props.tabs.find(tab => tab.value === this.selectedValue());
-  });
-
-  ngOnInit(): void {
-    // Set initial selected tab
-    const initialValue = this.props.selectedTab || this.props.tabs[0]?.value || '';
-    this.selectedValue.set(initialValue);
-  }
-
-  /**
-   * Handles segment change events.
-   */
-  onSegmentChange(value: string): void {
-    if (value === this.selectedValue()) {
-      return;
-    }
-
-    // Trigger transition animation
-    if (this.props.animated !== false) {
-      this.isTransitioning.set(true);
-
-      // Reset transition state after animation completes
-      setTimeout(() => {
-        this.selectedValue.set(value);
-        this.isTransitioning.set(false);
-        this.tabChange.emit(value);
-      }, (this.props.animationDuration || 300) / 2);
-    } else {
-      this.selectedValue.set(value);
-      this.tabChange.emit(value);
-    }
-  }
-
-  /**
-   * Creates the context object for the template outlet.
-   */
-  getTemplateContext(tab: TabbedContentTab): TabbedContentContext {
-    const index = this.props.tabs.findIndex(t => t.value === tab.value);
-    return {
-      $implicit: tab.value,
-      tab,
-      index,
-    };
-  }
-}

package/src/lib/components/organisms/tabbed-content/tabbed-content.stories.ts

@@ -1,326 +0,0 @@
-import { Meta, StoryObj, moduleMetadata } from '@storybook/angular';
-import { Component, TemplateRef, ViewChild, AfterViewInit, signal } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TabbedContentComponent } from './tabbed-content.component';
-import { TabbedContentMetadata } from './types';
-import { IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardContent } from '@ionic/angular/standalone';
-import { addIcons } from 'ionicons';
-import {
-  layersOutline,
-  settingsOutline,
-  colorPaletteOutline,
-  codeSlashOutline,
-  documentTextOutline,
-  sparklesOutline,
-} from 'ionicons/icons';
-
-// Register icons
-addIcons({
-  layersOutline,
-  settingsOutline,
-  colorPaletteOutline,
-  codeSlashOutline,
-  documentTextOutline,
-  sparklesOutline,
-});
-
-/**
- * Wrapper component to handle template refs in Storybook
- */
-@Component({
-  selector: 'storybook-tabbed-content-wrapper',
-  standalone: true,
-  imports: [CommonModule, TabbedContentComponent, IonIcon, IonCard, IonCardHeader, IonCardTitle, IonCardContent],
-  template: `
-    <!-- Templates for tabs -->
-    <ng-template #catalogTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Catalog Content</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <p>This is the catalog panel. Here you would display your catalog items, products, or any content relevant to this tab.</p>
-          <ul>
-            <li>Item 1</li>
-            <li>Item 2</li>
-            <li>Item 3</li>
-          </ul>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <ng-template #settingsTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Settings Content</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <p>This is the settings panel. Configure your preferences here.</p>
-          <div style="padding: 1rem; background: var(--ion-color-light); border-radius: 8px; margin-top: 1rem;">
-            <p><strong>Option 1:</strong> Enabled</p>
-            <p><strong>Option 2:</strong> Disabled</p>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <ng-template #themesTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Themes Content</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <p>Choose your preferred theme:</p>
-          <div style="display: flex; gap: 1rem; margin-top: 1rem;">
-            <div style="width: 60px; height: 60px; background: #ffffff; border: 1px solid #ccc; border-radius: 8px;"></div>
-            <div style="width: 60px; height: 60px; background: #1a1a2e; border-radius: 8px;"></div>
-            <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 8px;"></div>
-          </div>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <ng-template #codeTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Code Examples</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <pre style="background: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 8px; overflow-x: auto;"><code>const example = 'Hello World';
-console.log(example);</code></pre>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <ng-template #docsTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Documentation</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <h4>Getting Started</h4>
-          <p>Follow these steps to integrate the component:</p>
-          <ol>
-            <li>Import the component</li>
-            <li>Define your tabs configuration</li>
-            <li>Create templates for each tab</li>
-            <li>Bind the props and handle events</li>
-          </ol>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <ng-template #extrasTemplate>
-      <ion-card>
-        <ion-card-header>
-          <ion-card-title>Extra Features</ion-card-title>
-        </ion-card-header>
-        <ion-card-content>
-          <p>Additional features and bonus content.</p>
-        </ion-card-content>
-      </ion-card>
-    </ng-template>
-
-    <!-- The actual component -->
-    @if (tabbedContentProps) {
-      <val-tabbed-content
-        [props]="tabbedContentProps"
-        (tabChange)="onTabChange($event)"
-      ></val-tabbed-content>
-    }
-  `,
-})
-class TabbedContentWrapperComponent implements AfterViewInit {
-  @ViewChild('catalogTemplate') catalogTemplate!: TemplateRef<any>;
-  @ViewChild('settingsTemplate') settingsTemplate!: TemplateRef<any>;
-  @ViewChild('themesTemplate') themesTemplate!: TemplateRef<any>;
-  @ViewChild('codeTemplate') codeTemplate!: TemplateRef<any>;
-  @ViewChild('docsTemplate') docsTemplate!: TemplateRef<any>;
-  @ViewChild('extrasTemplate') extrasTemplate!: TemplateRef<any>;
-
-  tabbedContentProps: TabbedContentMetadata | null = null;
-
-  // Config inputs
-  tabCount: number = 3;
-  showIcons: boolean = true;
-  scrollable: boolean = false;
-  animated: boolean = true;
-  color: string = 'primary';
-
-  ngAfterViewInit(): void {
-    setTimeout(() => this.buildProps(), 0);
-  }
-
-  buildProps(): void {
-    const allTabs = [
-      { value: 'catalog', label: 'Catalog', icon: 'layers-outline', template: this.catalogTemplate },
-      { value: 'settings', label: 'Settings', icon: 'settings-outline', template: this.settingsTemplate },
-      { value: 'themes', label: 'Themes', icon: 'color-palette-outline', template: this.themesTemplate },
-      { value: 'code', label: 'Code', icon: 'code-slash-outline', template: this.codeTemplate },
-      { value: 'docs', label: 'Docs', icon: 'document-text-outline', template: this.docsTemplate },
-      { value: 'extras', label: 'Extras', icon: 'sparkles-outline', template: this.extrasTemplate },
-    ];
-
-    const tabs = allTabs.slice(0, this.tabCount).map(tab => ({
-      ...tab,
-      icon: this.showIcons ? tab.icon : undefined,
-    }));
-
-    this.tabbedContentProps = {
-      tabs,
-      selectedTab: tabs[0]?.value,
-      scrollable: this.scrollable,
-      animated: this.animated,
-      color: this.color as any,
-    };
-  }
-
-  onTabChange(value: string): void {
-    console.log('Tab changed to:', value);
-  }
-}
-
-const meta: Meta<TabbedContentWrapperComponent> = {
-  title: 'Organisms/TabbedContent',
-  component: TabbedContentWrapperComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [
-        CommonModule,
-        TabbedContentComponent,
-        TabbedContentWrapperComponent,
-        IonIcon,
-        IonCard,
-        IonCardHeader,
-        IonCardTitle,
-        IonCardContent,
-      ],
-    }),
-  ],
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: `
-A container component that combines segment navigation with dynamic content panels.
-Uses segment-control internally for tab navigation and renders the associated template for the active tab.
-
-## Features
-- Integrates with segment-control molecule for navigation
-- Supports TemplateRef for flexible content rendering
-- Configurable animations with fade transitions
-- Scrollable mode for many tabs
-- Dark theme support
-
-## Usage
-\`\`\`typescript
-// Define templates in your component template
-<ng-template #catalogTemplate>Content here</ng-template>
-<ng-template #settingsTemplate>Settings here</ng-template>
-
-// Configure and use the component
-<val-tabbed-content [props]="{
-  tabs: [
-    { value: 'catalog', label: 'Catalog', icon: 'layers-outline', template: catalogTemplate },
-    { value: 'settings', label: 'Settings', icon: 'settings-outline', template: settingsTemplate }
-  ],
-  selectedTab: 'catalog',
-  animated: true
-}" (tabChange)="onTabChange($event)"></val-tabbed-content>
-\`\`\`
-        `,
-      },
-    },
-  },
-  argTypes: {
-    tabCount: {
-      control: { type: 'range', min: 2, max: 6, step: 1 },
-      description: 'Number of tabs to display',
-      defaultValue: 3,
-    },
-    showIcons: {
-      control: 'boolean',
-      description: 'Show icons in tab buttons',
-      defaultValue: true,
-    },
-    scrollable: {
-      control: 'boolean',
-      description: 'Enable horizontal scrolling for tabs',
-      defaultValue: false,
-    },
-    animated: {
-      control: 'boolean',
-      description: 'Enable fade animation on tab change',
-      defaultValue: true,
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light'],
-      description: 'Color theme for segment control',
-      defaultValue: 'primary',
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<TabbedContentWrapperComponent>;
-
-export const Basic: Story = {
-  args: {
-    tabCount: 3,
-    showIcons: true,
-    scrollable: false,
-    animated: true,
-    color: 'primary',
-  },
-};
-
-export const WithoutIcons: Story = {
-  args: {
-    tabCount: 3,
-    showIcons: false,
-    scrollable: false,
-    animated: true,
-    color: 'primary',
-  },
-};
-
-export const Scrollable: Story = {
-  args: {
-    tabCount: 6,
-    showIcons: true,
-    scrollable: true,
-    animated: true,
-    color: 'primary',
-  },
-};
-
-export const NoAnimation: Story = {
-  args: {
-    tabCount: 3,
-    showIcons: true,
-    scrollable: false,
-    animated: false,
-    color: 'primary',
-  },
-};
-
-export const SecondaryColor: Story = {
-  args: {
-    tabCount: 3,
-    showIcons: true,
-    scrollable: false,
-    animated: true,
-    color: 'secondary',
-  },
-};
-
-export const DarkTheme: Story = {
-  args: {
-    tabCount: 3,
-    showIcons: true,
-    scrollable: false,
-    animated: true,
-    color: 'dark',
-  },
-};

package/src/lib/components/organisms/tabbed-content/types.ts

@@ -1,56 +0,0 @@
-import { TemplateRef } from '@angular/core';
-import { Color } from '@ionic/core';
-
-/**
- * Context passed to each tab's template.
- */
-export interface TabbedContentContext {
-  /** The value of the active tab */
-  $implicit: string;
-  /** The full tab configuration */
-  tab: TabbedContentTab;
-  /** Index of the tab */
-  index: number;
-}
-
-/**
- * Configuration for a single tab.
- */
-export interface TabbedContentTab {
-  /** Unique identifier for the tab */
-  value: string;
-  /** Display label for the tab button */
-  label?: string;
-  /** Icon name (Ionicons) */
-  icon?: string;
-  /** Whether the tab is disabled */
-  disabled?: boolean;
-  /** Layout direction for icon and label */
-  layout?: 'icon-start' | 'icon-end' | 'icon-top' | 'icon-bottom';
-  /** Template to render when this tab is active */
-  template: TemplateRef<TabbedContentContext>;
-}
-
-/**
- * Metadata for the tabbed-content component.
- */
-export interface TabbedContentMetadata {
-  /** Array of tab configurations */
-  tabs: TabbedContentTab[];
-  /** Initially selected tab value (defaults to first tab) */
-  selectedTab?: string;
-  /** Color theme for the segment control */
-  color?: Color;
-  /** Allow horizontal scrolling for many tabs */
-  scrollable?: boolean;
-  /** Enable swipe gesture to change tabs (iOS only) */
-  swipeGesture?: boolean;
-  /** Visual mode style */
-  mode?: 'ios' | 'md';
-  /** Enable fade animation on tab change */
-  animated?: boolean;
-  /** Animation duration in milliseconds */
-  animationDuration?: number;
-  /** Additional CSS class for the container */
-  cssClass?: string;
-}