@dropi/ui 0.1.19 → 0.1.20

package/dist/types/components/dropi-media-player/dropi-media-player.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-media-player
+ * HTML5 audio/video player with custom controls: play/pause, seek bar,
+ * volume, mute, duration display, and fullscreen (video only).
+ */
+export declare class DropiMediaPlayer {
+    el: HTMLElement;
+    /** Media source URL */
+    src: string;
+    /** "audio" or "video" */
+    mediaType: 'audio' | 'video';
+    /** Poster image (video only) */
+    poster: string;
+    /** Autoplay */
+    autoplay: boolean;
+    /** Loop */
+    loop: boolean;
+    /** Initial volume 0–1 */
+    initialVolume: number;
+    /** Title shown above controls */
+    mediaTitle: string;
+    private playing;
+    private currentTime;
+    private duration;
+    private volume;
+    private muted;
+    private loading;
+    private mediaEl;
+    /** Emitted when playback starts/pauses. e.detail = playing */
+    dropiPlay: EventEmitter<boolean>;
+    /** Emitted when media ends */
+    dropiEnded: EventEmitter<void>;
+    componentDidLoad(): void;
+    private togglePlay;
+    private handleTimeUpdate;
+    private handleLoadedMetadata;
+    private handleSeek;
+    private handleVolume;
+    private toggleMute;
+    private handleFullscreen;
+    private formatTime;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface NavItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string | number;
+    href?: string;
+}
+/**
+ * @component dropi-navbar
+ * Top navigation bar with logo, nav items, notification bell, and user avatar.
+ */
+export declare class DropiNavbar {
+    /** Logo URL */
+    logoUrl: string;
+    /** Logo alt */
+    logoAlt: string;
+    /** Navigation items (array or JSON string) */
+    items: NavItem[] | string;
+    /** Active item ID */
+    activeId: string;
+    /** User name */
+    userName: string;
+    /** User avatar URL */
+    userAvatar: string;
+    /** Notification count (0 = no badge) */
+    notifications: number;
+    /** Show menu toggle (mobile) */
+    showMenuToggle: boolean;
+    /** Emitted when a nav item is clicked. e.detail = item id */
+    dropiNavItemClick: EventEmitter<string>;
+    /** Emitted when notification bell is clicked */
+    dropiNotificationsClick: EventEmitter<void>;
+    /** Emitted when avatar/user is clicked */
+    dropiUserClick: EventEmitter<void>;
+    /** Emitted when mobile menu toggle clicked */
+    dropiMenuToggle: EventEmitter<void>;
+    private get parsedItems();
+    render(): any;
+}

package/dist/types/components/dropi-phone-input/dropi-phone-input.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-phone-input
+ * Phone number input with country code selector.
+ * Validates max length per country and emits changes.
+ */
+export declare class DropiPhoneInput {
+    /** Initial country dial code (e.g. "+57") */
+    codArea: string;
+    /** Phone number value */
+    value: string;
+    /** Input placeholder */
+    placeholder: string;
+    /** Disabled state */
+    disabled: boolean;
+    /** Show error state */
+    isValid: boolean;
+    /** Error message */
+    errorMessage: string;
+    /** Label */
+    label: string;
+    private open;
+    private search;
+    /** Emitted when country dial code changes. e.detail = dial code string */
+    dropiCodeChange: EventEmitter<string>;
+    /** Emitted when phone number changes. e.detail = phone number string */
+    dropiPhoneChange: EventEmitter<string>;
+    codAreaChanged(): void;
+    private get selectedCountry();
+    private get filtered();
+    private selectCountry;
+    private handleInput;
+    render(): any;
+}

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-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-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;
+}