valtech-components 4.0.80 → 4.0.82

package/fesm2022/valtech-components.mjs

@@ -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.80';
+const VERSION = '4.0.82';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -39449,7 +39449,7 @@ class CompanyFooterComponent {
         </ion-row>
       </ion-grid>
     </footer>
-  `, isInline: true, styles: [":host{display:block}.withPadding{padding:16px}.withBackground{background-color:#ece5f6}:host-context(body.dark) .withBackground,:host-context(html.ion-palette-dark) .withBackground,:host-context([data-theme=\"dark\"]) .withBackground{background-color:#0e0420}.withRoundedTop{border-radius:var(--val-footer-top-radius, 24px) var(--val-footer-top-radius, 24px) 0 0;overflow:hidden}.borderless{border-top:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: RightsFooterComponent, selector: "val-rights-footer", inputs: ["props"] }, { kind: "component", type: FooterLinksComponent, selector: "val-footer-links", inputs: ["props"], outputs: ["logoClick"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.withPadding{padding:16px}.withBackground{background-color:#f5f0fb}:host-context(body.dark) .withBackground,:host-context(html.ion-palette-dark) .withBackground,:host-context([data-theme=\"dark\"]) .withBackground{background-color:#0e0420}.withRoundedTop{border-radius:var(--val-footer-top-radius, 24px) var(--val-footer-top-radius, 24px) 0 0;overflow:hidden}.borderless{border-top:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: IonGrid, selector: "ion-grid", inputs: ["fixed"] }, { kind: "component", type: IonRow, selector: "ion-row" }, { kind: "component", type: IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { kind: "component", type: RightsFooterComponent, selector: "val-rights-footer", inputs: ["props"] }, { kind: "component", type: FooterLinksComponent, selector: "val-footer-links", inputs: ["props"], outputs: ["logoClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CompanyFooterComponent, decorators: [{
             type: Component,
@@ -39471,7 +39471,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-row>
       </ion-grid>
     </footer>
-  `, styles: [":host{display:block}.withPadding{padding:16px}.withBackground{background-color:#ece5f6}:host-context(body.dark) .withBackground,:host-context(html.ion-palette-dark) .withBackground,:host-context([data-theme=\"dark\"]) .withBackground{background-color:#0e0420}.withRoundedTop{border-radius:var(--val-footer-top-radius, 24px) var(--val-footer-top-radius, 24px) 0 0;overflow:hidden}.borderless{border-top:none!important}\n"] }]
+  `, styles: [":host{display:block}.withPadding{padding:16px}.withBackground{background-color:#f5f0fb}:host-context(body.dark) .withBackground,:host-context(html.ion-palette-dark) .withBackground,:host-context([data-theme=\"dark\"]) .withBackground{background-color:#0e0420}.withRoundedTop{border-radius:var(--val-footer-top-radius, 24px) var(--val-footer-top-radius, 24px) 0 0;overflow:hidden}.borderless{border-top:none!important}\n"] }]
         }] });
 
 /**
@@ -64193,19 +64193,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * ```
  */
 
+const FEEDBACK_FORM_I18N = {
+    es: {
+        formTitle: 'Enviar feedback',
+        formSubtitle: 'Cuéntanos qué piensas. Bugs, sugerencias y mejoras.',
+        feedbackType: 'Tipo',
+        title: 'Título',
+        titlePlaceholder: 'Resumen corto (5–120 caracteres)',
+        titleValidation: 'El título debe tener entre 5 y 120 caracteres',
+        description: 'Descripción',
+        descriptionPlaceholder: 'Describe el problema o sugerencia en detalle...',
+        descriptionHint: 'Capturamos automáticamente tu navegador, SO y URL actual.',
+        descriptionValidation: 'La descripción debe tener entre 10 y 2000 caracteres',
+        submit: 'Enviar',
+        feedbackSuccess: '¡Gracias por tu feedback!',
+        feedbackError: 'No se pudo enviar el feedback. Inténtalo de nuevo.',
+    },
+    en: {
+        formTitle: 'Send feedback',
+        formSubtitle: 'Tell us what you think. Bugs, suggestions and improvements.',
+        feedbackType: 'Type',
+        title: 'Title',
+        titlePlaceholder: 'Short summary (5–120 chars)',
+        titleValidation: 'Title must be between 5 and 120 characters',
+        description: 'Description',
+        descriptionPlaceholder: 'Describe the problem or suggestion in detail...',
+        descriptionHint: 'We automatically capture your browser, OS and current URL.',
+        descriptionValidation: 'Description must be between 10 and 2000 characters',
+        submit: 'Send',
+        feedbackSuccess: 'Thanks for your feedback!',
+        feedbackError: 'Could not send feedback. Please try again.',
+    },
+};
 class FeedbackFormComponent {
     constructor() {
         this.props = {};
         this.onSubmit = new EventEmitter();
         this.onCancel = new EventEmitter();
+        this.onError = new EventEmitter();
         this.i18n = inject(I18nService);
         this.feedbackService = inject(FeedbackService);
+        this.toast = inject(ToastService);
+        this.errors = inject(ValtechErrorService);
         this.typeOptions = DEFAULT_FEEDBACK_TYPE_OPTIONS;
         this.isSubmitting = signal(false);
-        this.isSuccess = signal(false);
-        this.error = signal(null);
+        this.uploadFn = (file) => this.feedbackService.uploadAttachment(file);
         this.currentAttachments = [];
-        addIcons({ checkmarkCircleOutline, closeCircleOutline });
+        this.i18n.registerDefaults('FeedbackForm', FEEDBACK_FORM_I18N);
     }
     ngOnInit() {
         if (this.props.enabledTypes?.length) {
@@ -64228,7 +64262,7 @@ class FeedbackFormComponent {
             fields.push({
                 token: 'feedback-type',
                 name: 'type',
-                label: this.i18n.t('feedbackType'),
+                label: this.tt('feedbackType'),
                 hint: '',
                 placeholder: '',
                 type: InputType.SELECT,
@@ -64243,32 +64277,32 @@ class FeedbackFormComponent {
         fields.push({
             token: 'feedback-title',
             name: 'title',
-            label: this.props.titleLabel ?? this.i18n.t('title'),
+            label: this.props.titleLabel ?? this.tt('title'),
             hint: '',
-            placeholder: this.props.titlePlaceholder ?? this.i18n.t('titlePlaceholder'),
+            placeholder: this.props.titlePlaceholder ?? this.tt('titlePlaceholder'),
             type: InputType.TEXT,
             order: 2,
-            validators: [Validators.required, Validators.minLength(5), Validators.maxLength(200)],
+            validators: [Validators.required, Validators.minLength(5), Validators.maxLength(120)],
             errors: {
-                required: this.i18n.t('titleValidation'),
-                minlength: this.i18n.t('titleValidation'),
-                maxlength: this.i18n.t('titleValidation'),
+                required: this.tt('titleValidation'),
+                minlength: this.tt('titleValidation'),
+                maxlength: this.tt('titleValidation'),
             },
             state: ComponentStates.ENABLED,
         }, {
             token: 'feedback-description',
             name: 'description',
-            label: this.props.descriptionLabel ?? this.i18n.t('description'),
-            hint: '',
-            placeholder: this.props.descriptionPlaceholder ?? this.i18n.t('descriptionPlaceholder'),
+            label: this.props.descriptionLabel ?? this.tt('description'),
+            hint: this.tt('descriptionHint'),
+            placeholder: this.props.descriptionPlaceholder ?? this.tt('descriptionPlaceholder'),
             type: InputType.TEXTAREA,
             order: 3,
             range: { min: 10, max: 2000 },
             validators: [Validators.required, Validators.minLength(10), Validators.maxLength(2000)],
             errors: {
-                required: this.i18n.t('descriptionValidation'),
-                minlength: this.i18n.t('descriptionValidation'),
-                maxlength: this.i18n.t('descriptionValidation'),
+                required: this.tt('descriptionValidation'),
+                minlength: this.tt('descriptionValidation'),
+                maxlength: this.tt('descriptionValidation'),
             },
             state: ComponentStates.ENABLED,
         });
@@ -64279,7 +64313,7 @@ class FeedbackFormComponent {
                 type: 'submit',
                 color: 'dark',
                 shape: 'round',
-                text: this.props.submitButtonText ?? this.i18n.t('submit'),
+                text: this.props.submitButtonText ?? this.tt('submit'),
                 state: ComponentStates.ENABLED,
                 expand: 'block',
             },
@@ -64292,8 +64326,6 @@ class FeedbackFormComponent {
         if (this.currentAttachments.some(a => a.status === 'uploading'))
             return;
         this.isSubmitting.set(true);
-        this.error.set(null);
-        this.isSuccess.set(false);
         this.formProps.state = ComponentStates.WORKING;
         this.formProps.actions.state = ComponentStates.WORKING;
         try {
@@ -64302,11 +64334,21 @@ class FeedbackFormComponent {
             const description = submitted.fields['description'];
             const attachmentUrls = this.currentAttachments.filter(a => a.status === 'ready').map(a => a.url);
             const response = await this.feedbackService.createAsync(type, title, description, attachmentUrls, this.props.contentRef);
-            this.isSuccess.set(true);
+            this.toast.show({
+                message: this.props.successMessage ?? this.tt('feedbackSuccess'),
+                duration: 2500,
+                color: 'dark',
+                position: 'top',
+            });
             this.onSubmit.emit({ response, type, title, attachmentUrls });
         }
         catch (err) {
-            this.error.set(err.error?.message || err.message || this.i18n.t('feedbackError'));
+            this.errors.handle(err, {
+                context: 'feedback-form.submit',
+                fallbackKey: 'feedbackError',
+                i18nNamespace: 'FeedbackForm',
+            });
+            this.onError.emit(err);
         }
         finally {
             this.isSubmitting.set(false);
@@ -64320,36 +64362,27 @@ class FeedbackFormComponent {
     onCancelClick() {
         this.onCancel.emit();
     }
+    tt(key) {
+        return this.i18n.t(key, 'FeedbackForm');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedbackFormComponent, isStandalone: true, selector: "val-feedback-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedbackFormComponent, isStandalone: true, selector: "val-feedback-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel", onError: "onError" }, ngImport: i0, template: `
     <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
       @if (props.showTitle) {
         <div class="form-header">
-          <h2 class="form-title">{{ props.pageTitle || i18n.t('formTitle') }}</h2>
-          <p class="form-subtitle">{{ props.pageSubtitle || i18n.t('formSubtitle') }}</p>
+          <val-display [props]="{ size: 'small', color: 'dark', content: props.pageTitle || tt('formTitle') }" />
+          <val-title
+            [props]="{ size: 'large', color: 'dark', bold: false, content: props.pageSubtitle || tt('formSubtitle') }"
+          />
         </div>
       }
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
         @if (props.showAttachments !== false) {
           <val-attachment-uploader
-            [props]="{ maxFiles: 5 }"
+            [props]="{ maxFiles: 5, uploadFn: uploadFn }"
             (attachmentsChange)="onAttachmentsChange($event)"
           ></val-attachment-uploader>
         }
-
-        @if (error()) {
-          <div class="feedback-alert error">
-            <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
-            <span>{{ error() }}</span>
-          </div>
-        }
-
-        @if (isSuccess()) {
-          <div class="feedback-alert success">
-            <ion-icon name="checkmark-circle-outline" aria-hidden="true"></ion-icon>
-            <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
-          </div>
-        }
       </val-form>
 
       @if (props.cancelButtonText) {
@@ -64358,39 +64391,27 @@ 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}.form-title{font-size:1.5rem;font-weight:700;margin:0 0 4px;color:var(--ion-text-color)}.form-subtitle{font-size:1rem;font-weight:700;margin:0;color:var(--ion-text-color)}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.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: 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"] }] }); }
+  `, 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: 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"] }] }); }
 }
 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, IonButton, IonIcon], template: `
+            args: [{ selector: 'val-feedback-form', standalone: true, imports: [CommonModule, FormComponent, AttachmentUploaderComponent, DisplayComponent, TitleComponent, IonButton], template: `
     <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
       @if (props.showTitle) {
         <div class="form-header">
-          <h2 class="form-title">{{ props.pageTitle || i18n.t('formTitle') }}</h2>
-          <p class="form-subtitle">{{ props.pageSubtitle || i18n.t('formSubtitle') }}</p>
+          <val-display [props]="{ size: 'small', color: 'dark', content: props.pageTitle || tt('formTitle') }" />
+          <val-title
+            [props]="{ size: 'large', color: 'dark', bold: false, content: props.pageSubtitle || tt('formSubtitle') }"
+          />
         </div>
       }
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
         @if (props.showAttachments !== false) {
           <val-attachment-uploader
-            [props]="{ maxFiles: 5 }"
+            [props]="{ maxFiles: 5, uploadFn: uploadFn }"
             (attachmentsChange)="onAttachmentsChange($event)"
           ></val-attachment-uploader>
         }
-
-        @if (error()) {
-          <div class="feedback-alert error">
-            <ion-icon name="close-circle-outline" aria-hidden="true"></ion-icon>
-            <span>{{ error() }}</span>
-          </div>
-        }
-
-        @if (isSuccess()) {
-          <div class="feedback-alert success">
-            <ion-icon name="checkmark-circle-outline" aria-hidden="true"></ion-icon>
-            <span>{{ props.successMessage || i18n.t('feedbackSuccess') }}</span>
-          </div>
-        }
       </val-form>
 
       @if (props.cancelButtonText) {
@@ -64399,13 +64420,15 @@ 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}.form-title{font-size:1.5rem;font-weight:700;margin:0 0 4px;color:var(--ion-text-color)}.form-subtitle{font-size:1rem;font-weight:700;margin:0;color:var(--ion-text-color)}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.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: [{
                 type: Output
             }], onCancel: [{
                 type: Output
+            }], onError: [{
+                type: Output
             }] } });
 
 class RequestService {