valtech-components 4.0.998 → 4.0.1000

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.998';
+const VERSION = '4.0.1000';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -7759,6 +7759,8 @@ const VALTECH_DEFAULT_CONTENT = {
             save: 'Guardar',
             delete: 'Eliminar',
             edit: 'Editar',
+            yes: 'Sí',
+            no: 'No',
             close: 'Cerrar',
             back: 'Volver',
             next: 'Siguiente',
@@ -7923,6 +7925,8 @@ const VALTECH_DEFAULT_CONTENT = {
             save: 'Save',
             delete: 'Delete',
             edit: 'Edit',
+            yes: 'Yes',
+            no: 'No',
             close: 'Close',
             back: 'Back',
             next: 'Next',
@@ -40660,6 +40664,12 @@ const SURVEY_BUILDER_I18N = {
         presentationLabel: 'Presentación',
         headerImageLabel: 'Imagen inicial',
         headerImagePlaceholder: 'URL de la imagen que abre la encuesta',
+        imageUpload: 'Subir imagen',
+        imageChange: 'Cambiar imagen',
+        imageRemove: 'Quitar imagen',
+        imageTypeError: 'Usa una imagen JPG, PNG, WEBP o GIF.',
+        imageSizeError: 'La imagen no puede pesar más de 10 MB.',
+        imageUploadError: 'No pudimos subir la imagen. Intenta nuevamente.',
         successTitleLabel: 'Título de agradecimiento',
         successTitlePlaceholder: 'Ej: Gracias por responder',
         successMessageLabel: 'Mensaje de agradecimiento',
@@ -40693,6 +40703,12 @@ const SURVEY_BUILDER_I18N = {
         presentationLabel: 'Presentation',
         headerImageLabel: 'Opening image',
         headerImagePlaceholder: 'Image URL shown at the start of the survey',
+        imageUpload: 'Upload image',
+        imageChange: 'Change image',
+        imageRemove: 'Remove image',
+        imageTypeError: 'Use a JPG, PNG, WEBP or GIF image.',
+        imageSizeError: 'The image must be 10 MB or less.',
+        imageUploadError: "We couldn't upload the image. Try again.",
         successTitleLabel: 'Thank-you title',
         successTitlePlaceholder: 'E.g: Thanks for answering',
         successMessageLabel: 'Thank-you message',
@@ -40766,6 +40782,9 @@ class SurveyBuilderComponent {
         this.editingId = signal('');
         this.validationError = signal('');
         this.saving = signal(false);
+        this.uploadingImage = signal('');
+        this.allowedImageTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
+        this.maxImageBytes = 10 * 1024 * 1024;
         if (!this.i18n.hasNamespace(NAMESPACE$1)) {
             this.i18n.registerDefaults(NAMESPACE$1, SURVEY_BUILDER_I18N);
         }
@@ -40775,6 +40794,7 @@ class SurveyBuilderComponent {
         if (!this.i18n.hasNamespace(EDITOR_NAMESPACE)) {
             this.i18n.registerDefaults(EDITOR_NAMESPACE, FIELD_SCHEMA_EDITOR_I18N);
         }
+        addIcons({ cloudUploadOutline, trashOutline });
     }
     async ngOnInit() {
         // Sembrado directo: la app ya tenía la encuesta, no hace falta leerla.
@@ -40895,6 +40915,49 @@ class SurveyBuilderComponent {
         this.editingId.set('');
         this.validationError.set('');
     }
+    async onPresentationFileSelected(slot, event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        input.value = '';
+        if (!file || !this.props.presentationImageUpload || this.uploadingImage())
+            return;
+        if (file.type && !this.allowedImageTypes.includes(file.type)) {
+            this.validationError.set(this.t('imageTypeError'));
+            return;
+        }
+        if (file.size > this.maxImageBytes) {
+            this.validationError.set(this.t('imageSizeError'));
+            return;
+        }
+        this.uploadingImage.set(slot);
+        this.validationError.set('');
+        try {
+            const url = await this.props.presentationImageUpload(slot, file);
+            if (slot === 'header') {
+                this.headerImageControl.setValue(url);
+            }
+            else {
+                this.successImageControl.setValue(url);
+            }
+        }
+        catch (err) {
+            this.errors.handle(err, {
+                context: `surveyBuilder.presentationImageUpload slot=${slot}`,
+                fallbackKey: 'imageUploadError',
+                i18nNamespace: NAMESPACE$1,
+            });
+        }
+        finally {
+            this.uploadingImage.set('');
+        }
+    }
+    clearPresentationImage(slot) {
+        if (slot === 'header') {
+            this.headerImageControl.setValue('');
+            return;
+        }
+        this.successImageControl.setValue('');
+    }
     async save() {
         if (this.saving())
             return;
@@ -41017,18 +41080,80 @@ class SurveyBuilderComponent {
 
       <div class="survey-builder__presentation">
         <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
-        <val-form-field [label]="t('headerImageLabel')">
-          <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
-        </val-form-field>
+        <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>
         <val-form-field [label]="t('successTitleLabel')">
           <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
         </val-form-field>
         <val-form-field [label]="t('successMessageLabel')">
           <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
         </val-form-field>
-        <val-form-field [label]="t('successImageLabel')">
-          <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
-        </val-form-field>
+        <div 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>
       </div>
 
       <div class="survey-builder__questions">
@@ -41130,13 +41255,15 @@ class SurveyBuilderComponent {
         (onClick)="save()"
       />
     </div>
-  `, isInline: true, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-survey-builder', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
+                        IonIcon,
+                        IonSpinner,
                         TextInputComponent,
                         ButtonComponent,
                         FormFieldComponent,
@@ -41152,18 +41279,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
       <div class="survey-builder__presentation">
         <span class="survey-builder__questions-label">{{ t('presentationLabel') }}</span>
-        <val-form-field [label]="t('headerImageLabel')">
-          <val-text-input [props]="{ control: headerImageControl, placeholder: t('headerImagePlaceholder') }" />
-        </val-form-field>
+        <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>
         <val-form-field [label]="t('successTitleLabel')">
           <val-text-input [props]="{ control: successTitleControl, placeholder: t('successTitlePlaceholder') }" />
         </val-form-field>
         <val-form-field [label]="t('successMessageLabel')">
           <val-text-input [props]="{ control: successMessageControl, placeholder: t('successMessagePlaceholder') }" />
         </val-form-field>
-        <val-form-field [label]="t('successImageLabel')">
-          <val-text-input [props]="{ control: successImageControl, placeholder: t('successImagePlaceholder') }" />
-        </val-form-field>
+        <div 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>
       </div>
 
       <div class="survey-builder__questions">
@@ -41265,7 +41454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         (onClick)="save()"
       />
     </div>
-  `, styles: [":host{display:block}.survey-builder{display:flex;flex-direction:column;gap:16px}.survey-builder__questions{display:flex;flex-direction:column;gap:12px}.survey-builder__presentation{display:flex;flex-direction:column;gap:12px;padding-top:4px}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], saved: [{