valtech-components 2.0.430 → 2.0.431

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

@@ -0,0 +1,65 @@
+import { EventEmitter, OnInit } from '@angular/core';
+import { SegmentControlMetadata } from '../../molecules/segment-control/types';
+import { TabbedContentMetadata, TabbedContentTab, TabbedContentContext } from './types';
+import * as i0 from "@angular/core";
+/**
+ * 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
+ */
+export declare class TabbedContentComponent implements OnInit {
+    /**
+     * Configuration object for the tabbed content.
+     */
+    props: TabbedContentMetadata;
+    /**
+     * Emits when the active tab changes.
+     */
+    tabChange: EventEmitter<string>;
+    /** Currently selected tab value */
+    private selectedValue;
+    /** Whether a transition is in progress */
+    isTransitioning: import("@angular/core").WritableSignal<boolean>;
+    /** Computed animation duration string */
+    animationDuration: import("@angular/core").Signal<string>;
+    /** Computed segment control props derived from tabs config */
+    segmentControlProps: import("@angular/core").Signal<SegmentControlMetadata>;
+    /** Computed active tab object */
+    activeTab: import("@angular/core").Signal<TabbedContentTab>;
+    ngOnInit(): void;
+    /**
+     * Handles segment change events.
+     */
+    onSegmentChange(value: string): void;
+    /**
+     * Creates the context object for the template outlet.
+     */
+    getTemplateContext(tab: TabbedContentTab): TabbedContentContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TabbedContentComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabbedContentComponent, "val-tabbed-content", never, { "props": { "alias": "props"; "required": false; }; }, { "tabChange": "tabChange"; }, never, never, true, never>;
+}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "valtech-components",
-  "version": "2.0.430",
+  "version": "2.0.431",
   "private": false,
   "repository": {
     "type": "git",

package/public-api.d.ts

@@ -185,6 +185,8 @@ export * from './lib/components/organisms/company-footer/company-footer.componen
 export * from './lib/components/organisms/company-footer/types';
 export * from './lib/components/organisms/menu/menu.component';
 export * from './lib/components/organisms/menu/types';
+export * from './lib/components/organisms/tabbed-content/tabbed-content.component';
+export * from './lib/components/organisms/tabbed-content/types';
 export * from './lib/components/templates/layout/layout.component';
 export * from './lib/components/templates/simple/simple.component';
 export * from './lib/components/templates/simple/types';