@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,104 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type InputMode = 'text' | 'numeric' | 'decimal' | 'tel' | 'email' | 'url' | 'search';
-/**
- * @component dropi-input
- * Text input with floating label, validation states, password toggle,
- * number/letter restrictions, thousand separator, and native form association.
- *
- * ## Form usage (native HTML form)
- * ```html
- * <form>
- *   <dropi-input name="email" label="Email" required></dropi-input>
- * </form>
- * ```
- *
- * ## Controlled usage (React / Vue / Angular)
- * Pass `value` and listen to `dropiInput` to update.
- */
-export declare class DropiInput {
-    internals: ElementInternals;
-    /** Input id. Defaults to label label. */
-    inputId: string;
-    /** Name attribute for native form submission */
-    name: string;
-    /** Floating or fixed label text */
-    label: string;
-    /** Placeholder text (visible in fixedLabel mode or on focus) */
-    placeholder: string;
-    /** Current value (controlled) */
-    value: string;
-    /** Max character length */
-    maxLength: number;
-    /** Disable the input */
-    disabled: boolean;
-    /** Mark as required (shows asterisk when showObligatoryAsterisk is true) */
-    required: boolean;
-    /** Show the required asterisk on the label */
-    showObligatoryAsterisk: boolean;
-    /** Show label above the input (fixed), instead of floating inside */
-    fixedLabel: boolean;
-    /** Keyboard input mode hint */
-    inputMode: InputMode;
-    /** Show password visibility toggle (renders as password field) */
-    passwordInput: boolean;
-    /** Apply thousand separator formatting (e.g. 1,000,000) */
-    isMoneyInput: boolean;
-    /** Apply thousand separator without currency symbol */
-    isThousandSeparator: boolean;
-    /** Only allow numeric characters */
-    isNumericInput: boolean;
-    /** Allow decimal point when isNumericInput is true */
-    allowDecimals: boolean;
-    /** Only allow letter characters */
-    isLettersOnly: boolean;
-    /** HTML autocomplete attribute value */
-    autocomplete: string;
-    /** 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) */
-    hasError: boolean;
-    /** Helper / error text shown below the field */
-    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>;
-    /** Emitted on blur with the final value */
-    dropiChange: EventEmitter<string>;
-    /** Emitted on focus */
-    dropiFocus: EventEmitter<void>;
-    /** Emitted on blur */
-    dropiBlur: EventEmitter<void>;
-    inputPropertiesChanged(val: any): void;
-    valueChanged(val: string): void;
-    disabledChanged(val: boolean): void;
-    componentWillLoad(): void;
-    private handleInput;
-    private handleKeyDown;
-    private handleFocus;
-    private handleBlur;
-    private togglePassword;
-    private filterNumbers;
-    private filterLetters;
-    private isAllowedNumberKey;
-    private isAllowedLetterKey;
-    private formatThousands;
-    private get resolvedId();
-    private get inputType();
-    private get showHelper();
-    private get isInvalid();
-    render(): any;
-}

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

@@ -1,31 +0,0 @@
-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

@@ -1,16 +0,0 @@
-/**
- * @component dropi-logo
- * 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

@@ -1,15 +0,0 @@
-/**
- * @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 */
-    title: string;
-    /** Descriptive message below the title */
-    message: string;
-    render(): any;
-}

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

@@ -1,51 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export declare class DropiMediaPlayer {
-    el: HTMLElement;
-    src: string;
-    mediaType: 'audio' | 'video';
-    poster: string;
-    autoplay: boolean;
-    loop: boolean;
-    initialVolume: number;
-    /** Format defines aspect ratio scales like Angular original */
-    format: 'mobile-vertical' | 'mobile-compact' | 'desktop';
-    private playing;
-    private currentTimeStr;
-    private durationStr;
-    private duration;
-    private volume;
-    private muted;
-    private showControls;
-    private isFullscreen;
-    private progress;
-    private speed;
-    private showSpeedMenu;
-    private showVolumeSlider;
-    private mediaEl;
-    private controlsTimeout;
-    private speeds;
-    dropiPlay: EventEmitter<boolean>;
-    dropiEnded: EventEmitter<void>;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    private handleFullscreenChange;
-    private togglePlay;
-    private handleTimeUpdate;
-    private handleLoadedMetadata;
-    private handleSeek;
-    private handleVolume;
-    private toggleSpeedMenu;
-    private selectSpeed;
-    private toggleVolume;
-    private toggleFullscreen;
-    private onMouseMove;
-    private onMouseLeave;
-    private startHideControlsTimer;
-    handleDocClick(e: MouseEvent): void;
-    private formatTime;
-    get playButtonSize(): number;
-    get playIconSize(): number;
-    get volumeIcon(): string;
-    get volumeGradient(): string;
-    render(): any;
-}

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

@@ -1,57 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export type ModalPosition = 'center' | 'right' | 'left' | 'top' | 'bottom';
-export type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | 'xs' | 'drawer-s' | 'drawer-m' | 'drawer-l' | 'drawer-xxl' | 'sidebar-half';
-/**
- * @component dropi-modal
- * Modal/dialog with backdrop, close button, and header/content/footer slots.
- * Slots: (default) body, "header" custom header, "footer" actions.
- */
-export declare class DropiModal {
-    visible: boolean;
-    header: string | null;
-    showCloseIcon: boolean;
-    dismissable: boolean;
-    dismissableMask: boolean;
-    dismissible: boolean;
-    closeOnEscape: boolean;
-    modal: boolean;
-    closable: boolean;
-    blockScroll: boolean;
-    showHeader: boolean;
-    showFooter: boolean;
-    position: ModalPosition;
-    size: ModalSize;
-    styleClass: string | null;
-    maxWidth: string | null;
-    /** Auto-manage z-index stack (matches Angular `autoZIndex`) */
-    autoZIndex: boolean;
-    /** Base z-index value when autoZIndex is false (matches Angular `baseZIndex`) */
-    baseZIndex: number;
-    /** CSS transition duration, e.g. '0.15s' (matches Angular `transitionOptions`) */
-    transitionOptions: string;
-    /** Enable a before-close hook (matches Angular `enableBeforeClose`) */
-    enableBeforeClose: boolean;
-    /** No-op — kept for API parity with Angular (matches Angular `draggable`) */
-    isDraggable: boolean;
-    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
-    resizable: boolean;
-    dropiShow: EventEmitter<void>;
-    dropiHide: EventEmitter<void>;
-    dropiVisibleChange: EventEmitter<boolean>;
-    private isOpen;
-    private isClosing;
-    private mounted;
-    private closeTimer;
-    private keyHandler;
-    private canDismiss;
-    visibleChanged(val: boolean): void;
-    componentDidLoad(): void;
-    disconnectedCallback(): void;
-    dismiss(): Promise<void>;
-    openModalExternally(): Promise<void>;
-    private openModal;
-    private startClose;
-    private addKeyHandler;
-    private removeKeyHandler;
-    render(): any;
-}

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

@@ -1,42 +0,0 @@
-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 data (matches Angular `data: DropiTableRow[]`) */
-    data: any[] | string;
-    /** Title (matches Angular `title`) */
-    title: 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 (matches Angular `clickLoadItem`) */
-    clickLoadItem: EventEmitter<any>;
-    /** 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 parsedData();
-    render(): any;
-}

package/dist/types/components/dropi-otp-send-code/dropi-otp-send-code.d.ts

@@ -1,46 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-otp-send-code
- * OTP input with configurable length, countdown timer and resend capability.
- */
-export declare class DropiOtpSendCode {
-    internals: ElementInternals;
-    /** Name for native form submission */
-    name: string;
-    /** 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;
-    /** Number of digits for the OTP */
-    digitsCount: number;
-    private digits;
-    private digitStates;
-    private countdown;
-    private canResend;
-    private error;
-    private inputs;
-    private timer;
-    handleDigitsCountChange(newValue: number): void;
-    /** Emitted when all digits are entered. */
-    codeCompleted: EventEmitter<string>;
-    /** Emitted when all digits are entered (alternative event). */
-    codeAccepted: EventEmitter<string>;
-    /** Compatibility alias for codeCompleted */
-    dropiCodeCompleted: EventEmitter<string>;
-    /** Compatibility alias for codeAccepted */
-    dropiCodeAccepted: EventEmitter<string>;
-    /** Emitted when resend is requested */
-    dropiResend: EventEmitter<void>;
-    componentWillLoad(): 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

@@ -1,24 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-paginator
- * Pagination control with page numbers, prev/next buttons and items-per-page selector.
- */
-export declare class DropiPaginator {
-    /** Total number of pages */
-    totalPages: number;
-    /** Current page (1-based) */
-    currentPage: number;
-    /** Disabled state */
-    disabled: boolean;
-    /** Max page buttons to show at once */
-    maxVisiblePages: number;
-    /** Hide total page count (show only arrows) */
-    isNotTotalPages: boolean;
-    /** Hide "Anterior"/"Siguiente" text labels, show only arrows */
-    noLabels: boolean;
-    /** Emitted when page changes. e.detail = new page number */
-    dropiPageChange: EventEmitter<number>;
-    private get pageNumbers();
-    private goTo;
-    render(): any;
-}

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

@@ -1,54 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-phone-input
- * Phone number input with country code selector.
- * Syncs perfectly with dropi-core_front natively
- */
-export declare class DropiPhoneInput {
-    el: HTMLElement;
-    internals: ElementInternals;
-    /** Name for native form submission */
-    name: string;
-    /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
-    codArea: string;
-    /** Phone number value — matches Angular 'ngModelPhone' */
-    ngModelPhone: string;
-    /** Input placeholder — matches Angular 'phoneNumberPlaceholder' */
-    phoneNumberPlaceholder: string | null;
-    /** Disabled state — matches Angular 'disabledInput' */
-    disabledInput: boolean;
-    /** Validation state — matches Angular 'isValidPhone' */
-    isValidPhone: boolean;
-    /** Validate on init — matches Angular 'validateOnInit' */
-    validateOnInit: boolean;
-    /**
-     * Pre-selected country object (matches Angular `selectedOption: Country`).
-     * Pass `{ dialCode, flag, name, iso2 }`. When set, overrides `codArea`.
-     */
-    selectedOption: any;
-    /**
-     * Country select configuration object (matches Angular `selectProperties: SelectProperties`).
-     * Fields: `label`, `placeholder`, `options` (array of Country objects).
-     * When provided, overrides the internal country list.
-     */
-    selectProperties: any;
-    private open;
-    /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
-    dropiCodChange: EventEmitter<string>;
-    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
-    dropiPhoneChange: EventEmitter<string>;
-    /** Emitted on field verification — matches Angular 'verifiedField' */
-    dropiVerify: EventEmitter<void>;
-    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
-    dropiChangeSelect: EventEmitter<any>;
-    codAreaChanged(): void;
-    ngModelPhoneChanged(): void;
-    selectedOptionChanged(val: any): void;
-    componentWillLoad(): void;
-    private updateFormValue;
-    private get selectedCountry();
-    private selectCountry;
-    private handleInput;
-    handleWindowClick(ev: Event): void;
-    render(): any;
-}

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

@@ -1,16 +0,0 @@
-export declare class DropiProgressBar {
-    /** The progress value (0-100) */
-    value: number;
-    /** The color scheme of the progress bar */
-    severity: 'primary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
-    /** Height of the progress bar */
-    height: string;
-    /** Whether to show the value as text */
-    showValue: boolean;
-    /** Background color of the track (optional, defaults to gray-100) */
-    trackColor: string;
-    /** Custom color for the progress fill (overrides severity) */
-    color: string;
-    render(): any;
-    private getSeverityVariable;
-}

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

@@ -1,28 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-radio-button
- * Styled radio button with label.
- */
-export declare class DropiRadioButton {
-    internals: ElementInternals;
-    /** Label text displayed next to the radio */
-    label: string;
-    /** Input name (for grouping radio buttons) */
-    name: string;
-    /** Input id */
-    inputId: string;
-    /** Whether this radio is selected */
-    checked: boolean;
-    /**
-     * Set to true to programmatically reset this radio to unchecked.
-     * Useful when the parent needs to clear a group.
-     */
-    resetTrigger: boolean;
-    /** Emitted when the radio is selected */
-    dropiChange: EventEmitter<any>;
-    onResetTrigger(val: boolean): void;
-    checkedChanged(val: boolean): void;
-    componentWillLoad(): void;
-    private handleChange;
-    render(): any;
-}

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

@@ -1,41 +0,0 @@
-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 even when option is not selected */
-    alwaysShowDescription: boolean;
-    /** Layout type */
-    typeLayout: 'description' | 'default';
-    /** Delay before filtering (matches Angular `searchDelay`) */
-    searchDelay: number;
-    private filterText;
-    private parsedOptions;
-    /** Emitted on selection change. e.detail = selected option id */
-    dropiChange: EventEmitter<string | number>;
-    /** Emitted on search — matches Angular 'onSearch' */
-    dropiSearch: EventEmitter<{
-        searchValue: string;
-        filteredOptions: RadioOption[];
-    }>;
-    optionsChanged(val: RadioOption[] | string): void;
-    componentWillLoad(): void;
-    private get filtered();
-    render(): any;
-}

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

@@ -1,21 +0,0 @@
-/**
- * @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;
-    /** Inline CSS string applied to the text element (matches Angular `textStyle`) */
-    textStyle: string;
-    /** Inline CSS string applied to the toggle button (matches Angular `buttonStyle`) */
-    buttonStyle: string;
-    private expanded;
-    private get words();
-    private get needsTruncation();
-    private get displayText();
-    render(): any;
-}

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

@@ -1,63 +0,0 @@
-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 {
-    /** Visual variant (matches Angular `type`) */
-    type: 'default' | 'dropdown' | 'dropdown-button' | 'default-light';
-    /** Placeholder text */
-    placeholder: string;
-    /** Controlled input value */
-    textInput: string;
-    /** HTML input type: text | number (matches Angular `typeInput`) */
-    typeInput: 'text' | 'number';
-    /** Max character length */
-    maxLength: number;
-    /** Show the search icon (matches Angular `showIcon`) */
-    showIcon: boolean;
-    /** Show clear (×) button when input has text */
-    showClear: boolean;
-    /** Data source to filter. Pass as array or JSON string */
-    dataToSearch: SearchOption[] | string;
-    /** Property name to display and search */
-    dataName: string;
-    /** Dropdown open direction: down | top (matches Angular `position`) */
-    position: 'down' | 'top';
-    /** Allow multiple selection */
-    multipleSelectModel: boolean;
-    /** Max height of dropdown (numeric value) */
-    heightOverlay: number;
-    /** Label shown above the input */
-    label: string;
-    /** Controlled selected items array (matches Angular `model`) */
-    model: SearchOption[] | 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 on change event of the native input (matches Angular `onChange`) */
-    dropiChange: EventEmitter<string>;
-    /** Emitted when clear button clicked */
-    dropiClear: EventEmitter<void>;
-    /** Emitted when selection changes. e.detail = selected items */
-    dropiModelChange: EventEmitter<SearchOption[]>;
-    optionsChanged(val: SearchOption[] | string): void;
-    componentWillLoad(): void;
-    private get filtered();
-    private handleInput;
-    private handleKeyDown;
-    private handleClear;
-    private isSelected;
-    private selectOption;
-    render(): any;
-}