codexly-ui 0.10.20 → 0.10.22

package/fesm2022/codexly-ui.mjs

@@ -3898,7 +3898,7 @@ class ClxSelectComponent {
     }, ...(ngDevMode ? [{ debugName: "_singleDisplayClass" }] : /* istanbul ignore next */ []));
     _tagContainerClass = computed(() => {
         const s = this._sizeConfig();
-        return `flex flex-wrap flex-1 items-center ${s.py} pl-3 pr-10 ${s.gap}`;
+        return `flex flex-wrap flex-1 items-center min-w-0 ${s.py} pl-3 ${s.gap}`;
     }, ...(ngDevMode ? [{ debugName: "_tagContainerClass" }] : /* istanbul ignore next */ []));
     _placeholderClass = computed(() => `${this._sizeConfig().text} ${CLX_TEXT_IDLE}`, ...(ngDevMode ? [{ debugName: "_placeholderClass" }] : /* istanbul ignore next */ []));
     _chevronBtnClass = computed(() => this._isOpen() ? 'transition-transform duration-200 rotate-180' : 'transition-transform duration-200', ...(ngDevMode ? [{ debugName: "_chevronBtnClass" }] : /* istanbul ignore next */ []));
@@ -4059,8 +4059,10 @@ class ClxSelectComponent {
         <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+      <!-- Right controls: clear + chevron — in normal flow (not absolute) so they never overlap
+           wrapped tag chips in multi mode; reserving fixed pr-* space instead couldn't account
+           for however many rows the chips wrap into. -->
+      <div class="shrink-0 flex items-center gap-0.5 pr-2">
         @if (_hasValue() && !_disabled() && multiple()) {
           <button
             clx-button
@@ -4208,8 +4210,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
         <span [class]="_singleDisplayClass()" [style.font-family]="_displayFontFamily()">{{ _displayValue() }}</span>
       }
 
-      <!-- Right controls: clear + chevron -->
-      <div class="absolute right-2 top-1/2 -translate-y-1/2 flex items-center gap-0.5">
+      <!-- Right controls: clear + chevron — in normal flow (not absolute) so they never overlap
+           wrapped tag chips in multi mode; reserving fixed pr-* space instead couldn't account
+           for however many rows the chips wrap into. -->
+      <div class="shrink-0 flex items-center gap-0.5 pr-2">
         @if (_hasValue() && !_disabled() && multiple()) {
           <button
             clx-button
@@ -13175,6 +13179,13 @@ class ClxTableComponent {
         const start = this.pageIndex() * this.pageSize();
         return filtered.slice(start, start + this.pageSize());
     }, ...(ngDevMode ? [{ debugName: "_paginatedData" }] : /* istanbul ignore next */ []));
+    /** The `index` passed into a cell template must refer to the row's position in the original
+     *  `data()` array the consumer owns (e.g. to splice/edit it directly) — never the position
+     *  within the current page, which silently gave every page's first row index 0 and broke
+     *  edit/remove handlers built around `data()[index]` as soon as a second page existed. */
+    _absoluteIndex(item) {
+        return this.data().indexOf(item);
+    }
     _totalItems = computed(() => this.serverSide() ? (this.totalItems() ?? this.data().length) : this._filteredData().length, ...(ngDevMode ? [{ debugName: "_totalItems" }] : /* istanbul ignore next */ []));
     _emptyTitle = computed(() => this.emptyTitle() || (this.searchQuery() ? 'Sin resultados' : 'No hay datos'), ...(ngDevMode ? [{ debugName: "_emptyTitle" }] : /* istanbul ignore next */ []));
     _emptyDescription = computed(() => this.emptyDescription() ||
@@ -13346,7 +13357,7 @@ class ClxTableComponent {
                     @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
                       <ng-container
                         [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                        [ngTemplateOutletContext]="{ $implicit: item, index: _absoluteIndex(item) }">
                       </ng-container>
                     } @else {
                       {{ _getCellValue(item, col.key) }}
@@ -13493,7 +13504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.15", ngImpo
                     @if (_getColumnDef(col.key)?.cell()?.templateRef; as tpl) {
                       <ng-container
                         [ngTemplateOutlet]="tpl"
-                        [ngTemplateOutletContext]="{ $implicit: item, index: i }">
+                        [ngTemplateOutletContext]="{ $implicit: item, index: _absoluteIndex(item) }">
                       </ng-container>
                     } @else {
                       {{ _getCellValue(item, col.key) }}