@dropi/ui 0.1.16 → 0.1.17

package/dist/esm/loader.js

@@ -1,10 +1,10 @@
-import { g as globalScripts, b as bootstrapLazy } from './index-DFz-gwFP.js';
-export { s as setNonce } from './index-DFz-gwFP.js';
+import { g as globalScripts, b as bootstrapLazy } from './index-Twbb5MNM.js';
+export { s as setNonce } from './index-Twbb5MNM.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]]], options);
+  return bootstrapLazy([["dropi-icon",[[513,"dropi-icon",{"name":[1],"width":[1],"height":[1],"color":[1]},null,{"color":[{"colorChanged":0}]}]]],["dropi-empty-state",[[769,"dropi-empty-state",{"header":[1],"description":[1],"imageUrl":[1,"image-url"],"imageAlt":[1,"image-alt"],"actionLabel":[1,"action-label"],"secondaryLabel":[1,"secondary-label"]}]]],["dropi-accordion",[[769,"dropi-accordion",{"header":[1],"open":[1540],"disabled":[4],"preIcon":[1,"pre-icon"],"contentHeight":[32]},null,{"open":[{"openChanged":0}]}]]],["dropi-input",[[577,"dropi-input",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"fixedLabel":[4,"fixed-label"],"inputMode":[1,"input-mode"],"passwordInput":[4,"password-input"],"moneyFormat":[4,"money-format"],"thousandSeparator":[4,"thousand-separator"],"onlyNumbers":[4,"only-numbers"],"allowDecimals":[4,"allow-decimals"],"onlyLetters":[4,"only-letters"],"icon":[1],"iconColor":[1,"icon-color"],"invalid":[4],"helperText":[1,"helper-text"],"showHelperOnlyOnError":[4,"show-helper-only-on-error"],"showPassword":[32],"touched":[32]},null,{"value":[{"valueChanged":0}],"disabled":[{"disabledChanged":0}]}]]],["dropi-modal",[[769,"dropi-modal",{"visible":[1540],"header":[1],"showCloseIcon":[4,"show-close-icon"],"dismissable":[4],"closeOnEscape":[4,"close-on-escape"],"modal":[4],"showHeader":[4,"show-header"],"position":[1],"size":[1],"isOpen":[32],"isClosing":[32],"mounted":[32],"hide":[64],"show":[64]},null,{"visible":[{"visibleChanged":0}]}]]],["dropi-paginator",[[513,"dropi-paginator",{"total":[2],"pageSize":[1026,"page-size"],"page":[1538],"maxPages":[2,"max-pages"],"showPageSizeSelector":[4,"show-page-size-selector"],"pageSizeOptions":[1,"page-size-options"],"parsedOptions":[32]},null,{"pageSizeOptions":[{"optionsChanged":0}]}]]],["dropi-select",[[577,"dropi-select",{"label":[1],"placeholder":[1],"options":[1040],"name":[1],"disabled":[516],"invalid":[4],"errorText":[1,"error-text"],"helperText":[1,"helper-text"],"showObligatory":[4,"show-obligatory"],"searchEnabled":[4,"search-enabled"],"multiSelect":[4,"multi-select"],"dropdownType":[4,"dropdown-type"],"showCountryFlags":[4,"show-country-flags"],"radioOptions":[4,"radio-options"],"placeHolderSearch":[1,"place-holder-search"],"preIcon":[1,"pre-icon"],"defaultSelectedId":[1032,"default-selected-id"],"value":[1040],"isOpen":[32],"selectedOption":[32],"multiSelected":[32],"filteredOptions":[32],"searchTerm":[32],"dropdownStyle":[32],"setById":[64],"setByLabel":[64],"clearSelection":[64],"resetMultiSelect":[64]},[[4,"click","handleOutsideClick"]],{"options":[{"optionsChanged":0}],"defaultSelectedId":[{"defaultChanged":0}],"value":[{"valueChanged":0}]}]]],["dropi-tabs",[[513,"dropi-tabs",{"tabs":[1],"activeTab":[1544,"active-tab"],"showIcon":[4,"show-icon"],"parsedTabs":[32]},null,{"tabs":[{"tabsChanged":0}]}]]],["dropi-tag",[[513,"dropi-tag",{"type":[1],"state":[1],"showIcon":[4,"show-icon"],"icon":[1],"text":[1]},null,{"type":[{"propsChanged":0}],"state":[{"propsChanged":0}]}]]],["dropi-text-area",[[577,"dropi-text-area",{"inputId":[1,"input-id"],"name":[1],"label":[1],"placeholder":[1],"value":[1025],"maxlength":[2],"minlength":[2],"rows":[2],"resize":[1],"disabled":[516],"required":[516],"showAsterisk":[4,"show-asterisk"],"helperText":[1,"helper-text"],"invalid":[4],"touched":[32]},null,{"value":[{"valueChanged":0}]}]]],["dropi-toast",[[513,"dropi-toast",{"position":[1],"life":[2],"items":[32],"show":[64],"clear":[64]}]]],["dropi-badge",[[513,"dropi-badge",{"state":[1]}]]],["dropi-checkbox",[[577,"dropi-checkbox",{"checked":[1540],"disabled":[516]}]]],["dropi-radio-button",[[577,"dropi-radio-button",{"label":[1],"name":[1],"inputId":[1,"input-id"],"checked":[1540],"resetTrigger":[4,"reset-trigger"]},null,{"resetTrigger":[{"onResetTrigger":0}]}]]],["dropi-skeleton",[[513,"dropi-skeleton",{"variant":[1],"width":[1],"height":[1],"borderRadius":[1,"border-radius"],"lines":[2]}]]],["dropi-switch",[[577,"dropi-switch",{"isChecked":[1540,"is-checked"],"disabled":[516]}]]],["dropi-tooltip",[[769,"dropi-tooltip",{"text":[1],"position":[1],"maxWidth":[1,"max-width"],"showDelay":[2,"show-delay"],"visible":[32]}]]],["dropi-button",[[769,"dropi-button",{"type":[1],"severity":[1],"size":[1],"state":[1],"preIcon":[1,"pre-icon"],"postIcon":[1,"post-icon"],"text":[1]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-accordion
+ * Collapsible section with animated expand/collapse.
+ *
+ * @example
+ * <dropi-accordion header="¿Cómo funciona?">
+ *   <p>Contenido del acordeón aquí.</p>
+ * </dropi-accordion>
+ */
+export declare class DropiAccordion {
+    /** Title shown in the header button */
+    header: string;
+    /** Whether the section is expanded */
+    open: boolean;
+    /** Disable toggling */
+    disabled: boolean;
+    /** Icon name from dropi-icon sprite (shown before title) */
+    preIcon: string;
+    /** Emitted when toggled. e.detail = new open state */
+    dropiToggle: EventEmitter<boolean>;
+    private contentHeight;
+    private contentRef?;
+    openChanged(val: boolean): void;
+    componentDidLoad(): void;
+    private updateHeight;
+    private handleToggle;
+    render(): any;
+}

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

@@ -0,0 +1,24 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @component dropi-empty-state
+ * Empty state illustration with title, description and optional action button.
+ */
+export declare class DropiEmptyState {
+    /** Title text */
+    header: 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;
+    /** Secondary action button label (empty = hidden) */
+    secondaryLabel: string;
+    /** Emitted when primary action button is clicked */
+    dropiAction: EventEmitter<void>;
+    /** Emitted when secondary action button is clicked */
+    dropiSecondaryAction: EventEmitter<void>;
+    render(): any;
+}

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

@@ -0,0 +1,37 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type ModalPosition = 'center' | 'right' | 'left' | 'top' | 'bottom';
+export type ModalSize = 'full' | 'xxl' | 'l' | 'm' | 's' | '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;
+    showCloseIcon: boolean;
+    dismissable: boolean;
+    closeOnEscape: boolean;
+    modal: boolean;
+    showHeader: boolean;
+    position: ModalPosition;
+    size: ModalSize;
+    dropiShow: EventEmitter<void>;
+    dropiHide: EventEmitter<void>;
+    visibleChange: EventEmitter<boolean>;
+    private isOpen;
+    private isClosing;
+    private mounted;
+    private closeTimer;
+    private keyHandler;
+    visibleChanged(val: boolean): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    hide(): Promise<void>;
+    show(): Promise<void>;
+    private openModal;
+    private startClose;
+    private addKeyHandler;
+    private removeKeyHandler;
+    render(): any;
+}

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

@@ -0,0 +1,32 @@
+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 items */
+    total: number;
+    /** Items per page */
+    pageSize: number;
+    /** Current page (1-based) */
+    page: number;
+    /** Max page buttons to show at once */
+    maxPages: number;
+    /** 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();
+    private get pageNumbers();
+    private goTo;
+    private onPageSizeChange;
+    render(): any;
+}

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

@@ -0,0 +1,19 @@
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+/**
+ * @component dropi-skeleton
+ * Loading placeholder with shimmer animation.
+ */
+export declare class DropiSkeleton {
+    /** Shape variant: 'text' | 'circle' | 'rect' */
+    variant: SkeletonVariant;
+    /** Width (CSS value, e.g. "100%", "200px") */
+    width: string;
+    /** Height (CSS value, e.g. "16px", "48px") */
+    height: string;
+    /** Border radius override */
+    borderRadius: string;
+    /** Number of lines to repeat (text variant only) */
+    lines: number;
+    private getRadius;
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TabItem {
+    /** Unique identifier */
+    id: string | number;
+    /** Display label */
+    label: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Optional numeric counter badge */
+    counter?: number;
+    /** Whether to show completed checkmark (requires showIcon) */
+    completed?: boolean;
+}
+/**
+ * @component dropi-tabs
+ * Horizontal tab navigation with optional counter badges and completed state icons.
+ *
+ * @example
+ * <dropi-tabs
+ *   tabs='[{"id":1,"label":"Activos"},{"id":2,"label":"Histórico","counter":5}]'
+ *   active-tab="1"
+ * />
+ */
+export declare class DropiTabs {
+    /** Array of TabItem or JSON string */
+    tabs: TabItem[] | string;
+    /** Id of the active tab */
+    activeTab: string | number;
+    /** Whether to show a check/pending icon per tab */
+    showIcon: boolean;
+    /** Emitted on tab click. e.detail = TabItem */
+    dropiTabChange: EventEmitter<TabItem>;
+    private parsedTabs;
+    tabsChanged(val: TabItem[] | string): void;
+    componentWillLoad(): void;
+    private handleClick;
+    render(): any;
+}

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

@@ -0,0 +1,38 @@
+export type ToastSeverity = 'success' | 'error' | 'warn' | 'info';
+export interface ToastMessage {
+    id?: string;
+    /** Visual style and icon */
+    severity: ToastSeverity;
+    /** Bold title */
+    summary: string;
+    /** Optional body text */
+    detail?: string;
+    /** Whether to show a close button. Default: true */
+    closable?: boolean;
+    /** Auto-close after N ms. 0 = manual only. Default: uses component `life` prop */
+    life?: number;
+}
+/**
+ * @component dropi-toast
+ * Global toast notification stack. Place once in the app root, call show() from JS.
+ *
+ * @example
+ * const t = document.querySelector('dropi-toast');
+ * t.show({ severity: 'success', summary: '¡Guardado!', detail: 'Cambios aplicados.' });
+ */
+export declare class DropiToast {
+    /** Toast position */
+    position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
+    /** Default auto-close ms (0 = manual) */
+    life: number;
+    private items;
+    private idCounter;
+    /** Show a toast */
+    show(msg: ToastMessage): Promise<void>;
+    /** Remove all toasts */
+    clear(): Promise<void>;
+    private remove;
+    private readonly lottieMap;
+    private getLottieHtml;
+    render(): any;
+}

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

@@ -0,0 +1,25 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * @component dropi-tooltip
+ * Wraps content and shows a tooltip bubble on hover/focus.
+ *
+ * @example
+ * <dropi-tooltip text="Más información" position="top">
+ *   <dropi-button text="Hover" />
+ * </dropi-tooltip>
+ */
+export declare class DropiTooltip {
+    /** Tooltip text */
+    text: string;
+    /** Position: top | bottom | left | right */
+    position: TooltipPosition;
+    /** Max CSS width of the bubble */
+    maxWidth: string;
+    /** Delay in ms before showing */
+    showDelay: number;
+    private visible;
+    private showTimer;
+    private show;
+    private hide;
+    render(): any;
+}