@dropi/ui 0.1.20 → 0.1.22

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

@@ -1,44 +1,51 @@
 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;
+    /** Format defines aspect ratio scales like Angular original */
+    format: 'mobile-vertical' | 'mobile-compact' | 'desktop';
     private playing;
-    private currentTime;
+    private currentTimeStr;
+    private durationStr;
     private duration;
     private volume;
     private muted;
-    private loading;
+    private showControls;
+    private isFullscreen;
+    private progress;
+    private speed;
+    private showSpeedMenu;
+    private showVolumeSlider;
     private mediaEl;
-    /** Emitted when playback starts/pauses. e.detail = playing */
+    private controlsTimeout;
+    private speeds;
     dropiPlay: EventEmitter<boolean>;
-    /** Emitted when media ends */
     dropiEnded: EventEmitter<void>;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private handleFullscreenChange;
     private togglePlay;
     private handleTimeUpdate;
     private handleLoadedMetadata;
     private handleSeek;
     private handleVolume;
-    private toggleMute;
-    private handleFullscreen;
+    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

@@ -7,24 +7,43 @@ export type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | 'drawer-s' | 'drawer-
  * Slots: (default) body, "header" custom header, "footer" actions.
  */
 export declare class DropiModal {
-    visible: boolean;
-    header: string;
+    visible: any;
+    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;
-    dropiShow: EventEmitter<void>;
-    dropiHide: EventEmitter<void>;
+    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`) */
+    draggable: boolean;
+    /** No-op — kept for API parity with Angular (matches Angular `resizable`) */
+    resizable: boolean;
+    onShow: EventEmitter<void>;
+    onHide: EventEmitter<void>;
     visibleChange: EventEmitter<boolean>;
     private isOpen;
     private isClosing;
     private mounted;
     private closeTimer;
     private keyHandler;
-    visibleChanged(val: boolean): void;
+    visibleChanged(val: any, oldVal: any): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
     hide(): Promise<void>;

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

@@ -15,8 +15,10 @@ export declare class DropiNavbar {
     logoUrl: string;
     /** Logo alt */
     logoAlt: string;
-    /** Navigation items (array or JSON string) */
-    items: NavItem[] | string;
+    /** Navigation data (matches Angular `data: DropiTableRow[]`) */
+    data: any[] | string;
+    /** Title (matches Angular `title`) */
+    title: string;
     /** Active item ID */
     activeId: string;
     /** User name */
@@ -27,14 +29,14 @@ export declare class DropiNavbar {
     notifications: number;
     /** Show menu toggle (mobile) */
     showMenuToggle: boolean;
-    /** Emitted when a nav item is clicked. e.detail = item id */
-    dropiNavItemClick: EventEmitter<string>;
+    /** 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 parsedItems();
+    private get parsedData();
     render(): any;
 }

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

@@ -20,7 +20,7 @@ export declare class DropiOtpSendCode {
     private inputs;
     private timer;
     /** Emitted when all 6 digits are entered. e.detail = the complete code string */
-    dropiCodeCompleted: EventEmitter<string>;
+    codeCompleted: EventEmitter<string>;
     /** Emitted when resend is requested */
     dropiResend: EventEmitter<void>;
     componentDidLoad(): void;

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

@@ -4,31 +4,21 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * Pagination control with page numbers, prev/next buttons and items-per-page selector.
  */
 export declare class DropiPaginator {
-    /** Total number of items */
-    total: number;
-    /** Items per page */
-    pageSize: number;
+    /** Total number of pages */
+    totalPages: number;
     /** Current page (1-based) */
-    page: number;
+    currentPage: number;
+    /** Disabled state */
+    disabled: boolean;
     /** Max page buttons to show at once */
-    maxPages: number;
+    maxVisiblePages: number;
+    /** Hide total page count (show only arrows) */
+    isNotTotalPages: boolean;
     /** 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 */
-    pageSizeOptions: number[] | string;
-    /** Emitted when page changes. e.detail = { page, pageSize } */
-    dropiPageChange: EventEmitter<{
-        page: number;
-        pageSize: number;
-    }>;
-    private parsedOptions;
-    optionsChanged(val: number[] | string): void;
-    componentWillLoad(): void;
-    private get totalPages();
+    /** Emitted when page changes. e.detail = new page number */
+    pageChange: EventEmitter<number>;
     private get pageNumbers();
     private goTo;
-    private onPageSizeChange;
     render(): any;
 }

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

@@ -2,33 +2,48 @@ 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.
+ * Syncs perfectly with dropi-core_front natively
  */
 export declare class DropiPhoneInput {
-    /** Initial country dial code (e.g. "+57") */
+    el: HTMLElement;
+    /** Initial country dial code (e.g. "57") — matches Angular 'CodArea' setter */
     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;
+    /** 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;
-    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>;
+    /** Emitted when country dial code changes — matches Angular 'ngModelChangeCod' */
+    ngModelChangeCod: EventEmitter<string>;
+    /** Emitted when phone number changes — matches Angular 'ngModelChangePhone' */
+    ngModelChangePhone: EventEmitter<string>;
+    /** Emitted on field verification — matches Angular 'verifiedField' */
+    verifiedField: EventEmitter<void>;
+    /** Emitted when country selection changes — matches Angular 'onChangeSelect' */
+    onChangeSelect: EventEmitter<any>;
     codAreaChanged(): void;
+    selectedOptionChanged(val: any): void;
+    componentWillLoad(): void;
     private get selectedCountry();
-    private get filtered();
     private selectCountry;
     private handleInput;
+    handleWindowClick(ev: Event): void;
     render(): any;
 }

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

@@ -9,7 +9,7 @@ export declare class DropiRadioButton {
     /** Input name (for grouping radio buttons) */
     name: string;
     /** Input id */
-    inputId: string;
+    id: string;
     /** Whether this radio is selected */
     checked: boolean;
     /**
@@ -18,7 +18,7 @@ export declare class DropiRadioButton {
      */
     resetTrigger: boolean;
     /** Emitted when the radio is selected */
-    dropiChange: EventEmitter<Event>;
+    onChange: EventEmitter<any>;
     onResetTrigger(val: boolean): void;
     private handleChange;
     render(): any;

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

@@ -19,14 +19,21 @@ export declare class DropiRadioSelectionList {
     showFilter: boolean;
     /** Search placeholder */
     filterPlaceholder: string;
-    /** Show description below name */
+    /** 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. e.detail = search text */
-    dropiSearch: EventEmitter<string>;
+    valueChange: EventEmitter<string | number>;
+    /** Emitted on search — matches Angular 'onSearch' */
+    onSearch: EventEmitter<{
+        searchValue: string;
+        filteredOptions: RadioOption[];
+    }>;
     optionsChanged(val: RadioOption[] | string): void;
     componentWillLoad(): void;
     private get filtered();

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

@@ -9,6 +9,10 @@ export declare class DropiReadMore {
     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();

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

@@ -8,37 +8,49 @@ export interface SearchOption {
  * 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 */
-    value: string;
+    textInput: string;
+    /** HTML input type: text | number (matches Angular `typeInput`) */
+    typeInput: 'text' | 'number';
     /** Max character length */
-    maxlength: number;
+    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 */
-    options: SearchOption[] | string;
+    dataToSearch: SearchOption[] | string;
     /** Property name to display and search */
-    labelKey: string;
+    dataName: string;
+    /** Dropdown open direction: down | top (matches Angular `position`) */
+    position: 'down' | 'top';
     /** Allow multiple selection */
-    multiSelect: boolean;
-    /** Max height of dropdown (CSS value) */
-    dropdownHeight: string;
+    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>;
+    onInput: EventEmitter<string>;
     /** Emitted on blur */
-    dropiBlur: EventEmitter<void>;
+    onBlur: EventEmitter<void>;
     /** Emitted when Enter is pressed. e.detail = current text */
-    dropiKeyEnter: EventEmitter<string>;
+    onKeyEnter: EventEmitter<string>;
+    /** Emitted on change event of the native input (matches Angular `onChange`) */
+    onChange: EventEmitter<string>;
     /** Emitted when clear button clicked */
-    dropiClear: EventEmitter<void>;
+    onClear: EventEmitter<void>;
     /** Emitted when selection changes. e.detail = selected items */
-    dropiChange: EventEmitter<SearchOption[]>;
+    modelChange: EventEmitter<SearchOption[]>;
     optionsChanged(val: SearchOption[] | string): void;
     componentWillLoad(): void;
     private get filtered();

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

@@ -33,9 +33,9 @@ export declare class DropiSelect {
     options: SelectOption[] | SelectOptionGroup[];
     name: string;
     disabled: boolean;
-    invalid: boolean;
+    hasError: boolean;
     errorText: string;
-    helperText: string;
+    textHelper: string;
     showObligatory: boolean;
     /** Enables text search inside the dropdown */
     searchEnabled: boolean;
@@ -53,25 +53,36 @@ export declare class DropiSelect {
     preIcon: string;
     /** Pre-select an option by id */
     defaultSelectedId: string | number;
-    /** Controlled selected option (single select) */
-    value: SelectOption | null;
+    /** Controlled selected option (single select) - matches Angular 'selectedOption' */
+    selectedOption: SelectOption | null;
+    /** Custom CSS class for the dropdown overlay */
+    overlayClass: string;
+    /**
+     * Convenience object prop — matches Angular `selectProperties: SelectProperties`.
+     * Fields: label, placeholder, options, showObligatory, textHelper,
+     * searchEnabled, multiSelect, dropdownType, hasError, errorText,
+     * radioOptions, preIcon.
+     * When provided, its non-null fields override individual props.
+     */
+    selectProperties: any;
     private isOpen;
-    private selectedOption;
+    private _selectedOption;
     private multiSelected;
     private filteredOptions;
     private searchTerm;
     private dropdownStyle;
-    /** Emitted when an option is selected (single) or selection changes (multi) */
-    dropiChange: EventEmitter<SelectOption | SelectOption[]>;
-    /** Emitted when the selection is cleared */
-    dropiClear: EventEmitter<void>;
-    /** Emitted on search input */
-    dropiSearch: EventEmitter<string>;
-    /** Emitted when the list is scrolled to the end */
-    dropiScrollEnd: EventEmitter<void>;
-    /** Emitted on Enter key inside search */
-    dropiKeyEnter: EventEmitter<KeyboardEvent>;
+    /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
+    onChangeSelect: EventEmitter<SelectOption | SelectOption[]>;
+    /** Emitted when the selection is cleared — matches Angular 'onClear' */
+    onClear: EventEmitter<void>;
+    /** Emitted on search input — matches Angular 'onSearch' */
+    onSearch: EventEmitter<string>;
+    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
+    scrolledToEnd: EventEmitter<void>;
+    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
+    onKeyEnter: EventEmitter<KeyboardEvent>;
     componentWillLoad(): void;
+    selectPropertiesChanged(val: any): void;
     optionsChanged(): void;
     private normalizeOptions;
     defaultChanged(newId: string | number): void;

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

@@ -1,35 +1,41 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export interface SidebarItem {
-    id: string;
-    label: string;
-    icon?: string;
-    badge?: string | number;
-    children?: SidebarItem[];
+    id: number;
+    icon: string;
+    text: string;
+    route: string;
+    expandedMenu?: boolean;
+    active?: boolean;
+}
+export interface SidebarProperties {
+    id: number;
+    icon: string;
+    text: string;
+    route: string;
+    expandedMenu?: boolean;
+    active?: boolean;
+    subItems?: SidebarItem[];
 }
 /**
  * @component dropi-sidebar
- * Collapsible vertical sidebar navigation with icon support and nested items.
+ * Sidebar list container (Strictly ported from Angular core).
+ * This component handles rendering the sidebar items array natively.
  */
 export declare class DropiSidebar {
-    /** Navigation items (array or JSON string) */
-    items: SidebarItem[] | string;
-    /** Active item ID */
-    activeId: string;
-    /** Collapsed state (icon-only) */
-    collapsed: boolean;
-    /** Show collapse toggle button */
-    showToggle: boolean;
-    /** Logo URL (shown at top) */
-    logoUrl: string;
-    /** Sidebar width when expanded */
-    width: string;
-    private expandedIds;
-    /** Emitted when an item is clicked. e.detail = item id */
-    dropiSidebarItemClick: EventEmitter<string>;
-    /** Emitted when collapse state changes. e.detail = collapsed */
-    dropiCollapse: EventEmitter<boolean>;
-    private get parsedItems();
-    private toggleExpand;
-    private renderItem;
+    /**
+     * Define las propiedades y la cantidad de elementos a renderizar.
+     * Pasarlo como JSON string o directamente como array de SidebarProperties.
+     */
+    sideBarProperties: SidebarProperties[] | string;
+    /**
+     * Evento emitido cuando se selecciona una opción en el menú o un sub-hijo.
+     */
+    onIndexChanged: EventEmitter<SidebarProperties>;
+    parsedProperties: SidebarProperties[];
+    watchPropHandler(newValue: SidebarProperties[] | string): void;
+    componentWillLoad(): void;
+    private setExpandedPropertie;
+    private onItemClick;
+    private onSubItemClick;
     render(): any;
 }

package/dist/types/components/dropi-simple-stepper/dropi-simple-stepper.d.ts

@@ -15,6 +15,8 @@ export declare class DropiSimpleStepper {
     labelStepper: string[] | string;
     /** Flow mode (visual only) */
     flowMode: FlowMode;
+    /** White-label brand identifier (matches Angular `white_brand`) */
+    white_brand: string;
     private get parsedLabels();
     render(): any;
 }

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

@@ -11,9 +11,12 @@ export declare class DropiSkeleton {
     /** Height (CSS value, e.g. "16px", "48px") */
     height: string;
     /** Border radius override */
-    borderRadius: string;
+    radius: string;
     /** Number of lines to repeat (text variant only) */
     lines: number;
+    /** Base color of the shimmer gradient. Accepts hex (#f6f7f8) or token name (Gray-Gray-100) */
+    baseColor: string;
+    private getBackground;
     private getRadius;
     render(): any;
 }

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

@@ -1,3 +1,4 @@
+export type StepState = 'pending' | 'focus' | 'completed';
 export interface StepLabel {
     title?: string;
     description?: string;
@@ -15,6 +16,8 @@ export declare class DropiSteps {
     currentStep: number;
     /** Labels for each step. Pass as JSON string or array */
     stepLabels: StepLabel[] | string;
+    /** Visual state applied to the active step (matches Angular `state`) */
+    state: StepState;
     private get parsedLabels();
     private stepState;
     render(): any;

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

@@ -9,7 +9,7 @@ export declare class DropiSwitch {
     /** Whether the switch is disabled */
     disabled: boolean;
     /** Emitted when the toggle state changes */
-    dropiChange: EventEmitter<boolean>;
+    onChange: EventEmitter<boolean>;
     private onToggleChange;
     render(): any;
 }