@dropi/ui 0.1.55 → 999.0.0

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

@@ -1,119 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-import { SelectOption, SelectOptionGroup } from './select.types';
-/**
- * @component dropi-select
- * Feature-rich select with support for:
- * - Single / multi select
- * - Grouped options
- * - Search / filter
- * - Country flags
- * - Radio-style options with images
- * - Inline (dropdownType) or bordered trigger
- * - Native form association
- *
- * ## Usage
- * Options must be set via JS property (not HTML attribute) for object arrays:
- * ```js
- * document.querySelector('dropi-select').options = [
- *   { id: 1, label: 'Option A' },
- *   { id: 2, label: 'Option B' },
- * ];
- * ```
- */
-export declare class DropiSelect {
-    el: HTMLElement;
-    internals: ElementInternals;
-    private buttonRef;
-    private scrollDebounce;
-    private hasEmittedScrollEnd;
-    private lastScrollTop;
-    label: string;
-    placeholder: string;
-    /** Array of SelectOption or SelectOptionGroup */
-    options: SelectOption[] | SelectOptionGroup[];
-    name: string;
-    disabled: boolean;
-    hasError: boolean;
-    errorText: string;
-    textHelper: string;
-    showObligatory: boolean;
-    /** Enables text search inside the dropdown */
-    searchEnabled: boolean;
-    /** Allows selecting multiple options */
-    multiSelect: boolean;
-    /** Renders trigger without border (inline/dropdown style) */
-    dropdownType: boolean;
-    /** Show country flags next to option labels */
-    showCountryFlags: boolean;
-    /** Renders options as radio buttons with optional image */
-    radioOptions: boolean;
-    /** Placeholder inside the search field */
-    placeHolderSearch: string;
-    /** Icon name shown before the trigger label */
-    preIcon: string;
-    /** Pre-select an option by id */
-    defaultSelectedId: string | number;
-    /** Controlled selected option (single select) - matches Angular 'selectedOption' */
-    selectedOption: SelectOption | null;
-    /** Custom CSS class for the dropdown overlay */
-    overlayClass: string;
-    /** If true, uses absolute positioning instead of fixed (better for modals with transforms) */
-    withinModal: boolean;
-    /**
-     * 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 multiSelected;
-    private filteredOptions;
-    private searchTerm;
-    private dropdownStyle;
-    /** Emitted when an option is selected — matches Angular 'onChangeSelect' */
-    dropiChangeSelect: EventEmitter<SelectOption | SelectOption[]>;
-    /** Emitted when the selection is cleared — matches Angular 'onClear' */
-    dropiClear: EventEmitter<void>;
-    /** Emitted on search input — matches Angular 'onSearch' */
-    dropiSearch: EventEmitter<string>;
-    /** Emitted when the list is scrolled to the end — matches Angular 'scrolledToEnd' */
-    dropiScrollEnd: EventEmitter<void>;
-    /** Emitted on Enter key inside search — matches Angular 'onKeyEnter' */
-    dropiKeyEnter: EventEmitter<KeyboardEvent>;
-    componentWillLoad(): void;
-    selectPropertiesChanged(val: any): void;
-    optionsChanged(): void;
-    private normalizeOptions;
-    defaultChanged(newId: string | number): void;
-    valueChanged(v: SelectOption | null): void;
-    /** Select an option by its id */
-    setById(id: string | number): Promise<void>;
-    /** Select an option by its label */
-    setByLabel(label: string): Promise<void>;
-    /** Clear the current selection */
-    clearSelection(): Promise<void>;
-    /** Reset multi-select state and show a placeholder label */
-    resetMultiSelect(_placeholder?: string): Promise<void>;
-    handleWindowScroll(e: Event): void;
-    handleWindowResize(): void;
-    handleOutsideClick(e: MouseEvent): void;
-    private applyDefaultSelection;
-    private flatOptions;
-    private get isGrouped();
-    private get triggerLabel();
-    private updateDropdownPosition;
-    private openDropdown;
-    private closeDropdown;
-    private toggleDropdown;
-    private selectOption;
-    private isOptionChecked;
-    private handleSearch;
-    private handleScroll;
-    private renderTrigger;
-    private renderOption;
-    private renderDropdown;
-    render(): any;
-}

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

@@ -1,23 +0,0 @@
-export interface SelectOption {
-    id: string | number;
-    label: string;
-    disabled?: boolean;
-    /** ISO-2 country code for flag display */
-    countryCode?: string;
-    /** Short label shown when flags are active */
-    shortLabel?: string;
-    /** Icon name shown before label */
-    preIcon?: string;
-    /** Image URL for radio-style options */
-    imageUrl?: string;
-    /** Secondary label shown alongside main label */
-    secondLabel?: string;
-    /** Internal: whether checked in multiSelect mode */
-    checked?: boolean;
-    /** Internal: whether image failed to load */
-    isFallback?: boolean;
-}
-export interface SelectOptionGroup {
-    category: string;
-    options: SelectOption[];
-}

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

@@ -1,41 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export interface 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
- * Sidebar list container (Strictly ported from Angular core).
- * This component handles rendering the sidebar items array natively.
- */
-export declare class DropiSidebar {
-    /**
-     * 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.
-     */
-    dropiIndexChange: 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

@@ -1,22 +0,0 @@
-export type StepperType = 'point' | 'number';
-export type FlowMode = 'Simultaneous' | 'Sequential';
-/**
- * @component dropi-simple-stepper
- * Compact horizontal stepper using dots or numbers.
- */
-export declare class DropiSimpleStepper {
-    /** Total steps */
-    stepsCount: number;
-    /** Circle content: 'point' (dot) | 'number' */
-    typeStep: StepperType;
-    /** Current active step (1-based) */
-    currentStep: number;
-    /** Labels shown below each step. Pass as JSON string or array */
-    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

@@ -1,22 +0,0 @@
-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 */
-    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,24 +0,0 @@
-export type StepState = 'pending' | 'focus' | 'completed';
-export interface StepLabel {
-    title?: string;
-    description?: string;
-}
-/**
- * @component dropi-steps
- * Horizontal stepper showing step progress with number/title/description.
- */
-export declare class DropiSteps {
-    /** Total number of steps */
-    stepsCount: number;
-    /** Show step number inside the circle */
-    showNumberOfStep: boolean;
-    /** Active/current step index (1-based) */
-    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

@@ -1,20 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * @component dropi-switch
- * Toggle switch component. Emits dropiChange on toggle.
- */
-export declare class DropiSwitch {
-    internals: ElementInternals;
-    /** Name for native form submission */
-    name: string;
-    /** Whether the switch is on */
-    isChecked: boolean;
-    /** Whether the switch is disabled */
-    disabled: boolean;
-    /** Emitted when the toggle state changes */
-    dropiChange: EventEmitter<boolean>;
-    checkedChanged(val: boolean): void;
-    componentWillLoad(): void;
-    private onToggleChange;
-    render(): any;
-}

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

@@ -1,133 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-export interface TableColumn {
-    key: string;
-    label: string;
-    sortable?: boolean;
-    align?: 'left' | 'center' | 'right';
-    highlightColumn?: boolean;
-    disabledColumn?: boolean;
-    minWidth?: string;
-    maxWidth?: string;
-}
-export interface TableRow {
-    [key: string]: any;
-}
-export type SortDir = 'asc' | 'desc' | null;
-/**
- * @component dropi-table
- * Data table with sortable columns, row selection, search, column selector and pagination.
- */
-export declare class DropiTable {
-    /** Column definitions */
-    columns: TableColumn[] | string;
-    /** Row data */
-    rows: TableRow[] | string;
-    /** Show checkbox column */
-    showCheckbox: boolean;
-    /** Show loading skeleton */
-    loading: boolean;
-    /** Empty state message */
-    emptyMessage: string;
-    /** Table title */
-    tableTitle: string;
-    /** Show search input */
-    showSearch: boolean;
-    /** Show column selector button */
-    showColumnSelector: boolean;
-    /** Show paginator */
-    showPaginator: boolean;
-    /** Page sizes options */
-    pageSizes: number[] | string;
-    /** Current page (1-based) */
-    currentPage: number;
-    /** Total pages */
-    totalPages: number;
-    /** Show row actions (3-dot menu or inline icons) */
-    rowActions: any[] | string;
-    /**
-     * Column definitions — matches Angular `headers: DropiTableColumn[]`.
-     * Alias of `columns`; when provided, takes precedence.
-     */
-    headers: any[] | string;
-    /**
-     * Row data — matches Angular `data: DropiTableRow[]`.
-     * Alias of `rows`; when provided, takes precedence.
-     */
-    data: any[] | string;
-    /** Pre-selected row ids (matches Angular `selectedRowIds`) */
-    selectedRowIds: any[] | null;
-    /** Child / expanded rows data (matches Angular `childData`) */
-    childData: any[] | string;
-    /** Visible child rows (matches Angular `visibleRowsChildrens`) */
-    visibleRowsChildrens: any[] | string;
-    /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */
-    dropiTableConfiguration: any;
-    /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */
-    dropiTableBackendParams: any;
-    /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */
-    isCursorPagination: boolean;
-    private parsedColumns;
-    private parsedRows;
-    private parsedPageSizes;
-    private parsedRowActions;
-    private sortKey;
-    private sortDir;
-    private sortAsc;
-    private selectedKeys;
-    private searchTerm;
-    private pageSize;
-    private showColumnMenu;
-    private hiddenColumns;
-    private openActionRow;
-    dropiSort: EventEmitter<{
-        key: string;
-        dir: SortDir;
-    }>;
-    dropiSelection: EventEmitter<number[]>;
-    dropiRowClick: EventEmitter<{
-        row: TableRow;
-        index: number;
-    }>;
-    dropiSearch: EventEmitter<string>;
-    dropiPageChange: EventEmitter<number>;
-    dropiPageSizeChange: EventEmitter<number>;
-    dropiAction: EventEmitter<{
-        row: TableRow;
-        action: any;
-    }>;
-    /** Matches Angular `rowsSelected` */
-    dropiRowsSelected: EventEmitter<any[]>;
-    /** Matches Angular `actionClicked` */
-    dropiActionClick: EventEmitter<{
-        row: any;
-        action: any;
-    }>;
-    /** Matches Angular `onPageChange` */
-    dropiPageChangeAngular: EventEmitter<number>;
-    /** Matches Angular `onSizeChange` */
-    dropiSizeChangeAngular: EventEmitter<number>;
-    /** Matches Angular `onSortChange` */
-    dropiSortChangeAngular: EventEmitter<any>;
-    /** Matches Angular `onSearchChange` */
-    dropiSearchChangeAngular: EventEmitter<string>;
-    /** Matches Angular `expandChildren` */
-    expandChildren: EventEmitter<{
-        row: any;
-    }>;
-    columnsChanged(val: TableColumn[] | string): void;
-    rowsChanged(val: TableRow[] | string): void;
-    pageSizesChanged(val: number[] | string): void;
-    rowActionsChanged(val: any[] | string): void;
-    headersChanged(val: any[] | string): void;
-    dataChanged(val: any[] | string): void;
-    componentWillLoad(): void;
-    private get visibleColumns();
-    private get filteredRows();
-    private get sortedRows();
-    private get pagedRows();
-    private handleSort;
-    private toggleRow;
-    private toggleAll;
-    private renderCellValue;
-    render(): any;
-}

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

@@ -1,40 +0,0 @@
-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 (matches Angular 'configuration') */
-    configuration: TabItem[] | string;
-    /** Id of the active tab */
-    activeTab: string | number;
-    /** Whether to show a check/pending icon per tab */
-    showIcon: boolean;
-    /** Stop tab action programmatically */
-    stopAction: boolean;
-    /** Emitted on tab click. e.detail = TabItem */
-    dropiIndexChange: EventEmitter<TabItem>;
-    private parsedTabs;
-    tabsChanged(val: TabItem[] | string): void;
-    componentWillLoad(): void;
-    private handleClick;
-    render(): any;
-}

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

@@ -1,30 +0,0 @@
-export type TagState = 'default' | 'success' | 'info' | 'warning' | 'error' | 'legacy';
-export type TagType = 'primary' | 'secondary';
-export type TagVariant = 'tag' | 'dot' | 'text';
-/**
- * @component dropi-tag
- * Colored tag/chip for statuses, categories, and labels.
- */
-export declare class DropiTag {
-    /** tag (default) | dot (status dot + text) | text (colored text only) */
-    variant: TagVariant;
-    /** primary (filled) | secondary (soft) */
-    type: TagType;
-    /** Color state of the tag */
-    state: TagState;
-    /** Whether to show the icon */
-    showIcon: boolean;
-    /** Icon name from the sprite */
-    icon: string;
-    /** Label text */
-    text: string;
-    private readonly colorMap;
-    propsChanged(): void;
-    private get bgColor();
-    private get textColor();
-    private get dotColor();
-    private get fontWeight();
-    private get iconColor();
-    private get hasContent();
-    render(): any;
-}

package/dist/types/components/dropi-tag-type-product/dropi-tag-type-product.d.ts

@@ -1,9 +0,0 @@
-/**
- * @component dropi-tag-type-product
- * Tag badge showing the product variation type.
- */
-export declare class DropiTagTypeProduct {
-    /** Label text. Default: VARIABLE */
-    label: string;
-    render(): any;
-}

package/dist/types/components/dropi-text-area/dropi-text-area.d.ts

@@ -1,74 +0,0 @@
-import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).
- * `formControl` is intentionally excluded — use `value` + dropiInput event instead.
- */
-export interface TextAreaProperties {
-    inputId?: string;
-    label?: string;
-    placeholder?: string;
-    maxLength?: number;
-    minLength?: number;
-    textHelper?: string;
-    rows?: number;
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical';
-}
-export type ResizeMode = 'none' | 'both' | 'horizontal' | 'vertical';
-/**
- * @component dropi-text-area
- * Multi-line text area with label, char counter, validation states,
- * helper text, and native form association.
- */
-export declare class DropiTextArea {
-    internals: ElementInternals;
-    /** Input id. Defaults to label. */
-    inputId: string;
-    /** Name for native form submission */
-    name: string;
-    /** Label shown above the textarea */
-    label: string;
-    /** Placeholder text */
-    placeholder: string;
-    /** Current value (controlled) */
-    value: string;
-    /** Max character length */
-    maxLength: number;
-    /** Min character length */
-    minLength: number;
-    /** Number of visible rows */
-    rows: number;
-    /** Resize behavior */
-    resize: ResizeMode;
-    /** Disable the textarea */
-    disabled: boolean;
-    /** Mark as required */
-    required: boolean;
-    /** Show the required asterisk */
-    showObligatoryAsterisk: boolean;
-    /** Helper / error text below the field */
-    textHelper: string;
-    /** Mark the field as invalid (consumer-controlled) */
-    hasError: boolean;
-    /**
-     * Convenience object prop — matches Angular `textAreaProperties: TextAreaProperties`.
-     * When provided, its non-null fields override individual props.
-     * Note: `formControl` is not supported in web components; use `value` + dropiInput instead.
-     */
-    textAreaProperties: TextAreaProperties | null;
-    textAreaPropertiesChanged(val: TextAreaProperties): void;
-    private touched;
-    /** Emitted on every keystroke */
-    dropiInput: EventEmitter<string>;
-    /** Emitted on blur */
-    dropiChange: EventEmitter<string>;
-    dropiFocus: EventEmitter<void>;
-    dropiBlur: EventEmitter<void>;
-    valueChanged(val: string): void;
-    componentWillLoad(): void;
-    private handleInput;
-    private handleBlur;
-    private get resolvedId();
-    private get isInvalid();
-    private get charCount();
-    render(): any;
-}

package/dist/types/components/dropi-time-line/dropi-time-line.d.ts

@@ -1,18 +0,0 @@
-export type TimelineStepStatus = 'pending' | 'active' | 'done';
-export interface TimelineStep {
-    status: TimelineStepStatus;
-    label: string;
-    icon?: string;
-    id?: string;
-    subtitle?: string;
-}
-/**
- * @component dropi-time-line
- * Vertical timeline showing ordered steps with status indicators.
- */
-export declare class DropiTimeLine {
-    /** Array of timeline steps. Pass as JSON string or array */
-    steps: TimelineStep[] | string;
-    private get parsedSteps();
-    render(): any;
-}

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

@@ -1,37 +0,0 @@
-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 severityToLottieKey;
-    render(): any;
-}

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

@@ -1,11 +0,0 @@
-/**
- * @component dropi-tooltip
- * Simple tooltip (Legacy version).
- */
-export declare class DropiTooltip {
-    /** Tooltip text */
-    text: string;
-    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
-    outlined: boolean;
-    render(): any;
-}