valtech-components 4.0.1014 → 4.0.1016

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.1014';
+const VERSION = '4.0.1016';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -40368,7 +40368,7 @@ class SurveyResponseComponent {
         }
       }
     }
-  `, 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{display:block}\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"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }] }); }
+  `, 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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72)}.survey-response__loading{display:block}\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"] }, { kind: "component", type: SkeletonLayoutComponent, selector: "val-skeleton-layout", inputs: ["props"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, decorators: [{
             type: Component,
@@ -40473,7 +40473,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__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{display:block}\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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72)}.survey-response__loading{display:block}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], submitted: [{
@@ -40819,9 +40819,11 @@ 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>
+      @if (props.showSection !== false) {
+        <val-form-field [label]="t('sectionLabel')">
+          <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
+        </val-form-field>
+      }
 
       <val-toggle-input
         [props]="{
@@ -40895,9 +40897,11 @@ 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>
+      @if (props.showSection !== false) {
+        <val-form-field [label]="t('sectionLabel')">
+          <val-text-input [props]="{ control: sectionControl, placeholder: t('sectionPlaceholder'), state: state() }" />
+        </val-form-field>
+      }
 
       <val-toggle-input
         [props]="{
@@ -41383,6 +41387,7 @@ const SURVEY_BUILDER_I18N = {
         questionLabelPlaceholder: 'Escribe la pregunta',
         addQuestion: 'Agregar pregunta',
         addQuestionToSection: 'Agregar aquí',
+        addSection: 'Agregar sección',
         removeQuestion: 'Quitar pregunta',
         editQuestion: 'Editar pregunta',
         duplicateQuestion: 'Duplicar pregunta',
@@ -41395,13 +41400,18 @@ const SURVEY_BUILDER_I18N = {
         save: 'Guardar encuesta',
         noTitle: 'Ponle un título a la encuesta',
         noQuestions: 'Agrega al menos una pregunta',
+        noQuestionsInSection: 'Agrega al menos una pregunta a esta sección',
+        noSectionName: 'Ponle nombre a la sección',
         emptyQuestionLabel: 'Todas las preguntas necesitan texto',
         saveError: 'No pudimos guardar la encuesta. Inténtalo de nuevo en un rato.',
         loadError: 'No pudimos cargar la encuesta para editar.',
         stepStart: 'Inicio',
         stepQuestions: 'Preguntas',
+        sectionNameLabel: 'Nombre de la sección',
+        sectionNamePlaceholder: 'Ej: Información personal',
         sectionSubtitleLabel: 'Subtítulo',
         sectionSubtitlePlaceholder: 'Escribe un subtítulo para esta sección',
+        sectionTabsLabel: 'Secciones de la encuesta',
         stepClose: 'Cierre',
         stepReview: 'Revisar',
         wizardStepsLabel: 'Pasos para crear la encuesta',
@@ -41449,6 +41459,7 @@ const SURVEY_BUILDER_I18N = {
         questionLabelPlaceholder: 'Write the question',
         addQuestion: 'Add question',
         addQuestionToSection: 'Add here',
+        addSection: 'Add section',
         removeQuestion: 'Remove question',
         editQuestion: 'Edit question',
         duplicateQuestion: 'Duplicate question',
@@ -41461,13 +41472,18 @@ const SURVEY_BUILDER_I18N = {
         save: 'Save survey',
         noTitle: 'Give the survey a title',
         noQuestions: 'Add at least one question',
+        noQuestionsInSection: 'Add at least one question to this section',
+        noSectionName: 'Give the section a name',
         emptyQuestionLabel: 'Every question needs text',
         saveError: "We couldn't save the survey. Please try again in a while.",
         loadError: "We couldn't load the survey to edit.",
         stepStart: 'Start',
         stepQuestions: 'Questions',
+        sectionNameLabel: 'Section name',
+        sectionNamePlaceholder: 'E.g: Personal information',
         sectionSubtitleLabel: 'Subtitle',
         sectionSubtitlePlaceholder: 'Add a subtitle for this section',
+        sectionTabsLabel: 'Survey sections',
         stepClose: 'Close',
         stepReview: 'Review',
         wizardStepsLabel: 'Survey builder steps',
@@ -41550,7 +41566,7 @@ class SurveyPreviewModalComponent {
         </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"] }] }); }
+  `, 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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);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,
@@ -41586,7 +41602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </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"] }]
+  `, 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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.875rem}\n"] }]
         }], propDecorators: { modalTitle: [{
                 type: Input
             }], closeLabel: [{
@@ -41632,23 +41648,29 @@ let rowUid = 0;
  */
 class SurveyBuilderComponent {
     groupQuestions(rows) {
-        const groups = [];
+        const groups = this.sectionIds().map(id => ({
+            id,
+            label: this.sectionNames()[id] ?? '',
+            subtitle: this.sectionSubtitles()[id] ?? '',
+            rows: [],
+        }));
         const index = new Map();
+        groups.forEach((group, position) => index.set(group.id, position));
         rows.forEach(question => {
             const section = (question.sectionLabel ?? '').trim();
             const sectionKey = question.sectionId || (section ? this.formBuilder.toToken(section) : '__default__');
-            const label = section;
+            const label = this.sectionNames()[sectionKey] ?? section;
             let position = index.get(sectionKey);
             if (position == null) {
                 position = groups.length;
                 index.set(sectionKey, position);
-                groups.push({ id: sectionKey, label, rows: [] });
+                groups.push({ id: sectionKey, label, subtitle: this.sectionSubtitles()[sectionKey] ?? '', rows: [] });
             }
             groups[position].rows.push(question);
         });
         if (!groups.length) {
             const defaultId = '__default__';
-            groups.push({ id: defaultId, label: '', rows: [] });
+            groups.push({ id: defaultId, label: this.sectionNames()[defaultId] ?? '', subtitle: this.sectionSubtitles()[defaultId] ?? '', rows: [] });
         }
         return groups;
     }
@@ -41658,6 +41680,21 @@ class SurveyBuilderComponent {
     questionGroupById(sectionId) {
         return this.questionGroups().find(group => group.id === sectionId);
     }
+    sectionNameControl(sectionId) {
+        const normalized = this.normalizeSectionId(sectionId);
+        if (!this.sectionNameControls[normalized]) {
+            const control = new FormControl(this.sectionNames()[normalized] ?? '', { nonNullable: true });
+            control.valueChanges.subscribe(value => {
+                const label = (value ?? '').trim();
+                this.sectionNames.update(values => ({ ...values, [normalized]: value }));
+                this.questions.update(rows => rows.map(row => this.normalizeSectionId(row.sectionId) === normalized
+                    ? { ...row, sectionId: normalized, sectionLabel: label || undefined }
+                    : row));
+            });
+            this.sectionNameControls[normalized] = control;
+        }
+        return this.sectionNameControls[normalized];
+    }
     sectionSubtitleControl(sectionId) {
         const normalized = this.normalizeSectionId(sectionId);
         if (!this.sectionSubtitleControls[normalized]) {
@@ -41697,19 +41734,20 @@ class SurveyBuilderComponent {
         this.validationError = signal('');
         this.saving = signal(false);
         this.uploadingImage = signal('');
+        this.sectionIds = signal(['__default__']);
+        this.sectionNames = signal({});
         this.sectionSubtitles = signal({});
+        this.activeSectionId = signal('__default__');
+        this.sectionNameControls = {};
         this.sectionSubtitleControls = {};
         this.questionGroups = computed(() => this.groupQuestions(this.questions()));
         this.wizardSteps = computed(() => {
-            const groups = this.questionGroups();
-            const steps = [{ id: 'start', label: this.t('stepStart') }];
-            groups.forEach((group, index) => {
-                const sectionLabel = group.label || `${this.t('sectionQuestionsLabel')} ${index + 1}`;
-                steps.push({ id: `section-${group.id}`, label: `${index + 1}. ${sectionLabel}` });
-            });
-            steps.push({ id: 'close', label: this.t('stepClose') });
-            steps.push({ id: 'review', label: this.t('stepReview') });
-            return steps;
+            return [
+                { id: 'start', label: this.t('stepStart') },
+                { id: 'questions', label: this.t('stepQuestions') },
+                { id: 'close', label: this.t('stepClose') },
+                { id: 'review', label: this.t('stepReview') },
+            ];
         });
         this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
         this.maxImageBytes = 10 * 1024 * 1024;
@@ -41825,22 +41863,24 @@ class SurveyBuilderComponent {
         };
     }
     closeStep() {
-        return Math.max(this.wizardSteps().length - 2, 0);
+        return 2;
     }
     reviewStep() {
-        return Math.max(this.wizardSteps().length - 1, 0);
+        return 3;
     }
-    sectionStepIndex(sectionIndex) {
-        return sectionIndex + 1;
+    currentSectionId() {
+        if (!this.isWizard())
+            return this.questionGroups()[0]?.id;
+        return this.activeSectionId();
     }
-    showCurrentSectionQuestionStep() {
-        return this.isWizard() && this.wizardStep() >= 1 && this.wizardStep() < this.reviewStep();
+    selectSection(sectionId) {
+        this.activeSectionId.set(this.normalizeSectionId(sectionId));
     }
     interpolate(template, values) {
         return Object.entries(values).reduce((text, [key, value]) => text.replaceAll(`{${key}}`, String(value)), template);
     }
     editorProps(row) {
-        return { mode: 'edit', field: row, allowedTypes: this.questionTypes() };
+        return { mode: 'edit', field: row, allowedTypes: this.questionTypes(), showSection: false };
     }
     iconAction(token, icon, label, disabled = false, color = 'dark') {
         return {
@@ -41866,6 +41906,7 @@ class SurveyBuilderComponent {
     addQuestion(sectionId) {
         const normalizedSectionId = this.normalizeSectionId(sectionId);
         const targetGroup = this.questionGroupById(normalizedSectionId);
+        const sectionLabel = this.sectionNameControl(normalizedSectionId).value.trim() || targetGroup?.label || '';
         const row = {
             id: `row-${rowUid++}`,
             name: '',
@@ -41875,7 +41916,7 @@ class SurveyBuilderComponent {
             type: this.questionTypes()[0],
             required: true,
             sectionId: normalizedSectionId,
-            sectionLabel: targetGroup?.label || undefined,
+            sectionLabel: sectionLabel || undefined,
         };
         this.questions.update(rows => {
             const next = [...rows];
@@ -41887,6 +41928,18 @@ class SurveyBuilderComponent {
         // siguiente posible, y dejarla cerrada la haría ver como una fila rota.
         this.editingId.set(row.id);
     }
+    addSection() {
+        const id = `section-${rowUid++}`;
+        this.sectionIds.update(ids => [...ids, id]);
+        this.sectionNames.update(values => ({ ...values, [id]: '' }));
+        this.sectionSubtitles.update(values => ({ ...values, [id]: '' }));
+        this.sectionNameControl(id);
+        this.sectionSubtitleControl(id);
+        this.validationError.set('');
+        this.activeSectionId.set(id);
+        if (this.isWizard())
+            this.wizardStep.set(1);
+    }
     rowGlobalIndex(sectionId, groupRowIndex) {
         const normalized = this.normalizeSectionId(sectionId);
         let index = 0;
@@ -41972,10 +42025,10 @@ class SurveyBuilderComponent {
     withResolvedSection(field) {
         const label = (field.sectionLabel ?? '').trim();
         const id = this.normalizeSectionId(field.sectionId);
-        if (id !== '__default__' || !label) {
-            return { ...field, sectionId: id, sectionLabel: label || undefined };
+        if (!this.isWizard() && id === '__default__' && label) {
+            return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
         }
-        return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
+        return { ...field, sectionId: id, sectionLabel: label || undefined };
     }
     async onPresentationFileSelected(slot, event) {
         const input = event.target;
@@ -42024,7 +42077,7 @@ class SurveyBuilderComponent {
         if (this.saving())
             return;
         this.validationError.set('');
-        if (!this.validateWizardStep(0) || !this.validateWizardStep(1))
+        if (!this.validateBeforeSave())
             return;
         const title = this.titleControl.value.trim();
         const rows = this.questions();
@@ -42037,8 +42090,8 @@ class SurveyBuilderComponent {
                 type: row.type,
                 required: row.required,
                 sectionId: row.sectionId,
-                sectionLabel: row.sectionLabel,
-                sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(row.sectionId)] ?? '',
+                sectionLabel: this.sectionNameControl(row.sectionId).value.trim() || row.sectionLabel,
+                sectionSubtitle: this.sectionSubtitleControl(row.sectionId).value.trim() || row.sectionSubtitle,
                 sectionOrder: this.sectionOrderFor(row.sectionId, rows),
                 placeholderText: row.placeholderText,
                 hintText: row.hintText,
@@ -42103,14 +42156,21 @@ class SurveyBuilderComponent {
         this.successMessageControl.setValue(presentation?.successMessage || this.defaultSuccessMessage());
         this.successImageControl.setValue(presentation?.successImageUrl ?? '');
         const rows = [...(questions ?? [])].sort((a, b) => a.order - b.order).map(f => this.rowFromField(f));
+        const ids = [...new Set(rows.map(row => this.normalizeSectionId(row.sectionId)))];
+        this.sectionIds.set(ids.length ? ids : ['__default__']);
+        const names = {};
         const subtitles = {};
         rows.forEach(row => {
             const id = this.normalizeSectionId(row.sectionId);
+            if (row.sectionLabel && names[id] === undefined)
+                names[id] = row.sectionLabel;
             if (row.sectionSubtitle && subtitles[id] === undefined)
                 subtitles[id] = row.sectionSubtitle;
         });
+        this.sectionNames.set(names);
         this.sectionSubtitles.set(subtitles);
         this.questions.set(rows);
+        this.activeSectionId.set(this.sectionIds()[0] ?? '__default__');
     }
     presentationPayload() {
         const presentation = {
@@ -42144,25 +42204,61 @@ class SurveyBuilderComponent {
             }
             return true;
         }
-        if (step === 1) {
-            const rows = this.questions();
-            if (!rows.length) {
+        if (this.isWizard() && step === 1) {
+            if (!this.questions().length) {
                 this.validationError.set(this.t('noQuestions'));
                 return false;
             }
-            if (rows.some(r => !r.label.trim())) {
-                this.validationError.set(this.t('emptyQuestionLabel'));
+            if (!this.validateRows(this.questions()))
+                return false;
+            const emptySection = this.questionGroups().find(group => group.id !== '__default__' && !group.rows.length);
+            if (emptySection) {
+                this.activeSectionId.set(emptySection.id);
+                this.validationError.set(this.t('noQuestionsInSection'));
                 return false;
             }
-            // El editor ya lo valida al cerrar cada pregunta, pero una pregunta abierta
-            // (o cargada de una encuesta vieja) puede llegar acá sin opciones.
-            if (rows.some(r => FIELD_TYPES_WITH_OPTIONS.includes(r.type) && !r.options?.length)) {
-                this.validationError.set(this.t('missingOptions'));
+            return true;
+        }
+        if (!this.isWizard() && step === 1) {
+            return this.validateRows(this.questions());
+        }
+        return true;
+    }
+    validateBeforeSave() {
+        if (!this.validateWizardStep(0))
+            return false;
+        if (!this.questions().length) {
+            this.validationError.set(this.t('noQuestions'));
+            return false;
+        }
+        if (!this.validateRows(this.questions()))
+            return false;
+        if (this.isWizard()) {
+            const emptySection = this.questionGroups().find(group => group.id !== '__default__' && !group.rows.length);
+            if (emptySection) {
+                this.validationError.set(this.t('noQuestionsInSection'));
                 return false;
             }
         }
         return true;
     }
+    validateRows(rows) {
+        if (!rows.length) {
+            this.validationError.set(this.t('noQuestions'));
+            return false;
+        }
+        if (rows.some(r => !r.label.trim())) {
+            this.validationError.set(this.t('emptyQuestionLabel'));
+            return false;
+        }
+        // El editor ya lo valida al cerrar cada pregunta, pero una pregunta abierta
+        // (o cargada de una encuesta vieja) puede llegar acá sin opciones.
+        if (rows.some(r => FIELD_TYPES_WITH_OPTIONS.includes(r.type) && !r.options?.length)) {
+            this.validationError.set(this.t('missingOptions'));
+            return false;
+        }
+        return true;
+    }
     rowFromField(f) {
         return {
             id: `row-${rowUid++}`,
@@ -42215,7 +42311,8 @@ class SurveyBuilderComponent {
                     name: question.name || this.formBuilder.toToken(question.label),
                     typeLabel: this.typeLabel(question.type),
                     sectionId: this.normalizeSectionId(question.sectionId),
-                    sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(question.sectionId)] ?? '',
+                    sectionLabel: this.sectionNameControl(question.sectionId).value.trim() || question.sectionLabel,
+                    sectionSubtitle: this.sectionSubtitleControl(question.sectionId).value.trim() || question.sectionSubtitle,
                     sectionOrder: this.sectionOrderFor(question.sectionId, this.questions()),
                 })),
             },
@@ -42386,7 +42483,7 @@ class SurveyBuilderComponent {
         </div>
       }
 
-      @if (showWizardSection(closeStep())) {
+      @if (showWizardSection(2)) {
         <section class="survey-builder__section">
           <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
           <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42433,7 +42530,7 @@ class SurveyBuilderComponent {
         </section>
       }
 
-      @if (showCurrentSectionQuestionStep()) {
+      @if (showWizardSection(1)) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -42441,12 +42538,35 @@ class SurveyBuilderComponent {
           <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
         }
 
+        @if (questionGroups().length > 1) {
+          <div class="survey-builder__section-tabs" [attr.aria-label]="t('sectionTabsLabel')">
+            @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
+              <button
+                type="button"
+                class="survey-builder__section-tab"
+                [class.survey-builder__section-tab--active]="activeSectionId() === group.id"
+                [attr.aria-current]="activeSectionId() === group.id ? 'true' : null"
+                (click)="selectSection(group.id)"
+              >
+                {{ group.label || t('sectionQuestionsLabel') + ' ' + (sectionIndex + 1) }}
+              </button>
+            }
+          </div>
+        }
+
         @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
-          @if (wizardStep() === sectionStepIndex(sectionIndex)) {
+          @if (activeSectionId() === group.id) {
           <section class="survey-builder__question-section">
             <div class="survey-builder__section-head">
-              <div>
-                <strong>{{ group.label || t('sectionQuestionsLabel') }}</strong>
+              <div class="survey-builder__section-fields">
+                <val-form-field [label]="t('sectionNameLabel')">
+                  <val-text-input
+                    [props]="{
+                      control: sectionNameControl(group.id),
+                      placeholder: t('sectionNamePlaceholder'),
+                    }"
+                  />
+                </val-form-field>
                 <div class="survey-builder__section-subtitle">
                   <val-form-field [label]="t('sectionSubtitleLabel')">
                     <val-text-input
@@ -42483,8 +42603,7 @@ class SurveyBuilderComponent {
                     <span>
                       {{
                         typeLabel(row.type) +
-                        (row.required ? ' · ' + t('requiredTag') : '') +
-                        (row.sectionLabel ? ' · ' + row.sectionLabel : '')
+                        (row.required ? ' · ' + t('requiredTag') : '')
                       }}
                     </span>
                   </div>
@@ -42559,12 +42678,28 @@ class SurveyBuilderComponent {
             state: 'ENABLED',
             icon: { name: 'add-outline', slot: 'start' },
           }"
-          (onClick)="addQuestion(questionGroups()[0]?.id)"
+          (onClick)="addQuestion(currentSectionId())"
         />
+        @if (isWizard()) {
+          <val-button
+            [props]="{
+              token: 'survey-builder-add-section',
+              text: t('addSection'),
+              color: 'dark',
+              fill: 'outline',
+              shape: 'round',
+              size: 'default',
+              type: 'button',
+              state: 'ENABLED',
+              icon: { name: 'add-outline', slot: 'start' },
+            }"
+            (onClick)="addSection()"
+          />
+        }
       </div>
       }
 
-      @if (showWizardSection(reviewStep())) {
+      @if (showWizardSection(3)) {
         <section class="survey-builder__review">
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42597,7 +42732,7 @@ class SurveyBuilderComponent {
         <val-button [props]="saveProps()" (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__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{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__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.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__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.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__row-editor-actions{display:flex;justify-content:flex-end}.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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__section-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.survey-builder__section-tab{flex:0 0 auto;min-height:36px;padding:7px 12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__section-tab--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{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__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-text-color, #000)}.survey-builder__empty{margin:0;font-size:.875rem;color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72)}.survey-builder__optional-note{margin:0;color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.875rem;line-height:1.35}.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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.68);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__row-editor-actions{display:flex;justify-content:flex-end}.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: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { 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,
@@ -42768,7 +42903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </div>
       }
 
-      @if (showWizardSection(closeStep())) {
+      @if (showWizardSection(2)) {
         <section class="survey-builder__section">
           <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
           <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42815,7 +42950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </section>
       }
 
-      @if (showCurrentSectionQuestionStep()) {
+      @if (showWizardSection(1)) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -42823,12 +42958,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
         }
 
+        @if (questionGroups().length > 1) {
+          <div class="survey-builder__section-tabs" [attr.aria-label]="t('sectionTabsLabel')">
+            @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
+              <button
+                type="button"
+                class="survey-builder__section-tab"
+                [class.survey-builder__section-tab--active]="activeSectionId() === group.id"
+                [attr.aria-current]="activeSectionId() === group.id ? 'true' : null"
+                (click)="selectSection(group.id)"
+              >
+                {{ group.label || t('sectionQuestionsLabel') + ' ' + (sectionIndex + 1) }}
+              </button>
+            }
+          </div>
+        }
+
         @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
-          @if (wizardStep() === sectionStepIndex(sectionIndex)) {
+          @if (activeSectionId() === group.id) {
           <section class="survey-builder__question-section">
             <div class="survey-builder__section-head">
-              <div>
-                <strong>{{ group.label || t('sectionQuestionsLabel') }}</strong>
+              <div class="survey-builder__section-fields">
+                <val-form-field [label]="t('sectionNameLabel')">
+                  <val-text-input
+                    [props]="{
+                      control: sectionNameControl(group.id),
+                      placeholder: t('sectionNamePlaceholder'),
+                    }"
+                  />
+                </val-form-field>
                 <div class="survey-builder__section-subtitle">
                   <val-form-field [label]="t('sectionSubtitleLabel')">
                     <val-text-input
@@ -42865,8 +43023,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                     <span>
                       {{
                         typeLabel(row.type) +
-                        (row.required ? ' · ' + t('requiredTag') : '') +
-                        (row.sectionLabel ? ' · ' + row.sectionLabel : '')
+                        (row.required ? ' · ' + t('requiredTag') : '')
                       }}
                     </span>
                   </div>
@@ -42941,12 +43098,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             state: 'ENABLED',
             icon: { name: 'add-outline', slot: 'start' },
           }"
-          (onClick)="addQuestion(questionGroups()[0]?.id)"
+          (onClick)="addQuestion(currentSectionId())"
         />
+        @if (isWizard()) {
+          <val-button
+            [props]="{
+              token: 'survey-builder-add-section',
+              text: t('addSection'),
+              color: 'dark',
+              fill: 'outline',
+              shape: 'round',
+              size: 'default',
+              type: 'button',
+              state: 'ENABLED',
+              icon: { name: 'add-outline', slot: 'start' },
+            }"
+            (onClick)="addSection()"
+          />
+        }
       </div>
       }
 
-      @if (showWizardSection(reviewStep())) {
+      @if (showWizardSection(3)) {
         <section class="survey-builder__review">
           <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
           <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42979,7 +43152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <val-button [props]="saveProps()" (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__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{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__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.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__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.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__row-editor-actions{display:flex;justify-content:flex-end}.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__question-section{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-sm, 10px)}.survey-builder__section-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.survey-builder__section-head strong{color:var(--ion-text-color, #000);font-size:.875rem}.survey-builder__section-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}.survey-builder__section-tab{flex:0 0 auto;min-height:36px;padding:7px 12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:999px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__section-tab--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{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__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-text-color, #000)}.survey-builder__empty{margin:0;font-size:.875rem;color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72)}.survey-builder__optional-note{margin:0;color:rgba(var(--ion-text-color-rgb, 0, 0, 0),.72);font-size:.875rem;line-height:1.35}.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:rgba(var(--ion-text-color-rgb, 0, 0, 0),.68);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__row-editor-actions{display:flex;justify-content:flex-end}.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: [{