valtech-components 2.0.941 → 2.0.942

package/fesm2022/valtech-components.mjs

@@ -54,7 +54,7 @@ import 'prismjs/components/prism-json';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '2.0.941';
+const VERSION = '2.0.942';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -10006,6 +10006,7 @@ var InputType;
     InputType[InputType["CURRENCY"] = 21] = "CURRENCY";
     InputType[InputType["CHECKBOX_RADIO"] = 22] = "CHECKBOX_RADIO";
     InputType[InputType["HANDLE"] = 23] = "HANDLE";
+    InputType[InputType["ATTACHMENT"] = 24] = "ATTACHMENT";
 })(InputType || (InputType = {}));
 /**
  * Possible action types for a toolbar.
@@ -28986,7 +28987,7 @@ class AttachmentUploaderComponent {
         this.props = input({});
         this.attachmentsChange = output();
         this.i18n = inject(I18nService);
-        this.feedbackService = inject(FeedbackService);
+        this.feedbackService = inject(FeedbackService, { optional: true });
         this.attachments = signal([]);
         this.maxFiles = computed(() => this.props().maxFiles ?? 5);
         this.accept = computed(() => this.props().accept ?? 'image/jpeg,image/png,image/webp,application/pdf');
@@ -29034,7 +29035,10 @@ class AttachmentUploaderComponent {
         try {
             const shouldCompress = this.props().compressImages !== false && file.type.startsWith('image/');
             const fileToUpload = shouldCompress ? await this.compressImage(file) : file;
-            const url = await this.feedbackService.uploadAttachment(fileToUpload);
+            const uploadFn = this.props().uploadFn ?? this.feedbackService?.uploadAttachment.bind(this.feedbackService);
+            if (!uploadFn)
+                throw new Error('No upload function configured');
+            const url = await uploadFn(fileToUpload);
             this.attachments.update(list => list.map(a => (a.id === id ? { ...a, status: 'ready', url } : a)));
         }
         catch {
@@ -29963,6 +29967,7 @@ class FormComponent {
         this.onInvalid = new EventEmitter();
         this.onSelectChange = new EventEmitter();
         this.types = InputType;
+        this.states = ComponentStates;
         this.subscriptions = [];
         this.actionsCache = [];
         // Memo de getFieldProp/getUsernameProp por referencia de field — evita
@@ -29973,6 +29978,9 @@ class FormComponent {
         this.usernamePropMemo = new WeakMap();
         this.textareaPropMemo = new WeakMap();
         this.selectPropMemo = new WeakMap();
+        this.previousUploadingCount = 0;
+        // Campos ATTACHMENT con uploads en curso — bloquea submit + pone botón en WORKING
+        this.uploadingFields = new Set();
     }
     ngOnInit() {
         const formControls = {};
@@ -29989,6 +29997,9 @@ class FormComponent {
                     formControls[`${field.name}_from`] = [initialValue, field.validators || []];
                     formControls[`${field.name}_to`] = [initialValue, field.validators || []];
                 }
+                else if (field.type === this.types.ATTACHMENT) {
+                    formControls[field.name] = [[], field.validators || []];
+                }
                 else {
                     formControls[field.name] = [initialValue, field.validators || []];
                 }
@@ -30019,8 +30030,12 @@ class FormComponent {
     }
     ngDoCheck() {
         // Detectar cambios en el estado del formulario (mutación sin cambiar referencia)
-        if (this.form && this.props && this.props.state !== this.previousState) {
+        const uploadingCount = this.uploadingFields.size;
+        if (this.form &&
+            this.props &&
+            (this.props.state !== this.previousState || uploadingCount !== this.previousUploadingCount)) {
             this.previousState = this.props.state;
+            this.previousUploadingCount = uploadingCount;
             this.updateActionsCache();
         }
     }
@@ -30030,6 +30045,8 @@ class FormComponent {
     syncFieldControlStates() {
         this.props.sections.forEach(section => {
             section.fields.forEach(field => {
+                if (field.type === this.types.ATTACHMENT)
+                    return;
                 if (field.type === this.types.NUMBER_FROM_TO) {
                     const fromControl = this.getControl(`${field.name}_from`);
                     const toControl = this.getControl(`${field.name}_to`);
@@ -30059,7 +30076,7 @@ class FormComponent {
      */
     updateActionsCache() {
         let actionState = this.props.actions.state;
-        if (this.props.state === ComponentStates.WORKING) {
+        if (this.props.state === ComponentStates.WORKING || this.uploadingFields.size > 0) {
             actionState = ComponentStates.WORKING;
         }
         else if (this.props.state === ComponentStates.DISABLED) {
@@ -30082,8 +30099,20 @@ class FormComponent {
         this.subscriptions.push(subscription);
     }
     async submitHandler(token) {
+        if (this.uploadingFields.size > 0)
+            return;
         this.onSubmit.emit({ fields: this.form.getRawValue(), token });
     }
+    onAttachmentChange(fieldName, items) {
+        const readyUrls = items.filter(a => a.status === 'ready' && a.url).map(a => a.url);
+        this.form.get(fieldName)?.setValue(readyUrls, { emitEvent: false });
+        if (items.some(a => a.status === 'uploading')) {
+            this.uploadingFields.add(fieldName);
+        }
+        else {
+            this.uploadingFields.delete(fieldName);
+        }
+    }
     getControl(field) {
         return this.Form.get(field);
     }
@@ -30211,7 +30240,7 @@ class FormComponent {
             <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
-                @if (f.type !== types.PHONE && f.type !== types.HANDLE) {
+                @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
                   <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
                 }
                 @if (f.description) {
@@ -30278,6 +30307,15 @@ class FormComponent {
                   @case (types.CHECKBOX_RADIO) {
                     <val-checkbox-radio-input [props]="getFieldProp(f)"></val-checkbox-radio-input>
                   }
+                  @case (types.ATTACHMENT) {
+                    <val-attachment-uploader
+                      [props]="{
+                        uploadFn: f.uploadFn,
+                        disabled: f.state === states.DISABLED || f.state === states.WORKING,
+                      }"
+                      (attachmentsChange)="onAttachmentChange(f.name, $event)"
+                    ></val-attachment-uploader>
+                  }
                 }
                 <val-hint [props]="getFieldProp(f)"></val-hint>
               </div>
@@ -30292,7 +30330,7 @@ class FormComponent {
         ></val-button-group>
       </form>
     </div>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: TextareaInputComponent, selector: "val-textarea-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["preset", "props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["preset", "props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["preset", "props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckboxRadioInputComponent, selector: "val-checkbox-radio-input", inputs: ["props"] }, { kind: "component", type: UsernameInputComponent, selector: "val-username-input", inputs: ["props"] }] }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:root{--val-container-sm: 540px;--val-container-md: 720px;--val-container-lg: 880px;--val-container-xl: 1100px;--val-container-padding: 16px;--ion-color-primary: #7026df;--ion-color-primary-rgb: 112, 38, 223;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #6321c4;--ion-color-primary-tint: #7e3ce2;--ion-color-secondary: #e2ccff;--ion-color-secondary-rgb: 226, 204, 255;--ion-color-secondary-contrast: #000000;--ion-color-secondary-contrast-rgb: 0, 0, 0;--ion-color-secondary-shade: #c7b4e0;--ion-color-secondary-tint: #e5d1ff;--ion-color-texti: #354c69;--ion-color-texti-rgb: 53, 76, 105;--ion-color-texti-contrast: #ffffff;--ion-color-texti-contrast-rgb: 255, 255, 255;--ion-color-texti-shade: #2f435c;--ion-color-texti-tint: #495e78;--ion-color-darki: #090f1b;--ion-color-darki-rgb: 9, 15, 27;--ion-color-darki-contrast: #ffffff;--ion-color-darki-contrast-rgb: 255, 255, 255;--ion-color-darki-shade: #080d18;--ion-color-darki-tint: #222732;--ion-color-medium: #9e9e9e;--ion-color-medium-rgb: 158, 158, 158;--ion-color-medium-contrast: #000000;--ion-color-medium-contrast-rgb: 0, 0, 0;--ion-color-medium-shade: #8b8b8b;--ion-color-medium-tint: #a8a8a8;--swiper-pagination-color: var(--ion-color-primary);--swiper-navigation-color: var(--ion-color-primary);--swiper-pagination-bullet-inactive-color: var(--ion-color-medium)}body.dark,html.ion-palette-dark,body[data-theme=dark]{--ion-color-texti: #8fc1ff;--ion-color-texti-rgb: 143, 193, 255;--ion-color-texti-contrast: #000000;--ion-color-texti-contrast-rgb: 0, 0, 0;--ion-color-texti-shade: #7eaae0;--ion-color-texti-tint: #9ac7ff;--ion-color-darki: #ffffff;--ion-color-darki-rgb: 255, 255, 255;--ion-color-darki-contrast: #000000;--ion-color-darki-contrast-rgb: 0, 0, 0;--ion-color-darki-shade: #e0e0e0;--ion-color-darki-tint: #ffffff;--ion-color-primary: #8f49f8;--ion-color-primary-rgb: 143, 73, 248;--ion-color-primary-contrast: #ffffff;--ion-color-primary-contrast-rgb: 255, 255, 255;--ion-color-primary-shade: #7e40da;--ion-color-primary-tint: #9a5bf9}.ion-color-texti{--ion-color-base: var(--ion-color-texti);--ion-color-base-rgb: var(--ion-color-texti-rgb);--ion-color-contrast: var(--ion-color-texti-contrast);--ion-color-contrast-rgb: var(--ion-color-texti-contrast-rgb);--ion-color-shade: var(--ion-color-texti-shade);--ion-color-tint: var(--ion-color-texti-tint)}.ion-color-darki{--ion-color-base: var(--ion-color-darki);--ion-color-base-rgb: var(--ion-color-darki-rgb);--ion-color-contrast: var(--ion-color-darki-contrast);--ion-color-contrast-rgb: var(--ion-color-darki-contrast-rgb);--ion-color-shade: var(--ion-color-darki-shade);--ion-color-tint: var(--ion-color-darki-tint)}.section{margin-top:1rem}.input{margin:.5rem 0}@media (min-width: 768px){.input{margin:.75rem 0}}.field-description{display:block;font-size:.75rem;color:var(--ion-color-dark);margin-bottom:.25rem;line-height:1.4}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: TextareaInputComponent, selector: "val-textarea-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckInputComponent, selector: "val-check-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonGroupComponent, selector: "val-button-group", inputs: ["props"], outputs: ["onClick"] }, { kind: "component", type: DividerComponent, selector: "val-divider", inputs: ["props"] }, { kind: "component", type: HintComponent, selector: "val-hint", inputs: ["props"] }, { kind: "component", type: CommentInputComponent, selector: "val-comment-input", inputs: ["props"] }, { kind: "component", type: DateInputComponent, selector: "val-date-input", inputs: ["preset", "props"] }, { kind: "component", type: FileInputComponent, selector: "val-file-input", inputs: ["props"] }, { kind: "component", type: HourInputComponent, selector: "val-hour-input", inputs: ["props"] }, { kind: "component", type: EmailInputComponent, selector: "val-email-input", inputs: ["preset", "props"] }, { kind: "component", type: NumberInputComponent, selector: "val-number-input", inputs: ["props"] }, { kind: "component", type: NumberFromToComponent, selector: "val-number-from-to", inputs: ["props"] }, { kind: "component", type: RadioInputComponent, selector: "val-radio-input", inputs: ["props"] }, { kind: "component", type: PasswordInputComponent, selector: "val-password-input", inputs: ["preset", "props"] }, { kind: "component", type: PinInputComponent, selector: "val-pin-input", inputs: ["props"] }, { kind: "component", type: SelectSearchComponent, selector: "val-select-search", inputs: ["label", "labelProperty", "valueProperty", "multiple", "placeholder", "props"] }, { kind: "component", type: MultiSelectSearchComponent, selector: "val-multi-select-search", inputs: ["label", "labelProperty", "valueProperty", "placeholder", "props"] }, { kind: "component", type: SearchSelectorComponent, selector: "val-select-input", inputs: ["preset", "props"] }, { kind: "component", type: PhoneInputComponent, selector: "val-phone-input", inputs: ["preset", "props"], outputs: ["phoneChange"] }, { kind: "component", type: ToggleInputComponent, selector: "val-toggle-input", inputs: ["preset", "props"] }, { kind: "component", type: CheckboxRadioInputComponent, selector: "val-checkbox-radio-input", inputs: ["props"] }, { kind: "component", type: UsernameInputComponent, selector: "val-username-input", inputs: ["props"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormComponent, decorators: [{
             type: Component,
@@ -30324,6 +30362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ToggleInputComponent,
                         CheckboxRadioInputComponent,
                         UsernameInputComponent,
+                        AttachmentUploaderComponent,
                     ], template: `
     <div class="container">
       <form [formGroup]="form">
@@ -30341,7 +30380,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <val-title [props]="{ content: s.name, size: 'large', color: '', bold: false }"></val-title>
             @for (f of s.fields; track f.name) {
               <div class="input" [attr.data-testid]="f.token">
-                @if (f.type !== types.PHONE && f.type !== types.HANDLE) {
+                @if (f.type !== types.PHONE && f.type !== types.HANDLE && f.type !== types.ATTACHMENT) {
                   <val-title [props]="{ content: f.label, size: 'small', color: 'dark', bold: false }"></val-title>
                 }
                 @if (f.description) {
@@ -30408,6 +30447,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   @case (types.CHECKBOX_RADIO) {
                     <val-checkbox-radio-input [props]="getFieldProp(f)"></val-checkbox-radio-input>
                   }
+                  @case (types.ATTACHMENT) {
+                    <val-attachment-uploader
+                      [props]="{
+                        uploadFn: f.uploadFn,
+                        disabled: f.state === states.DISABLED || f.state === states.WORKING,
+                      }"
+                      (attachmentsChange)="onAttachmentChange(f.name, $event)"
+                    ></val-attachment-uploader>
+                  }
                 }
                 <val-hint [props]="getFieldProp(f)"></val-hint>
               </div>