npm - valtech-components - Versions diffs - 4.0.84 → 4.0.86 - Mend

valtech-components 4.0.84 → 4.0.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/fesm2022/valtech-components.mjs CHANGED Viewed

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.84';
+const VERSION = '4.0.86';
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -30976,11 +30976,11 @@ class AttachmentUploaderComponent {
         return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, ngImport: i0, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" color=\"dark\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <!-- label trick: native browser gesture forwarding \u2192 iOS/PWA no bloquea el picker -->\n    <label class=\"camera-label\" [class.camera-label--disabled]=\"isDisabled()\">\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        class=\"hidden-input\"\n        [disabled]=\"isDisabled()\"\n        (change)=\"onFilesSelected($event)\"\n      />\n      <ion-icon name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </label>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n", styles: [".hidden-input{display:none}.camera-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;box-sizing:border-box;font-size:.8125rem;font-weight:500;letter-spacing:.01em;border-radius:4px;border:1px solid currentColor;color:var(--ion-color-dark);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s}.camera-label ion-icon{font-size:1.125rem;flex-shrink:0}.camera-label--disabled{opacity:.4;pointer-events:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:right;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-medium)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AttachmentUploaderComponent, isStandalone: true, selector: "val-attachment-uploader", inputs: { props: { classPropertyName: "props", publicName: "props", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsChange: "attachmentsChange" }, ngImport: i0, template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" color=\"dark\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <!-- label trick: native browser gesture forwarding \u2192 iOS/PWA no bloquea el picker -->\n    <label class=\"camera-label\" [class.camera-label--disabled]=\"isDisabled()\">\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        class=\"hidden-input\"\n        [disabled]=\"isDisabled()\"\n        (change)=\"onFilesSelected($event)\"\n      />\n      <ion-icon name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </label>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n", styles: [".hidden-input{display:none}.camera-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;box-sizing:border-box;font-size:.8125rem;font-weight:500;letter-spacing:.01em;border-radius:4px;border:1px solid currentColor;color:var(--ion-color-dark);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s}@media (pointer: fine){.camera-label{display:none!important}}.camera-label ion-icon{font-size:1.125rem;flex-shrink:0}.camera-label--disabled{opacity:.4;pointer-events:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:right;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-medium)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"], dependencies: [{ kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonNote, selector: "ion-note", inputs: ["color", "mode"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AttachmentUploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" color=\"dark\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <!-- label trick: native browser gesture forwarding \u2192 iOS/PWA no bloquea el picker -->\n    <label class=\"camera-label\" [class.camera-label--disabled]=\"isDisabled()\">\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        class=\"hidden-input\"\n        [disabled]=\"isDisabled()\"\n        (change)=\"onFilesSelected($event)\"\n      />\n      <ion-icon name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </label>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n", styles: [".hidden-input{display:none}.camera-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;box-sizing:border-box;font-size:.8125rem;font-weight:500;letter-spacing:.01em;border-radius:4px;border:1px solid currentColor;color:var(--ion-color-dark);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s}.camera-label ion-icon{font-size:1.125rem;flex-shrink:0}.camera-label--disabled{opacity:.4;pointer-events:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:right;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-medium)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"] }]
+            args: [{ selector: 'val-attachment-uploader', standalone: true, imports: [IonButton, IonIcon, IonNote, IonSpinner, TitleComponent], template: "<div class=\"attachment-uploader\">\n  @if (props().title) {\n  <val-title class=\"attachment-title\" [props]=\"{ content: props().title, size: 'small', color: 'dark', bold: false }\" />\n  }\n\n  <input #filePicker type=\"file\" [accept]=\"accept()\" multiple class=\"hidden-input\" (change)=\"onFilesSelected($event)\" />\n\n  <div class=\"attachment-actions\">\n    <ion-button fill=\"outline\" color=\"dark\" size=\"small\" [disabled]=\"isDisabled()\" (click)=\"filePicker.click()\">\n      <ion-icon slot=\"start\" name=\"attach-outline\"></ion-icon>\n      {{ i18n.t('attachAdd') }}\n    </ion-button>\n    <!-- label trick: native browser gesture forwarding \u2192 iOS/PWA no bloquea el picker -->\n    <label class=\"camera-label\" [class.camera-label--disabled]=\"isDisabled()\">\n      <input\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        class=\"hidden-input\"\n        [disabled]=\"isDisabled()\"\n        (change)=\"onFilesSelected($event)\"\n      />\n      <ion-icon name=\"camera-outline\"></ion-icon>\n      {{ i18n.t('attachCamera') }}\n    </label>\n  </div>\n\n  @if (maxReached()) {\n  <ion-note color=\"warning\" class=\"max-note\">\n    {{ i18n.t('attachMaxCount', '_global', { count: maxFiles().toString() }) }}\n  </ion-note>\n  } @if (attachments().length > 0) {\n  <div class=\"attachment-list\">\n    @for (item of attachments(); track item.id) {\n    <div class=\"attachment-item\" [class]=\"'status-' + item.status\">\n      <ion-icon\n        class=\"file-icon\"\n        [name]=\"item.file.type.startsWith('image/') ? 'image-outline' : 'document-outline'\"\n      ></ion-icon>\n      <div class=\"file-info\">\n        <span class=\"file-name\">{{ item.file.name }}</span>\n        <span class=\"file-size\">{{ formatSize(item.file.size) }}</span>\n      </div>\n\n      @if (item.status === 'uploading') {\n      <ion-spinner class=\"status-icon\" name=\"circular\"></ion-spinner>\n      } @else if (item.status === 'ready') {\n      <ion-icon class=\"status-icon\" name=\"checkmark-circle-outline\" color=\"success\"></ion-icon>\n      } @else if (item.status === 'error') {\n      <ion-icon class=\"status-icon\" name=\"close-circle-outline\" color=\"danger\"></ion-icon>\n      } @if (item.status !== 'uploading') {\n      <ion-button fill=\"clear\" size=\"small\" color=\"dark\" (click)=\"remove(item.id)\">\n        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n      </ion-button>\n      } @if (item.status === 'error' && item.error) {\n      <ion-note color=\"danger\" class=\"error-note\">{{ item.error }}</ion-note>\n      }\n    </div>\n    }\n  </div>\n  } @if (props().hint) {\n  <p class=\"attachment-hint\">{{ props().hint }}</p>\n  }\n</div>\n", styles: [".hidden-input{display:none}.camera-label{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 14px;height:32px;box-sizing:border-box;font-size:.8125rem;font-weight:500;letter-spacing:.01em;border-radius:4px;border:1px solid currentColor;color:var(--ion-color-dark);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .15s}@media (pointer: fine){.camera-label{display:none!important}}.camera-label ion-icon{font-size:1.125rem;flex-shrink:0}.camera-label--disabled{opacity:.4;pointer-events:none}.attachment-uploader{display:flex;flex-direction:column;gap:8px}.attachment-title{display:block;margin-bottom:2px}.attachment-hint{margin:2px 0 0;text-align:right;font-size:.75rem;line-height:1.4;color:var(--ion-color-dark)}.attachment-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.attachment-actions ion-button{margin:0;height:32px}.attachment-list{display:flex;flex-direction:column;gap:4px}.attachment-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;background:var(--ion-background-color, #fff);border:1px solid var(--ion-color-light-shade, rgba(0, 0, 0, .08));flex-wrap:wrap}.attachment-item.status-error{border-color:var(--ion-color-danger)}.file-icon{font-size:1.375rem;color:var(--ion-text-color);flex-shrink:0}.file-info{flex:1;min-width:0;display:flex;flex-direction:column}.file-name{font-size:.8125rem;color:var(--ion-text-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-size{font-size:.6875rem;color:var(--ion-color-medium)}:host-context(.dark) .attachment-item,:host-context(.ion-palette-dark) .attachment-item,:host-context(html.ion-palette-dark) .attachment-item,:host-context(body.dark) .attachment-item,:host-context([data-theme=dark]) .attachment-item{background:#ffffff0a;border-color:#ffffff1f}:host-context(.dark) .attachment-item.status-error,:host-context(.ion-palette-dark) .attachment-item.status-error,:host-context(html.ion-palette-dark) .attachment-item.status-error,:host-context(body.dark) .attachment-item.status-error,:host-context([data-theme=dark]) .attachment-item.status-error{border-color:var(--ion-color-danger)}.status-icon{font-size:1.25rem;flex-shrink:0}.error-note{font-size:.6875rem;width:100%}.max-note{font-size:.75rem}\n"] }]
         }], ctorParameters: () => [] });
 /**
@@ -64206,6 +64206,8 @@ const FEEDBACK_FORM_I18N = {
         descriptionHint: 'Capturamos automáticamente tu navegador, SO y URL actual.',
         descriptionValidation: 'La descripción debe tener entre 10 y 2000 caracteres',
         submit: 'Enviar',
+        attachmentsLabel: 'Archivos adjuntos (opcional)',
+        attachmentsHint: 'Imágenes (JPG/PNG/WebP) o PDF, máx 5 MB cada uno. Hasta 5 archivos.',
         feedbackSuccess: '¡Gracias por tu feedback!',
         feedbackError: 'No se pudo enviar el feedback. Inténtalo de nuevo.',
     },
@@ -64221,6 +64223,8 @@ const FEEDBACK_FORM_I18N = {
         descriptionHint: 'We automatically capture your browser, OS and current URL.',
         descriptionValidation: 'Description must be between 10 and 2000 characters',
         submit: 'Send',
+        attachmentsLabel: 'Attachments (optional)',
+        attachmentsHint: 'Images (JPG/PNG/WebP) or PDF, max 5 MB each. Up to 5 files.',
         feedbackSuccess: 'Thanks for your feedback!',
         feedbackError: 'Could not send feedback. Please try again.',
     },
@@ -64237,8 +64241,6 @@ class FeedbackFormComponent {
         this.errors = inject(ValtechErrorService);
         this.typeOptions = DEFAULT_FEEDBACK_TYPE_OPTIONS;
         this.isSubmitting = signal(false);
-        this.uploadFn = (file) => this.feedbackService.uploadAttachment(file);
-        this.currentAttachments = [];
         this.i18n.registerDefaults('FeedbackForm', FEEDBACK_FORM_I18N);
     }
     ngOnInit() {
@@ -64289,7 +64291,8 @@ class FeedbackFormComponent {
                 maxlength: this.tt('titleValidation'),
             },
             state: ComponentStates.ENABLED,
-        }, {
+        });
+        fields.push({
             token: 'feedback-description',
             name: 'description',
             label: this.props.descriptionLabel ?? this.tt('description'),
@@ -64306,6 +64309,21 @@ class FeedbackFormComponent {
             },
             state: ComponentStates.ENABLED,
         });
+        if (this.props.showAttachments !== false) {
+            fields.push({
+                token: 'feedback-attachments',
+                name: 'attachments',
+                label: this.props.attachmentsLabel ?? this.tt('attachmentsLabel'),
+                hint: this.tt('attachmentsHint'),
+                placeholder: '',
+                type: InputType.ATTACHMENT,
+                order: 4,
+                validators: [],
+                errors: {},
+                state: ComponentStates.ENABLED,
+                uploadFn: (file) => this.feedbackService.uploadAttachment(file),
+            });
+        }
         return {
             name: '',
             sections: [{ name: '', order: 0, fields }],
@@ -64323,8 +64341,6 @@ class FeedbackFormComponent {
     async handleFormSubmit(submitted) {
         if (this.isSubmitting())
             return;
-        if (this.currentAttachments.some(a => a.status === 'uploading'))
-            return;
         this.isSubmitting.set(true);
         this.formProps.state = ComponentStates.WORKING;
         this.formProps.actions.state = ComponentStates.WORKING;
@@ -64332,7 +64348,7 @@ class FeedbackFormComponent {
             const type = submitted.fields['type'] ?? this.props.defaultType ?? 'feedback';
             const title = submitted.fields['title'];
             const description = submitted.fields['description'];
-            const attachmentUrls = this.currentAttachments.filter(a => a.status === 'ready').map(a => a.url);
+            const attachmentUrls = submitted.fields['attachments'] ?? [];
             const response = await this.feedbackService.createAsync(type, title, description, attachmentUrls, this.props.contentRef);
             this.toast.show({
                 message: this.props.successMessage ?? this.tt('feedbackSuccess'),
@@ -64356,9 +64372,6 @@ class FeedbackFormComponent {
             this.formProps.actions.state = ComponentStates.ENABLED;
         }
     }
-    onAttachmentsChange(items) {
-        this.currentAttachments = items;
-    }
     onCancelClick() {
         this.onCancel.emit();
     }
@@ -64376,14 +64389,7 @@ class FeedbackFormComponent {
           />
         </div>
       }
-      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
-        @if (props.showAttachments !== false) {
-          <val-attachment-uploader
-            [props]="{ maxFiles: 5, uploadFn: uploadFn }"
-            (attachmentsChange)="onAttachmentsChange($event)"
-          ></val-attachment-uploader>
-        }
-      </val-form>
+      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)" />
       @if (props.cancelButtonText) {
         <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
@@ -64391,11 +64397,11 @@ class FeedbackFormComponent {
         </ion-button>
       }
     </div>
-  `, isInline: true, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}val-attachment-uploader{display:block;margin-top:16px;margin-bottom:8px}.cancel-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
+  `, isInline: true, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}.cancel-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'val-feedback-form', standalone: true, imports: [CommonModule, FormComponent, AttachmentUploaderComponent, DisplayComponent, TitleComponent, IonButton], template: `
+            args: [{ selector: 'val-feedback-form', standalone: true, imports: [CommonModule, FormComponent, DisplayComponent, TitleComponent, IonButton], template: `
     <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
       @if (props.showTitle) {
         <div class="form-header">
@@ -64405,14 +64411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           />
         </div>
       }
-      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
-        @if (props.showAttachments !== false) {
-          <val-attachment-uploader
-            [props]="{ maxFiles: 5, uploadFn: uploadFn }"
-            (attachmentsChange)="onAttachmentsChange($event)"
-          ></val-attachment-uploader>
-        }
-      </val-form>
+      <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)" />
       @if (props.cancelButtonText) {
         <ion-button fill="outline" color="medium" expand="block" class="cancel-button" (click)="onCancelClick()">
@@ -64420,7 +64419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-button>
       }
     </div>
-  `, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}val-attachment-uploader{display:block;margin-top:16px;margin-bottom:8px}.cancel-button{margin-top:8px}\n"] }]
+  `, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}.cancel-button{margin-top:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], onSubmit: [{