valtech-components 2.0.796 → 2.0.798
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/organisms/form/form.component.mjs +4 -2
- package/esm2022/lib/components/organisms/skeleton-layout/skeleton-layout.component.mjs +423 -0
- package/esm2022/lib/components/organisms/skeleton-layout/types.mjs +10 -0
- package/esm2022/lib/version.mjs +2 -2
- package/esm2022/public-api.mjs +3 -1
- package/fesm2022/valtech-components.mjs +434 -3
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/organisms/skeleton-layout/skeleton-layout.component.d.ts +37 -0
- package/lib/components/organisms/skeleton-layout/types.d.ts +50 -0
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
- package/public-api.d.ts +2 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { SkeletonLayoutMetadata } from './types';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* `val-skeleton-layout`
|
|
5
|
+
*
|
|
6
|
+
* Skeleton de página **preset-driven**. En vez de que cada vista componga
|
|
7
|
+
* átomos `val-skeleton` a mano, declara una shape y este organism arma el
|
|
8
|
+
* placeholder completo. Estándar único para loading states en todo el factory.
|
|
9
|
+
*
|
|
10
|
+
* Presets: `form` · `list` · `article` · `cards` · `detail` · `hero`.
|
|
11
|
+
*
|
|
12
|
+
* Extender = agregar un valor a `SkeletonLayoutPreset` + un `@case` acá.
|
|
13
|
+
* Los consumers no cambian.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```html
|
|
17
|
+
* @if (loading()) {
|
|
18
|
+
* <val-skeleton-layout [props]="{ preset: 'form', rows: 3, showAvatar: true }" />
|
|
19
|
+
* } @else {
|
|
20
|
+
* ...contenido real...
|
|
21
|
+
* }
|
|
22
|
+
* ```
|
|
23
|
+
*/
|
|
24
|
+
export declare class SkeletonLayoutComponent {
|
|
25
|
+
private readonly props_;
|
|
26
|
+
set props(value: SkeletonLayoutMetadata | undefined);
|
|
27
|
+
/** Props con defaults aplicados. */
|
|
28
|
+
readonly resolved: import("@angular/core").Signal<SkeletonLayoutMetadata>;
|
|
29
|
+
/** Shimmer on/off — default on. */
|
|
30
|
+
readonly anim: import("@angular/core").Signal<boolean>;
|
|
31
|
+
/** Array `[0..rows)` para los `@for`. rows del prop o default del preset. */
|
|
32
|
+
readonly rowsArray: import("@angular/core").Signal<number[]>;
|
|
33
|
+
/** `grid-template-columns` para el preset cards. */
|
|
34
|
+
readonly gridColumns: import("@angular/core").Signal<string>;
|
|
35
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<SkeletonLayoutComponent, never>;
|
|
36
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SkeletonLayoutComponent, "val-skeleton-layout", never, { "props": { "alias": "props"; "required": false; }; }, {}, never, never, true, never>;
|
|
37
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Presets de layout para `val-skeleton-layout`.
|
|
3
|
+
*
|
|
4
|
+
* Cada preset compone átomos `val-skeleton` en la forma de una shape de página
|
|
5
|
+
* común. Para agregar uno nuevo: añadir el valor acá + un `@case` en el
|
|
6
|
+
* template del componente. Cero cambios en los consumers.
|
|
7
|
+
*/
|
|
8
|
+
export type SkeletonLayoutPreset = 'form' | 'list' | 'article' | 'cards' | 'detail' | 'hero';
|
|
9
|
+
/**
|
|
10
|
+
* Configuración del componente `val-skeleton-layout`.
|
|
11
|
+
*
|
|
12
|
+
* @example Form con avatar (perfil):
|
|
13
|
+
* ```html
|
|
14
|
+
* <val-skeleton-layout [props]="{ preset: 'form', rows: 3, showAvatar: true }" />
|
|
15
|
+
* ```
|
|
16
|
+
*
|
|
17
|
+
* @example Lista (notificaciones, sesiones):
|
|
18
|
+
* ```html
|
|
19
|
+
* <val-skeleton-layout [props]="{ preset: 'list', rows: 5 }" />
|
|
20
|
+
* ```
|
|
21
|
+
*
|
|
22
|
+
* @example Artículo legal:
|
|
23
|
+
* ```html
|
|
24
|
+
* <val-skeleton-layout [props]="{ preset: 'article' }" />
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export interface SkeletonLayoutMetadata {
|
|
28
|
+
/** Shape de la página a esqueletizar. */
|
|
29
|
+
preset: SkeletonLayoutPreset;
|
|
30
|
+
/**
|
|
31
|
+
* Cantidad de items repetibles (fields en `form`, filas en `list`/`detail`,
|
|
32
|
+
* párrafos en `article`, cards en `cards`). Si se omite usa el default del
|
|
33
|
+
* preset.
|
|
34
|
+
*/
|
|
35
|
+
rows?: number;
|
|
36
|
+
/** `form` — antepone un bloque avatar + meta lines. Default `false`. */
|
|
37
|
+
showAvatar?: boolean;
|
|
38
|
+
/** `form` — renderiza un bloque de botón al final. Default `true`. */
|
|
39
|
+
showButton?: boolean;
|
|
40
|
+
/** `cards` — columnas por fila. Default `2`. */
|
|
41
|
+
columns?: number;
|
|
42
|
+
/** `article` / `hero` — incluye bloque de título grande. Default `true`. */
|
|
43
|
+
showTitle?: boolean;
|
|
44
|
+
/** Desactiva el shimmer. Default animado. */
|
|
45
|
+
animated?: boolean;
|
|
46
|
+
/** Clase CSS extra para el contenedor. */
|
|
47
|
+
cssClass?: string;
|
|
48
|
+
}
|
|
49
|
+
/** Defaults de `rows` por preset cuando el consumer no lo especifica. */
|
|
50
|
+
export declare const SKELETON_LAYOUT_DEFAULT_ROWS: Record<SkeletonLayoutPreset, number>;
|
package/lib/version.d.ts
CHANGED
package/package.json
CHANGED
package/public-api.d.ts
CHANGED
|
@@ -223,6 +223,8 @@ export * from './lib/components/organisms/bottom-nav/bottom-nav.component';
|
|
|
223
223
|
export * from './lib/components/organisms/bottom-nav/types';
|
|
224
224
|
export * from './lib/components/organisms/avatar-upload/avatar-upload.component';
|
|
225
225
|
export * from './lib/components/organisms/avatar-upload/types';
|
|
226
|
+
export * from './lib/components/organisms/skeleton-layout/skeleton-layout.component';
|
|
227
|
+
export * from './lib/components/organisms/skeleton-layout/types';
|
|
226
228
|
export * from './lib/components/templates/simple/simple.component';
|
|
227
229
|
export * from './lib/components/templates/simple/types';
|
|
228
230
|
export * from './lib/components/templates/page-template/page-template.component';
|