valtech-components 2.0.687 → 2.0.689

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

@@ -0,0 +1,165 @@
+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

@@ -0,0 +1,326 @@
+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

@@ -0,0 +1,56 @@
+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;
+}