@dropi/ui 0.1.20 → 0.1.22

package/dist/cjs/dropi-switch.cjs.entry.js

@@ -1,27 +1,27 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
 const dropiSwitchCss = () => `:host{display:inline-block}*,*::before,*::after{box-sizing:border-box}.toggle-switch{position:relative;display:inline-block;width:40px;height:21px;margin-bottom:0;cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--Gray-Gray-200, #c3c9d9);transition:0.4s;border-radius:34px}.slider::before{position:absolute;content:'';height:17px;width:17px;left:3px;bottom:2px;background-color:var(--Neutral-White, #ffffff);transition:0.4s;border-radius:50%}input:checked+.slider{background-color:var(--Primary-Primary-500, #f49a3d)}input:checked+.slider::before{transform:translateX(17px)}:host([disabled]) .toggle-switch{cursor:not-allowed;opacity:0.5}`;
 
 const DropiSwitch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiChange = index.createEvent(this, "dropiChange", 7);
+        this.onChange = index.createEvent(this, "onChange", 7);
     }
     /** Whether the switch is on */
     isChecked = false;
     /** Whether the switch is disabled */
     disabled = false;
     /** Emitted when the toggle state changes */
-    dropiChange;
+    onChange;
     onToggleChange(event) {
         const input = event.target;
         this.isChecked = input.checked;
-        this.dropiChange.emit(this.isChecked);
+        this.onChange.emit(this.isChecked);
     }
     render() {
-        return (index.h("label", { key: 'f02520c1b71af187ddfb766e4bac4e16482bb5cc', class: "toggle-switch" }, index.h("input", { key: '13b41ec9b7f69512be6d556f1946a3506d9557a3', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: '0bb19ad9767c1e7c5956ef834228a6a2406c225c', class: "slider" })));
+        return (index.h("label", { key: 'c12214e051cfd7ca50d0df9fb3374ee9f3b72c1a', class: "toggle-switch" }, index.h("input", { key: '2821a935d4614447900d35028261b5c6620c104f', type: "checkbox", checked: this.isChecked, disabled: this.disabled, onChange: (e) => this.onToggleChange(e) }), index.h("span", { key: '1370a1ea4b9bb48849f9d998eac3a36ac3fa75b6', class: "slider" })));
     }
     static get formAssociated() { return true; }
 };

package/dist/cjs/dropi-table.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiTableCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--Gray-Gray-100, #eceef4);border-radius:var(--Border-2, 8px)}.table{width:100%;border-collapse:collapse;font-size:var(--font-size-s, 12px);color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff)}.table__th{padding:var(--Size-3, 12px) var(--Size-3, 12px);background:var(--Gray-Gray-50, #f7f8fa);font-weight:var(--font-weight-bold, 700);color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px);text-transform:uppercase;letter-spacing:0.5px;white-space:nowrap;border-bottom:1px solid var(--Gray-Gray-100, #eceef4);user-select:none}.table__th--check{width:40px}.table__th--sortable{cursor:pointer}.table__th--sortable:hover{background:var(--Gray-Gray-100, #eceef4)}.table__th-inner{display:inline-flex;align-items:center;gap:4px}.table__tr{cursor:pointer;transition:background 0.15s}.table__tr:hover{background:var(--Gray-Gray-50, #f7f8fa)}.table__tr--selected{background:var(--Primary-Primary-50, #fff5eb)}.table--striped .table__tr:nth-child(even){background:var(--Gray-Gray-50, #f7f8fa)}.table--striped .table__tr:nth-child(even):hover{background:var(--Gray-Gray-100, #eceef4)}.table__td{padding:var(--Size-3, 12px);border-bottom:1px solid var(--Gray-Gray-100, #eceef4);vertical-align:middle}.table__td--check{width:40px}.table__td--empty{text-align:center;padding:var(--Size-8, 48px) var(--Size-4, 16px);color:var(--Gray-Gray-400, #858ea6)}.table__td--empty p{margin:var(--Size-2, 8px) 0 0}.skeleton{height:14px;background:linear-gradient(90deg, var(--Gray-Gray-100, #eceef4) 25%, var(--Gray-Gray-50, #f7f8fa) 50%, var(--Gray-Gray-100, #eceef4) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--Border-1, 4px)}.skeleton--sm{width:20px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}`;
+const dropiTableCss = () => `:host{display:block;width:100%;min-width:0}*,*::before,*::after{box-sizing:border-box}.table-container{width:100%;min-width:0;border-radius:var(--Border-3);padding:0 var(--Size-4) var(--Size-4) var(--Size-4);background-color:var(--Neutral-White)}.search-container{margin-block:var(--Size-5);display:flex;flex-direction:column;gap:var(--Size-4)}.table-title{padding-block:var(--Size-2);font-size:var(--font-size-m);font-weight:var(--font-weight-bold);color:var(--Gray-Gray-700);margin:0}.search-actions{display:flex;align-items:flex-end;gap:var(--Size-3);width:100%}.search-actions dropi-input{flex:1}.search-actions.only-filter{justify-content:flex-end}.table-tools{display:flex;justify-content:flex-end}.column-selector-container{position:relative}.column-selector-btn{min-width:40px;width:40px;height:40px;padding:0;border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);cursor:pointer;display:flex;align-items:center;justify-content:center}.column-selector-btn:hover{background:var(--Gray-Gray-50)}.column-selector-menu{position:absolute;top:calc(100% + 8px);right:0;width:min(320px, 88vw);border:1px solid var(--Gray-Gray-200);border-radius:var(--Border-2);background:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:20;padding:var(--Size-1)}.column-selector-footer{border-top:1px solid var(--Gray-Gray-100);margin-top:var(--Size-1);padding:var(--Size-2) var(--Size-4);display:flex;align-items:center}.column-selector-all{display:inline-flex;align-items:center;gap:var(--Size-2);color:var(--Gray-Gray-700);font-size:var(--font-size-s);cursor:pointer;user-select:none}.column-selector-option{display:flex;align-items:center;gap:var(--Size-2);padding:var(--Size-2) var(--Size-3);font-size:var(--font-size-s);color:var(--Gray-Gray-700);cursor:pointer;border-radius:var(--Border-1)}.column-selector-option:hover{background:var(--Gray-Gray-50)}.table-wrapper{overflow-x:auto;width:100%;position:relative}.table-wrapper.has-sticky-actions{width:100%}.table-wrapper::-webkit-scrollbar{height:6px}.table-wrapper::-webkit-scrollbar-track{background:transparent}.table-wrapper::-webkit-scrollbar-thumb{background:var(--Gray-Gray-200, #c3c9d9);border-radius:3px}.table-wrapper::-webkit-scrollbar-thumb:hover{background:var(--Gray-Gray-400, #858ea6)}.custom-table{width:100%;border-collapse:collapse}.custom-table th,.custom-table td{position:relative;padding:var(--Size-3);font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);color:var(--Gray-Gray-700)}.custom-table th::after,.custom-table td::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--Gray-Gray-100)}.custom-table th{height:55px;user-select:none}.custom-table th.sortable{cursor:pointer}.custom-table td{height:80px;min-width:100px;font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.headers-container{display:flex;flex-direction:column;align-items:center;gap:var(--Size-1)}.headers-container.align-left{align-items:flex-start}.headers-container.align-right{align-items:flex-end}.headers{display:flex;flex-wrap:nowrap;justify-content:space-around;align-items:center;gap:4px}.headers span{font-weight:var(--font-weight-bold);color:var(--Gray-Gray-600);font-size:var(--font-size-xs);text-align:center}.headers.align-left span{text-align:left}.headers.align-right span{text-align:right}.order-icons{display:flex;flex-direction:column}.order-icons dropi-icon{height:6px;display:flex}.checkbox-header{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:var(--Size-3) !important}.custom-table.has-checkbox td:first-child{width:fit-content;min-width:fit-content;max-width:fit-content;text-align:center;padding:8px !important}.table-row:hover{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.table-row:hover td:last-child{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.table-row.sub-row td:first-child{padding-left:2rem !important}.cell-content{display:inline-block;width:100%;text-align:left}td.actions,th.actions{position:sticky;right:0;z-index:2;background-color:var(--Neutral-White);width:120px;min-width:120px;max-width:120px;text-align:center}td.actions{vertical-align:middle}td.actions>div{display:flex !important;justify-content:center !important;align-items:center !important;width:100%;height:100%}.table-row:hover td.actions{background-color:var(--Gray-Gray-50);transition:background-color 0.3s ease}.actions-header{width:100%;text-align:center;user-select:none}.short-actions{display:flex;gap:var(--Size-2);align-items:center;justify-content:center}.action-icon{cursor:pointer}.action-button{position:relative}.actions-menu{position:absolute;top:0;right:80px;padding:var(--Size-2);border-radius:var(--Border-2);background-color:var(--Neutral-White);box-shadow:var(--Shadow-medium);z-index:10;animation:fadeIn 0.3s ease-in-out forwards}.action-item{padding:var(--Size-2);font-size:var(--font-size-xs);color:var(--Gray-Gray-600);height:45px;width:190px;display:flex;gap:var(--Size-4);align-items:center;justify-content:left;cursor:pointer;border-radius:var(--Border-1)}.action-item:hover{background-color:var(--Gray-Gray-50)}.table-labels{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:nowrap}.table-labels.multiline{white-space:pre;line-height:1.6}.text-wrap-label{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s);white-space:normal;word-break:break-word;overflow-wrap:break-word;line-height:1.5}.date-label{display:inline-flex;flex-direction:column}.date-label span{font-weight:var(--font-weight-regular);color:var(--Gray-Gray-600);white-space:nowrap;font-size:var(--font-size-s)}.flag-container{display:inline-flex;align-items:center;gap:var(--Size-3)}.flag-container span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-icon-label{display:inline-flex;flex-wrap:nowrap;gap:var(--Size-2);align-items:center}.text-icon-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.image-label{display:inline-flex;flex-direction:column;justify-content:center}.img-container{display:flex;width:24px;padding-bottom:var(--Size-1);align-items:center}.img-container img{border-radius:60px;height:24px;width:24px;object-fit:cover}.container-cell{display:inline-flex;flex-direction:column}.status-label{display:inline-flex;flex-direction:column;gap:var(--Size-1)}.status-dot{display:flex;gap:var(--Size-2);align-items:center}.status-text{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.status-description{font-weight:var(--font-weight-regular);font-size:var(--font-size-s);color:var(--Gray-Gray-600)}.dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot-low{background-color:var(--Success-Success-500)}.dot-medium{background-color:var(--Warning-Warning-500)}.dot-high{background-color:var(--Error-Error-500)}.low-opacity{opacity:0.5}.highlight-column{background:var(--Primary-Primary-50)}.text-link-label{display:flex;flex-wrap:nowrap;white-space:nowrap;gap:var(--Size-1)}.text-link-label span{color:var(--Gray-Gray-600);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.text-link-label a{color:var(--Info-Info-500);font-weight:var(--font-weight-regular);font-size:var(--font-size-s)}.empty-table{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:400px}.empty-message-container{display:flex;width:420px;padding:var(--Size-4);flex-direction:column;align-items:center;gap:var(--Size-4);text-align:center;color:var(--Gray-Gray-500);font-size:var(--font-size-s)}.pagination{margin-top:var(--Size-4);display:flex;justify-content:space-between;align-items:center}.page-size-selector{display:flex;gap:5px;align-items:baseline}.page-size-selector label{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-700)}.page-size-selector select{width:fit-content;height:29px;border-radius:var(--Border-2);padding:var(--Size-1);border:1px solid var(--Gray-Gray-200);color:var(--Gray-Gray-500);background:var(--Neutral-White);font-size:var(--font-size-xs);cursor:pointer}.total-results{font-weight:var(--font-weight-regular);font-size:var(--font-size-xs);color:var(--Gray-Gray-600)}.skeleton{height:14px;background:linear-gradient(90deg, var(--Gray-Gray-100) 25%, var(--Gray-Gray-50) 50%, var(--Gray-Gray-100) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--Border-1)}.skeleton--sm{width:20px}@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.search-actions{flex-direction:column;align-items:stretch}.column-selector-menu{left:0;right:0;width:100%;max-height:45vh;overflow-y:auto}.pagination{flex-direction:column;align-items:center;gap:var(--Size-3)}td.actions,th.actions{width:60px;min-width:60px}.table-wrapper.has-sticky-actions{width:calc(100% - 60px)}}`;
 
 const DropiTable = class {
     constructor(hostRef) {
@@ -10,30 +10,102 @@ const DropiTable = class {
         this.dropiSort = index.createEvent(this, "dropiSort", 7);
         this.dropiSelection = index.createEvent(this, "dropiSelection", 7);
         this.dropiRowClick = index.createEvent(this, "dropiRowClick", 7);
+        this.dropiSearch = index.createEvent(this, "dropiSearch", 7);
+        this.dropiPageChange = index.createEvent(this, "dropiPageChange", 7);
+        this.dropiPageSizeChange = index.createEvent(this, "dropiPageSizeChange", 7);
+        this.dropiAction = index.createEvent(this, "dropiAction", 7);
+        this.rowsSelected = index.createEvent(this, "rowsSelected", 7);
+        this.actionClicked = index.createEvent(this, "actionClicked", 7);
+        this.onPageChange = index.createEvent(this, "onPageChange", 7);
+        this.onSizeChange = index.createEvent(this, "onSizeChange", 7);
+        this.onSortChange = index.createEvent(this, "onSortChange", 7);
+        this.onSearchChange = index.createEvent(this, "onSearchChange", 7);
+        this.expandChildren = index.createEvent(this, "expandChildren", 7);
     }
-    /** Column definitions (array or JSON string) */
+    /** Column definitions */
     columns = [];
-    /** Row data (array or JSON string) */
+    /** Row data */
     rows = [];
-    /** Enable row selection (checkboxes) */
-    selectable = false;
+    /** Show checkbox column */
+    showCheckbox = false;
     /** Show loading skeleton */
     loading = false;
-    /** Text shown when no rows */
+    /** Empty state message */
     emptyMessage = 'No hay datos disponibles';
-    /** Stripe alternate rows */
-    striped = false;
+    /** Table title */
+    title = '';
+    /** Show search input */
+    showSearch = false;
+    /** Show column selector button */
+    showColumnSelector = false;
+    /** Show paginator */
+    showPaginator = false;
+    /** Page sizes options */
+    pageSizes = [5, 10, 25, 50];
+    /** Current page (1-based) */
+    currentPage = 1;
+    /** Total pages */
+    totalPages = 1;
+    /** Show row actions (3-dot menu or inline icons) */
+    rowActions = [];
+    // ── Angular-parity props ─────────────────────────────────────
+    /**
+     * Column definitions — matches Angular `headers: DropiTableColumn[]`.
+     * Alias of `columns`; when provided, takes precedence.
+     */
+    headers = [];
+    /**
+     * Row data — matches Angular `data: DropiTableRow[]`.
+     * Alias of `rows`; when provided, takes precedence.
+     */
+    data = [];
+    /** Pre-selected row ids (matches Angular `selectedRowIds`) */
+    selectedRowIds = null;
+    /** Child / expanded rows data (matches Angular `childData`) */
+    childData = [];
+    /** Visible child rows (matches Angular `visibleRowsChildrens`) */
+    visibleRowsChildrens = [];
+    /** Table-level configuration object (matches Angular `dropiTableConfiguration`) */
+    dropiTableConfiguration = null;
+    /** Backend pagination / filter params (matches Angular `dropiTableBackendParams`) */
+    dropiTableBackendParams = null;
+    /** Use cursor-based pagination instead of offset (matches Angular `isCursorPagination`) */
+    isCursorPagination = false;
     parsedColumns = [];
     parsedRows = [];
+    parsedPageSizes = [5, 10, 25, 50];
+    parsedRowActions = [];
     sortKey = '';
     sortDir = null;
+    sortAsc = true;
     selectedKeys = new Set();
-    /** Emitted when sort changes. e.detail = { key, dir } */
+    searchTerm = '';
+    pageSize = 5;
+    showColumnMenu = false;
+    hiddenColumns = new Set();
+    openActionRow = -1;
     dropiSort;
-    /** Emitted when selection changes. e.detail = selected row indices */
     dropiSelection;
-    /** Emitted when a row is clicked. e.detail = { row, index } */
     dropiRowClick;
+    dropiSearch;
+    dropiPageChange;
+    dropiPageSizeChange;
+    dropiAction;
+    // ── Angular-parity events ────────────────────────────────────
+    /** Matches Angular `rowsSelected` */
+    rowsSelected;
+    /** Matches Angular `actionClicked` */
+    actionClicked;
+    /** Matches Angular `onPageChange` */
+    onPageChange;
+    /** Matches Angular `onSizeChange` */
+    onSizeChange;
+    /** Matches Angular `onSortChange` */
+    onSortChange;
+    /** Matches Angular `onSearchChange` */
+    onSearchChange;
+    /** Matches Angular `expandChildren` */
+    expandChildren;
     columnsChanged(val) {
         this.parsedColumns = typeof val === 'string' ? JSON.parse(val) : (val || []);
     }
@@ -41,16 +113,58 @@ const DropiTable = class {
         this.parsedRows = typeof val === 'string' ? JSON.parse(val) : (val || []);
         this.selectedKeys = new Set();
     }
+    pageSizesChanged(val) {
+        this.parsedPageSizes = typeof val === 'string' ? JSON.parse(val) : (val || [5, 10, 25, 50]);
+        this.pageSize = this.parsedPageSizes[0] ?? 5;
+    }
+    rowActionsChanged(val) {
+        this.parsedRowActions = typeof val === 'string' ? JSON.parse(val) : (val || []);
+    }
+    headersChanged(val) {
+        // `headers` is an alias for `columns`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0)
+            this.parsedColumns = parsed;
+    }
+    dataChanged(val) {
+        // `data` is an alias for `rows`
+        const parsed = typeof val === 'string' ? JSON.parse(val) : (val || []);
+        if (parsed.length > 0) {
+            this.parsedRows = parsed;
+            this.selectedKeys = new Set();
+        }
+    }
     componentWillLoad() {
-        this.columnsChanged(this.columns);
-        this.rowsChanged(this.rows);
+        // SSR hydration guard: if no data props provided, preserve server-rendered DOM
+        if (this.data == null && this.rows == null && this.headers == null && this.columns == null)
+            return;
+        // headers/data take precedence over columns/rows when provided
+        const headersSrc = (Array.isArray(this.headers) ? this.headers : []).length
+            ? this.headers : this.columns;
+        const dataSrc = (Array.isArray(this.data) ? this.data : []).length
+            ? this.data : this.rows;
+        this.columnsChanged(headersSrc);
+        this.rowsChanged(dataSrc);
+        this.pageSizesChanged(this.pageSizes);
+        this.rowActionsChanged(this.rowActions);
+    }
+    get visibleColumns() {
+        const hidden = this.hiddenColumns ?? new Set();
+        return (this.parsedColumns ?? []).filter(c => !hidden.has(c.key));
+    }
+    get filteredRows() {
+        if (!this.searchTerm)
+            return this.parsedRows;
+        const q = this.searchTerm.toLowerCase();
+        return this.parsedRows.filter(row => Object.values(row).some(v => String(v ?? '').toLowerCase().includes(q)));
     }
     get sortedRows() {
+        const rows = this.filteredRows;
         if (!this.sortKey || !this.sortDir)
-            return this.parsedRows;
+            return rows;
         const key = this.sortKey;
         const dir = this.sortDir === 'asc' ? 1 : -1;
-        return [...this.parsedRows].sort((a, b) => {
+        return [...rows].sort((a, b) => {
             const av = a[key] ?? '';
             const bv = b[key] ?? '';
             if (av < bv)
@@ -60,19 +174,28 @@ const DropiTable = class {
             return 0;
         });
     }
+    get pagedRows() {
+        if (!this.showPaginator)
+            return this.sortedRows;
+        const start = (this.currentPage - 1) * this.pageSize;
+        return this.sortedRows.slice(start, start + this.pageSize);
+    }
     handleSort(col) {
         if (!col.sortable)
             return;
         if (this.sortKey === col.key) {
             this.sortDir = this.sortDir === 'asc' ? 'desc' : this.sortDir === 'desc' ? null : 'asc';
+            this.sortAsc = this.sortDir !== 'desc';
             if (this.sortDir === null)
                 this.sortKey = '';
         }
         else {
             this.sortKey = col.key;
             this.sortDir = 'asc';
+            this.sortAsc = true;
         }
         this.dropiSort.emit({ key: this.sortKey, dir: this.sortDir });
+        this.onSortChange.emit({ key: this.sortKey, dir: this.sortDir });
     }
     toggleRow(idx) {
         const next = new Set(this.selectedKeys);
@@ -81,34 +204,74 @@ const DropiTable = class {
         else
             next.add(idx);
         this.selectedKeys = next;
-        this.dropiSelection.emit(Array.from(next));
+        const selected = Array.from(next);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
     toggleAll(checked) {
-        this.selectedKeys = checked
-            ? new Set(this.sortedRows.map((_, i) => i))
-            : new Set();
-        this.dropiSelection.emit(Array.from(this.selectedKeys));
+        this.selectedKeys = checked ? new Set(this.pagedRows.map((_, i) => i)) : new Set();
+        const selected = Array.from(this.selectedKeys);
+        this.dropiSelection.emit(selected);
+        this.rowsSelected.emit(selected.map(i => this.pagedRows[i]));
     }
-    sortIcon(col) {
-        if (!col.sortable)
-            return null;
-        if (this.sortKey !== col.key) {
-            return index.h("dropi-icon", { name: "Sort", width: "12px", height: "12px", color: "Gray-Gray-300" });
+    renderCellValue(value) {
+        if (value === null || value === undefined)
+            return '—';
+        if (typeof value === 'object' && value.type) {
+            switch (value.type) {
+                case 'tag':
+                    return index.h("dropi-tag", { type: "secondary", state: value.typeTag, text: value.value });
+                case 'date':
+                    return (index.h("div", { class: "date-label" }, index.h("span", null, new Date(value.value).toLocaleDateString('es-CO')), !value.hideTime && index.h("span", null, new Date(value.value).toLocaleTimeString('es-CO', { hour: '2-digit', minute: '2-digit' }))));
+                case 'country':
+                    return (index.h("div", { class: "flag-container" }, value.flag && index.h("dropi-country-flags", { width: "24", height: "24", country: value.flag, style: { display: 'inline-flex' } }), index.h("span", null, value.value)));
+                case 'textIcon':
+                    return (index.h("div", { class: "text-icon-label" }, index.h("dropi-icon", { name: value.icon, width: "24px", height: "24px", color: value.iconColor || 'Gray-Gray-500' }), value.value && index.h("span", null, value.value)));
+                case 'status':
+                    return (index.h("div", { class: "status-label" }, index.h("div", { class: "status-dot" }, index.h("div", { class: `dot dot-${(value.status || '').toLowerCase()}` }), index.h("span", { class: "status-text" }, value.status)), value.value && index.h("span", { class: "status-description" }, value.value)));
+                case 'image':
+                    return (index.h("div", { class: "image-label" }, index.h("div", { class: "img-container" }, index.h("img", { src: value.imageUrl, alt: value.value })), index.h("span", null, value.value)));
+                case 'textWrap':
+                    return index.h("div", { class: "text-wrap-label", style: { maxWidth: value.maxWidth || '220px' } }, value.value);
+                default:
+                    return index.h("span", { class: "table-labels" }, String(value.value ?? '—'));
+            }
         }
-        return this.sortDir === 'asc'
-            ? index.h("dropi-icon", { name: "Arrow-Up-2", width: "12px", height: "12px", color: "Primary-Primary-500" })
-            : index.h("dropi-icon", { name: "Arrow-Down-2", width: "12px", height: "12px", color: "Primary-Primary-500" });
+        return index.h("span", { class: "table-labels" }, String(value));
     }
     render() {
-        const rows = this.sortedRows;
+        // SSR hydration: if parsedRows not yet initialized, preserve server-rendered shadow DOM
+        if (this.parsedRows === undefined)
+            return null;
+        const rows = this.pagedRows;
         const allSelected = rows.length > 0 && this.selectedKeys.size === rows.length;
-        return (index.h("div", { key: '3e06da209d1f71b8a4a250f4bcd8a8213f34781d', class: "table-wrap" }, index.h("table", { key: '20056c30e2652f2a405eeb00954dd7b9c9b5924b', class: { 'table': true, 'table--striped': this.striped } }, index.h("thead", { key: '1a1ea1914f81d1ef8814f202de4d60308801dc1d' }, index.h("tr", { key: '22447d7fef0cf22c27c6249570c454d44b0865d3' }, this.selectable && (index.h("th", { key: 'd51aa876d97e01840a5adc34a5ec53f30fc2cac6', class: "table__th table__th--check" }, index.h("dropi-checkbox", { key: '192639cf8599dc5f3b095092a403509050e43efa', checked: allSelected, onDropiChange: (e) => this.toggleAll(e.detail) }))), this.parsedColumns.map(col => (index.h("th", { class: {
-                'table__th': true,
-                'table__th--sortable': !!col.sortable,
-            }, style: { width: col.width, textAlign: col.align || 'left' }, onClick: () => this.handleSort(col) }, index.h("span", { class: "table__th-inner" }, col.label, this.sortIcon(col))))))), index.h("tbody", { key: '93f65647369b59f913b381f541a18a215e8e0e9a' }, this.loading ? (Array.from({ length: 5 }).map(() => (index.h("tr", { class: "table__tr--skeleton" }, this.selectable && index.h("td", { class: "table__td" }, index.h("div", { class: "skeleton skeleton--sm" })), this.parsedColumns.map(() => (index.h("td", { class: "table__td" }, index.h("div", { class: "skeleton" })))))))) : rows.length === 0 ? (index.h("tr", null, index.h("td", { class: "table__td table__td--empty", colSpan: this.parsedColumns.length + (this.selectable ? 1 : 0) }, index.h("dropi-icon", { name: "Document", width: "24px", height: "24px", color: "Gray-Gray-300" }), index.h("p", null, this.emptyMessage)))) : (rows.map((row, i) => (index.h("tr", { class: {
-                'table__tr': true,
-                'table__tr--selected': this.selectedKeys.has(i),
-            }, onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.selectable && (index.h("td", { class: "table__td table__td--check", onClick: (e) => e.stopPropagation() }, index.h("dropi-checkbox", { checked: this.selectedKeys.has(i), onDropiChange: () => this.toggleRow(i) }))), this.parsedColumns.map(col => (index.h("td", { class: "table__td", style: { textAlign: col.align || 'left' } }, row[col.key] ?? '—')))))))))));
+        const hasActions = this.parsedRowActions.length > 0;
+        const cols = this.visibleColumns;
+        return (index.h("div", { class: "table-container" }, (this.showSearch || this.showColumnSelector || this.title) && (index.h("div", { class: "search-container" }, this.title && index.h("h3", { class: "table-title" }, this.title), index.h("div", { class: `search-actions${this.showSearch ? '' : ' only-filter'}` }, this.showSearch && (index.h("dropi-input", { placeholder: "Buscar", value: this.searchTerm, onOnInput: (e) => {
+                this.searchTerm = e.detail;
+                this.dropiSearch.emit(e.detail);
+                this.onSearchChange.emit(e.detail);
+            } })), this.showColumnSelector && (index.h("div", { class: "table-tools" }, index.h("div", { class: "column-selector-container" }, index.h("button", { class: "column-selector-btn", onClick: () => this.showColumnMenu = !this.showColumnMenu }, index.h("dropi-icon", { name: "list-table", width: "20px", height: "20px", color: "Gray-Gray-500" })), this.showColumnMenu && (index.h("div", { class: "column-selector-menu" }, this.parsedColumns.map(col => (index.h("div", { class: "column-selector-option", onClick: () => {
+                const next = new Set(this.hiddenColumns);
+                if (next.has(col.key))
+                    next.delete(col.key);
+                else
+                    next.add(col.key);
+                this.hiddenColumns = next;
+            } }, index.h("dropi-checkbox", { checked: !this.hiddenColumns.has(col.key) }), index.h("span", null, col.label)))), index.h("div", { class: "column-selector-footer" }, index.h("div", { class: "column-selector-all", onClick: () => {
+                this.hiddenColumns = this.hiddenColumns.size === 0
+                    ? new Set(this.parsedColumns.map(c => c.key))
+                    : new Set();
+            } }, index.h("dropi-checkbox", { checked: this.hiddenColumns.size === 0 }), index.h("span", null, "Mostrar / Ocultar todo"))))))))))), index.h("div", { class: `table-wrapper${hasActions ? ' has-sticky-actions' : ''}` }, index.h("table", { class: `custom-table${this.showCheckbox ? ' has-checkbox' : ''}` }, index.h("thead", null, index.h("tr", null, this.showCheckbox && (index.h("th", { class: "checkbox-header" }, index.h("dropi-checkbox", { checked: allSelected, onOnChange: (e) => this.toggleAll(e.detail) }))), cols.map(col => (index.h("th", { class: { sortable: !!col.sortable, 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { textAlign: col.align || 'center', minWidth: col.minWidth, maxWidth: col.maxWidth }, onClick: () => this.handleSort(col) }, index.h("div", { class: `headers-container${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("div", { class: `headers${col.align === 'left' ? ' align-left' : col.align === 'right' ? ' align-right' : ''}` }, index.h("span", null, col.label), col.sortable && (index.h("div", { class: "order-icons" }, index.h("dropi-icon", { name: "Caret-up", width: "12px", height: "12px", color: this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' }), index.h("dropi-icon", { name: "Caret-down", width: "12px", height: "12px", color: !this.sortAsc ? 'Gray-Gray-500' : 'Gray-Gray-200' })))))))), hasActions && index.h("th", { class: "actions-header actions" }, "Acciones"))), index.h("tbody", null, this.loading ? (Array.from({ length: 5 }).map(() => (index.h("tr", { class: "table-row" }, this.showCheckbox && index.h("td", null, index.h("div", { class: "skeleton skeleton--sm" })), cols.map(() => index.h("td", null, index.h("div", { class: "skeleton" }))), hasActions && index.h("td", null))))) : rows.length === 0 ? (index.h("tr", null, index.h("td", { colSpan: cols.length + (this.showCheckbox ? 1 : 0) + (hasActions ? 1 : 0) }, index.h("div", { class: "empty-table" }, index.h("div", { class: "empty-message-container" }, this.emptyMessage))))) : (rows.map((row, i) => (index.h("tr", { class: "table-row", onClick: () => this.dropiRowClick.emit({ row, index: i }) }, this.showCheckbox && (index.h("td", { onClick: (e) => e.stopPropagation() }, index.h("dropi-checkbox", { checked: this.selectedKeys.has(i), onOnChange: () => this.toggleRow(i) }))), cols.map(col => (index.h("td", { class: { 'low-opacity': !!col.disabledColumn, 'highlight-column': !!col.highlightColumn }, style: { minWidth: col.minWidth, maxWidth: col.maxWidth, overflow: col.maxWidth ? 'hidden' : undefined } }, index.h("div", { class: "cell-content", style: { textAlign: col.align || 'center' } }, this.renderCellValue(row[col.key]))))), hasActions && (index.h("td", { class: "action-button actions", onClick: (e) => e.stopPropagation() }, this.parsedRowActions.length > 3 ? (index.h("div", { style: { display: "flex", justifyContent: "center", width: "100%" } }, index.h("dropi-icon", { class: "action-icon", name: "Menu-dots-vertical", width: "24px", height: "24px", color: "Gray-Gray-500", onClick: () => this.openActionRow = this.openActionRow === i ? -1 : i }), this.openActionRow === i && (index.h("div", { class: "actions-menu" }, this.parsedRowActions.map(action => (index.h("div", { class: "action-item", onClick: () => { this.openActionRow = -1; this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } }, index.h("dropi-icon", { name: action.icon, width: "20px", height: "20px", color: action.iconColor || 'Gray-Gray-500' }), action.label))))))) : (index.h("div", { class: "short-actions" }, this.parsedRowActions.map(action => (index.h("dropi-icon", { class: "action-icon", name: action.icon, width: "24px", height: "24px", color: action.iconColor || 'Gray-Gray-500', onClick: () => { this.dropiAction.emit({ row, action }); this.actionClicked.emit({ row, action }); } })))))))))))))), this.showPaginator && (index.h("div", { class: "pagination" }, index.h("div", { class: "page-size-selector" }, index.h("label", null, "Mostrar"), index.h("select", { onChange: (e) => {
+                this.pageSize = Number(e.target.value);
+                this.currentPage = 1;
+                this.dropiPageSizeChange.emit(this.pageSize);
+                this.onSizeChange.emit(this.pageSize);
+            } }, this.parsedPageSizes.map(s => (index.h("option", { value: s, selected: this.pageSize === s }, s))))), index.h("dropi-paginator", { totalPages: this.totalPages, currentPage: this.currentPage, onPageChange: (e) => {
+                this.currentPage = e.detail;
+                this.dropiPageChange.emit(e.detail);
+                this.onPageChange.emit(e.detail);
+            } })))));
     }
     static get watchers() { return {
         "columns": [{
@@ -116,6 +279,18 @@ const DropiTable = class {
             }],
         "rows": [{
                 "rowsChanged": 0
+            }],
+        "pageSizes": [{
+                "pageSizesChanged": 0
+            }],
+        "rowActions": [{
+                "rowActionsChanged": 0
+            }],
+        "headers": [{
+                "headersChanged": 0
+            }],
+        "data": [{
+                "dataChanged": 0
             }]
     }; }
 };

package/dist/cjs/dropi-tabs.cjs.entry.js

@@ -1,37 +1,39 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White,#fff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-m,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:300;color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xs,10px);font-weight:var(--font-weight-medium,500);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background:var(--Primary-Primary-100,#fde8d0);color:var(--Primary-Primary-500,#f49a3d)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
+const dropiTabsCss = () => `:host{display:block;width:100%}*,*::before,*::after{box-sizing:border-box}.tabs-container{display:flex;flex-wrap:nowrap;overflow-x:auto;width:100%;height:52px;scrollbar-width:none}.tabs-container::-webkit-scrollbar{width:0;height:0}.tab-item{padding:var(--Size-4,16px) var(--Size-5,20px);background:var(--Neutral-White, #ffffff);border-bottom:2px solid var(--Gray-Gray-100,#e6eaf2);cursor:pointer;display:flex;gap:16px;align-items:center;white-space:nowrap;flex-shrink:0;transition:border-color 0.15s ease;user-select:none}.tab-item:hover:not(.tab-item--disabled):not(.tab-item--active){border-color:var(--Gray-Gray-300,#a3abbf)}.tab-item--active{border-bottom:2px solid var(--Primary-Primary-500,#f49a3d)}.tab-item--disabled{background:rgba(223,228,237,0.22);cursor:not-allowed;opacity:0.7;pointer-events:none}.tab-label-row{display:flex;align-items:center;gap:8px}.tab-label{font-size:var(--font-size-s,14px);font-weight:var(--font-weight-bold,700);color:var(--Gray-Gray-400,#858ea6);line-height:20px}.tab-item--active .tab-label{color:var(--Gray-Gray-600,#475066)}.tab-item--disabled .tab-label{font-weight:var(--font-weight-light);color:var(--Gray-Gray-300,#a3abbf)}.tab-counter{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;font-size:var(--font-size-xxs);font-weight:var(--font-weight-bold);line-height:var(--lineheight-simple);background:var(--Gray-Gray-100,#e6eaf2);color:var(--Gray-Gray-500,#69738c)}.tab-counter--active{background-color:var(--Primary-Primary-500, #F49A3D);color:var(--Neutral-White)}.tab-status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background-color:var(--Primary-Primary-500, #f49a3d);flex-shrink:0}`;
 
 const DropiTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dropiTabChange = index.createEvent(this, "dropiTabChange", 7);
+        this.onIndexChanged = index.createEvent(this, "onIndexChanged", 7);
     }
-    /** Array of TabItem or JSON string */
-    tabs = [];
+    /** Array of TabItem or JSON string (matches Angular 'configuration') */
+    configuration = [];
     /** Id of the active tab */
     activeTab = 0;
     /** Whether to show a check/pending icon per tab */
     showIcon = false;
+    /** Stop tab action programmatically */
+    stopAction = false;
     /** Emitted on tab click. e.detail = TabItem */
-    dropiTabChange;
+    onIndexChanged;
     parsedTabs = [];
     tabsChanged(val) {
         this.parsedTabs = typeof val === 'string' ? JSON.parse(val) : (val ?? []);
     }
     componentWillLoad() {
-        this.tabsChanged(this.tabs);
+        this.tabsChanged(this.configuration);
     }
     handleClick(tab) {
-        if (tab.disabled)
+        if (tab.disabled || this.stopAction)
             return;
         this.activeTab = tab.id;
-        this.dropiTabChange.emit(tab);
+        this.onIndexChanged.emit(tab);
     }
     render() {
-        return (index.h("div", { key: '9db1e2f4fdd15fc4ea4407d83fe33c562270acec', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
+        return (index.h("div", { key: '337040015b29581ebb15ac347bb62220ed0a2d4d', class: "tabs-container", role: "tablist" }, this.parsedTabs.map(tab => {
             const isActive = tab.id === this.activeTab;
             return (index.h("div", { role: "tab", "aria-selected": String(isActive), class: { 'tab-item': true, 'tab-item--active': isActive && !tab.disabled, 'tab-item--disabled': !!tab.disabled }, onClick: () => this.handleClick(tab) }, index.h("span", { class: "tab-label-row" }, index.h("span", { class: "tab-label" }, tab.label), tab.counter !== undefined && tab.counter !== null && (index.h("span", { class: { 'tab-counter': true, 'tab-counter--active': isActive } }, tab.counter))), this.showIcon && (tab.completed
                 ? index.h("dropi-icon", { name: "Check-circle", width: "12px", height: "12px", color: "Success-Success-500" })
@@ -39,7 +41,7 @@ const DropiTabs = class {
         })));
     }
     static get watchers() { return {
-        "tabs": [{
+        "configuration": [{
                 "tabsChanged": 0
             }]
     }; }

package/dist/cjs/dropi-tag-type-product.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiTagTypeProductCss = () => `:host{display:inline-block}.type-variation{border-radius:4px;background:#f1b44c;padding:2px 6px;font-size:12px;color:#fff;text-transform:capitalize;font-weight:400;width:fit-content}`;
+const dropiTagTypeProductCss = () => `:host{display:inline-block}.type-variation{border-radius:4px;background:var(--Warning-Warning-500);padding:2px 6px;font-size:var(--font-size-xs);color:var(--Neutral-White);text-transform:capitalize;font-weight:var(--font-weight-regular);width:fit-content}`;
 
 const DropiTagTypeProduct = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const DropiTagTypeProduct = class {
     /** Label text. Default: VARIABLE */
     label = 'VARIABLE';
     render() {
-        return index.h("div", { key: '7002748963348a2361665d0d307f4d8eb3a24e3a', class: "type-variation" }, this.label);
+        return index.h("div", { key: 'ae1cd50cd3e82180704ae4f5406b4dc13ffbd12c', class: "type-variation" }, this.label);
     }
 };
 DropiTagTypeProduct.style = dropiTagTypeProductCss();

package/dist/cjs/dropi-text-area.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-DcOH2ZjX.js');
+var index = require('./index-C8kwDvpf.js');
 
-const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative}textarea.form-control{box-sizing:border-box;width:100%;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #fff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
+const dropiTextAreaCss = () => `:host{display:flex;flex-direction:column;width:100%}*,*::before,*::after{box-sizing:border-box}.textarea-wrapper{position:relative;width:100%;display:flex;flex-direction:column;gap:4px}.textarea-wrapper label{font-size:var(--font-size-xs, 10px);font-weight:var(--font-weight-regular, 400);color:var(--Gray-Gray-600, #475066)}.asterisk{color:var(--Error-Error-500, #f46a6b)}.textarea-container{position:relative;display:flex;flex-direction:column}textarea.form-control{box-sizing:border-box;width:100%;flex:1;overflow:auto;padding:var(--Size-3, 12px);border:1px solid var(--Gray-Gray-200, #c3c9d9);border-radius:var(--Border-2, 8px);font-size:var(--font-size-s, 12px);font-family:inherit;color:var(--Gray-Gray-700, #32394d);background:var(--Neutral-White, #ffffff);transition:border-color 0.3s ease-in-out;outline:none;appearance:none}textarea.form-control:focus{border-color:var(--Info-Info-500, #50a5f1)}textarea.form-control:focus::placeholder{color:var(--Gray-Gray-400, #858ea6)}textarea.form-control-valid{border-color:var(--Gray-Gray-400, #858ea6) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control-invalid{border-color:var(--Error-Error-500, #f46a6b) !important;color:var(--Gray-Gray-600, #475066)}textarea.form-control:disabled{border-color:var(--Gray-Gray-200, #c3c9d9) !important;color:var(--Gray-Gray-400, #858ea6);background-color:var(--Gray-Gray-50, #f7f8fa);cursor:not-allowed}.char-counter{position:absolute;bottom:10px;right:16px;font-size:var(--font-size-xs, 10px);color:var(--Gray-Gray-500, #69738c);pointer-events:none}.form-control-helper{display:flex;gap:4px;align-items:center}.form-control-helper span{display:block;color:var(--Gray-Gray-600, #475066);font-size:var(--font-size-xs, 10px)}.invalid-color{color:var(--Error-Error-500, #f46a6b) !important}`;
 
 const DropiTextArea = class {
     constructor(hostRef) {
@@ -21,7 +21,7 @@ const DropiTextArea = class {
     }
     internals;
     /** Input id. Defaults to label. */
-    inputId = '';
+    id = '';
     /** Name for native form submission */
     name = '';
     /** Label shown above the textarea */
@@ -31,9 +31,9 @@ const DropiTextArea = class {
     /** Current value (controlled) */
     value = '';
     /** Max character length */
-    maxlength;
+    maxLength;
     /** Min character length */
-    minlength = 0;
+    minLength = 0;
     /** Number of visible rows */
     rows = 4;
     /** Resize behavior */
@@ -43,11 +43,37 @@ const DropiTextArea = class {
     /** Mark as required */
     required = false;
     /** Show the required asterisk */
-    showAsterisk = false;
+    showObligatoryAsterisk = false;
     /** Helper / error text below the field */
-    helperText = '';
+    textHelper = '';
     /** Mark the field as invalid (consumer-controlled) */
-    invalid = false;
+    hasError = false;
+    /**
+     * 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 = null;
+    textAreaPropertiesChanged(val) {
+        if (!val)
+            return;
+        if (val.id !== undefined)
+            this.id = val.id;
+        if (val.label !== undefined)
+            this.label = val.label;
+        if (val.placeholder !== undefined)
+            this.placeholder = val.placeholder;
+        if (val.maxLength !== undefined)
+            this.maxLength = val.maxLength;
+        if (val.minLength !== undefined)
+            this.minLength = val.minLength;
+        if (val.textHelper !== undefined)
+            this.textHelper = val.textHelper;
+        if (val.rows !== undefined)
+            this.rows = val.rows;
+        if (val.resize !== undefined)
+            this.resize = val.resize;
+    }
     touched = false;
     /** Emitted on every keystroke */
     dropiInput;
@@ -60,6 +86,8 @@ const DropiTextArea = class {
     }
     componentWillLoad() {
         this.internals.setFormValue(this.value ?? '');
+        if (this.textAreaProperties)
+            this.textAreaPropertiesChanged(this.textAreaProperties);
     }
     handleInput(e) {
         const val = e.target.value;
@@ -73,26 +101,29 @@ const DropiTextArea = class {
         this.dropiBlur.emit();
     }
     get resolvedId() {
-        return this.inputId || this.label;
+        return this.id || this.label;
     }
     get isInvalid() {
-        return this.invalid && this.touched;
+        return this.hasError && this.touched;
     }
     get charCount() {
         return this.value?.length ?? 0;
     }
     render() {
-        const showAsterisk = this.required && this.showAsterisk && !this.disabled;
-        const showHelper = this.helperText || this.isInvalid;
-        return (index.h("div", { key: 'ea3be8cb6a7316f6c7e7b41b51e14db24654db7a', class: "textarea-wrapper" }, this.label && (index.h("label", { key: 'd6b48ca844611e26ac378070863334a481179cd5', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && index.h("span", { key: 'a3f28346716188fd46ae411e54a64242856c9ec1', class: "asterisk" }, " *"))), index.h("div", { key: 'c0532ad518a267ff14884c687e49b005ff39c381', class: "textarea-container" }, index.h("textarea", { key: '3bdd909fb0b1710bba23d348fe46058414a0f244', id: this.resolvedId, class: {
+        const showAsterisk = this.required && this.showObligatoryAsterisk && !this.disabled;
+        const showHelper = this.textHelper || this.isInvalid;
+        return (index.h("div", { key: 'd2333346006f94a5582d49cb2f34237b8b97d039', class: "textarea-wrapper" }, this.label && (index.h("label", { key: '0963e3d312bec5a96b4b3f8387c07ecfd97d6906', htmlFor: this.resolvedId, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : 'var(--Gray-Gray-600)' } }, this.label, showAsterisk && index.h("span", { key: '1e9bfecb2669fe2c6cd8b74a153fe21bbf8053b9', class: "asterisk" }, " *"))), index.h("div", { key: '6ac5236d0cb7ec4322339048eb364b7c41bfea5e', class: "textarea-container" }, index.h("textarea", { key: '94a18a7af80592659237d54e5897fcbd8b4aa47c', id: this.resolvedId, class: {
                 'form-control': true,
                 'Body-M-Regular': true,
                 'form-control-valid': !this.isInvalid && this.touched && !!this.value,
                 'form-control-invalid': this.isInvalid,
-            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxlength, minLength: this.minlength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxlength > 0 && (index.h("div", { key: '7c4f136b776dd9d5d930d690401d422d856139d1', class: "char-counter" }, this.charCount, "/", this.maxlength))), showHelper && (index.h("div", { key: 'e72f689564b1c58cb706b5ad607044ec7cc267e7', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '93308a1c97c96da20dd246ecc23c10ed6fd656a8', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: '18df68d1cb37302d3bfeb5742432bf89806e0d98', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.helperText)))));
+            }, rows: this.rows, placeholder: this.placeholder, maxLength: this.maxLength, minLength: this.minLength, disabled: this.disabled, required: this.required, style: { resize: this.resize }, onInput: (e) => this.handleInput(e), onFocus: () => this.dropiFocus.emit(), onBlur: () => this.handleBlur() }, this.value), this.maxLength > 0 && (index.h("div", { key: 'e3271eeea7e85a64454c344986e36c85197f3782', class: "char-counter" }, this.charCount, "/", this.maxLength))), showHelper && (index.h("div", { key: 'c4b83072b96e56b45b6afc8209f4d124cb6d6bf3', class: "form-control-helper" }, this.isInvalid && (index.h("dropi-icon", { key: '98aef0a346f1ca3fe33cf9f2e6519f61aa787374', name: "Warning-circle", width: "12px", height: "12px", color: "Error-Error-500" })), index.h("span", { key: 'f820d6043b390dc22d1b7ee1ee58dfd9a3fcd333', class: { 'invalid-color': this.isInvalid }, style: { color: this.disabled ? 'var(--Gray-Gray-400)' : undefined } }, this.textHelper)))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
+        "textAreaProperties": [{
+                "textAreaPropertiesChanged": 0
+            }],
         "value": [{
                 "valueChanged": 0
             }]