@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,66 @@
+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 */
+    tittle: 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;
+    /**
+     * When true, primary button does NOT auto-close the modal (matches Angular `isStep`).
+     * Useful for step-by-step flows.
+     */
+    isStep: boolean;
+    /** Base z-index for the internal modal overlay (matches Angular `baseZIndex`) */
+    baseZIndex: number;
+    /**
+     * Convenience object prop — matches Angular `params: ModalParams`.
+     * Fields: tittle, type, message, primaryButton, secondaryButton, loadingTitle,
+     * loadingMessage, closable, displayButtons.
+     * When provided, its values override the corresponding individual props.
+     */
+    params: any;
+    paramsChanged(val: any): void;
+    /** Emitted when primary button is clicked — matches Angular 'primaryButtonEvent' */
+    primaryButtonEvent: EventEmitter<boolean>;
+    /** Emitted when secondary button is clicked — matches Angular 'secondaryButtonEvent' */
+    secondaryButtonEvent: EventEmitter<boolean>;
+    /** Emitted when modal open state changes — matches Angular 'modalOpenChange' */
+    modalOpenChange: EventEmitter<boolean>;
+    /** Emitted when modal is hidden — matches Angular 'onHide' */
+    onHide: EventEmitter<void>;
+    private readonly lottieMap;
+    componentWillLoad(): void;
+    show(): Promise<void>;
+    hide(): Promise<void>;
+    private handlePrimary;
+    private handleSecondary;
+    private onModalHide;
+    render(): any;
+}

package/dist/types/components/dropi-badge-legacy/dropi-badge-legacy.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @component dropi-badge-legacy
+ * Legacy badge component used in tabs and elsewhere.
+ */
+export declare class DropiBadgeLegacy {
+    /** Type: state | counter */
+    type: 'state' | 'counter';
+    /** State: check | pending */
+    state: 'check' | 'pending';
+    /** Variant: primary | secondary | tertiary */
+    variant: 'primary' | 'secondary' | 'tertiary';
+    /** Count (for type counterpart) */
+    count: number;
+    render(): any;
+}

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

@@ -0,0 +1,36 @@
+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;
+    /** Slug name (matches Angular `slugName`) */
+    slugName: string;
+    /** Whether to show on white brand (matches Angular `viewOnWhiteBrand`) */
+    viewOnWhiteBrand: boolean;
+    /** Countries list to show (matches Angular `viewOnlyCountries`) */
+    viewOnlyCountries: string[];
+    private closed;
+    /** Emitted when the banner is clicked (only when no link is set) */
+    bannerClick: EventEmitter<void>;
+    /** Emitted with false when the close button is clicked (matches Angular `isVisible`) */
+    isVisible: EventEmitter<boolean>;
+    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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown';
+export type ButtonType = 'legacy' | 'default' | 'success' | 'info' | 'error' | 'warning' | 'dropdown' | 'default-light';
 export type ButtonSeverity = 'primary' | 'secondary' | 'tertiary';
 export type ButtonSize = 'large' | 'normal' | 'small';
 export type ButtonState = 'default' | 'disabled' | 'loading';
@@ -17,14 +17,18 @@ 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 */
     postIcon: string;
+    /** Custom icon color override */
+    customIconColor: string;
     /** Button label */
     text: string;
     /** Emitted on click (not emitted when disabled or loading) */
-    dropiClick: EventEmitter<MouseEvent>;
+    onClick: EventEmitter<MouseEvent>;
     private readonly colorMap;
     private get iconSize();
     private get color();

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

@@ -0,0 +1,34 @@
+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 — matches Angular: 'default' | 'with card' */
+    type: 'default' | 'with card';
+    /** Whether the checkbox is checked — matches Angular 'state' */
+    state: 'checked' | 'default';
+    /** Main title — matches Angular 'title' */
+    title: 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 */
+    onChange: EventEmitter<boolean>;
+    private get isChecked();
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-card-product
+ * Product card showing image, supplier insignia, name, stock, prices and action button.
+ */
+export declare class DropiCardProduct {
+    /** Product image URL */
+    image: string;
+    /** Product name */
+    productName: string;
+    /** Sale / supplier price (Precio proveedor) */
+    salePrice: number;
+    /** Suggested price for the dropshipper (Precio sugerido) */
+    suggestedPrice: number;
+    /** Price currency symbol */
+    currency: string;
+    /** Supplier / store name */
+    supplier: string;
+    /** Category label */
+    category: string;
+    /** Stock quantity (0 = Agotado) */
+    stock: number;
+    /** Supplier category for insignia: 'verified' | 'premium' | 'exclusive' | '' */
+    supplierCategory: 'verified' | 'premium' | 'exclusive' | '';
+    /** Show favorite button */
+    showFavorite: boolean;
+    /** Is marked as favorite */
+    isFavorite: boolean;
+    /** Show "Enviar a cliente" button */
+    showAddButton: boolean;
+    /** Emitted when card is clicked — matches Angular 'onProductClick' */
+    onProductClick: EventEmitter<void>;
+    /** Emitted when favorite toggled — matches Angular 'changeFavorite' */
+    changeFavorite: EventEmitter<boolean>;
+    /** Emitted when "Enviar a cliente" button clicked */
+    dropiAddProduct: EventEmitter<void>;
+    /** Emitted when supplier name clicked */
+    dropiSupplierClick: EventEmitter<void>;
+    private formatPrice;
+    private get inStock();
+    private getStockColor;
+    render(): any;
+}

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

@@ -4,8 +4,8 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Section card with title, description and a switch or dropdown control.
  */
 export declare class DropiCardSection {
-    /** Section title */
-    sectionTitle: string;
+    /** Section title — matches Angular 'title' */
+    title: string;
     /** Section description */
     description: string;
     /** Control type on the right */
@@ -14,9 +14,9 @@ export declare class DropiCardSection {
     type: 'medium' | 'important';
     /** Switch checked state */
     isChecked: boolean;
-    /** Emitted when switch changes. e.detail = new boolean value */
-    dropiChange: EventEmitter<boolean>;
+    /** Emitted when switch changes */
+    onChange: EventEmitter<boolean>;
     /** Emitted when dropdown icon is clicked */
-    dropiClick: EventEmitter<void>;
+    onClick: EventEmitter<void>;
     render(): any;
 }

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

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DropiCarousel {
+    el: HTMLElement;
+    /** Items to display (Array of URLs or objects) */
+    value: any[] | string;
+    /** Active page index */
+    page: number;
+    /** Number of items visible per page */
+    numVisible: number;
+    /** Number of items to scroll per click */
+    numScroll: number;
+    /** Orientation of the carousel */
+    orientation: 'horizontal' | 'vertical';
+    /** Show navigation arrows */
+    showNavigators: boolean;
+    /** Show dot indicators */
+    showIndicators: boolean;
+    /** Autoplay interval in ms (0 = disabled) */
+    autoplayInterval: number;
+    /** Infinite scrolling */
+    circular: boolean;
+    private parsedValue;
+    private internalPage;
+    private isAnimating;
+    private totalPages;
+    private itemsContainer;
+    private timer;
+    pageChange: EventEmitter<number>;
+    onPage: EventEmitter<any>;
+    handleValue(val: any[] | string): void;
+    handlePage(val: number): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private onResize;
+    private startAutoplay;
+    private stopAutoplay;
+    private updateTotalPages;
+    private updateTransform;
+    private navForward;
+    private navBackward;
+    private onDotClick;
+    render(): any;
+}

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

@@ -10,7 +10,7 @@ export declare class DropiCheckbox {
     /** Whether the checkbox is disabled */
     disabled: boolean;
     /** Emitted when the checked state changes */
-    dropiChange: EventEmitter<boolean>;
+    onChange: EventEmitter<boolean>;
     private changeState;
     render(): any;
 }

package/dist/types/components/dropi-checkbox-selection-list/dropi-checkbox-selection-list.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface CheckboxOption {
     id: string | number;
-    name: string;
+    label: string;
     icon?: string;
     [key: string]: any;
 }
@@ -22,13 +22,15 @@ export declare class DropiCheckboxSelectionList {
     notFoundMessage: string;
     /** Allow multiple selection */
     multiSelect: boolean;
+    /** Debounce delay in ms for search input (matches Angular `searchDelay`) */
+    searchDelay: number;
     private filterText;
     private selected;
     private parsedOptions;
-    /** Emitted when selection changes. e.detail = selected option ids */
-    dropiCheckedValues: EventEmitter<(string | number)[]>;
-    /** Emitted on search input. e.detail = search text */
-    dropiSearch: EventEmitter<string>;
+    /** Emitted when selection changes — matches Angular 'checkedValues' */
+    checkedValues: EventEmitter<(string | number)[]>;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch: EventEmitter<string>;
     optionsChanged(val: CheckboxOption[] | string): void;
     componentWillLoad(): void;
     private get filtered();

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export type ChipStyle = 'filters' | 'fill';
+export type ChipStyle = 'filtrers' | 'fill';
 export type ChipType = 'icon' | 'text' | 'avatar';
 /**
  * @component dropi-chips
@@ -7,8 +7,8 @@ export type ChipType = 'icon' | 'text' | 'avatar';
  * Use <slot> for the chip label text.
  */
 export declare class DropiChips {
-    /** Visual style */
-    chipStyle: ChipStyle;
+    /** Visual style (named customStyle to avoid conflict with HTMLElement.style) */
+    customStyle: ChipStyle;
     /** Content type */
     type: ChipType;
     /** Avatar image URL (when type = 'avatar') */
@@ -18,6 +18,6 @@ export declare class DropiChips {
     /** Icon name (when type = 'icon') */
     icon: string;
     /** Emitted when the close icon is clicked */
-    dropiClose: EventEmitter<void>;
+    onClose: EventEmitter<void>;
     render(): any;
 }

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

@@ -0,0 +1,48 @@
+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. */
+    selectedCitiesChange: EventEmitter<(string | number)[]>;
+    private isOpen;
+    private selected;
+    private parsedOptions;
+    private searchTerm;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
+    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,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DropiColorPicker {
+    el: HTMLElement;
+    currentColor: string;
+    position: 'top' | 'bottom' | 'left' | 'right';
+    colorChange: EventEmitter<string>;
+    private color;
+    private hue;
+    private saturation;
+    private currentVal;
+    private opacity;
+    private showEdit;
+    private isDragging;
+    private isHueDragging;
+    private isOpacityDragging;
+    private colorCanvas;
+    private hueCanvas;
+    private opacityCanvas;
+    onValueChange(newValue: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    onMouseMove(event: MouseEvent): void;
+    onMouseUp(): void;
+    handleClickOutside(event: MouseEvent): void;
+    drawColorCanvas(): void;
+    drawHueCanvas(): void;
+    drawOpacityCanvas(): void;
+    updateColor(): void;
+    hsvToRgb(h: number, s: number, v: number): {
+        r: number;
+        g: number;
+        b: number;
+    };
+    rgbToHex(red: number, green: number, black: number, opacity?: number): string;
+    syncFromHex(): void;
+    onHexInputChange(event: Event): void;
+    rgbToHsv(r: number, g: number, b: number, a?: number): {
+        h: number;
+        s: number;
+        v: number;
+        a: number;
+    };
+    getCanvasPosition(canvas: HTMLCanvasElement, event: MouseEvent): {
+        x: number;
+        y: number;
+    };
+    onColorMouseDown(event: MouseEvent): void;
+    onHueMouseDown(event: MouseEvent): void;
+    onOpacityMouseDown(event: MouseEvent): void;
+    updateColorFromPosition(event: MouseEvent): void;
+    updateHueFromPosition(event: MouseEvent): void;
+    updateOpacityFromPosition(event: MouseEvent): void;
+    showEditor(): void;
+    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 */
+    customStyle: '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,50 @@
+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) */
+    currentSelection: string;
+    /** Whether the selector is disabled */
+    disabled: boolean;
+    /** Show asterisk for required field */
+    showObligatory: boolean;
+    /** Show error border */
+    hasError: boolean;
+    /** Helper text below the select */
+    textHelper: string;
+    /** Search term for filtering (matches Angular `searchTerm`) */
+    searchTerm: string;
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties: any;
+    /** Emitted when a country is selected. Detail is the CountryItem. */
+    onChangeSelect: EventEmitter<CountryItem>;
+    private isOpen;
+    private selected;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
+    private searchInputRef?;
+    currentSelectionChanged(val: string): void;
+    selectPropertiesChanged(val: any): 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,55 @@
+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) - matches Angular 'selectedDate' */
+    selectedDate: string;
+    /** Range start date (ISO string, range mode) */
+    startDate: string;
+    /** Range end date (ISO string, range mode) */
+    endDate: string;
+    /** Enable range selection - matches Angular selectionMode */
+    selectionMode: 'single' | 'range';
+    /** Min selectable date (ISO string) */
+    minDate: string;
+    /** Max selectable date (ISO string) */
+    maxDate: string;
+    /** Label */
+    label: string | null;
+    /** Placeholder */
+    placeholder: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Is invalid state - matches Angular */
+    isInvalid: boolean;
+    /** Loading state - matches Angular */
+    loading: boolean;
+    private open;
+    private viewYear;
+    private viewMonth;
+    private hoverDate;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
+    /** Emitted when date selected — matches Angular 'onChangeDate' */
+    onChangeDate: EventEmitter<string>;
+    /** Emitted when panel closes — matches Angular 'onClosePanel' */
+    onClosePanel: EventEmitter<void>;
+    /** Emitted when range selected */
+    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;
+}