valtech-components 2.0.691 → 2.0.692

package/lib/components/molecules/prompter/types.d.ts

@@ -0,0 +1,25 @@
+import { Color } from '@ionic/core';
+import { HrefMetadata } from '../../atoms/href/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Props for val-prompter component.
+ *
+ * @property teleprompter - Whether to use teleprompter style.
+ * @property bordered - Whether the box has a border.
+ * @property color - The background color of the box (optional).
+ * @property content - The main text content.
+ * @property size - The size of the text and box ('small' | 'medium' | 'large' | 'xlarge').
+ * @property buttons - Array of button configurations (optional).
+ * @property hrefs - Array of link configurations (optional).
+ * @property padding - Custom padding for the box (optional).
+ */
+export type PrompterMetadata = {
+    teleprompter: boolean;
+    bordered: boolean;
+    color?: Color;
+    content: string;
+    size: 'small' | 'medium' | 'large' | 'xlarge';
+    buttons?: ButtonMetadata[];
+    hrefs?: HrefMetadata[];
+    padding?: string;
+};

package/lib/components/molecules/quote-box/quote-box.component.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+export interface QuoteBoxMetadata {
+    /** Contenido de la cita */
+    content: string;
+    /** Autor de la cita */
+    author?: string;
+    /** Fuente de la cita (libro, artículo, etc.) */
+    source?: string;
+    /** Tamaño del texto */
+    size?: 'small' | 'medium' | 'large' | 'xlarge';
+    /** Color de la cita */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+    /** Color del autor y fuente */
+    authorColor?: 'primary' | 'secondary' | 'tertiary' | 'success' | 'warning' | 'danger' | 'dark' | 'light' | 'medium';
+    /** Alineación del contenido */
+    alignment?: 'left' | 'center' | 'right';
+    /** Mostrar comillas decorativas */
+    showQuoteMark?: boolean;
+    /** Texto en negrita */
+    bold?: boolean;
+}
+export declare class QuoteBoxComponent {
+    props: QuoteBoxMetadata;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QuoteBoxComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QuoteBoxComponent, "quote-box", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/radio-input/radio-input.component.d.ts

@@ -0,0 +1,15 @@
+import { OnInit } from '@angular/core';
+import { InputMetadata } from '../../types';
+import * as i0 from "@angular/core";
+export declare class RadioInputComponent implements OnInit {
+    /**
+     * Input configuration object.
+     * @type {InputMetadata}
+     * @property control - The Angular FormControl for the radio input.
+     * @property options - The available options for the radio group. For i18n, translate names before passing.
+     */
+    props: InputMetadata;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RadioInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RadioInputComponent, "val-radio-input", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/raffle-status-card/raffle-status-card.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter } from '@angular/core';
+import { RaffleStatusCardMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class RaffleStatusCardComponent {
+    props: RaffleStatusCardMetadata;
+    primaryActionClick: EventEmitter<void>;
+    secondaryActionClick: EventEmitter<void>;
+    get isActiveOrUpcoming(): boolean;
+    get progressPercentage(): number;
+    getStatusLabel(): string;
+    getStatusColor(): string;
+    getProgressColor(): string;
+    getTitle(): string;
+    getDescription(): string;
+    formatCurrency(amount: number): string;
+    formatDate(date: Date | string): string;
+    onPrimaryAction(): void;
+    onSecondaryAction(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RaffleStatusCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RaffleStatusCardComponent, "val-raffle-status-card", never, { "props": { "alias": "props"; "required": false; }; }, { "primaryActionClick": "primaryActionClick"; "secondaryActionClick": "secondaryActionClick"; }, never, never, true, never>;
+}

package/lib/components/molecules/raffle-status-card/types.d.ts

@@ -0,0 +1,108 @@
+import { Color } from '@ionic/core';
+import { ImageMetadata } from '../../atoms/image/types';
+import { ButtonMetadata } from '../../types';
+/**
+ * Raffle status type.
+ */
+export type RaffleStatus = 'upcoming' | 'active' | 'sold_out' | 'drawing' | 'completed' | 'cancelled';
+/**
+ * Raffle progress information.
+ */
+export interface RaffleProgress {
+    /** Total tickets available */
+    totalTickets: number;
+    /** Tickets sold */
+    soldTickets: number;
+    /** Tickets reserved (not paid) */
+    reservedTickets?: number;
+    /** Goal amount (monetary) */
+    goalAmount?: number;
+    /** Current amount raised */
+    currentAmount?: number;
+}
+/**
+ * Prize information for the raffle.
+ */
+export interface RafflePrize {
+    /** Prize name */
+    name: string;
+    /** Prize description */
+    description?: string;
+    /** Prize image */
+    image?: ImageMetadata;
+    /** Prize value */
+    value?: number;
+    /** Currency for value */
+    currency?: string;
+}
+/**
+ * Metadata for the raffle status card component.
+ */
+export interface RaffleStatusCardMetadata {
+    /** Raffle title */
+    title: string;
+    /** Raffle description */
+    description?: string;
+    /** Current status */
+    status: RaffleStatus;
+    /** Progress information */
+    progress?: RaffleProgress;
+    /** Prize information */
+    prize?: RafflePrize;
+    /** Cover image */
+    coverImage?: ImageMetadata;
+    /** Raffle start date */
+    startDate?: Date | string;
+    /** Raffle end date / draw date */
+    endDate?: Date | string;
+    /** Show countdown to end date */
+    showCountdown?: boolean;
+    /** Ticket price */
+    ticketPrice?: number;
+    /** Currency */
+    currency?: string;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Card variant */
+    variant?: 'default' | 'featured' | 'compact' | 'horizontal';
+    /** Size */
+    size?: 'small' | 'medium' | 'large';
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Show ticket stats */
+    showTicketStats?: boolean;
+    /** Show price */
+    showPrice?: boolean;
+    /** Show dates */
+    showDates?: boolean;
+    /** Show status badge */
+    showStatusBadge?: boolean;
+    /** Primary action button */
+    primaryAction?: ButtonMetadata;
+    /** Secondary action button */
+    secondaryAction?: ButtonMetadata;
+    /** Custom CSS class */
+    cssClass?: string;
+    /** Status color override */
+    statusColor?: Color;
+    /** Beneficiary name */
+    beneficiary?: string;
+    /** Beneficiary logo/image */
+    beneficiaryImage?: ImageMetadata;
+    /** Custom status labels */
+    statusLabels?: Partial<Record<RaffleStatus, string>>;
+    /** Content class for reactive content */
+    contentClass?: string;
+    /** Content key for title */
+    titleContentKey?: string;
+    /** Content key for description */
+    descriptionContentKey?: string;
+}
+/**
+ * Default status labels.
+ */
+export declare const DEFAULT_STATUS_LABELS: Record<RaffleStatus, string>;
+/**
+ * Default status colors.
+ */
+export declare const DEFAULT_STATUS_COLORS: Record<RaffleStatus, Color>;

package/lib/components/molecules/range-input/range-input.component.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '@angular/core';
+import { RangeInputMetadata, RangeValue } from './types';
+import * as i0 from "@angular/core";
+export declare class RangeInputComponent {
+    /**
+     * Input configuration object.
+     * @type {RangeInputMetadata}
+     */
+    props: RangeInputMetadata;
+    /**
+     * Emits the new value when the range changes.
+     */
+    rangeChange: EventEmitter<number | RangeValue>;
+    states: {
+        ENABLED: "ENABLED";
+        DISABLED: "DISABLED";
+        WORKING: "WORKING";
+        ERROR: "ERROR";
+    };
+    defaultPinFormatter: (value: number) => string;
+    get displayLabel(): string;
+    onRangeChange(event: CustomEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RangeInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RangeInputComponent, "val-range-input", never, { "props": { "alias": "props"; "required": false; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/range-input/types.d.ts

@@ -0,0 +1,59 @@
+import { FormControl } from '@angular/forms';
+import { Color } from '@ionic/core';
+import { ComponentState } from '../../types';
+/**
+ * Metadata for the range/slider input component.
+ */
+export interface RangeInputMetadata {
+    /** Associated form control for single value */
+    control: FormControl<number>;
+    /** Unique token for the input */
+    token?: string;
+    /** Display label */
+    label?: string;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Show pin with current value */
+    pin?: boolean;
+    /** Pin format function */
+    pinFormatter?: (value: number) => string;
+    /** Show tick marks */
+    ticks?: boolean;
+    /** Snap to ticks */
+    snaps?: boolean;
+    /** Range color */
+    color?: Color;
+    /** Component state */
+    state?: ComponentState;
+    /** Enable/disable range */
+    disabled?: boolean;
+    /** Debounce time for ionChange event (ms) */
+    debounce?: number;
+    /** Dual knobs for range selection */
+    dualKnobs?: boolean;
+    /** Control for lower bound (only with dualKnobs) */
+    lowerControl?: FormControl<number>;
+    /** Control for upper bound (only with dualKnobs) */
+    upperControl?: FormControl<number>;
+    /** Show start label (min value or custom) */
+    startLabel?: string;
+    /** Show end label (max value or custom) */
+    endLabel?: string;
+    /** Reactive content key for label */
+    contentKey?: string;
+    /** Component class name for content lookup */
+    contentClass?: string;
+    /** Fallback text if contentKey is not found */
+    contentFallback?: string;
+}
+/**
+ * Value emitted by range component.
+ */
+export interface RangeValue {
+    lower?: number;
+    upper?: number;
+}

package/lib/components/molecules/rating/rating.component.d.ts

@@ -0,0 +1,23 @@
+import { OnChanges, OnInit, EventEmitter, SimpleChanges } from '@angular/core';
+import { RatingMetadata, RatingChangeEvent } from './types';
+import * as i0 from "@angular/core";
+export declare class RatingComponent implements OnInit, OnChanges {
+    private presets;
+    preset?: string;
+    props: Partial<RatingMetadata>;
+    resolvedProps: RatingMetadata;
+    ratingChange: EventEmitter<RatingChangeEvent>;
+    hoverValue: number | null;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    get displayValue(): number;
+    getStars(): number[];
+    getStarIcon(position: number): string;
+    getStarColor(position: number): string;
+    onStarClick(position: number): void;
+    onStarHover(position: number): void;
+    onStarLeave(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RatingComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RatingComponent, "val-rating", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "ratingChange": "ratingChange"; }, never, never, true, never>;
+}

package/lib/components/molecules/rating/types.d.ts

@@ -0,0 +1,41 @@
+import { Color } from '@ionic/core';
+/**
+ * Metadata for the rating component.
+ */
+export interface RatingMetadata {
+    /** Current rating value */
+    value: number;
+    /** Maximum rating value */
+    max?: number;
+    /** Icon name for filled state */
+    icon?: string;
+    /** Icon name for empty state */
+    iconEmpty?: string;
+    /** Icon name for half state */
+    iconHalf?: string;
+    /** Allow half values */
+    allowHalf?: boolean;
+    /** Readonly mode */
+    readonly?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Rating color */
+    color?: Color;
+    /** Empty icon color */
+    emptyColor?: Color;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show numeric value */
+    showValue?: boolean;
+    /** Unique token identifier */
+    token?: string;
+}
+/**
+ * Event emitted when rating changes.
+ */
+export interface RatingChangeEvent {
+    /** New rating value */
+    value: number;
+    /** Previous rating value */
+    previousValue: number;
+}

package/lib/components/molecules/recap-card/recap-card.component.d.ts

@@ -0,0 +1,36 @@
+import { RecapCardMetadata, RecapCardShape } from './types';
+import * as i0 from "@angular/core";
+/**
+ * val-recap-card
+ *
+ * A decorative card component with geometric shapes, title, and link.
+ * Useful for recap sections, feature highlights, or promotional content.
+ *
+ * @example
+ * <val-recap-card
+ *   [props]="{
+ *     title: { title: 'Feature Title', subtitle: 'Subtitle here' },
+ *     link: { text: 'Learn more', url: '/features' },
+ *     color: 'primary',
+ *     shapes: [
+ *       { color: '#ffffff33', style: { top: '-20px', right: '-20px', width: '100px', height: '100px' } }
+ *     ]
+ *   }"
+ * ></val-recap-card>
+ *
+ * @input props - Card configuration (title, link, shapes, color)
+ */
+export declare class RecapCardComponent {
+    /**
+     * Card configuration.
+     */
+    props: RecapCardMetadata;
+    /**
+     * Merges shape color with additional styles.
+     */
+    mergeShapeStyle(shape: RecapCardShape): {
+        [key: string]: string | number;
+    };
+    static ɵfac: i0.ɵɵFactoryDeclaration<RecapCardComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RecapCardComponent, "val-recap-card", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/components/molecules/recap-card/types.d.ts

@@ -0,0 +1,30 @@
+import { LinkMetadata } from '../link/types';
+import { TitleBlockMetada } from '../title-block/types';
+/**
+ * Configuration for a decorative shape within the recap card.
+ */
+export interface RecapCardShape {
+    /** Background color of the shape */
+    color: string;
+    /** Additional CSS styles (position, size, etc.) */
+    style?: {
+        [key: string]: string | number;
+    };
+}
+/**
+ * Configuration for the recap card component.
+ */
+export interface RecapCardMetadata {
+    /** Title block configuration */
+    title: TitleBlockMetada;
+    /** Link configuration */
+    link: LinkMetadata;
+    /** Decorative shapes to display behind content */
+    shapes?: RecapCardShape[];
+    /** Background color of the card (Ionic color) */
+    color?: string;
+    /** Minimum height of the card. Default: '400px' */
+    minHeight?: string;
+    /** Width of the card. Default: '280px' */
+    width?: string;
+}

package/lib/components/molecules/refresher/refresher.component.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter, TemplateRef } from '@angular/core';
+import { IonRefresher } from '@ionic/angular/standalone';
+import { RefresherMetadata, RefresherState, RefreshEvent, RefreshPullEvent } from './types';
+import * as i0 from "@angular/core";
+/**
+ * Componente de pull-to-refresh para movil y web.
+ *
+ * @example
+ * <!-- Uso basico -->
+ * <val-refresher
+ *   [props]="{
+ *     color: 'primary',
+ *     pullingText: 'Arrastra para actualizar',
+ *     refreshingText: 'Cargando...'
+ *   }"
+ *   (refresh)="onRefresh($event)"
+ * >
+ *   <ion-content>
+ *     <!-- Contenido scrolleable -->
+ *   </ion-content>
+ * </val-refresher>
+ *
+ * @example
+ * <!-- Con indicador personalizado -->
+ * <val-refresher [props]="{ color: 'primary' }" (refresh)="onRefresh($event)">
+ *   <ng-template #pullingIndicator let-progress="progress">
+ *     <div class="custom-indicator">
+ *       <ion-icon name="arrow-down" [style.transform]="'rotate(' + progress * 180 + 'deg)'"></ion-icon>
+ *     </div>
+ *   </ng-template>
+ *   <ion-content>...</ion-content>
+ * </val-refresher>
+ */
+export declare class RefresherComponent {
+    ionRefresher: IonRefresher;
+    /** Templates personalizados via content projection */
+    pullingIndicator?: TemplateRef<{
+        progress: number;
+    }>;
+    refreshingIndicator?: TemplateRef<void>;
+    completingIndicator?: TemplateRef<void>;
+    /** Configuracion del refresher */
+    props: RefresherMetadata;
+    /** Evento emitido cuando se activa el refresh */
+    refresh: EventEmitter<RefreshEvent>;
+    /** Evento de progreso durante el pull */
+    pullProgressChange: EventEmitter<RefreshPullEvent>;
+    /** Evento de cambio de estado */
+    stateChange: EventEmitter<RefresherState>;
+    private i18n;
+    /** Estado actual del refresher */
+    readonly state: import("@angular/core").WritableSignal<RefresherState>;
+    /** Progreso actual del pull (0-1) */
+    readonly pullProgress: import("@angular/core").WritableSignal<number>;
+    /** Get pulling text with i18n fallback */
+    getPullingText(): string;
+    /** Get refreshing text with i18n fallback */
+    getRefreshingText(): string;
+    /** Props combinados con defaults */
+    get mergedProps(): RefresherMetadata;
+    /** Si hay indicadores personalizados */
+    get hasCustomIndicator(): boolean;
+    /**
+     * Activa programaticamente el refresh.
+     */
+    triggerRefresh(): void;
+    /**
+     * Completa la operacion de refresh actual.
+     */
+    complete(): void;
+    /**
+     * Cancela la operacion de refresh actual.
+     */
+    cancel(): void;
+    /** Handler para evento ionRefresh */
+    onIonRefresh(event: CustomEvent): void;
+    /** Handler para evento ionPull */
+    onIonPull(event: CustomEvent): void;
+    /** Handler para evento ionStart */
+    onIonStart(): void;
+    private emitRefreshEvent;
+    static ɵfac: i0.ɵɵFactoryDeclaration<RefresherComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<RefresherComponent, "val-refresher", never, { "props": { "alias": "props"; "required": false; }; }, { "refresh": "refresh"; "pullProgressChange": "pullProgressChange"; "stateChange": "stateChange"; }, ["pullingIndicator", "refreshingIndicator", "completingIndicator"], ["*"], true, never>;
+}

package/lib/components/molecules/refresher/types.d.ts

@@ -0,0 +1,86 @@
+import { TemplateRef } from '@angular/core';
+import { Color } from '@ionic/core';
+/**
+ * Estado del componente refresher.
+ */
+export type RefresherState = 'idle' | 'pulling' | 'refreshing' | 'completing';
+/**
+ * Tipos de spinner disponibles.
+ */
+export type RefresherSpinnerType = 'circular' | 'crescent' | 'dots' | 'lines-sharp';
+/**
+ * Evento emitido cuando se activa el refresh.
+ */
+export interface RefreshEvent {
+    /** Llamar cuando la operacion de refresh completa */
+    complete: () => void;
+    /** Llamar para cancelar el refresh */
+    cancel: () => void;
+    /** Timestamp cuando inicio el refresh */
+    timestamp: Date;
+}
+/**
+ * Evento de progreso durante el gesto de pull.
+ */
+export interface RefreshPullEvent {
+    /** Valor de progreso entre 0 y 1 */
+    progress: number;
+    /** Si se ha alcanzado el umbral de pull */
+    thresholdReached: boolean;
+}
+/**
+ * Configuracion de indicador personalizado.
+ */
+export interface RefresherIndicatorConfig {
+    /** Template personalizado para estado pulling */
+    pullingTemplate?: TemplateRef<{
+        progress: number;
+    }>;
+    /** Template personalizado para estado refreshing */
+    refreshingTemplate?: TemplateRef<void>;
+    /** Template personalizado para estado completing */
+    completingTemplate?: TemplateRef<void>;
+}
+/**
+ * Metadata para el componente val-refresher.
+ */
+export interface RefresherMetadata {
+    /** Si el refresher esta deshabilitado */
+    disabled?: boolean;
+    /** Umbral de pull en pixels (default: 70) */
+    pullThreshold?: number;
+    /** Distancia maxima de pull en pixels (default: 200) */
+    pullMax?: number;
+    /** Factor de resistencia del pull (0-1, default: 0.5) */
+    pullFactor?: number;
+    /** Duracion de snap back en ms (default: 280) */
+    snapbackDuration?: number;
+    /** Duracion de cierre en ms (default: 280) */
+    closeDuration?: number;
+    /** Color del spinner */
+    color?: Color;
+    /** Tipo de spinner */
+    spinnerType?: RefresherSpinnerType;
+    /** Texto mostrado mientras se arrastra */
+    pullingText?: string;
+    /** Texto mostrado mientras se actualiza */
+    refreshingText?: string;
+    /** Configuracion de indicador personalizado */
+    indicatorConfig?: RefresherIndicatorConfig;
+    /** Habilitar feedback haptico en movil (default: true) */
+    hapticFeedback?: boolean;
+    /** Modo web - habilita pull-to-refresh en navegadores desktop */
+    webMode?: boolean;
+    /** Identificador unico */
+    token?: string;
+    /** Key de traduccion para texto pulling */
+    pullingTextKey?: string;
+    /** Key de traduccion para texto refreshing */
+    refreshingTextKey?: string;
+    /** Clase CSS adicional */
+    contentClass?: string;
+}
+/**
+ * Valores por defecto para el refresher.
+ */
+export declare const DEFAULT_REFRESHER_METADATA: Partial<RefresherMetadata>;

package/lib/components/molecules/searchbar/searchbar.component.d.ts

@@ -0,0 +1,43 @@
+import { EventEmitter, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { SearchbarMetadata } from './types';
+import * as i0 from "@angular/core";
+export declare class SearchbarComponent implements OnInit, OnChanges {
+    private presets;
+    private i18n;
+    /**
+     * Preset name to apply.
+     */
+    preset?: string;
+    /**
+     * Configuration object. Values here override preset values.
+     */
+    props: Partial<SearchbarMetadata>;
+    /**
+     * Resolved props after merging preset + explicit props.
+     */
+    resolvedProps: SearchbarMetadata;
+    /**
+     * Emits the search term on input.
+     */
+    filterEvent: EventEmitter<string>;
+    /**
+     * Emits when the searchbar gains focus.
+     */
+    focusEvent: EventEmitter<void>;
+    /**
+     * Emits when the searchbar loses focus.
+     */
+    blurEvent: EventEmitter<void>;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private resolveProps;
+    /** Get placeholder text */
+    getPlaceholder(): string;
+    /** Get cancel button text */
+    getCancelText(): string;
+    onSearch($event: any): void;
+    onFocus(): void;
+    onBlur(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SearchbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SearchbarComponent, "val-searchbar", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "filterEvent": "filterEvent"; "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; }, never, never, true, never>;
+}

package/lib/components/molecules/searchbar/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Configuration for val-searchbar component.
+ */
+export interface SearchbarMetadata {
+    /**
+     * Whether the searchbar is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Custom placeholder text.
+     * If not provided, uses i18n default ('search').
+     */
+    placeholder?: string;
+    /**
+     * Custom cancel button text.
+     * If not provided, uses i18n default ('cancel').
+     */
+    cancelText?: string;
+    /**
+     * Debounce time in milliseconds for search input.
+     * Default: 500
+     */
+    debounce?: number;
+    /**
+     * When to show the cancel button.
+     * Default: 'focus'
+     */
+    showCancelButton?: 'always' | 'focus' | 'never';
+    /**
+     * Mode for styling (iOS or MD).
+     */
+    mode?: 'ios' | 'md';
+}