valtech-components 4.0.76 → 4.0.79

package/fesm2022/valtech-components.mjs

@@ -56,7 +56,7 @@ import { BrowserMultiFormatReader } from '@zxing/browser';
  * Current version of valtech-components.
  * This is automatically updated during the publish process.
  */
-const VERSION = '4.0.76';
+const VERSION = '4.0.79';
 
 // Control de estado de refresco (singleton a nivel de módulo)
 let isRefreshing = false;
@@ -7079,7 +7079,9 @@ const VALTECH_DEFAULT_CONTENT = {
             titlePlaceholder: 'Describe brevemente...',
             titleValidation: 'El título debe tener entre 5 y 200 caracteres',
             descriptionPlaceholder: 'Proporciona más detalles...',
-            descriptionValidation: 'La descripción debe tener entre 10 y 5000 caracteres',
+            descriptionValidation: 'La descripción es demasiado larga',
+            formTitle: 'Enviar feedback',
+            formSubtitle: 'Cuéntanos qué piensas. Errores, sugerencias y mejoras.',
             // Componentes - Búsqueda/Grid
             searchNumber: 'Buscar número...',
             selected: 'seleccionado/s',
@@ -7231,7 +7233,9 @@ const VALTECH_DEFAULT_CONTENT = {
             titlePlaceholder: 'Describe briefly...',
             titleValidation: 'Title must be between 5 and 200 characters',
             descriptionPlaceholder: 'Provide more details...',
-            descriptionValidation: 'Description must be between 10 and 5000 characters',
+            descriptionValidation: 'Description is too long',
+            formTitle: 'Send feedback',
+            formSubtitle: 'Tell us what you think. Bugs, suggestions and improvements.',
             // Components - Search/Grid
             searchNumber: 'Search number...',
             selected: 'selected',
@@ -64250,8 +64254,8 @@ class FeedbackFormComponent {
             placeholder: this.props.descriptionPlaceholder ?? this.i18n.t('descriptionPlaceholder'),
             type: InputType.TEXTAREA,
             order: 3,
-            range: { min: 10, max: 5000 },
-            validators: [Validators.required, Validators.minLength(10), Validators.maxLength(5000)],
+            range: { min: 10, max: 2000 },
+            validators: [Validators.required, Validators.minLength(10), Validators.maxLength(2000)],
             errors: {
                 required: this.i18n.t('descriptionValidation'),
                 minlength: this.i18n.t('descriptionValidation'),
@@ -64264,7 +64268,8 @@ class FeedbackFormComponent {
             sections: [{ name: '', order: 0, fields }],
             actions: {
                 type: 'submit',
-                color: 'primary',
+                color: 'dark',
+                shape: 'round',
                 text: this.props.submitButtonText ?? this.i18n.t('submit'),
                 state: ComponentStates.ENABLED,
                 expand: 'block',
@@ -64309,6 +64314,12 @@ class FeedbackFormComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: FeedbackFormComponent, isStandalone: true, selector: "val-feedback-form", inputs: { props: "props" }, outputs: { onSubmit: "onSubmit", onCancel: "onCancel" }, ngImport: i0, template: `
     <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
+      @if (props.showTitle) {
+        <div class="form-header">
+          <h2 class="form-title">{{ props.pageTitle || i18n.t('formTitle') }}</h2>
+          <p class="form-subtitle">{{ props.pageSubtitle || i18n.t('formSubtitle') }}</p>
+        </div>
+      }
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
         @if (props.showAttachments !== false) {
           <val-attachment-uploader
@@ -64338,12 +64349,18 @@ class FeedbackFormComponent {
         </ion-button>
       }
     </div>
-  `, isInline: true, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
+  `, isInline: true, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}.form-title{font-size:1.5rem;font-weight:700;margin:0 0 4px;color:var(--ion-text-color)}.form-subtitle{font-size:1rem;font-weight:700;margin:0;color:var(--ion-text-color)}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: FormComponent, selector: "val-form", inputs: ["props"], outputs: ["onSubmit", "onInvalid", "onSelectChange"] }, { kind: "component", type: AttachmentUploaderComponent, selector: "val-attachment-uploader", inputs: ["props"], outputs: ["attachmentsChange"] }, { kind: "component", type: IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FeedbackFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'val-feedback-form', standalone: true, imports: [CommonModule, FormComponent, AttachmentUploaderComponent, IonButton, IonIcon], template: `
     <div class="feedback-form-wrapper" [class.compact]="props.compact" [ngClass]="props.cssClass">
+      @if (props.showTitle) {
+        <div class="form-header">
+          <h2 class="form-title">{{ props.pageTitle || i18n.t('formTitle') }}</h2>
+          <p class="form-subtitle">{{ props.pageSubtitle || i18n.t('formSubtitle') }}</p>
+        </div>
+      }
       <val-form [props]="formProps" (onSubmit)="handleFormSubmit($event)">
         @if (props.showAttachments !== false) {
           <val-attachment-uploader
@@ -64373,7 +64390,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         </ion-button>
       }
     </div>
-  `, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"] }]
+  `, styles: [".feedback-form-wrapper{display:flex;flex-direction:column;gap:8px;&.compact{gap:4px}}.form-header{margin-bottom:8px}.form-title{font-size:1.5rem;font-weight:700;margin:0 0 4px;color:var(--ion-text-color)}.form-subtitle{font-size:1rem;font-weight:700;margin:0;color:var(--ion-text-color)}.feedback-alert{display:flex;align-items:center;gap:8px;padding:12px 16px;border-radius:8px;margin-top:8px;&.error{background-color:var(--ion-color-danger-tint);color:var(--ion-color-danger-shade)}&.success{background-color:var(--ion-color-success-tint);color:var(--ion-color-success-shade)}ion-icon{font-size:20px}}.cancel-button{margin-top:8px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], onSubmit: [{