@dropi/ui 0.1.19 → 0.1.20

package/dist/types/components/dropi-alert-modal/dropi-alert-modal.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type AlertModalType = 'question' | 'warning' | 'success' | 'error' | 'loading';
+/**
+ * @component dropi-alert-modal
+ * Confirmation/alert modal with Lottie animation, title, message and action buttons.
+ * Uses dropi-modal internally.
+ *
+ * @example
+ * const el = document.querySelector('dropi-alert-modal');
+ * el.visible = true;
+ */
+export declare class DropiAlertModal {
+    /** Controls visibility */
+    visible: boolean;
+    /** Modal type — determines Lottie animation */
+    type: AlertModalType;
+    /** Bold title */
+    alertTitle: string;
+    /** Body message */
+    message: string;
+    /** Primary button label */
+    primaryButton: string;
+    /** Secondary button label (hidden if empty) */
+    secondaryButton: string;
+    /** Show loading state with loading.json Lottie */
+    loading: boolean;
+    /** Show close icon in header */
+    closable: boolean;
+    /** Hide action buttons */
+    displayButtons: boolean;
+    /** Loading title */
+    loadingTitle: string;
+    /** Loading message */
+    loadingMessage: string;
+    /** Emitted when primary button is clicked */
+    dropiPrimary: EventEmitter<void>;
+    /** Emitted when secondary button is clicked */
+    dropiSecondary: EventEmitter<void>;
+    /** Emitted when modal is hidden */
+    dropiHide: EventEmitter<void>;
+    private readonly lottieMap;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private handlePrimary;
+    private handleSecondary;
+    private onModalHide;
+    render(): any;
+}

package/dist/types/components/dropi-banner-external/dropi-banner-external.d.ts

@@ -0,0 +1,30 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-banner-external
+ * External banner image with optional link and close button.
+ * Pass imageUrl directly (the Angular version fetched from WordPress).
+ *
+ * @example
+ * <dropi-banner-external
+ *   image-url="https://example.com/banner.jpg"
+ *   link="https://dropi.co"
+ * ></dropi-banner-external>
+ */
+export declare class DropiBannerExternal {
+    /** Image URL to display */
+    imageUrl: string;
+    /** Optional click-through URL */
+    link: string;
+    /** Alt text for the image */
+    alt: string;
+    /** Background color behind the image */
+    backgroundColor: string;
+    private closed;
+    /** Emitted when the banner is clicked (only when no link is set) */
+    dropiBannerClick: EventEmitter<void>;
+    /** Emitted when the close button is clicked */
+    dropiBannerClose: EventEmitter<void>;
+    private handleClick;
+    private closeBanner;
+    render(): any;
+}

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface BreadcrumbItem {
+    label: string;
+    /** Internal route or external URL */
+    routerLink?: string;
+    url?: string;
+    disabled?: boolean;
+}
+/**
+ * @component dropi-breadcrumb
+ * Navigation breadcrumb with home icon and items.
+ *
+ * @example
+ * <dropi-breadcrumb
+ *   items='[{"label":"Productos","routerLink":"/products"},{"label":"Detalle"}]'
+ * ></dropi-breadcrumb>
+ */
+export declare class DropiBreadcrumb {
+    /** Breadcrumb items (array or JSON string). Last item is rendered as current. */
+    items: BreadcrumbItem[] | string;
+    /** Home link href */
+    homeRoute: string;
+    /** dropi-icon name for home */
+    homeIconName: string;
+    /** Whether the last item is also clickable */
+    lastItemClickable: boolean;
+    /** Emitted when any item or home is clicked. Detail is the item or homeRoute string. */
+    dropiNavigate: EventEmitter<BreadcrumbItem | string>;
+    private get parsedItems();
+    render(): any;
+}

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

@@ -17,6 +17,8 @@ export declare class DropiButton {
     size: ButtonSize;
     /** Button state */
     state: ButtonState;
+    /** Full width button */
+    fullWidth: boolean;
     /** Icon name to show before the text */
     preIcon: string;
     /** Icon name to show after the text */

package/dist/types/components/dropi-card-checkbox/dropi-card-checkbox.d.ts

@@ -0,0 +1,33 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-checkbox
+ * Card-style clickable checkbox with title, description, and optional extra info.
+ *
+ * @example
+ * <dropi-card-checkbox
+ *   title="Opción A"
+ *   description="Descripción breve"
+ *   type="with-card"
+ *   checked
+ * ></dropi-card-checkbox>
+ */
+export declare class DropiCardCheckbox {
+    /** Visual type: 'default' = no border, 'with-card' = bordered card */
+    type: 'default' | 'with-card';
+    /** Whether the checkbox is checked */
+    checked: boolean;
+    /** Main title */
+    cardTitle: string;
+    /** Optional description below title */
+    description: string;
+    /** Optional extra info shown on the right */
+    extraInfo: string;
+    /** Optional extra info description shown below extraInfo */
+    extraInfoDescription: string;
+    /** Disables interaction */
+    disabled: boolean;
+    /** Emitted with the new checked state when clicked */
+    dropiChange: EventEmitter<boolean>;
+    private handleClick;
+    render(): any;
+}

package/dist/types/components/dropi-card-product/dropi-card-product.d.ts

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-product
+ * Product card showing image, name, price, supplier, and action buttons.
+ */
+export declare class DropiCardProduct {
+    /** Product image URL */
+    image: string;
+    /** Product name */
+    productName: string;
+    /** Product price */
+    price: number;
+    /** Price currency symbol */
+    currency: string;
+    /** Supplier / store name */
+    supplier: string;
+    /** Category label */
+    category: string;
+    /** Show favorite button */
+    showFavorite: boolean;
+    /** Is marked as favorite */
+    isFavorite: boolean;
+    /** Show "Add to store" button */
+    showAddButton: boolean;
+    /** Badge text (e.g. "Nuevo", "Oferta") */
+    badge: string;
+    /** Badge color variant */
+    badgeType: 'success' | 'warning' | 'error' | 'info' | 'default';
+    /** Stock availability */
+    inStock: boolean;
+    /** Emitted when card is clicked */
+    dropiCardClick: EventEmitter<void>;
+    /** Emitted when favorite toggled */
+    dropiToggleFavorite: EventEmitter<boolean>;
+    /** Emitted when "Add" button clicked */
+    dropiAddProduct: EventEmitter<void>;
+    private formatPrice;
+    render(): any;
+}

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

@@ -0,0 +1,40 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-carousel
+ * Image/content carousel with navigation arrows, dots pagination,
+ * autoplay, and optional thumbnails.
+ */
+export declare class DropiCarousel {
+    /** Array of image URLs or JSON string */
+    images: string[] | string;
+    /** Alt text prefix for images */
+    altPrefix: string;
+    /** Show navigation arrows */
+    showArrows: boolean;
+    /** Show dot indicators */
+    showDots: boolean;
+    /** Show thumbnail strip */
+    showThumbs: boolean;
+    /** Autoplay interval in ms (0 = disabled) */
+    autoplay: number;
+    /** Active index (controlled) */
+    activeIndex: number;
+    /** Object-fit for images */
+    objectFit: 'cover' | 'contain';
+    private parsedImages;
+    private current;
+    private timer;
+    /** Emitted when slide changes. e.detail = new index */
+    dropiSlideChange: EventEmitter<number>;
+    imagesChanged(val: string[] | string): void;
+    activeIndexChanged(val: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private startAutoplay;
+    private stopAutoplay;
+    private go;
+    private prev;
+    private next;
+    render(): any;
+}

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

@@ -0,0 +1,46 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CityOption {
+    label: string;
+    value: string | number;
+}
+export interface CityGroup {
+    label: string;
+    value: string;
+    items: CityOption[];
+}
+/**
+ * @component dropi-city-selector
+ * Multi-select city picker with grouped options and chip display.
+ * Pass options as a JSON string or CityGroup[] array.
+ *
+ * @example
+ * <dropi-city-selector
+ *   options='[{"label":"Cundinamarca","value":"CUN","items":[{"label":"Bogotá","value":"BOG"}]}]'
+ *   placeholder="Selecciona ciudades"
+ * ></dropi-city-selector>
+ */
+export declare class DropiCitySelector {
+    /** Grouped city options (array or JSON string) */
+    options: CityGroup[] | string;
+    /** Currently selected city values */
+    selectedCities: (string | number)[] | string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Disable the selector */
+    disabled: boolean;
+    /** Emitted when selection changes. Detail = selected values array. */
+    dropiCityChange: EventEmitter<(string | number)[]>;
+    private isOpen;
+    private selected;
+    private parsedOptions;
+    private searchTerm;
+    optionsChanged(val: CityGroup[] | string): void;
+    selectedChanged(val: (string | number)[] | string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private toggle;
+    private toggleCity;
+    private removeCity;
+    private getLabel;
+    render(): any;
+}

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

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-color-picker
+ * Color picker with hex input, opacity slider, and preset swatches.
+ */
+export declare class DropiColorPicker {
+    /** Current color value (hex string) */
+    value: string;
+    /** Show opacity slider */
+    showOpacity: boolean;
+    /** Opacity value 0–100 */
+    opacity: number;
+    /** Label */
+    label: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Show preset swatches */
+    showPresets: boolean;
+    private open;
+    private hexInput;
+    /** Emitted when color changes. e.detail = hex string */
+    dropiColorChange: EventEmitter<string>;
+    /** Emitted when opacity changes. e.detail = 0-100 */
+    dropiOpacityChange: EventEmitter<number>;
+    componentWillLoad(): void;
+    private selectColor;
+    private handleHexInput;
+    private handleOpacity;
+    private handleNativeColor;
+    render(): any;
+}

package/dist/types/components/dropi-country-flags/dropi-country-flags.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @component dropi-country-flags
+ * Displays a country flag image. Supports circle, rectangle, and flat styles.
+ *
+ * @example
+ * <dropi-country-flags country="CO" style="circle"></dropi-country-flags>
+ */
+export declare class DropiCountryFlags {
+    /** ISO 3166-1 alpha-2 country code (e.g. "CO", "US") */
+    country: string;
+    /** Visual style: circle uses circle-flags CDN, rectangle/flat uses flagsapi */
+    flagStyle: 'circle' | 'rectangle' | 'flat';
+    /** Width in px */
+    width: string;
+    /** Height in px */
+    height: string;
+    private get src();
+    render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface CountryItem {
+    name: string;
+    code: string;
+    codePhone: string;
+}
+/**
+ * @component dropi-country-selector
+ * Searchable country dropdown with flag images. Mirrors Angular dropi-country-selector.
+ *
+ * @example
+ * <dropi-country-selector label="País" placeholder="Selecciona un país"></dropi-country-selector>
+ */
+export declare class DropiCountrySelector {
+    /** Label above the select */
+    label: string;
+    /** Placeholder when nothing is selected */
+    placeholder: string;
+    /** Pre-selected country code (ISO 3166-1 alpha-2) */
+    value: string;
+    /** Whether the selector is disabled */
+    disabled: boolean;
+    /** Show asterisk for required field */
+    showObligatory: boolean;
+    /** Show error border */
+    invalid: boolean;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    dropiCountryChange: EventEmitter<CountryItem>;
+    private isOpen;
+    private selected;
+    private searchTerm;
+    private searchInputRef?;
+    valueChanged(val: string): void;
+    componentWillLoad(): void;
+    private get filtered();
+    private open;
+    private select;
+    render(): any;
+}

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