@dropi/ui 0.1.19 → 0.1.21

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

@@ -0,0 +1,41 @@
+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.
+     */
+    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;
 }

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

@@ -0,0 +1,131 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export interface TableColumn {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    align?: 'left' | 'center' | 'right';
+    highlightColumn?: boolean;
+    disabledColumn?: boolean;
+}
+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 */
+    title: 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` */
+    rowsSelected: EventEmitter<any[]>;
+    /** Matches Angular `actionClicked` */
+    actionClicked: EventEmitter<{
+        row: any;
+        action: any;
+    }>;
+    /** Matches Angular `onPageChange` */
+    onPageChange: EventEmitter<number>;
+    /** Matches Angular `onSizeChange` */
+    onSizeChange: EventEmitter<number>;
+    /** Matches Angular `onSortChange` */
+    onSortChange: EventEmitter<any>;
+    /** Matches Angular `onSearchChange` */
+    onSearchChange: 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

@@ -22,14 +22,16 @@ export interface TabItem {
  * />
  */
 export declare class DropiTabs {
-    /** Array of TabItem or JSON string */
-    tabs: TabItem[] | string;
+    /** 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 */
-    dropiTabChange: EventEmitter<TabItem>;
+    onIndexChanged: EventEmitter<TabItem>;
     private parsedTabs;
     tabsChanged(val: TabItem[] | string): void;
     componentWillLoad(): void;

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

@@ -0,0 +1,9 @@
+/**
+ * @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,4 +1,18 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * Simplified TextAreaProperties interface (matches Angular `TextAreaProperties`).
+ * `formControl` is intentionally excluded — use `value` + dropiInput event instead.
+ */
+export interface TextAreaProperties {
+    id?: 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
@@ -8,7 +22,7 @@ export type ResizeMode = 'none' | 'both' | 'horizontal' | 'vertical';
 export declare class DropiTextArea {
     internals: ElementInternals;
     /** Input id. Defaults to label. */
-    inputId: string;
+    id: string;
     /** Name for native form submission */
     name: string;
     /** Label shown above the textarea */
@@ -18,9 +32,9 @@ export declare class DropiTextArea {
     /** Current value (controlled) */
     value: string;
     /** Max character length */
-    maxlength: number;
+    maxLength: number;
     /** Min character length */
-    minlength: number;
+    minLength: number;
     /** Number of visible rows */
     rows: number;
     /** Resize behavior */
@@ -30,11 +44,18 @@ export declare class DropiTextArea {
     /** Mark as required */
     required: boolean;
     /** Show the required asterisk */
-    showAsterisk: boolean;
+    showObligatoryAsterisk: boolean;
     /** Helper / error text below the field */
-    helperText: string;
+    textHelper: string;
     /** Mark the field as invalid (consumer-controlled) */
-    invalid: boolean;
+    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>;

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

@@ -1,25 +1,11 @@
-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>
+ * Simple tooltip (Legacy version).
  */
 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;
+    /** Whether the tooltip has an outline style (matches Angular `outlined`) */
+    outlined: boolean;
     render(): any;
 }

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

@@ -0,0 +1,59 @@
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipTrigger = 'hover' | 'click' | 'focus' | 'timeout' | 'static' | 'hidden';
+export type ArrowPosition = 'start' | 'center' | 'end';
+/**
+ * @component dropi-tooltip
+ * Wraps content and shows a tooltip bubble on hover/focus.
+ *
+ * @example
+ * <dropi-tooltip-v2 text="Más información" position="top">
+ *   <dropi-button text="Hover" />
+ * </dropi-tooltip-v2>
+ */
+export declare class DropiTooltipV2 {
+    /** Tooltip text */
+    text: string;
+    /** Tooltip title (bold, shown with label) */
+    title: string;
+    /** Tooltip label (shown below title) */
+    label: string;
+    /** Position: top | bottom | left | right */
+    position: TooltipPosition;
+    /** Position of the arrow: start | center | end (matches Angular `arrowPosition`) */
+    arrowPosition: ArrowPosition;
+    /** Trigger: hover | click | focus | timeout | static | hidden */
+    trigger: TooltipTrigger;
+    /** Max CSS width of the bubble */
+    maxWidth: string;
+    /** Min CSS width of the bubble (matches Angular `minWidth`) */
+    minWidth: string;
+    /** Delay in ms before showing */
+    showDelay: number;
+    /** Disable the tooltip completely (matches Angular `disabled`) */
+    disabled: boolean;
+    /** Show the trigger icon (matches Angular `showIcon`) */
+    showIcon: boolean;
+    /** Show the close (X) button inside the bubble (matches Angular `showX`) */
+    showX: boolean;
+    /** Icon name from the dropi-icon sprite (matches Angular `iconName`) */
+    iconName: string;
+    /** Icon color token or hex (matches Angular `iconColor`) */
+    iconColor: string;
+    /** Icon size in px without unit (matches Angular `iconSize`) */
+    iconSize: string;
+    private visible;
+    private showTimer;
+    private timeoutTimer;
+    componentDidLoad(): void;
+    private show;
+    private hide;
+    private showWithTimeout;
+    private handleMouseEnter;
+    private handleMouseLeave;
+    private handleClick;
+    private handleFocusin;
+    private handleFocusout;
+    private handleClose;
+    private get displayContent();
+    render(): any;
+}

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

@@ -17,7 +17,7 @@ export declare class DropiVerticalSteps {
     /** Show check icon inside completed step circles */
     showCheckIcon: boolean;
     /** Emitted when a step is clicked. e.detail = step number (1-based) */
-    dropiStepClick: EventEmitter<number>;
+    stepClick: EventEmitter<number>;
     private get parsedSteps();
     private resolveState;
     render(): any;

package/dist/types/components/dropi-youtube-lazy-video/dropi-youtube-lazy-video.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @component dropi-youtube-lazy-video
+ * Lazy-loads a YouTube video. Shows thumbnail until user clicks play.
+ *
+ * @example
+ * <dropi-youtube-lazy-video video-id="dQw4w9WgXcQ" video-title="Never Gonna Give You Up"></dropi-youtube-lazy-video>
+ */
+export declare class DropiYoutubeLazyVideo {
+    /** YouTube video ID */
+    videoId: string;
+    /** Local asset thumbnail path (without /assets/images/ prefix and .png extension) */
+    thumbnailSrc: string;
+    /** Video title for iframe accessibility */
+    videoTitle: string;
+    private isPlaying;
+    private get thumbnail();
+    private get videoUrl();
+    render(): any;
+}