valtech-components 2.0.824 → 2.0.826

package/fesm2022/valtech-components.mjs

@@ -53,7 +53,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.824';
+const VERSION = '2.0.826';
 
 /**
  * Servicio para gestionar presets de componentes.
@@ -4776,9 +4776,7 @@ class QrCodeComponent {
     }
     async onDownload() {
         try {
-            const options = this.props.downloadFilename
-                ? { filename: this.props.downloadFilename }
-                : undefined;
+            const options = this.props.downloadFilename ? { filename: this.props.downloadFilename } : undefined;
             await this.qrService.download(this.props.qr, options);
             this.actionComplete.emit({
                 action: 'download',
@@ -4860,12 +4858,16 @@ class QrCodeComponent {
     >
       @if (props.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="crescent"></ion-spinner>
+          <ion-spinner name="circular"></ion-spinner>
         </div>
       }
 
       @if (props.label && props.label.position === 'top') {
-        <div class="qr-label qr-label--top" [style.--label-color]="props.label.color || 'inherit'" [style.--label-size]="getLabelFontSize()">
+        <div
+          class="qr-label qr-label--top"
+          [style.--label-color]="props.label.color || 'inherit'"
+          [style.--label-size]="getLabelFontSize()"
+        >
           @if (props.label.icon && props.label.iconPosition !== 'end') {
             <ion-icon [name]="props.label.icon"></ion-icon>
           }
@@ -4887,7 +4889,11 @@ class QrCodeComponent {
       </div>
 
       @if (props.label && props.label.position !== 'top') {
-        <div class="qr-label qr-label--bottom" [style.--label-color]="props.label.color || 'inherit'" [style.--label-size]="getLabelFontSize()">
+        <div
+          class="qr-label qr-label--bottom"
+          [style.--label-color]="props.label.color || 'inherit'"
+          [style.--label-size]="getLabelFontSize()"
+        >
           @if (props.label.icon && props.label.iconPosition !== 'end') {
             <ion-icon [name]="props.label.icon"></ion-icon>
           }
@@ -4901,34 +4907,19 @@ class QrCodeComponent {
       @if (hasActions()) {
         <div class="qr-actions">
           @if (props.showDownload) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onDownload()"
-              [title]="getDownloadLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onDownload()" [title]="getDownloadLabel()">
               <ion-icon name="download-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
 
           @if (props.showCopy && canCopy) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onCopy()"
-              [title]="getCopyLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onCopy()" [title]="getCopyLabel()">
               <ion-icon name="copy-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
 
           @if (props.showShare && canShare) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onShare()"
-              [title]="getShareLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onShare()" [title]="getShareLabel()">
               <ion-icon name="share-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
@@ -4953,12 +4944,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     >
       @if (props.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="crescent"></ion-spinner>
+          <ion-spinner name="circular"></ion-spinner>
         </div>
       }
 
       @if (props.label && props.label.position === 'top') {
-        <div class="qr-label qr-label--top" [style.--label-color]="props.label.color || 'inherit'" [style.--label-size]="getLabelFontSize()">
+        <div
+          class="qr-label qr-label--top"
+          [style.--label-color]="props.label.color || 'inherit'"
+          [style.--label-size]="getLabelFontSize()"
+        >
           @if (props.label.icon && props.label.iconPosition !== 'end') {
             <ion-icon [name]="props.label.icon"></ion-icon>
           }
@@ -4980,7 +4975,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       </div>
 
       @if (props.label && props.label.position !== 'top') {
-        <div class="qr-label qr-label--bottom" [style.--label-color]="props.label.color || 'inherit'" [style.--label-size]="getLabelFontSize()">
+        <div
+          class="qr-label qr-label--bottom"
+          [style.--label-color]="props.label.color || 'inherit'"
+          [style.--label-size]="getLabelFontSize()"
+        >
           @if (props.label.icon && props.label.iconPosition !== 'end') {
             <ion-icon [name]="props.label.icon"></ion-icon>
           }
@@ -4994,34 +4993,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       @if (hasActions()) {
         <div class="qr-actions">
           @if (props.showDownload) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onDownload()"
-              [title]="getDownloadLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onDownload()" [title]="getDownloadLabel()">
               <ion-icon name="download-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
 
           @if (props.showCopy && canCopy) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onCopy()"
-              [title]="getCopyLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onCopy()" [title]="getCopyLabel()">
               <ion-icon name="copy-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
 
           @if (props.showShare && canShare) {
-            <ion-button
-              fill="clear"
-              size="small"
-              (click)="onShare()"
-              [title]="getShareLabel()"
-            >
+            <ion-button fill="clear" size="small" (click)="onShare()" [title]="getShareLabel()">
               <ion-icon name="share-outline" slot="icon-only"></ion-icon>
             </ion-button>
           }
@@ -17387,7 +17371,7 @@ const DEFAULT_REFRESHER_METADATA = {
     pullFactor: 0.5,
     snapbackDuration: 280,
     closeDuration: 280,
-    spinnerType: 'crescent',
+    spinnerType: 'circular',
     hapticFeedback: true,
     webMode: false,
 };
@@ -17568,7 +17552,7 @@ class RefresherComponent {
       } @else {
         <!-- Default Ionic refresher content -->
         <ion-refresher-content
-          [pullingIcon]="mergedProps.spinnerType === 'crescent' ? 'chevron-down-circle-outline' : undefined"
+          pullingIcon="chevron-down-circle-outline"
           [pullingText]="mergedProps.pullingText"
           [refreshingSpinner]="mergedProps.spinnerType"
           [refreshingText]="mergedProps.refreshingText"
@@ -17626,7 +17610,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       } @else {
         <!-- Default Ionic refresher content -->
         <ion-refresher-content
-          [pullingIcon]="mergedProps.spinnerType === 'crescent' ? 'chevron-down-circle-outline' : undefined"
+          pullingIcon="chevron-down-circle-outline"
           [pullingText]="mergedProps.pullingText"
           [refreshingSpinner]="mergedProps.spinnerType"
           [refreshingText]="mergedProps.refreshingText"
@@ -25854,7 +25838,7 @@ class UsernameInputComponent {
           <span slot="end" class="availability-indicator">
             @switch (availabilityStatus()) {
               @case ('checking') {
-                <ion-spinner name="crescent" class="checking-spinner" />
+                <ion-spinner name="circular" class="checking-spinner" />
               }
               @case ('available') {
                 <ion-icon name="checkmark-circle" class="status-icon available" />
@@ -25915,7 +25899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <span slot="end" class="availability-indicator">
             @switch (availabilityStatus()) {
               @case ('checking') {
-                <ion-spinner name="crescent" class="checking-spinner" />
+                <ion-spinner name="circular" class="checking-spinner" />
               }
               @case ('available') {
                 <ion-icon name="checkmark-circle" class="status-icon available" />
@@ -29231,13 +29215,13 @@ class CommentSectionComponent {
     }
     getSkeletonArray() {
         const count = this.props.skeletonCount || 3;
-        return Array(count).fill(0).map((_, i) => i);
+        return Array(count)
+            .fill(0)
+            .map((_, i) => i);
     }
     canSubmit() {
         const minLength = this.props.inputConfig?.minLength || 1;
-        return (this.newCommentText.trim().length >= minLength &&
-            !this.props.loading &&
-            !this.props.inputConfig?.disabled);
+        return this.newCommentText.trim().length >= minLength && !this.props.loading && !this.props.inputConfig?.disabled;
     }
     isNearLimit() {
         const maxLength = this.props.inputConfig?.maxLength || 2000;
@@ -29245,7 +29229,7 @@ class CommentSectionComponent {
     }
     onSortChange(event) {
         const selectedToken = event.detail.value;
-        const option = this.props.sortOptions?.find((o) => o.token === selectedToken);
+        const option = this.props.sortOptions?.find(o => o.token === selectedToken);
         if (option) {
             this.sortChange.emit({
                 option,
@@ -29414,14 +29398,9 @@ class CommentSectionComponent {
           @if (props.hasMore && props.paginationMode !== 'infinite') {
             <div class="load-more-section">
               @if (props.loadingMore) {
-                <ion-spinner name="crescent" [color]="props.color || 'primary'"></ion-spinner>
+                <ion-spinner name="circular" [color]="props.color || 'primary'"></ion-spinner>
               } @else {
-                <ion-button
-                  fill="outline"
-                  [color]="props.color || 'primary'"
-                  expand="block"
-                  (click)="onLoadMore()"
-                >
+                <ion-button fill="outline" [color]="props.color || 'primary'" expand="block" (click)="onLoadMore()">
                   {{ displayLoadMoreLabel }}
                 </ion-button>
               }
@@ -29444,10 +29423,7 @@ class CommentSectionComponent {
         }
       } @else {
         <div class="empty-state">
-          <ion-icon
-            [name]="props.emptyState?.icon || 'chatbubble-ellipses-outline'"
-            class="empty-icon"
-          ></ion-icon>
+          <ion-icon [name]="props.emptyState?.icon || 'chatbubble-ellipses-outline'" class="empty-icon"></ion-icon>
           <h4 class="empty-title">{{ getEmptyTitle() }}</h4>
           <p class="empty-message">{{ getEmptyMessage() }}</p>
         </div>
@@ -29584,14 +29560,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           @if (props.hasMore && props.paginationMode !== 'infinite') {
             <div class="load-more-section">
               @if (props.loadingMore) {
-                <ion-spinner name="crescent" [color]="props.color || 'primary'"></ion-spinner>
+                <ion-spinner name="circular" [color]="props.color || 'primary'"></ion-spinner>
               } @else {
-                <ion-button
-                  fill="outline"
-                  [color]="props.color || 'primary'"
-                  expand="block"
-                  (click)="onLoadMore()"
-                >
+                <ion-button fill="outline" [color]="props.color || 'primary'" expand="block" (click)="onLoadMore()">
                   {{ displayLoadMoreLabel }}
                 </ion-button>
               }
@@ -29614,10 +29585,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       } @else {
         <div class="empty-state">
-          <ion-icon
-            [name]="props.emptyState?.icon || 'chatbubble-ellipses-outline'"
-            class="empty-icon"
-          ></ion-icon>
+          <ion-icon [name]="props.emptyState?.icon || 'chatbubble-ellipses-outline'" class="empty-icon"></ion-icon>
           <h4 class="empty-title">{{ getEmptyTitle() }}</h4>
           <p class="empty-message">{{ getEmptyMessage() }}</p>
         </div>
@@ -30057,7 +30025,7 @@ class DataTableComponent {
       <!-- Loading overlay -->
       @if (props.loadingState?.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="crescent"></ion-spinner>
+          <ion-spinner name="circular"></ion-spinner>
           @if (props.loadingState?.message) {
             <span class="loading-message">{{ props.loadingState.message }}</span>
           }
@@ -30065,12 +30033,13 @@ class DataTableComponent {
       }
 
       <div class="table-wrapper" [class.is-loading]="props.loadingState?.loading">
-        <table
-          role="grid"
-          [attr.aria-label]="props.ariaLabel"
-        >
+        <table role="grid" [attr.aria-label]="props.ariaLabel">
           @if (props.caption) {
-            <caption class="sr-only">{{ props.caption }}</caption>
+            <caption class="sr-only">
+              {{
+                props.caption
+              }}
+            </caption>
           }
 
           <thead>
@@ -30191,12 +30160,14 @@ class DataTableComponent {
 
                   <!-- Data cells -->
                   @for (column of visibleColumns; track column.key) {
-                    <td
-                      [class]="getColumnClass(column)"
-                      [style.text-align]="column.align"
-                    >
+                    <td [class]="getColumnClass(column)" [style.text-align]="column.align">
                       @if (column.cellTemplate) {
-                        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                        <ng-container
+                          *ngTemplateOutlet="
+                            column.cellTemplate;
+                            context: { row, column, value: getCellValue(row, column) }
+                          "
+                        ></ng-container>
                       } @else {
                         {{ getFormattedValue(row, column) }}
                       }
@@ -30206,7 +30177,9 @@ class DataTableComponent {
                   <!-- Actions cell -->
                   @if (props.actionsTemplate) {
                     <td class="actions-cell">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                      <ng-container
+                        *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"
+                      ></ng-container>
                     </td>
                   }
                 </tr>
@@ -30234,7 +30207,9 @@ class DataTableComponent {
           } @else {
             @for (row of displayedData; track trackByFn(row); let i = $index) {
               @if (props.mobileCardTemplate) {
-                <ng-container *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"></ng-container>
+                <ng-container
+                  *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"
+                ></ng-container>
               } @else {
                 <div
                   class="data-card"
@@ -30273,7 +30248,12 @@ class DataTableComponent {
                         <span class="card-field__label">{{ column.label }}</span>
                         <span class="card-field__value">
                           @if (column.cellTemplate) {
-                            <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                            <ng-container
+                              *ngTemplateOutlet="
+                                column.cellTemplate;
+                                context: { row, column, value: getCellValue(row, column) }
+                              "
+                            ></ng-container>
                           } @else {
                             {{ getFormattedValue(row, column) }}
                           }
@@ -30285,7 +30265,9 @@ class DataTableComponent {
                   <!-- Card actions -->
                   @if (props.actionsTemplate) {
                     <div class="card-actions">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                      <ng-container
+                        *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"
+                      ></ng-container>
                     </div>
                   }
                 </div>
@@ -30339,9 +30321,7 @@ class DataTableComponent {
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
             </ion-button>
 
-            <span class="page-indicator">
-              {{ props.pagination.page + 1 }} / {{ totalPages }}
-            </span>
+            <span class="page-indicator"> {{ props.pagination.page + 1 }} / {{ totalPages }} </span>
 
             <ion-button
               fill="clear"
@@ -30371,16 +30351,7 @@ class DataTableComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-data-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
-                        CommonModule,
-                        FormsModule,
-                        IonButton,
-                        IonIcon,
-                        IonCheckbox,
-                        IonSpinner,
-                        IonSelect,
-                        IonSelectOption,
-                    ], template: `
+            args: [{ selector: 'val-data-table', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, FormsModule, IonButton, IonIcon, IonCheckbox, IonSpinner, IonSelect, IonSelectOption], template: `
     <div
       class="data-table-container"
       [class]="props.cssClass"
@@ -30409,7 +30380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Loading overlay -->
       @if (props.loadingState?.loading) {
         <div class="loading-overlay">
-          <ion-spinner name="crescent"></ion-spinner>
+          <ion-spinner name="circular"></ion-spinner>
           @if (props.loadingState?.message) {
             <span class="loading-message">{{ props.loadingState.message }}</span>
           }
@@ -30417,12 +30388,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       }
 
       <div class="table-wrapper" [class.is-loading]="props.loadingState?.loading">
-        <table
-          role="grid"
-          [attr.aria-label]="props.ariaLabel"
-        >
+        <table role="grid" [attr.aria-label]="props.ariaLabel">
           @if (props.caption) {
-            <caption class="sr-only">{{ props.caption }}</caption>
+            <caption class="sr-only">
+              {{
+                props.caption
+              }}
+            </caption>
           }
 
           <thead>
@@ -30543,12 +30515,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
                   <!-- Data cells -->
                   @for (column of visibleColumns; track column.key) {
-                    <td
-                      [class]="getColumnClass(column)"
-                      [style.text-align]="column.align"
-                    >
+                    <td [class]="getColumnClass(column)" [style.text-align]="column.align">
                       @if (column.cellTemplate) {
-                        <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                        <ng-container
+                          *ngTemplateOutlet="
+                            column.cellTemplate;
+                            context: { row, column, value: getCellValue(row, column) }
+                          "
+                        ></ng-container>
                       } @else {
                         {{ getFormattedValue(row, column) }}
                       }
@@ -30558,7 +30532,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <!-- Actions cell -->
                   @if (props.actionsTemplate) {
                     <td class="actions-cell">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                      <ng-container
+                        *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"
+                      ></ng-container>
                     </td>
                   }
                 </tr>
@@ -30586,7 +30562,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           } @else {
             @for (row of displayedData; track trackByFn(row); let i = $index) {
               @if (props.mobileCardTemplate) {
-                <ng-container *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"></ng-container>
+                <ng-container
+                  *ngTemplateOutlet="props.mobileCardTemplate; context: { row, index: i, columns: visibleColumns }"
+                ></ng-container>
               } @else {
                 <div
                   class="data-card"
@@ -30625,7 +30603,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         <span class="card-field__label">{{ column.label }}</span>
                         <span class="card-field__value">
                           @if (column.cellTemplate) {
-                            <ng-container *ngTemplateOutlet="column.cellTemplate; context: { row, column, value: getCellValue(row, column) }"></ng-container>
+                            <ng-container
+                              *ngTemplateOutlet="
+                                column.cellTemplate;
+                                context: { row, column, value: getCellValue(row, column) }
+                              "
+                            ></ng-container>
                           } @else {
                             {{ getFormattedValue(row, column) }}
                           }
@@ -30637,7 +30620,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   <!-- Card actions -->
                   @if (props.actionsTemplate) {
                     <div class="card-actions">
-                      <ng-container *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"></ng-container>
+                      <ng-container
+                        *ngTemplateOutlet="props.actionsTemplate; context: { row, index: i }"
+                      ></ng-container>
                     </div>
                   }
                 </div>
@@ -30691,9 +30676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
               <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
             </ion-button>
 
-            <span class="page-indicator">
-              {{ props.pagination.page + 1 }} / {{ totalPages }}
-            </span>
+            <span class="page-indicator"> {{ props.pagination.page + 1 }} / {{ totalPages }} </span>
 
             <ion-button
               fill="clear"
@@ -31558,7 +31541,7 @@ const DEFAULT_INFINITE_LIST_METADATA = {
     threshold: '100px',
     debounceTime: 300,
     autoLoad: true,
-    spinnerType: 'crescent',
+    spinnerType: 'circular',
     useLoadMoreButton: false,
     showDividers: false,
     enableRefresh: false,
@@ -35437,7 +35420,7 @@ class AvatarUploadComponent {
         <!-- Loading Overlay -->
         @if (loading()) {
           <div class="loading-overlay">
-            <ion-spinner name="crescent"></ion-spinner>
+            <ion-spinner name="circular"></ion-spinner>
           </div>
         }
       </div>
@@ -35493,7 +35476,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <!-- Loading Overlay -->
         @if (loading()) {
           <div class="loading-overlay">
-            <ion-spinner name="crescent"></ion-spinner>
+            <ion-spinner name="circular"></ion-spinner>
           </div>
         }
       </div>
@@ -37183,7 +37166,10 @@ class PageWrapperComponent {
              ion-content — por eso va aquí crudo, no envuelto en val-refresher. -->
         @if (pageRefresh.hasHandler()) {
           <ion-refresher slot="fixed" (ionRefresh)="onPageRefresh($event)">
-            <ion-refresher-content pullingIcon="chevron-down-circle-outline"></ion-refresher-content>
+            <ion-refresher-content
+              pullingIcon="chevron-down-circle-outline"
+              refreshingSpinner="circular"
+            ></ion-refresher-content>
           </ion-refresher>
         }
         <val-container [props]="{ size: contentMaxWidth() }">
@@ -37225,7 +37211,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
              ion-content — por eso va aquí crudo, no envuelto en val-refresher. -->
         @if (pageRefresh.hasHandler()) {
           <ion-refresher slot="fixed" (ionRefresh)="onPageRefresh($event)">
-            <ion-refresher-content pullingIcon="chevron-down-circle-outline"></ion-refresher-content>
+            <ion-refresher-content
+              pullingIcon="chevron-down-circle-outline"
+              refreshingSpinner="circular"
+            ></ion-refresher-content>
           </ion-refresher>
         }
         <val-container [props]="{ size: contentMaxWidth() }">
@@ -37712,7 +37701,7 @@ class SimpleModalContentComponent {
                 (click)="onButtonClick(button)"
               >
                 @if (button.loading) {
-                  <ion-spinner name="crescent"></ion-spinner>
+                  <ion-spinner name="circular"></ion-spinner>
                 } @else {
                   {{ button.text }}
                 }
@@ -37726,7 +37715,18 @@ class SimpleModalContentComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleModalContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-simple-modal-content', standalone: true, imports: [CommonModule, IonHeader, IonToolbar, IonTitle, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonSpinner], template: `
+            args: [{ selector: 'val-simple-modal-content', standalone: true, imports: [
+                        CommonModule,
+                        IonHeader,
+                        IonToolbar,
+                        IonTitle,
+                        IonButtons,
+                        IonButton,
+                        IonIcon,
+                        IonContent,
+                        IonFooter,
+                        IonSpinner,
+                    ], template: `
     <ion-header>
       <ion-toolbar>
         <ion-title>{{ title }}</ion-title>
@@ -37758,7 +37758,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 (click)="onButtonClick(button)"
               >
                 @if (button.loading) {
-                  <ion-spinner name="crescent"></ion-spinner>
+                  <ion-spinner name="circular"></ion-spinner>
                 } @else {
                   {{ button.text }}
                 }
@@ -38854,7 +38854,7 @@ class LoadingDirective {
         const element = document.createElement('div');
         element.className = 'val-loading-spinner';
         element.innerHTML = `
-      <ion-spinner name="crescent"></ion-spinner>
+      <ion-spinner name="circular"></ion-spinner>
     `;
         element.style.cssText = 'display: flex; justify-content: center; padding: 20px;';
         const hostElement = this.viewContainer.element.nativeElement;
@@ -38864,8 +38864,7 @@ class LoadingDirective {
         // Fallback simple si no hay template registrado
         const element = document.createElement('div');
         element.className = 'val-loading-fallback';
-        element.style.cssText =
-            'display: flex; flex-direction: column; gap: 12px; padding: 16px;';
+        element.style.cssText = 'display: flex; flex-direction: column; gap: 12px; padding: 16px;';
         for (let i = 0; i < this.count; i++) {
             const skeleton = document.createElement('div');
             skeleton.style.cssText = `
@@ -42638,7 +42637,7 @@ class FeedbackFormComponent {
     ngOnInit() {
         // Filtrar tipos habilitados si se especifica
         if (this.props.enabledTypes?.length) {
-            this.typeOptions = this.typeOptions.filter((opt) => this.props.enabledTypes.includes(opt.value));
+            this.typeOptions = this.typeOptions.filter(opt => this.props.enabledTypes.includes(opt.value));
         }
         // Usar opciones personalizadas si se proporcionan
         if (this.props.typeOptions?.length) {
@@ -42647,14 +42646,8 @@ class FeedbackFormComponent {
         // Inicializar formulario
         this.form = this.fb.group({
             type: [this.props.defaultType || 'feedback', Validators.required],
-            title: [
-                '',
-                [Validators.required, Validators.minLength(5), Validators.maxLength(200)],
-            ],
-            description: [
-                '',
-                [Validators.required, Validators.minLength(10), Validators.maxLength(5000)],
-            ],
+            title: ['', [Validators.required, Validators.minLength(5), Validators.maxLength(200)]],
+            description: ['', [Validators.required, Validators.minLength(10), Validators.maxLength(5000)]],
         });
     }
     async handleSubmit() {
@@ -42769,22 +42762,13 @@ class FeedbackFormComponent {
       <!-- Actions -->
       <div class="form-actions">
         @if (props.cancelButtonText) {
-          <ion-button
-            fill="outline"
-            color="medium"
-            type="button"
-            (click)="onCancelClick()"
-          >
+          <ion-button fill="outline" color="medium" type="button" (click)="onCancelClick()">
             {{ props.cancelButtonText }}
           </ion-button>
         }
-        <ion-button
-          type="submit"
-          [disabled]="form.invalid || isSubmitting()"
-          expand="block"
-        >
+        <ion-button type="submit" [disabled]="form.invalid || isSubmitting()" expand="block">
           @if (isSubmitting()) {
-            <ion-spinner name="crescent"></ion-spinner>
+            <ion-spinner name="circular"></ion-spinner>
           } @else {
             {{ props.submitButtonText || i18n.t('submit') }}
           }
@@ -42892,22 +42876,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       <!-- Actions -->
       <div class="form-actions">
         @if (props.cancelButtonText) {
-          <ion-button
-            fill="outline"
-            color="medium"
-            type="button"
-            (click)="onCancelClick()"
-          >
+          <ion-button fill="outline" color="medium" type="button" (click)="onCancelClick()">
             {{ props.cancelButtonText }}
           </ion-button>
         }
-        <ion-button
-          type="submit"
-          [disabled]="form.invalid || isSubmitting()"
-          expand="block"
-        >
+        <ion-button type="submit" [disabled]="form.invalid || isSubmitting()" expand="block">
           @if (isSubmitting()) {
-            <ion-spinner name="crescent"></ion-spinner>
+            <ion-spinner name="circular"></ion-spinner>
           } @else {
             {{ props.submitButtonText || i18n.t('submit') }}
           }