juvo-rafa-library
Version:
A comprehensive Angular component library featuring real-world components and validators extracted from the Juvo Rafa backoffice application. Now with improved select components and bug fixes.
89 lines (88 loc) • 3.03 kB
TypeScript
import { EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
/**
* Tab menu item interface
* @interface TabMenuItem
* @since 2.1.0
*/
export interface TabMenuItem {
id: string;
label: string;
icon?: string;
disabled?: boolean;
badge?: string | number;
routerLink?: string;
}
/**
* Tab Menu Component
*
* @description
* A horizontal tab navigation component for organizing content into tabs.
* Originally designed for backoffice applications with multiple content sections.
* Supports icons, badges, disabled states, and router integration.
*
* @example
* ```html
* <!-- Basic tab menu -->
* <juvo-tab-menu
* [items]="tabItems"
* [activeItemId]="activeTab"
* (tabChange)="onTabChange($event)">
* </juvo-tab-menu>
*
* <!-- Tab menu with icons and badges -->
* <juvo-tab-menu
* [items]="[
* { id: 'overview', label: 'Overview', icon: '📊' },
* { id: 'users', label: 'Users', icon: '👥', badge: '12' },
* { id: 'settings', label: 'Settings', icon: '⚙️', disabled: true }
* ]"
* [activeItemId]="currentTab"
* (tabChange)="handleTabChange($event)">
* </juvo-tab-menu>
* ```
*
* @selector juvo-tab-menu
* @since 2.1.0
* @author Juvo Rafa Team
*/
export declare class JuvoTabMenuComponent {
/** Array of tab menu items */
items: TabMenuItem[];
/** ID of the currently active tab */
activeItemId?: string;
/** Tab menu style variant @default "line" */
variant: 'line' | 'pills' | 'cards';
/** Tab menu size @default "medium" */
size: 'small' | 'medium' | 'large';
/** Whether tabs are scrollable on overflow @default false */
scrollable: boolean;
/** Emitted when a tab is clicked */
tabChange: EventEmitter<TabMenuItem>;
/** Emitted when active tab changes */
activeItemChange: EventEmitter<TabMenuItem>;
/**
* Gets CSS classes for the tab menu container
* @returns Combined CSS classes
*/
get containerClasses(): string;
/**
* Gets CSS classes for a specific tab item
* @param item Tab menu item
* @returns Combined CSS classes
*/
getTabClasses(item: TabMenuItem): string;
/**
* Handles tab click
* @param item Clicked tab item
*/
onTabClick(item: TabMenuItem): void;
/**
* Checks if a tab is active
* @param item Tab menu item
* @returns Whether the tab is active
*/
isActive(item: TabMenuItem): boolean;
static ɵfac: i0.ɵɵFactoryDeclaration<JuvoTabMenuComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<JuvoTabMenuComponent, "juvo-tab-menu", never, { "items": { "alias": "items"; "required": false; }; "activeItemId": { "alias": "activeItemId"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "scrollable": { "alias": "scrollable"; "required": false; }; }, { "tabChange": "tabChange"; "activeItemChange": "activeItemChange"; }, never, never, true, never>;
}