valtech-components 4.0.1006 → 4.0.1007

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.1006';
+const VERSION = '4.0.1007';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -39116,11 +39116,22 @@ class FormSchemaBuilderService {
     }
     buildForm(schema, i18nNamespace, formName, submitLabelKey = 'submit', state = ComponentStates.ENABLED) {
         const sorted = [...schema].sort((a, b) => a.order - b.order);
-        const fields = sorted.map(def => this.buildField(def, i18nNamespace, state));
-        const section = { name: '', order: 0, fields };
+        const sectionsById = new Map();
+        sorted.forEach(def => {
+            const key = def.sectionId || def.sectionLabel || '';
+            const section = sectionsById.get(key) ??
+                {
+                    name: def.sectionLabel || '',
+                    order: def.sectionOrder ?? 0,
+                    fields: [],
+                };
+            section.fields.push(this.buildField(def, i18nNamespace, state));
+            sectionsById.set(key, section);
+        });
+        const sections = [...sectionsById.values()].sort((a, b) => a.order - b.order);
         return {
             name: formName,
-            sections: [section],
+            sections,
             actions: button({
                 text: this.i18n.t(submitLabelKey, i18nNamespace),
                 type: 'submit',
@@ -39195,6 +39206,9 @@ class FormSchemaBuilderService {
             required: !!field.required,
             validators,
             options: this.normalizeOptions(field.options),
+            sectionId: field.sectionId,
+            sectionLabel: field.sectionLabel?.trim() ?? '',
+            sectionOrder: field.sectionOrder,
             step: field.step,
             unitLabel: field.unitLabel,
             numberPickerVariant: field.numberPickerVariant,
@@ -39399,6 +39413,9 @@ const SURVEY_RESPONSE_I18N = {
         required: 'Esta pregunta es obligatoria',
         yes: 'Sí',
         no: 'No',
+        previous: 'Volver',
+        next: 'Siguiente',
+        stepsLabel: 'Pasos de la encuesta',
         submit: 'Enviar',
         alreadyTitle: 'Ya respondiste esta encuesta',
         alreadyBody: 'Tu respuesta quedó registrada la primera vez. Gracias por tu tiempo.',
@@ -39422,6 +39439,9 @@ const SURVEY_RESPONSE_I18N = {
         required: 'This question is required',
         yes: 'Yes',
         no: 'No',
+        previous: 'Back',
+        next: 'Next',
+        stepsLabel: 'Survey steps',
         submit: 'Submit',
         alreadyTitle: 'You already answered this survey',
         alreadyBody: 'Your response was recorded the first time. Thanks for your time.',
@@ -39479,6 +39499,8 @@ class SurveyResponseComponent {
         this.sending = signal(false);
         this.typeConfig = signal(null);
         this.alreadyAnswered = signal(false);
+        this.responseStep = signal(0);
+        this.responseValues = signal({});
         this.nameControl = new FormControl('', { nonNullable: true });
         this.emailControl = new FormControl('', { nonNullable: true });
         this.form = new FormGroup({});
@@ -39487,7 +39509,20 @@ class SurveyResponseComponent {
             if (!cfg)
                 return null;
             const form = this.formSchemas.buildForm(this.surveySchemaForForm(cfg.fieldSchema), NAMESPACE$4, '', 'submit', this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED);
-            return { ...form, showDividers: false, fieldSpacing: 16 };
+            const sections = this.hasResponseSteps() ? [this.sectionWithStoredValues(this.responseSections()[this.responseStep()])] : form.sections;
+            return {
+                ...form,
+                sections,
+                showDividers: false,
+                fieldSpacing: 16,
+                controlled: this.hasResponseSteps(),
+            };
+        });
+        this.responseSections = computed(() => {
+            const cfg = this.typeConfig();
+            if (!cfg)
+                return [];
+            return this.formSchemas.buildForm(this.surveySchemaForForm(cfg.fieldSchema), NAMESPACE$4, '', 'submit').sections;
         });
         /** Preguntas ordenadas, expuestas para tests/hosts que inspeccionan el schema resuelto. */
         this.questions = computed(() => {
@@ -39565,6 +39600,19 @@ class SurveyResponseComponent {
         }
         this.form = new FormGroup(group);
     }
+    hasResponseSteps() {
+        return this.responseSections().filter(section => !!section.name).length > 1;
+    }
+    sectionWithStoredValues(section) {
+        const values = this.responseValues();
+        return {
+            ...section,
+            fields: section.fields.map(field => ({
+                ...field,
+                value: Object.prototype.hasOwnProperty.call(values, field.name) ? values[field.name] : field.value,
+            })),
+        };
+    }
     questionControl(name) {
         return (this.formComponent?.Form.get(name) ?? this.form.get(name));
     }
@@ -39667,10 +39715,14 @@ class SurveyResponseComponent {
         if (!cfg)
             return;
         this.sending.set(true);
+        const fields = {
+            ...this.responseValues(),
+            ...(event?.fields ?? this.formComponent?.Form.getRawValue() ?? this.form.getRawValue()),
+        };
         const payload = {
             type: cfg.typeId,
             title: cfg.label,
-            fields: event?.fields ?? this.formComponent?.Form.getRawValue() ?? this.form.getRawValue(),
+            fields,
             ...(this.props.inviteToken ? { inviteToken: this.props.inviteToken } : {}),
             ...(this.needsIdentity()
                 ? { submitter: { name: this.nameControl.value.trim(), email: this.emailControl.value.trim() } }
@@ -39701,6 +39753,54 @@ class SurveyResponseComponent {
             });
         }
     }
+    nextResponseStep() {
+        if (!this.formComponent?.validate()) {
+            this.markInvalid();
+            return;
+        }
+        this.responseValues.update(values => ({ ...values, ...this.formComponent?.Form.getRawValue() }));
+        this.responseStep.update(step => Math.min(step + 1, this.responseSections().length - 1));
+    }
+    previousResponseStep() {
+        this.responseValues.update(values => ({ ...values, ...this.formComponent?.Form.getRawValue() }));
+        this.responseStep.update(step => Math.max(step - 1, 0));
+    }
+    responseBackProps() {
+        return {
+            token: 'survey-response-back',
+            text: this.t('previous'),
+            color: 'dark',
+            fill: 'outline',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+        };
+    }
+    responseNextProps() {
+        return {
+            token: 'survey-response-next',
+            text: this.t('next'),
+            color: 'dark',
+            fill: 'solid',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+        };
+    }
+    responseSubmitProps() {
+        return {
+            token: 'survey-response-submit',
+            text: this.t('submit'),
+            color: 'dark',
+            fill: 'solid',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: this.sending() ? ComponentStates.WORKING : ComponentStates.ENABLED,
+        };
+    }
     hasMissingRequiredMultiSelect() {
         return this.questions()
             .filter(q => q.type === 'MULTI_SELECT' && q.required)
@@ -39764,13 +39864,38 @@ class SurveyResponseComponent {
             }
 
             @if (formProps(); as props) {
+              @if (hasResponseSteps()) {
+                <nav class="survey-response__steps" [attr.aria-label]="t('stepsLabel')">
+                  @for (section of responseSections(); track section.name; let i = $index) {
+                    <span
+                      class="survey-response__step"
+                      [class.survey-response__step--active]="responseStep() === i"
+                      [attr.aria-current]="responseStep() === i ? 'step' : null"
+                    >
+                      {{ i + 1 }}
+                    </span>
+                  }
+                </nav>
+              }
               <val-form [props]="props" (onSubmit)="submit($event)" (onInvalid)="markInvalid()" />
+              @if (hasResponseSteps()) {
+                <div class="survey-response__actions">
+                  @if (responseStep() > 0) {
+                    <val-button [props]="responseBackProps()" (onClick)="previousResponseStep()" />
+                  }
+                  @if (responseStep() < responseSections().length - 1) {
+                    <val-button [props]="responseNextProps()" (onClick)="nextResponseStep()" />
+                  } @else {
+                    <val-button [props]="responseSubmitProps()" (onClick)="submit()" />
+                  }
+                </div>
+              }
             }
           </div>
         }
       }
     }
-  `, 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__success-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.95rem;font-weight:600}.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__success-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.95rem;font-weight:600}.survey-response__steps{display:flex;gap:6px}.survey-response__step{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:999px;color:var(--ion-color-medium, #92949c);font-size:.8125rem;font-weight:700}.survey-response__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-response__actions{display:flex;justify-content:flex-end;gap:8px}.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: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { 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,
@@ -39841,13 +39966,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }
 
             @if (formProps(); as props) {
+              @if (hasResponseSteps()) {
+                <nav class="survey-response__steps" [attr.aria-label]="t('stepsLabel')">
+                  @for (section of responseSections(); track section.name; let i = $index) {
+                    <span
+                      class="survey-response__step"
+                      [class.survey-response__step--active]="responseStep() === i"
+                      [attr.aria-current]="responseStep() === i ? 'step' : null"
+                    >
+                      {{ i + 1 }}
+                    </span>
+                  }
+                </nav>
+              }
               <val-form [props]="props" (onSubmit)="submit($event)" (onInvalid)="markInvalid()" />
+              @if (hasResponseSteps()) {
+                <div class="survey-response__actions">
+                  @if (responseStep() > 0) {
+                    <val-button [props]="responseBackProps()" (onClick)="previousResponseStep()" />
+                  }
+                  @if (responseStep() < responseSections().length - 1) {
+                    <val-button [props]="responseNextProps()" (onClick)="nextResponseStep()" />
+                  } @else {
+                    <val-button [props]="responseSubmitProps()" (onClick)="submit()" />
+                  }
+                </div>
+              }
             }
           </div>
         }
       }
     }
-  `, 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__success-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.95rem;font-weight:600}.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__success-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.95rem;font-weight:600}.survey-response__steps{display:flex;gap:6px}.survey-response__step{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:999px;color:var(--ion-color-medium, #92949c);font-size:.8125rem;font-weight:700}.survey-response__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-response__actions{display:flex;justify-content:flex-end;gap:8px}.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: [{
@@ -39865,6 +40015,8 @@ const FIELD_SCHEMA_EDITOR_I18N = {
         typeLabel: 'Tipo de campo',
         placeholderLabel: 'Texto de ayuda dentro del campo',
         hintLabel: 'Nota bajo el campo',
+        sectionLabel: 'Sección',
+        sectionPlaceholder: 'Ej: Información personal',
         requiredLabel: 'Obligatorio',
         optionsTitle: 'Opciones',
         optionsHint: 'Estas son las alternativas que puede elegir quien responde.',
@@ -39900,6 +40052,8 @@ const FIELD_SCHEMA_EDITOR_I18N = {
         typeLabel: 'Field type',
         placeholderLabel: 'Helper text inside the field',
         hintLabel: 'Note below the field',
+        sectionLabel: 'Section',
+        sectionPlaceholder: 'E.g: Personal information',
         requiredLabel: 'Required',
         optionsTitle: 'Options',
         optionsHint: 'These are the choices the person can pick.',
@@ -39974,6 +40128,7 @@ class FieldSchemaEditorComponent {
         this.labelControl = new FormControl('', { nonNullable: true });
         this.placeholderControl = new FormControl('', { nonNullable: true });
         this.hintControl = new FormControl('', { nonNullable: true });
+        this.sectionControl = new FormControl('', { nonNullable: true });
         this.requiredControl = new FormControl(true, { nonNullable: true });
         this.typeControl = new FormControl('TEXT', { nonNullable: true });
         this.options = signal([]);
@@ -40029,6 +40184,7 @@ class FieldSchemaEditorComponent {
         });
         this.placeholderControl.valueChanges.subscribe(() => this.emitChange());
         this.hintControl.valueChanges.subscribe(() => this.emitChange());
+        this.sectionControl.valueChanges.subscribe(() => this.emitChange());
         this.requiredControl.valueChanges.subscribe(() => this.emitChange());
     }
     ngOnInit() {
@@ -40040,6 +40196,7 @@ class FieldSchemaEditorComponent {
             this.labelControl.setValue(initial.label ?? '');
             this.placeholderControl.setValue(initial.placeholderText ?? '');
             this.hintControl.setValue(initial.hintText ?? '');
+            this.sectionControl.setValue(initial.sectionLabel ?? '');
             this.requiredControl.setValue(!!initial.required);
             this.typeControl.setValue(this.coerceType(initial.type));
             this.options.set(initial.options ?? []);
@@ -40087,6 +40244,7 @@ class FieldSchemaEditorComponent {
         this.labelControl.setValue(value.label ?? '');
         this.placeholderControl.setValue(value.placeholderText ?? '');
         this.hintControl.setValue(value.hintText ?? '');
+        this.sectionControl.setValue(value.sectionLabel ?? '');
         this.requiredControl.setValue(!!value.required);
         this.typeControl.setValue(this.coerceType(value.type));
         this.options.set(value.options ?? []);
@@ -40121,6 +40279,7 @@ class FieldSchemaEditorComponent {
             hintText: (this.hintControl.value || '').trim(),
             type: this.coerceType(this.typeControl.value),
             required: this.requiredControl.value,
+            sectionLabel: (this.sectionControl.value || '').trim(),
             options: this.needsOptions() ? this.options().map((option, index) => ({ ...option, order: index })) : undefined,
         };
     }
@@ -40181,6 +40340,10 @@ class FieldSchemaEditorComponent {
         </val-form-field>
       }
 
+      <val-form-field [label]="t('sectionLabel')">
+        <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
+      </val-form-field>
+
       <val-toggle-input
         [props]="{
           control: requiredControl,
@@ -40253,6 +40416,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </val-form-field>
       }
 
+      <val-form-field [label]="t('sectionLabel')">
+        <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
+      </val-form-field>
+
       <val-toggle-input
         [props]="{
           control: requiredControl,
@@ -40746,8 +40913,12 @@ const SURVEY_BUILDER_I18N = {
         wizardStepsLabel: 'Pasos para crear la encuesta',
         next: 'Siguiente',
         previous: 'Volver',
+        preview: 'Vista previa',
+        previewTitle: 'Vista previa',
+        closePreview: 'Cerrar',
         reviewTitle: 'Resumen',
         reviewNoSubtitle: 'Sin subtítulo',
+        reviewQuestionCount: '{count} pregunta',
         reviewQuestionsCount: '{count} preguntas',
         reviewHeaderImage: 'Imagen inicial configurada',
         reviewSuccessImage: 'Imagen de cierre configurada',
@@ -40801,8 +40972,12 @@ const SURVEY_BUILDER_I18N = {
         wizardStepsLabel: 'Survey builder steps',
         next: 'Next',
         previous: 'Back',
+        preview: 'Preview',
+        previewTitle: 'Preview',
+        closePreview: 'Close',
         reviewTitle: 'Summary',
         reviewNoSubtitle: 'No subtitle',
+        reviewQuestionCount: '{count} question',
         reviewQuestionsCount: '{count} questions',
         reviewHeaderImage: 'Opening image set',
         reviewSuccessImage: 'Closing image set',
@@ -40810,6 +40985,129 @@ const SURVEY_BUILDER_I18N = {
     },
 };
 
+class SurveyPreviewModalComponent {
+    constructor() {
+        this.modalTitle = '';
+        this.closeLabel = '';
+        this.title = '';
+        this.subtitle = '';
+        this.questions = [];
+        this.successTitle = '';
+        this.successMessage = '';
+        this.requiredSuffix = '';
+    }
+    sections() {
+        const map = new Map();
+        [...this.questions]
+            .sort((a, b) => a.order - b.order)
+            .forEach(question => {
+            const key = question.sectionId || question.sectionLabel || '';
+            const section = map.get(key) ??
+                {
+                    name: question.sectionLabel || '',
+                    order: question.sectionOrder ?? 0,
+                    questions: [],
+                };
+            section.questions.push(question);
+            map.set(key, section);
+        });
+        return [...map.values()].sort((a, b) => a.order - b.order);
+    }
+    close() {
+        this._modalRef?.dismiss(undefined, 'close');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyPreviewModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyPreviewModalComponent, isStandalone: true, selector: "val-survey-preview-modal", inputs: { modalTitle: "modalTitle", closeLabel: "closeLabel", title: "title", subtitle: "subtitle", presentation: "presentation", questions: "questions", successTitle: "successTitle", successMessage: "successMessage", requiredSuffix: "requiredSuffix", _modalRef: "_modalRef" }, ngImport: i0, template: `
+    <val-modal-layout [title]="modalTitle" [closeLabel]="closeLabel" (close)="close()">
+      <div class="survey-preview">
+        @if (presentation?.headerImageUrl) {
+          <img class="survey-preview__image" [src]="presentation?.headerImageUrl" [alt]="title" />
+        }
+        <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+        @if (subtitle) {
+          <val-title [props]="{ content: subtitle, size: 'large', color: '', bold: false }" />
+        }
+        @for (section of sections(); track section.name) {
+          <section class="survey-preview__section">
+            @if (section.name) {
+              <strong class="survey-preview__section-title">{{ section.name }}</strong>
+            }
+            @for (question of section.questions; track question.name) {
+              <article class="survey-preview__question">
+                <strong>{{ question.label }}</strong>
+                <span>{{ question.typeLabel }}{{ question.required ? requiredSuffix : '' }}</span>
+              </article>
+            }
+          </section>
+        }
+        <section class="survey-preview__success">
+          @if (presentation?.successImageUrl) {
+            <img class="survey-preview__success-image" [src]="presentation?.successImageUrl" [alt]="successTitle" />
+          }
+          <strong>{{ successTitle }}</strong>
+          <span>{{ successMessage }}</span>
+        </section>
+      </div>
+    </val-modal-layout>
+  `, isInline: true, styles: [":host{display:block}.survey-preview{display:flex;flex-direction:column;gap:16px}.survey-preview__image,.survey-preview__success-image{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:var(--val-radius-md, 12px)}.survey-preview__section{display:flex;flex-direction:column;gap:10px}.survey-preview__section-title{color:var(--ion-text-color, #000);font-size:1rem}.survey-preview__question,.survey-preview__success{display:flex;flex-direction:column;gap:4px;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-preview__question span,.survey-preview__success span{color:var(--ion-color-medium, #92949c);font-size:.875rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ModalLayoutComponent, selector: "val-modal-layout", inputs: ["title", "subtitle", "closeLabel", "showClose", "actions", "actionsAlign", "footer", "footerClass"], outputs: ["close", "actionClick"] }, { kind: "component", type: DisplayComponent, selector: "val-display", inputs: ["props"] }, { kind: "component", type: TitleComponent, selector: "val-title", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyPreviewModalComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-survey-preview-modal', standalone: true, imports: [CommonModule, ModalLayoutComponent, DisplayComponent, TitleComponent], template: `
+    <val-modal-layout [title]="modalTitle" [closeLabel]="closeLabel" (close)="close()">
+      <div class="survey-preview">
+        @if (presentation?.headerImageUrl) {
+          <img class="survey-preview__image" [src]="presentation?.headerImageUrl" [alt]="title" />
+        }
+        <val-display [props]="{ content: title, size: 'small', color: 'dark' }" />
+        @if (subtitle) {
+          <val-title [props]="{ content: subtitle, size: 'large', color: '', bold: false }" />
+        }
+        @for (section of sections(); track section.name) {
+          <section class="survey-preview__section">
+            @if (section.name) {
+              <strong class="survey-preview__section-title">{{ section.name }}</strong>
+            }
+            @for (question of section.questions; track question.name) {
+              <article class="survey-preview__question">
+                <strong>{{ question.label }}</strong>
+                <span>{{ question.typeLabel }}{{ question.required ? requiredSuffix : '' }}</span>
+              </article>
+            }
+          </section>
+        }
+        <section class="survey-preview__success">
+          @if (presentation?.successImageUrl) {
+            <img class="survey-preview__success-image" [src]="presentation?.successImageUrl" [alt]="successTitle" />
+          }
+          <strong>{{ successTitle }}</strong>
+          <span>{{ successMessage }}</span>
+        </section>
+      </div>
+    </val-modal-layout>
+  `, styles: [":host{display:block}.survey-preview{display:flex;flex-direction:column;gap:16px}.survey-preview__image,.survey-preview__success-image{display:block;width:100%;max-height:220px;object-fit:contain;border-radius:var(--val-radius-md, 12px)}.survey-preview__section{display:flex;flex-direction:column;gap:10px}.survey-preview__section-title{color:var(--ion-text-color, #000);font-size:1rem}.survey-preview__question,.survey-preview__success{display:flex;flex-direction:column;gap:4px;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-preview__question span,.survey-preview__success span{color:var(--ion-color-medium, #92949c);font-size:.875rem}\n"] }]
+        }], propDecorators: { modalTitle: [{
+                type: Input
+            }], closeLabel: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }], subtitle: [{
+                type: Input
+            }], presentation: [{
+                type: Input
+            }], questions: [{
+                type: Input
+            }], successTitle: [{
+                type: Input
+            }], successMessage: [{
+                type: Input
+            }], requiredSuffix: [{
+                type: Input
+            }], _modalRef: [{
+                type: Input
+            }] } });
+
 const NAMESPACE$1 = 'SurveyBuilder';
 const EDITOR_NAMESPACE = 'FieldSchemaEditor';
 const DEFAULT_TYPE_PREFIX = 'survey';
@@ -40846,6 +41144,7 @@ class SurveyBuilderComponent {
         this.requests = inject(RequestService);
         this.formBuilder = inject(RequestFormBuilderService);
         this.errors = inject(ValtechErrorService);
+        this.modals = inject(ModalService);
         this.titleControl = new FormControl('', { nonNullable: true });
         this.subtitleControl = new FormControl('', { nonNullable: true });
         this.headerImageControl = new FormControl('', { nonNullable: true });
@@ -40877,7 +41176,7 @@ class SurveyBuilderComponent {
         }
         this.successTitleControl.setValue(this.defaultSuccessTitle());
         this.successMessageControl.setValue(this.defaultSuccessMessage());
-        addIcons({ cloudUploadOutline, trashOutline });
+        addIcons({ cloudUploadOutline, eyeOutline, trashOutline });
     }
     async ngOnInit() {
         // Sembrado directo: la app ya tenía la encuesta, no hace falta leerla.
@@ -41126,6 +41425,9 @@ class SurveyBuilderComponent {
                 label: row.label.trim(),
                 type: row.type,
                 required: row.required,
+                sectionId: row.sectionLabel ? this.formBuilder.toToken(row.sectionLabel) : undefined,
+                sectionLabel: row.sectionLabel,
+                sectionOrder: this.sectionOrderFor(row.sectionLabel, rows),
                 placeholderText: row.placeholderText,
                 hintText: row.hintText,
                 options: row.options,
@@ -41235,9 +41537,60 @@ class SurveyBuilderComponent {
             hintText: f.hintText ?? '',
             type: f.type,
             required: !!f.required,
+            sectionLabel: f.sectionLabel ?? '',
+            sectionOrder: f.sectionOrder,
             options: f.options,
         };
     }
+    reviewQuestionsCount() {
+        const count = this.questions().length;
+        const key = count === 1 ? 'reviewQuestionCount' : 'reviewQuestionsCount';
+        return this.interpolate(this.t(key), { count });
+    }
+    previewProps() {
+        return {
+            token: 'survey-builder-preview',
+            text: this.t('preview'),
+            color: 'dark',
+            fill: 'outline',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+            icon: { name: 'eye-outline', slot: 'start' },
+        };
+    }
+    async openPreview() {
+        await this.modals.open({
+            component: SurveyPreviewModalComponent,
+            componentProps: {
+                modalTitle: this.t('previewTitle'),
+                closeLabel: this.t('closePreview'),
+                title: this.titleControl.value.trim() || this.t('untitledQuestion'),
+                subtitle: this.subtitleControl.value.trim(),
+                presentation: this.presentationPayload(),
+                successTitle: this.successTitleControl.value.trim() || this.defaultSuccessTitle(),
+                successMessage: this.successMessageControl.value.trim() || this.defaultSuccessMessage(),
+                requiredSuffix: ` · ${this.t('requiredTag')}`,
+                questions: this.questions().map((question, index) => ({
+                    ...question,
+                    order: index,
+                    name: question.name || this.formBuilder.toToken(question.label),
+                    typeLabel: this.typeLabel(question.type),
+                    sectionId: question.sectionLabel ? this.formBuilder.toToken(question.sectionLabel) : undefined,
+                    sectionOrder: this.sectionOrderFor(question.sectionLabel, this.questions()),
+                })),
+            },
+            size: 'medium',
+        });
+    }
+    sectionOrderFor(sectionLabel, rows) {
+        const label = sectionLabel?.trim();
+        if (!label)
+            return undefined;
+        const labels = [...new Set(rows.map(row => row.sectionLabel?.trim()).filter(Boolean))];
+        return labels.indexOf(label);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyBuilderComponent, isStandalone: true, selector: "val-survey-builder", inputs: { props: "props" }, outputs: { saved: "saved", draft: "draft" }, ngImport: i0, template: `
     <div class="survey-builder">
@@ -41454,7 +41807,9 @@ class SurveyBuilderComponent {
             <div class="survey-builder__row-head">
               <div class="survey-builder__row-text">
                 <strong>{{ row.label || t('untitledQuestion') }}</strong>
-                <span>{{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}</span>
+                <span>
+                  {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
+                </span>
               </div>
               <div class="survey-builder__row-actions">
                 <val-button
@@ -41528,11 +41883,12 @@ class SurveyBuilderComponent {
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
           <span>{{ subtitleControl.value || t('reviewNoSubtitle') }}</span>
-          <span>{{ interpolate(t('reviewQuestionsCount'), { count: questions().length }) }}</span>
+          <span>{{ reviewQuestionsCount() }}</span>
           @if (headerImageControl.value) {
             <span>{{ t('reviewHeaderImage') }}</span>
           }
           <span>{{ successImageControl.value ? t('reviewSuccessImage') : t('reviewDefaultClose') }}</span>
+          <val-button [props]="previewProps()" (onClick)="openPreview()" />
         </section>
       }
 
@@ -41783,7 +42139,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             <div class="survey-builder__row-head">
               <div class="survey-builder__row-text">
                 <strong>{{ row.label || t('untitledQuestion') }}</strong>
-                <span>{{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}</span>
+                <span>
+                  {{ typeLabel(row.type) }}{{ row.required ? ' · ' + t('requiredTag') : '' }}{{ row.sectionLabel ? ' · ' + row.sectionLabel : '' }}
+                </span>
               </div>
               <div class="survey-builder__row-actions">
                 <val-button
@@ -41857,11 +42215,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
           <span>{{ subtitleControl.value || t('reviewNoSubtitle') }}</span>
-          <span>{{ interpolate(t('reviewQuestionsCount'), { count: questions().length }) }}</span>
+          <span>{{ reviewQuestionsCount() }}</span>
           @if (headerImageControl.value) {
             <span>{{ t('reviewHeaderImage') }}</span>
           }
           <span>{{ successImageControl.value ? t('reviewSuccessImage') : t('reviewDefaultClose') }}</span>
+          <val-button [props]="previewProps()" (onClick)="openPreview()" />
         </section>
       }