valtech-components 4.0.1008 → 4.0.1010

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.1008';
+const VERSION = '4.0.1010';
 
 function evaluateValtechAccess(rule, context, features = {}, visitedFeatures = new Set()) {
     if (rule == null)
@@ -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: [{
@@ -41851,19 +42306,21 @@ class SurveyBuilderComponent {
                   (changed)="draftQuestion($event)"
                   (save)="applyQuestion($event)"
                 />
-                <val-button
-                  [props]="{
-                    token: 'q-done-' + row.id,
-                    text: t('doneEditing'),
-                    color: 'dark',
-                    fill: 'solid',
-                    shape: 'round',
-                    size: 'default',
-                    type: 'button',
-                    state: 'ENABLED',
-                  }"
-                  (onClick)="editor.submit()"
-                />
+                <div class="survey-builder__row-editor-actions">
+                  <val-button
+                    [props]="{
+                      token: 'q-done-' + row.id,
+                      text: t('doneEditing'),
+                      color: 'dark',
+                      fill: 'solid',
+                      shape: 'round',
+                      size: 'default',
+                      type: 'button',
+                      state: 'ENABLED',
+                    }"
+                    (onClick)="editor.submit()"
+                  />
+                </div>
               </div>
             }
           </div>
@@ -41919,7 +42376,7 @@ class SurveyBuilderComponent {
         <val-button [props]="saveProps()" (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__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__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"] }] }); }
+  `, 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__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: IonSpinner, selector: "ion-spinner", inputs: ["color", "duration", "name", "paused"] }, { kind: "component", type: TextInputComponent, selector: "val-text-input", inputs: ["preset", "props"] }, { kind: "component", type: ButtonComponent, selector: "val-button", inputs: ["preset", "props"], outputs: ["onClick"] }, { kind: "component", type: FormFieldComponent, selector: "val-form-field", inputs: ["label"] }, { kind: "component", type: FieldSchemaEditorComponent, selector: "val-field-schema-editor", inputs: ["props"], outputs: ["save", "changed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SurveyBuilderComponent, decorators: [{
             type: Component,
@@ -42183,19 +42640,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                   (changed)="draftQuestion($event)"
                   (save)="applyQuestion($event)"
                 />
-                <val-button
-                  [props]="{
-                    token: 'q-done-' + row.id,
-                    text: t('doneEditing'),
-                    color: 'dark',
-                    fill: 'solid',
-                    shape: 'round',
-                    size: 'default',
-                    type: 'button',
-                    state: 'ENABLED',
-                  }"
-                  (onClick)="editor.submit()"
-                />
+                <div class="survey-builder__row-editor-actions">
+                  <val-button
+                    [props]="{
+                      token: 'q-done-' + row.id,
+                      text: t('doneEditing'),
+                      color: 'dark',
+                      fill: 'solid',
+                      shape: 'round',
+                      size: 'default',
+                      type: 'button',
+                      state: 'ENABLED',
+                    }"
+                    (onClick)="editor.submit()"
+                  />
+                </div>
               </div>
             }
           </div>
@@ -42251,7 +42710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
         <val-button [props]="saveProps()" (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__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__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__section,.survey-builder__review{display:flex;flex-direction:column;gap:12px}.survey-builder__steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px;margin-bottom:12px}.survey-builder__step{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .12));border-radius:8px;background:var(--ion-card-background, var(--ion-background-color, #fff));color:var(--ion-color-medium-shade, #6b6675);font-size:.8125rem;font-weight:700;cursor:pointer}.survey-builder__step span{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--ion-color-light, #f4f5f8);color:inherit;font-size:.75rem}.survey-builder__step--active{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__wizard-actions{display:flex;justify-content:flex-end;gap:8px}.survey-builder__review{padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__review strong{color:var(--ion-text-color, #000)}.survey-builder__review span:not(.survey-builder__questions-label){color:var(--ion-color-medium, #92949c);font-size:.875rem}.survey-builder__image-field{display:flex;flex-direction:column;gap:10px}.survey-builder__image-preview{position:relative;width:100%}.survey-builder__image-preview img{display:block;width:100%;aspect-ratio:16 / 9;object-fit:contain;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:8px;background:var(--ion-color-light, #f4f5f8)}.survey-builder__image-clear{position:absolute;top:8px;right:8px;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:999px;background:#0009;color:#fff;cursor:pointer}.survey-builder__image-upload{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:2px dashed var(--ion-color-dark, #2f2c3a);border-radius:20px;color:var(--ion-color-dark, #2f2c3a);font-size:.875rem;font-weight:600;cursor:pointer}.survey-builder__image-upload:hover{border-color:var(--ion-color-primary);color:var(--ion-color-primary)}.survey-builder__image-upload--loading{opacity:.7;cursor:default}.survey-builder__image-upload ion-spinner{width:16px;height:16px}.survey-builder__image-upload input{display:none}.survey-builder__questions-label{font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ion-color-medium, #92949c)}.survey-builder__empty{margin:0;font-size:.875rem;color:var(--ion-color-medium, #92949c)}.survey-builder__optional-note{margin:0;color:var(--ion-color-medium, #92949c);font-size:.875rem;line-height:1.35}.survey-builder__row{display:flex;flex-direction:column;gap:12px;padding:12px;border:1px solid var(--ion-border-color, rgba(0, 0, 0, .1));border-radius:var(--val-radius-md, 12px);background:var(--ion-card-background, var(--ion-background-color, #fff))}.survey-builder__row-head{display:flex;flex-direction:column;gap:8px}.survey-builder__row-text{display:flex;flex-direction:column;gap:2px;min-width:0}.survey-builder__row-text strong{color:var(--ion-text-color, #000);font-size:.9375rem}.survey-builder__row-text span{color:var(--ion-color-medium, #92949c);font-size:.8125rem}.survey-builder__row-actions{display:flex;gap:4px;flex-wrap:wrap}.survey-builder__row-editor{display:flex;flex-direction:column;gap:12px;padding-top:12px;border-top:1px solid var(--ion-border-color, rgba(0, 0, 0, .1))}.survey-builder__row-editor-actions{display:flex;justify-content:flex-end}.survey-builder__error{margin:0;color:var(--ion-color-danger);font-size:.875rem;font-weight:700}@media (min-width: 576px){.survey-builder__row-head{flex-direction:row;align-items:flex-start;justify-content:space-between}.survey-builder__row-text{flex:1}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { props: [{
                 type: Input
             }], saved: [{
@@ -56534,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.
  *