@dropi/ui 0.1.18 → 0.1.20

package/dist/types/components/dropi-sidebar/dropi-sidebar.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    children?: SidebarItem[];
+}
+/**
+ * @component dropi-sidebar
+ * Collapsible vertical sidebar navigation with icon support and nested items.
+ */
+export declare class DropiSidebar {
+    /** Navigation items (array or JSON string) */
+    items: SidebarItem[] | string;
+    /** Active item ID */
+    activeId: string;
+    /** Collapsed state (icon-only) */
+    collapsed: boolean;
+    /** Show collapse toggle button */
+    showToggle: boolean;
+    /** Logo URL (shown at top) */
+    logoUrl: string;
+    /** Sidebar width when expanded */
+    width: string;
+    private expandedIds;
+    /** Emitted when an item is clicked. e.detail = item id */
+    dropiSidebarItemClick: EventEmitter<string>;
+    /** Emitted when collapse state changes. e.detail = collapsed */
+    dropiCollapse: EventEmitter<boolean>;
+    private get parsedItems();
+    private toggleExpand;
+    private renderItem;
+    render(): any;
+}

package/dist/types/components/dropi-simple-stepper/dropi-simple-stepper.d.ts

@@ -0,0 +1,20 @@
+export type StepperType = 'point' | 'number';
+export type FlowMode = 'Simultaneous' | 'Sequential';
+/**
+ * @component dropi-simple-stepper
+ * Compact horizontal stepper using dots or numbers.
+ */
+export declare class DropiSimpleStepper {
+    /** Total steps */
+    stepsCount: number;
+    /** Circle content: 'point' (dot) | 'number' */
+    typeStep: StepperType;
+    /** Current active step (1-based) */
+    currentStep: number;
+    /** Labels shown below each step. Pass as JSON string or array */
+    labelStepper: string[] | string;
+    /** Flow mode (visual only) */
+    flowMode: FlowMode;
+    private get parsedLabels();
+    render(): any;
+}

package/dist/types/components/dropi-steps/dropi-steps.d.ts

@@ -0,0 +1,21 @@
+export interface StepLabel {
+    title?: string;
+    description?: string;
+}
+/**
+ * @component dropi-steps
+ * Horizontal stepper showing step progress with number/title/description.
+ */
+export declare class DropiSteps {
+    /** Total number of steps */
+    stepsCount: number;
+    /** Show step number inside the circle */
+    showNumberOfStep: boolean;
+    /** Active/current step index (1-based) */
+    currentStep: number;
+    /** Labels for each step. Pass as JSON string or array */
+    stepLabels: StepLabel[] | string;
+    private get parsedLabels();
+    private stepState;
+    render(): any;
+}

package/dist/types/components/dropi-table/dropi-table.d.ts

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+}
+export interface TableRow {
+    [key: string]: any;
+}
+export type SortDir = 'asc' | 'desc' | null;
+/**
+ * @component dropi-table
+ * Data table with sortable columns, row selection, and empty state.
+ * Pass columns and rows as JSON strings or arrays.
+ */
+export declare class DropiTable {
+    /** Column definitions (array or JSON string) */
+    columns: TableColumn[] | string;
+    /** Row data (array or JSON string) */
+    rows: TableRow[] | string;
+    /** Enable row selection (checkboxes) */
+    selectable: boolean;
+    /** Show loading skeleton */
+    loading: boolean;
+    /** Text shown when no rows */
+    emptyMessage: string;
+    /** Stripe alternate rows */
+    striped: boolean;
+    private parsedColumns;
+    private parsedRows;
+    private sortKey;
+    private sortDir;
+    private selectedKeys;
+    /** Emitted when sort changes. e.detail = { key, dir } */
+    dropiSort: EventEmitter<{
+        key: string;
+        dir: SortDir;
+    }>;
+    /** Emitted when selection changes. e.detail = selected row indices */
+    dropiSelection: EventEmitter<number[]>;
+    /** Emitted when a row is clicked. e.detail = { row, index } */
+    dropiRowClick: EventEmitter<{
+        row: TableRow;
+        index: number;
+    }>;
+    columnsChanged(val: TableColumn[] | string): void;
+    rowsChanged(val: TableRow[] | string): void;
+    componentWillLoad(): void;
+    private get sortedRows();
+    private handleSort;
+    private toggleRow;
+    private toggleAll;
+    private sortIcon;
+    render(): any;
+}

package/dist/types/components/dropi-tag-type-product/dropi-tag-type-product.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @component dropi-tag-type-product
+ * Tag badge showing the product variation type.
+ */
+export declare class DropiTagTypeProduct {
+    /** Label text. Default: VARIABLE */
+    label: string;
+    render(): any;
+}

package/dist/types/components/dropi-time-line/dropi-time-line.d.ts

@@ -0,0 +1,18 @@
+export type TimelineStepStatus = 'pending' | 'active' | 'done';
+export interface TimelineStep {
+    status: TimelineStepStatus;
+    label: string;
+    icon?: string;
+    id?: string;
+    subtitle?: string;
+}
+/**
+ * @component dropi-time-line
+ * Vertical timeline showing ordered steps with status indicators.
+ */
+export declare class DropiTimeLine {
+    /** Array of timeline steps. Pass as JSON string or array */
+    steps: TimelineStep[] | string;
+    private get parsedSteps();
+    render(): any;
+}

package/dist/types/components/dropi-vertical-steps/dropi-vertical-steps.d.ts

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface VerticalStep {
+    label?: string;
+    state?: 'pending' | 'current' | 'completed';
+}
+/**
+ * @component dropi-vertical-steps
+ * Vertical step-by-step progress indicator with optional click navigation.
+ */
+export declare class DropiVerticalSteps {
+    /** Array of steps. Pass as JSON string or array */
+    steps: VerticalStep[] | string;
+    /** Currently active step (1-based) */
+    currentStep: number;
+    /** Allow clicking completed steps to navigate back */
+    clickable: boolean;
+    /** Show check icon inside completed step circles */
+    showCheckIcon: boolean;
+    /** Emitted when a step is clicked. e.detail = step number (1-based) */
+    dropiStepClick: EventEmitter<number>;
+    private get parsedSteps();
+    private resolveState;
+    render(): any;
+}

package/dist/types/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @component dropi-youtube-lazy-video
+ * Lazy-loads a YouTube video. Shows thumbnail until user clicks play.
+ *
+ * @example
+ * <dropi-youtube-lazy-video video-id="dQw4w9WgXcQ" video-title="Never Gonna Give You Up"></dropi-youtube-lazy-video>
+ */
+export declare class DropiYoutubeLazyVideo {
+    /** YouTube video ID */
+    videoId: string;
+    /** Local asset thumbnail path (without /assets/images/ prefix and .png extension) */
+    thumbnailSrc: string;
+    /** Video title for iframe accessibility */
+    videoTitle: string;
+    private isPlaying;
+    private get thumbnail();
+    private get videoUrl();
+    render(): any;
+}