@dropi/ui 0.1.18 → 0.1.20

package/dist/types/components/dropi-date-picker/dropi-date-picker.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-date-picker
+ * Calendar date picker with optional date range mode.
+ * Emits ISO date strings (YYYY-MM-DD).
+ */
+export declare class DropiDatePicker {
+    /** Selected date (ISO string, single mode) */
+    value: string;
+    /** Range start date (ISO string, range mode) */
+    startDate: string;
+    /** Range end date (ISO string, range mode) */
+    endDate: string;
+    /** Enable range selection */
+    range: boolean;
+    /** Min selectable date (ISO string) */
+    minDate: string;
+    /** Max selectable date (ISO string) */
+    maxDate: string;
+    /** Label */
+    label: string;
+    /** Placeholder */
+    placeholder: string;
+    /** Disabled */
+    disabled: boolean;
+    private open;
+    private viewYear;
+    private viewMonth;
+    private hoverDate;
+    /** Emitted when single date selected. e.detail = ISO date */
+    dropiDateChange: EventEmitter<string>;
+    /** Emitted when range selected. e.detail = { start, end } */
+    dropiRangeChange: EventEmitter<{
+        start: string;
+        end: string;
+    }>;
+    private get displayValue();
+    private open_;
+    private prevMonth;
+    private nextMonth;
+    private toISO;
+    private isDisabled;
+    private isInRange;
+    private selectDate;
+    private buildDays;
+    render(): any;
+}

package/dist/types/components/dropi-date-picker-range/dropi-date-picker-range.d.ts

@@ -0,0 +1,50 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DateRange {
+    start: string;
+    end: string;
+}
+/**
+ * @component dropi-date-picker-range
+ * Date range picker with shortcut buttons (Today, Last 7/15/30/90 days).
+ *
+ * @example
+ * <dropi-date-picker-range show-label></dropi-date-picker-range>
+ */
+export declare class DropiDatePickerRange {
+    /** Start date (YYYY-MM-DD) */
+    startDate: string;
+    /** End date (YYYY-MM-DD) */
+    endDate: string;
+    /** Show "Rango de fechas" label */
+    showLabel: boolean;
+    /** Input placeholder */
+    placeholder: string;
+    /** Show loading skeleton */
+    loading: boolean;
+    /** Max allowed range in days (0 = unlimited) */
+    maxDaysRange: number;
+    /** Hide "Hoy" shortcut */
+    hideTodayRangeShortcut: boolean;
+    /** Emitted when start date changes */
+    dropiStartDateChange: EventEmitter<string>;
+    /** Emitted when end date changes */
+    dropiEndDateChange: EventEmitter<string>;
+    /** Emitted with full range when both dates are set */
+    dropiRangeChange: EventEmitter<DateRange>;
+    private start;
+    private end;
+    private activeRange;
+    private showWarning;
+    onStartPropChange(val: string): void;
+    onEndPropChange(val: string): void;
+    componentWillLoad(): void;
+    private get today();
+    private daysAgo;
+    private get shortcuts();
+    private selectShortcut;
+    private onStartChange;
+    private onEndChange;
+    private checkRange;
+    private emit;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-drawer
+ * Slide-in panel from any side of the screen with backdrop.
+ * Supports header title, close button, and slotted content/footer.
+ */
+export declare class DropiDrawer {
+    /** Controls visibility */
+    open: boolean;
+    /** Side from which the drawer slides in */
+    position: 'left' | 'right' | 'top' | 'bottom';
+    /** Drawer title */
+    drawerTitle: string;
+    /** Width (for left/right drawers) */
+    width: string;
+    /** Height (for top/bottom drawers) */
+    height: string;
+    /** Close on backdrop click */
+    closeOnBackdrop: boolean;
+    /** Emitted when drawer closes */
+    dropiClose: EventEmitter<void>;
+    openChanged(val: boolean): void;
+    private close;
+    render(): any;
+}

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

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface DropdownOption {
+    [key: string]: any;
+}
+/**
+ * @component dropi-dropdown
+ * Scrollable list with checkboxes for multi-selection.
+ * Pass options as an array (JS) or JSON string.
+ */
+export declare class DropiDropdown {
+    /** Options array or JSON string */
+    options: DropdownOption[] | string;
+    /** Property name to display as the option label */
+    valueModel: string;
+    /** Property name to use as the option image/avatar URL */
+    imageModel: string;
+    /** Max height of the list container (CSS value) */
+    height: string;
+    private selected;
+    private parsedOptions;
+    /** Emitted when selection changes. e.detail = selected items array */
+    dropiChange: EventEmitter<DropdownOption[]>;
+    optionsChanged(val: DropdownOption[] | string): void;
+    componentWillLoad(): void;
+    private isSelected;
+    private toggleOption;
+    render(): any;
+}

package/dist/types/components/dropi-empty-state/dropi-empty-state.d.ts

@@ -14,8 +14,12 @@ export declare class DropiEmptyState {
     imageAlt: string;
     /** Primary action button label (empty = hidden) */
     actionLabel: string;
+    /** State of the illustration (default, loading, sorry, love, success, error) */
+    iconState: 'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info';
     /** Secondary action button label (empty = hidden) */
     secondaryLabel: string;
+    /** Severity for the action buttons */
+    actionSeverity: 'primary' | 'secondary' | 'tertiary';
     /** Emitted when primary action button is clicked */
     dropiAction: EventEmitter<void>;
     /** Emitted when secondary action button is clicked */

package/dist/types/components/dropi-favorite-button/dropi-favorite-button.d.ts

@@ -0,0 +1,14 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-favorite-button
+ * Heart toggle button for marking items as favorite.
+ */
+export declare class DropiFavoriteButton {
+    /** Whether the item is currently marked as favorite */
+    isFavorite: boolean;
+    /** Emitted when toggled. e.detail = new favorite state */
+    dropiToggleFavorite: EventEmitter<boolean>;
+    private hovered;
+    private toggle;
+    render(): any;
+}

package/dist/types/components/dropi-file-upload/dropi-file-upload.d.ts

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface UploadedFile {
+    name: string;
+    size: number;
+    type: string;
+    dataUrl?: string;
+}
+/**
+ * @component dropi-file-upload
+ * Drag-and-drop file upload zone with file type/size validation.
+ * Emits selected files as UploadedFile objects.
+ */
+export declare class DropiFileUpload {
+    /** Accepted MIME types (comma-separated, e.g. "image/*,application/pdf") */
+    accept: string;
+    /** Allow multiple file selection */
+    multiple: boolean;
+    /** Max file size in MB */
+    maxSizeMb: number;
+    /** Disabled state */
+    disabled: boolean;
+    /** Label text above zone */
+    label: string;
+    /** Helper text inside drop zone */
+    helperText: string;
+    private dragging;
+    private errors;
+    private inputRef;
+    /** Emitted with array of UploadedFile when files are selected/dropped */
+    dropiFilesSelected: EventEmitter<UploadedFile[]>;
+    /** Emitted when a file fails validation. e.detail = error message */
+    dropiFileError: EventEmitter<string>;
+    private readFiles;
+    private handleDrop;
+    private handleInputChange;
+    render(): any;
+}

package/dist/types/components/dropi-file-upload-progress-bar/dropi-file-upload-progress-bar.d.ts

@@ -0,0 +1,25 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-file-upload-progress-bar
+ * Shows upload progress for a single file with name, size, progress bar, and status.
+ */
+export declare class DropiFileUploadProgressBar {
+    /** File name */
+    fileName: string;
+    /** File size label (e.g. "1.2 MB") */
+    fileSize: string;
+    /** Upload progress 0–100 */
+    progress: number;
+    /** Current status */
+    status: 'uploading' | 'success' | 'error' | 'paused';
+    /** Error message shown when status is "error" */
+    errorMessage: string;
+    /** Show cancel/remove button */
+    showCancel: boolean;
+    /** Emitted when cancel/remove clicked */
+    dropiCancel: EventEmitter<void>;
+    private get clampedProgress();
+    private get iconName();
+    private get iconColor();
+    render(): any;
+}

package/dist/types/components/dropi-ilustration-icon/dropi-ilustration-icon.d.ts

@@ -0,0 +1,24 @@
+export type IlustrationType = 'dropi' | 'mb' | 'insignia';
+export type IlustrationState = 'success' | 'error' | 'warning' | 'info' | 'default' | 'loading' | 'sorry' | 'love';
+export type InsigniaState = 'verified' | 'premium' | 'exclusive';
+/**
+ * @component dropi-ilustration-icon
+ * Illustration icon with three modes: dropi (SVG asset), mb (colored circle), insignia (badge).
+ *
+ * @example
+ * <dropi-ilustration-icon type="dropi" state="success"></dropi-ilustration-icon>
+ * <dropi-ilustration-icon type="insignia" state-insignia="premium" tag-product></dropi-ilustration-icon>
+ */
+export declare class DropiIlustrationIcon {
+    /** Display mode */
+    type: IlustrationType;
+    /** State for dropi/mb types */
+    state: IlustrationState;
+    /** Insignia variant */
+    stateInsignia: InsigniaState;
+    /** Show insignia as tag with label (for product cards) */
+    tagProduct: boolean;
+    private readonly insigniaIcons;
+    private getIconName;
+    render(): any;
+}

package/dist/types/components/dropi-image-miniature/dropi-image-miniature.d.ts

@@ -0,0 +1,23 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-image-miniature
+ * Grid of image thumbnails with zoom-on-hover overlay trigger.
+ */
+export declare class DropiImageMiniature {
+    /** Optional label above the grid */
+    label: string;
+    /** Array of image URLs. Pass as JSON string or array */
+    images: string[] | string;
+    /** Thumbnail width (CSS value) */
+    width: string;
+    /** Thumbnail height (CSS value) */
+    height: string;
+    /** Emitted when a thumbnail is clicked. e.detail = { images, index } */
+    dropiImageClick: EventEmitter<{
+        images: string[];
+        index: number;
+    }>;
+    private get parsedImages();
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-image-overlay/dropi-image-overlay.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-image-overlay
+ * Full-screen image lightbox with prev/next navigation and thumbnails.
+ */
+export declare class DropiImageOverlay {
+    /** Whether the overlay is visible */
+    visible: boolean;
+    /** Images array or JSON string */
+    images: string[] | string;
+    /** Initially active image index */
+    activeIndex: number;
+    private current;
+    private parsedImages;
+    /** Emitted when overlay closes */
+    dropiClose: EventEmitter<void>;
+    imagesChanged(val: string[] | string): void;
+    indexChanged(val: number): void;
+    visibleChanged(val: boolean): void;
+    componentWillLoad(): void;
+    private close;
+    private prev;
+    private next;
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-languages-selector/dropi-languages-selector.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface LanguageOption {
+    code: string;
+    label: string;
+    /** ISO country code for the flag (e.g. "CO", "US") */
+    flag: string;
+}
+/**
+ * @component dropi-languages-selector
+ * Dropdown to switch between languages, showing country flag + label.
+ *
+ * @example
+ * <dropi-languages-selector
+ *   languages='[{"code":"es","label":"Español","flag":"CO"},{"code":"en","label":"English","flag":"US"}]'
+ * ></dropi-languages-selector>
+ */
+export declare class DropiLanguagesSelector {
+    /** Language options (array or JSON string) */
+    languages: LanguageOption[] | string;
+    /** Currently selected language (LanguageOption or JSON string) */
+    selectedLang: LanguageOption | string | null;
+    dropiLanguageChange: EventEmitter<LanguageOption>;
+    private isOpen;
+    private parsedLanguages;
+    private currentLang;
+    languagesChanged(val: LanguageOption[] | string): void;
+    selectedLangChanged(val: LanguageOption | string | null): void;
+    componentWillLoad(): void;
+    private select;
+    render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @component dropi-logo
+ * Displays the Dropi brand logo with size variants.
+ */
+export declare class DropiLogo {
+    /** Logo image URL */
+    urlLogo: string;
+    /** Size variant */
+    size: 'small' | 'large';
+    /** Theme (reserved for future use) */
+    theme: 'dark' | 'light';
+    private handleError;
+    render(): any;
+}

package/dist/types/components/dropi-lottie-loader/dropi-lottie-loader.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @component dropi-lottie-loader
+ * Full-screen or inline loading overlay with a Lottie animation.
+ */
+export declare class DropiLottieLoader {
+    /** Show or hide the loader */
+    visible: boolean;
+    /** Path to the Lottie JSON animation file */
+    loadingAnimation: string;
+    /** Title shown below the animation */
+    loaderTitle: string;
+    /** Descriptive message below the title */
+    message: string;
+    render(): any;
+}

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-otp-send-code/dropi-otp-send-code.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-otp-send-code
+ * 6-digit OTP input with countdown timer and resend capability.
+ */
+export declare class DropiOtpSendCode {
+    /** Delivery method label */
+    engine: 'email' | 'sms' | '2fa';
+    /** Contact info (email/phone to show in label) */
+    labelContact: string;
+    /** Show contact label */
+    showLabelContact: boolean;
+    /** Error message to display */
+    errorMessage: string;
+    private digits;
+    private digitStates;
+    private countdown;
+    private canResend;
+    private error;
+    private inputs;
+    private timer;
+    /** Emitted when all 6 digits are entered. e.detail = the complete code string */
+    dropiCodeCompleted: EventEmitter<string>;
+    /** Emitted when resend is requested */
+    dropiResend: EventEmitter<void>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private startCountdown;
+    private handleInput;
+    private handleKeyDown;
+    private handlePaste;
+    render(): any;
+}

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

@@ -12,6 +12,8 @@ export declare class DropiPaginator {
     page: number;
     /** Max page buttons to show at once */
     maxPages: number;
+    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
+    noLabels: boolean;
     /** Whether to show the items-per-page selector */
     showPageSizeSelector: boolean;
     /** Options for items per page */

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-radio-selection-list/dropi-radio-selection-list.d.ts

@@ -0,0 +1,34 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface RadioOption {
+    id: string | number;
+    name: string;
+    description?: string;
+    icon?: string;
+    [key: string]: any;
+}
+/**
+ * @component dropi-radio-selection-list
+ * List of radio button options with optional search filter.
+ */
+export declare class DropiRadioSelectionList {
+    /** Options array or JSON string */
+    options: RadioOption[] | string;
+    /** Selected option id */
+    selectedOption: string | number;
+    /** Show search box */
+    showFilter: boolean;
+    /** Search placeholder */
+    filterPlaceholder: string;
+    /** Show description below name */
+    typeLayout: 'description' | 'default';
+    private filterText;
+    private parsedOptions;
+    /** Emitted on selection change. e.detail = selected option id */
+    dropiChange: EventEmitter<string | number>;
+    /** Emitted on search. e.detail = search text */
+    dropiSearch: EventEmitter<string>;
+    optionsChanged(val: RadioOption[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    render(): any;
+}

package/dist/types/components/dropi-read-more/dropi-read-more.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @component dropi-read-more
+ * Truncates text to a word limit with an expandable "Ver más / Ver menos" toggle.
+ */
+export declare class DropiReadMore {
+    /** Full text to display */
+    text: string;
+    /** Maximum number of words before truncating */
+    maxWords: number;
+    /** Allow collapsing back after expanding */
+    showSeeLess: boolean;
+    private expanded;
+    private get words();
+    private get needsTruncation();
+    private get displayText();
+    render(): any;
+}

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

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface SearchOption {
+    [key: string]: any;
+}
+/**
+ * @component dropi-search
+ * Text search input with optional dropdown results list.
+ * Supports single and multi-select, keyboard navigation, and clear button.
+ */
+export declare class DropiSearch {
+    /** Placeholder text */
+    placeholder: string;
+    /** Controlled input value */
+    value: string;
+    /** Max character length */
+    maxlength: number;
+    /** Show clear (×) button when input has text */
+    showClear: boolean;
+    /** Data source to filter. Pass as array or JSON string */
+    options: SearchOption[] | string;
+    /** Property name to display and search */
+    labelKey: string;
+    /** Allow multiple selection */
+    multiSelect: boolean;
+    /** Max height of dropdown (CSS value) */
+    dropdownHeight: string;
+    /** Label shown above the input */
+    label: string;
+    private open;
+    private selected;
+    private parsedOptions;
+    /** Emitted on input change. e.detail = current text */
+    dropiInput: EventEmitter<string>;
+    /** Emitted on blur */
+    dropiBlur: EventEmitter<void>;
+    /** Emitted when Enter is pressed. e.detail = current text */
+    dropiKeyEnter: EventEmitter<string>;
+    /** Emitted when clear button clicked */
+    dropiClear: EventEmitter<void>;
+    /** Emitted when selection changes. e.detail = selected items */
+    dropiChange: EventEmitter<SearchOption[]>;
+    optionsChanged(val: SearchOption[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private handleInput;
+    private handleKeyDown;
+    private handleClear;
+    private isSelected;
+    private selectOption;
+    render(): any;
+}