valtech-components 4.0.1015 → 4.0.1016

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -70,7 +70,7 @@ import fixWebmDuration from 'fix-webm-duration';
70
70
  * Current version of valtech-components.
71
71
  * This is automatically updated during the publish process.
72
72
  */
73
- const VERSION = '4.0.1015';
73
+ const VERSION = '4.0.1016';
74
74
 
75
75
  function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
76
76
  if (rule == null)
@@ -40368,7 +40368,7 @@ class SurveyResponseComponent {
40368
40368
  }
40369
40369
  }
40370
40370
  }
40371
- `, 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"] }] }); }
40371
+ `, 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"] }] }); }
40372
40372
  }
40373
40373
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, decorators: [{
40374
40374
  type: Component,
@@ -40473,7 +40473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
40473
40473
  }
40474
40474
  }
40475
40475
  }
40476
- `, 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"] }]
40476
+ `, 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"] }]
40477
40477
  }], ctorParameters: () => [], propDecorators: { props: [{
40478
40478
  type: Input
40479
40479
  }], submitted: [{
@@ -41387,6 +41387,7 @@ const SURVEY_BUILDER_I18N = {
41387
41387
  questionLabelPlaceholder: 'Escribe la pregunta',
41388
41388
  addQuestion: 'Agregar pregunta',
41389
41389
  addQuestionToSection: 'Agregar aquí',
41390
+ addSection: 'Agregar sección',
41390
41391
  removeQuestion: 'Quitar pregunta',
41391
41392
  editQuestion: 'Editar pregunta',
41392
41393
  duplicateQuestion: 'Duplicar pregunta',
@@ -41399,6 +41400,7 @@ const SURVEY_BUILDER_I18N = {
41399
41400
  save: 'Guardar encuesta',
41400
41401
  noTitle: 'Ponle un título a la encuesta',
41401
41402
  noQuestions: 'Agrega al menos una pregunta',
41403
+ noQuestionsInSection: 'Agrega al menos una pregunta a esta sección',
41402
41404
  noSectionName: 'Ponle nombre a la sección',
41403
41405
  emptyQuestionLabel: 'Todas las preguntas necesitan texto',
41404
41406
  saveError: 'No pudimos guardar la encuesta. Inténtalo de nuevo en un rato.',
@@ -41409,6 +41411,7 @@ const SURVEY_BUILDER_I18N = {
41409
41411
  sectionNamePlaceholder: 'Ej: Información personal',
41410
41412
  sectionSubtitleLabel: 'Subtítulo',
41411
41413
  sectionSubtitlePlaceholder: 'Escribe un subtítulo para esta sección',
41414
+ sectionTabsLabel: 'Secciones de la encuesta',
41412
41415
  stepClose: 'Cierre',
41413
41416
  stepReview: 'Revisar',
41414
41417
  wizardStepsLabel: 'Pasos para crear la encuesta',
@@ -41456,6 +41459,7 @@ const SURVEY_BUILDER_I18N = {
41456
41459
  questionLabelPlaceholder: 'Write the question',
41457
41460
  addQuestion: 'Add question',
41458
41461
  addQuestionToSection: 'Add here',
41462
+ addSection: 'Add section',
41459
41463
  removeQuestion: 'Remove question',
41460
41464
  editQuestion: 'Edit question',
41461
41465
  duplicateQuestion: 'Duplicate question',
@@ -41468,6 +41472,7 @@ const SURVEY_BUILDER_I18N = {
41468
41472
  save: 'Save survey',
41469
41473
  noTitle: 'Give the survey a title',
41470
41474
  noQuestions: 'Add at least one question',
41475
+ noQuestionsInSection: 'Add at least one question to this section',
41471
41476
  noSectionName: 'Give the section a name',
41472
41477
  emptyQuestionLabel: 'Every question needs text',
41473
41478
  saveError: "We couldn't save the survey. Please try again in a while.",
@@ -41478,6 +41483,7 @@ const SURVEY_BUILDER_I18N = {
41478
41483
  sectionNamePlaceholder: 'E.g: Personal information',
41479
41484
  sectionSubtitleLabel: 'Subtitle',
41480
41485
  sectionSubtitlePlaceholder: 'Add a subtitle for this section',
41486
+ sectionTabsLabel: 'Survey sections',
41481
41487
  stepClose: 'Close',
41482
41488
  stepReview: 'Review',
41483
41489
  wizardStepsLabel: 'Survey builder steps',
@@ -41560,7 +41566,7 @@ class SurveyPreviewModalComponent {
41560
41566
  </section>
41561
41567
  </div>
41562
41568
  </val-modal-layout>
41563
- `, 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"] }] }); }
41569
+ `, 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"] }] }); }
41564
41570
  }
41565
41571
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyPreviewModalComponent, decorators: [{
41566
41572
  type: Component,
@@ -41596,7 +41602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
41596
41602
  </section>
41597
41603
  </div>
41598
41604
  </val-modal-layout>
41599
- `, 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"] }]
41605
+ `, 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"] }]
41600
41606
  }], propDecorators: { modalTitle: [{
41601
41607
  type: Input
41602
41608
  }], closeLabel: [{
@@ -41731,19 +41737,17 @@ class SurveyBuilderComponent {
41731
41737
  this.sectionIds = signal(['__default__']);
41732
41738
  this.sectionNames = signal({});
41733
41739
  this.sectionSubtitles = signal({});
41740
+ this.activeSectionId = signal('__default__');
41734
41741
  this.sectionNameControls = {};
41735
41742
  this.sectionSubtitleControls = {};
41736
41743
  this.questionGroups = computed(() => this.groupQuestions(this.questions()));
41737
41744
  this.wizardSteps = computed(() => {
41738
- const groups = this.questionGroups();
41739
- const steps = [{ id: 'start', label: this.t('stepStart') }];
41740
- groups.forEach((group, index) => {
41741
- const sectionLabel = group.label || `${this.t('sectionQuestionsLabel')} ${index + 1}`;
41742
- steps.push({ id: `section-${group.id}`, label: `${index + 1}. ${sectionLabel}` });
41743
- });
41744
- steps.push({ id: 'close', label: this.t('stepClose') });
41745
- steps.push({ id: 'review', label: this.t('stepReview') });
41746
- return steps;
41745
+ return [
41746
+ { id: 'start', label: this.t('stepStart') },
41747
+ { id: 'questions', label: this.t('stepQuestions') },
41748
+ { id: 'close', label: this.t('stepClose') },
41749
+ { id: 'review', label: this.t('stepReview') },
41750
+ ];
41747
41751
  });
41748
41752
  this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
41749
41753
  this.maxImageBytes = 10 * 1024 * 1024;
@@ -41859,16 +41863,18 @@ class SurveyBuilderComponent {
41859
41863
  };
41860
41864
  }
41861
41865
  closeStep() {
41862
- return Math.max(this.wizardSteps().length - 2, 0);
41866
+ return 2;
41863
41867
  }
41864
41868
  reviewStep() {
41865
- return Math.max(this.wizardSteps().length - 1, 0);
41869
+ return 3;
41866
41870
  }
41867
- sectionStepIndex(sectionIndex) {
41868
- return sectionIndex + 1;
41871
+ currentSectionId() {
41872
+ if (!this.isWizard())
41873
+ return this.questionGroups()[0]?.id;
41874
+ return this.activeSectionId();
41869
41875
  }
41870
- showCurrentSectionQuestionStep() {
41871
- return this.isWizard() && this.wizardStep() >= 1 && this.wizardStep() < this.reviewStep();
41876
+ selectSection(sectionId) {
41877
+ this.activeSectionId.set(this.normalizeSectionId(sectionId));
41872
41878
  }
41873
41879
  interpolate(template, values) {
41874
41880
  return Object.entries(values).reduce((text, [key, value]) => text.replaceAll(`{${key}}`, String(value)), template);
@@ -41922,6 +41928,18 @@ class SurveyBuilderComponent {
41922
41928
  // siguiente posible, y dejarla cerrada la haría ver como una fila rota.
41923
41929
  this.editingId.set(row.id);
41924
41930
  }
41931
+ addSection() {
41932
+ const id = `section-${rowUid++}`;
41933
+ this.sectionIds.update(ids => [...ids, id]);
41934
+ this.sectionNames.update(values => ({ ...values, [id]: '' }));
41935
+ this.sectionSubtitles.update(values => ({ ...values, [id]: '' }));
41936
+ this.sectionNameControl(id);
41937
+ this.sectionSubtitleControl(id);
41938
+ this.validationError.set('');
41939
+ this.activeSectionId.set(id);
41940
+ if (this.isWizard())
41941
+ this.wizardStep.set(1);
41942
+ }
41925
41943
  rowGlobalIndex(sectionId, groupRowIndex) {
41926
41944
  const normalized = this.normalizeSectionId(sectionId);
41927
41945
  let index = 0;
@@ -42007,10 +42025,10 @@ class SurveyBuilderComponent {
42007
42025
  withResolvedSection(field) {
42008
42026
  const label = (field.sectionLabel ?? '').trim();
42009
42027
  const id = this.normalizeSectionId(field.sectionId);
42010
- if (id !== '__default__' || !label) {
42011
- return { ...field, sectionId: id, sectionLabel: label || undefined };
42028
+ if (!this.isWizard() && id === '__default__' && label) {
42029
+ return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
42012
42030
  }
42013
- return { ...field, sectionId: this.formBuilder.toToken(label), sectionLabel: label };
42031
+ return { ...field, sectionId: id, sectionLabel: label || undefined };
42014
42032
  }
42015
42033
  async onPresentationFileSelected(slot, event) {
42016
42034
  const input = event.target;
@@ -42059,7 +42077,7 @@ class SurveyBuilderComponent {
42059
42077
  if (this.saving())
42060
42078
  return;
42061
42079
  this.validationError.set('');
42062
- if (!this.validateWizardStep(0) || !this.validateWizardStep(1))
42080
+ if (!this.validateBeforeSave())
42063
42081
  return;
42064
42082
  const title = this.titleControl.value.trim();
42065
42083
  const rows = this.questions();
@@ -42073,7 +42091,7 @@ class SurveyBuilderComponent {
42073
42091
  required: row.required,
42074
42092
  sectionId: row.sectionId,
42075
42093
  sectionLabel: this.sectionNameControl(row.sectionId).value.trim() || row.sectionLabel,
42076
- sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(row.sectionId)] ?? '',
42094
+ sectionSubtitle: this.sectionSubtitleControl(row.sectionId).value.trim() || row.sectionSubtitle,
42077
42095
  sectionOrder: this.sectionOrderFor(row.sectionId, rows),
42078
42096
  placeholderText: row.placeholderText,
42079
42097
  hintText: row.hintText,
@@ -42152,6 +42170,7 @@ class SurveyBuilderComponent {
42152
42170
  this.sectionNames.set(names);
42153
42171
  this.sectionSubtitles.set(subtitles);
42154
42172
  this.questions.set(rows);
42173
+ this.activeSectionId.set(this.sectionIds()[0] ?? '__default__');
42155
42174
  }
42156
42175
  presentationPayload() {
42157
42176
  const presentation = {
@@ -42185,25 +42204,61 @@ class SurveyBuilderComponent {
42185
42204
  }
42186
42205
  return true;
42187
42206
  }
42188
- if (step === 1) {
42189
- const rows = this.questions();
42190
- if (!rows.length) {
42207
+ if (this.isWizard() && step === 1) {
42208
+ if (!this.questions().length) {
42191
42209
  this.validationError.set(this.t('noQuestions'));
42192
42210
  return false;
42193
42211
  }
42194
- if (rows.some(r => !r.label.trim())) {
42195
- this.validationError.set(this.t('emptyQuestionLabel'));
42212
+ if (!this.validateRows(this.questions()))
42213
+ return false;
42214
+ const emptySection = this.questionGroups().find(group => group.id !== '__default__' && !group.rows.length);
42215
+ if (emptySection) {
42216
+ this.activeSectionId.set(emptySection.id);
42217
+ this.validationError.set(this.t('noQuestionsInSection'));
42196
42218
  return false;
42197
42219
  }
42198
- // El editor ya lo valida al cerrar cada pregunta, pero una pregunta abierta
42199
- // (o cargada de una encuesta vieja) puede llegar acá sin opciones.
42200
- if (rows.some(r => FIELD_TYPES_WITH_OPTIONS.includes(r.type) && !r.options?.length)) {
42201
- this.validationError.set(this.t('missingOptions'));
42220
+ return true;
42221
+ }
42222
+ if (!this.isWizard() && step === 1) {
42223
+ return this.validateRows(this.questions());
42224
+ }
42225
+ return true;
42226
+ }
42227
+ validateBeforeSave() {
42228
+ if (!this.validateWizardStep(0))
42229
+ return false;
42230
+ if (!this.questions().length) {
42231
+ this.validationError.set(this.t('noQuestions'));
42232
+ return false;
42233
+ }
42234
+ if (!this.validateRows(this.questions()))
42235
+ return false;
42236
+ if (this.isWizard()) {
42237
+ const emptySection = this.questionGroups().find(group => group.id !== '__default__' && !group.rows.length);
42238
+ if (emptySection) {
42239
+ this.validationError.set(this.t('noQuestionsInSection'));
42202
42240
  return false;
42203
42241
  }
42204
42242
  }
42205
42243
  return true;
42206
42244
  }
42245
+ validateRows(rows) {
42246
+ if (!rows.length) {
42247
+ this.validationError.set(this.t('noQuestions'));
42248
+ return false;
42249
+ }
42250
+ if (rows.some(r => !r.label.trim())) {
42251
+ this.validationError.set(this.t('emptyQuestionLabel'));
42252
+ return false;
42253
+ }
42254
+ // El editor ya lo valida al cerrar cada pregunta, pero una pregunta abierta
42255
+ // (o cargada de una encuesta vieja) puede llegar acá sin opciones.
42256
+ if (rows.some(r => FIELD_TYPES_WITH_OPTIONS.includes(r.type) && !r.options?.length)) {
42257
+ this.validationError.set(this.t('missingOptions'));
42258
+ return false;
42259
+ }
42260
+ return true;
42261
+ }
42207
42262
  rowFromField(f) {
42208
42263
  return {
42209
42264
  id: `row-${rowUid++}`,
@@ -42257,7 +42312,7 @@ class SurveyBuilderComponent {
42257
42312
  typeLabel: this.typeLabel(question.type),
42258
42313
  sectionId: this.normalizeSectionId(question.sectionId),
42259
42314
  sectionLabel: this.sectionNameControl(question.sectionId).value.trim() || question.sectionLabel,
42260
- sectionSubtitle: this.sectionSubtitles()[this.normalizeSectionId(question.sectionId)] ?? '',
42315
+ sectionSubtitle: this.sectionSubtitleControl(question.sectionId).value.trim() || question.sectionSubtitle,
42261
42316
  sectionOrder: this.sectionOrderFor(question.sectionId, this.questions()),
42262
42317
  })),
42263
42318
  },
@@ -42428,7 +42483,7 @@ class SurveyBuilderComponent {
42428
42483
  </div>
42429
42484
  }
42430
42485
 
42431
- @if (showWizardSection(closeStep())) {
42486
+ @if (showWizardSection(2)) {
42432
42487
  <section class="survey-builder__section">
42433
42488
  <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
42434
42489
  <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42475,7 +42530,7 @@ class SurveyBuilderComponent {
42475
42530
  </section>
42476
42531
  }
42477
42532
 
42478
- @if (showCurrentSectionQuestionStep()) {
42533
+ @if (showWizardSection(1)) {
42479
42534
  <div class="survey-builder__questions">
42480
42535
  <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
42481
42536
 
@@ -42483,8 +42538,24 @@ class SurveyBuilderComponent {
42483
42538
  <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
42484
42539
  }
42485
42540
 
42541
+ @if (questionGroups().length > 1) {
42542
+ <div class="survey-builder__section-tabs" [attr.aria-label]="t('sectionTabsLabel')">
42543
+ @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42544
+ <button
42545
+ type="button"
42546
+ class="survey-builder__section-tab"
42547
+ [class.survey-builder__section-tab--active]="activeSectionId() === group.id"
42548
+ [attr.aria-current]="activeSectionId() === group.id ? 'true' : null"
42549
+ (click)="selectSection(group.id)"
42550
+ >
42551
+ {{ group.label || t('sectionQuestionsLabel') + ' ' + (sectionIndex + 1) }}
42552
+ </button>
42553
+ }
42554
+ </div>
42555
+ }
42556
+
42486
42557
  @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42487
- @if (wizardStep() === sectionStepIndex(sectionIndex)) {
42558
+ @if (activeSectionId() === group.id) {
42488
42559
  <section class="survey-builder__question-section">
42489
42560
  <div class="survey-builder__section-head">
42490
42561
  <div class="survey-builder__section-fields">
@@ -42607,12 +42678,28 @@ class SurveyBuilderComponent {
42607
42678
  state: 'ENABLED',
42608
42679
  icon: { name: 'add-outline', slot: 'start' },
42609
42680
  }"
42610
- (onClick)="addQuestion(questionGroups()[0]?.id)"
42681
+ (onClick)="addQuestion(currentSectionId())"
42611
42682
  />
42683
+ @if (isWizard()) {
42684
+ <val-button
42685
+ [props]="{
42686
+ token: 'survey-builder-add-section',
42687
+ text: t('addSection'),
42688
+ color: 'dark',
42689
+ fill: 'outline',
42690
+ shape: 'round',
42691
+ size: 'default',
42692
+ type: 'button',
42693
+ state: 'ENABLED',
42694
+ icon: { name: 'add-outline', slot: 'start' },
42695
+ }"
42696
+ (onClick)="addSection()"
42697
+ />
42698
+ }
42612
42699
  </div>
42613
42700
  }
42614
42701
 
42615
- @if (showWizardSection(reviewStep())) {
42702
+ @if (showWizardSection(3)) {
42616
42703
  <section class="survey-builder__review">
42617
42704
  <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
42618
42705
  <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -42645,7 +42732,7 @@ class SurveyBuilderComponent {
42645
42732
  <val-button [props]="saveProps()" (onClick)="save()" />
42646
42733
  }
42647
42734
  </div>
42648
- `, 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"] }] }); }
42735
+ `, 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"] }] }); }
42649
42736
  }
42650
42737
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
42651
42738
  type: Component,
@@ -42816,7 +42903,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42816
42903
  </div>
42817
42904
  }
42818
42905
 
42819
- @if (showWizardSection(closeStep())) {
42906
+ @if (showWizardSection(2)) {
42820
42907
  <section class="survey-builder__section">
42821
42908
  <span class="survey-builder__questions-label">{{ t('stepClose') }}</span>
42822
42909
  <p class="survey-builder__optional-note">{{ t('successOptionalNote') }}</p>
@@ -42863,7 +42950,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42863
42950
  </section>
42864
42951
  }
42865
42952
 
42866
- @if (showCurrentSectionQuestionStep()) {
42953
+ @if (showWizardSection(1)) {
42867
42954
  <div class="survey-builder__questions">
42868
42955
  <span class="survey-builder__questions-label">{{ t('questionsLabel') }}</span>
42869
42956
 
@@ -42871,8 +42958,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42871
42958
  <p class="survey-builder__empty">{{ t('noQuestions') }}</p>
42872
42959
  }
42873
42960
 
42961
+ @if (questionGroups().length > 1) {
42962
+ <div class="survey-builder__section-tabs" [attr.aria-label]="t('sectionTabsLabel')">
42963
+ @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42964
+ <button
42965
+ type="button"
42966
+ class="survey-builder__section-tab"
42967
+ [class.survey-builder__section-tab--active]="activeSectionId() === group.id"
42968
+ [attr.aria-current]="activeSectionId() === group.id ? 'true' : null"
42969
+ (click)="selectSection(group.id)"
42970
+ >
42971
+ {{ group.label || t('sectionQuestionsLabel') + ' ' + (sectionIndex + 1) }}
42972
+ </button>
42973
+ }
42974
+ </div>
42975
+ }
42976
+
42874
42977
  @for (group of questionGroups(); track group.id; let sectionIndex = $index) {
42875
- @if (wizardStep() === sectionStepIndex(sectionIndex)) {
42978
+ @if (activeSectionId() === group.id) {
42876
42979
  <section class="survey-builder__question-section">
42877
42980
  <div class="survey-builder__section-head">
42878
42981
  <div class="survey-builder__section-fields">
@@ -42995,12 +43098,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
42995
43098
  state: 'ENABLED',
42996
43099
  icon: { name: 'add-outline', slot: 'start' },
42997
43100
  }"
42998
- (onClick)="addQuestion(questionGroups()[0]?.id)"
43101
+ (onClick)="addQuestion(currentSectionId())"
42999
43102
  />
43103
+ @if (isWizard()) {
43104
+ <val-button
43105
+ [props]="{
43106
+ token: 'survey-builder-add-section',
43107
+ text: t('addSection'),
43108
+ color: 'dark',
43109
+ fill: 'outline',
43110
+ shape: 'round',
43111
+ size: 'default',
43112
+ type: 'button',
43113
+ state: 'ENABLED',
43114
+ icon: { name: 'add-outline', slot: 'start' },
43115
+ }"
43116
+ (onClick)="addSection()"
43117
+ />
43118
+ }
43000
43119
  </div>
43001
43120
  }
43002
43121
 
43003
- @if (showWizardSection(reviewStep())) {
43122
+ @if (showWizardSection(3)) {
43004
43123
  <section class="survey-builder__review">
43005
43124
  <span class="survey-builder__questions-label">{{ t('reviewTitle') }}</span>
43006
43125
  <strong>{{ titleControl.value || t('untitledQuestion') }}</strong>
@@ -43033,7 +43152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
43033
43152
  <val-button [props]="saveProps()" (onClick)="save()" />
43034
43153
  }
43035
43154
  </div>
43036
- `, 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"] }]
43155
+ `, 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"] }]
43037
43156
  }], ctorParameters: () => [], propDecorators: { props: [{
43038
43157
  type: Input
43039
43158
  }], saved: [{