valtech-components 4.0.983 → 4.0.984

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.983';
+const VERSION = '4.0.984';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -39596,6 +39596,13 @@ class FieldSchemaEditorComponent {
     constructor() {
         this.props = { allowedTypes: ['TEXT'] };
         this.save = new EventEmitter();
+        /**
+         * Emite en cada tecla, sin validar. Existe porque el consumer necesita el
+         * borrador en vivo: si solo tuviera `save`, lo escrito acá no existiría para
+         * él hasta que alguien toque su botón — y lo escrito ES la intención del
+         * usuario, no un borrador que haya que confirmar.
+         */
+        this.changed = new EventEmitter();
         this.i18n = inject(I18nService);
         this.formSchemas = inject(FormSchemaBuilderService);
         this.labelControl = new FormControl('', { nonNullable: true });
@@ -39619,6 +39626,11 @@ class FieldSchemaEditorComponent {
                 type: InputType.SELECT,
                 state: this.state(),
                 placeholder: this.t('typeLabel'),
+                // action-sheet y no el popover default de Ionic: el popover se ancla al
+                // campo, y con el campo cerca del borde inferior y un catálogo largo
+                // Ionic lo recorta arriba Y abajo — quedaban tipos imposibles de elegir.
+                // La hoja usa el alto completo y scrollea sola.
+                selectInterface: 'action-sheet',
                 options: this.allowedTypes().map((type, order) => ({ id: type, name: this.typeLabel(type), order })),
             };
         });
@@ -39640,11 +39652,18 @@ class FieldSchemaEditorComponent {
         if (!this.i18n.hasNamespace(NAMESPACE$2)) {
             this.i18n.registerDefaults(NAMESPACE$2, FIELD_SCHEMA_EDITOR_I18N);
         }
-        this.typeControl.valueChanges.subscribe(value => this.currentType.set(value || 'TEXT'));
+        this.typeControl.valueChanges.subscribe(value => {
+            this.currentType.set(value || 'TEXT');
+            this.emitChange();
+        });
         this.labelControl.valueChanges.subscribe(value => {
             if (!this.nameLocked)
                 this.name = this.formSchemas.toToken(value || '');
+            this.emitChange();
         });
+        this.placeholderControl.valueChanges.subscribe(() => this.emitChange());
+        this.hintControl.valueChanges.subscribe(() => this.emitChange());
+        this.requiredControl.valueChanges.subscribe(() => this.emitChange());
     }
     ngOnInit() {
         const initial = this.props.field;
@@ -39682,6 +39701,16 @@ class FieldSchemaEditorComponent {
     typeLabel(type) {
         return this.props.typeLabels?.[type] || this.t(`type${type}`);
     }
+    setOptions(options) {
+        this.options.set(options);
+        this.emitChange();
+    }
+    emitChange() {
+        // Antes de ngOnInit no hay id: emitir ahí daría un campo sin identidad, que
+        // el consumer no sabría a qué fila aplicar.
+        if (this.fieldId)
+            this.changed.emit(this.value());
+    }
     selectPreset(preset) {
         this.selectedPresetId.set(preset.id);
         const value = preset.field;
@@ -39695,6 +39724,7 @@ class FieldSchemaEditorComponent {
         this.requiredControl.setValue(!!value.required);
         this.typeControl.setValue(this.coerceType(value.type));
         this.options.set(value.options ?? []);
+        this.emitChange();
     }
     /**
      * Valida y emite. Público a propósito: lo llama el consumer desde el botón
@@ -39742,7 +39772,7 @@ class FieldSchemaEditorComponent {
         return allowed.includes(type) ? type : allowed[0];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FieldSchemaEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldSchemaEditorComponent, isStandalone: true, selector: "val-field-schema-editor", inputs: { props: "props" }, outputs: { save: "save" }, ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FieldSchemaEditorComponent, isStandalone: true, selector: "val-field-schema-editor", inputs: { props: "props" }, outputs: { save: "save", changed: "changed" }, ngImport: i0, template: `
     <div class="field-schema-editor">
       @if (showPresets()) {
         <section class="field-schema-editor__presets">
@@ -39795,7 +39825,7 @@ class FieldSchemaEditorComponent {
       />
 
       @if (needsOptions()) {
-        <val-field-options-editor [props]="optionsEditorProps()" (optionsChange)="options.set($event)" />
+            <val-field-options-editor [props]="optionsEditorProps()" (optionsChange)="setOptions($event)" />
       }
 
       @if (validationError()) {
@@ -39868,7 +39898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
       />
 
       @if (needsOptions()) {
-        <val-field-options-editor [props]="optionsEditorProps()" (optionsChange)="options.set($event)" />
+            <val-field-options-editor [props]="optionsEditorProps()" (optionsChange)="setOptions($event)" />
       }
 
       @if (validationError()) {
@@ -39880,6 +39910,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Input
             }], save: [{
                 type: Output
+            }], changed: [{
+                type: Output
             }] } });
 
 class RequestFormBuilderService extends FormSchemaBuilderService {
@@ -40110,6 +40142,20 @@ class SurveyBuilderComponent {
             return next;
         });
     }
+    /**
+     * Guarda lo que se está escribiendo, sin cerrar el editor ni validar.
+     *
+     * Sin esto, lo tipeado solo existía dentro del editor hasta que alguien
+     * tocaba "Listo": la fila seguía diciendo "Pregunta sin texto" y, peor,
+     * "Guardar encuesta" fallaba con "todas las preguntas necesitan texto" sobre
+     * una pregunta que en pantalla claramente tenía texto. Tocar "Listo" era un
+     * paso obligatorio que no se veía por ningún lado.
+     */
+    draftQuestion(field) {
+        this.questions.update(rows => rows.map(r => (r.id === field.id ? { ...r, ...field } : r)));
+        if (this.validationError())
+            this.validationError.set('');
+    }
     applyQuestion(field) {
         this.questions.update(rows => rows.map(r => r.id === field.id
             ? {
@@ -40249,7 +40295,12 @@ class SurveyBuilderComponent {
 
             @if (editingId() === row.id) {
               <div class="survey-builder__row-editor">
-                <val-field-schema-editor #editor [props]="editorProps(row)" (save)="applyQuestion($event)" />
+                <val-field-schema-editor
+                  #editor
+                  [props]="editorProps(row)"
+                  (changed)="draftQuestion($event)"
+                  (save)="applyQuestion($event)"
+                />
                 <val-button
                   [props]="{
                     token: 'q-done-' + row.id,
@@ -40303,7 +40354,7 @@ 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__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"] }] }); }
+  `, 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__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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
             type: Component,
@@ -40363,7 +40414,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
 
             @if (editingId() === row.id) {
               <div class="survey-builder__row-editor">
-                <val-field-schema-editor #editor [props]="editorProps(row)" (save)="applyQuestion($event)" />
+                <val-field-schema-editor
+                  #editor
+                  [props]="editorProps(row)"
+                  (changed)="draftQuestion($event)"
+                  (save)="applyQuestion($event)"
+                />
                 <val-button
                   [props]="{
                     token: 'q-done-' + row.id,