valtech-components 4.0.1002 → 4.0.1003

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.1002';
+const VERSION = '4.0.1003';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -40738,6 +40738,18 @@ const SURVEY_BUILDER_I18N = {
         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',
+        stepClose: 'Cierre',
+        stepReview: 'Revisar',
+        next: 'Siguiente',
+        previous: 'Volver',
+        reviewTitle: 'Resumen',
+        reviewNoSubtitle: 'Sin subtítulo',
+        reviewQuestionsCount: '{count} preguntas',
+        reviewHeaderImage: 'Imagen inicial configurada',
+        reviewSuccessImage: 'Imagen de cierre configurada',
+        reviewDefaultClose: 'Cierre por defecto',
     },
     en: {
         titleLabel: 'Title',
@@ -40777,6 +40789,18 @@ const SURVEY_BUILDER_I18N = {
         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',
+        stepClose: 'Close',
+        stepReview: 'Review',
+        next: 'Next',
+        previous: 'Back',
+        reviewTitle: 'Summary',
+        reviewNoSubtitle: 'No subtitle',
+        reviewQuestionsCount: '{count} questions',
+        reviewHeaderImage: 'Opening image set',
+        reviewSuccessImage: 'Closing image set',
+        reviewDefaultClose: 'Default closing screen',
     },
 };
 
@@ -40824,9 +40848,16 @@ class SurveyBuilderComponent {
         this.successImageControl = new FormControl('', { nonNullable: true });
         this.questions = signal([]);
         this.editingId = signal('');
+        this.wizardStep = signal(0);
         this.validationError = signal('');
         this.saving = signal(false);
         this.uploadingImage = signal('');
+        this.wizardSteps = [
+            { id: 'start', labelKey: 'stepStart' },
+            { id: 'questions', labelKey: 'stepQuestions' },
+            { id: 'close', labelKey: 'stepClose' },
+            { id: 'review', labelKey: 'stepReview' },
+        ];
         this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
         this.maxImageBytes = 10 * 1024 * 1024;
         if (!this.i18n.hasNamespace(NAMESPACE$1)) {
@@ -40871,6 +40902,75 @@ class SurveyBuilderComponent {
     questionTypes() {
         return this.props.questionTypes?.length ? this.props.questionTypes : SURVEY_QUESTION_TYPES;
     }
+    isWizard() {
+        return this.props.layout === 'wizard';
+    }
+    showWizardSection(step) {
+        return this.isWizard() && this.wizardStep() === step;
+    }
+    goToStep(step) {
+        if (!this.isWizard())
+            return;
+        if (step <= this.wizardStep()) {
+            this.validationError.set('');
+            this.wizardStep.set(step);
+            return;
+        }
+        while (this.wizardStep() < step) {
+            if (!this.validateWizardStep(this.wizardStep()))
+                return;
+            this.wizardStep.update(current => current + 1);
+        }
+    }
+    nextStep() {
+        if (!this.validateWizardStep(this.wizardStep()))
+            return;
+        this.wizardStep.update(step => Math.min(step + 1, this.wizardSteps.length - 1));
+    }
+    previousStep() {
+        this.validationError.set('');
+        this.wizardStep.update(step => Math.max(step - 1, 0));
+    }
+    wizardBackProps() {
+        return {
+            token: 'survey-builder-wizard-back',
+            text: this.t('previous'),
+            color: 'dark',
+            fill: 'outline',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+        };
+    }
+    wizardNextProps() {
+        return {
+            token: 'survey-builder-wizard-next',
+            text: this.t('next'),
+            color: 'dark',
+            fill: 'solid',
+            shape: 'round',
+            size: 'default',
+            type: 'button',
+            state: ComponentStates.ENABLED,
+        };
+    }
+    saveProps() {
+        return {
+            token: 'survey-builder-save',
+            text: this.t('save'),
+            color: 'dark',
+            fill: 'solid',
+            shape: 'round',
+            size: 'large',
+            expand: this.isWizard() ? undefined : 'block',
+            type: 'button',
+            state: this.saving() ? ComponentStates.WORKING : ComponentStates.ENABLED,
+        };
+    }
+    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() };
     }
@@ -41006,27 +41106,10 @@ class SurveyBuilderComponent {
         if (this.saving())
             return;
         this.validationError.set('');
-        const title = this.titleControl.value.trim();
-        if (!title) {
-            this.titleControl.markAsTouched();
-            this.validationError.set(this.t('noTitle'));
+        if (!this.validateWizardStep(0) || !this.validateWizardStep(1))
             return;
-        }
+        const title = this.titleControl.value.trim();
         const rows = this.questions();
-        if (!rows.length) {
-            this.validationError.set(this.t('noQuestions'));
-            return;
-        }
-        if (rows.some(r => !r.label.trim())) {
-            this.validationError.set(this.t('emptyQuestionLabel'));
-            return;
-        }
-        // 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;
-        }
         const fieldSchema = [];
         rows.forEach((row, index) => {
             const name = this.formBuilder.uniqueFieldName(row.name || row.label, fieldSchema);
@@ -41100,6 +41183,35 @@ class SurveyBuilderComponent {
         };
         return Object.values(presentation).some(Boolean) ? presentation : undefined;
     }
+    validateWizardStep(step) {
+        this.validationError.set('');
+        if (step === 0) {
+            if (!this.titleControl.value.trim()) {
+                this.titleControl.markAsTouched();
+                this.validationError.set(this.t('noTitle'));
+                return false;
+            }
+            return true;
+        }
+        if (step === 1) {
+            const rows = this.questions();
+            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++}`,
@@ -41115,15 +41227,81 @@ class SurveyBuilderComponent {
     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">
-      <val-form-field [label]="t('titleLabel')">
-        <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
-      </val-form-field>
-      <val-form-field [label]="t('subtitleLabel')">
-        <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
-      </val-form-field>
+      @if (isWizard()) {
+        <nav class="survey-builder__steps" aria-label="Survey builder steps">
+          @for (step of wizardSteps; track step.id; let i = $index) {
+            <button
+              type="button"
+              class="survey-builder__step"
+              [class.survey-builder__step--active]="wizardStep() === i"
+              [attr.aria-current]="wizardStep() === i ? 'step' : null"
+              (click)="goToStep(i)"
+            >
+              <span>{{ i + 1 }}</span>
+              {{ t(step.labelKey) }}
+            </button>
+          }
+        </nav>
+      }
+
+      @if (!isWizard()) {
+        <val-form-field [label]="t('titleLabel')">
+          <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('subtitleLabel')">
+          <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
+        </val-form-field>
+      }
 
-      <div class="survey-builder__presentation">
-        <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+      @if (showWizardSection(0)) {
+        <section class="survey-builder__section">
+          <val-form-field [label]="t('titleLabel')">
+            <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
+          </val-form-field>
+          <val-form-field [label]="t('subtitleLabel')">
+            <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
+          </val-form-field>
+          <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+          <div class="survey-builder__image-field">
+            <val-form-field [label]="t('headerImageLabel')">
+              <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
+            </val-form-field>
+            @if (headerImageControl.value) {
+              <div class="survey-builder__image-preview">
+                <img [src]="headerImageControl.value" alt="" />
+                <button
+                  type="button"
+                  class="survey-builder__image-clear"
+                  [attr.aria-label]="t('imageRemove')"
+                  (click)="clearPresentationImage('header')"
+                >
+                  <ion-icon name="trash-outline" aria-hidden="true" />
+                </button>
+              </div>
+            }
+            @if (props.presentationImageUpload) {
+              <label class="survey-builder__image-upload" [class.survey-builder__image-upload--loading]="uploadingImage() === 'header'">
+                @if (uploadingImage() === 'header') {
+                  <ion-spinner name="crescent" />
+                } @else {
+                  <ion-icon name="cloud-upload-outline" aria-hidden="true" />
+                }
+                <span>{{ headerImageControl.value ? t('imageChange') : t('imageUpload') }}</span>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
+                  [disabled]="uploadingImage() === 'header'"
+                  (change)="onPresentationFileSelected('header', $event)"
+                />
+              </label>
+            }
+          </div>
+        </section>
+      }
+
+      @if (!isWizard()) {
+        <div class="survey-builder__presentation">
+          <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
         <div class="survey-builder__image-field">
           <val-form-field [label]="t('headerImageLabel')">
             <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
@@ -41198,8 +41376,56 @@ class SurveyBuilderComponent {
             </label>
           }
         </div>
-      </div>
+        </div>
+      }
 
+      @if (showWizardSection(2)) {
+        <section class="survey-builder__section">
+          <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
+          <val-form-field [label]="t('successTitleLabel')">
+            <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
+          </val-form-field>
+          <val-form-field [label]="t('successMessageLabel')">
+            <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
+          </val-form-field>
+          <div class="survey-builder__image-field">
+            <val-form-field [label]="t('successImageLabel')">
+              <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
+            </val-form-field>
+            @if (successImageControl.value) {
+              <div class="survey-builder__image-preview">
+                <img [src]="successImageControl.value" alt="" />
+                <button
+                  type="button"
+                  class="survey-builder__image-clear"
+                  [attr.aria-label]="t('imageRemove')"
+                  (click)="clearPresentationImage('success')"
+                >
+                  <ion-icon name="trash-outline" aria-hidden="true" />
+                </button>
+              </div>
+            }
+            @if (props.presentationImageUpload) {
+              <label class="survey-builder__image-upload" [class.survey-builder__image-upload--loading]="uploadingImage() === 'success'">
+                @if (uploadingImage() === 'success') {
+                  <ion-spinner name="crescent" />
+                } @else {
+                  <ion-icon name="cloud-upload-outline" aria-hidden="true" />
+                }
+                <span>{{ successImageControl.value ? t('imageChange') : t('imageUpload') }}</span>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
+                  [disabled]="uploadingImage() === 'success'"
+                  (change)="onPresentationFileSelected('success', $event)"
+                />
+              </label>
+            }
+          </div>
+        </section>
+      }
+
+      @if (showWizardSection(1)) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -41279,27 +41505,41 @@ class SurveyBuilderComponent {
           (onClick)="addQuestion()"
         />
       </div>
+      }
+
+      @if (showWizardSection(3)) {
+        <section class="survey-builder__review">
+          <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>
+          @if (headerImageControl.value) {
+            <span>{{ t('reviewHeaderImage') }}</span>
+          }
+          <span>{{ successImageControl.value ? t('reviewSuccessImage') : t('reviewDefaultClose') }}</span>
+        </section>
+      }
 
       @if (validationError()) {
         <p class="survey-builder__error">{{ validationError() }}</p>
       }
 
-      <val-button
-        [props]="{
-          token: 'survey-builder-save',
-          text: t('save'),
-          color: 'dark',
-          fill: 'solid',
-          shape: 'round',
-          size: 'large',
-          expand: 'block',
-          type: 'button',
-          state: saving() ? 'WORKING' : 'ENABLED',
-        }"
-        (onClick)="save()"
-      />
+      @if (isWizard()) {
+        <div class="survey-builder__wizard-actions">
+          @if (wizardStep() > 0) {
+            <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
+          }
+          @if (wizardStep() < wizardSteps.length - 1) {
+            <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
+          } @else {
+            <val-button [props]="saveProps()" (onClick)="save()" />
+          }
+        </div>
+      } @else {
+        <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__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.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-border-color, rgba(0, 0, 0, .16));border-radius:20px;color:var(--ion-color-medium-shade, #6b6675);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__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 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__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}.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-border-color, rgba(0, 0, 0, .16));border-radius:20px;color:var(--ion-color-medium-shade, #6b6675);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__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: 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,
@@ -41314,15 +41554,81 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         FieldSchemaEditorComponent,
                     ], template: `
     <div class="survey-builder">
-      <val-form-field [label]="t('titleLabel')">
-        <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
-      </val-form-field>
-      <val-form-field [label]="t('subtitleLabel')">
-        <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
-      </val-form-field>
+      @if (isWizard()) {
+        <nav class="survey-builder__steps" aria-label="Survey builder steps">
+          @for (step of wizardSteps; track step.id; let i = $index) {
+            <button
+              type="button"
+              class="survey-builder__step"
+              [class.survey-builder__step--active]="wizardStep() === i"
+              [attr.aria-current]="wizardStep() === i ? 'step' : null"
+              (click)="goToStep(i)"
+            >
+              <span>{{ i + 1 }}</span>
+              {{ t(step.labelKey) }}
+            </button>
+          }
+        </nav>
+      }
+
+      @if (!isWizard()) {
+        <val-form-field [label]="t('titleLabel')">
+          <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
+        </val-form-field>
+        <val-form-field [label]="t('subtitleLabel')">
+          <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
+        </val-form-field>
+      }
+
+      @if (showWizardSection(0)) {
+        <section class="survey-builder__section">
+          <val-form-field [label]="t('titleLabel')">
+            <val-text-input [props]="{ control: titleControl, placeholder: t('titlePlaceholder') }" />
+          </val-form-field>
+          <val-form-field [label]="t('subtitleLabel')">
+            <val-text-input [props]="{ control: subtitleControl, placeholder: t('subtitlePlaceholder') }" />
+          </val-form-field>
+          <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+          <div class="survey-builder__image-field">
+            <val-form-field [label]="t('headerImageLabel')">
+              <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
+            </val-form-field>
+            @if (headerImageControl.value) {
+              <div class="survey-builder__image-preview">
+                <img [src]="headerImageControl.value" alt="" />
+                <button
+                  type="button"
+                  class="survey-builder__image-clear"
+                  [attr.aria-label]="t('imageRemove')"
+                  (click)="clearPresentationImage('header')"
+                >
+                  <ion-icon name="trash-outline" aria-hidden="true" />
+                </button>
+              </div>
+            }
+            @if (props.presentationImageUpload) {
+              <label class="survey-builder__image-upload" [class.survey-builder__image-upload--loading]="uploadingImage() === 'header'">
+                @if (uploadingImage() === 'header') {
+                  <ion-spinner name="crescent" />
+                } @else {
+                  <ion-icon name="cloud-upload-outline" aria-hidden="true" />
+                }
+                <span>{{ headerImageControl.value ? t('imageChange') : t('imageUpload') }}</span>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
+                  [disabled]="uploadingImage() === 'header'"
+                  (change)="onPresentationFileSelected('header', $event)"
+                />
+              </label>
+            }
+          </div>
+        </section>
+      }
 
-      <div class="survey-builder__presentation">
-        <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
+      @if (!isWizard()) {
+        <div class="survey-builder__presentation">
+          <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
         <div class="survey-builder__image-field">
           <val-form-field [label]="t('headerImageLabel')">
             <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
@@ -41397,8 +41703,56 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             </label>
           }
         </div>
-      </div>
+        </div>
+      }
+
+      @if (showWizardSection(2)) {
+        <section class="survey-builder__section">
+          <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
+          <val-form-field [label]="t('successTitleLabel')">
+            <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
+          </val-form-field>
+          <val-form-field [label]="t('successMessageLabel')">
+            <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
+          </val-form-field>
+          <div class="survey-builder__image-field">
+            <val-form-field [label]="t('successImageLabel')">
+              <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
+            </val-form-field>
+            @if (successImageControl.value) {
+              <div class="survey-builder__image-preview">
+                <img [src]="successImageControl.value" alt="" />
+                <button
+                  type="button"
+                  class="survey-builder__image-clear"
+                  [attr.aria-label]="t('imageRemove')"
+                  (click)="clearPresentationImage('success')"
+                >
+                  <ion-icon name="trash-outline" aria-hidden="true" />
+                </button>
+              </div>
+            }
+            @if (props.presentationImageUpload) {
+              <label class="survey-builder__image-upload" [class.survey-builder__image-upload--loading]="uploadingImage() === 'success'">
+                @if (uploadingImage() === 'success') {
+                  <ion-spinner name="crescent" />
+                } @else {
+                  <ion-icon name="cloud-upload-outline" aria-hidden="true" />
+                }
+                <span>{{ successImageControl.value ? t('imageChange') : t('imageUpload') }}</span>
+                <input
+                  type="file"
+                  accept="image/jpeg,image/png,image/webp,image/gif,.jpg,.jpeg,.png,.webp,.gif"
+                  [disabled]="uploadingImage() === 'success'"
+                  (change)="onPresentationFileSelected('success', $event)"
+                />
+              </label>
+            }
+          </div>
+        </section>
+      }
 
+      @if (showWizardSection(1)) {
       <div class="survey-builder__questions">
         <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
 
@@ -41478,27 +41832,41 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
           (onClick)="addQuestion()"
         />
       </div>
+      }
+
+      @if (showWizardSection(3)) {
+        <section class="survey-builder__review">
+          <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>
+          @if (headerImageControl.value) {
+            <span>{{ t('reviewHeaderImage') }}</span>
+          }
+          <span>{{ successImageControl.value ? t('reviewSuccessImage') : t('reviewDefaultClose') }}</span>
+        </section>
+      }
 
       @if (validationError()) {
         <p class="survey-builder__error">{{ validationError() }}</p>
       }
 
-      <val-button
-        [props]="{
-          token: 'survey-builder-save',
-          text: t('save'),
-          color: 'dark',
-          fill: 'solid',
-          shape: 'round',
-          size: 'large',
-          expand: 'block',
-          type: 'button',
-          state: saving() ? 'WORKING' : 'ENABLED',
-        }"
-        (onClick)="save()"
-      />
+      @if (isWizard()) {
+        <div class="survey-builder__wizard-actions">
+          @if (wizardStep() > 0) {
+            <val-button [props]="wizardBackProps()" (onClick)="previousStep()" />
+          }
+          @if (wizardStep() < wizardSteps.length - 1) {
+            <val-button [props]="wizardNextProps()" (onClick)="nextStep()" />
+          } @else {
+            <val-button [props]="saveProps()" (onClick)="save()" />
+          }
+        </div>
+      } @else {
+        <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__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.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-border-color, rgba(0, 0, 0, .16));border-radius:20px;color:var(--ion-color-medium-shade, #6b6675);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__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
+  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__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}.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-border-color, rgba(0, 0, 0, .16));border-radius:20px;color:var(--ion-color-medium-shade, #6b6675);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__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], saved: [{