@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,31 +1,56 @@
 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>;
+    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;
-    private selectColor;
-    private handleHexInput;
-    private handleOpacity;
-    private handleNativeColor;
+    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

@@ -9,7 +9,7 @@ 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';
+    customStyle: 'circle' | 'rectangle' | 'flat';
     /** Width in px */
     width: string;
     /** Height in px */

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

@@ -17,20 +17,31 @@ export declare class DropiCountrySelector {
     /** Placeholder when nothing is selected */
     placeholder: string;
     /** Pre-selected country code (ISO 3166-1 alpha-2) */
-    value: string;
+    currentSelection: string;
     /** Whether the selector is disabled */
     disabled: boolean;
     /** Show asterisk for required field */
     showObligatory: boolean;
     /** Show error border */
-    invalid: boolean;
+    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. */
-    dropiCountryChange: EventEmitter<CountryItem>;
+    onChangeSelect: EventEmitter<CountryItem>;
     private isOpen;
     private selected;
-    private searchTerm;
+    el: HTMLElement;
+    handleDocClick(e: MouseEvent): void;
     private searchInputRef?;
-    valueChanged(val: string): void;
+    currentSelectionChanged(val: string): void;
+    selectPropertiesChanged(val: any): void;
     componentWillLoad(): void;
     private get filtered();
     private open;

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

@@ -5,31 +5,39 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Emits ISO date strings (YYYY-MM-DD).
  */
 export declare class DropiDatePicker {
-    /** Selected date (ISO string, single mode) */
-    value: string;
+    /** 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 */
-    range: boolean;
+    /** 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;
+    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;
-    /** Emitted when single date selected. e.detail = ISO date */
-    dropiDateChange: EventEmitter<string>;
-    /** Emitted when range selected. e.detail = { start, end } */
+    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;

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

@@ -26,9 +26,9 @@ export declare class DropiDatePickerRange {
     /** Hide "Hoy" shortcut */
     hideTodayRangeShortcut: boolean;
     /** Emitted when start date changes */
-    dropiStartDateChange: EventEmitter<string>;
+    startDateChange: EventEmitter<string>;
     /** Emitted when end date changes */
-    dropiEndDateChange: EventEmitter<string>;
+    endDateChange: EventEmitter<string>;
     /** Emitted with full range when both dates are set */
     dropiRangeChange: EventEmitter<DateRange>;
     private start;

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

@@ -2,24 +2,30 @@ 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.
+ * Matches dropi-core_front implementation with size and headless support.
  */
 export declare class DropiDrawer {
+    drawerTitle: string;
+    /** Controls visibility (alias of open for Angular parity) */
+    drawerIsOpen: any;
     /** Controls visibility */
-    open: boolean;
+    open: any;
     /** Side from which the drawer slides in */
     position: 'left' | 'right' | 'top' | 'bottom';
-    /** Drawer title */
-    drawerTitle: string;
-    /** Width (for left/right drawers) */
+    /** Preset size (overrides width when set): 'm' | 'l' | 'xl' | 'xxl' */
+    size: 'm' | 'l' | 'xl' | 'xxl' | '';
+    /** Custom width for left/right drawers (used when size is not set) */
     width: string;
-    /** Height (for top/bottom drawers) */
+    /** Custom height for top/bottom drawers */
     height: string;
+    /** Hide the header (headless mode) */
+    headless: boolean;
     /** Close on backdrop click */
     closeOnBackdrop: boolean;
     /** Emitted when drawer closes */
     dropiClose: EventEmitter<void>;
     openChanged(val: boolean): void;
+    componentWillLoad(): void;
     private close;
     render(): any;
 }

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

@@ -10,16 +10,22 @@ export interface DropdownOption {
 export declare class DropiDropdown {
     /** Options array or JSON string */
     options: DropdownOption[] | string;
-    /** Property name to display as the option label */
+    /** Property name for the label */
     valueModel: string;
-    /** Property name to use as the option image/avatar URL */
-    imageModel: string;
-    /** Max height of the list container (CSS value) */
+    /** Height of the dropdown (CSS value) */
     height: string;
+    /** Whether the dropdown is inside a select component */
+    isInSelect: boolean;
+    /** Configuration parameters for the dropdown items */
+    parameters: {
+        type: 'checkbox';
+        icon: string;
+        iconCurrier: boolean;
+    };
     private selected;
     private parsedOptions;
-    /** Emitted when selection changes. e.detail = selected items array */
-    dropiChange: EventEmitter<DropdownOption[]>;
+    /** Emitted when selection changes — matches Angular 'modelChange' */
+    modelChange: EventEmitter<DropdownOption[]>;
     optionsChanged(val: DropdownOption[] | string): void;
     componentWillLoad(): void;
     private isSelected;

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

@@ -4,25 +4,23 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Empty state illustration with title, description and optional action button.
  */
 export declare class DropiEmptyState {
-    /** Title text */
-    header: string;
+    /** Title text (matches Angular 'title') */
+    title: string;
     /** Description text */
     description: string;
     /** URL of the illustration image */
     imageUrl: string;
     /** Alt text for the image */
     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 */
-    dropiSecondaryAction: EventEmitter<void>;
+    /** Primary action button label (empty = hidden) — matches Angular 'buttonText' */
+    buttonText: string;
+    /** Icon name for button — matches Angular 'buttonIcon' */
+    buttonIcon: string;
+    /** State of the illustration (default, loading, sorry, love, success, error) — matches Angular 'dropiIcon' */
+    dropiIcon: 'default' | 'loading' | 'sorry' | 'love' | 'success' | 'error' | 'warning' | 'info';
+    /** Severity for the action button — matches Angular 'buttonSeverity' */
+    buttonSeverity: 'primary' | 'secondary' | 'tertiary';
+    /** Emitted when button is clicked — matches Angular 'buttonClickEvent' */
+    buttonClickEvent: EventEmitter<void>;
     render(): any;
 }

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

@@ -7,7 +7,7 @@ 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>;
+    toggleFavorite: EventEmitter<boolean>;
     private hovered;
     private toggle;
     render(): any;

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

@@ -1,37 +1,76 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export interface UploadedFile {
-    name: string;
-    size: number;
-    type: string;
-    dataUrl?: string;
+export type FileUploadState = 'uploading' | 'complete' | 'confirm-delete' | 'deleting' | 'error';
+export interface FileItem {
+    id: string;
+    file: File | null;
+    progress: number;
+    state: FileUploadState;
+    previewUrl?: string;
+    fileType: 'image' | 'document';
+    typeView: 'card' | 'grid';
 }
 /**
  * @component dropi-file-upload
- * Drag-and-drop file upload zone with file type/size validation.
- * Emits selected files as UploadedFile objects.
+ * Componente de carga de archivos con zona de drop, lista de archivos,
+ * vista card y grid. API idéntica al componente Angular del core.
  */
 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 */
+    /** Título mostrado arriba del componente */
+    title: string;
+    /** Subtítulo informativo */
     label: string;
-    /** Helper text inside drop zone */
-    helperText: string;
+    /** Texto dentro de la zona de drop */
+    textDropZone: string;
+    /** Texto del botón de selección */
+    textButton: string;
+    /** Tipo de preview: card (lista) o grid (miniaturas) */
+    previewType: 'card' | 'grid';
+    /** Permitir múltiples archivos */
+    multiple: boolean;
+    /** Límite de archivos */
+    maxFiles: number;
+    /** Tamaño máximo por archivo en MB */
+    maxFileSizeMB: number;
+    /** Tipos aceptados (ej: "image/*,application/pdf") */
+    accept: string;
+    /** Solo vista — sin eliminar */
+    onlyView: boolean;
+    /** Mostrar drop-zone cuando ya hay archivos (modo grid) */
+    viewDragAndDrop: boolean;
+    /** Tamaño del drop zone */
+    dragAndDropSize: 'small' | 'default';
+    private selectedFiles;
+    private error;
+    private errorMessage;
     private dragging;
-    private errors;
+    /** Emite los File[] cada vez que cambia la selección (el host maneja la subida) */
+    uploadedUrlsChange: EventEmitter<File[]>;
     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;
+    private dragCounter;
+    private generateId;
+    private getFileType;
+    private getTypeView;
+    private getFileTypeClass;
+    private isDropZoneHidden;
+    private generatePreviewUrl;
+    private syncFileItem;
+    private emitFiles;
+    private handleFiles;
+    private simulateProgress;
+    private handleFileAction;
+    private onDragOver;
+    private onDragEnter;
+    private onDragLeave;
+    private onDrop;
+    private onInputChange;
+    private openFilePicker;
+    private addImage;
+    private renderCheckSvg;
+    private renderTrashSvg;
+    private renderTrashGridSvg;
+    private renderPdfSvg;
+    private renderDocSvg;
+    private renderCardItem;
+    private renderGridItem;
     render(): any;
 }

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

@@ -1,25 +1,33 @@
 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.
+ * Shows upload progress for a single file with name, miniature and actions.
+ * Mirrored EXACTLY from dropi-core_front.
  */
 export declare class DropiFileUploadProgressBar {
-    /** File name */
-    fileName: string;
-    /** File size label (e.g. "1.2 MB") */
-    fileSize: string;
+    /** File name to display */
+    textFile: 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();
+    /** Type of file (overridden by extension detection) */
+    type: 'image' | 'file';
+    /** URL for image preview if type is image */
+    urlImage: string;
+    /** Show the eye icon for preview */
+    isPreview: boolean;
+    /** Disable delete action */
+    disabled: boolean;
+    private fileExtension;
+    /** Emitted when the trash icon is clicked */
+    deleteFile: EventEmitter<void>;
+    /** Emitted when progress reaches 100 */
+    uploadComplete: EventEmitter<void>;
+    /** Emitted when the eye icon is clicked */
+    viewFile: EventEmitter<void>;
+    handleProgress(val: number): void;
+    handleTextFile(val: string): void;
+    componentWillLoad(): void;
+    private updateFileInfo;
+    private getFileExtensionInfo;
     render(): any;
 }

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

@@ -19,7 +19,9 @@ export declare class DropiIcon {
      */
     color: string;
     colorChanged(): void;
-    componentDidLoad(): void;
+    componentWillLoad(): void;
+    componentDidUpdate(): void;
+    private updateHostStyles;
     private applyColor;
     render(): any;
 }

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

@@ -5,7 +5,7 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class DropiImageOverlay {
     /** Whether the overlay is visible */
-    visible: boolean;
+    visible: any;
     /** Images array or JSON string */
     images: string[] | string;
     /** Initially active image index */

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

@@ -17,8 +17,8 @@ export type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url'
  */
 export declare class DropiInput {
     internals: ElementInternals;
-    /** Input id. Defaults to label value. */
-    inputId: string;
+    /** Input id. Defaults to label label. */
+    id: string;
     /** Name attribute for native form submission */
     name: string;
     /** Floating or fixed label text */
@@ -28,13 +28,13 @@ export declare class DropiInput {
     /** Current value (controlled) */
     value: string;
     /** Max character length */
-    maxlength: number;
+    maxLength: number;
     /** Disable the input */
     disabled: boolean;
-    /** Mark as required (shows asterisk when showAsterisk is true) */
+    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
     required: boolean;
     /** Show the required asterisk on the label */
-    showAsterisk: boolean;
+    showObligatoryAsterisk: boolean;
     /** Show label above the input (fixed), instead of floating inside */
     fixedLabel: boolean;
     /** Keyboard input mode hint */
@@ -42,35 +42,45 @@ export declare class DropiInput {
     /** Show password visibility toggle (renders as password field) */
     passwordInput: boolean;
     /** Apply thousand separator formatting (e.g. 1,000,000) */
-    moneyFormat: boolean;
+    isMoneyInput: boolean;
     /** Apply thousand separator without currency symbol */
-    thousandSeparator: boolean;
+    isThousandSeparator: boolean;
     /** Only allow numeric characters */
-    onlyNumbers: boolean;
-    /** Allow decimal point when onlyNumbers is true */
+    isNumericInput: boolean;
+    /** Allow decimal point when isNumericInput is true */
     allowDecimals: boolean;
     /** Only allow letter characters */
-    onlyLetters: boolean;
+    isLettersOnly: boolean;
     /** Icon name shown inside the input (only visible when value is not empty) */
     icon: string;
     /** Color token for the icon */
     iconColor: string;
     /** Mark the field as invalid (consumer-controlled) */
-    invalid: boolean;
+    hasError: boolean;
     /** Helper / error text shown below the field */
-    helperText: string;
-    /** Only show helperText when the field is invalid */
+    textHelper: string;
+    /** Only show textHelper when the field is invalid */
     showHelperOnlyOnError: boolean;
+    /**
+     * Convenience object prop — matches Angular `inputProperties: InputProperties`.
+     * Fields: id, label, placeholder, maxLength, textHelper, passwordInput,
+     * icon, iconColor, isMoneyInput, showObligatoryAsterisk, isNumericInput,
+     * allowDecimals, isThousandSeparator, showHelperOnlyOnError,
+     * isLettersOnly, inputMode.
+     * Note: `formControl` is not supported; use `value` + onInput event instead.
+     */
+    inputProperties: any;
     private showPassword;
     private touched;
     /** Emitted on every keystroke with the current value */
-    dropiInput: EventEmitter<string>;
+    onInput: EventEmitter<string>;
     /** Emitted on blur with the final value */
-    dropiChange: EventEmitter<string>;
+    onChange: EventEmitter<string>;
     /** Emitted on focus */
-    dropiFocus: EventEmitter<void>;
+    onFocus: EventEmitter<void>;
     /** Emitted on blur */
-    dropiBlur: EventEmitter<void>;
+    onBlur: EventEmitter<void>;
+    inputPropertiesChanged(val: any): void;
     valueChanged(val: string): void;
     disabledChanged(val: boolean): void;
     componentWillLoad(): void;

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

@@ -19,7 +19,7 @@ export declare class DropiLanguagesSelector {
     languages: LanguageOption[] | string;
     /** Currently selected language (LanguageOption or JSON string) */
     selectedLang: LanguageOption | string | null;
-    dropiLanguageChange: EventEmitter<LanguageOption>;
+    languageChange: EventEmitter<LanguageOption>;
     private isOpen;
     private parsedLanguages;
     private currentLang;

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

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

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

@@ -8,7 +8,7 @@ export declare class DropiLottieLoader {
     /** Path to the Lottie JSON animation file */
     loadingAnimation: string;
     /** Title shown below the animation */
-    loaderTitle: string;
+    title: string;
     /** Descriptive message below the title */
     message: string;
     render(): any;