@dropi/ui 0.1.20 → 0.1.22

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

@@ -3,8 +3,11 @@ export interface TableColumn {
     key: string;
     label: string;
     sortable?: boolean;
-    width?: string;
     align?: 'left' | 'center' | 'right';
+    highlightColumn?: boolean;
+    disabledColumn?: boolean;
+    minWidth?: string;
+    maxWidth?: string;
 }
 export interface TableRow {
     [key: string]: any;
@@ -12,46 +15,119 @@ export interface TableRow {
 export type SortDir = 'asc' | 'desc' | null;
 /**
  * @component dropi-table
- * Data table with sortable columns, row selection, and empty state.
- * Pass columns and rows as JSON strings or arrays.
+ * Data table with sortable columns, row selection, search, column selector and pagination.
  */
 export declare class DropiTable {
-    /** Column definitions (array or JSON string) */
+    /** Column definitions */
     columns: TableColumn[] | string;
-    /** Row data (array or JSON string) */
+    /** Row data */
     rows: TableRow[] | string;
-    /** Enable row selection (checkboxes) */
-    selectable: boolean;
+    /** Show checkbox column */
+    showCheckbox: boolean;
     /** Show loading skeleton */
     loading: boolean;
-    /** Text shown when no rows */
+    /** Empty state message */
     emptyMessage: string;
-    /** Stripe alternate rows */
-    striped: boolean;
+    /** 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;
-    /** Emitted when sort changes. e.detail = { key, dir } */
+    private searchTerm;
+    private pageSize;
+    private showColumnMenu;
+    private hiddenColumns;
+    private openActionRow;
     dropiSort: EventEmitter<{
         key: string;
         dir: SortDir;
     }>;
-    /** Emitted when selection changes. e.detail = selected row indices */
     dropiSelection: EventEmitter<number[]>;
-    /** Emitted when a row is clicked. e.detail = { row, index } */
     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 sortIcon;
+    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-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;