valtech-components 4.0.1009 → 4.0.1011

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.1009';
+const VERSION = '4.0.1011';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -13263,7 +13263,7 @@ class EmojiRatingComponent {
         <p class="emoji-rating__hint">{{ props.hint }}</p>
       }
     </div>
-  `, isInline: true, styles: [".emoji-rating{display:flex;flex-direction:column;gap:8px}.emoji-rating__label{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000)}.emoji-rating__faces{display:flex;gap:8px;flex-wrap:wrap}.emoji-rating__face{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.emoji-rating__face:hover{transform:translateY(-1px)}.emoji-rating__face--selected{border-color:var(--ion-color-primary, #7026df);background:var(--ion-color-primary-tint, rgba(112, 38, 223, .12));transform:scale(1.08)}.emoji-rating--small .emoji-rating__face{font-size:1.125rem}.emoji-rating__hint{font-size:.8125rem;color:var(--ion-color-medium, #92949c);margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
+  `, isInline: true, styles: [".emoji-rating{display:flex;flex-direction:column;gap:8px}.emoji-rating__label{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000)}.emoji-rating__faces{display:flex;gap:8px;flex-wrap:wrap}.emoji-rating__face{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.emoji-rating__face:hover{transform:translateY(-1px)}.emoji-rating__face--selected{border-color:var(--ion-color-primary, #7026df);background:var(--ion-color-primary-tint, rgba(112, 38, 223, .12));transform:scale(1.08)}.emoji-rating--small .emoji-rating__face{font-size:1.125rem}.emoji-rating__hint{font-size:.875rem;color:var(--ion-color-dark, var(--ion-text-color, #000));margin:0;line-height:1.4;opacity:.78}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EmojiRatingComponent, decorators: [{
             type: Component,
@@ -13291,7 +13291,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <p class="emoji-rating__hint">{{ props.hint }}</p>
       }
     </div>
-  `, styles: [".emoji-rating{display:flex;flex-direction:column;gap:8px}.emoji-rating__label{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000)}.emoji-rating__faces{display:flex;gap:8px;flex-wrap:wrap}.emoji-rating__face{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.emoji-rating__face:hover{transform:translateY(-1px)}.emoji-rating__face--selected{border-color:var(--ion-color-primary, #7026df);background:var(--ion-color-primary-tint, rgba(112, 38, 223, .12));transform:scale(1.08)}.emoji-rating--small .emoji-rating__face{font-size:1.125rem}.emoji-rating__hint{font-size:.8125rem;color:var(--ion-color-medium, #92949c);margin:0}\n"] }]
+  `, styles: [".emoji-rating{display:flex;flex-direction:column;gap:8px}.emoji-rating__label{font-size:1rem;font-weight:600;color:var(--ion-text-color, #000)}.emoji-rating__faces{display:flex;gap:8px;flex-wrap:wrap}.emoji-rating__face{width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;border-radius:999px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));background:var(--ion-card-background, var(--ion-background-color, #fff));cursor:pointer;transition:transform .15s ease,border-color .15s ease,background .15s ease}.emoji-rating__face:hover{transform:translateY(-1px)}.emoji-rating__face--selected{border-color:var(--ion-color-primary, #7026df);background:var(--ion-color-primary-tint, rgba(112, 38, 223, .12));transform:scale(1.08)}.emoji-rating--small .emoji-rating__face{font-size:1.125rem}.emoji-rating__hint{font-size:.875rem;color:var(--ion-color-dark, var(--ion-text-color, #000));margin:0;line-height:1.4;opacity:.78}\n"] }]
         }], propDecorators: { props: [{
                 type: Input
             }] } });
@@ -39456,6 +39456,456 @@ const SURVEY_RESPONSE_I18N = {
     },
 };
 
+/** Defaults de `rows` por preset cuando el consumer no lo especifica. */
+const SKELETON_LAYOUT_DEFAULT_ROWS = {
+    form: 3,
+    list: 5,
+    article: 3,
+    cards: 4,
+    detail: 4,
+    hero: 3,
+};
+
+/**
+ * `val-skeleton-layout`
+ *
+ * Skeleton de página **preset-driven**. En vez de que cada vista componga
+ * átomos `val-skeleton` a mano, declara una shape y este organism arma el
+ * placeholder completo. Estándar único para loading states en todo el factory.
+ *
+ * Presets: `form` · `list` · `article` · `cards` · `detail` · `hero`.
+ *
+ * Extender = agregar un valor a `SkeletonLayoutPreset` + un `@case` acá.
+ * Los consumers no cambian.
+ *
+ * @example
+ * ```html
+ * @if (loading()) {
+ *   <val-skeleton-layout [props]="{ preset: 'form', rows: 3, showAvatar: true }" />
+ * } @else {
+ *   ...contenido real...
+ * }
+ * ```
+ */
+class SkeletonLayoutComponent {
+    constructor() {
+        this.props_ = signal({ preset: 'list' }, {
+            equal: (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b),
+        });
+        /** Props con defaults aplicados. */
+        this.resolved = computed(() => this.props_());
+        /** Shimmer on/off — default on. */
+        this.anim = computed(() => this.resolved().animated !== false);
+        /** Array `[0..rows)` para los `@for`. rows del prop o default del preset. */
+        this.rowsArray = computed(() => {
+            const p = this.resolved();
+            const preset = p.preset;
+            const count = p.rows && p.rows > 0 ? Math.floor(p.rows) : SKELETON_LAYOUT_DEFAULT_ROWS[preset];
+            return Array.from({ length: count }, (_, i) => i);
+        });
+        /** True si el consumer fijó `columns` explícito → manda su grid (inline).
+         *  Si no, el preset cards usa el grid responsive mobile-first (.sk-cards--auto). */
+        this.hasExplicitColumns = computed(() => this.resolved().columns != null);
+        /** `grid-template-columns` para el preset cards con `columns` explícito. */
+        this.gridColumns = computed(() => {
+            const cols = this.resolved().columns ?? 2;
+            return `repeat(${Math.max(1, cols)}, 1fr)`;
+        });
+    }
+    set props(value) {
+        if (value)
+            this.props_.set(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SkeletonLayoutComponent, isStandalone: true, selector: "val-skeleton-layout", inputs: { props: "props" }, ngImport: i0, template: `
+    <div class="val-skeleton-layout" [class]="resolved().cssClass || ''" aria-busy="true" aria-live="polite">
+      @switch (resolved().preset) {
+        <!-- FORM — avatar opcional + N fields (label+input) + botón -->
+        @case ('form') {
+          @if (resolved().showAvatar) {
+            <div class="sk-form__avatar">
+              <val-skeleton
+                [props]="{
+                  type: 'avatar',
+                  width: '96px',
+                  height: '96px',
+                  circle: true,
+                  animated: anim(),
+                }"
+              />
+              <div class="sk-form__avatar-meta">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '150px',
+                    height: '18px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '190px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '110px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            </div>
+          }
+          <div class="sk-form__fields">
+            @for (i of rowsArray(); track i) {
+              <div class="sk-form__field">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '90px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'custom',
+                    width: '100%',
+                    height: '48px',
+                    borderRadius: '12px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            }
+            @if (resolved().showButton !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '48px',
+                  borderRadius: '24px',
+                  animated: anim(),
+                }"
+              />
+            }
+          </div>
+        }
+
+        <!-- LIST — N filas list-item (el átomo ya trae icono + 2 líneas) -->
+        @case ('list') {
+          <div class="sk-list">
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'list-item', animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- ARTICLE — título + meta + párrafos -->
+        @case ('article') {
+          <div class="sk-article">
+            @if (resolved().showTitle !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '70%',
+                  height: '30px',
+                  animated: anim(),
+                }"
+              />
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '40%',
+                  height: '14px',
+                  animated: anim(),
+                }"
+              />
+            }
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'paragraph', lines: 4, animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- CARDS — grid de N card blocks -->
+        @case ('cards') {
+          <!-- Sin columns explícito, grid responsive mobile-first (1 col en
+               mobile, 2 en 640, 3 en 960) que espeja el grid estandar de las
+               vistas del factory. Con columns explícito, el consumer manda
+               (inline). Antes era fijo a 2 columnas, apretado en mobile. -->
+          <div
+            class="sk-cards"
+            [class.sk-cards--auto]="!hasExplicitColumns()"
+            [style.grid-template-columns]="hasExplicitColumns() ? gridColumns() : null"
+          >
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'card', animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- DETAIL — N filas key-value -->
+        @case ('detail') {
+          <div class="sk-detail">
+            @for (i of rowsArray(); track i) {
+              <div class="sk-detail__row">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '110px',
+                    height: '14px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '160px',
+                    height: '14px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            }
+          </div>
+        }
+
+        <!-- HERO — banner grande + filas de contenido -->
+        @case ('hero') {
+          <div class="sk-hero">
+            @if (resolved().showTitle !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '140px',
+                  borderRadius: '20px',
+                  animated: anim(),
+                }"
+              />
+            }
+            <div class="sk-hero__rows">
+              @for (i of rowsArray(); track i) {
+                <val-skeleton
+                  [props]="{
+                    type: 'custom',
+                    width: '100%',
+                    height: '72px',
+                    borderRadius: '14px',
+                    animated: anim(),
+                  }"
+                />
+              }
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%}.val-skeleton-layout{width:100%}.sk-form__avatar{display:flex;align-items:center;gap:16px;padding:16px 0}.sk-form__avatar-meta{display:flex;flex-direction:column;gap:8px}.sk-form__fields{padding:16px 0;display:flex;flex-direction:column;gap:18px}.sk-form__field{display:flex;flex-direction:column;gap:8px}.sk-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}.sk-article{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-cards{display:grid;gap:12px;padding:8px 0}.sk-cards--auto{grid-template-columns:1fr}@media (min-width: 640px){.sk-cards--auto{grid-template-columns:repeat(2,1fr)}}@media (min-width: 960px){.sk-cards--auto{grid-template-columns:repeat(3,1fr)}}.sk-detail{display:flex;flex-direction:column;gap:14px;padding:8px 0}.sk-detail__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.sk-hero{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-hero__rows{display:flex;flex-direction:column;gap:12px}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'val-skeleton-layout', standalone: true, imports: [SkeletonComponent], template: `
+    <div class="val-skeleton-layout" [class]="resolved().cssClass || ''" aria-busy="true" aria-live="polite">
+      @switch (resolved().preset) {
+        <!-- FORM — avatar opcional + N fields (label+input) + botón -->
+        @case ('form') {
+          @if (resolved().showAvatar) {
+            <div class="sk-form__avatar">
+              <val-skeleton
+                [props]="{
+                  type: 'avatar',
+                  width: '96px',
+                  height: '96px',
+                  circle: true,
+                  animated: anim(),
+                }"
+              />
+              <div class="sk-form__avatar-meta">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '150px',
+                    height: '18px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '190px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '110px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            </div>
+          }
+          <div class="sk-form__fields">
+            @for (i of rowsArray(); track i) {
+              <div class="sk-form__field">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '90px',
+                    height: '13px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'custom',
+                    width: '100%',
+                    height: '48px',
+                    borderRadius: '12px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            }
+            @if (resolved().showButton !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '48px',
+                  borderRadius: '24px',
+                  animated: anim(),
+                }"
+              />
+            }
+          </div>
+        }
+
+        <!-- LIST — N filas list-item (el átomo ya trae icono + 2 líneas) -->
+        @case ('list') {
+          <div class="sk-list">
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'list-item', animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- ARTICLE — título + meta + párrafos -->
+        @case ('article') {
+          <div class="sk-article">
+            @if (resolved().showTitle !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '70%',
+                  height: '30px',
+                  animated: anim(),
+                }"
+              />
+              <val-skeleton
+                [props]="{
+                  type: 'text',
+                  width: '40%',
+                  height: '14px',
+                  animated: anim(),
+                }"
+              />
+            }
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'paragraph', lines: 4, animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- CARDS — grid de N card blocks -->
+        @case ('cards') {
+          <!-- Sin columns explícito, grid responsive mobile-first (1 col en
+               mobile, 2 en 640, 3 en 960) que espeja el grid estandar de las
+               vistas del factory. Con columns explícito, el consumer manda
+               (inline). Antes era fijo a 2 columnas, apretado en mobile. -->
+          <div
+            class="sk-cards"
+            [class.sk-cards--auto]="!hasExplicitColumns()"
+            [style.grid-template-columns]="hasExplicitColumns() ? gridColumns() : null"
+          >
+            @for (i of rowsArray(); track i) {
+              <val-skeleton [props]="{ type: 'card', animated: anim() }" />
+            }
+          </div>
+        }
+
+        <!-- DETAIL — N filas key-value -->
+        @case ('detail') {
+          <div class="sk-detail">
+            @for (i of rowsArray(); track i) {
+              <div class="sk-detail__row">
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '110px',
+                    height: '14px',
+                    animated: anim(),
+                  }"
+                />
+                <val-skeleton
+                  [props]="{
+                    type: 'text',
+                    width: '160px',
+                    height: '14px',
+                    animated: anim(),
+                  }"
+                />
+              </div>
+            }
+          </div>
+        }
+
+        <!-- HERO — banner grande + filas de contenido -->
+        @case ('hero') {
+          <div class="sk-hero">
+            @if (resolved().showTitle !== false) {
+              <val-skeleton
+                [props]="{
+                  type: 'custom',
+                  width: '100%',
+                  height: '140px',
+                  borderRadius: '20px',
+                  animated: anim(),
+                }"
+              />
+            }
+            <div class="sk-hero__rows">
+              @for (i of rowsArray(); track i) {
+                <val-skeleton
+                  [props]="{
+                    type: 'custom',
+                    width: '100%',
+                    height: '72px',
+                    borderRadius: '14px',
+                    animated: anim(),
+                  }"
+                />
+              }
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%}.val-skeleton-layout{width:100%}.sk-form__avatar{display:flex;align-items:center;gap:16px;padding:16px 0}.sk-form__avatar-meta{display:flex;flex-direction:column;gap:8px}.sk-form__fields{padding:16px 0;display:flex;flex-direction:column;gap:18px}.sk-form__field{display:flex;flex-direction:column;gap:8px}.sk-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}.sk-article{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-cards{display:grid;gap:12px;padding:8px 0}.sk-cards--auto{grid-template-columns:1fr}@media (min-width: 640px){.sk-cards--auto{grid-template-columns:repeat(2,1fr)}}@media (min-width: 960px){.sk-cards--auto{grid-template-columns:repeat(3,1fr)}}.sk-detail{display:flex;flex-direction:column;gap:14px;padding:8px 0}.sk-detail__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.sk-hero{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-hero__rows{display:flex;flex-direction:column;gap:12px}\n"] }]
+        }], propDecorators: { props: [{
+                type: Input
+            }] } });
+
 const NAMESPACE$4 = 'SurveyResponse';
 /** Code del backend cuando la invitación de esa persona ya se respondió. */
 const INVITE_USED_CODE = 'SURVEY_INVITE_ALREADY_USED';
@@ -39823,7 +40273,9 @@ class SurveyResponseComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SurveyResponseComponent, isStandalone: true, selector: "val-survey-response", inputs: { props: "props" }, outputs: { submitted: "submitted" }, viewQueries: [{ propertyName: "formComponent", first: true, predicate: FormComponent, descendants: true }], ngImport: i0, template: `
     @if (loading()) {
-      <div class="survey-response__loading" aria-hidden="true"></div>
+      <div class="survey-response__loading">
+        <val-skeleton-layout [props]="{ preset: 'form', rows: 4, showAvatar: false }" />
+      </div>
     } @else if (loadError()) {
       <val-empty-state [props]="loadErrorState()" />
     } @else if (alreadyAnswered()) {
@@ -39903,7 +40355,7 @@ class SurveyResponseComponent {
         }
       }
     }
-  `, 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{min-height:120px}\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"] }] }); }
+  `, 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyResponseComponent, decorators: [{
             type: Component,
@@ -39923,9 +40375,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         ButtonComponent,
                         EmptyStateComponent,
                         FormComponent,
+                        SkeletonLayoutComponent,
                     ], template: `
     @if (loading()) {
-      <div class="survey-response__loading" aria-hidden="true"></div>
+      <div class="survey-response__loading">
+        <val-skeleton-layout [props]="{ preset: 'form', rows: 4, showAvatar: false }" />
+      </div>
     } @else if (loadError()) {
       <val-empty-state [props]="loadErrorState()" />
     } @else if (alreadyAnswered()) {
@@ -40005,7 +40460,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         }
       }
     }
-  `, 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{min-height:120px}\n"] }]
+  `, 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"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], submitted: [{
@@ -56538,456 +56993,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                 type: Output
             }] } });
 
-/** Defaults de `rows` por preset cuando el consumer no lo especifica. */
-const SKELETON_LAYOUT_DEFAULT_ROWS = {
-    form: 3,
-    list: 5,
-    article: 3,
-    cards: 4,
-    detail: 4,
-    hero: 3,
-};
-
-/**
- * `val-skeleton-layout`
- *
- * Skeleton de página **preset-driven**. En vez de que cada vista componga
- * átomos `val-skeleton` a mano, declara una shape y este organism arma el
- * placeholder completo. Estándar único para loading states en todo el factory.
- *
- * Presets: `form` · `list` · `article` · `cards` · `detail` · `hero`.
- *
- * Extender = agregar un valor a `SkeletonLayoutPreset` + un `@case` acá.
- * Los consumers no cambian.
- *
- * @example
- * ```html
- * @if (loading()) {
- *   <val-skeleton-layout [props]="{ preset: 'form', rows: 3, showAvatar: true }" />
- * } @else {
- *   ...contenido real...
- * }
- * ```
- */
-class SkeletonLayoutComponent {
-    constructor() {
-        this.props_ = signal({ preset: 'list' }, {
-            equal: (a, b) => a === b || JSON.stringify(a) === JSON.stringify(b),
-        });
-        /** Props con defaults aplicados. */
-        this.resolved = computed(() => this.props_());
-        /** Shimmer on/off — default on. */
-        this.anim = computed(() => this.resolved().animated !== false);
-        /** Array `[0..rows)` para los `@for`. rows del prop o default del preset. */
-        this.rowsArray = computed(() => {
-            const p = this.resolved();
-            const preset = p.preset;
-            const count = p.rows && p.rows > 0 ? Math.floor(p.rows) : SKELETON_LAYOUT_DEFAULT_ROWS[preset];
-            return Array.from({ length: count }, (_, i) => i);
-        });
-        /** True si el consumer fijó `columns` explícito → manda su grid (inline).
-         *  Si no, el preset cards usa el grid responsive mobile-first (.sk-cards--auto). */
-        this.hasExplicitColumns = computed(() => this.resolved().columns != null);
-        /** `grid-template-columns` para el preset cards con `columns` explícito. */
-        this.gridColumns = computed(() => {
-            const cols = this.resolved().columns ?? 2;
-            return `repeat(${Math.max(1, cols)}, 1fr)`;
-        });
-    }
-    set props(value) {
-        if (value)
-            this.props_.set(value);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: SkeletonLayoutComponent, isStandalone: true, selector: "val-skeleton-layout", inputs: { props: "props" }, ngImport: i0, template: `
-    <div class="val-skeleton-layout" [class]="resolved().cssClass || ''" aria-busy="true" aria-live="polite">
-      @switch (resolved().preset) {
-        <!-- FORM — avatar opcional + N fields (label+input) + botón -->
-        @case ('form') {
-          @if (resolved().showAvatar) {
-            <div class="sk-form__avatar">
-              <val-skeleton
-                [props]="{
-                  type: 'avatar',
-                  width: '96px',
-                  height: '96px',
-                  circle: true,
-                  animated: anim(),
-                }"
-              />
-              <div class="sk-form__avatar-meta">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '150px',
-                    height: '18px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '190px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '110px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            </div>
-          }
-          <div class="sk-form__fields">
-            @for (i of rowsArray(); track i) {
-              <div class="sk-form__field">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '90px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'custom',
-                    width: '100%',
-                    height: '48px',
-                    borderRadius: '12px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            }
-            @if (resolved().showButton !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'custom',
-                  width: '100%',
-                  height: '48px',
-                  borderRadius: '24px',
-                  animated: anim(),
-                }"
-              />
-            }
-          </div>
-        }
-
-        <!-- LIST — N filas list-item (el átomo ya trae icono + 2 líneas) -->
-        @case ('list') {
-          <div class="sk-list">
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'list-item', animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- ARTICLE — título + meta + párrafos -->
-        @case ('article') {
-          <div class="sk-article">
-            @if (resolved().showTitle !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'text',
-                  width: '70%',
-                  height: '30px',
-                  animated: anim(),
-                }"
-              />
-              <val-skeleton
-                [props]="{
-                  type: 'text',
-                  width: '40%',
-                  height: '14px',
-                  animated: anim(),
-                }"
-              />
-            }
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'paragraph', lines: 4, animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- CARDS — grid de N card blocks -->
-        @case ('cards') {
-          <!-- Sin columns explícito, grid responsive mobile-first (1 col en
-               mobile, 2 en 640, 3 en 960) que espeja el grid estandar de las
-               vistas del factory. Con columns explícito, el consumer manda
-               (inline). Antes era fijo a 2 columnas, apretado en mobile. -->
-          <div
-            class="sk-cards"
-            [class.sk-cards--auto]="!hasExplicitColumns()"
-            [style.grid-template-columns]="hasExplicitColumns() ? gridColumns() : null"
-          >
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'card', animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- DETAIL — N filas key-value -->
-        @case ('detail') {
-          <div class="sk-detail">
-            @for (i of rowsArray(); track i) {
-              <div class="sk-detail__row">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '110px',
-                    height: '14px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '160px',
-                    height: '14px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            }
-          </div>
-        }
-
-        <!-- HERO — banner grande + filas de contenido -->
-        @case ('hero') {
-          <div class="sk-hero">
-            @if (resolved().showTitle !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'custom',
-                  width: '100%',
-                  height: '140px',
-                  borderRadius: '20px',
-                  animated: anim(),
-                }"
-              />
-            }
-            <div class="sk-hero__rows">
-              @for (i of rowsArray(); track i) {
-                <val-skeleton
-                  [props]="{
-                    type: 'custom',
-                    width: '100%',
-                    height: '72px',
-                    borderRadius: '14px',
-                    animated: anim(),
-                  }"
-                />
-              }
-            </div>
-          </div>
-        }
-      }
-    </div>
-  `, isInline: true, styles: [":host{display:block;width:100%}.val-skeleton-layout{width:100%}.sk-form__avatar{display:flex;align-items:center;gap:16px;padding:16px 0}.sk-form__avatar-meta{display:flex;flex-direction:column;gap:8px}.sk-form__fields{padding:16px 0;display:flex;flex-direction:column;gap:18px}.sk-form__field{display:flex;flex-direction:column;gap:8px}.sk-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}.sk-article{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-cards{display:grid;gap:12px;padding:8px 0}.sk-cards--auto{grid-template-columns:1fr}@media (min-width: 640px){.sk-cards--auto{grid-template-columns:repeat(2,1fr)}}@media (min-width: 960px){.sk-cards--auto{grid-template-columns:repeat(3,1fr)}}.sk-detail{display:flex;flex-direction:column;gap:14px;padding:8px 0}.sk-detail__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.sk-hero{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-hero__rows{display:flex;flex-direction:column;gap:12px}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "val-skeleton", inputs: ["props"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SkeletonLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'val-skeleton-layout', standalone: true, imports: [SkeletonComponent], template: `
-    <div class="val-skeleton-layout" [class]="resolved().cssClass || ''" aria-busy="true" aria-live="polite">
-      @switch (resolved().preset) {
-        <!-- FORM — avatar opcional + N fields (label+input) + botón -->
-        @case ('form') {
-          @if (resolved().showAvatar) {
-            <div class="sk-form__avatar">
-              <val-skeleton
-                [props]="{
-                  type: 'avatar',
-                  width: '96px',
-                  height: '96px',
-                  circle: true,
-                  animated: anim(),
-                }"
-              />
-              <div class="sk-form__avatar-meta">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '150px',
-                    height: '18px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '190px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '110px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            </div>
-          }
-          <div class="sk-form__fields">
-            @for (i of rowsArray(); track i) {
-              <div class="sk-form__field">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '90px',
-                    height: '13px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'custom',
-                    width: '100%',
-                    height: '48px',
-                    borderRadius: '12px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            }
-            @if (resolved().showButton !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'custom',
-                  width: '100%',
-                  height: '48px',
-                  borderRadius: '24px',
-                  animated: anim(),
-                }"
-              />
-            }
-          </div>
-        }
-
-        <!-- LIST — N filas list-item (el átomo ya trae icono + 2 líneas) -->
-        @case ('list') {
-          <div class="sk-list">
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'list-item', animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- ARTICLE — título + meta + párrafos -->
-        @case ('article') {
-          <div class="sk-article">
-            @if (resolved().showTitle !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'text',
-                  width: '70%',
-                  height: '30px',
-                  animated: anim(),
-                }"
-              />
-              <val-skeleton
-                [props]="{
-                  type: 'text',
-                  width: '40%',
-                  height: '14px',
-                  animated: anim(),
-                }"
-              />
-            }
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'paragraph', lines: 4, animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- CARDS — grid de N card blocks -->
-        @case ('cards') {
-          <!-- Sin columns explícito, grid responsive mobile-first (1 col en
-               mobile, 2 en 640, 3 en 960) que espeja el grid estandar de las
-               vistas del factory. Con columns explícito, el consumer manda
-               (inline). Antes era fijo a 2 columnas, apretado en mobile. -->
-          <div
-            class="sk-cards"
-            [class.sk-cards--auto]="!hasExplicitColumns()"
-            [style.grid-template-columns]="hasExplicitColumns() ? gridColumns() : null"
-          >
-            @for (i of rowsArray(); track i) {
-              <val-skeleton [props]="{ type: 'card', animated: anim() }" />
-            }
-          </div>
-        }
-
-        <!-- DETAIL — N filas key-value -->
-        @case ('detail') {
-          <div class="sk-detail">
-            @for (i of rowsArray(); track i) {
-              <div class="sk-detail__row">
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '110px',
-                    height: '14px',
-                    animated: anim(),
-                  }"
-                />
-                <val-skeleton
-                  [props]="{
-                    type: 'text',
-                    width: '160px',
-                    height: '14px',
-                    animated: anim(),
-                  }"
-                />
-              </div>
-            }
-          </div>
-        }
-
-        <!-- HERO — banner grande + filas de contenido -->
-        @case ('hero') {
-          <div class="sk-hero">
-            @if (resolved().showTitle !== false) {
-              <val-skeleton
-                [props]="{
-                  type: 'custom',
-                  width: '100%',
-                  height: '140px',
-                  borderRadius: '20px',
-                  animated: anim(),
-                }"
-              />
-            }
-            <div class="sk-hero__rows">
-              @for (i of rowsArray(); track i) {
-                <val-skeleton
-                  [props]="{
-                    type: 'custom',
-                    width: '100%',
-                    height: '72px',
-                    borderRadius: '14px',
-                    animated: anim(),
-                  }"
-                />
-              }
-            </div>
-          </div>
-        }
-      }
-    </div>
-  `, styles: [":host{display:block;width:100%}.val-skeleton-layout{width:100%}.sk-form__avatar{display:flex;align-items:center;gap:16px;padding:16px 0}.sk-form__avatar-meta{display:flex;flex-direction:column;gap:8px}.sk-form__fields{padding:16px 0;display:flex;flex-direction:column;gap:18px}.sk-form__field{display:flex;flex-direction:column;gap:8px}.sk-list{display:flex;flex-direction:column;gap:10px;padding:8px 0}.sk-article{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-cards{display:grid;gap:12px;padding:8px 0}.sk-cards--auto{grid-template-columns:1fr}@media (min-width: 640px){.sk-cards--auto{grid-template-columns:repeat(2,1fr)}}@media (min-width: 960px){.sk-cards--auto{grid-template-columns:repeat(3,1fr)}}.sk-detail{display:flex;flex-direction:column;gap:14px;padding:8px 0}.sk-detail__row{display:flex;align-items:center;justify-content:space-between;gap:16px}.sk-hero{display:flex;flex-direction:column;gap:16px;padding:8px 0}.sk-hero__rows{display:flex;flex-direction:column;gap:12px}\n"] }]
-        }], propDecorators: { props: [{
-                type: Input
-            }] } });
-
 /**
  * PageRefreshService — bus del pull-to-refresh estándar del factory.
  *