valtech-components 4.0.996 → 4.0.997

package/fesm2022/valtech-components.mjs

@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.996';
+const VERSION = '4.0.997';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -39455,6 +39455,17 @@ class SurveyResponseComponent {
             this.i18n.lang();
             return { variant: 'empty', title: this.t('sentTitle'), description: this.t('sentBody') };
         });
+        this.successPresentation = computed(() => {
+            const cfg = this.typeConfig();
+            if (!cfg?.presentation)
+                return null;
+            const title = cfg.presentation.successTitle?.trim() || this.t('sentTitle');
+            const message = cfg.presentation.successMessage?.trim() || this.t('sentBody');
+            const imageUrl = cfg.presentation.successImageUrl?.trim() || '';
+            if (!cfg.presentation.successTitle && !cfg.presentation.successMessage && !imageUrl)
+                return null;
+            return { title, message, imageUrl };
+        });
         this.loadErrorState = computed(() => {
             this.i18n.lang();
             return { variant: 'error', title: this.t('loadErrorTitle'), description: this.t('loadErrorBody') };
@@ -39658,13 +39669,28 @@ class SurveyResponseComponent {
     } @else if (alreadyAnswered()) {
       <val-empty-state [props]="alreadyAnsweredState()" />
     } @else if (sent()) {
-      <val-empty-state [props]="sentState()" />
+      @if (successPresentation(); as success) {
+        <section class="survey-response survey-response__success" aria-live="polite">
+          @if (success.imageUrl) {
+            <img class="survey-response__success-image" [src]="success.imageUrl" [alt]="success.title" />
+          }
+          <val-display [props]="{ content: success.title, size: 'small', color: 'dark' }" />
+          @if (success.message) {
+            <val-title [props]="{ content: success.message, size: 'large', color: '', bold: false }" />
+          }
+        </section>
+      } @else {
+        <val-empty-state [props]="sentState()" />
+      }
     } @else {
       @if (typeConfig(); as cfg) {
         @if (!canRespond()) {
           <val-empty-state [props]="loginRequiredState()" />
         } @else {
           <div class="survey-response">
+            @if (cfg.presentation?.headerImageUrl) {
+              <img class="survey-response__header-image" [src]="cfg.presentation?.headerImageUrl" [alt]="cfg.label" />
+            }
             <val-display [props]="{ content: cfg.label, size: 'small', color: 'dark' }" />
             @if (cfg.subtitle) {
               <val-title [props]="{ content: cfg.subtitle, size: 'large', color: '', bold: false }" />
@@ -39695,7 +39721,7 @@ class SurveyResponseComponent {
         }
       }
     }
-  `, isInline: true, styles: [":host{display:block}.survey-response{display:flex;flex-direction:column;gap:16px}.survey-response__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}.survey-response__hint{display:block;margin-top:4px;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.survey-response__loading{min-height:120px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.survey-response{display:flex;flex-direction:column;gap:16px}.survey-response__header-image,.survey-response__success-image{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:var(--val-radius-md, 12px)}.survey-response__success{align-items:center;text-align:center}.survey-response__success-image{max-width:320px}.survey-response__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}.survey-response__hint{display:block;margin-top:4px;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.survey-response__loading{min-height:120px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: EmptyStateComponent, selector: "val-empty-state", inputs: ["props"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onValueChange", "onInvalid", "onSelectChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, decorators: [{
             type: Component,
@@ -39723,13 +39749,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
     } @else if (alreadyAnswered()) {
       <val-empty-state [props]="alreadyAnsweredState()" />
     } @else if (sent()) {
-      <val-empty-state [props]="sentState()" />
+      @if (successPresentation(); as success) {
+        <section class="survey-response survey-response__success" aria-live="polite">
+          @if (success.imageUrl) {
+            <img class="survey-response__success-image" [src]="success.imageUrl" [alt]="success.title" />
+          }
+          <val-display [props]="{ content: success.title, size: 'small', color: 'dark' }" />
+          @if (success.message) {
+            <val-title [props]="{ content: success.message, size: 'large', color: '', bold: false }" />
+          }
+        </section>
+      } @else {
+        <val-empty-state [props]="sentState()" />
+      }
     } @else {
       @if (typeConfig(); as cfg) {
         @if (!canRespond()) {
           <val-empty-state [props]="loginRequiredState()" />
         } @else {
           <div class="survey-response">
+            @if (cfg.presentation?.headerImageUrl) {
+              <img class="survey-response__header-image" [src]="cfg.presentation?.headerImageUrl" [alt]="cfg.label" />
+            }
             <val-display [props]="{ content: cfg.label, size: 'small', color: 'dark' }" />
             @if (cfg.subtitle) {
               <val-title [props]="{ content: cfg.subtitle, size: 'large', color: '', bold: false }" />
@@ -39760,7 +39801,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       }
     }
-  `, styles: [":host{display:block}.survey-response{display:flex;flex-direction:column;gap:16px}.survey-response__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}.survey-response__hint{display:block;margin-top:4px;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.survey-response__loading{min-height:120px}\n"] }]
+  `, styles: [":host{display:block}.survey-response{display:flex;flex-direction:column;gap:16px}.survey-response__header-image,.survey-response__success-image{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:var(--val-radius-md, 12px)}.survey-response__success{align-items:center;text-align:center}.survey-response__success-image{max-width:320px}.survey-response__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}.survey-response__hint{display:block;margin-top:4px;font-size:.8125rem;color:var(--ion-color-medium, #92949c)}.survey-response__loading{min-height:120px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], submitted: [{
@@ -40615,6 +40656,15 @@ const SURVEY_BUILDER_I18N = {
         titlePlaceholder: 'Ej: ¿Qué te pareció el evento?',
         subtitleLabel: 'Subtítulo',
         subtitlePlaceholder: 'Ej: Ayúdanos a mejorar respondiendo estas preguntas',
+        presentationLabel: 'Presentación',
+        headerImageLabel: 'Imagen inicial',
+        headerImagePlaceholder: 'URL de la imagen que abre la encuesta',
+        successTitleLabel: 'Título de agradecimiento',
+        successTitlePlaceholder: 'Ej: Gracias por responder',
+        successMessageLabel: 'Mensaje de agradecimiento',
+        successMessagePlaceholder: 'Ej: Tu respuesta quedó registrada',
+        successImageLabel: 'Imagen de cierre',
+        successImagePlaceholder: 'URL de la imagen que se muestra al terminar',
         questionsLabel: 'Preguntas',
         questionLabelPlaceholder: 'Escribe la pregunta',
         addQuestion: 'Agregar pregunta',
@@ -40639,6 +40689,15 @@ const SURVEY_BUILDER_I18N = {
         titlePlaceholder: 'E.g: How was the event?',
         subtitleLabel: 'Subtitle',
         subtitlePlaceholder: 'E.g: Help us improve by answering these questions',
+        presentationLabel: 'Presentation',
+        headerImageLabel: 'Opening image',
+        headerImagePlaceholder: 'Image URL shown at the start of the survey',
+        successTitleLabel: 'Thank-you title',
+        successTitlePlaceholder: 'E.g: Thanks for answering',
+        successMessageLabel: 'Thank-you message',
+        successMessagePlaceholder: 'E.g: Your response was recorded',
+        successImageLabel: 'Closing image',
+        successImagePlaceholder: 'Image URL shown after submit',
         questionsLabel: 'Questions',
         questionLabelPlaceholder: 'Write the question',
         addQuestion: 'Add question',
@@ -40698,6 +40757,10 @@ class SurveyBuilderComponent {
         this.errors = inject(ValtechErrorService);
         this.titleControl = new FormControl('', { nonNullable: true });
         this.subtitleControl = new FormControl('', { nonNullable: true });
+        this.headerImageControl = new FormControl('', { nonNullable: true });
+        this.successTitleControl = new FormControl('', { nonNullable: true });
+        this.successMessageControl = new FormControl('', { nonNullable: true });
+        this.successImageControl = new FormControl('', { nonNullable: true });
         this.questions = signal([]);
         this.editingId = signal('');
         this.validationError = signal('');
@@ -40715,14 +40778,14 @@ class SurveyBuilderComponent {
     async ngOnInit() {
         // Sembrado directo: la app ya tenía la encuesta, no hace falta leerla.
         if (this.props.initial) {
-            this.hydrate(this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions);
+            this.hydrate(this.props.initial.label, this.props.initial.subtitle, this.props.initial.questions, this.props.initial.presentation);
             return;
         }
         if (!this.props.typeId)
             return;
         try {
             const cfg = await firstValueFrom(this.requests.getRequestType(this.props.typeId));
-            this.hydrate(cfg.label, cfg.subtitle ?? '', cfg.fieldSchema);
+            this.hydrate(cfg.label, cfg.subtitle ?? '', cfg.fieldSchema, cfg.presentation);
         }
         catch (err) {
             this.errors.handle(err, {
@@ -40870,9 +40933,10 @@ class SurveyBuilderComponent {
             }, index));
         });
         const subtitle = this.subtitleControl.value.trim();
+        const presentation = this.presentationPayload();
         // La app guarda: acá solo se valida y se entrega lo escrito.
         if (this.props.persist === false) {
-            this.draft.emit({ label: title, subtitle, questions: fieldSchema });
+            this.draft.emit({ label: title, subtitle, presentation, questions: fieldSchema });
             return;
         }
         this.saving.set(true);
@@ -40885,6 +40949,7 @@ class SurveyBuilderComponent {
         const payload = {
             label: title,
             subtitle,
+            presentation,
             entityRef: this.props.entityRef,
             skipReview: true,
             skipSubmitterIdentity: true,
@@ -40909,11 +40974,24 @@ class SurveyBuilderComponent {
             });
         }
     }
-    hydrate(label, subtitle, questions) {
+    hydrate(label, subtitle, questions, presentation) {
         this.titleControl.setValue(label ?? '');
         this.subtitleControl.setValue(subtitle ?? '');
+        this.headerImageControl.setValue(presentation?.headerImageUrl ?? '');
+        this.successTitleControl.setValue(presentation?.successTitle ?? '');
+        this.successMessageControl.setValue(presentation?.successMessage ?? '');
+        this.successImageControl.setValue(presentation?.successImageUrl ?? '');
         this.questions.set([...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f)));
     }
+    presentationPayload() {
+        const presentation = {
+            headerImageUrl: this.headerImageControl.value.trim(),
+            successTitle: this.successTitleControl.value.trim(),
+            successMessage: this.successMessageControl.value.trim(),
+            successImageUrl: this.successImageControl.value.trim(),
+        };
+        return Object.values(presentation).some(Boolean) ? presentation : undefined;
+    }
     rowFromField(f) {
         return {
             id: `row-${rowUid++}`,
@@ -40936,6 +41014,22 @@ class SurveyBuilderComponent {
         <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
       </val-form-field>
 
+      <div class="survey-builder__presentation">
+        <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+        <val-form-field [label]="t('headerImageLabel')">
+          <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successTitleLabel')">
+          <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successMessageLabel')">
+          <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successImageLabel')">
+          <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
+        </val-form-field>
+      </div>
+
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -41035,7 +41129,7 @@ class SurveyBuilderComponent {
         (onClick)="save()"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
+  `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
             type: Component,
@@ -41055,6 +41149,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
       </val-form-field>
 
+      <div class="survey-builder__presentation">
+        <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+        <val-form-field [label]="t('headerImageLabel')">
+          <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successTitleLabel')">
+          <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successMessageLabel')">
+          <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('successImageLabel')">
+          <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
+        </val-form-field>
+      </div>
+
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -41154,7 +41264,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         (onClick)="save()"
       />
     </div>
-  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
+  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], saved: [{