@kaufmann-lab/ui 0.1.17 → 0.1.18
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/README.md +1 -1
- package/fesm2022/kaufmann-lab-ui-auth.mjs +322 -0
- package/fesm2022/kaufmann-lab-ui-auth.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui-business.mjs +453 -0
- package/fesm2022/kaufmann-lab-ui-business.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui-core.mjs +5906 -0
- package/fesm2022/kaufmann-lab-ui-core.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui-map.mjs +1637 -0
- package/fesm2022/kaufmann-lab-ui-map.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui-mobile.mjs +92 -0
- package/fesm2022/kaufmann-lab-ui-mobile.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui-shared.mjs +269 -0
- package/fesm2022/kaufmann-lab-ui-shared.mjs.map +1 -0
- package/fesm2022/kaufmann-lab-ui.mjs +23 -8472
- package/fesm2022/kaufmann-lab-ui.mjs.map +1 -1
- package/kaufmann-lab-ui-0.1.18.tgz +0 -0
- package/package.json +25 -1
- package/types/kaufmann-lab-ui-auth.d.ts +240 -0
- package/types/kaufmann-lab-ui-business.d.ts +298 -0
- package/types/kaufmann-lab-ui-core.d.ts +3288 -0
- package/types/kaufmann-lab-ui-map.d.ts +631 -0
- package/types/kaufmann-lab-ui-mobile.d.ts +53 -0
- package/types/kaufmann-lab-ui-shared.d.ts +154 -0
- package/types/kaufmann-lab-ui.d.ts +5 -4631
- package/fesm2022/mapbox-gl-csp.worker.js +0 -6
|
@@ -1,4631 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/**
|
|
7
|
-
* Nombre de cada ícono del design system. Página 5 del PDF fija un set de
|
|
8
|
-
* 59; `eye-off` es una extensión propia por fuera de ese set, agregada para
|
|
9
|
-
* el toggle de mostrar/ocultar contraseña de `Input` — no hay un ícono de
|
|
10
|
-
* "ojo tachado" en la spec original porque esa interacción no estaba
|
|
11
|
-
* contemplada ahí.
|
|
12
|
-
*
|
|
13
|
-
* Separado de `Icon.ts` a propósito: este type es el contrato público que
|
|
14
|
-
* comparten `Icon`, `icons/index.ts` (registro) y cualquier componente que
|
|
15
|
-
* reciba un `IconName` (`Button`, `MetricCard`, etc.) — no debería requerir
|
|
16
|
-
* importar el componente `Icon` completo solo para tipar una prop.
|
|
17
|
-
*
|
|
18
|
-
* `minus`, `maximize`, `minimize`, `crosshair` y `navigation` son una
|
|
19
|
-
* extensión propia (mismo criterio que `eye-off`): página 5 del PDF no las
|
|
20
|
-
* incluye, pero los controles flotantes de `kf-map` (zoom, fullscreen,
|
|
21
|
-
* recenter, follow) los necesitan y ninguno tiene un glyph equivalente ya
|
|
22
|
-
* en el set — antes de agregarlos se confirmó que no había forma de resolver
|
|
23
|
-
* esas 5 acciones con un ícono ya existente.
|
|
24
|
-
*
|
|
25
|
-
* `message-circle`, `monitor`, `zap` y `pin` son otra extensión propia, mismo
|
|
26
|
-
* criterio: el selector de canal de entrada de ticket (Llamada/WhatsApp/
|
|
27
|
-
* Portal/API·agente) de `apps/operations` necesita "burbuja de chat",
|
|
28
|
-
* "pantalla" y "rayo" y ninguno tiene glyph equivalente en el set (`phone`
|
|
29
|
-
* ya cubre "Llamada", no hizo falta agregarlo). `pin` es la acción de
|
|
30
|
-
* fijar/soltar un subheader — se confirmó que no alcanza con reusar
|
|
31
|
-
* `map-pin`, que en este mismo dominio representa ubicación geográfica real
|
|
32
|
-
* de vehículos; reusarlo para "fijar" generaría ambigüedad con los markers
|
|
33
|
-
* de mapa.
|
|
34
|
-
*/
|
|
35
|
-
type IconName = 'activity' | 'alert-circle' | 'alert-octagon' | 'alert-triangle' | 'award' | 'bar-chart' | 'bell' | 'bus' | 'calculator' | 'calendar' | 'car' | 'cart' | 'check' | 'check-circle' | 'check-square' | 'chevron-down' | 'chevron-left' | 'chevron-left-bar' | 'chevron-right' | 'clipboard' | 'clock' | 'credit-card' | 'crosshair' | 'download' | 'edit' | 'external-link' | 'eye' | 'eye-off' | 'file' | 'filter' | 'gauge' | 'gift' | 'grid' | 'history' | 'home' | 'inbox' | 'layers' | 'list' | 'log-out' | 'mail' | 'map' | 'map-pin' | 'maximize' | 'menu' | 'message-circle' | 'mic' | 'mic-off' | 'minimize' | 'minus' | 'monitor' | 'more-vertical' | 'navigation' | 'pause' | 'phone' | 'pin' | 'play' | 'plus' | 'search' | 'settings' | 'shield-check' | 'sort' | 'star' | 'ticket' | 'tool' | 'trash' | 'truck' | 'upload-cloud' | 'user' | 'user-search' | 'video' | 'x' | 'zap';
|
|
36
|
-
|
|
37
|
-
type IconSize = 'sm' | 'md' | 'lg';
|
|
38
|
-
/** Ángulos de rotación soportados por `rotate` — cubre los casos reales del
|
|
39
|
-
* design system (un chevron que apunta en 4 direcciones posibles según
|
|
40
|
-
* estado, ej. orden ascendente/descendente o un panel abierto/cerrado);
|
|
41
|
-
* no un `number` libre, para no habilitar ángulos arbitrarios sin caso de
|
|
42
|
-
* uso ni animación pensada. */
|
|
43
|
-
type IconRotation = 0 | 90 | 180 | 270;
|
|
44
|
-
/**
|
|
45
|
-
* Ícono de trazo del design system — 71 glyphs (59 de la página 5 + extensiones
|
|
46
|
-
* propias documentadas en `icon-name.ts`), grilla 24×24,
|
|
47
|
-
* grosor de trazo 1.9px. Referencia un sprite SVG embebido (ver
|
|
48
|
-
* `icon-sprite.ts`) vía `<use>`, así que no hay peso de red adicional por
|
|
49
|
-
* cada instancia: el sprite se inyecta al DOM una única vez, la primera
|
|
50
|
-
* vez que se renderiza cualquier `<kf-icon>` de toda la aplicación.
|
|
51
|
-
*
|
|
52
|
-
* El tamaño se controla con `size` (página 6: "el tamaño se controla con la
|
|
53
|
-
* prop size"): `sm` (16px), `md` (20px, default) o `lg` (24px). El color
|
|
54
|
-
* sigue siempre `currentColor` — se hereda del texto del elemento
|
|
55
|
-
* contenedor, nunca se fija en el propio ícono.
|
|
56
|
-
*
|
|
57
|
-
* `rotate` gira el mismo glyph en vez de requerir un ícono aparte por
|
|
58
|
-
* dirección — útil para un chevron que representa un estado con más de una
|
|
59
|
-
* orientación (ej. orden ascendente/descendente de una columna, un panel
|
|
60
|
-
* abierto/cerrado). La rotación transiciona con la misma duración que el
|
|
61
|
-
* resto de las transiciones cortas del design system.
|
|
62
|
-
*
|
|
63
|
-
* <kf-icon name="alert-triangle" size="sm" />
|
|
64
|
-
* <kf-icon name="chevron-down" [rotate]="isOpen() ? 180 : 0" />
|
|
65
|
-
* <kf-button icon="calendar">Reservar hora</kf-button> <!-- ver Button -->
|
|
66
|
-
*/
|
|
67
|
-
declare class Icon {
|
|
68
|
-
readonly name: _angular_core.InputSignal<IconName>;
|
|
69
|
-
readonly size: _angular_core.InputSignal<IconSize>;
|
|
70
|
-
readonly rotate: _angular_core.InputSignal<IconRotation>;
|
|
71
|
-
/**
|
|
72
|
-
* Rellena el glyph (`fill: currentColor`) en vez de dejarlo solo de trazo.
|
|
73
|
-
* Pensado para un estado activo/marcado de un ícono usado como toggle (ej.
|
|
74
|
-
* "fijar" un panel) — un cambio de COLOR únicamente puede no distinguirse
|
|
75
|
-
* lo suficiente en marcas cuyo `--kf-color-secondary` queda cerca del color
|
|
76
|
-
* de texto por default; rellenar el área cambia más píxeles y se percibe
|
|
77
|
-
* con más contraste aunque el tono sea similar. No es el default del
|
|
78
|
-
* design system (sigue siendo de trazo, página 6 del PDF) — es opt-in por
|
|
79
|
-
* componente para ese caso puntual.
|
|
80
|
-
*/
|
|
81
|
-
readonly filled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
82
|
-
private readonly document;
|
|
83
|
-
protected readonly pixelSize: _angular_core.Signal<string>;
|
|
84
|
-
constructor();
|
|
85
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Icon, never>;
|
|
86
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Icon, "kf-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "rotate": { "alias": "rotate"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
/**
|
|
90
|
-
* Dos variantes del mismo concepto — acceso rápido a una sección (página
|
|
91
|
-
* 35): "Tile de acceso destacado" (`variant="tile"`, default) es un bloque
|
|
92
|
-
* centrado con ícono grande arriba y título abajo, pensado para una
|
|
93
|
-
* cuadrícula de accesos (ej. "Todos los certificados"). "Fila de documento"
|
|
94
|
-
* (`variant="row"`) es horizontal, con ícono a la izquierda y
|
|
95
|
-
* título+descripción a la derecha, pensada para listas verticales dentro de
|
|
96
|
-
* un `kf-panel` (ej. "Pagos" / "Revisa tu estado de cuenta y realiza pagos.").
|
|
97
|
-
*
|
|
98
|
-
* <kf-action-tile icon="shield-check" title="Todos los certificados" />
|
|
99
|
-
* <kf-action-tile variant="row" icon="download" title="Pagos"
|
|
100
|
-
* description="Revisa tu estado de cuenta y realiza pagos." />
|
|
101
|
-
*/
|
|
102
|
-
declare class ActionTile {
|
|
103
|
-
readonly variant: _angular_core.InputSignal<"tile" | "row">;
|
|
104
|
-
readonly icon: _angular_core.InputSignal<IconName>;
|
|
105
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
106
|
-
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
107
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ActionTile, never>;
|
|
108
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ActionTile, "kf-action-tile", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Marca la barra superior como chrome exclusivo de administradores (página
|
|
113
|
-
* 18) — acento ámbar para diferenciar contexto privilegiado del resto del
|
|
114
|
-
* portal. Dos variantes: etiqueta aislada (pill), o `inline` para usarse
|
|
115
|
-
* dentro de la franja de `kf-portal-header` (fondo oscuro, texto ámbar).
|
|
116
|
-
*
|
|
117
|
-
* <kf-admin-badge />
|
|
118
|
-
* <kf-admin-badge inline />
|
|
119
|
-
*/
|
|
120
|
-
declare class AdminBadge {
|
|
121
|
-
/** Para usarse dentro de una superficie oscura (ej. la franja de `kf-portal-header`). */
|
|
122
|
-
readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
123
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdminBadge, never>;
|
|
124
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdminBadge, "kf-admin-badge", never, { "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
/**
|
|
128
|
-
* Envuelve un `<button>` nativo: mantiene teclado, foco y submit de formulario.
|
|
129
|
-
* Como es un elemento personalizado, ningún atributo ARIA puesto en el host
|
|
130
|
-
* llega al `<button>` interno — por eso `disabled`, `type`, `ariaLabel`,
|
|
131
|
-
* `ariaExpanded` y `ariaPressed` se reenvían a mano.
|
|
132
|
-
*
|
|
133
|
-
* Seis variantes: `primary`, `secondary`, `ghost`, `outline`, `danger`,
|
|
134
|
-
* `surface`. Tres tamaños (`sm`/`md`/`lg`). `icon` agrega un glifo antes del
|
|
135
|
-
* label proyectado; `block` estira el botón a todo el ancho de su contenedor.
|
|
136
|
-
*
|
|
137
|
-
* `surface` es la variante neutra pensada para flotar SOBRE contenido
|
|
138
|
-
* variable (ej. los controles de `kf-map` sobre un mapa que cambia de tema:
|
|
139
|
-
* calles, satélite, oscuro) — fondo sólido de `--kf-color-surface` con
|
|
140
|
-
* sombra, en vez de depender de contraste contra lo que haya debajo (que
|
|
141
|
-
* `ghost`/`outline`, transparentes, no pueden garantizar ahí).
|
|
142
|
-
*
|
|
143
|
-
* `shape="circle"` vuelve el botón cuadrado con esquina `pill` (mismo ancho
|
|
144
|
-
* y alto, sin padding horizontal extra) — pensado para uso solo-ícono
|
|
145
|
-
* (`icon` sin contenido proyectado): combinarlo con un label visible
|
|
146
|
-
* descentra el ícono, no es el caso de uso.
|
|
147
|
-
*
|
|
148
|
-
* `(click)` no se reenvía: burbujea del botón interno al host solo.
|
|
149
|
-
*
|
|
150
|
-
* `loading` reemplaza el contenido proyectado por `kf-spinner` y fuerza
|
|
151
|
-
* `disabled`.
|
|
152
|
-
*
|
|
153
|
-
* Botón solo-ícono (sin label visible): pasar `ariaLabel` en vez de dejar el
|
|
154
|
-
* botón sin nombre accesible.
|
|
155
|
-
*
|
|
156
|
-
* <kf-button (click)="save()">Guardar</kf-button>
|
|
157
|
-
* <kf-button variant="danger" (click)="remove()">Eliminar</kf-button>
|
|
158
|
-
* <kf-button size="sm" icon="external-link" ariaLabel="Expandir" (click)="expand()" />
|
|
159
|
-
* <kf-button type="submit" [loading]="submitting()">Ingresar</kf-button>
|
|
160
|
-
* <kf-button variant="surface" shape="circle" icon="plus" ariaLabel="Acercar" [ariaPressed]="false" />
|
|
161
|
-
*/
|
|
162
|
-
declare class Button {
|
|
163
|
-
readonly variant: _angular_core.InputSignal<"primary" | "secondary" | "ghost" | "outline" | "danger" | "surface">;
|
|
164
|
-
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
165
|
-
readonly shape: _angular_core.InputSignal<"rect" | "circle">;
|
|
166
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
167
|
-
/** Igual al default nativo: hace submit dentro de un `<form>`. */
|
|
168
|
-
readonly type: _angular_core.InputSignal<"button" | "submit" | "reset">;
|
|
169
|
-
/** Ícono líder, renderizado con `kf-icon` antes del label proyectado. */
|
|
170
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
171
|
-
/** Estira el botón a todo el ancho de su contenedor. */
|
|
172
|
-
readonly block: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
173
|
-
/** Reemplaza el contenido proyectado por `kf-spinner` y fuerza `disabled`. */
|
|
174
|
-
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
175
|
-
/** Nombre accesible del botón interno — obligatorio quien no proyecta
|
|
176
|
-
* ningún texto visible (botón solo-ícono), porque el host no lo reenvía. */
|
|
177
|
-
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
178
|
-
/** Estado expandido/colapsado para un botón toggle — mismo motivo que
|
|
179
|
-
* `ariaLabel`, el host no reenvía atributos ARIA al `<button>` interno. */
|
|
180
|
-
readonly ariaExpanded: _angular_core.InputSignal<boolean | undefined>;
|
|
181
|
-
/** Estado presionado/no presionado para un botón toggle real (ej. "seguir
|
|
182
|
-
* vehículo" activo/inactivo) — distinto semánticamente de `ariaExpanded`
|
|
183
|
-
* (que es para mostrar/ocultar un panel), mismo motivo de reenvío manual.
|
|
184
|
-
* Con `icon`, presionado (`true`) rellena el glyph (`kf-icon[filled]`) en
|
|
185
|
-
* vez de solo cambiar de color — un toggle solo-ícono necesita esa señal
|
|
186
|
-
* más fuerte para leerse activo, y así ningún consumidor tiene que
|
|
187
|
-
* acordarse de pedirlo aparte. */
|
|
188
|
-
readonly ariaPressed: _angular_core.InputSignal<boolean | undefined>;
|
|
189
|
-
/** `ghost`/`outline`/`surface` no tienen fondo oscuro sólido — el anillo
|
|
190
|
-
* del spinner por defecto ya se lee bien ahí sin variante propia
|
|
191
|
-
* (`surface` es fondo claro con texto oscuro, mismo motivo que `outline`). */
|
|
192
|
-
protected readonly hasSolidFill: _angular_core.Signal<boolean>;
|
|
193
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Button, never>;
|
|
194
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Button, "kf-button", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "shape": { "alias": "shape"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "block": { "alias": "block"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaExpanded": { "alias": "ariaExpanded"; "required": false; "isSignal": true; }; "ariaPressed": { "alias": "ariaPressed"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
type AlertTone = 'info' | 'ok' | 'warn' | 'error';
|
|
198
|
-
/**
|
|
199
|
-
* Banner contextual que vive dentro del flujo: validaciones, avisos de
|
|
200
|
-
* vencimiento, confirmaciones. Persiste hasta que se descarta o hasta que la
|
|
201
|
-
* condición que lo causó desaparece — para feedback efímero está el toast.
|
|
202
|
-
*
|
|
203
|
-
* `open` es two-way: el botón de cerrar lo pone en `false` y el componente
|
|
204
|
-
* deja de renderizar. El consumidor puede volver a abrirlo poniéndolo en
|
|
205
|
-
* `true` (ej. cuando la validación falla otra vez).
|
|
206
|
-
*
|
|
207
|
-
* <kf-alert tone="warn" title="SOAT por vencer">Vence el 15/08.</kf-alert>
|
|
208
|
-
* <kf-alert tone="ok" [(open)]="saved" dismissible>Pago registrado.</kf-alert>
|
|
209
|
-
*/
|
|
210
|
-
declare class Alert {
|
|
211
|
-
readonly tone: _angular_core.InputSignal<AlertTone>;
|
|
212
|
-
/** Línea en negrita arriba del mensaje. Vacío deja solo el contenido proyectado. */
|
|
213
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
214
|
-
readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
215
|
-
/** Visibilidad, two-way: `[(open)]="hasError"`. */
|
|
216
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
217
|
-
/**
|
|
218
|
-
* `alert` interrumpe al lector de pantalla; se reserva para error/warn.
|
|
219
|
-
* Los avisos informativos se anuncian sin cortar lo que se esté leyendo.
|
|
220
|
-
*/
|
|
221
|
-
protected readonly ariaRole: _angular_core.Signal<"alert" | "status">;
|
|
222
|
-
protected readonly toneIcon: _angular_core.Signal<IconName>;
|
|
223
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Alert, never>;
|
|
224
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Alert, "kf-alert", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
type AlertRowTone = 'warn' | 'error';
|
|
228
|
-
/**
|
|
229
|
-
* Fila clickeable de una lista de pendientes/alertas: ícono circular con
|
|
230
|
-
* tono semántico, texto de una línea, chevron al final. Pensada para
|
|
231
|
-
* agrupar varias dentro de un `kf-card` (ej. "Tus pendientes" del
|
|
232
|
-
* dashboard) — no incluye el contenedor en sí.
|
|
233
|
-
*
|
|
234
|
-
* <kf-alert-row icon="file" tone="warn" text="2 cotizaciones esperan tu aprobación" (rowClick)="onNavigate('cotizaciones')" />
|
|
235
|
-
*/
|
|
236
|
-
declare class AlertRow {
|
|
237
|
-
readonly icon: _angular_core.InputSignal<IconName>;
|
|
238
|
-
readonly tone: _angular_core.InputSignal<AlertRowTone>;
|
|
239
|
-
readonly text: _angular_core.InputSignal<string>;
|
|
240
|
-
readonly rowClick: _angular_core.OutputEmitterRef<void>;
|
|
241
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AlertRow, never>;
|
|
242
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AlertRow, "kf-alert-row", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": true; "isSignal": true; }; }, { "rowClick": "rowClick"; }, never, never, true, never>;
|
|
243
|
-
}
|
|
244
|
-
|
|
245
|
-
/**
|
|
246
|
-
* Marca el contenido que va en el slot de SSO de `kf-auth-layout` (típico:
|
|
247
|
-
* un `kf-sso-button`, o varios si el ecosistema suma más de un proveedor).
|
|
248
|
-
* `AuthLayout` la detecta vía `contentChild` para decidir si renderiza el
|
|
249
|
-
* separador "o" entre el bloque de SSO y el formulario tradicional
|
|
250
|
-
* proyectado en el slot por defecto — sin este marcador, `AuthLayout`
|
|
251
|
-
* tendría que adivinar si hubo proyección leyendo el DOM a mano.
|
|
252
|
-
*
|
|
253
|
-
* <kf-auth-layout brand="Mi Portal">
|
|
254
|
-
* <div kfAuthLayoutSso>
|
|
255
|
-
* <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
|
|
256
|
-
* </div>
|
|
257
|
-
* <form ...>...</form>
|
|
258
|
-
* </kf-auth-layout>
|
|
259
|
-
*/
|
|
260
|
-
declare class AuthLayoutSso {
|
|
261
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayoutSso, never>;
|
|
262
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<AuthLayoutSso, "[kfAuthLayoutSso]", never, {}, {}, never, never, true, never>;
|
|
263
|
-
}
|
|
264
|
-
|
|
265
|
-
type AuthLayoutBackground = 'plain' | 'gradient' | 'pattern';
|
|
266
|
-
/**
|
|
267
|
-
* Layout a pantalla completa para pantallas de autenticación (login,
|
|
268
|
-
* recuperar contraseña, confirmación de envío) — panel de marca a la
|
|
269
|
-
* izquierda, contenido libre a la derecha en desktop; en mobile el panel de
|
|
270
|
-
* marca se oculta y un logo compacto queda visible arriba del formulario.
|
|
271
|
-
*
|
|
272
|
-
* Resuelve solo el "cascarón": cada portal arma su propio `<form>` con los
|
|
273
|
-
* componentes de la librería y lo proyecta en el slot por defecto.
|
|
274
|
-
*
|
|
275
|
-
* <kf-auth-layout
|
|
276
|
-
* brand="Mi Portal"
|
|
277
|
-
* brandLogoSrc="images/mi-portal-logo-white.png"
|
|
278
|
-
* brandLogoMobileSrc="images/mi-portal-logo-black.png"
|
|
279
|
-
* brandTagline="Frase corta de marca, propia de cada portal."
|
|
280
|
-
* >
|
|
281
|
-
* <form (ngSubmit)="onSubmit()">
|
|
282
|
-
* <kf-input label="Correo" type="email" />
|
|
283
|
-
* <kf-input label="Contraseña" type="password" toggleable />
|
|
284
|
-
* <kf-button type="submit">Ingresar</kf-button>
|
|
285
|
-
* </form>
|
|
286
|
-
* </kf-auth-layout>
|
|
287
|
-
*
|
|
288
|
-
* `backgroundVariant` controla la superficie del panel derecho:
|
|
289
|
-
* `'plain'` (fondo liso, comportamiento histórico), `'gradient'` (default —
|
|
290
|
-
* degradé sutil derivado de `--kf-color-primary`/`--kf-color-surface` vía
|
|
291
|
-
* `color-mix()`, ningún color hardcodeado) o `'pattern'` (el mismo degradé
|
|
292
|
-
* más una textura de puntos, también resuelta con tokens). Los tres se
|
|
293
|
-
* resuelven contra los tokens de tema ACTIVOS — cambiar de tema
|
|
294
|
-
* (`andes-maq`, `divemotor-star`, `kaufmann-ar`, futuros) no requiere tocar
|
|
295
|
-
* este componente ni pasarle un color a mano.
|
|
296
|
-
*
|
|
297
|
-
* `card`, en `false` por defecto (comportamiento histórico: el contenido
|
|
298
|
-
* proyectado flota sin superficie propia), envuelve el slot por defecto con
|
|
299
|
-
* la misma superficie de `kf-card` (fondo, borde, sombra, radio) para que
|
|
300
|
-
* el formulario deje de verse suelto sobre el fondo del panel.
|
|
301
|
-
*
|
|
302
|
-
* `title`/`subtitle` renderizan un encabezado de bienvenida DENTRO de la
|
|
303
|
-
* card, antes que cualquier otro contenido (jerarquía ya resuelta:
|
|
304
|
-
* `title-lg` + `body-muted`, ver `Text.ts`) — así ningún consumidor tiene
|
|
305
|
-
* que adivinar la variante de `kf-text` correcta ni terminar con un
|
|
306
|
-
* "Iniciar sesión" repetido y suelto dentro de su propio `<form>`. Sin
|
|
307
|
-
* `title`, no se renderiza ningún encabezado (comportamiento histórico).
|
|
308
|
-
*
|
|
309
|
-
* El slot `[kfAuthLayoutSso]` (ver `AuthLayoutSso`) es para el patrón
|
|
310
|
-
* "SSO primero, credenciales como alternativa secundaria" — típicamente un
|
|
311
|
-
* `kf-sso-button`. Cuando hay contenido ahí, `AuthLayout` resuelve el
|
|
312
|
-
* separador "o" automáticamente entre ese bloque y el contenido por
|
|
313
|
-
* defecto; sin ese slot, nada cambia frente al comportamiento actual.
|
|
314
|
-
*
|
|
315
|
-
* <kf-auth-layout
|
|
316
|
-
* brand="Mi Portal"
|
|
317
|
-
* backgroundVariant="pattern"
|
|
318
|
-
* card
|
|
319
|
-
* title="Iniciar sesión"
|
|
320
|
-
* subtitle="Usa tu cuenta corporativa o ingresa con contraseña"
|
|
321
|
-
* >
|
|
322
|
-
* <div kfAuthLayoutSso>
|
|
323
|
-
* <kf-sso-button provider="microsoft" (click)="loginWithMicrosoft()" />
|
|
324
|
-
* </div>
|
|
325
|
-
* <form (ngSubmit)="onSubmit()">
|
|
326
|
-
* <kf-input label="Correo" type="email" />
|
|
327
|
-
* <kf-input label="Contraseña" type="password" toggleable />
|
|
328
|
-
* <kf-button type="submit">Ingresar</kf-button>
|
|
329
|
-
* </form>
|
|
330
|
-
* </kf-auth-layout>
|
|
331
|
-
*/
|
|
332
|
-
declare class AuthLayout {
|
|
333
|
-
/** Nombre de marca/portal — wordmark de respaldo si no hay logo, y `alt` de ambos logos. */
|
|
334
|
-
readonly brand: _angular_core.InputSignal<string>;
|
|
335
|
-
/** Logo en blanco para el panel oscuro de desktop. Sin esto, se muestra `brand()` como wordmark. */
|
|
336
|
-
readonly brandLogoSrc: _angular_core.InputSignal<string | undefined>;
|
|
337
|
-
/** Frase corta bajo el logo. */
|
|
338
|
-
readonly brandTagline: _angular_core.InputSignal<string | undefined>;
|
|
339
|
-
/** Logo compacto para mobile, sobre fondo claro. Sin esto, reutiliza `brandLogoSrc`. */
|
|
340
|
-
readonly brandLogoMobileSrc: _angular_core.InputSignal<string | undefined>;
|
|
341
|
-
/** Superficie del panel derecho. Default `'gradient'`; `'plain'` preserva el fondo liso histórico. */
|
|
342
|
-
readonly backgroundVariant: _angular_core.InputSignal<AuthLayoutBackground>;
|
|
343
|
-
/** Envuelve el contenido proyectado con la superficie de `kf-card` (fondo, borde, sombra). Default `false` — preserva el comportamiento histórico. */
|
|
344
|
-
readonly card: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
345
|
-
/** Título del encabezado dentro de la card (`title-lg`). Sin este input, no se renderiza ningún encabezado. */
|
|
346
|
-
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
347
|
-
/** Subtítulo del encabezado (`body-muted`), debajo de `title`. Sin efecto si `title` no está presente. */
|
|
348
|
-
readonly subtitle: _angular_core.InputSignal<string | undefined>;
|
|
349
|
-
/** Presencia de contenido en el slot `[kfAuthLayoutSso]` — controla si se renderiza el separador "o". */
|
|
350
|
-
protected readonly ssoContent: _angular_core.Signal<AuthLayoutSso | undefined>;
|
|
351
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AuthLayout, never>;
|
|
352
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AuthLayout, "kf-auth-layout", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "brandLogoSrc": { "alias": "brandLogoSrc"; "required": false; "isSignal": true; }; "brandTagline": { "alias": "brandTagline"; "required": false; "isSignal": true; }; "brandLogoMobileSrc": { "alias": "brandLogoMobileSrc"; "required": false; "isSignal": true; }; "backgroundVariant": { "alias": "backgroundVariant"; "required": false; "isSignal": true; }; "card": { "alias": "card"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; }, {}, ["ssoContent"], ["[kfAuthLayoutSso]", "*"], true, never>;
|
|
353
|
-
}
|
|
354
|
-
|
|
355
|
-
/**
|
|
356
|
-
* Avatar de usuario: muestra una foto (`src`) o, si no hay foto, las
|
|
357
|
-
* iniciales (`initials`) sobre un fondo con gradiente de marca. `round`
|
|
358
|
-
* controla la forma: circular (por defecto) o cuadrada con radio.
|
|
359
|
-
*
|
|
360
|
-
* Con `pill`, el avatar se envuelve en una pastilla azul con un chevron a la
|
|
361
|
-
* derecha — la "pill de usuario (header)" de la página 18 del design system,
|
|
362
|
-
* usada en la barra de sesión del Portal Header.
|
|
363
|
-
*
|
|
364
|
-
* <kf-avatar initials="JD" />
|
|
365
|
-
* <kf-avatar src="https://…/foto.jpg" [round]="false" />
|
|
366
|
-
* <kf-avatar initials="TS" pill />
|
|
367
|
-
*/
|
|
368
|
-
declare class Avatar {
|
|
369
|
-
readonly initials: _angular_core.InputSignal<string | undefined>;
|
|
370
|
-
readonly src: _angular_core.InputSignal<string | undefined>;
|
|
371
|
-
readonly round: _angular_core.InputSignal<boolean>;
|
|
372
|
-
/** Envuelve el avatar en la pastilla de sesión del header, con chevron. */
|
|
373
|
-
readonly pill: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
374
|
-
/** Limita a 2 caracteres para que quepan cómodos dentro del círculo. */
|
|
375
|
-
readonly displayInitials: _angular_core.Signal<string>;
|
|
376
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Avatar, never>;
|
|
377
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Avatar, "kf-avatar", never, { "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "round": { "alias": "round"; "required": false; "isSignal": true; }; "pill": { "alias": "pill"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
378
|
-
}
|
|
379
|
-
|
|
380
|
-
/**
|
|
381
|
-
* Pill chica de fondo suave para un conteo, tag o estado liviano puntual —
|
|
382
|
-
* no un proceso en vivo (para eso, `kf-status-pill`, con borde en vez de
|
|
383
|
-
* relleno). Fondo soft y texto del tono fuerte según `tone`; `service` usa
|
|
384
|
-
* el color base porque `secondary` todavía no tiene variante `-strong`.
|
|
385
|
-
* `variant` es un eje ortogonal a `tone` (mismo patrón que `kf-button`):
|
|
386
|
-
* `soft` (default) es el fondo de color sólido de siempre; `glass` es
|
|
387
|
-
* translúcido con desenfoque, pensado para un badge sobre una superficie
|
|
388
|
-
* de marca (ej. un header navy), no para un banner suelto. En `glass` el
|
|
389
|
-
* punto (`dot`) usa el color BASE de cada tono, no `-strong` — ese último
|
|
390
|
-
* está pensado para texto legible sobre el fondo pastel de `soft` y se ve
|
|
391
|
-
* apagado sobre una superficie translúcida/oscura.
|
|
392
|
-
*/
|
|
393
|
-
declare class Badge {
|
|
394
|
-
readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error" | "info" | "service">;
|
|
395
|
-
readonly variant: _angular_core.InputSignal<"soft" | "glass">;
|
|
396
|
-
readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
397
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Badge, never>;
|
|
398
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Badge, "kf-badge", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
399
|
-
}
|
|
400
|
-
|
|
401
|
-
interface BreadcrumbItem {
|
|
402
|
-
label: string;
|
|
403
|
-
/** Destino del link. Sin `href` el nivel se rinde como texto plano. */
|
|
404
|
-
href?: string;
|
|
405
|
-
}
|
|
406
|
-
/**
|
|
407
|
-
* Ruta de navegación de las vistas internas. El último nivel es la página
|
|
408
|
-
* actual: nunca es link y lleva `aria-current="page"`, aunque traiga `href`.
|
|
409
|
-
*
|
|
410
|
-
* Se rinde como `<nav><ol>` — es una lista ordenada de ancestros, y eso es lo
|
|
411
|
-
* que los lectores de pantalla anuncian ("navegación, lista de 3 elementos").
|
|
412
|
-
*
|
|
413
|
-
* Para apps con router: escuchar `itemClick` y llamar
|
|
414
|
-
* `event.preventDefault()` antes de `router.navigate(...)`. El `href` se
|
|
415
|
-
* mantiene igual para que click-medio, "abrir en pestaña nueva" y el hover
|
|
416
|
-
* de la barra de estado sigan funcionando.
|
|
417
|
-
*
|
|
418
|
-
* <kf-breadcrumb [items]="[{ label: 'Inicio', href: '/' }, { label: 'Mis vehículos' }]" />
|
|
419
|
-
*/
|
|
420
|
-
declare class Breadcrumb {
|
|
421
|
-
readonly items: _angular_core.InputSignal<BreadcrumbItem[]>;
|
|
422
|
-
/**
|
|
423
|
-
* Click en un nivel con `href`. Incluye el `MouseEvent` para que un
|
|
424
|
-
* consumidor con router pueda cortar la navegación nativa. No se depende
|
|
425
|
-
* de `@angular/router` acá — sería un peer dep nuevo en la librería para
|
|
426
|
-
* lo que el consumidor resuelve en una línea.
|
|
427
|
-
*/
|
|
428
|
-
readonly itemClick: _angular_core.OutputEmitterRef<{
|
|
429
|
-
item: BreadcrumbItem;
|
|
430
|
-
index: number;
|
|
431
|
-
event: MouseEvent;
|
|
432
|
-
}>;
|
|
433
|
-
protected readonly lastIndex: _angular_core.Signal<number>;
|
|
434
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Breadcrumb, never>;
|
|
435
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Breadcrumb, "kf-breadcrumb", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, never, true, never>;
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
/**
|
|
439
|
-
* Una categoría de la barra — el componente no sabe qué significa "pagada"
|
|
440
|
-
* o "vencida", solo dibuja proporciones: `count` decide el ancho relativo
|
|
441
|
-
* del segmento (`flex-grow`) y de la fila de leyenda que lo acompaña.
|
|
442
|
-
* `color` es cualquier valor CSS válido (pensado para tokens `var(--kf-*)`,
|
|
443
|
-
* nunca hex suelto desde el consumidor).
|
|
444
|
-
*/
|
|
445
|
-
interface BucketProgressItem {
|
|
446
|
-
key: string;
|
|
447
|
-
label: string;
|
|
448
|
-
count: number;
|
|
449
|
-
color: string;
|
|
450
|
-
}
|
|
451
|
-
/**
|
|
452
|
-
* Barra de progreso segmentada en categorías proporcionales — generaliza
|
|
453
|
-
* el resumen de "Progreso del plan de pagos" de Pagos y Facturas de OTD
|
|
454
|
-
* (cuotas pagadas/vencidas/próximas/pendientes) sin acoplarse a esas 4
|
|
455
|
-
* categorías puntuales: el consumidor pasa sus propios `items` con
|
|
456
|
-
* `{key, label, count, color}`.
|
|
457
|
-
*
|
|
458
|
-
* Los segmentos son proporcionales por CANTIDAD (`flex-grow: count`), no
|
|
459
|
-
* uno por unidad — con 36 cuotas y 6 pagadas, la barra dibuja 2 anchos
|
|
460
|
-
* distintos (pagado ~17% / resto ~83%), nunca 36 rectángulos idénticos
|
|
461
|
-
* (hallazgo real de UX: con volumen alto, un segmento por unidad se vuelve
|
|
462
|
-
* ilegible). Los `items` con `count: 0` no se dibujan (ni segmento ni
|
|
463
|
-
* fila de leyenda) — no tiene sentido mostrar una categoría vacía.
|
|
464
|
-
*
|
|
465
|
-
* La leyenda debajo reproduce el mismo orden y color que la barra, para
|
|
466
|
-
* que una categoría se pueda mapear a su cantidad de un vistazo (pedido
|
|
467
|
-
* explícito de UX: "posicionar correctamente los labels").
|
|
468
|
-
*
|
|
469
|
-
* <kf-bucket-progress
|
|
470
|
-
* title="Progreso del plan de pagos"
|
|
471
|
-
* [summary]="'6 de 30 cuotas pagadas'"
|
|
472
|
-
* [items]="[
|
|
473
|
-
* { key: 'paid', label: 'pagadas', count: 6, color: 'var(--kf-color-success)' },
|
|
474
|
-
* { key: 'overdue', label: 'vencidas', count: 2, color: 'var(--kf-color-error)' },
|
|
475
|
-
* { key: 'upcoming', label: 'próxima', count: 1, color: 'var(--kf-color-warning)' },
|
|
476
|
-
* { key: 'pending', label: 'pendientes', count: 21, color: 'var(--kf-color-gray-200)' },
|
|
477
|
-
* ]"
|
|
478
|
-
* />
|
|
479
|
-
*/
|
|
480
|
-
declare class BucketProgress {
|
|
481
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
482
|
-
/** Texto libre a la derecha del título (ej. "6 de 30 cuotas pagadas") —
|
|
483
|
-
* el componente no sabe calcular ese resumen, lo recibe hecho. */
|
|
484
|
-
readonly summary: _angular_core.InputSignal<string>;
|
|
485
|
-
readonly items: _angular_core.InputSignal<BucketProgressItem[]>;
|
|
486
|
-
protected readonly visibleItems: _angular_core.Signal<BucketProgressItem[]>;
|
|
487
|
-
protected readonly total: _angular_core.Signal<number>;
|
|
488
|
-
/** Descripción accesible de la barra completa — un solo `role="img"`
|
|
489
|
-
* con el desglose en texto, en vez de que cada segmento individual
|
|
490
|
-
* compita por foco/lectura de screen reader. */
|
|
491
|
-
protected readonly ariaLabel: _angular_core.Signal<string>;
|
|
492
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<BucketProgress, never>;
|
|
493
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<BucketProgress, "kf-bucket-progress", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "summary": { "alias": "summary"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
/**
|
|
497
|
-
* Contenedor base con esquinas redondeadas y sombra sutil — la base visual
|
|
498
|
-
* de paneles, tarjetas de métrica, tablas y bloques de contenido de todo el
|
|
499
|
-
* portal (ver página 14 del design system).
|
|
500
|
-
*
|
|
501
|
-
* Piensa este componente como el "cimiento": no impone estructura interna
|
|
502
|
-
* más allá de dos slots opcionales alrededor del contenido libre —
|
|
503
|
-
* `[media]` para una imagen/ícono destacado arriba, y `[actions]` para una
|
|
504
|
-
* fila de botones al pie, separada por una línea. El contenido por defecto
|
|
505
|
-
* (sin selector) queda en el medio, sin ningún layout forzado, para que
|
|
506
|
-
* cualquier composición (una métrica, una lista, un formulario) pueda vivir
|
|
507
|
-
* dentro sin pelear con estilos propios del `Card`.
|
|
508
|
-
*
|
|
509
|
-
* `gap` controla el espacio entre los hijos directos del cuerpo — `md`
|
|
510
|
-
* (default) separa bloques con peso propio (un `kf-section-header`
|
|
511
|
-
* seguido de datos, por ejemplo); `xs`/`sm` para texto corrido o bloques
|
|
512
|
-
* más compactos, `lg`/`xl` para composiciones con más aire entre secciones.
|
|
513
|
-
*
|
|
514
|
-
* <kf-card>
|
|
515
|
-
* <kf-section-header title="Cliente" />
|
|
516
|
-
* <dl>…</dl>
|
|
517
|
-
* </kf-card>
|
|
518
|
-
* <kf-card gap="xs">Texto corrido, sin bloques que separar</kf-card>
|
|
519
|
-
* <kf-card flush>Sin sombra — para superficies ya delimitadas por otra card</kf-card>
|
|
520
|
-
* <kf-card>
|
|
521
|
-
* <img kf-card-media src="..." alt="" />
|
|
522
|
-
* <h3>Título</h3>
|
|
523
|
-
* <p>Descripción</p>
|
|
524
|
-
* <div kf-card-actions>
|
|
525
|
-
* <kf-button variant="ghost">Cancelar</kf-button>
|
|
526
|
-
* <kf-button>Guardar</kf-button>
|
|
527
|
-
* </div>
|
|
528
|
-
* </kf-card>
|
|
529
|
-
*/
|
|
530
|
-
declare class Card {
|
|
531
|
-
/** Quita la sombra — para cards anidadas dentro de otra superficie ya elevada. */
|
|
532
|
-
readonly flush: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
533
|
-
/** Espacio entre los hijos directos del cuerpo. `md` es el default. */
|
|
534
|
-
readonly gap: _angular_core.InputSignal<"sm" | "md" | "lg" | "xs" | "xl">;
|
|
535
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Card, never>;
|
|
536
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Card, "kf-card", never, { "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; }, {}, never, ["[kf-card-media]", "*", "[kf-card-actions]"], true, never>;
|
|
537
|
-
}
|
|
538
|
-
|
|
539
|
-
/**
|
|
540
|
-
* Slide individual de un `kf-carousel`. Es un contenedor mínimo: solo existe
|
|
541
|
-
* para que el carrusel pueda detectar, vía `contentChildren`, cuántos slides
|
|
542
|
-
* se proyectaron y en qué orden — el contenido real es responsabilidad total
|
|
543
|
-
* de quien lo consume.
|
|
544
|
-
*
|
|
545
|
-
* <kf-carousel-slide>...</kf-carousel-slide>
|
|
546
|
-
*/
|
|
547
|
-
declare class CarouselSlide {
|
|
548
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CarouselSlide, never>;
|
|
549
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CarouselSlide, "kf-carousel-slide", never, {}, {}, never, ["*"], true, never>;
|
|
550
|
-
}
|
|
551
|
-
|
|
552
|
-
/**
|
|
553
|
-
* Carrusel de slides con flechas, dots y autoplay opcional.
|
|
554
|
-
*
|
|
555
|
-
* La spec original de React recibe `slides` como un array de nodos React.
|
|
556
|
-
* En Angular eso no tiene equivalente directo: en vez de forzar un array de
|
|
557
|
-
* datos crudos, cada slide se proyecta como contenido declarativo mediante
|
|
558
|
-
* un `kf-carousel-slide` hijo, y el carrusel los detecta con
|
|
559
|
-
* `contentChildren(CarouselSlide)`. Esto evita depender de un renderer de
|
|
560
|
-
* nodos y deja que cada slide use plantillas Angular normales (bindings,
|
|
561
|
-
* `@if`, `@for`, etc.) tal como se espera en este ecosistema.
|
|
562
|
-
*
|
|
563
|
-
* <kf-carousel [autoplay]="true" [interval]="4000" (indexChange)="onIndex($event)">
|
|
564
|
-
* <kf-carousel-slide>...</kf-carousel-slide>
|
|
565
|
-
* <kf-carousel-slide>...</kf-carousel-slide>
|
|
566
|
-
* </kf-carousel>
|
|
567
|
-
*/
|
|
568
|
-
declare class Carousel implements AfterContentInit {
|
|
569
|
-
readonly autoplay: _angular_core.InputSignal<boolean>;
|
|
570
|
-
readonly interval: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
571
|
-
readonly indexChange: _angular_core.OutputEmitterRef<number>;
|
|
572
|
-
readonly slides: _angular_core.Signal<readonly CarouselSlide[]>;
|
|
573
|
-
private readonly activeIndexSignal;
|
|
574
|
-
readonly activeIndex: _angular_core.Signal<number>;
|
|
575
|
-
private readonly destroyRef;
|
|
576
|
-
private timer;
|
|
577
|
-
private autoplayPaused;
|
|
578
|
-
ngAfterContentInit(): void;
|
|
579
|
-
next(): void;
|
|
580
|
-
previous(): void;
|
|
581
|
-
goTo(index: number): void;
|
|
582
|
-
pauseAutoplay(): void;
|
|
583
|
-
resumeAutoplay(): void;
|
|
584
|
-
private startAutoplay;
|
|
585
|
-
private stopAutoplay;
|
|
586
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Carousel, never>;
|
|
587
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Carousel, "kf-carousel", never, { "autoplay": { "alias": "autoplay"; "required": false; "isSignal": true; }; "interval": { "alias": "interval"; "required": false; "isSignal": true; }; }, { "indexChange": "indexChange"; }, ["slides"], ["*"], true, never>;
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
/**
|
|
591
|
-
* Checkbox accesible con soporte de estado "indeterminate".
|
|
592
|
-
*
|
|
593
|
-
* `indeterminate` no existe como atributo HTML: el navegador solo lo expone
|
|
594
|
-
* como propiedad del elemento nativo, así que se aplica a mano sobre el
|
|
595
|
-
* `<input>` interno vía `viewChild` + `effect` cada vez que cambia el input.
|
|
596
|
-
*
|
|
597
|
-
* Implementa `ControlValueAccessor` para poder usarse con `formControlName` /
|
|
598
|
-
* `ngModel` igual que un checkbox nativo. En ese modo, `writeValue` controla
|
|
599
|
-
* el DOM directamente y el input `checked` (pensado para binding manual sin
|
|
600
|
-
* forms) queda en su valor por defecto — igual que `disabled` combina el
|
|
601
|
-
* input signal con `setDisabledState` en el resto de la librería.
|
|
602
|
-
*
|
|
603
|
-
* `invalid` pinta el recuadro en rojo y setea `aria-invalid` en el `<input>`
|
|
604
|
-
* nativo — mismo mecanismo que `Input.invalid`, para el caso típico de un
|
|
605
|
-
* checkbox obligatorio (ej. "Acepto términos y condiciones") sin marcar.
|
|
606
|
-
*
|
|
607
|
-
* <kf-checkbox label="Aceptar términos" [(checked)]="accepted" />
|
|
608
|
-
* <kf-checkbox label="Seleccionar todo" [indeterminate]="isPartial()" />
|
|
609
|
-
* <kf-checkbox label="Notificaciones" formControlName="notifications" />
|
|
610
|
-
* <kf-checkbox label="Acepto los términos y condiciones" [invalid]="submitted() && !accepted()" />
|
|
611
|
-
*/
|
|
612
|
-
declare class Checkbox implements ControlValueAccessor {
|
|
613
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
614
|
-
readonly checked: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
615
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
616
|
-
readonly indeterminate: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
617
|
-
/** Recuadro en rojo + aria-invalid — ej. checkbox obligatorio sin marcar. */
|
|
618
|
-
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
619
|
-
readonly checkedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
620
|
-
private readonly inputRef;
|
|
621
|
-
/** Callbacks registrados por Forms; no-op hasta que registerOnChange/Touched las reemplacen. */
|
|
622
|
-
private onChangeFn;
|
|
623
|
-
private onTouchedFn;
|
|
624
|
-
constructor();
|
|
625
|
-
onChange(event: Event): void;
|
|
626
|
-
onTouched(): void;
|
|
627
|
-
writeValue(value: boolean): void;
|
|
628
|
-
registerOnChange(fn: (value: boolean) => void): void;
|
|
629
|
-
registerOnTouched(fn: () => void): void;
|
|
630
|
-
setDisabledState?(isDisabled: boolean): void;
|
|
631
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Checkbox, never>;
|
|
632
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Checkbox, "kf-checkbox", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "checked": { "alias": "checked"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
|
|
633
|
-
}
|
|
634
|
-
|
|
635
|
-
/**
|
|
636
|
-
* Chip de fondo suave con un punto líder que indica estado. Pensado
|
|
637
|
-
* principalmente para celdas de tabla (estado de fila), pero utilizable
|
|
638
|
-
* en cualquier lugar donde se necesite una etiqueta de estado compacta.
|
|
639
|
-
*
|
|
640
|
-
* <kf-chip tone="warn">Pendiente</kf-chip>
|
|
641
|
-
* <kf-chip tone="ok">Aprobado</kf-chip>
|
|
642
|
-
* <kf-chip [dot]="false">4 Unidades</kf-chip>
|
|
643
|
-
*
|
|
644
|
-
* `dot` (default `true`) oculta el punto cuando el chip muestra un DATO
|
|
645
|
-
* (ej. una cantidad — "4 Unidades") y no un ESTADO — antes forzaba a cada
|
|
646
|
-
* portal a reimplementar el mismo patrón "pill con ícono + texto sin punto
|
|
647
|
-
* de estado" a mano (visto 2-3 veces idéntico en `web-otd-frontend`:
|
|
648
|
-
* `quotes-grid.html`/`quote-detail.html` para el conteo de unidades).
|
|
649
|
-
*
|
|
650
|
-
* Nota: la spec original define la unión de tonos como "ok" | "warn" |
|
|
651
|
-
* "error" | "neutral". Internamente se mapean a los tokens semánticos de
|
|
652
|
-
* projects/ui/src/tokens/base.css: ok -> success, warn -> warning,
|
|
653
|
-
* error -> error, neutral -> surface/border/text-muted (no existe un
|
|
654
|
-
* token "neutral" dedicado en base.css, así que se arma con los tokens
|
|
655
|
-
* de superficie/borde/texto-muted más cercanos).
|
|
656
|
-
*/
|
|
657
|
-
declare class Chip {
|
|
658
|
-
readonly tone: _angular_core.InputSignal<"neutral" | "ok" | "warn" | "error">;
|
|
659
|
-
readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
660
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Chip, never>;
|
|
661
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Chip, "kf-chip", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
662
|
-
}
|
|
663
|
-
|
|
664
|
-
/**
|
|
665
|
-
* Bloque colapsable genérico: un header clickeable (título + chevron) que
|
|
666
|
-
* expande/colapsa contenido proyectado libre, sin saber nada de lo que hay
|
|
667
|
-
* adentro. Building block para layouts responsive donde un bloque se
|
|
668
|
-
* muestra inline en desktop pero se colapsa en mobile/tablet para ahorrar
|
|
669
|
-
* espacio vertical — el primer caso de uso real es un panel de filtros de
|
|
670
|
-
* tabla que en desktop queda siempre abierto y en mobile arranca cerrado.
|
|
671
|
-
*
|
|
672
|
-
* `expanded` es two-way, mismo patrón que `Drawer.open`: el consumidor
|
|
673
|
-
* decide el estado inicial y puede reaccionar a los cambios, pero el propio
|
|
674
|
-
* click en el header ya alterna el estado sin que el consumidor tenga que
|
|
675
|
-
* cablear un `(click)` manual.
|
|
676
|
-
*
|
|
677
|
-
* <kf-collapsible title="Filtros" [(expanded)]="filtersOpen">
|
|
678
|
-
* ...
|
|
679
|
-
* </kf-collapsible>
|
|
680
|
-
*
|
|
681
|
-
* El ícono chevron es un SVG inline fijo (no una prop `icon` configurable)
|
|
682
|
-
* porque esta librería todavía no tiene un componente `Icon`/sprite
|
|
683
|
-
* compartido — un solo ícono fijo no amerita esperar esa abstracción.
|
|
684
|
-
*/
|
|
685
|
-
declare class Collapsible {
|
|
686
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
687
|
-
readonly expanded: _angular_core.ModelSignal<boolean>;
|
|
688
|
-
private readonly instanceId;
|
|
689
|
-
readonly triggerId: string;
|
|
690
|
-
readonly panelId: string;
|
|
691
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Collapsible, never>;
|
|
692
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Collapsible, "kf-collapsible", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "expanded": { "alias": "expanded"; "required": false; "isSignal": true; }; }, { "expanded": "expandedChange"; }, never, ["*"], true, never>;
|
|
693
|
-
}
|
|
694
|
-
|
|
695
|
-
/** Metadato clave mostrado junto al selector (RUC, identificación, sucursal). */
|
|
696
|
-
interface CompanySelectorMeta {
|
|
697
|
-
label: string;
|
|
698
|
-
value: string;
|
|
699
|
-
}
|
|
700
|
-
/**
|
|
701
|
-
* Conmutador de empresa activa con metadatos clave (página 32) — encabeza
|
|
702
|
-
* la pantalla de inicio del portal. Compone `kf-select` para el propio
|
|
703
|
-
* selector (mismo panel propio, sin `<select>` nativo) y proyecta hasta 3
|
|
704
|
-
* pares label/valor (RUC, Identificación, Sucursal en el ejemplo del PDF).
|
|
705
|
-
*
|
|
706
|
-
* <kf-company-selector
|
|
707
|
-
* label="Selecciona empresa"
|
|
708
|
-
* [companies]="['TRANSPORTES DEL SUR S.A.C.', 'ANDES MAQ LTDA.']"
|
|
709
|
-
* [value]="activeCompany()"
|
|
710
|
-
* (valueChange)="activeCompany.set($event)"
|
|
711
|
-
* [meta]="[
|
|
712
|
-
* { label: 'RUC', value: '20448712359' },
|
|
713
|
-
* { label: 'Identificación', value: '0004002232' },
|
|
714
|
-
* { label: 'Sucursal', value: 'Sucursal Norte' },
|
|
715
|
-
* ]"
|
|
716
|
-
* />
|
|
717
|
-
*/
|
|
718
|
-
declare class CompanySelector {
|
|
719
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
720
|
-
readonly companies: _angular_core.InputSignal<string[]>;
|
|
721
|
-
readonly value: _angular_core.InputSignal<string | undefined>;
|
|
722
|
-
readonly meta: _angular_core.InputSignal<CompanySelectorMeta[]>;
|
|
723
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
724
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CompanySelector, never>;
|
|
725
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CompanySelector, "kf-company-selector", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "companies": { "alias": "companies"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
726
|
-
}
|
|
727
|
-
|
|
728
|
-
/**
|
|
729
|
-
* Popover de "Datos de contacto" de una persona (asesor, ejecutivo — nombre
|
|
730
|
-
* genérico a propósito, sin lógica de negocio de ninguna pantalla concreta
|
|
731
|
-
* adentro). Cada canal (`whatsapp`/`phone`/`email`) se muestra SOLO si
|
|
732
|
-
* viene con dato — nunca los 3 fijos — y si ninguno viene, un estado vacío
|
|
733
|
-
* explícito en vez de un panel a medio llenar. Mismo criterio que ya
|
|
734
|
-
* resolvía `sitio-privado-one-way-frontend` (repo hermano de Chile) para
|
|
735
|
-
* el asesor de taller, ahora como pieza compartida del design system.
|
|
736
|
-
*
|
|
737
|
-
* <kf-contact-popover
|
|
738
|
-
* [name]="advisor.name"
|
|
739
|
-
* [whatsapp]="advisor.whatsapp"
|
|
740
|
-
* [phone]="advisor.phone"
|
|
741
|
-
* [email]="advisor.email"
|
|
742
|
-
* />
|
|
743
|
-
*/
|
|
744
|
-
declare class ContactPopover {
|
|
745
|
-
readonly name: _angular_core.InputSignal<string>;
|
|
746
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
747
|
-
readonly whatsapp: _angular_core.InputSignal<string | null>;
|
|
748
|
-
readonly phone: _angular_core.InputSignal<string | null>;
|
|
749
|
-
readonly email: _angular_core.InputSignal<string | null>;
|
|
750
|
-
protected readonly open: _angular_core.WritableSignal<boolean>;
|
|
751
|
-
protected readonly whatsappHref: _angular_core.Signal<string | null>;
|
|
752
|
-
protected readonly phoneHref: _angular_core.Signal<string | null>;
|
|
753
|
-
protected readonly emailHref: _angular_core.Signal<string | null>;
|
|
754
|
-
protected readonly hasContactMethods: _angular_core.Signal<boolean>;
|
|
755
|
-
protected onToggle(): void;
|
|
756
|
-
protected onClose(): void;
|
|
757
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContactPopover, never>;
|
|
758
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContactPopover, "kf-contact-popover", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "whatsapp": { "alias": "whatsapp"; "required": false; "isSignal": true; }; "phone": { "alias": "phone"; "required": false; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
/**
|
|
762
|
-
* Marcador genérico para contenido aún por definir (página 38) — comunica
|
|
763
|
-
* "contenido disponible para uso" sin parecer un error, a diferencia de
|
|
764
|
-
* `kf-empty-state` (que comunica ausencia real de datos del usuario).
|
|
765
|
-
* Pensado para secciones del portal que un negocio todavía no completó.
|
|
766
|
-
*
|
|
767
|
-
* `compact` reduce el tamaño de la imagen placeholder y omite el badge de
|
|
768
|
-
* pie (segunda variante de la página 38, sin la etiqueta "Contenido
|
|
769
|
-
* disponible para uso" al final).
|
|
770
|
-
*
|
|
771
|
-
* <kf-content-slot title="Contenido disponible"
|
|
772
|
-
* description="Espacio reservado para contenido de Divemotor Perú. Disponible para uso." />
|
|
773
|
-
* <kf-content-slot compact icon="star" title="Contenido disponible"
|
|
774
|
-
* description="Espacio reservado para contenido de Divemotor Perú." />
|
|
775
|
-
*/
|
|
776
|
-
declare class ContentSlot {
|
|
777
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
778
|
-
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
779
|
-
readonly icon: _angular_core.InputSignal<IconName>;
|
|
780
|
-
readonly compact: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
781
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentSlot, never>;
|
|
782
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentSlot, "kf-content-slot", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "compact": { "alias": "compact"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
783
|
-
}
|
|
784
|
-
|
|
785
|
-
/** En qué estado está la sección. */
|
|
786
|
-
type ContentStateKind = 'ready' | 'loading' | 'empty' | 'error';
|
|
787
|
-
/** Cómo se dibuja `loading`. Default `'skeleton'`. */
|
|
788
|
-
type ContentStateLoad = 'skeleton' | 'spinner';
|
|
789
|
-
/**
|
|
790
|
-
* Wrapper de los cuatro estados que toda sección tiene: cargando, con datos,
|
|
791
|
-
* vacía y con error. Un componente en vez de tres `@if` sueltos, porque es
|
|
792
|
-
* siempre el mismo slot el que va rotando entre los cuatro.
|
|
793
|
-
*
|
|
794
|
-
* Con `state="ready"` proyecta el contenido real y desaparece; en los otros
|
|
795
|
-
* tres dibuja el placeholder correspondiente y el contenido no se instancia.
|
|
796
|
-
* No inventa visuales propios: `loading` usa `kf-skeleton` (o `kf-spinner` con
|
|
797
|
-
* `load="spinner"`), y `empty`/`error` usan `kf-empty-state`.
|
|
798
|
-
*
|
|
799
|
-
* Las acciones (reintentar, crear) van en el slot `actions` — se ignoran
|
|
800
|
-
* mientras carga, porque no hay nada que reintentar todavía.
|
|
801
|
-
*
|
|
802
|
-
* <kf-content-state [state]="state()" title="No pudimos cargar tus vehículos"
|
|
803
|
-
* subtitle="Revisá tu conexión e intentá de nuevo.">
|
|
804
|
-
* <kf-button actions (click)="retry()">Reintentar</kf-button>
|
|
805
|
-
* <kf-data-table [columns]="cols" [rows]="rows()" />
|
|
806
|
-
* </kf-content-state>
|
|
807
|
-
*/
|
|
808
|
-
declare class ContentState {
|
|
809
|
-
readonly state: _angular_core.InputSignal<ContentStateKind>;
|
|
810
|
-
/** Forma del estado de carga: silueta (default) o spinner. */
|
|
811
|
-
readonly load: _angular_core.InputSignal<ContentStateLoad>;
|
|
812
|
-
/** Título de `empty`/`error`. Ignorado mientras carga. */
|
|
813
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
814
|
-
readonly subtitle: _angular_core.InputSignal<string>;
|
|
815
|
-
/** Texto al lado del spinner cuando `load="spinner"`. */
|
|
816
|
-
readonly loadingLabel: _angular_core.InputSignal<string>;
|
|
817
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentState, never>;
|
|
818
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentState, "kf-content-state", never, { "state": { "alias": "state"; "required": true; "isSignal": true; }; "load": { "alias": "load"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "loadingLabel": { "alias": "loadingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*", "[actions]"], true, never>;
|
|
819
|
-
}
|
|
820
|
-
|
|
821
|
-
type ContentViewerType = 'image' | 'video' | 'pdf';
|
|
822
|
-
/**
|
|
823
|
-
* Visor a pantalla completa para ampliar una pieza de contenido: imagen,
|
|
824
|
-
* video o PDF (`type="pdf"`, renderizado por el visor nativo del navegador).
|
|
825
|
-
* Mismo mecanismo que `kf-modal` (el `<dialog>` nativo resuelve backdrop,
|
|
826
|
-
* atrapado de foco, top-layer y `Escape`), pero sin panel/título/footer:
|
|
827
|
-
* el contenido ocupa toda la pantalla sobre un backdrop oscuro.
|
|
828
|
-
*
|
|
829
|
-
* `src` acepta lo que venga del backend sin que el consumidor tenga que
|
|
830
|
-
* normalizarlo primero: una URL (`http(s)://`), un data URI ya armado
|
|
831
|
-
* (`data:...`), o base64 crudo (se le antepone el prefijo `data:` según
|
|
832
|
-
* `type`, asumiendo JPEG para imagen, MP4 para video y PDF para pdf). Un PDF
|
|
833
|
-
* solo acepta contenido local (`blob:`, data URI o base64), nunca una URL remota.
|
|
834
|
-
*
|
|
835
|
-
* Lo proyectado con el atributo `actions` (p. ej. un botón de descarga) va en
|
|
836
|
-
* la barra superior, junto al título.
|
|
837
|
-
*
|
|
838
|
-
* <kf-content-viewer [(open)]="viewerOpen" [src]="viewerSrc()" alt="Foto del vehículo" />
|
|
839
|
-
* <kf-content-viewer [(open)]="viewerOpen" type="video" [src]="viewerSrc()" title="Inspección" />
|
|
840
|
-
* <kf-content-viewer [(open)]="viewerOpen" type="pdf" [src]="blobUrl()" title="Contrato">
|
|
841
|
-
* <kf-button actions variant="surface" icon="download" (click)="save()">Descargar</kf-button>
|
|
842
|
-
* </kf-content-viewer>
|
|
843
|
-
*/
|
|
844
|
-
declare class ContentViewer {
|
|
845
|
-
readonly type: _angular_core.InputSignal<ContentViewerType>;
|
|
846
|
-
/** URL, data URI, o base64 crudo — ver JSDoc de la clase. */
|
|
847
|
-
readonly src: _angular_core.InputSignal<string | null>;
|
|
848
|
-
/** Texto alternativo cuando `type="image"`. */
|
|
849
|
-
readonly alt: _angular_core.InputSignal<string>;
|
|
850
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
851
|
-
/** Visibilidad, two-way: `[(open)]="viewerOpen"`. */
|
|
852
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
853
|
-
/** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
|
|
854
|
-
readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
855
|
-
protected readonly titleId: string;
|
|
856
|
-
/** Detecta si `src` ya es una URL o un data URI armado; si no, asume
|
|
857
|
-
* base64 crudo y le antepone el prefijo `data:` correspondiente a `type`
|
|
858
|
-
* — el backend a veces manda una cosa, a veces la otra. */
|
|
859
|
-
protected readonly resolvedSrc: _angular_core.Signal<string | null>;
|
|
860
|
-
protected readonly pdfSrc: _angular_core.Signal<SafeResourceUrl | null>;
|
|
861
|
-
protected readonly fallbackLabel: _angular_core.Signal<string>;
|
|
862
|
-
private readonly dialog;
|
|
863
|
-
private readonly document;
|
|
864
|
-
private readonly sanitizer;
|
|
865
|
-
constructor();
|
|
866
|
-
/** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
|
|
867
|
-
protected onCancel(event: Event): void;
|
|
868
|
-
/**
|
|
869
|
-
* Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
|
|
870
|
-
* propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
|
|
871
|
-
* comparar contra él — no hace falta cortar la propagación en el panel.
|
|
872
|
-
*/
|
|
873
|
-
protected onHostClick(event: MouseEvent): void;
|
|
874
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ContentViewer, never>;
|
|
875
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ContentViewer, "kf-content-viewer", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "src": { "alias": "src"; "required": false; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[actions]"], true, never>;
|
|
876
|
-
}
|
|
877
|
-
|
|
878
|
-
/**
|
|
879
|
-
* Zona que ocupa la columna en la vista de cards. La vista de tabla ignora
|
|
880
|
-
* esto (salvo `media`, que igual se rinde como thumbnail en vez de imprimir
|
|
881
|
-
* la URL):
|
|
882
|
-
* - `media`: thumbnail a la izquierda del encabezado; el valor de la celda se
|
|
883
|
-
* usa como `src` salvo que la columna traiga su `cellTemplates`.
|
|
884
|
-
* - `title`: título del encabezado (ej. la patente/unidad).
|
|
885
|
-
* - `status`: chip/estado al lado del título.
|
|
886
|
-
* - `field` (default): par label/valor en el cuerpo.
|
|
887
|
-
* - `action`: va al pie, separado del cuerpo por una línea.
|
|
888
|
-
*/
|
|
889
|
-
type DataTableCardRole = 'media' | 'title' | 'status' | 'field' | 'action';
|
|
890
|
-
interface DataTableColumn {
|
|
891
|
-
key: string;
|
|
892
|
-
label: string;
|
|
893
|
-
right?: boolean;
|
|
894
|
-
className?: string;
|
|
895
|
-
cardRole?: DataTableCardRole;
|
|
896
|
-
/** Habilita ordenar por esta columna clickeando su header (solo vista
|
|
897
|
-
* tabla — en cards no hay header clickeable). Ciclo asc → desc → sin
|
|
898
|
-
* orden, un click a la vez. */
|
|
899
|
-
sortable?: boolean;
|
|
900
|
-
/** Fija la columna a un borde del scroll horizontal — típicamente la
|
|
901
|
-
* primera (identificador) y/o la última (acciones). Columnas `sticky`
|
|
902
|
-
* del mismo lado deben ser consecutivas y estar en ese extremo del
|
|
903
|
-
* array `columns`; el offset de cada una se calcula sumando el ancho
|
|
904
|
-
* real de las que ya quedaron fijas antes, medido en runtime (no hay
|
|
905
|
-
* forma de conocer el ancho de antemano, las columnas son de ancho
|
|
906
|
-
* variable según su contenido). */
|
|
907
|
-
sticky?: 'left' | 'right';
|
|
908
|
-
/** Ancho mínimo forzado — evita que una columna angosta (ej. un chip
|
|
909
|
-
* corto) se comprima más de la cuenta cuando hay poco espacio y otras
|
|
910
|
-
* columnas compiten por él. */
|
|
911
|
-
minWidth?: string;
|
|
912
|
-
}
|
|
913
|
-
/** Vistas disponibles cuando `cardable` está activo. */
|
|
914
|
-
type DataTableView = 'table' | 'cards';
|
|
915
|
-
/** Opciones de "filas por página" estándar del portal — 10 como default
|
|
916
|
-
* cubre bien tanto un dataset chico (ej. Beneficios) como uno con volumen
|
|
917
|
-
* real (ej. 30+ cuotas en Billing), sin sentirse vacío ni insuficiente; 25
|
|
918
|
-
* y 50 escalan ~2.5x cada paso, evitando un salto brusco donde la opción
|
|
919
|
-
* del medio no aporta nada. Cualquier consumidor puede pisar este default
|
|
920
|
-
* con su propio `pageSizeOptions` si su caso lo justifica — pasar `[]`
|
|
921
|
-
* explícitamente desactiva el selector aunque `pageSize` esté activo. */
|
|
922
|
-
declare const DEFAULT_PAGE_SIZE_OPTIONS: number[];
|
|
923
|
-
/** Densidad de fila: `comfortable` (default, el padding actual) o
|
|
924
|
-
* `compact` (menos padding vertical, para tablas con muchas filas donde
|
|
925
|
-
* priorizar cantidad visible sobre aire entre filas). */
|
|
926
|
-
type DataTableDensity = 'comfortable' | 'compact';
|
|
927
|
-
/** `key:direction` — mismo formato que `sort` de `kf-quote-picker`, para
|
|
928
|
-
* que un consumidor que ya conoce ese patrón no aprenda uno nuevo acá. */
|
|
929
|
-
type DataTableSort = `${string}:${'asc' | 'desc'}`;
|
|
930
|
-
/**
|
|
931
|
-
* Tabla estandarizada con soporte opcional de toggle tabla/cards.
|
|
932
|
-
*
|
|
933
|
-
* El "render" custom por columna de la spec original (una función que
|
|
934
|
-
* devuelve JSX) se resuelve acá de dos formas, de la más simple a la más
|
|
935
|
-
* flexible:
|
|
936
|
-
* - `render`: función `(row) => string` para el caso típico de mostrar un
|
|
937
|
-
* valor derivado/formateado de la fila como texto plano.
|
|
938
|
-
* - `cellTemplates`: mapa `key -> TemplateRef` para cuando un consumidor
|
|
939
|
-
* necesita marcado real dentro de una celda (badges, links, botones). Se
|
|
940
|
-
* proyecta con `ngTemplateOutlet` y recibe `{ $implicit: row, index }`.
|
|
941
|
-
* Se eligió esta combinación en vez de content-projection por columna
|
|
942
|
-
* (ng-content con selector) porque las columnas son dinámicas (vienen de
|
|
943
|
-
* `columns()`), y `ngTemplateOutlet` es el mecanismo estándar de Angular
|
|
944
|
-
* para "insertar esta plantilla por cada fila de este array".
|
|
945
|
-
*
|
|
946
|
-
* En la vista de cards, `cardRole` por columna reparte el contenido en zonas
|
|
947
|
-
* — encabezado (thumbnail + título + estado), cuerpo (pares label/valor) y
|
|
948
|
-
* pie separado por una línea para las acciones. Sin `cardRole`, todas las
|
|
949
|
-
* columnas caen en el cuerpo, igual que antes.
|
|
950
|
-
*
|
|
951
|
-
* El toggle tabla/cards es `kf-view-toggle`, componente standalone propio.
|
|
952
|
-
*
|
|
953
|
-
* <kf-data-table [columns]="columns" [rows]="rows" (rowClick)="onRowClick($event)">
|
|
954
|
-
* <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
|
|
955
|
-
* </kf-data-table>
|
|
956
|
-
*
|
|
957
|
-
* <kf-data-table [columns]="columns" [rows]="rows" [cardable]="true" defaultView="cards" />
|
|
958
|
-
*
|
|
959
|
-
* Loading nativo: con `loading` en `true`, la tabla se reemplaza por un
|
|
960
|
-
* placeholder (`kf-skeleton` por celda/card) — mismo número de filas que
|
|
961
|
-
* `pageSize`, o 5 si no hay paginación activa. Ignora `rows()`/el slot
|
|
962
|
-
* `[empty]` mientras dura (no sabemos aún si el resultado real estará
|
|
963
|
-
* vacío), y respeta la vista activa (tabla o cards) para no cambiar el
|
|
964
|
-
* layout de golpe cuando los datos reales lleguen. El toggle tabla/cards y
|
|
965
|
-
* el header de columnas siguen visibles — solo el cuerpo se reemplaza:
|
|
966
|
-
*
|
|
967
|
-
* <kf-data-table [columns]="columns" [rows]="rows()" [loading]="isLoading()">
|
|
968
|
-
* <kf-empty-state empty>No hay resultados para mostrar.</kf-empty-state>
|
|
969
|
-
* </kf-data-table>
|
|
970
|
-
*
|
|
971
|
-
* El slot `[footer]` (página 15: "slot de pie para paginación") va siempre
|
|
972
|
-
* al final, en ambas vistas, separado por una línea — pensado para proyectar
|
|
973
|
-
* `<kf-pagination>`, que sigue siendo un componente independiente.
|
|
974
|
-
*
|
|
975
|
-
* <kf-data-table [columns]="columns" [rows]="rows">
|
|
976
|
-
* <kf-pagination footer [page]="page()" [total]="total()" (pageChange)="page.set($event)" />
|
|
977
|
-
* </kf-data-table>
|
|
978
|
-
*
|
|
979
|
-
* Paginación interna opcional: con `pageSize`, la tabla pagina sola y
|
|
980
|
-
* agrega su propio `kf-pagination` en el footer nativo (el slot
|
|
981
|
-
* `[footer]` proyectado sigue disponible en paralelo). El selector de "N
|
|
982
|
-
* por página" viene activo por defecto con `DEFAULT_PAGE_SIZE_OPTIONS`
|
|
983
|
-
* ([10, 25, 50], estándar del portal) — pasar `pageSizeOptions` propio lo
|
|
984
|
-
* pisa, y pasar `[]` lo desactiva (paginación sin selector). `itemLabel`
|
|
985
|
-
* completa el texto informativo ("1–10 de 42 beneficios").
|
|
986
|
-
*
|
|
987
|
-
* <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" itemLabel="beneficios" />
|
|
988
|
-
* <kf-data-table [columns]="columns" [rows]="rows" [pageSize]="25" [pageSizeOptions]="[]" />
|
|
989
|
-
*
|
|
990
|
-
* Ordenamiento por columna: cada `DataTableColumn` con `sortable: true`
|
|
991
|
-
* vuelve su header clickeable, con el mismo formato `key:direction` que
|
|
992
|
-
* usa `sort` de `kf-quote-picker` (two-way manual, no `model()` — el
|
|
993
|
-
* consumidor decide si persiste el valor o lo descarta al desmontar):
|
|
994
|
-
*
|
|
995
|
-
* <kf-data-table [columns]="columns" [rows]="rows" [sort]="sort()" (sortChange)="sort.set($event)" />
|
|
996
|
-
*
|
|
997
|
-
* Columnas fijas: `sticky: 'left' | 'right'` en la columna ancla esa
|
|
998
|
-
* columna a un borde del scroll horizontal — típicamente el identificador
|
|
999
|
-
* (izquierda) y/o las acciones (derecha) en una tabla con muchas columnas.
|
|
1000
|
-
*
|
|
1001
|
-
* Densidad: `density="compact"` reduce el padding vertical de cada fila,
|
|
1002
|
-
* para priorizar cantidad de filas visibles sobre aire entre ellas.
|
|
1003
|
-
*/
|
|
1004
|
-
declare class DataTable<T = unknown> {
|
|
1005
|
-
readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
|
|
1006
|
-
readonly rows: _angular_core.InputSignal<T[]>;
|
|
1007
|
-
/** Placeholder nativo (`kf-skeleton`) mientras los datos reales cargan —
|
|
1008
|
-
* ver el doc-comment de la clase para el detalle. */
|
|
1009
|
-
readonly loading: _angular_core.InputSignal<boolean>;
|
|
1010
|
-
private readonly scrollEl;
|
|
1011
|
-
private readonly destroyRef;
|
|
1012
|
-
/**
|
|
1013
|
-
* `.kf-data-table__scroll` tiene `overflow-x: auto` sin ningún indicador
|
|
1014
|
-
* visual — con varias columnas y poco ancho disponible, la tabla se corta
|
|
1015
|
-
* en el borde y nada le avisa al usuario que hay más contenido
|
|
1016
|
-
* scrolleando. `canScrollLeft`/`canScrollRight` alimentan un fade en cada
|
|
1017
|
-
* borde — visible solo cuando de verdad hay algo que revelar de ese lado,
|
|
1018
|
-
* así una tabla que entra completa no muestra fades falsos.
|
|
1019
|
-
*/
|
|
1020
|
-
protected readonly canScrollLeft: _angular_core.WritableSignal<boolean>;
|
|
1021
|
-
protected readonly canScrollRight: _angular_core.WritableSignal<boolean>;
|
|
1022
|
-
constructor();
|
|
1023
|
-
private updateScrollState;
|
|
1024
|
-
/** Default: índice de la fila dentro de `rows`. */
|
|
1025
|
-
readonly rowKey: _angular_core.InputSignal<((row: T, index: number) => string | number) | undefined>;
|
|
1026
|
-
/** Sin borde/sombra de card — para tablas anidadas dentro de otra card. */
|
|
1027
|
-
readonly flush: _angular_core.InputSignal<boolean>;
|
|
1028
|
-
/** Habilita el toggle de vista tabla/cards. */
|
|
1029
|
-
readonly cardable: _angular_core.InputSignal<boolean>;
|
|
1030
|
-
readonly defaultView: _angular_core.InputSignal<DataTableView>;
|
|
1031
|
-
/**
|
|
1032
|
-
* Formateo simple de celda como texto: `(row) => string`. Para marcado
|
|
1033
|
-
* real (badges, links, botones) usar `cellTemplates`.
|
|
1034
|
-
*/
|
|
1035
|
-
readonly render: _angular_core.InputSignal<((row: T) => string) | undefined>;
|
|
1036
|
-
/** Mapa `columnKey -> TemplateRef` para celdas con contenido custom. */
|
|
1037
|
-
readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
|
|
1038
|
-
$implicit: T;
|
|
1039
|
-
index: number;
|
|
1040
|
-
}>> | undefined>;
|
|
1041
|
-
/** Densidad de fila — ver `DataTableDensity`. */
|
|
1042
|
-
readonly density: _angular_core.InputSignal<DataTableDensity>;
|
|
1043
|
-
/** Fuerza si la fila entera dispara `rowClick` en la vista de tabla —
|
|
1044
|
-
* ver `rowInteractive` para el cálculo automático cuando no se define. */
|
|
1045
|
-
readonly rowClickable: _angular_core.InputSignal<boolean | null>;
|
|
1046
|
-
readonly rowClick: _angular_core.OutputEmitterRef<{
|
|
1047
|
-
row: T;
|
|
1048
|
-
index: number;
|
|
1049
|
-
}>;
|
|
1050
|
-
/**
|
|
1051
|
-
* Paginación interna opcional — sin `pageSize`, cero cambio de
|
|
1052
|
-
* comportamiento (el consumidor sigue paginando afuera si quiere, vía el
|
|
1053
|
-
* slot `[footer]` con su propio `kf-pagination`, como ya hace Billing).
|
|
1054
|
-
* Con `pageSize`, la tabla pagina `rows()` sola y agrega su propio
|
|
1055
|
-
* `kf-pagination` en el footer nativo — el slot `[footer]` proyectado
|
|
1056
|
-
* sigue disponible para cualquier otra cosa que el consumidor quiera
|
|
1057
|
-
* agregar ahí (no son mutuamente excluyentes).
|
|
1058
|
-
*/
|
|
1059
|
-
readonly pageSize: _angular_core.InputSignal<number | null>;
|
|
1060
|
-
/** Default `DEFAULT_PAGE_SIZE_OPTIONS` ([10, 25, 50], estándar del
|
|
1061
|
-
* portal) — pasar `[]` explícitamente desactiva el selector de tamaño
|
|
1062
|
-
* aunque `pageSize` esté activo (paginación sin selector). */
|
|
1063
|
-
readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
|
|
1064
|
-
readonly pageChange: _angular_core.OutputEmitterRef<number>;
|
|
1065
|
-
readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
|
|
1066
|
-
/** Nombre de la entidad listada (ej. "beneficios", "facturas"), en
|
|
1067
|
-
* plural — se agrega al final del texto informativo de la paginación
|
|
1068
|
-
* interna ("1–5 de 7 beneficios"). Sin esto, el texto queda solo con
|
|
1069
|
-
* números ("1–5 de 7"): la librería no impone un idioma ni un nombre
|
|
1070
|
-
* fijo, cada consumidor decide el suyo. */
|
|
1071
|
-
readonly itemLabel: _angular_core.InputSignal<string>;
|
|
1072
|
-
protected readonly page: _angular_core.WritableSignal<number>;
|
|
1073
|
-
private readonly internalPageSize;
|
|
1074
|
-
/** Tamaño de página efectivo: el que el usuario elija en el selector
|
|
1075
|
-
* (si `pageSizeOptions` está activo), o el `pageSize` del consumidor. */
|
|
1076
|
-
protected readonly effectivePageSize: _angular_core.Signal<number | null>;
|
|
1077
|
-
/** Cantidad de filas/cards placeholder mientras `loading` es true — el
|
|
1078
|
-
* `pageSize` efectivo si hay paginación activa (así el placeholder ya
|
|
1079
|
-
* "adivina" cuántas filas reales van a aparecer, sin salto de layout),
|
|
1080
|
-
* o 5 si no hay paginación. */
|
|
1081
|
-
protected readonly skeletonRowIndexes: _angular_core.Signal<number[]>;
|
|
1082
|
-
protected readonly totalPages: _angular_core.Signal<number>;
|
|
1083
|
-
/** Texto informativo del footer de paginación interna ("1–5 de 7
|
|
1084
|
-
* beneficios") — se recalcula con cada cambio de página/tamaño/dataset,
|
|
1085
|
-
* nunca queda desactualizado tras filtrar o pasar de página. */
|
|
1086
|
-
protected readonly paginationSummary: _angular_core.Signal<string>;
|
|
1087
|
-
/**
|
|
1088
|
-
* Ordenamiento por columna — mismo formato `key:direction` que `sort` de
|
|
1089
|
-
* `kf-quote-picker`, para que un consumidor que ya conoce ese patrón no
|
|
1090
|
-
* aprenda uno nuevo. Un click en un header `sortable` avanza el ciclo
|
|
1091
|
-
* asc → desc → sin orden; clickear otra columna reinicia el ciclo en esa
|
|
1092
|
-
* columna nueva.
|
|
1093
|
-
*/
|
|
1094
|
-
readonly sort: _angular_core.InputSignal<`${string}:desc` | `${string}:asc` | null>;
|
|
1095
|
-
readonly sortChange: _angular_core.OutputEmitterRef<`${string}:desc` | `${string}:asc` | null>;
|
|
1096
|
-
protected readonly sortedRows: _angular_core.Signal<T[]>;
|
|
1097
|
-
/** Filas realmente renderizadas: ordenadas y, si `pageSize` está activo,
|
|
1098
|
-
* recortadas a la página actual. */
|
|
1099
|
-
protected readonly displayedRows: _angular_core.Signal<T[]>;
|
|
1100
|
-
protected sortDirectionFor(column: DataTableColumn): 'asc' | 'desc' | null;
|
|
1101
|
-
/** Ciclo asc → desc → sin orden, disparado al clickear un header `sortable`. */
|
|
1102
|
-
protected toggleSort(column: DataTableColumn): void;
|
|
1103
|
-
protected goToPage(target: number): void;
|
|
1104
|
-
protected setPageSize(size: number | null): void;
|
|
1105
|
-
/** Columnas fijas del lado izquierdo/derecho, con el offset acumulado
|
|
1106
|
-
* (medido en runtime, ver `measureStickyOffsets`) para `position: sticky`. */
|
|
1107
|
-
protected readonly stickyLeftColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
1108
|
-
protected readonly stickyRightColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
1109
|
-
protected readonly stickyOffsets: _angular_core.WritableSignal<Map<string, number>>;
|
|
1110
|
-
protected stickyStyle(column: DataTableColumn): Record<string, string> | null;
|
|
1111
|
-
private readonly internalView;
|
|
1112
|
-
/** Vista activa: la elegida por el usuario, o `defaultView` si no tocó el toggle. */
|
|
1113
|
-
readonly view: _angular_core.Signal<DataTableView>;
|
|
1114
|
-
/** Primera columna de cada rol único; el resto se ignora en el encabezado. */
|
|
1115
|
-
readonly cardMediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
|
|
1116
|
-
readonly cardTitleColumn: _angular_core.Signal<DataTableColumn | undefined>;
|
|
1117
|
-
readonly cardStatusColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
1118
|
-
readonly cardActionColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
1119
|
-
readonly cardFieldColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
1120
|
-
/**
|
|
1121
|
-
* La card entera es clickeable solo si no tiene acciones propias: un
|
|
1122
|
-
* `role="button"` con botones adentro es inválido y deja el foco ambiguo.
|
|
1123
|
-
* Con columnas `action`, la interacción la manejan esos botones.
|
|
1124
|
-
*/
|
|
1125
|
-
readonly cardInteractive: _angular_core.Signal<boolean>;
|
|
1126
|
-
/**
|
|
1127
|
-
* Mismo criterio que `cardInteractive`, para la vista de tabla: la fila
|
|
1128
|
-
* entera dispara `rowClick` solo si no hay una columna `action` que ya
|
|
1129
|
-
* resuelva la interacción con su propio botón — sin esto, un click en
|
|
1130
|
-
* "Ver detalle" dispararía TAMBIÉN el click de la fila por burbujeo.
|
|
1131
|
-
* `rowClickable` fuerza el comportamiento en cualquier sentido si el
|
|
1132
|
-
* consumidor lo necesita.
|
|
1133
|
-
*/
|
|
1134
|
-
readonly rowInteractive: _angular_core.Signal<boolean>;
|
|
1135
|
-
setView(next: DataTableView): void;
|
|
1136
|
-
trackRow(row: T, index: number): string | number;
|
|
1137
|
-
cellValue(row: T, column: DataTableColumn): string;
|
|
1138
|
-
onRowClick(row: T, index: number): void;
|
|
1139
|
-
/**
|
|
1140
|
-
* Ancho real de cada columna `sticky` — se mide después de cada render
|
|
1141
|
-
* porque el ancho de una columna depende de su contenido, no hay forma
|
|
1142
|
-
* de conocerlo de antemano. Cada columna fija toma como offset la suma
|
|
1143
|
-
* de anchos de las columnas fijas del MISMO lado que ya quedaron antes
|
|
1144
|
-
* que ella (así "left" apila de izquierda a derecha, "right" de derecha
|
|
1145
|
-
* a izquierda).
|
|
1146
|
-
*/
|
|
1147
|
-
protected measureStickyOffsets(): void;
|
|
1148
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DataTable<any>, never>;
|
|
1149
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataTable<any>, "kf-data-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "rows": { "alias": "rows"; "required": true; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "rowKey": { "alias": "rowKey"; "required": false; "isSignal": true; }; "flush": { "alias": "flush"; "required": false; "isSignal": true; }; "cardable": { "alias": "cardable"; "required": false; "isSignal": true; }; "defaultView": { "alias": "defaultView"; "required": false; "isSignal": true; }; "render": { "alias": "render"; "required": false; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "rowClickable": { "alias": "rowClickable"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "itemLabel": { "alias": "itemLabel"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; }, { "rowClick": "rowClick"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; }, never, ["[empty]", "[footer]"], true, never>;
|
|
1150
|
-
}
|
|
1151
|
-
|
|
1152
|
-
/**
|
|
1153
|
-
* Signal con la vista de `kf-data-table` ('table' | 'cards') derivada de un
|
|
1154
|
-
* breakpoint — mismo criterio que cualquier tabla con muchas columnas: bajo
|
|
1155
|
-
* el ancho dado, la vista de tabla no entra sin scroll horizontal, así que
|
|
1156
|
-
* se fuerza `cards`. Centraliza el patrón `matchMediaSignal` +
|
|
1157
|
-
* `computed<DataTableView>` que cada tabla del portal repetía igual.
|
|
1158
|
-
*
|
|
1159
|
-
* protected readonly tableView = dataTableViewSignal();
|
|
1160
|
-
* // con un breakpoint distinto al default de 900px:
|
|
1161
|
-
* protected readonly tableView = dataTableViewSignal('(max-width: 768px)');
|
|
1162
|
-
*/
|
|
1163
|
-
declare function dataTableViewSignal(query?: string): Signal<DataTableView>;
|
|
1164
|
-
|
|
1165
|
-
type DividerOrientation = 'horizontal' | 'vertical';
|
|
1166
|
-
/**
|
|
1167
|
-
* Separador visual simple entre bloques de contenido. `orientation`
|
|
1168
|
-
* controla si es una línea horizontal (para separar secciones apiladas) o
|
|
1169
|
-
* vertical (para separar elementos en una fila, ej. acciones en una toolbar,
|
|
1170
|
-
* o las columnas de metadata en `kf-company-selector`).
|
|
1171
|
-
*
|
|
1172
|
-
* En `vertical`, el divisor necesita una altura del contexto donde vive —
|
|
1173
|
-
* `:host { align-self: stretch }` lo hace ocupar la altura del contenedor
|
|
1174
|
-
* flex/grid padre sin que el consumidor tenga que fijarla a mano. `flex:
|
|
1175
|
-
* none` evita que el propio divisor se achique a 0 dentro de ese contenedor
|
|
1176
|
-
* flex cuando hay contenido hermano compitiendo por espacio.
|
|
1177
|
-
*
|
|
1178
|
-
* <kf-divider />
|
|
1179
|
-
* <kf-divider orientation="vertical" />
|
|
1180
|
-
*/
|
|
1181
|
-
declare class Divider {
|
|
1182
|
-
readonly orientation: _angular_core.InputSignal<DividerOrientation>;
|
|
1183
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Divider, never>;
|
|
1184
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Divider, "kf-divider", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1185
|
-
}
|
|
1186
|
-
|
|
1187
|
-
/** Color del chip de ícono. Identifica la CLASE de documento de un vistazo
|
|
1188
|
-
* en una lista de nombres de archivo parecidos entre sí. */
|
|
1189
|
-
type DocumentRowTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
|
|
1190
|
-
/**
|
|
1191
|
-
* Fila de un documento descargable: chip de ícono coloreado por tipo,
|
|
1192
|
-
* título, metadata y la acción de descarga al final. Sin `href` rinde
|
|
1193
|
-
* `pendingLabel` en vez de un link roto. El contenido proyectado cae entre
|
|
1194
|
-
* la metadata y la acción, como slot para un `kf-badge` de estado.
|
|
1195
|
-
*/
|
|
1196
|
-
declare class DocumentRow {
|
|
1197
|
-
readonly icon: _angular_core.InputSignal<IconName>;
|
|
1198
|
-
readonly tone: _angular_core.InputSignal<DocumentRowTone>;
|
|
1199
|
-
/** Qué documento es. El nombre humano del tipo, no el del archivo. */
|
|
1200
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
1201
|
-
/** Línea secundaria — archivo, fecha, tamaño. El consumidor la arma ya
|
|
1202
|
-
* formateada: la librería no decide en qué unidad se lee un tamaño ni en
|
|
1203
|
-
* qué formato una fecha. */
|
|
1204
|
-
readonly meta: _angular_core.InputSignal<string | undefined>;
|
|
1205
|
-
/** Ausente rinde `pendingLabel` en vez del link de descarga. */
|
|
1206
|
-
readonly href: _angular_core.InputSignal<string | undefined>;
|
|
1207
|
-
readonly downloadLabel: _angular_core.InputSignal<string>;
|
|
1208
|
-
/** Qué se dice cuando no hay `href`. */
|
|
1209
|
-
readonly pendingLabel: _angular_core.InputSignal<string>;
|
|
1210
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DocumentRow, never>;
|
|
1211
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DocumentRow, "kf-document-row", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "downloadLabel": { "alias": "downloadLabel"; "required": false; "isSignal": true; }; "pendingLabel": { "alias": "pendingLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1212
|
-
}
|
|
1213
|
-
|
|
1214
|
-
type DrawerSide = 'left' | 'right';
|
|
1215
|
-
/**
|
|
1216
|
-
* Panel lateral genérico, agnóstico de contenido — no sabe qué es navegación
|
|
1217
|
-
* ni qué es sesión, solo da tres lugares para proyectar contenido
|
|
1218
|
-
* (`[kf-drawer-header]`, default, `[kf-drawer-footer]`) y resuelve lo que
|
|
1219
|
-
* cualquier drawer necesita resolver igual sin importar qué haya adentro:
|
|
1220
|
-
* overlay con blur que cierra al click, `Escape`, atrapado de foco real y
|
|
1221
|
-
* devolución de foco al cerrar.
|
|
1222
|
-
*
|
|
1223
|
-
* `open` es two-way, mismo patrón que `Dropdown`/`Modal`: el consumidor
|
|
1224
|
-
* decide qué dispara la apertura (un botón de hamburguesa, por ejemplo) y
|
|
1225
|
-
* qué hace con el cierre.
|
|
1226
|
-
*
|
|
1227
|
-
* Foco: al abrir, se crea un `FocusTrap` del CDK sobre el panel (la misma
|
|
1228
|
-
* pieza que usa Angular Material para `mat-sidenav`/`mat-dialog`) — Tab y
|
|
1229
|
-
* Shift+Tab ciclan solo entre los elementos focuseables del drawer, sin
|
|
1230
|
-
* escapar al contenido de fondo. Al cerrar, el foco vuelve al elemento que
|
|
1231
|
-
* tenía el foco antes de abrir (guardado en `document.activeElement`), no
|
|
1232
|
-
* se pierde en el `<body>`.
|
|
1233
|
-
*
|
|
1234
|
-
* `[kf-drawer-header]` tiene fondo oscuro propio (`--kf-color-tertiary-deep`),
|
|
1235
|
-
* distinto del body (`--kf-color-white`) — pensado para contener
|
|
1236
|
-
* `kf-drawer-session`, que asume ese fondo y no lo trae él mismo (ver
|
|
1237
|
-
* `DrawerSession.ts`). Si el slot queda vacío, el contenedor colapsa
|
|
1238
|
-
* (`display: none`) y no deja una franja oscura sin contenido.
|
|
1239
|
-
*
|
|
1240
|
-
* <kf-drawer [(open)]="menuOpen" ariaLabel="Menú de navegación">
|
|
1241
|
-
* <div kf-drawer-header>
|
|
1242
|
-
* <kf-drawer-session name="Tomás Soto" email="tomas@kaufmann.com" (logoutClick)="onLogout()" />
|
|
1243
|
-
* </div>
|
|
1244
|
-
* <a href="/">Home</a>
|
|
1245
|
-
* <a href="/vehiculos">Vehículos</a>
|
|
1246
|
-
* </kf-drawer>
|
|
1247
|
-
*/
|
|
1248
|
-
declare class Drawer {
|
|
1249
|
-
/** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
|
|
1250
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
1251
|
-
/** Borde de anclaje del panel. `left` (default) es la convención dominante
|
|
1252
|
-
* (Material/iOS/Android): el botón que abre el drawer y el propio panel
|
|
1253
|
-
* quedan del mismo lado. */
|
|
1254
|
-
readonly side: _angular_core.InputSignal<DrawerSide>;
|
|
1255
|
-
/** `aria-label` del `<nav>` interno — describe el propósito del panel para
|
|
1256
|
-
* lectores de pantalla (ej. "Menú de navegación"). */
|
|
1257
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
1258
|
-
private readonly panelRef;
|
|
1259
|
-
private readonly focusTrapFactory;
|
|
1260
|
-
private readonly document;
|
|
1261
|
-
private focusTrap;
|
|
1262
|
-
private lastFocusedElement;
|
|
1263
|
-
constructor();
|
|
1264
|
-
/** Cierra el drawer con Escape — mismo patrón que `Dropdown`/`Modal`. */
|
|
1265
|
-
protected onEscape(): void;
|
|
1266
|
-
private getOrCreateFocusTrap;
|
|
1267
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Drawer, never>;
|
|
1268
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Drawer, "kf-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "side": { "alias": "side"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["[kf-drawer-header]", "*", "[kf-drawer-footer]"], true, never>;
|
|
1269
|
-
}
|
|
1270
|
-
|
|
1271
|
-
/**
|
|
1272
|
-
* Botón de cerrar sesión, pensado para proyectarse dentro de
|
|
1273
|
-
* `[kf-drawer-footer]` de `kf-drawer`, o junto a `kf-drawer-session` dentro
|
|
1274
|
-
* de `[kf-sidebar-footer]` de `kf-sidebar-shell` — separado de
|
|
1275
|
-
* `kf-drawer-session` (que solo muestra identidad: brand, avatar, nombre,
|
|
1276
|
-
* email), no anidado dentro de ella.
|
|
1277
|
-
*
|
|
1278
|
-
* Ícono `log-out` + label, color `--kf-color-error` con hover en
|
|
1279
|
-
* `--kf-color-error-soft` y foco visible con `--kf-shadow-focus`. Separado
|
|
1280
|
-
* de `kf-drawer-session` (solo identidad) por responsabilidad única.
|
|
1281
|
-
*
|
|
1282
|
-
* No sabe nada de autenticación real — solo emite `logoutClick` cuando el
|
|
1283
|
-
* consumidor debe cerrar la sesión real.
|
|
1284
|
-
*
|
|
1285
|
-
* `collapsed` oculta el label y centra el ícono, exponiéndolo vía `title`
|
|
1286
|
-
* — mismo criterio que `SidebarNavItem.collapsed` y
|
|
1287
|
-
* `DrawerSession.collapsed`, para cuando este botón vive dentro de un
|
|
1288
|
-
* `kf-sidebar-shell` colapsado.
|
|
1289
|
-
*
|
|
1290
|
-
* <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
|
|
1291
|
-
*/
|
|
1292
|
-
declare class DrawerLogout {
|
|
1293
|
-
/** Label del botón, en español neutro por defecto. Input opcional por si
|
|
1294
|
-
* algún consumidor futuro necesita otro texto. */
|
|
1295
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
1296
|
-
/** Oculta el label y centra el ícono — ver comentario de la clase. */
|
|
1297
|
-
readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1298
|
-
readonly logoutClick: _angular_core.OutputEmitterRef<void>;
|
|
1299
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerLogout, never>;
|
|
1300
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerLogout, "kf-drawer-logout", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "logoutClick": "logoutClick"; }, never, never, true, never>;
|
|
1301
|
-
}
|
|
1302
|
-
|
|
1303
|
-
/**
|
|
1304
|
-
* Bloque de identidad para `[kf-drawer-header]` de `kf-drawer` o
|
|
1305
|
-
* `[kf-sidebar-footer]` de `kf-sidebar-shell`: avatar + nombre + email,
|
|
1306
|
-
* brand opcional arriba. Solo identidad — el logout vive aparte, en
|
|
1307
|
-
* `kf-drawer-logout`.
|
|
1308
|
-
*
|
|
1309
|
-
* `collapsed` oculta brand/nombre/email y deja solo el avatar (para un
|
|
1310
|
-
* `kf-sidebar-shell` colapsado). `interactive` convierte la tarjeta en un
|
|
1311
|
-
* botón real que emite `cardClick`, para cuando la identidad es el
|
|
1312
|
-
* disparador de un menú de acciones (ej. envuelta en `kf-dropdown`).
|
|
1313
|
-
*
|
|
1314
|
-
* <kf-dropdown [(open)]="menuOpen">
|
|
1315
|
-
* <kf-drawer-session interactive name="Juan Pérez" email="juan@empresa.com" (cardClick)="menuOpen.set(!menuOpen())" />
|
|
1316
|
-
* <kf-dropdown-panel variant="dark">
|
|
1317
|
-
* <kf-dropdown-item icon="log-out" tone="error" (click)="onLogout()">Cerrar sesión</kf-dropdown-item>
|
|
1318
|
-
* </kf-dropdown-panel>
|
|
1319
|
-
* </kf-dropdown>
|
|
1320
|
-
*/
|
|
1321
|
-
declare class DrawerSession {
|
|
1322
|
-
readonly name: _angular_core.InputSignal<string>;
|
|
1323
|
-
readonly email: _angular_core.InputSignal<string>;
|
|
1324
|
-
/**
|
|
1325
|
-
* Etiqueta de rol o función del usuario dentro de la sesión (ej.
|
|
1326
|
-
* "Coordinador", "Supervisor"). Se muestra como badge dentro de la
|
|
1327
|
-
* identidad, debajo del email — distinto de `brand`, que es la marca o
|
|
1328
|
-
* cliente mostrada como encabezado de todo el bloque, no un atributo de
|
|
1329
|
-
* la persona.
|
|
1330
|
-
*/
|
|
1331
|
-
readonly role: _angular_core.InputSignal<string>;
|
|
1332
|
-
readonly initials: _angular_core.InputSignal<string>;
|
|
1333
|
-
readonly avatarUrl: _angular_core.InputSignal<string>;
|
|
1334
|
-
/** Label superior opcional, ej. "Portal Kaufmann LATAM". */
|
|
1335
|
-
readonly brand: _angular_core.InputSignal<string>;
|
|
1336
|
-
/** Oculta brand/nombre/email y centra el avatar — ver comentario de la clase. */
|
|
1337
|
-
readonly collapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1338
|
-
/** Convierte la tarjeta en un botón real con ícono de kebab — ver comentario de la clase. */
|
|
1339
|
-
readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1340
|
-
/** Se emite al clickear la tarjeta, solo cuando `interactive` es `true`. */
|
|
1341
|
-
readonly cardClick: _angular_core.OutputEmitterRef<void>;
|
|
1342
|
-
/** Si no se pasa `initials`, se derivan de `name`: primera letra de cada
|
|
1343
|
-
* una de las primeras 2 palabras, en mayúscula. */
|
|
1344
|
-
protected readonly displayInitials: _angular_core.Signal<string>;
|
|
1345
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DrawerSession, never>;
|
|
1346
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DrawerSession, "kf-drawer-session", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "email": { "alias": "email"; "required": false; "isSignal": true; }; "role": { "alias": "role"; "required": false; "isSignal": true; }; "initials": { "alias": "initials"; "required": false; "isSignal": true; }; "avatarUrl": { "alias": "avatarUrl"; "required": false; "isSignal": true; }; "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
|
|
1347
|
-
}
|
|
1348
|
-
|
|
1349
|
-
/**
|
|
1350
|
-
* Menú de acciones flotante, conectado a un elemento disparador vía
|
|
1351
|
-
* `@angular/cdk/overlay` — la misma pieza que usa Angular Material para
|
|
1352
|
-
* `mat-menu`/`mat-select`. El disparador real puede vivir en OTRO
|
|
1353
|
-
* componente por completo (ej. el avatar dentro de `kf-portal-header`), y
|
|
1354
|
-
* el panel aparece pegado a ESE elemento sin importar dónde el consumidor
|
|
1355
|
-
* ubique al `Dropdown` en su HTML.
|
|
1356
|
-
*
|
|
1357
|
-
* `open` es two-way: el consumidor decide qué dispara la apertura —
|
|
1358
|
-
* `Dropdown` en sí no renderiza ningún trigger, su propio host es el punto
|
|
1359
|
-
* de anclaje visual del panel.
|
|
1360
|
-
*
|
|
1361
|
-
* <kf-dropdown [(open)]="menuOpen"><kf-dropdown-panel>...</kf-dropdown-panel></kf-dropdown>
|
|
1362
|
-
*/
|
|
1363
|
-
declare class Dropdown {
|
|
1364
|
-
/** Visibilidad del panel, two-way: `[(open)]="menuOpen"`. */
|
|
1365
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
1366
|
-
/**
|
|
1367
|
-
* Elemento al que se conecta el overlay, si es distinto del propio host
|
|
1368
|
-
* de `Dropdown`. Sin esto, `Dropdown` asume que ÉL MISMO es el
|
|
1369
|
-
* disparador. Útil cuando el disparador real vive dentro de OTRO
|
|
1370
|
-
* componente que no se puede envolver sin ensanchar el área de click
|
|
1371
|
-
* (ej. el avatar de sesión dentro de `PortalHeader`).
|
|
1372
|
-
*/
|
|
1373
|
-
readonly anchor: _angular_core.InputSignal<ElementRef<HTMLElement> | undefined>;
|
|
1374
|
-
private readonly panel;
|
|
1375
|
-
private readonly overlayService;
|
|
1376
|
-
private readonly host;
|
|
1377
|
-
private readonly viewContainerRef;
|
|
1378
|
-
private readonly destroyRef;
|
|
1379
|
-
private overlayRef;
|
|
1380
|
-
/**
|
|
1381
|
-
* Suscripciones a `outsidePointerEvents()`/`keydownEvents()` del overlay
|
|
1382
|
-
* ACTUALMENTE adjunto. `getOrCreateOverlayRef()` reutiliza el mismo
|
|
1383
|
-
* `overlayRef` entre aperturas (no lo recrea cada vez), así que se
|
|
1384
|
-
* cancelan explícitamente en `detach()` antes de la siguiente `attach()`
|
|
1385
|
-
* — de lo contrario se acumularían N suscripciones activas sobre el
|
|
1386
|
-
* mismo overlay persistente.
|
|
1387
|
-
*/
|
|
1388
|
-
private overlaySubscription;
|
|
1389
|
-
constructor();
|
|
1390
|
-
/**
|
|
1391
|
-
* Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo
|
|
1392
|
-
* ve teclas con el foco DENTRO del panel. Si el foco queda en el botón
|
|
1393
|
-
* disparador (caso común), `keydownEvents()` nunca dispara — este
|
|
1394
|
-
* listener a nivel de documento cubre ese caso.
|
|
1395
|
-
*/
|
|
1396
|
-
onDocumentEscape(): void;
|
|
1397
|
-
private attach;
|
|
1398
|
-
/**
|
|
1399
|
-
* El trigger real (el `anchor`, o el propio host si no se pasó ninguno —
|
|
1400
|
-
* ver comentario de la clase) vive FUERA del overlay a propósito: el
|
|
1401
|
-
* overlay recién se crea/adjunta cuando `open` pasa a `true`, así que el
|
|
1402
|
-
* CDK no tiene forma de saber que ese elemento externo "es parte" de su
|
|
1403
|
-
* disparador. Sin este filtro, el mismo `pointerdown` que abre el menú
|
|
1404
|
-
* también llega a `outsidePointerEvents()`, cerrando el panel en el
|
|
1405
|
-
* mismo gesto que lo abrió.
|
|
1406
|
-
*/
|
|
1407
|
-
private isEventOnTrigger;
|
|
1408
|
-
private detach;
|
|
1409
|
-
private getOrCreateOverlayRef;
|
|
1410
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Dropdown, never>;
|
|
1411
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Dropdown, "kf-dropdown", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "anchor": { "alias": "anchor"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, ["panel"], ["*"], true, never>;
|
|
1412
|
-
}
|
|
1413
|
-
|
|
1414
|
-
type DropdownItemTone = 'neutral' | 'error';
|
|
1415
|
-
/**
|
|
1416
|
-
* Ítem de acción dentro de un `kf-dropdown-panel`. Es un `<button>` nativo
|
|
1417
|
-
* (no un `<a>`): dispara comportamiento en la pantalla actual, no navega.
|
|
1418
|
-
*
|
|
1419
|
-
* `icon` es opcional — sin él, el ítem es solo texto.
|
|
1420
|
-
*
|
|
1421
|
-
* <kf-dropdown-item icon="log-out" (click)="onLogout()" tone="error">Cerrar sesión</kf-dropdown-item>
|
|
1422
|
-
*/
|
|
1423
|
-
declare class DropdownItem {
|
|
1424
|
-
readonly tone: _angular_core.InputSignal<DropdownItemTone>;
|
|
1425
|
-
/** Ícono opcional al inicio de la fila. */
|
|
1426
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
1427
|
-
/**
|
|
1428
|
-
* Deshabilita el ítem (ej. una acción cuyo endpoint todavía no existe,
|
|
1429
|
-
* caso real de "Factura" en `kf-row-actions` de Taller). Default `false`
|
|
1430
|
-
* a propósito — ningún consumidor existente (ej. el menú de sesión del
|
|
1431
|
-
* Shell) pasa esta prop hoy, así que no cambia su comportamiento.
|
|
1432
|
-
*/
|
|
1433
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1434
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownItem, never>;
|
|
1435
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownItem, "kf-dropdown-item", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1436
|
-
}
|
|
1437
|
-
|
|
1438
|
-
type DropdownPanelVariant = 'solid' | 'dark';
|
|
1439
|
-
/**
|
|
1440
|
-
* Contenido del panel flotante de un `kf-dropdown`. Es solo una plantilla
|
|
1441
|
-
* (`<ng-template>`, capturada vía `TemplateRef`) — `Dropdown` la conecta al
|
|
1442
|
-
* overlay real cuando `open` pasa a `true`, no la renderiza en su propio
|
|
1443
|
-
* lugar del DOM. Esto permite que el panel aparezca pegado al host de
|
|
1444
|
-
* `Dropdown` sin importar dónde esté ese host en la página.
|
|
1445
|
-
*
|
|
1446
|
-
* `variant`: `'solid'` (default, fondo blanco) o `'dark'` (fondo sólido
|
|
1447
|
-
* oscuro, mismo tono que `[kf-drawer-header]`) para cuando el trigger vive
|
|
1448
|
-
* sobre una superficie oscura de marca.
|
|
1449
|
-
*
|
|
1450
|
-
* `dark` es sólida a propósito, no semitransparente: el CDK Overlay
|
|
1451
|
-
* reposiciona el panel según dónde entra en el viewport y puede terminar
|
|
1452
|
-
* cayendo sobre fondo blanco en vez de sobre el rail oscuro — un color
|
|
1453
|
-
* sólido se ve intencional sin importar dónde lo posicione el CDK.
|
|
1454
|
-
*/
|
|
1455
|
-
declare class DropdownPanel {
|
|
1456
|
-
readonly variant: _angular_core.InputSignal<DropdownPanelVariant>;
|
|
1457
|
-
readonly templateRef: _angular_core.Signal<TemplateRef<any>>;
|
|
1458
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<DropdownPanel, never>;
|
|
1459
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<DropdownPanel, "kf-dropdown-panel", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1460
|
-
}
|
|
1461
|
-
|
|
1462
|
-
/**
|
|
1463
|
-
* Placeholder para una sección sin contenido. Dos tonos, con anatomía
|
|
1464
|
-
* distinta (páginas 27-28 del design system, que los trata como piezas
|
|
1465
|
-
* separadas — "Error State" no es una variante de color de "Empty State",
|
|
1466
|
-
* es un estado semánticamente distinto):
|
|
1467
|
-
*
|
|
1468
|
-
* - `neutral` (default): "cero resultados" — cuadro con borde punteado
|
|
1469
|
-
* discreto, para listas vacías o búsquedas sin coincidencias. No es un
|
|
1470
|
-
* error, es la ausencia normal de datos.
|
|
1471
|
-
* - `error`: fallo real de carga — sin borde punteado, con un ícono de
|
|
1472
|
-
* alerta más prominente y texto en el tono de error. Pensado para usarse
|
|
1473
|
-
* junto a un botón "Reintentar" en el slot por defecto.
|
|
1474
|
-
*
|
|
1475
|
-
* <kf-empty-state>No se encontraron resultados.</kf-empty-state>
|
|
1476
|
-
* <kf-empty-state icon="search">Sin coincidencias para tu búsqueda.</kf-empty-state>
|
|
1477
|
-
* <kf-empty-state tone="error" icon="alert-triangle">
|
|
1478
|
-
* No pudimos cargar tus vehículos
|
|
1479
|
-
* <kf-button (click)="retry()">Reintentar</kf-button>
|
|
1480
|
-
* </kf-empty-state>
|
|
1481
|
-
*/
|
|
1482
|
-
declare class EmptyState {
|
|
1483
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
1484
|
-
/** `neutral` (default): cero resultados. `error`: fallo real de carga. */
|
|
1485
|
-
readonly tone: _angular_core.InputSignal<"neutral" | "error">;
|
|
1486
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EmptyState, never>;
|
|
1487
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EmptyState, "kf-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1488
|
-
}
|
|
1489
|
-
|
|
1490
|
-
/** Color del marcador. Distingue la CLASE de evento de un vistazo en un log
|
|
1491
|
-
* largo — no es un estado de progreso. */
|
|
1492
|
-
type EventTimelineTone = 'neutral' | 'primary' | 'ok' | 'warn' | 'error' | 'info';
|
|
1493
|
-
/** Un evento ya ocurrido. Los tres campos de texto son los tres niveles de
|
|
1494
|
-
* lectura: qué pasó, por qué, y cuándo/quién. */
|
|
1495
|
-
interface EventTimelineItem {
|
|
1496
|
-
/** Clave de `track`. */
|
|
1497
|
-
readonly id: string;
|
|
1498
|
-
readonly title: string;
|
|
1499
|
-
readonly detail?: string | null;
|
|
1500
|
-
/** Hora y autor, ya formateados por el consumidor. */
|
|
1501
|
-
readonly meta?: string | null;
|
|
1502
|
-
readonly icon?: IconName;
|
|
1503
|
-
readonly tone?: EventTimelineTone;
|
|
1504
|
-
}
|
|
1505
|
-
/**
|
|
1506
|
-
* Línea de tiempo de AUDITORÍA: eventos ya ocurridos, en orden, cada uno con
|
|
1507
|
-
* marcador coloreado por CLASE y tres niveles de texto (titular, detalle,
|
|
1508
|
-
* hora + autor). Distinto de `kf-journey-stepper` (de PROGRESO, con pasos
|
|
1509
|
-
* futuros conocidos de antemano): acá todo ya pasó.
|
|
1510
|
-
*/
|
|
1511
|
-
declare class EventTimeline {
|
|
1512
|
-
readonly items: _angular_core.InputSignal<readonly EventTimelineItem[]>;
|
|
1513
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<EventTimeline, never>;
|
|
1514
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<EventTimeline, "kf-event-timeline", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1515
|
-
}
|
|
1516
|
-
|
|
1517
|
-
/**
|
|
1518
|
-
* Bloque promocional sobre fondo oscuro de marca (página 37) — campañas,
|
|
1519
|
-
* accesos directos o el portal de autoatención. Usa `--kf-color-tertiary-deep`
|
|
1520
|
-
* como base del degradado, el mismo azul profundo que el slide destacado de
|
|
1521
|
-
* `kf-carousel` y la barra de `kf-portal-header`.
|
|
1522
|
-
*
|
|
1523
|
-
* <kf-feature-card badge="Autoatención" badgeIcon="tool" title="Portal de Autoatención"
|
|
1524
|
-
* description="Con tu patente o VIN accede a soluciones para tu vehículo: mantenciones, repuestos y conectividad en un solo lugar."
|
|
1525
|
-
* actionLabel="Ir al portal" actionHref="/autoatencion" />
|
|
1526
|
-
*/
|
|
1527
|
-
declare class FeatureCard {
|
|
1528
|
-
readonly badge: _angular_core.InputSignal<string | undefined>;
|
|
1529
|
-
readonly badgeIcon: _angular_core.InputSignal<IconName | undefined>;
|
|
1530
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
1531
|
-
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
1532
|
-
readonly actionLabel: _angular_core.InputSignal<string | undefined>;
|
|
1533
|
-
readonly actionHref: _angular_core.InputSignal<string | undefined>;
|
|
1534
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FeatureCard, never>;
|
|
1535
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FeatureCard, "kf-feature-card", never, { "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "badgeIcon": { "alias": "badgeIcon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1536
|
-
}
|
|
1537
|
-
|
|
1538
|
-
/**
|
|
1539
|
-
* Chip de solo-lectura inline (label/valor) dentro de una caja bordeada.
|
|
1540
|
-
* Se usa en barras de filtro y filas de resumen para mostrar información,
|
|
1541
|
-
* NO para entrada de datos — para eso existe `Input`.
|
|
1542
|
-
*
|
|
1543
|
-
* El valor admite dos formas, igual que en el design system de referencia:
|
|
1544
|
-
* - `value` (string): caso simple, ej. `[value]="'Jul 2026'"`.
|
|
1545
|
-
* - contenido proyectado (`<ng-content>`): cuando se necesita algo más rico
|
|
1546
|
-
* que un string (un badge, texto con formato, etc.).
|
|
1547
|
-
* `value` tiene prioridad cuando está definido; si no se pasa `value`, se
|
|
1548
|
-
* renderiza el contenido proyectado y, si tampoco hay contenido, `placeholder`.
|
|
1549
|
-
*
|
|
1550
|
-
* <kf-field icon="calendar" label="Periodo" value="Jul 2026" [select]="true" />
|
|
1551
|
-
* <kf-field label="Sucursal"><strong>Casa Central</strong></kf-field>
|
|
1552
|
-
*/
|
|
1553
|
-
declare class Field {
|
|
1554
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
1555
|
-
readonly value: _angular_core.InputSignal<string | undefined>;
|
|
1556
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
1557
|
-
readonly placeholder: _angular_core.InputSignal<string | undefined>;
|
|
1558
|
-
readonly select: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1559
|
-
/** Estilos inline opcionales aplicados directamente al host. */
|
|
1560
|
-
readonly style: _angular_core.InputSignal<string | undefined>;
|
|
1561
|
-
/**
|
|
1562
|
-
* El placeholder solo tiene sentido cuando no hay `value` ni contenido
|
|
1563
|
-
* proyectado. Angular no expone de forma simple si `<ng-content>` recibió
|
|
1564
|
-
* hijos reales, así que la regla adoptada es puramente declarativa: se
|
|
1565
|
-
* muestra el placeholder cuando hay texto de placeholder y no hay `value`
|
|
1566
|
-
* (ver comentario de clase sobre la prioridad value > proyectado > placeholder).
|
|
1567
|
-
*/
|
|
1568
|
-
protected isPlaceholderVisible(): boolean;
|
|
1569
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Field, never>;
|
|
1570
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Field, "kf-field", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "select": { "alias": "select"; "required": false; "isSignal": true; }; "style": { "alias": "style"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1571
|
-
}
|
|
1572
|
-
|
|
1573
|
-
/**
|
|
1574
|
-
* Label superior compartido por todos los campos de formulario del design
|
|
1575
|
-
* system (páginas 11-12: Text Field, Select, Multiselect) — uppercase,
|
|
1576
|
-
* chico, gris, con letter-spacing amplio. El PDF fija un único tratamiento
|
|
1577
|
-
* ("PATENTE O VIN", "SUCURSAL", "SUCURSALES" usan exactamente el mismo
|
|
1578
|
-
* estilo), así que este componente es la única fuente de verdad: antes vivía
|
|
1579
|
-
* copiado por separado en `Input`, `Select`, `SelectMenu` y `MultiSelect`,
|
|
1580
|
-
* y dos de esas copias ya habían divergido del estilo real del PDF.
|
|
1581
|
-
*
|
|
1582
|
-
* No reemplaza al `<label>` nativo — lo envuelve, para no perder la
|
|
1583
|
-
* asociación de accesibilidad `for`/`id` con el control real.
|
|
1584
|
-
*
|
|
1585
|
-
* `required` agrega un asterisco visual en el tono de error, separado del
|
|
1586
|
-
* texto por un espacio y marcado `aria-hidden` — el estado obligatorio real
|
|
1587
|
-
* para lectores de pantalla lo comunica el propio control (`aria-required`
|
|
1588
|
-
* / `required` en el `<input>`/`<select>` asociado), no este label.
|
|
1589
|
-
*
|
|
1590
|
-
* <kf-field-label [for]="inputId">Patente o VIN</kf-field-label>
|
|
1591
|
-
* <kf-field-label [for]="inputId" required>Correo electrónico</kf-field-label>
|
|
1592
|
-
*/
|
|
1593
|
-
declare class FieldLabel {
|
|
1594
|
-
/** `id` del control asociado — se refleja como `for` en el `<label>` interno. */
|
|
1595
|
-
readonly for: _angular_core.InputSignal<string | undefined>;
|
|
1596
|
-
/** Muestra un asterisco visual indicando que el campo es obligatorio. */
|
|
1597
|
-
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1598
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FieldLabel, never>;
|
|
1599
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FieldLabel, "kf-field-label", never, { "for": { "alias": "for"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
1600
|
-
}
|
|
1601
|
-
|
|
1602
|
-
interface MultiSelectOption {
|
|
1603
|
-
value: string;
|
|
1604
|
-
label: string;
|
|
1605
|
-
}
|
|
1606
|
-
/**
|
|
1607
|
-
* Dropdown de selección múltiple con checkboxes internos. El panel flotante
|
|
1608
|
-
* se conecta al trigger vía `@angular/cdk/overlay` — el mismo mecanismo que
|
|
1609
|
-
* `Select` (ver `../select/Select.ts`) y `Dropdown` (`../dropdown/Dropdown.ts`).
|
|
1610
|
-
*
|
|
1611
|
-
* A diferencia de `Select`, el disparador no muestra un único valor sino los
|
|
1612
|
-
* nombres seleccionados junto a un badge circular con el conteo, y cada
|
|
1613
|
-
* opción del panel se marca/desmarca con un checkbox sin cerrar el panel.
|
|
1614
|
-
* Incluye una opción "Todas" al inicio de la lista, con estado
|
|
1615
|
-
* `indeterminate` cuando hay selección parcial — el mismo patrón de
|
|
1616
|
-
* "seleccionar todos" de `Checkbox`. "Todas" nunca se filtra por el buscador:
|
|
1617
|
-
* queda siempre visible y sigue actuando sobre el universo COMPLETO de
|
|
1618
|
-
* `options()`, no sobre el subconjunto filtrado (ver JSDoc de `toggleAll()`).
|
|
1619
|
-
*
|
|
1620
|
-
* <kf-multi-select
|
|
1621
|
-
* label="Sucursales"
|
|
1622
|
-
* [options]="branches"
|
|
1623
|
-
* [values]="selectedBranches()"
|
|
1624
|
-
* (valuesChange)="selectedBranches.set($event)"
|
|
1625
|
-
* />
|
|
1626
|
-
*
|
|
1627
|
-
* `width="full"` ocupa el 100% del contenedor — para multi-selects dentro
|
|
1628
|
-
* de layouts flex/grid donde el ancho fijo de `md` no encaja.
|
|
1629
|
-
*
|
|
1630
|
-
* <kf-multi-select width="full" [options]="branches" [values]="selectedBranches()" (valuesChange)="..." />
|
|
1631
|
-
*/
|
|
1632
|
-
declare class MultiSelect {
|
|
1633
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
1634
|
-
readonly options: _angular_core.InputSignal<MultiSelectOption[]>;
|
|
1635
|
-
readonly values: _angular_core.InputSignal<string[]>;
|
|
1636
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1637
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1638
|
-
/**
|
|
1639
|
-
* Ancho del control. 'md' (240px) es el default histórico y preserva el
|
|
1640
|
-
* comportamiento actual sin cambios para consumidores existentes.
|
|
1641
|
-
* 'full' ocupa el 100% del contenedor — para multi-selects dentro de
|
|
1642
|
-
* layouts flex/grid donde el ancho fijo no encaja (ej. un footer de
|
|
1643
|
-
* sidebar).
|
|
1644
|
-
*/
|
|
1645
|
-
readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
|
|
1646
|
-
/**
|
|
1647
|
-
* Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
|
|
1648
|
-
* se activa solo cuando `options().length` supera `searchThreshold()`. Si
|
|
1649
|
-
* el consumidor define `true`/`false` explícitamente, ese valor manda por
|
|
1650
|
-
* sobre el umbral automático. Mismo criterio que `Select`.
|
|
1651
|
-
*/
|
|
1652
|
-
readonly searchable: _angular_core.InputSignal<boolean | undefined>;
|
|
1653
|
-
readonly searchThreshold: _angular_core.InputSignal<number>;
|
|
1654
|
-
readonly valuesChange: _angular_core.OutputEmitterRef<string[]>;
|
|
1655
|
-
private readonly instanceId;
|
|
1656
|
-
readonly triggerId: string;
|
|
1657
|
-
readonly listboxId: string;
|
|
1658
|
-
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
1659
|
-
readonly searchQuery: _angular_core.WritableSignal<string>;
|
|
1660
|
-
readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
1661
|
-
readonly selectedCount: _angular_core.Signal<number>;
|
|
1662
|
-
readonly allSelected: _angular_core.Signal<boolean>;
|
|
1663
|
-
readonly isPartiallySelected: _angular_core.Signal<boolean>;
|
|
1664
|
-
readonly showSearch: _angular_core.Signal<boolean>;
|
|
1665
|
-
/** Opciones visibles tras aplicar el filtro de búsqueda ("Todas" nunca se filtra). */
|
|
1666
|
-
readonly filteredOptions: _angular_core.Signal<MultiSelectOption[]>;
|
|
1667
|
-
/**
|
|
1668
|
-
* Texto del disparador: placeholder si no hay selección, o los nombres
|
|
1669
|
-
* seleccionados unidos por coma (el conteo va aparte, en el badge). Con
|
|
1670
|
-
* muchas opciones el `text-overflow: ellipsis` del `.kf-multi-select__value`
|
|
1671
|
-
* corta el texto — el badge de conteo siempre queda visible al lado.
|
|
1672
|
-
*/
|
|
1673
|
-
readonly summaryText: _angular_core.Signal<string>;
|
|
1674
|
-
private readonly triggerRef;
|
|
1675
|
-
private readonly panelTemplate;
|
|
1676
|
-
private readonly searchInputRef;
|
|
1677
|
-
private readonly overlay;
|
|
1678
|
-
constructor();
|
|
1679
|
-
isSelected(value: string): boolean;
|
|
1680
|
-
toggle(): void;
|
|
1681
|
-
toggleOption(value: string): void;
|
|
1682
|
-
/**
|
|
1683
|
-
* Alterna entre "todas seleccionadas" y "ninguna seleccionada". Actúa
|
|
1684
|
-
* siempre sobre el universo COMPLETO de `options()`, no sobre
|
|
1685
|
-
* `filteredOptions()` — con un buscador activo, "Todas" no se filtra ni
|
|
1686
|
-
* cambia de significado: seguir marcando/desmarcando únicamente lo visible
|
|
1687
|
-
* sería sorprendente para quien ya tenía otras opciones (no visibles en el
|
|
1688
|
-
* filtro actual) seleccionadas de antes.
|
|
1689
|
-
*/
|
|
1690
|
-
toggleAll(): void;
|
|
1691
|
-
onSearchInput(event: Event): void;
|
|
1692
|
-
/** Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp simple, sin wraparound. */
|
|
1693
|
-
moveActive(delta: number): void;
|
|
1694
|
-
toggleActive(): void;
|
|
1695
|
-
onEscape(): void;
|
|
1696
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MultiSelect, never>;
|
|
1697
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MultiSelect, "kf-multi-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valuesChange": "valuesChange"; }, never, never, true, never>;
|
|
1698
|
-
}
|
|
1699
|
-
|
|
1700
|
-
type FilterFieldType = 'select' | 'multi-select' | 'search';
|
|
1701
|
-
interface FilterFieldConfig {
|
|
1702
|
-
key: string;
|
|
1703
|
-
type: FilterFieldType;
|
|
1704
|
-
label?: string;
|
|
1705
|
-
placeholder?: string;
|
|
1706
|
-
width?: string;
|
|
1707
|
-
icon?: IconName;
|
|
1708
|
-
showDivider?: boolean;
|
|
1709
|
-
}
|
|
1710
|
-
type FilterValue = string | string[];
|
|
1711
|
-
interface FilterFieldChange {
|
|
1712
|
-
key: string;
|
|
1713
|
-
value: FilterValue;
|
|
1714
|
-
}
|
|
1715
|
-
/**
|
|
1716
|
-
* Fila de filtros config-driven (select / multi-select / búsqueda) para el
|
|
1717
|
-
* header de una tabla, compuesta con piezas YA existentes de la librería
|
|
1718
|
-
* (`kf-select`, `kf-multi-select`, `kf-input`, `kf-divider`, `kf-collapsible`).
|
|
1719
|
-
*
|
|
1720
|
-
* No tiene lógica de filtrado propia: solo renderiza los controles descritos
|
|
1721
|
-
* por `fields()` y emite `fieldChange` cuando alguno cambia — filtrar filas
|
|
1722
|
-
* sigue siendo responsabilidad de quien lo consume.
|
|
1723
|
-
*
|
|
1724
|
-
* En escritorio los campos se muestran en una fila; en mobile/tablet
|
|
1725
|
-
* (≤768px, mismo breakpoint que `kf-portal-header`) se colapsan dentro de un
|
|
1726
|
-
* `kf-collapsible`.
|
|
1727
|
-
*
|
|
1728
|
-
* <kf-filter
|
|
1729
|
-
* [fields]="[
|
|
1730
|
-
* { key: 'model', type: 'multi-select', label: 'Modelo', placeholder: 'Todos los modelos', showDivider: true },
|
|
1731
|
-
* { key: 'search', type: 'search', label: 'Buscar vehículo', placeholder: 'Ingresa N° de orden o placa', width: '280px' },
|
|
1732
|
-
* ]"
|
|
1733
|
-
* [values]="{ model: selectedModels(), search: searchTerm() }"
|
|
1734
|
-
* [options]="{ model: modelOptions() }"
|
|
1735
|
-
* (fieldChange)="onFieldChange($event)"
|
|
1736
|
-
* />
|
|
1737
|
-
*/
|
|
1738
|
-
declare class Filter {
|
|
1739
|
-
readonly fields: _angular_core.InputSignal<FilterFieldConfig[]>;
|
|
1740
|
-
readonly values: _angular_core.InputSignal<Record<string, FilterValue>>;
|
|
1741
|
-
readonly options: _angular_core.InputSignal<Record<string, string[]>>;
|
|
1742
|
-
readonly mobileTitle: _angular_core.InputSignal<string>;
|
|
1743
|
-
readonly fieldChange: _angular_core.OutputEmitterRef<FilterFieldChange>;
|
|
1744
|
-
protected readonly multiOptionsByKey: _angular_core.Signal<Record<string, MultiSelectOption[]>>;
|
|
1745
|
-
protected singleValueFor(key: string): string;
|
|
1746
|
-
protected multiValueFor(key: string): string[];
|
|
1747
|
-
protected fieldWidth(field: FilterFieldConfig): string;
|
|
1748
|
-
protected optionsFor(key: string): string[];
|
|
1749
|
-
protected multiOptionsFor(key: string): MultiSelectOption[];
|
|
1750
|
-
protected onFieldChange(key: string, value: FilterValue): void;
|
|
1751
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Filter, never>;
|
|
1752
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Filter, "kf-filter", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "values": { "alias": "values"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "mobileTitle": { "alias": "mobileTitle"; "required": false; "isSignal": true; }; }, { "fieldChange": "fieldChange"; }, never, never, true, never>;
|
|
1753
|
-
}
|
|
1754
|
-
|
|
1755
|
-
/** Forma normalizada interna de cada opción, ya resuelta a value/label. */
|
|
1756
|
-
interface FilterChipOption {
|
|
1757
|
-
value: string;
|
|
1758
|
-
label: string;
|
|
1759
|
-
}
|
|
1760
|
-
/**
|
|
1761
|
-
* Fila de chips tipo "pill" para filtros de una sola selección.
|
|
1762
|
-
*
|
|
1763
|
-
* Cada opción puede pasarse como string simple (se usa como value y label
|
|
1764
|
-
* a la vez) o como objeto { value, label } cuando el texto mostrado difiere
|
|
1765
|
-
* del valor interno.
|
|
1766
|
-
*
|
|
1767
|
-
* El chip activo se resalta con `--kf-color-primary` — mismo color de marca
|
|
1768
|
-
* que `kf-tabs`/`kf-select` para su propio estado activo, así el filtro
|
|
1769
|
-
* seleccionado se lee con el color del tema activo, no un negro fijo que
|
|
1770
|
-
* no cambia entre marcas.
|
|
1771
|
-
*
|
|
1772
|
-
* <kf-filter-chips [options]="['Todos', 'Activos', 'Archivados']"
|
|
1773
|
-
* [value]="filtro"
|
|
1774
|
-
* (valueChange)="filtro = $event" />
|
|
1775
|
-
*
|
|
1776
|
-
* <kf-filter-chips [options]="[{ value: 'all', label: 'Todos' }]"
|
|
1777
|
-
* [value]="filtro"
|
|
1778
|
-
* (valueChange)="filtro = $event" />
|
|
1779
|
-
*/
|
|
1780
|
-
declare class FilterChips {
|
|
1781
|
-
readonly options: _angular_core.InputSignal<(string | {
|
|
1782
|
-
value: string;
|
|
1783
|
-
label: string;
|
|
1784
|
-
})[]>;
|
|
1785
|
-
readonly value: _angular_core.InputSignal<string>;
|
|
1786
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
1787
|
-
/** Normaliza cada opción string/objeto a la forma { value, label }. */
|
|
1788
|
-
readonly normalizedOptions: _angular_core.Signal<FilterChipOption[]>;
|
|
1789
|
-
select(value: string): void;
|
|
1790
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FilterChips, never>;
|
|
1791
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FilterChips, "kf-filter-chips", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
1792
|
-
}
|
|
1793
|
-
|
|
1794
|
-
/** Un link del pie — legales, contacto, soporte. */
|
|
1795
|
-
interface FooterLink {
|
|
1796
|
-
label: string;
|
|
1797
|
-
href?: string;
|
|
1798
|
-
}
|
|
1799
|
-
/**
|
|
1800
|
-
* Pie de página general del portal (página 38): logo + copyright a la
|
|
1801
|
-
* izquierda, links legales/soporte empujados a la derecha. Logo y copyright
|
|
1802
|
-
* son inputs (cada portal del ecosistema — LATAM, OTD, Star — trae su
|
|
1803
|
-
* propia marca y texto legal); `links` es la lista de accesos, típicamente
|
|
1804
|
-
* placeholders hasta que existan destinos reales.
|
|
1805
|
-
*
|
|
1806
|
-
* <kf-footer
|
|
1807
|
-
* logoSrc="images/logo-kaufmann-dark.png"
|
|
1808
|
-
* logoAlt="Grupo Kaufmann"
|
|
1809
|
-
* copyright="© 2026 Kaufmann LATAM · Todos los derechos reservados"
|
|
1810
|
-
* [links]="[
|
|
1811
|
-
* { label: 'Políticas de privacidad' },
|
|
1812
|
-
* { label: 'Contacto' },
|
|
1813
|
-
* { label: 'Sugerencias y reclamos' },
|
|
1814
|
-
* ]"
|
|
1815
|
-
* />
|
|
1816
|
-
*/
|
|
1817
|
-
declare class Footer {
|
|
1818
|
-
readonly logoSrc: _angular_core.InputSignal<string | undefined>;
|
|
1819
|
-
readonly logoAlt: _angular_core.InputSignal<string>;
|
|
1820
|
-
readonly copyright: _angular_core.InputSignal<string>;
|
|
1821
|
-
readonly links: _angular_core.InputSignal<FooterLink[]>;
|
|
1822
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Footer, never>;
|
|
1823
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Footer, "kf-footer", never, { "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "copyright": { "alias": "copyright"; "required": true; "isSignal": true; }; "links": { "alias": "links"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
1824
|
-
}
|
|
1825
|
-
|
|
1826
|
-
/** Opciones de `formatNumber` — todas opcionales. */
|
|
1827
|
-
interface FormatNumberOptions {
|
|
1828
|
-
/** Cantidad de decimales a mostrar. Default `0`. */
|
|
1829
|
-
decimals?: number;
|
|
1830
|
-
/** Locale de `Intl`/`toLocaleString` — decide separador de miles y de
|
|
1831
|
-
* decimales. Default `'es'` (punto de miles, coma decimal). */
|
|
1832
|
-
locale?: string;
|
|
1833
|
-
}
|
|
1834
|
-
/**
|
|
1835
|
-
* Separador de miles genérico — sin signo, sin asumir que el valor es
|
|
1836
|
-
* dinero. Cubre casos como kilometraje/horómetro (`formatNumber(45231,
|
|
1837
|
-
* { locale: 'en-US' })` → `'45,231'`), no solo moneda.
|
|
1838
|
-
*
|
|
1839
|
-
* formatNumber(16800); // '16.800'
|
|
1840
|
-
* formatNumber(16800.5, { decimals: 2 }); // '16.800,50'
|
|
1841
|
-
* formatNumber(45231, { locale: 'en-US' }); // '45,231'
|
|
1842
|
-
*/
|
|
1843
|
-
declare function formatNumber(value: number, options?: FormatNumberOptions): string;
|
|
1844
|
-
/** Opciones de `formatCurrency` — extiende `FormatNumberOptions` con el
|
|
1845
|
-
* signo/prefijo de moneda. */
|
|
1846
|
-
interface FormatCurrencyOptions extends FormatNumberOptions {
|
|
1847
|
-
/** Símbolo o prefijo antepuesto al monto. Default `'$'`. */
|
|
1848
|
-
sign?: string;
|
|
1849
|
-
}
|
|
1850
|
-
/**
|
|
1851
|
-
* Formatea un monto de dinero — compone sobre `formatNumber` agregando el
|
|
1852
|
-
* signo. Mismos defaults que la convención de OTD (punto de miles, sin
|
|
1853
|
-
* decimales, prefijo `$`), overrideables para otra moneda/país/formato:
|
|
1854
|
-
*
|
|
1855
|
-
* formatCurrency(16800); // '$16.800'
|
|
1856
|
-
* formatCurrency(16800.5, { decimals: 2 }); // '$16.800,50'
|
|
1857
|
-
* formatCurrency(16800, { sign: '' }); // '16.800'
|
|
1858
|
-
* formatCurrency(16800, { sign: 'US$', locale: 'en-US' }); // 'US$16,800'
|
|
1859
|
-
*/
|
|
1860
|
-
declare function formatCurrency(amount: number, options?: FormatCurrencyOptions): string;
|
|
1861
|
-
/**
|
|
1862
|
-
* Inverso de `formatNumber` — recupera el número crudo de un valor ya
|
|
1863
|
-
* formateado con el mismo `locale`. Solo soporta `locale` cuyo separador de
|
|
1864
|
-
* miles y decimal sean `'.'`/`','` (`es`) o `','`/`'.'` (`en-US`) — son los
|
|
1865
|
-
* 2 casos reales del ecosistema hoy; si aparece un tercer locale con otros
|
|
1866
|
-
* separadores, extender acá antes de usarlo.
|
|
1867
|
-
*/
|
|
1868
|
-
declare function parseNumber(formatted: string, locale?: string): number;
|
|
1869
|
-
/**
|
|
1870
|
-
* Inverso de `formatCurrency` — recupera el número crudo de un monto ya
|
|
1871
|
-
* formateado, descartando cualquier signo/prefijo de moneda.
|
|
1872
|
-
*
|
|
1873
|
-
* parseCurrency('$16.800'); // 16800
|
|
1874
|
-
*/
|
|
1875
|
-
declare function parseCurrency(formatted: string, locale?: string): number;
|
|
1876
|
-
/** "12:40" — hora en formato de 24 horas. */
|
|
1877
|
-
declare function formatClockTime(date: Date): string;
|
|
1878
|
-
/**
|
|
1879
|
-
* Quita espacios (incluido cualquier espacio en blanco intermedio, no solo
|
|
1880
|
-
* al principio/final) y puntos de un identificador de documento — un
|
|
1881
|
-
* espacio invisible (ej. pegado por accidente desde otra fuente) es un
|
|
1882
|
-
* motivo de rechazo silencioso real que un usuario no sabe explicarse.
|
|
1883
|
-
* Genérico: sirve tanto para RUT (`formatChileanRut` ya lo usa por
|
|
1884
|
-
* dentro) como para cualquier otro identificador con el mismo problema.
|
|
1885
|
-
*
|
|
1886
|
-
* sanitizeDocumentId(' 51 00004-8 '); // '5100004-8'
|
|
1887
|
-
* sanitizeDocumentId('12.345.678-9'); // '12345678-9'
|
|
1888
|
-
*/
|
|
1889
|
-
declare function sanitizeDocumentId(raw: string): string;
|
|
1890
|
-
/**
|
|
1891
|
-
* Formatea un RUT chileno insertando el guion automáticamente a medida
|
|
1892
|
-
* que se escribe — igual que un input de tarjeta de crédito, el usuario
|
|
1893
|
-
* solo tipea dígitos (y opcionalmente `k`/`K` como dígito verificador) y
|
|
1894
|
-
* el guion aparece solo antes del último carácter. Solo da forma al
|
|
1895
|
-
* string — no valida si el dígito verificador es matemáticamente
|
|
1896
|
-
* correcto (ver `isValidChileanRut` para eso) ni si la cuenta existe
|
|
1897
|
-
* (eso lo confirma GAM del lado servidor al autenticar).
|
|
1898
|
-
*
|
|
1899
|
-
* formatChileanRut('123456789'); // '12345678-9'
|
|
1900
|
-
* formatChileanRut('5100004-8'); // '5100004-8' (ya formateado, idempotente)
|
|
1901
|
-
* formatChileanRut('5100004k'); // '5100004-k'
|
|
1902
|
-
* formatChileanRut('510000 4-8 '); // '5100004-8' (espacios ignorados)
|
|
1903
|
-
*/
|
|
1904
|
-
declare function formatChileanRut(raw: string): string;
|
|
1905
|
-
/**
|
|
1906
|
-
* Valida un RUT chileno YA formateado (`cuerpo-DV`, ej. `'12345678-9'`)
|
|
1907
|
-
* contra el algoritmo módulo 11 real — a diferencia del `pattern` de
|
|
1908
|
-
* `document-id.config.ts` en cada portal consumidor (que solo exige la
|
|
1909
|
-
* FORMA: dígitos + guion + dígito verificador), esta función confirma
|
|
1910
|
-
* que el dígito verificador sea matemáticamente correcto para ese
|
|
1911
|
-
* cuerpo. Sigue sin confirmar que la cuenta exista — eso solo lo sabe
|
|
1912
|
-
* GAM al autenticar — pero atrapa el error tipográfico más común
|
|
1913
|
-
* (invertir/cambiar un dígito) antes de intentar el login.
|
|
1914
|
-
*
|
|
1915
|
-
* isValidChileanRut('20236276-1'); // true (DV real de ese cuerpo)
|
|
1916
|
-
* isValidChileanRut('20236276-8'); // false (DV real es '1', no '8')
|
|
1917
|
-
* isValidChileanRut('no-es-rut'); // false (ni siquiera tiene la forma)
|
|
1918
|
-
*/
|
|
1919
|
-
declare function isValidChileanRut(rut: string): boolean;
|
|
1920
|
-
|
|
1921
|
-
/**
|
|
1922
|
-
* Input de formulario apilado: label arriba (en mayúsculas vía CSS), campo con
|
|
1923
|
-
* fondo gris que pasa a blanco con anillo de foco azul al enfocar.
|
|
1924
|
-
*
|
|
1925
|
-
* Implementa ControlValueAccessor, así que funciona con [(ngModel)] y con
|
|
1926
|
-
* Reactive Forms (formControl / formControlName), no es solo un wrapper visual.
|
|
1927
|
-
*
|
|
1928
|
-
* <kf-input label="Placa" icon="car" placeholder="ABC-123" hint="Formato: 3 letras + 3 números" />
|
|
1929
|
-
* <input kf-input formControlName="email" type="email" />
|
|
1930
|
-
*
|
|
1931
|
-
* `invalid` + `errorMessage` cubren el estado de error: con `invalid` el
|
|
1932
|
-
* borde pasa a rojo (`--kf-color-error`) y se setea `aria-invalid="true"` en
|
|
1933
|
-
* el `<input>` nativo; `errorMessage` reemplaza el `hint` neutro por un
|
|
1934
|
-
* mensaje en rojo con `role="alert"`, para que un lector de pantalla lo
|
|
1935
|
-
* anuncie apenas aparece (a diferencia de `hint`, que es solo informativo y
|
|
1936
|
-
* nunca interrumpe). Si se pasan ambos, `errorMessage` tiene prioridad
|
|
1937
|
-
* visual sobre `hint` — no tiene sentido mostrar los dos a la vez.
|
|
1938
|
-
*
|
|
1939
|
-
* <kf-input label="Correo" formControlName="email"
|
|
1940
|
-
* [invalid]="email.invalid && email.touched"
|
|
1941
|
-
* [errorMessage]="email.touched && email.hasError('required') ? 'Ingresa tu correo.' : undefined" />
|
|
1942
|
-
*
|
|
1943
|
-
* `toggleable` solo tiene efecto cuando `type="password"`: agrega un botón
|
|
1944
|
-
* de ojo al final del campo que alterna la visibilidad del valor tipeado
|
|
1945
|
-
* (cambia el `type` real del `<input>` nativo entre `password` y `text`,
|
|
1946
|
-
* nunca expone el valor en el DOM de otra forma). El botón es `type="button"`
|
|
1947
|
-
* — nunca dispara submit del form contenedor — y anuncia su acción con
|
|
1948
|
-
* `aria-label` dinámico y `aria-pressed`, ya que es un toggle, no un botón
|
|
1949
|
-
* de una sola acción.
|
|
1950
|
-
*
|
|
1951
|
-
* <kf-input type="password" label="Contraseña" toggleable formControlName="password" />
|
|
1952
|
-
*
|
|
1953
|
-
* `readonly` es distinto de `disabled`: un campo `disabled` no recibe foco
|
|
1954
|
-
* por teclado ni se puede seleccionar/copiar su texto (y se lee como
|
|
1955
|
-
* "deshabilitado" en un lector de pantalla); un campo `readonly` sí — el
|
|
1956
|
-
* valor se puede ver, enfocar y copiar, solo no se puede editar. Usar
|
|
1957
|
-
* `readonly` para mostrar un dato existente que el usuario puede querer
|
|
1958
|
-
* copiar (ej. un documento de identidad en un formulario de perfil), y
|
|
1959
|
-
* `disabled` para un campo genuinamente inactivo (ej. mientras un guardado
|
|
1960
|
-
* está en vuelo).
|
|
1961
|
-
*
|
|
1962
|
-
* <kf-input label="DNI" readonly formControlName="documentId" />
|
|
1963
|
-
*/
|
|
1964
|
-
declare class Input implements ControlValueAccessor, AfterViewInit {
|
|
1965
|
-
private static nextId;
|
|
1966
|
-
private readonly nativeInput;
|
|
1967
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
1968
|
-
/** Marca el label con un asterisco visual y aplica `required` al `<input>`
|
|
1969
|
-
* nativo — el atributo HTML ya expone el estado obligatorio a lectores de
|
|
1970
|
-
* pantalla (mapeo implícito a `aria-required`), sin necesidad de un
|
|
1971
|
-
* `aria-required` explícito redundante. */
|
|
1972
|
-
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1973
|
-
/** Ícono líder, renderizado vía `kf-icon`. */
|
|
1974
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
1975
|
-
readonly suffix: _angular_core.InputSignal<string | undefined>;
|
|
1976
|
-
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
1977
|
-
/** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
|
|
1978
|
-
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1979
|
-
/** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
|
|
1980
|
-
readonly errorMessage: _angular_core.InputSignal<string | undefined>;
|
|
1981
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1982
|
-
/** Ver JSDoc de la clase para la diferencia con `disabled`. No pasa por
|
|
1983
|
-
* Reactive Forms (a diferencia de `disabled`, que también puede llegar
|
|
1984
|
-
* vía `FormControl.disable()`) — es siempre una decisión explícita del
|
|
1985
|
-
* consumidor del componente. */
|
|
1986
|
-
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1987
|
-
readonly type: _angular_core.InputSignal<string>;
|
|
1988
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
1989
|
-
/** Agrega el botón de mostrar/ocultar — sin efecto si `type` no es `"password"`. */
|
|
1990
|
-
readonly toggleable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
1991
|
-
protected readonly inputId: string;
|
|
1992
|
-
protected readonly hintId: string;
|
|
1993
|
-
protected readonly errorId: string;
|
|
1994
|
-
protected readonly value: _angular_core.WritableSignal<string>;
|
|
1995
|
-
protected readonly focused: _angular_core.WritableSignal<boolean>;
|
|
1996
|
-
/** Deshabilitado por Reactive Forms (formControl.disable()). */
|
|
1997
|
-
private readonly disabledByForm;
|
|
1998
|
-
/** Disabled real: por input() directo o por el FormControl asociado. */
|
|
1999
|
-
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
2000
|
-
/** Estado interno del toggle — irrelevante si `showPasswordToggle()` es false. */
|
|
2001
|
-
protected readonly passwordVisible: _angular_core.WritableSignal<boolean>;
|
|
2002
|
-
/** El botón solo tiene sentido si el campo realmente es de contraseña. */
|
|
2003
|
-
protected readonly showPasswordToggle: _angular_core.Signal<boolean>;
|
|
2004
|
-
/**
|
|
2005
|
-
* `type` real que recibe el `<input>` nativo: igual a `type()` salvo
|
|
2006
|
-
* cuando el toggle está activo y visible, donde pasa a `text` para
|
|
2007
|
-
* mostrar el valor en claro sin cambiar `type()` en sí (evita que un
|
|
2008
|
-
* consumidor que lee `type()` desde afuera vea un valor inconsistente).
|
|
2009
|
-
*/
|
|
2010
|
-
protected readonly effectiveType: _angular_core.Signal<string>;
|
|
2011
|
-
private onChange;
|
|
2012
|
-
private onTouched;
|
|
2013
|
-
ngAfterViewInit(): void;
|
|
2014
|
-
writeValue(value: string): void;
|
|
2015
|
-
registerOnChange(fn: (value: string) => void): void;
|
|
2016
|
-
registerOnTouched(fn: () => void): void;
|
|
2017
|
-
setDisabledState(isDisabled: boolean): void;
|
|
2018
|
-
protected onInput(rawValue: string): void;
|
|
2019
|
-
protected onBlur(): void;
|
|
2020
|
-
/**
|
|
2021
|
-
* Alterna la visibilidad del valor. No dispara `onBlur`/pierde el foco:
|
|
2022
|
-
* el botón vive dentro del mismo `.kf-input__field`, así que un click acá
|
|
2023
|
-
* no debe tratarse como si el usuario hubiese abandonado el campo.
|
|
2024
|
-
*/
|
|
2025
|
-
protected onTogglePasswordVisibility(): void;
|
|
2026
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Input, never>;
|
|
2027
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Input, "kf-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "toggleable": { "alias": "toggleable"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
2028
|
-
}
|
|
2029
|
-
|
|
2030
|
-
type JourneyStepStatus = 'done' | 'current' | 'delayed' | 'pending';
|
|
2031
|
-
type JourneyStepperSurface = 'dark' | 'card';
|
|
2032
|
-
/**
|
|
2033
|
-
* Paleta de color de los estados, independiente de `orientation`:
|
|
2034
|
-
*
|
|
2035
|
-
* - `'brand'` (default): azul de marca para completado/actual, sin
|
|
2036
|
-
* semántica de semáforo. Para cuando horizontal y vertical representan
|
|
2037
|
-
* el mismo journey en distintos tamaños de pantalla.
|
|
2038
|
-
* - `'semantic'`: verde/amarillo/rojo real por paso (solo con
|
|
2039
|
-
* `orientation="vertical"`, la única con 4 estados incluido `delayed`).
|
|
2040
|
-
* Para cuando cada paso comunica su propio estado puntual.
|
|
2041
|
-
*/
|
|
2042
|
-
type JourneyStepperColorScheme = 'brand' | 'semantic';
|
|
2043
|
-
interface JourneyStep {
|
|
2044
|
-
key: string;
|
|
2045
|
-
label: string;
|
|
2046
|
-
icon: IconName;
|
|
2047
|
-
/** Solo con `orientation="vertical"` — en horizontal el status se calcula desde `currentStep`. */
|
|
2048
|
-
status?: JourneyStepStatus;
|
|
2049
|
-
/** Texto bajo el label — solo con `orientation="vertical"`. */
|
|
2050
|
-
date?: string;
|
|
2051
|
-
}
|
|
2052
|
-
/**
|
|
2053
|
-
* Progreso de un flujo de N pasos.
|
|
2054
|
-
*
|
|
2055
|
-
* - `orientation` (`'horizontal'` default | `'vertical'`): horizontal
|
|
2056
|
-
* deriva done/current/pending de `currentStep`; vertical usa
|
|
2057
|
-
* `steps[].status` explícito, con `delayed` como cuarto estado.
|
|
2058
|
-
* - `surface` (`'dark'` default | `'card'`): fondo sólido oscuro de marca,
|
|
2059
|
-
* o superficie clara con borde+sombra.
|
|
2060
|
-
* - `colorScheme` (`'brand'` default | `'semantic'`): ver `JourneyStepperColorScheme`.
|
|
2061
|
-
*
|
|
2062
|
-
* <kf-journey-stepper surface="card" [steps]="steps" [currentStep]="4" (stepClick)="onNavigate($event)" />
|
|
2063
|
-
* <kf-journey-stepper orientation="vertical" [steps]="unitSteps" />
|
|
2064
|
-
* <kf-journey-stepper orientation="vertical" colorScheme="semantic" [steps]="unitStepsWithDelays" />
|
|
2065
|
-
*/
|
|
2066
|
-
declare class JourneyStepper {
|
|
2067
|
-
readonly steps: _angular_core.InputSignal<JourneyStep[]>;
|
|
2068
|
-
readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
|
|
2069
|
-
readonly surface: _angular_core.InputSignal<JourneyStepperSurface>;
|
|
2070
|
-
readonly colorScheme: _angular_core.InputSignal<JourneyStepperColorScheme>;
|
|
2071
|
-
/** Índice del paso actual — solo con `orientation="horizontal"`. */
|
|
2072
|
-
readonly currentStep: _angular_core.InputSignal<number>;
|
|
2073
|
-
/** Se emite con `step.key` al clickear un paso — solo activo con `orientation="horizontal"`. */
|
|
2074
|
-
readonly stepClick: _angular_core.OutputEmitterRef<string>;
|
|
2075
|
-
private readonly track;
|
|
2076
|
-
private readonly destroyRef;
|
|
2077
|
-
/** `true` cuando el contenido desborda el ancho visible — controla el fade de los bordes. */
|
|
2078
|
-
protected readonly hasOverflow: _angular_core.WritableSignal<boolean>;
|
|
2079
|
-
protected readonly clickable: _angular_core.Signal<boolean>;
|
|
2080
|
-
constructor();
|
|
2081
|
-
private measureOverflow;
|
|
2082
|
-
protected readonly resolvedSteps: _angular_core.Signal<(JourneyStep & {
|
|
2083
|
-
status: JourneyStepStatus;
|
|
2084
|
-
})[]>;
|
|
2085
|
-
protected dotIcon(status: JourneyStepStatus, stepIcon: IconName): IconName;
|
|
2086
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<JourneyStepper, never>;
|
|
2087
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<JourneyStepper, "kf-journey-stepper", never, { "steps": { "alias": "steps"; "required": true; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "colorScheme": { "alias": "colorScheme"; "required": false; "isSignal": true; }; "currentStep": { "alias": "currentStep"; "required": false; "isSignal": true; }; }, { "stepClick": "stepClick"; }, never, never, true, never>;
|
|
2088
|
-
}
|
|
2089
|
-
|
|
2090
|
-
type LinkVariant = 'default' | 'muted';
|
|
2091
|
-
/**
|
|
2092
|
-
* Acción de bajo énfasis con apariencia de texto — "¿Olvidaste tu
|
|
2093
|
-
* contraseña?", "Volver a iniciar sesión", o un link real de navegación
|
|
2094
|
-
* como "Ir a pagos →".
|
|
2095
|
-
*
|
|
2096
|
-
* Sin `href` (default) es un `<button type="button">`: dispara una acción
|
|
2097
|
-
* en la misma pantalla, vía `(click)`. Con `href`, es un `<a>` real: navega
|
|
2098
|
-
* a otra URL. `showArrow` agrega un ícono `chevron-right` al final — para
|
|
2099
|
-
* el patrón "texto + flecha" de un link que lleva a otro lado.
|
|
2100
|
-
*
|
|
2101
|
-
* `variant="default"` (color primario, subrayado en hover) es para la
|
|
2102
|
-
* acción de mayor jerarquía relativa de la pantalla; `variant="muted"`
|
|
2103
|
-
* (gris que pasa a primario en hover) es para acciones de retroceso/salida.
|
|
2104
|
-
*
|
|
2105
|
-
* <kf-link (click)="onForgotPassword()">¿Olvidaste tu contraseña?</kf-link>
|
|
2106
|
-
* <kf-link variant="muted" (click)="onBack()">← Volver a iniciar sesión</kf-link>
|
|
2107
|
-
* <kf-link href="/pagos" showArrow>Ir a pagos</kf-link>
|
|
2108
|
-
*/
|
|
2109
|
-
declare class Link {
|
|
2110
|
-
readonly variant: _angular_core.InputSignal<LinkVariant>;
|
|
2111
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2112
|
-
/** Si se pasa, renderiza un `<a>` real en vez de `<button>` — navega en vez de disparar `(click)`. */
|
|
2113
|
-
readonly href: _angular_core.InputSignal<string | undefined>;
|
|
2114
|
-
/** Ícono `chevron-right` al final — para el patrón "texto + flecha" de un link que lleva a otro lado. */
|
|
2115
|
-
readonly showArrow: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2116
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Link, never>;
|
|
2117
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Link, "kf-link", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "showArrow": { "alias": "showArrow"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2118
|
-
}
|
|
2119
|
-
|
|
2120
|
-
/**
|
|
2121
|
-
* Motor de mapas configurado a nivel app, no por uso — mismo criterio que
|
|
2122
|
-
* `API_CONFIG` en `packages/api-client` de `route-assistance-monorepo`: el
|
|
2123
|
-
* access token de Mapbox es un dato de despliegue (cada app/entorno tiene
|
|
2124
|
-
* el propio), no algo que cada `<kf-map>` deba repetir.
|
|
2125
|
-
*/
|
|
2126
|
-
interface MapConfig {
|
|
2127
|
-
/** Access token público de Mapbox (`pk.*`) de la cuenta del proyecto que consume la librería. */
|
|
2128
|
-
accessToken: string;
|
|
2129
|
-
/**
|
|
2130
|
-
* Estilo de Mapbox Studio propio del cliente, si lo tiene. Cuando se
|
|
2131
|
-
* define, gana siempre sobre `theme()` del componente — un estilo de
|
|
2132
|
-
* marca custom no tiene una variante "light"/"dark" que elegir, ya viene
|
|
2133
|
-
* resuelto. Sin esto, `kf-map` usa el estilo `light-v11`/`dark-v11` de
|
|
2134
|
-
* Mapbox según `theme()`.
|
|
2135
|
-
*/
|
|
2136
|
-
styleUrl?: string;
|
|
2137
|
-
}
|
|
2138
|
-
declare const MAP_CONFIG: InjectionToken<MapConfig>;
|
|
2139
|
-
/**
|
|
2140
|
-
* `provide*` idiomático (mismo patrón que `provideHttpClient`/`provideRouter`)
|
|
2141
|
-
* para inyectar una sola vez en `app.config.ts` de cada app consumidora:
|
|
2142
|
-
*
|
|
2143
|
-
* providers: [provideMapConfig({ accessToken: 'pk.xxx' })]
|
|
2144
|
-
*/
|
|
2145
|
-
declare function provideMapConfig(config: MapConfig): Provider;
|
|
2146
|
-
|
|
2147
|
-
/**
|
|
2148
|
-
* Vocabulario de temas de `kf-map`, separado de `MapView.ts` para que
|
|
2149
|
-
* `MapThemePicker` (el panel flotante del control `mapStyle`) pueda
|
|
2150
|
-
* importarlo sin crear un ciclo `MapView → MapControls → MapThemePicker →
|
|
2151
|
-
* MapView`.
|
|
2152
|
-
*
|
|
2153
|
-
* `streets`/`satellite`/`outdoors` se suman a los `light`/`dark`
|
|
2154
|
-
* originales — los 3 IDs de estilo (`streets-v12`, `satellite-streets-v12`,
|
|
2155
|
-
* `outdoors-v12`) están confirmados contra la cuenta/token real del
|
|
2156
|
-
* ecosistema: la API de estilos de Mapbox es por cuenta, no por versión de
|
|
2157
|
-
* `mapbox-gl`, así que cualquier duda se resuelve probando contra el token
|
|
2158
|
-
* real, no leyendo el número de versión instalado.
|
|
2159
|
-
*/
|
|
2160
|
-
type MapTheme = 'light' | 'dark' | 'streets' | 'satellite' | 'outdoors';
|
|
2161
|
-
declare const STYLE_BY_THEME: Record<MapTheme, string>;
|
|
2162
|
-
/** Orden fijo en que `MapThemePicker` lista las 5 opciones — predecible
|
|
2163
|
-
* (siempre el mismo orden en toda pantalla que use el picker), no importa
|
|
2164
|
-
* cuál esté activa. */
|
|
2165
|
-
declare const THEME_ORDER: MapTheme[];
|
|
2166
|
-
/** Nombre en español de cada tema, para el `aria-label`/label del control
|
|
2167
|
-
* `mapStyle` y las opciones del picker — anuncia qué tema rige HOY o qué
|
|
2168
|
-
* tema se está por elegir, no solo "otro tema distinto". */
|
|
2169
|
-
declare const THEME_LABEL: Record<MapTheme, string>;
|
|
2170
|
-
|
|
2171
|
-
/**
|
|
2172
|
-
* Cada pieza es independiente entre sí — agregar/sacar un `MapControlKind`
|
|
2173
|
-
* de `controls` en `kf-map` no reacomoda ni afecta a los demás. Array vacío
|
|
2174
|
-
* (default de `kf-map`) es "ningún control": opt-in explícito del
|
|
2175
|
-
* consumidor, nunca activado por default (ver JSDoc de `controls` en
|
|
2176
|
-
* `MapView.ts`).
|
|
2177
|
-
*
|
|
2178
|
-
* zoom — botones +/- reales (`map.zoomIn()`/`zoomOut()`).
|
|
2179
|
-
* fullscreen — expandir/contraer el mapa (Fullscreen API nativa).
|
|
2180
|
-
* mapStyle — ciclar entre los temas de `MapTheme`.
|
|
2181
|
-
* recenter — re-ejecuta el encuadre a markers/route bajo demanda.
|
|
2182
|
-
* cluster — togglear agrupamiento nativo de markers cercanos.
|
|
2183
|
-
* follow — la cámara sigue al marker `live` mientras se mueve.
|
|
2184
|
-
*/
|
|
2185
|
-
type MapControlKind = 'zoom' | 'fullscreen' | 'mapStyle' | 'recenter' | 'cluster' | 'follow';
|
|
2186
|
-
/**
|
|
2187
|
-
* Barra de controles flotantes de `kf-map` — pieza puramente presentacional,
|
|
2188
|
-
* sin estado propio: todo lo que sabe se lo pasa `MapView` por input, todo
|
|
2189
|
-
* lo que hace lo reporta por output para que `MapView` (única dueña del
|
|
2190
|
-
* `Map` de Mapbox) decida qué hacer. Vive en la misma carpeta que `MapView`
|
|
2191
|
-
* a propósito (mismo criterio que `DropdownItem`/`DropdownPanel` con
|
|
2192
|
-
* `Dropdown`): el acoplamiento es real, no de nombre — no tiene sentido
|
|
2193
|
-
* fuera de un `kf-map` que la controle.
|
|
2194
|
-
*
|
|
2195
|
-
* Un solo stack vertical, siempre en la esquina superior derecha del mapa
|
|
2196
|
-
* (fijado por `MapView.css`, no acá): es donde ya vivía el `NavigationControl`
|
|
2197
|
-
* de Mapbox que este componente reemplaza, y la atribución obligatoria de
|
|
2198
|
-
* Mapbox (`AttributionControl`, nunca oculta) vive abajo-derecha — un solo
|
|
2199
|
-
* stack evita que dos grupos floten en esquinas distintas y compitan por
|
|
2200
|
-
* espacio en un mapa `size="sm"` de 200px de alto.
|
|
2201
|
-
*
|
|
2202
|
-
* El stack no es una lista continua de botones idénticos: cada grupo lógico
|
|
2203
|
-
* es su propia "card" flotante (`kf-radius-md`+`kf-shadow-md`+fondo blanco,
|
|
2204
|
-
* ver `.kf-map-controls__group` en `MapControls.css`), separadas entre sí
|
|
2205
|
-
* por el `gap` del `:host` — mismo lenguaje ya verificado visualmente en
|
|
2206
|
-
* `route-assistance-monorepo/design/mockups/operations-final.html`
|
|
2207
|
-
* (`.map__ctrl-group`). Orden fijo de arriba a abajo, independiente del
|
|
2208
|
-
* orden en el array `controls` del consumidor (para que dos pantallas que
|
|
2209
|
-
* piden los mismos controles en distinto orden se vean IGUAL):
|
|
2210
|
-
*
|
|
2211
|
-
* 1. zoom — magnificación (par +/-, unido por un divisor, sin gap entre sí).
|
|
2212
|
-
* 2. cámara — recenter + follow (posición de la cámara).
|
|
2213
|
-
* 3. datos — cluster (densidad de los markers, eje distinto de cámara).
|
|
2214
|
-
* 4. chrome — mapStyle + fullscreen (nada del mapa en sí).
|
|
2215
|
-
*
|
|
2216
|
-
* Cada grupo usa `@if` sobre AL MENOS UNO de sus controles (ej. el grupo de
|
|
2217
|
-
* cámara aparece con solo `recenter`, solo `follow`, o ambos) — agregar o
|
|
2218
|
-
* sacar un control nunca reacomoda ni depende de los demás grupos.
|
|
2219
|
-
*
|
|
2220
|
-
* Todos los botones siguen siendo `kf-button[variant=surface][shape=circle]`
|
|
2221
|
-
* — sin tocar `Button.ts`: el fondo/sombra propios de `surface` se anulan
|
|
2222
|
-
* SOLO dentro de un `.kf-map-controls__group` vía una custom property CSS
|
|
2223
|
-
* (ver el comentario junto a esa clase en `MapControls.css` sobre por qué
|
|
2224
|
-
* eso sí atraviesa la encapsulación de Angular y un selector normal no).
|
|
2225
|
-
*/
|
|
2226
|
-
declare class MapControls {
|
|
2227
|
-
readonly controls: _angular_core.InputSignal<MapControlKind[]>;
|
|
2228
|
-
readonly clusterActive: _angular_core.InputSignal<boolean>;
|
|
2229
|
-
readonly followActive: _angular_core.InputSignal<boolean>;
|
|
2230
|
-
/** Sin ningún marker `live`, togglear "seguir" no tendría ningún efecto
|
|
2231
|
-
* visible — se deshabilita en vez de dejar un botón que parece no hacer nada. */
|
|
2232
|
-
readonly canFollow: _angular_core.InputSignal<boolean>;
|
|
2233
|
-
readonly isFullscreen: _angular_core.InputSignal<boolean>;
|
|
2234
|
-
/** Nombre en español del tema actualmente resuelto (ej. "Calles"), para
|
|
2235
|
-
* anunciar en el `aria-label` del botón de estilo qué se está por perder,
|
|
2236
|
-
* no solo que "algo" va a cambiar. */
|
|
2237
|
-
readonly styleLabel: _angular_core.InputSignal<string>;
|
|
2238
|
-
/** Tema resuelto HOY (`light|dark|...`) — a diferencia de `styleLabel`
|
|
2239
|
-
* (ya traducido a texto), esto es lo que `MapThemePicker` necesita para
|
|
2240
|
-
* marcar la opción activa. */
|
|
2241
|
-
readonly activeTheme: _angular_core.InputSignal<MapTheme>;
|
|
2242
|
-
readonly zoomIn: _angular_core.OutputEmitterRef<void>;
|
|
2243
|
-
readonly zoomOut: _angular_core.OutputEmitterRef<void>;
|
|
2244
|
-
readonly recenter: _angular_core.OutputEmitterRef<void>;
|
|
2245
|
-
readonly followToggle: _angular_core.OutputEmitterRef<void>;
|
|
2246
|
-
readonly clusterToggle: _angular_core.OutputEmitterRef<void>;
|
|
2247
|
-
/** Reemplaza al viejo `styleCycle` (ciclado de un click): ahora el botón
|
|
2248
|
-
* `mapStyle` abre `MapThemePicker` y este output reporta la elección real
|
|
2249
|
-
* hecha ahí. */
|
|
2250
|
-
readonly themeSelect: _angular_core.OutputEmitterRef<MapTheme>;
|
|
2251
|
-
readonly fullscreenToggle: _angular_core.OutputEmitterRef<void>;
|
|
2252
|
-
/** Visibilidad del panel de temas — estado puramente de UI (abierto o no),
|
|
2253
|
-
* no de negocio: `MapView` no necesita saberlo, así que vive acá y no
|
|
2254
|
-
* rompe el criterio de "sin estado propio" del resto de la clase (ver
|
|
2255
|
-
* JSDoc). Se cierra solo (click afuera/Escape) vía `kf-dropdown`, y acá
|
|
2256
|
-
* además al elegir un tema. */
|
|
2257
|
-
protected readonly mapStyleOpen: _angular_core.WritableSignal<boolean>;
|
|
2258
|
-
protected onThemeSelect(theme: MapTheme): void;
|
|
2259
|
-
protected readonly hasZoom: _angular_core.Signal<boolean>;
|
|
2260
|
-
protected readonly hasRecenter: _angular_core.Signal<boolean>;
|
|
2261
|
-
protected readonly hasFollow: _angular_core.Signal<boolean>;
|
|
2262
|
-
protected readonly hasCluster: _angular_core.Signal<boolean>;
|
|
2263
|
-
protected readonly hasMapStyle: _angular_core.Signal<boolean>;
|
|
2264
|
-
protected readonly hasFullscreen: _angular_core.Signal<boolean>;
|
|
2265
|
-
/** El grupo "cámara" (card) aparece con solo `recenter`, solo `follow`, o
|
|
2266
|
-
* ambos — ver JSDoc de la clase sobre por qué cada `@if` de grupo cubre
|
|
2267
|
-
* "al menos uno de sus controles" en vez de un control puntual. */
|
|
2268
|
-
protected readonly hasCamera: _angular_core.Signal<boolean>;
|
|
2269
|
-
protected readonly hasChrome: _angular_core.Signal<boolean>;
|
|
2270
|
-
/**
|
|
2271
|
-
* Texto corto que revela cada botón en hover/foco vía `[kfTooltip]` (ver
|
|
2272
|
-
* `MapControls.html` — la librería ya resuelve este patrón con
|
|
2273
|
-
* `TooltipDirective`, no con CSS a mano) — la misma acción que ya describe
|
|
2274
|
-
* `ariaLabel`, condensada para caber en una píldora en vez de leerse como
|
|
2275
|
-
* oración completa. No reemplaza `ariaLabel` (que sigue siendo la fuente
|
|
2276
|
-
* real para lectores de pantalla): esto es SOLO visual, para quien puede
|
|
2277
|
-
* ver el mapa pero no sabe qué hace un ícono suelto.
|
|
2278
|
-
*/
|
|
2279
|
-
protected readonly followLabel: _angular_core.Signal<"Dejar de seguir" | "Seguir">;
|
|
2280
|
-
protected readonly clusterLabel: _angular_core.Signal<"Desagrupar" | "Agrupar">;
|
|
2281
|
-
protected readonly mapStyleLabel: _angular_core.Signal<string>;
|
|
2282
|
-
protected readonly fullscreenLabel: _angular_core.Signal<"Salir de pantalla completa" | "Pantalla completa">;
|
|
2283
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapControls, never>;
|
|
2284
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapControls, "kf-map-controls", never, { "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "clusterActive": { "alias": "clusterActive"; "required": false; "isSignal": true; }; "followActive": { "alias": "followActive"; "required": false; "isSignal": true; }; "canFollow": { "alias": "canFollow"; "required": false; "isSignal": true; }; "isFullscreen": { "alias": "isFullscreen"; "required": false; "isSignal": true; }; "styleLabel": { "alias": "styleLabel"; "required": false; "isSignal": true; }; "activeTheme": { "alias": "activeTheme"; "required": false; "isSignal": true; }; }, { "zoomIn": "zoomIn"; "zoomOut": "zoomOut"; "recenter": "recenter"; "followToggle": "followToggle"; "clusterToggle": "clusterToggle"; "themeSelect": "themeSelect"; "fullscreenToggle": "fullscreenToggle"; }, never, never, true, never>;
|
|
2285
|
-
}
|
|
2286
|
-
|
|
2287
|
-
type MapSize = 'sm' | 'md' | 'lg' | 'full';
|
|
2288
|
-
type MapVariant = 'interactive' | 'preview';
|
|
2289
|
-
/** Vocabulario semántico único de tono, compartido con `TextTone`/`StatTileTone`. */
|
|
2290
|
-
type MapMarkerTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
|
|
2291
|
-
interface MapLatLng {
|
|
2292
|
-
lat: number;
|
|
2293
|
-
lng: number;
|
|
2294
|
-
}
|
|
2295
|
-
/**
|
|
2296
|
-
* Botón de acción real dentro de `MapMarker.popup` — cada click emite
|
|
2297
|
-
* `markerAction` con su `key` (nunca el `label`, ver JSDoc de `popup` más
|
|
2298
|
-
* abajo). `icon` es OPCIONAL a propósito: no romper a los consumidores que
|
|
2299
|
-
* ya usaban `actions` sin él (era el único campo hasta esta ronda).
|
|
2300
|
-
*
|
|
2301
|
-
* La jerarquía visual entre acciones NO es un campo aparte (`variant`) sino
|
|
2302
|
-
* la POSICIÓN en el array: la primera acción se renderiza con estilo
|
|
2303
|
-
* prominente (fill, mismo peso que `kf-button[variant=primary]`, el
|
|
2304
|
-
* default del botón); el resto con estilo discreto (mismo peso que
|
|
2305
|
-
* `kf-button[variant=ghost]` — ver el ejemplo de `Modal` con
|
|
2306
|
-
* `variant="ghost"` para "Cancelar" junto a un primary implícito). Un
|
|
2307
|
-
* consumidor con una sola acción no necesita pensar en esto: esa acción ya
|
|
2308
|
-
* es "la primera".
|
|
2309
|
-
*/
|
|
2310
|
-
interface MapPopupAction {
|
|
2311
|
-
key: string;
|
|
2312
|
-
label: string;
|
|
2313
|
-
/** Ícono líder del catálogo de `kf-icon` — sin esto, la acción se ve solo
|
|
2314
|
-
* con texto (compatibilidad con `actions` ya declarado sin `icon`). */
|
|
2315
|
-
icon?: IconName;
|
|
2316
|
-
}
|
|
2317
|
-
interface MapMarker {
|
|
2318
|
-
position: MapLatLng;
|
|
2319
|
-
/** Sin `icon`, cae en `map-pin` — el pin genérico del catálogo. Se
|
|
2320
|
-
* ignora cuando el control `cluster` está activo (ver JSDoc de
|
|
2321
|
-
* `controls` — el clustering nativo resuelve por capas WebGL, no por
|
|
2322
|
-
* DOM, y ahí no hay dónde montar un `kf-icon`). */
|
|
2323
|
-
icon?: IconName;
|
|
2324
|
-
tone?: MapMarkerTone;
|
|
2325
|
-
/** Nombre accesible del marker (`aria-label`/`title`) — no abre un popup. */
|
|
2326
|
-
label?: string;
|
|
2327
|
-
/**
|
|
2328
|
-
* Identificador propio del consumidor (ej. el id del ticket/vehículo que
|
|
2329
|
-
* representa) — sin esto el marker no es clickeable: `kf-map` no tiene
|
|
2330
|
-
* forma de reportar "se hizo click en ESTE marker" sin algo que
|
|
2331
|
-
* identificarlo de vuelta hacia `markerSelect`. Opcional a propósito: un
|
|
2332
|
-
* mapa puramente decorativo (ej. la vista previa de `variant="preview"`)
|
|
2333
|
-
* no necesita que sus markers respondan a nada.
|
|
2334
|
-
*/
|
|
2335
|
-
id?: string;
|
|
2336
|
-
/**
|
|
2337
|
-
* Marca este marker como el punto que sigue la cámara cuando el control
|
|
2338
|
-
* `follow` está activo — ej. la posición en tiempo real de un vehículo o
|
|
2339
|
-
* técnico. Genérico a propósito (no `isVehicle` ni ningún nombre atado al
|
|
2340
|
-
* dominio de un portal): `@kaufmann-lab/ui` no sabe qué es un "vehículo",
|
|
2341
|
-
* solo que ALGÚN marker es el que se sigue. Si más de un marker lo marca,
|
|
2342
|
-
* se sigue el primero en `markers()`. Distinto de la geolocalización del
|
|
2343
|
-
* propio dispositivo (`navigator.geolocation`, fuera de alcance): esto
|
|
2344
|
-
* sigue un dato que el consumidor ya tiene, no ubica al usuario.
|
|
2345
|
-
*/
|
|
2346
|
-
live?: boolean;
|
|
2347
|
-
/**
|
|
2348
|
-
* Mini-card que aparece al hover/foco de este marker — solo si el marker
|
|
2349
|
-
* tiene `id` (ver JSDoc de arriba): sin `id` el marker no es clickeable ni
|
|
2350
|
-
* enfocable, así que no habría forma de revelarla por teclado.
|
|
2351
|
-
*
|
|
2352
|
-
* `actions` son botones REALES (no el viejo `ctaLabel` de texto plano sin
|
|
2353
|
-
* acción): cada click emite `markerAction` con su `key` — nunca el
|
|
2354
|
-
* `label`, que es solo texto de UI y puede repetirse con significados
|
|
2355
|
-
* distintos entre consumidores — y detiene la propagación del click para
|
|
2356
|
-
* no disparar además `markerSelect` sobre el marker completo (ver
|
|
2357
|
-
* `buildMarkerPopup()`).
|
|
2358
|
-
*
|
|
2359
|
-
* Vocabulario genérico a propósito (`title`/`description`/`details`/
|
|
2360
|
-
* `actions`, no `folio`/`cliente`/`verTicket`): esta librería no sabe qué
|
|
2361
|
-
* es un "ticket" — el caso de uso real (folio+cliente+estado+SLA+acciones)
|
|
2362
|
-
* es responsabilidad de quien arma cada `MapMarker`.
|
|
2363
|
-
*/
|
|
2364
|
-
popup?: {
|
|
2365
|
-
title: string;
|
|
2366
|
-
description?: string;
|
|
2367
|
-
/** Pares clave/valor extra (ej. estado + SLA) — se listan debajo de `description`. */
|
|
2368
|
-
details?: {
|
|
2369
|
-
label: string;
|
|
2370
|
-
value: string;
|
|
2371
|
-
}[];
|
|
2372
|
-
/** Botones de acción reales — ver JSDoc de `MapPopupAction`. */
|
|
2373
|
-
actions?: MapPopupAction[];
|
|
2374
|
-
};
|
|
2375
|
-
}
|
|
2376
|
-
/**
|
|
2377
|
-
* Mapa con motor real de Mapbox GL JS — decisión de producto ya cerrada
|
|
2378
|
-
* (comparación de 6 proveedores). El access token vive a nivel app, no por
|
|
2379
|
-
* uso: ver `provideMapConfig` en `map-config.ts` (mismo criterio que
|
|
2380
|
-
* `API_CONFIG` de `packages/api-client`), inyectado una vez en
|
|
2381
|
-
* `app.config.ts` de cada app consumidora.
|
|
2382
|
-
*
|
|
2383
|
-
* `size` (`sm|md|lg` alturas fijas, `full` llena el contenedor padre) NO
|
|
2384
|
-
* hace step-down por viewport como `kf-page-header`: ese mecanismo existe
|
|
2385
|
-
* ahí porque un tamaño de FUENTE fijo se corta en pantallas chicas; una
|
|
2386
|
-
* caja de mapa no tiene ese problema — el canvas de Mapbox ya es
|
|
2387
|
-
* responsive dentro de cualquier tamaño de contenedor. Lo que sí hace
|
|
2388
|
-
* falta (y que el header no necesita) es un `ResizeObserver` real: Mapbox
|
|
2389
|
-
* no se entera solo de que su contenedor cambió de tamaño (un layout que
|
|
2390
|
-
* colapsa un sidebar, un cambio de orientación) — hay que llamar
|
|
2391
|
-
* `map.resize()` a mano cuando el contenedor cambia (mismo motivo por el
|
|
2392
|
-
* que `fullscreenchange` también llama `resize()`, ver `onFullscreenChange`).
|
|
2393
|
-
*
|
|
2394
|
-
* `variant` es un eje ortogonal a `size` (mismo criterio que `variant` +
|
|
2395
|
-
* `tone` en `kf-badge`): `interactive` trae la posibilidad de controles
|
|
2396
|
-
* flotantes reales (ver `controls`); `preview` (`interactive: false` de
|
|
2397
|
-
* Mapbox GL) es para una card de lista, sin chrome y sin foco por teclado —
|
|
2398
|
-
* no hace nada al recibir foco, así que no debe formar parte del tab order,
|
|
2399
|
-
* y por eso NUNCA renderiza `controls` aunque el consumidor los pida:
|
|
2400
|
-
* togglear "seguir" o abrir pantalla completa no tiene sentido en un mapa
|
|
2401
|
-
* que no acepta interacción. Ninguna de las dos variantes oculta la
|
|
2402
|
-
* atribución: es requisito de licencia de Mapbox, no cosmético.
|
|
2403
|
-
*
|
|
2404
|
-
* `theme` (`light|dark|streets|satellite|outdoors`) resuelve el estilo real
|
|
2405
|
-
* de Mapbox — eje totalmente distinto del `[data-theme]` de
|
|
2406
|
-
* `tokens/themes/*` (paleta de marca de la librería): ninguno de los 5
|
|
2407
|
-
* temas de `tokens/` es oscuro todavía, así que no hay ninguna señal real
|
|
2408
|
-
* de la que derivar un default "según el tema de marca activo" — construir
|
|
2409
|
-
* esa detección ahora sería simular una señal que no existe.
|
|
2410
|
-
*
|
|
2411
|
-
* `controls` (`MapControlKind[]`, default `[]`) es siempre opt-in: un mapa
|
|
2412
|
-
* sin `controls` no dibuja ningún botón flotante, ni siquiera en
|
|
2413
|
-
* `interactive` (antes de esta versión, `interactive` agregaba el
|
|
2414
|
-
* `NavigationControl` default de Mapbox gratis — se sacó a propósito: era
|
|
2415
|
-
* el look genérico de Mapbox, no el de esta librería, exactamente la queja
|
|
2416
|
-
* que motivó este rediseño. Un consumidor que quería esos botones de zoom
|
|
2417
|
-
* ahora los pide con `[controls]="['zoom']"`). Cada kind es una pieza
|
|
2418
|
-
* independiente entre sí (ver `MapControls.ts` para el detalle de cada
|
|
2419
|
-
* una) — agregar una no reacomoda ni depende de las demás.
|
|
2420
|
-
*
|
|
2421
|
-
* <kf-map label="Ubicación del vehículo y del destino" [markers]="markers()" />
|
|
2422
|
-
* <kf-map size="sm" variant="preview" label="Vista previa de la ruta" [route]="route()" />
|
|
2423
|
-
* <kf-map label="Flota completa" [markers]="fleet()" [controls]="['zoom', 'recenter', 'cluster', 'follow']" />
|
|
2424
|
-
*/
|
|
2425
|
-
declare class MapView {
|
|
2426
|
-
readonly size: _angular_core.InputSignal<MapSize>;
|
|
2427
|
-
readonly variant: _angular_core.InputSignal<MapVariant>;
|
|
2428
|
-
readonly markers: _angular_core.InputSignal<MapMarker[]>;
|
|
2429
|
-
readonly route: _angular_core.InputSignal<MapLatLng[] | undefined>;
|
|
2430
|
-
readonly fitToMarkers: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2431
|
-
readonly center: _angular_core.InputSignal<MapLatLng | undefined>;
|
|
2432
|
-
readonly zoom: _angular_core.InputSignal<number | undefined>;
|
|
2433
|
-
/**
|
|
2434
|
-
* Default `'streets'`, no `'light'` ni `'dark'`. `'dark'` se probó
|
|
2435
|
-
* primero por coherencia con la paleta navy de marca, pero una
|
|
2436
|
-
* verificación visual real sobre una ubicación de servicio típica (una
|
|
2437
|
-
* faena/zona rural, no un centro urbano denso) mostró el problema real:
|
|
2438
|
-
* `dark-v11` casi no tiene datos que pintar fuera de ciudades grandes —
|
|
2439
|
-
* el mapa se ve prácticamente todo negro, ilegible, exactamente donde
|
|
2440
|
-
* más importa que se lea bien (ubicaciones de terreno, no de oficina).
|
|
2441
|
-
* `'streets'` SIEMPRE tiene cartografía base visible (calles, nombres,
|
|
2442
|
-
* uso de suelo) sin importar la densidad del lugar — es el único de los
|
|
2443
|
-
* 5 estilos sin ese riesgo. Sigue siendo overrideable por el consumidor. */
|
|
2444
|
-
readonly theme: _angular_core.InputSignal<MapTheme>;
|
|
2445
|
-
/** Controles flotantes a mostrar — ver JSDoc de la clase y `MapControls.ts`. */
|
|
2446
|
-
readonly controls: _angular_core.InputSignal<MapControlKind[]>;
|
|
2447
|
-
/**
|
|
2448
|
-
* Descripción accesible real del mapa — el `<div>` donde Mapbox renderiza
|
|
2449
|
-
* su canvas queda vacío de semántica para un lector de pantalla. Requerido
|
|
2450
|
-
* a propósito: un default genérico ("Mapa") no dice qué está mostrando
|
|
2451
|
-
* ESTE mapa; cada consumidor conoce su propio caso real (ej. "Ubicación
|
|
2452
|
-
* del vehículo y del destino").
|
|
2453
|
-
*/
|
|
2454
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
2455
|
-
/** Se emite al hacer click sobre un marker que declaró `id` (ver JSDoc de
|
|
2456
|
-
* `MapMarker.id`) — un marker SIN `id` no es clickeable, no emite nada.
|
|
2457
|
-
* No dispara en modo `cluster` (los markers pasan a ser capas WebGL sin
|
|
2458
|
-
* DOM propio donde colgar un listener) ni en `variant="preview"` (el
|
|
2459
|
-
* mapa entero no es interactivo ahí). */
|
|
2460
|
-
readonly markerSelect: _angular_core.OutputEmitterRef<string>;
|
|
2461
|
-
/** Se emite al clickear un botón de `MapMarker.popup.actions` — ver el
|
|
2462
|
-
* JSDoc de `popup` para por qué reporta `actionKey` (nunca el `label`) y
|
|
2463
|
-
* por qué el click no dispara además `markerSelect`. */
|
|
2464
|
-
readonly markerAction: _angular_core.OutputEmitterRef<{
|
|
2465
|
-
markerId: string;
|
|
2466
|
-
actionKey: string;
|
|
2467
|
-
}>;
|
|
2468
|
-
private readonly mapConfig;
|
|
2469
|
-
private readonly environmentInjector;
|
|
2470
|
-
private readonly document;
|
|
2471
|
-
private readonly destroyRef;
|
|
2472
|
-
private readonly hostElementRef;
|
|
2473
|
-
private readonly containerRef;
|
|
2474
|
-
/** `preview` no es foco-navegable ni se anuncia como región interactiva. */
|
|
2475
|
-
protected readonly isPreview: _angular_core.Signal<boolean>;
|
|
2476
|
-
protected readonly containerRole: _angular_core.Signal<"img" | "region">;
|
|
2477
|
-
/** Ver estado de carga/error real, más abajo (`status`). */
|
|
2478
|
-
protected readonly status: _angular_core.WritableSignal<"error" | "ready" | "loading">;
|
|
2479
|
-
/** Elección manual del consumidor final vía el control `mapStyle` — pisa
|
|
2480
|
-
* `theme()` de forma sostenida (no vuelve a `theme()` sola) hasta que se
|
|
2481
|
-
* destruya este `kf-map`; ver `resolvedTheme()`. */
|
|
2482
|
-
private readonly userTheme;
|
|
2483
|
-
protected readonly styleLabel: _angular_core.Signal<string>;
|
|
2484
|
-
/** Igual que `resolvedTheme()` pero público para el template — lo necesita
|
|
2485
|
-
* `MapThemePicker` (vía `MapControls`) para marcar la opción activa. */
|
|
2486
|
-
protected readonly activeTheme: _angular_core.Signal<MapTheme>;
|
|
2487
|
-
protected readonly clusterActive: _angular_core.WritableSignal<boolean>;
|
|
2488
|
-
protected readonly followActive: _angular_core.WritableSignal<boolean>;
|
|
2489
|
-
protected readonly hasLiveMarker: _angular_core.Signal<boolean>;
|
|
2490
|
-
protected readonly isFullscreen: _angular_core.WritableSignal<boolean>;
|
|
2491
|
-
/** Sin estilo de marca propio (Mapbox Studio) no hay nada que ciclar con
|
|
2492
|
-
* `mapStyle` — se filtra en vez de dejar un botón que no cambiaría nada. */
|
|
2493
|
-
protected readonly effectiveControls: _angular_core.Signal<MapControlKind[]>;
|
|
2494
|
-
protected readonly showControls: _angular_core.Signal<boolean>;
|
|
2495
|
-
private map;
|
|
2496
|
-
/** `extraIconRefs`: íconos de las acciones del popup (ver `buildMarkerPopup()`)
|
|
2497
|
-
* — se crean con `createComponent()` igual que `iconRef` (el pin), así que
|
|
2498
|
-
* necesitan el mismo `.destroy()` en `clearMarkers()`. */
|
|
2499
|
-
private markerHandles;
|
|
2500
|
-
/** Markers DOM reales sobre cada cluster real (punto 1, a11y) — separados
|
|
2501
|
-
* de `markerHandles` porque se reconstruyen en su propio ciclo (ver
|
|
2502
|
-
* `syncClusterMarkers()`) y no tienen `iconRef` propio (sin `kf-icon`
|
|
2503
|
-
* adentro, ver JSDoc de `addClusterMarkerToMap()`). */
|
|
2504
|
-
private clusterMarkerHandles;
|
|
2505
|
-
private resizeObserver;
|
|
2506
|
-
private currentStyle;
|
|
2507
|
-
private mapReady;
|
|
2508
|
-
/** Popup resumen de un cluster real (ver `renderClusterPopup()`) — a
|
|
2509
|
-
* diferencia del popup de marker individual (siempre en el DOM, mostrado
|
|
2510
|
-
* por CSS `:hover`/`:focus-within`), este se crea/destruye a demanda: no
|
|
2511
|
-
* cuelga de ningún elemento con estado hover propio, lo abre un click
|
|
2512
|
-
* sobre una capa WebGL sin DOM. */
|
|
2513
|
-
private clusterPopupElement;
|
|
2514
|
-
private clusterPopupIconRefs;
|
|
2515
|
-
/** Coordenadas del cluster abierto — necesarias para volver a proyectar
|
|
2516
|
-
* contra pantalla en cada `'move'` (ver `repositionClusterPopup()`); el
|
|
2517
|
-
* cluster en sí no se mueve, pero su posición EN PANTALLA sí cuando se
|
|
2518
|
-
* hace pan. */
|
|
2519
|
-
private clusterPopupCoordinates;
|
|
2520
|
-
private readonly onFullscreenChange;
|
|
2521
|
-
constructor();
|
|
2522
|
-
/**
|
|
2523
|
-
* El bundle default de `mapbox-gl` arma su Web Worker serializando el
|
|
2524
|
-
* código del worker como string y cargándolo por Blob URL — un bundler
|
|
2525
|
-
* ESM-nativo (esbuild, el builder `application` de Angular) minifica ESE
|
|
2526
|
-
* string también, sin saber que corre verbatim en otro contexto, y el
|
|
2527
|
-
* worker termina con un identificador roto en runtime
|
|
2528
|
-
* (`ReferenceError: <letra> is not defined`, ver mapbox/mapbox-gl-js#13700
|
|
2529
|
-
* y angular/angular-cli#27378). `workerClass` reemplaza ese mecanismo por
|
|
2530
|
-
* un `Worker` real armado con el patrón literal
|
|
2531
|
-
* `new Worker(new URL(..., import.meta.url), { type: 'module' })` — el
|
|
2532
|
-
* único que esbuild reconoce de forma ESTÁTICA y separa en su propio
|
|
2533
|
-
* chunk (esbuild lo detecta por análisis sintáctico puro, dondequiera que
|
|
2534
|
-
* el literal aparezca en el archivo — no hace falta que esté a nivel de
|
|
2535
|
-
* módulo). `mapbox-gl-csp.worker.js` es un asset copiado tal cual, nunca
|
|
2536
|
-
* TypeScript compilado, así que `import.meta.url` sigue apuntando a un
|
|
2537
|
-
* archivo real en cualquiera de los dos contextos donde esbuild procesa
|
|
2538
|
-
* este literal: en `ng test` (bundlea el `.ts` fuente tal cual, el asset
|
|
2539
|
-
* está al lado en `src/lib/map/`) y en el build real de un consumidor
|
|
2540
|
-
* (bundlea el FESM publicado — `ng-package.json` copia este mismo asset a
|
|
2541
|
-
* `dist/ui/fesm2022/`, junto al bundle aplanado, con esa carpeta EXACTA a
|
|
2542
|
-
* propósito). Ambos casos comparten la misma ruta relativa
|
|
2543
|
-
* (`./mapbox-gl-csp.worker.js`) porque el asset se coloca deliberadamente
|
|
2544
|
-
* al lado del consumidor en los dos. Si un cambio de Angular Package
|
|
2545
|
-
* Format renombra `fesm2022`, hay que actualizar el `output` en
|
|
2546
|
-
* `ng-package.json` a la par.
|
|
2547
|
-
*
|
|
2548
|
-
* A propósito NO es un side-effect de módulo (no corre con solo
|
|
2549
|
-
* `import`ar este archivo): un `<kf-map>` real en jsdom construye un
|
|
2550
|
-
* `Worker` real vía esta misma expresión, y jsdom no lo soporta — revienta
|
|
2551
|
-
* el proceso de Vitest entero, no solo el test, y se lleva puesto
|
|
2552
|
-
* CUALQUIER spec que solo importe algo del barrel de la librería (nada
|
|
2553
|
-
* que ver con mapas). Por eso vive acá, dentro de `initializeMap()`, que
|
|
2554
|
-
* únicamente corre cuando alguien de verdad instancia y renderiza este
|
|
2555
|
-
* componente — `MapView.spec.ts` mockea `mapbox-gl` entero, así que ahí
|
|
2556
|
-
* la asignación cae sobre el mock, no sobre el `mapboxgl` real.
|
|
2557
|
-
*/
|
|
2558
|
-
private assignWorkerClass;
|
|
2559
|
-
private initializeMap;
|
|
2560
|
-
private resolvedTheme;
|
|
2561
|
-
private resolvedStyle;
|
|
2562
|
-
private toLngLat;
|
|
2563
|
-
/**
|
|
2564
|
-
* `matchMedia` (no una media query CSS): esta preferencia decide la
|
|
2565
|
-
* `duration` que se le pasa a la API de cámara de Mapbox, que corre en
|
|
2566
|
-
* JS/WebGL — CSS no tiene nada que animar acá. `document.defaultView` (no
|
|
2567
|
-
* el `window` global) para que quede mockeable en test igual que el resto
|
|
2568
|
-
* de la clase usa `DOCUMENT` inyectado.
|
|
2569
|
-
*/
|
|
2570
|
-
private prefersReducedMotion;
|
|
2571
|
-
/** Colapsa cualquier duración a 0 (instantáneo, sin animar) si el usuario
|
|
2572
|
-
* pidió `prefers-reduced-motion: reduce` — un único punto de verdad para
|
|
2573
|
-
* que ningún movimiento de cámara se salga de esa preferencia. */
|
|
2574
|
-
private cameraDuration;
|
|
2575
|
-
private syncCamera;
|
|
2576
|
-
/**
|
|
2577
|
-
* Encuadra `bounds` con `fitBounds()`, salvo que sea una caja degenerada
|
|
2578
|
-
* (ver `DEGENERATE_BOUNDS_THRESHOLD_DEG`) — un solo punto total (un único
|
|
2579
|
-
* marker sin ruta, o vehículo+destino prácticamente en el mismo sitio) le
|
|
2580
|
-
* da a `fitBounds()` un ancho y alto ~cero, que Mapbox resuelve con un
|
|
2581
|
-
* `padding`/zoom que en la práctica deja el mapa mayormente en blanco
|
|
2582
|
-
* ("se ve todo blanco", el bug real que esto corrige). Un `easeTo` con
|
|
2583
|
-
* zoom fijo sensato muestra contexto real de calle en ese caso, animado
|
|
2584
|
-
* igual que el resto (antes era un `jumpTo` seco).
|
|
2585
|
-
*/
|
|
2586
|
-
private frameBounds;
|
|
2587
|
-
private isDegenerateBounds;
|
|
2588
|
-
/**
|
|
2589
|
-
* Extiende sobre markers Y route: el nombre del input sigue el caso de
|
|
2590
|
-
* uso principal (encuadrar los markers), pero un mapa con solo `route` y
|
|
2591
|
-
* sin `markers` tampoco debería quedar en el encuadre default inútil.
|
|
2592
|
-
*/
|
|
2593
|
-
private computeBounds;
|
|
2594
|
-
private syncMarkers;
|
|
2595
|
-
/**
|
|
2596
|
-
* Crea el marker de Mapbox (DOM + `kf-icon` + wiring de click/teclado/
|
|
2597
|
-
* popup) para UN `MapMarker` y lo agrega a `markerHandles` — compartido
|
|
2598
|
-
* entre el modo normal (`syncMarkers()`, todos los markers) y el modo
|
|
2599
|
-
* cluster (`syncClusterMarkers()`, solo los que quedan sueltos): un punto
|
|
2600
|
-
* suelto en modo cluster tiene que verse y comportarse EXACTAMENTE igual
|
|
2601
|
-
* que en modo normal, así que no puede haber dos implementaciones.
|
|
2602
|
-
*/
|
|
2603
|
-
private addMarkerToMap;
|
|
2604
|
-
/**
|
|
2605
|
-
* Mini-card hija del `<div>` del marker — mismo patrón que
|
|
2606
|
-
* `.kf-map-controls__label` (ver `MapControls.css`): un elemento SIEMPRE
|
|
2607
|
-
* presente en el DOM, oculto por defecto vía `opacity`/`pointer-events` en
|
|
2608
|
-
* `MapView.css` y revelado por CSS puro en `:hover`/`:focus-within` del
|
|
2609
|
-
* marker padre — sin JS de show/hide, y sin `mapboxgl.Popup` (evita una
|
|
2610
|
-
* segunda gestión de overlay/posicionamiento cuando el CSS ya alcanza acá,
|
|
2611
|
-
* igual que ya decidió `.kf-map-controls__label`).
|
|
2612
|
-
*
|
|
2613
|
-
* Todo el subárbol (título, descripción, `details`, `actions`) se arma con
|
|
2614
|
-
* `document.createElement` puro, nunca `kf-text`/`kf-button`: este marker
|
|
2615
|
-
* entero vive fuera del template de Angular (ver el comentario grande de
|
|
2616
|
-
* `ViewEncapsulation.None` más arriba) — meter un componente real acá
|
|
2617
|
-
* significaría un `createComponent()` propio por cada línea de texto, el
|
|
2618
|
-
* mismo costo que ya paga `kf-icon` en `syncMarkers()` pero sin ninguna
|
|
2619
|
-
* necesidad real (no hay nada dinámico que un componente resuelva mejor
|
|
2620
|
-
* que texto plano estilado por clase). Es la MISMA decisión que ya regía
|
|
2621
|
-
* para `title`/`description` antes de esta ronda — se extiende acá para no
|
|
2622
|
-
* mezclar dos convenciones distintas dentro del mismo fragmento de DOM.
|
|
2623
|
-
*
|
|
2624
|
-
* `actions` sí necesita wiring propio (a diferencia del resto de la card,
|
|
2625
|
-
* que burbujea su click al listener ya cableado sobre `element` en
|
|
2626
|
-
* `syncMarkers()`): cada botón corta esa burbuja con `stopPropagation()`
|
|
2627
|
-
* para reportar `markerAction` en vez de (además) `markerSelect`.
|
|
2628
|
-
*
|
|
2629
|
-
* Jerarquía visual de `actions` (ver JSDoc de `MapPopupAction`): la
|
|
2630
|
-
* PRIMERA acción del array es la principal (`--primary`, fill); el resto
|
|
2631
|
-
* es secundaria (`--ghost`, transparente) — mismo peso que ya usan
|
|
2632
|
-
* `kf-button[variant=primary]`/`[variant=ghost]` en el resto de la
|
|
2633
|
-
* librería, sin inventar un esquema de color nuevo acá.
|
|
2634
|
-
*
|
|
2635
|
-
* El punto de color junto al título (`kf-map__marker-popup-tone`) reusa
|
|
2636
|
-
* el `tone` del propio marker — no el de cada `details` (que son pares
|
|
2637
|
-
* label/value genéricos, sin un campo "cuál de estos es el estado"): es
|
|
2638
|
-
* la misma señal que YA pinta el círculo del marker en el mapa, mostrada
|
|
2639
|
-
* de nuevo acá para que el popup se lea sin tener que mirar el marker.
|
|
2640
|
-
*/
|
|
2641
|
-
private buildMarkerPopup;
|
|
2642
|
-
private clearMarkers;
|
|
2643
|
-
/**
|
|
2644
|
-
* Recorte de borde para el popup de marker individual (punto 2) —
|
|
2645
|
-
* `getBoundingClientRect()` del marker y del propio contenedor del mapa,
|
|
2646
|
-
* recalculado en el evento que dispara la apertura (`mouseenter`/
|
|
2647
|
-
* `focusin`, ver `addMarkerToMap()`). El mecanismo de mostrar/ocultar
|
|
2648
|
-
* sigue siendo 100% CSS; esto solo decide 3 clases modificadoras que
|
|
2649
|
-
* `MapView.css` traduce en alineación horizontal/vertical:
|
|
2650
|
-
*
|
|
2651
|
-
* `--align-start` — el popup se desborda por la izquierda del
|
|
2652
|
-
* contenedor si se centra sobre el marker: se alinea su borde
|
|
2653
|
-
* izquierdo con el del marker en vez de centrarlo.
|
|
2654
|
-
* `--align-end` — mismo caso, contra el borde derecho.
|
|
2655
|
-
* `--below` — no entra arriba del marker (cerca del borde superior del
|
|
2656
|
-
* contenedor): se muestra debajo en vez de arriba.
|
|
2657
|
-
*
|
|
2658
|
-
* El popup YA está en el DOM en este punto (oculto por `opacity`, no por
|
|
2659
|
-
* `display:none` — ver `MapView.css`), así que `getBoundingClientRect()`
|
|
2660
|
-
* devuelve su tamaño real aunque todavía no sea visible.
|
|
2661
|
-
*/
|
|
2662
|
-
private positionMarkerPopup;
|
|
2663
|
-
/**
|
|
2664
|
-
* Clustering nativo de Mapbox (`cluster: true` en la fuente GeoJSON, no un
|
|
2665
|
-
* algoritmo armado a mano) — 2 capas, solo para clusters REALES (2+
|
|
2666
|
-
* puntos agrupados, `has: point_count`): círculo agregado y su label de
|
|
2667
|
-
* cantidad. Un punto que Mapbox deja suelto (sin `point_count`) YA NO
|
|
2668
|
-
* tiene capa WebGL propia — ver `syncClusterMarkers()`, que lo renderiza
|
|
2669
|
-
* como el mismo marker DOM de siempre (con ícono/tono/popup reales, cosa
|
|
2670
|
-
* que una capa `circle` no puede mostrar).
|
|
2671
|
-
*/
|
|
2672
|
-
private syncClusterSource;
|
|
2673
|
-
/**
|
|
2674
|
-
* Contraparte en DOM de la capa WebGL: mientras esa capa solo dibuja
|
|
2675
|
-
* clusters reales, ESTE método decide qué puntos quedan sueltos al zoom
|
|
2676
|
-
* ACTUAL (`querySourceFeatures` con el mismo filtro `!has(point_count)`
|
|
2677
|
-
* que ya usa Mapbox para separar cluster de leaf) y les arma el mismo
|
|
2678
|
-
* marker DOM que tendrían sin clustering — vía `addMarkerToMap()`, la
|
|
2679
|
-
* MISMA función que usa el modo normal, no una copia.
|
|
2680
|
-
*
|
|
2681
|
-
* `querySourceFeatures` puede devolver una feature repetida si cae cerca
|
|
2682
|
-
* de un borde interno de tile — de ahí el `Set` sobre `index` (la
|
|
2683
|
-
* property que identifica al `MapMarker` de origen, ver
|
|
2684
|
-
* `markersToFeatureCollection()`), no una lista con posibles duplicados.
|
|
2685
|
-
* Mismo motivo (y mismo `Set`, esta vez sobre `cluster_id`) para los
|
|
2686
|
-
* clusters reales que se resuelven acá abajo.
|
|
2687
|
-
*
|
|
2688
|
-
* Se llama solo cuando `clusterActive()` — ver los listeners `'data'`/
|
|
2689
|
-
* `'moveend'` en `initializeMap()` sobre CUÁNDO se llama esto.
|
|
2690
|
-
*/
|
|
2691
|
-
private syncClusterMarkers;
|
|
2692
|
-
/**
|
|
2693
|
-
* Marker DOM real sobre un cluster (punto 1, a11y) — MISMO patrón de
|
|
2694
|
-
* wiring que `addMarkerToMap()` (`role="button"`, `tabindex="0"`,
|
|
2695
|
-
* `click`+`keydown` de Enter/Space), aplicado acá porque el círculo que
|
|
2696
|
-
* pinta `CLUSTER_CIRCLE_LAYER_ID` es una capa WebGL sin nodo DOM propio
|
|
2697
|
-
* —inalcanzable por teclado (WCAG SC 2.1.1 Keyboard). `mapboxgl.Marker`
|
|
2698
|
-
* posiciona y reproyecta este `<div>` solo en cada pan/zoom, igual que ya
|
|
2699
|
-
* hace con cualquier marker individual — no hace falta reposicionarlo a
|
|
2700
|
-
* mano como sí necesita el popup resumen (ver `repositionClusterPopup()`).
|
|
2701
|
-
*
|
|
2702
|
-
* Sin `kf-icon`/texto propio adentro a propósito: el círculo+conteo que ya
|
|
2703
|
-
* pinta la capa WebGL sigue siendo la representación visual (mismo
|
|
2704
|
-
* `'circle-radius'`, ver `clusterMarkerRadiusPx()`); este `<div>` es
|
|
2705
|
-
* transparente y se superpone exacto encima, aportando SOLO la
|
|
2706
|
-
* interactividad real que la capa WebGL no puede tener.
|
|
2707
|
-
*/
|
|
2708
|
-
private addClusterMarkerToMap;
|
|
2709
|
-
private clearClusterMarkers;
|
|
2710
|
-
/**
|
|
2711
|
-
* Activación de un cluster real (click O Enter/Space sobre su marker DOM,
|
|
2712
|
-
* ver `addClusterMarkerToMap()`): ANTES hacía zoom directo
|
|
2713
|
-
* (`getClusterExpansionZoom()` + `easeTo`) — ahora abre el popup resumen
|
|
2714
|
-
* (`renderClusterPopup()`) con la lista de tickets agrupados, y ESE zoom
|
|
2715
|
-
* pasa a ser la acción explícita "Acercar para separar" dentro del popup
|
|
2716
|
-
* (ver `expandCluster()`).
|
|
2717
|
-
*/
|
|
2718
|
-
private activateCluster;
|
|
2719
|
-
/** Dispara el zoom que antes hacía el click directo sobre el círculo —
|
|
2720
|
-
* ahora vive detrás del botón "Acercar para separar" del popup resumen. */
|
|
2721
|
-
private expandCluster;
|
|
2722
|
-
/**
|
|
2723
|
-
* `index` identifica de vuelta al `MapMarker` de origen (ver
|
|
2724
|
-
* `syncClusterMarkers()`); `title`/`description`/`markerId` son las
|
|
2725
|
-
* mismas properties que ya arma `buildMarkerPopup()` (folio/cliente/id
|
|
2726
|
-
* del caso real) — se serializan acá TAMBIÉN para que
|
|
2727
|
-
* `getClusterLeaves()` pueda listarlas en el popup resumen sin tener que
|
|
2728
|
-
* ir a buscar cada `MapMarker` original por separado. Los campos son
|
|
2729
|
-
* `string` (no `undefined`): las properties de una `Feature` de GeoJSON
|
|
2730
|
-
* no viajan bien como `undefined` — `''` significa "sin dato" en los 3.
|
|
2731
|
-
*/
|
|
2732
|
-
private markersToFeatureCollection;
|
|
2733
|
-
private clearClusterLayers;
|
|
2734
|
-
/**
|
|
2735
|
-
* Popup resumen de un cluster real (punto 4) — a diferencia del popup de
|
|
2736
|
-
* marker individual (siempre en el DOM, `:hover`/`:focus-within` puro),
|
|
2737
|
-
* este no cuelga de ningún elemento con estado hover propio: lo abre un
|
|
2738
|
-
* click sobre una capa WebGL sin DOM, así que se crea/destruye a demanda
|
|
2739
|
-
* y su visibilidad la maneja JS, no CSS. Se agrega como hijo del HOST
|
|
2740
|
-
* (`kf-map`, no `.kf-map__container`): ambos comparten exactamente la
|
|
2741
|
-
* misma caja (`.kf-map__container` es `width/height:100%` sin padding/
|
|
2742
|
-
* borde dentro de un host `position:relative`), así que las coordenadas
|
|
2743
|
-
* de `map.project()` (relativas al contenedor) valen también acá — mismo
|
|
2744
|
-
* ancestro posicionado que ya usa `.kf-map__overlay`.
|
|
2745
|
-
*
|
|
2746
|
-
* `title`/`description` de cada leaf son `popup.title`/`popup.description`
|
|
2747
|
-
* del `MapMarker` original (folio/cliente en el caso real) — ver
|
|
2748
|
-
* `markersToFeatureCollection()`. El punto de color reusa `tone`, MISMO
|
|
2749
|
-
* criterio que el punto de color del popup individual (ver JSDoc de
|
|
2750
|
-
* `buildMarkerPopup()`): no se inventa un texto de "estado" que la
|
|
2751
|
-
* librería no tiene, se reusa la señal de color que sí existe.
|
|
2752
|
-
*/
|
|
2753
|
-
private renderClusterPopup;
|
|
2754
|
-
/** Reproyecta el popup de cluster contra pantalla — se llama en cada
|
|
2755
|
-
* `'move'` (ver `initializeMap()`): el punto geográfico no se mueve, pero
|
|
2756
|
-
* su posición EN PANTALLA sí cuando se hace pan. Mismo criterio de
|
|
2757
|
-
* recorte de borde que `positionMarkerPopup()` (punto 2), pero en
|
|
2758
|
-
* píxeles calculados a mano en vez de clases CSS: este popup no cuelga
|
|
2759
|
-
* de un ancestro posicionado por CSS relativo al marker, su posición
|
|
2760
|
-
* ENTERA viene de `map.project()`. */
|
|
2761
|
-
private repositionClusterPopup;
|
|
2762
|
-
private closeClusterPopup;
|
|
2763
|
-
private syncRoute;
|
|
2764
|
-
private resolveColorToken;
|
|
2765
|
-
protected handleZoomIn(): void;
|
|
2766
|
-
protected handleZoomOut(): void;
|
|
2767
|
-
/** Reencuadra a demanda, ignorando `fitToMarkers()` (tiene sentido pedirlo
|
|
2768
|
-
* justo cuando `fitToMarkers` está en `false`) y sin apagar `follow`: si
|
|
2769
|
-
* está activo, la próxima posición nueva vuelve a pegar la cámara al
|
|
2770
|
-
* marker `live` — este reencuadre es una corrección puntual, no un modo. */
|
|
2771
|
-
protected handleRecenter(): void;
|
|
2772
|
-
protected handleFollowToggle(): void;
|
|
2773
|
-
protected handleClusterToggle(): void;
|
|
2774
|
-
/** Reemplaza al viejo ciclado de un click (`handleStyleCycle`): la
|
|
2775
|
-
* elección real llega desde `MapThemePicker`, vía `MapControls`. */
|
|
2776
|
-
protected handleThemeSelect(theme: MapTheme): void;
|
|
2777
|
-
protected handleFullscreenToggle(): void;
|
|
2778
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MapView, never>;
|
|
2779
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MapView, "kf-map", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "markers": { "alias": "markers"; "required": false; "isSignal": true; }; "route": { "alias": "route"; "required": false; "isSignal": true; }; "fitToMarkers": { "alias": "fitToMarkers"; "required": false; "isSignal": true; }; "center": { "alias": "center"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "controls": { "alias": "controls"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; }, { "markerSelect": "markerSelect"; "markerAction": "markerAction"; }, never, never, true, never>;
|
|
2780
|
-
}
|
|
2781
|
-
|
|
2782
|
-
/**
|
|
2783
|
-
* Signal reactivo con el estado actual de un media query — para cuando un
|
|
2784
|
-
* componente necesita SABER en qué lado de un breakpoint está (no solo
|
|
2785
|
-
* mostrar/ocultar con CSS). Un `@media` en `styles` no alcanza cuando la
|
|
2786
|
-
* decisión no es puramente visual: por ejemplo, un componente hijo que
|
|
2787
|
-
* recibe un input booleano (`[collapsed]`) no puede "leer" un breakpoint
|
|
2788
|
-
* CSS del padre — necesita que alguien en TypeScript se lo diga.
|
|
2789
|
-
*
|
|
2790
|
-
* Encontrado al construir `SidebarShell`: el estado `collapsed` (colapso
|
|
2791
|
-
* del rail en desktop) se pasaba tal cual a cada `kf-sidebar-nav-item`, sin
|
|
2792
|
-
* importar el viewport. En mobile, donde el rail deslizado siempre muestra
|
|
2793
|
-
* etiquetas completas (ver estilos de `SidebarShell`), los ítems seguían
|
|
2794
|
-
* ocultando su label si el usuario había dejado el rail colapsado en
|
|
2795
|
-
* desktop antes de achicar la ventana — un CSS que dice "en mobile se ve
|
|
2796
|
-
* ancho" no cambia el valor del input que ya llegó al hijo.
|
|
2797
|
-
*
|
|
2798
|
-
* Debe llamarse dentro de un contexto de inyección (el `constructor` de un
|
|
2799
|
-
* componente, o un campo de clase inicializado ahí — mismo requisito que
|
|
2800
|
-
* cualquier función que use `inject()`).
|
|
2801
|
-
*
|
|
2802
|
-
* protected readonly isMobile = matchMediaSignal('(max-width: 900px)');
|
|
2803
|
-
* // ...
|
|
2804
|
-
* [collapsed]="collapsed() && !isMobile()"
|
|
2805
|
-
*/
|
|
2806
|
-
declare function matchMediaSignal(query: string): Signal<boolean>;
|
|
2807
|
-
|
|
2808
|
-
/**
|
|
2809
|
-
* Card de estadística/KPI: label, valor grande, ícono opcional en la esquina
|
|
2810
|
-
* superior derecha, badge de esquina opcional (pegado al valor) y una nota
|
|
2811
|
-
* al pie. Pensada para tableros de resumen (ej. "11 Tickets abiertos").
|
|
2812
|
-
*
|
|
2813
|
-
* Compone sobre `kf-card` en vez de duplicar su estilo de contenedor — así
|
|
2814
|
-
* el look de "card" (radio, sombra, borde) tiene una única fuente de verdad
|
|
2815
|
-
* en toda la librería, tal como pide el design system (página 14: "Card...
|
|
2816
|
-
* es la base de paneles, tarjetas de métrica, tablas...").
|
|
2817
|
-
*
|
|
2818
|
-
* Slot `[actions]` opcional (proyectado al pie, después de `foot`) para un
|
|
2819
|
-
* CTA dentro de la card — ej. "Saldo Pendiente" con botón "Pagar Ahora" en
|
|
2820
|
-
* Fase 6 de OTD. Mismo mecanismo de proyección por selector que `[footer]`
|
|
2821
|
-
* en `kf-modal`, no un `<ng-content>` default: así una card sin acciones no
|
|
2822
|
-
* paga ningún espacio extra.
|
|
2823
|
-
*
|
|
2824
|
-
* <kf-metric-card label="Tickets abiertos" value="11" icon="ticket" foot="+2 hoy" />
|
|
2825
|
-
* <kf-metric-card label="Tasa de resolución" value="94%" badge="+2%" value-color="var(--kf-color-success)" />
|
|
2826
|
-
* <kf-metric-card label="Saldo Pendiente" value="$45,000">
|
|
2827
|
-
* <kf-button actions variant="primary" size="sm">Pagar Ahora</kf-button>
|
|
2828
|
-
* </kf-metric-card>
|
|
2829
|
-
*/
|
|
2830
|
-
declare class MetricCard {
|
|
2831
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
2832
|
-
readonly value: _angular_core.InputSignal<string | number>;
|
|
2833
|
-
readonly unit: _angular_core.InputSignal<string | undefined>;
|
|
2834
|
-
/** Ícono en la esquina superior derecha, renderizado vía `kf-icon`. */
|
|
2835
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
2836
|
-
readonly foot: _angular_core.InputSignal<string | undefined>;
|
|
2837
|
-
/** Tinte opcional para el valor grande (ej. un color semántico de estado). */
|
|
2838
|
-
readonly valueColor: _angular_core.InputSignal<string | undefined>;
|
|
2839
|
-
/** Badge de esquina opcional, pegado al valor (ej. "+2%"). */
|
|
2840
|
-
readonly badge: _angular_core.InputSignal<string | undefined>;
|
|
2841
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MetricCard, never>;
|
|
2842
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MetricCard, "kf-metric-card", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "foot": { "alias": "foot"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
|
|
2843
|
-
}
|
|
2844
|
-
|
|
2845
|
-
/**
|
|
2846
|
-
* Franja fija en la base de una pantalla completa para apps mobile del
|
|
2847
|
-
* ecosistema: encapsula el padding con `safe-area-inset-bottom` (para no
|
|
2848
|
-
* invadir la zona del home indicator), el borde superior y el fondo —
|
|
2849
|
-
* cualquier acción, chip de estado o hint que necesite vivir pegado al
|
|
2850
|
-
* borde inferior del dispositivo se proyecta acá vía `<ng-content>`.
|
|
2851
|
-
*
|
|
2852
|
-
* <kf-mobile-footer>
|
|
2853
|
-
* <kf-button>Cerrar orden</kf-button>
|
|
2854
|
-
* </kf-mobile-footer>
|
|
2855
|
-
*/
|
|
2856
|
-
declare class MobileFooter {
|
|
2857
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileFooter, never>;
|
|
2858
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileFooter, "kf-mobile-footer", never, {}, {}, never, ["*"], true, never>;
|
|
2859
|
-
}
|
|
2860
|
-
|
|
2861
|
-
/**
|
|
2862
|
-
* Encabezado de pantalla completa (fondo navy) para apps mobile del
|
|
2863
|
-
* ecosistema — cubre tanto la raíz de un tab (sin volver) como el detalle
|
|
2864
|
-
* de un flujo (con volver).
|
|
2865
|
-
*
|
|
2866
|
-
* <kf-mobile-header title="Mis asignaciones" />
|
|
2867
|
-
*
|
|
2868
|
-
* <kf-mobile-header title="STAR-20841" subtitle="Cerrado hoy · 15:18" [showBack]="true" (back)="onBack()" />
|
|
2869
|
-
*
|
|
2870
|
-
* Sin `kf-text` para `eyebrow`/`title`/`subtitle`: su `tone` es un set
|
|
2871
|
-
* cerrado sin blanco/inverso, y sus variantes fijan `color` explícito sobre
|
|
2872
|
-
* el elemento interno — un `color: white` heredado desde afuera nunca le
|
|
2873
|
-
* gana a esa declaración directa. Markup propio con los tokens reales.
|
|
2874
|
-
*
|
|
2875
|
-
* El botón "volver" tampoco es `kf-button`: su `variant="ghost"` fija el
|
|
2876
|
-
* mismo token de color que este fondo navy (el ícono quedaría invisible).
|
|
2877
|
-
*/
|
|
2878
|
-
declare class MobileHeader {
|
|
2879
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
2880
|
-
/** Línea chica y translúcida ARRIBA del título — ej. un folio o un saludo. */
|
|
2881
|
-
readonly eyebrow: _angular_core.InputSignal<string | undefined>;
|
|
2882
|
-
/** `true` cuando `eyebrow` es un código (folio) — usa tipografía monoespaciada. */
|
|
2883
|
-
readonly eyebrowMono: _angular_core.InputSignal<boolean>;
|
|
2884
|
-
/** Línea chica y translúcida DEBAJO del título — ej. "Cerrado hoy · 15:18". */
|
|
2885
|
-
readonly subtitle: _angular_core.InputSignal<string | undefined>;
|
|
2886
|
-
readonly showBack: _angular_core.InputSignal<boolean>;
|
|
2887
|
-
/** El componente no navega por sí solo: cada pantalla decide qué significa
|
|
2888
|
-
* "volver" (`Location.back()`, retroceder un paso del flujo, etc.). */
|
|
2889
|
-
readonly back: _angular_core.OutputEmitterRef<void>;
|
|
2890
|
-
protected onBackClick(): void;
|
|
2891
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<MobileHeader, never>;
|
|
2892
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<MobileHeader, "kf-mobile-header", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "eyebrow": { "alias": "eyebrow"; "required": false; "isSignal": true; }; "eyebrowMono": { "alias": "eyebrowMono"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "showBack": { "alias": "showBack"; "required": false; "isSignal": true; }; }, { "back": "back"; }, never, ["[kf-mobile-header-trailing]"], true, never>;
|
|
2893
|
-
}
|
|
2894
|
-
|
|
2895
|
-
/**
|
|
2896
|
-
* Diálogo centrado sobre un backdrop: confirmaciones destructivas, formularios
|
|
2897
|
-
* cortos, decisiones que bloquean el flujo.
|
|
2898
|
-
*
|
|
2899
|
-
* Se apoya en el `<dialog>` nativo (`showModal()`), así que el atrapado de
|
|
2900
|
-
* foco, el backdrop, el orden en el top-layer y el cierre con `Escape` los
|
|
2901
|
-
* resuelve el navegador — no hay trampa de foco escrita a mano acá. Lo único
|
|
2902
|
-
* que se agrega es el lock de scroll del body, que `<dialog>` no hace.
|
|
2903
|
-
*
|
|
2904
|
-
* `open` es two-way. Con `dismissible` en `false` (ej. mientras una acción
|
|
2905
|
-
* destructiva está en vuelo) se cancelan `Escape` y el clic en el backdrop:
|
|
2906
|
-
* solo cierra el consumidor poniendo `open` en `false`.
|
|
2907
|
-
*
|
|
2908
|
-
* Las acciones van en el slot `footer` — el atributo `footer` se pone
|
|
2909
|
-
* DIRECTO en cada `kf-button`, sin envolverlos en un `<div footer>`:
|
|
2910
|
-
* `.kf-modal__footer` ya es `display:flex` con `gap` propio entre sus
|
|
2911
|
-
* hijos DIRECTOS. Envolver los botones en un `<div>` intermedio dejaría
|
|
2912
|
-
* ese `<div>` como único hijo del footer — el gap nunca llegaría a
|
|
2913
|
-
* separar los botones entre sí (bug real encontrado en `web-otd-frontend`:
|
|
2914
|
-
* los 2 botones quedaban pegados, con 0px de separación medida, pese a que
|
|
2915
|
-
* el CSS del footer declaraba `gap: var(--kf-space-md)`).
|
|
2916
|
-
*
|
|
2917
|
-
* <kf-modal [(open)]="confirmOpen" title="Eliminar unidad">
|
|
2918
|
-
* <p>Esta acción no se puede deshacer.</p>
|
|
2919
|
-
* <kf-button footer variant="ghost" (click)="confirmOpen.set(false)">Cancelar</kf-button>
|
|
2920
|
-
* <kf-button footer (click)="remove()">Eliminar</kf-button>
|
|
2921
|
-
* </kf-modal>
|
|
2922
|
-
*
|
|
2923
|
-
* El footer agrupa todo a la derecha por defecto (`justify-content:
|
|
2924
|
-
* flex-end`) — para una acción secundaria/informativa que debe quedar
|
|
2925
|
-
* separada a la izquierda (ej. un link "Ver documento" junto a un botón
|
|
2926
|
-
* "Cerrar"), agregar la clase `kf-modal__footer-start` AL MISMO elemento
|
|
2927
|
-
* que ya lleva `footer`, no a un wrapper (mismo motivo que el `footer`
|
|
2928
|
-
* directo: un `<div>` intermedio rompe el `gap`):
|
|
2929
|
-
*
|
|
2930
|
-
* <kf-link footer class="kf-modal__footer-start" disabled>Ver documento</kf-link>
|
|
2931
|
-
* <kf-button footer (click)="open.set(false)">Cerrar</kf-button>
|
|
2932
|
-
*/
|
|
2933
|
-
declare class Modal {
|
|
2934
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
2935
|
-
/** Visibilidad, two-way: `[(open)]="confirmOpen"`. */
|
|
2936
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
2937
|
-
/** Permite cerrar con el botón, `Escape` o clic en el backdrop. */
|
|
2938
|
-
readonly dismissible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
2939
|
-
/** Ancho por defecto: `480px` (sin pasar nada). Un modal con contenido
|
|
2940
|
-
* tabular/ancho (ej. una lista de varios campos por fila) puede pedir
|
|
2941
|
-
* más, ej. `width="720px"` — sigue topeado por `100vw` en pantallas
|
|
2942
|
-
* angostas, mismo `min()` de siempre. */
|
|
2943
|
-
readonly width: _angular_core.InputSignal<string | null>;
|
|
2944
|
-
protected readonly titleId: string;
|
|
2945
|
-
private readonly dialog;
|
|
2946
|
-
private readonly document;
|
|
2947
|
-
private readonly overlayContainer;
|
|
2948
|
-
constructor();
|
|
2949
|
-
/** `Escape` dispara `cancel`; cancelarlo lo deja abierto. */
|
|
2950
|
-
protected onCancel(event: Event): void;
|
|
2951
|
-
/**
|
|
2952
|
-
* Clic en el backdrop. Un clic en la zona del backdrop tiene como `target` al
|
|
2953
|
-
* propio `<dialog>` (el contenido vive en el panel de adentro), así que basta
|
|
2954
|
-
* comparar contra él — no hace falta cortar la propagación en el panel.
|
|
2955
|
-
*
|
|
2956
|
-
* Va como HostListener y no como binding en el template porque un `(click)`
|
|
2957
|
-
* sobre el `<dialog>` dispara las reglas a11y de click-sin-teclado; acá el
|
|
2958
|
-
* equivalente de teclado es `Escape`, que el `<dialog>` nativo ya maneja.
|
|
2959
|
-
*/
|
|
2960
|
-
protected onHostClick(event: MouseEvent): void;
|
|
2961
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Modal, never>;
|
|
2962
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Modal, "kf-modal", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "dismissible": { "alias": "dismissible"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*", "[footer]"], true, never>;
|
|
2963
|
-
}
|
|
2964
|
-
|
|
2965
|
-
/** Color de la franja izquierda y del fondo. */
|
|
2966
|
-
type NoteBlockTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
|
|
2967
|
-
/**
|
|
2968
|
-
* Bloque de texto atribuido a una PERSONA: encabezado, prosa y firma al pie,
|
|
2969
|
-
* con fondo suave y franja de color — la anatomía de una cita, distinta de
|
|
2970
|
-
* `kf-alert` (que interrumpe el flujo con `role="alert"`). El texto va como
|
|
2971
|
-
* contenido proyectado y respeta los saltos de línea del autor.
|
|
2972
|
-
*/
|
|
2973
|
-
declare class NoteBlock {
|
|
2974
|
-
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
2975
|
-
/** Segunda pieza del encabezado, en la misma línea del `title`. */
|
|
2976
|
-
readonly subtitle: _angular_core.InputSignal<string | undefined>;
|
|
2977
|
-
/** Pie de atribución — quién escribió y cuándo, ya formateado. */
|
|
2978
|
-
readonly signature: _angular_core.InputSignal<string | undefined>;
|
|
2979
|
-
readonly tone: _angular_core.InputSignal<NoteBlockTone>;
|
|
2980
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<NoteBlock, never>;
|
|
2981
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<NoteBlock, "kf-note-block", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "signature": { "alias": "signature"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
2982
|
-
}
|
|
2983
|
-
|
|
2984
|
-
type TextAs = 'h1' | 'h2' | 'h3' | 'p' | 'span';
|
|
2985
|
-
type TextVariant = 'title-xxl' | 'title-xl' | 'title-lg' | 'title-md' | 'title-sm' | 'body' | 'body-muted' | 'caption' | 'overline' | 'overline-strong';
|
|
2986
|
-
type TextTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
|
|
2987
|
-
/**
|
|
2988
|
-
* Tipografía unificada — separa la etiqueta semántica (`as`, qué es el
|
|
2989
|
-
* texto para el DOM/accesibilidad) del estilo visual (`variant`, cómo se
|
|
2990
|
-
* ve). Antes de este componente, cada pantalla que consume la librería
|
|
2991
|
-
* definía su propio `h1`/`p` con `font-size` suelto para el mismo rol
|
|
2992
|
-
* (título de página, subtítulo, texto secundario) — auditoría sobre
|
|
2993
|
-
* `web-portal-latam-frontend` encontró 9 tamaños distintos entre login y
|
|
2994
|
-
* home sin ningún paso de escala en común. `variant` resuelve eso contra
|
|
2995
|
-
* la escala de `tokens/base.css` (`--kf-font-size-*`).
|
|
2996
|
-
*
|
|
2997
|
-
* `tone` sigue la misma convención cerrada que `Alert`/`Badge`/`Chip`: sin
|
|
2998
|
-
* escape hatch de color libre. Si un caso necesita un color que `tone` no
|
|
2999
|
-
* cubre, es una discusión de design system, no una prop nueva acá.
|
|
3000
|
-
*
|
|
3001
|
-
* `title-xl`/`title-xxl` son un tier aparte de `title-lg|md|sm`: no vienen
|
|
3002
|
-
* de la auditoría de contenido de página (esa cerró en 2.125rem), son para
|
|
3003
|
-
* títulos protagonistas de pantalla completa (ej. bienvenida del home vía
|
|
3004
|
-
* `kf-page-header[size=xl|xxl]`) — ver tokens/base.css.
|
|
3005
|
-
*
|
|
3006
|
-
* `overline`/`overline-strong` son para el patrón "texto chico en mayúsculas
|
|
3007
|
-
* junto a un dato" (ej. el label "RUC" de `kf-company-selector`, el badge de
|
|
3008
|
-
* `kf-admin-badge`) — antes de estas variantes, ese patrón se reimplementaba
|
|
3009
|
-
* suelto en al menos 7 componentes con tamaños/pesos ligeramente distintos
|
|
3010
|
-
* entre sí. `overline` (peso 600) es para labels sin chrome propio;
|
|
3011
|
-
* `overline-strong` (peso 700) es para el texto de un badge/pill que ya trae
|
|
3012
|
-
* su propio fondo. Ninguna de las dos fija color — como el resto de los
|
|
3013
|
-
* variants, el color se resuelve con `tone`.
|
|
3014
|
-
*
|
|
3015
|
-
* <kf-text as="h1" variant="title-lg">Bienvenido de nuevo</kf-text>
|
|
3016
|
-
* <kf-text as="p" variant="body-muted">Ingresá con tu cuenta corporativa.</kf-text>
|
|
3017
|
-
* <kf-text as="span" variant="caption" tone="error">Campo obligatorio</kf-text>
|
|
3018
|
-
* <kf-text as="span" variant="overline">RUC</kf-text>
|
|
3019
|
-
* <kf-text as="span" variant="overline-strong" tone="warn">Vista administrador</kf-text>
|
|
3020
|
-
*/
|
|
3021
|
-
declare class Text {
|
|
3022
|
-
/** Etiqueta semántica real que se renderiza — nunca es solo un `div`. */
|
|
3023
|
-
readonly as: _angular_core.InputSignal<TextAs>;
|
|
3024
|
-
readonly variant: _angular_core.InputSignal<TextVariant>;
|
|
3025
|
-
readonly tone: _angular_core.InputSignal<TextTone>;
|
|
3026
|
-
/**
|
|
3027
|
-
* Copia de `as` para uso dentro del template: `as` es palabra reservada
|
|
3028
|
-
* en las expresiones de Angular (`@if (x; as y)`), así que `@switch (as())`
|
|
3029
|
-
* no parsea — NG5002. La prop pública sigue llamándose `as` (es solo un
|
|
3030
|
-
* atributo HTML ahí, `<kf-text as="h1">`, no una expresión).
|
|
3031
|
-
*/
|
|
3032
|
-
protected readonly tag: _angular_core.Signal<TextAs>;
|
|
3033
|
-
protected hostClass(): string;
|
|
3034
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Text, never>;
|
|
3035
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Text, "kf-text", never, { "as": { "alias": "as"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
3036
|
-
}
|
|
3037
|
-
|
|
3038
|
-
/**
|
|
3039
|
-
* Tamaño del título. Cada valor mapea 1:1 a una variante `title-*` de
|
|
3040
|
-
* `kf-text`; `xl`/`xxl` son para títulos protagonistas (ej. bienvenida del
|
|
3041
|
-
* home). Bajo los 900px, el tamaño efectivo baja un escalón (ver
|
|
3042
|
-
* `MOBILE_STEP_DOWN`).
|
|
3043
|
-
*/
|
|
3044
|
-
type PageHeaderTitleSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
|
|
3045
|
-
/**
|
|
3046
|
-
* Bloque de título al tope de una página: chip de ícono opcional, título (h1),
|
|
3047
|
-
* subtítulo opcional y un área de acciones opcional proyectada vía
|
|
3048
|
-
* `<ng-content select="[actions]">`.
|
|
3049
|
-
*
|
|
3050
|
-
* <kf-page-header title="Vehículos" subtitle="Gestión de la flota activa">
|
|
3051
|
-
* <button actions>Nuevo vehículo</button>
|
|
3052
|
-
* </kf-page-header>
|
|
3053
|
-
*
|
|
3054
|
-
* <kf-page-header icon="settings" title="Configuración" />
|
|
3055
|
-
*
|
|
3056
|
-
* <kf-page-header size="xl" title="Bienvenido de nuevo" />
|
|
3057
|
-
*/
|
|
3058
|
-
declare class PageHeader {
|
|
3059
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
3060
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
3061
|
-
readonly subtitle: _angular_core.InputSignal<string | undefined>;
|
|
3062
|
-
readonly size: _angular_core.InputSignal<PageHeaderTitleSize>;
|
|
3063
|
-
private readonly isMobile;
|
|
3064
|
-
protected readonly resolvedTitleVariant: _angular_core.Signal<TextVariant>;
|
|
3065
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeader, never>;
|
|
3066
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeader, "kf-page-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
|
|
3067
|
-
}
|
|
3068
|
-
|
|
3069
|
-
/** Un número de página clickeable o un separador "…" no interactivo. */
|
|
3070
|
-
type PaginationItem = {
|
|
3071
|
-
type: 'page';
|
|
3072
|
-
page: number;
|
|
3073
|
-
} | {
|
|
3074
|
-
type: 'ellipsis';
|
|
3075
|
-
};
|
|
3076
|
-
/**
|
|
3077
|
-
* Paginador numerado con elipsis + prev/next.
|
|
3078
|
-
*
|
|
3079
|
-
* Algoritmo de elipsis estándar: siempre se muestran la primera página, la
|
|
3080
|
-
* última, la página actual y un par de vecinas alrededor de la actual; el
|
|
3081
|
-
* resto de los huecos se colapsa en un separador "…". Cuando el hueco entre
|
|
3082
|
-
* dos números visibles es de exactamente una página, se muestra ese número
|
|
3083
|
-
* en vez de un "…" (no tiene sentido colapsar un solo elemento).
|
|
3084
|
-
*
|
|
3085
|
-
* El contenido proyectado (`<ng-content>`) es para el texto informativo
|
|
3086
|
-
* opcional (ej. "21–40 de 273"), a la izquierda de los controles.
|
|
3087
|
-
*
|
|
3088
|
-
* <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event">
|
|
3089
|
-
* 21–40 de 273
|
|
3090
|
-
* </kf-pagination>
|
|
3091
|
-
*
|
|
3092
|
-
* Con `pageSizeOptions`, agrega un select de "N por página" entre el texto
|
|
3093
|
-
* informativo y los controles de navegación — el consumidor decide el
|
|
3094
|
-
* tamaño real vía `pageSize`/`pageSizeChange` (two-way opcional, ninguno de
|
|
3095
|
-
* los dos es requerido si no se usa el selector):
|
|
3096
|
-
*
|
|
3097
|
-
* <kf-pagination [page]="page" [pages]="totalPages" (pageChange)="page = $event"
|
|
3098
|
-
* [pageSizeOptions]="[10, 25, 50]" [(pageSize)]="pageSize">
|
|
3099
|
-
* 21–40 de 273
|
|
3100
|
-
* </kf-pagination>
|
|
3101
|
-
*/
|
|
3102
|
-
declare class Pagination {
|
|
3103
|
-
readonly page: _angular_core.InputSignal<number>;
|
|
3104
|
-
readonly pages: _angular_core.InputSignal<number>;
|
|
3105
|
-
readonly pageChange: _angular_core.OutputEmitterRef<number>;
|
|
3106
|
-
/** Opciones del selector "N por página" — sin esto, el selector no se
|
|
3107
|
-
* renderiza (mismo criterio que `[footer]`/`[actions]` de otros
|
|
3108
|
-
* componentes: ausente por default, nunca forzado). `kf-select` en
|
|
3109
|
-
* `variant="compact"` no impone un máximo de opciones, a diferencia de
|
|
3110
|
-
* `kf-segmented` (pensado solo para 2-3). */
|
|
3111
|
-
readonly pageSizeOptions: _angular_core.InputSignal<number[]>;
|
|
3112
|
-
readonly pageSize: _angular_core.ModelSignal<number | null>;
|
|
3113
|
-
/** Lista de números de página y separadores a renderizar, ya resuelta por el algoritmo de elipsis. */
|
|
3114
|
-
readonly items: _angular_core.Signal<PaginationItem[]>;
|
|
3115
|
-
/** Con una sola página (o ninguna), el `<nav>` de prev/next+números no
|
|
3116
|
-
* aporta nada navegable — antes se dejaba en el DOM igual (oculto solo
|
|
3117
|
-
* por un hack `::ng-deep` del consumidor, ver `route-assistance-monorepo`)
|
|
3118
|
-
* y el footer quedaba con el selector "Filas" descoordinado, como si le
|
|
3119
|
-
* faltara una pieza. Sacar el `<nav>` del DOM (no `display:none`) resuelve
|
|
3120
|
-
* esto para cualquier consumidor de `kf-pagination`, no solo para quien ya
|
|
3121
|
-
* tenía el hack. El `divider` reusa el mismo criterio: sin `nav` no hay
|
|
3122
|
-
* nada del otro lado que separar, así que tampoco corresponde dejarlo. */
|
|
3123
|
-
protected readonly hasNav: _angular_core.Signal<boolean>;
|
|
3124
|
-
/** `kf-select` trabaja con `value: string` — cada tamaño numérico se
|
|
3125
|
-
* mapea a su representación en texto, ida y vuelta. */
|
|
3126
|
-
protected readonly pageSizeSelectOptions: _angular_core.Signal<string[]>;
|
|
3127
|
-
protected readonly pageSizeValue: _angular_core.Signal<string>;
|
|
3128
|
-
protected setPageSize(value: string): void;
|
|
3129
|
-
goTo(target: number): void;
|
|
3130
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Pagination, never>;
|
|
3131
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Pagination, "kf-pagination", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "pages": { "alias": "pages"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSize": "pageSizeChange"; }, never, ["*"], true, never>;
|
|
3132
|
-
}
|
|
3133
|
-
|
|
3134
|
-
/**
|
|
3135
|
-
* Tarjeta contenedora con título, enlace de acción opcional a la derecha, y
|
|
3136
|
-
* cuerpo con contenido libre — página 33: "Base de la mayoría de bloques del
|
|
3137
|
-
* portal". Compone sobre `kf-card` para compartir la misma superficie
|
|
3138
|
-
* (radio, sombra, borde) que el resto de la librería.
|
|
3139
|
-
*
|
|
3140
|
-
* <kf-panel title="Mis documentos por pagar" actionLabel="Ir a pagos" actionHref="/pagos">
|
|
3141
|
-
* <kf-action-tile-row icon="download" title="Pagos" description="Revisa tu estado de cuenta y realiza pagos." />
|
|
3142
|
-
* </kf-panel>
|
|
3143
|
-
*
|
|
3144
|
-
* El host y el `kf-card` interno son flex column con `flex:1` de punta a
|
|
3145
|
-
* punta — si un grid/flex externo estira `kf-panel` a la altura de un
|
|
3146
|
-
* hermano más alto, el contenido proyectado hereda esa altura en vez de
|
|
3147
|
-
* dejar un hueco vacío bajo el `kf-card`. Sin esa presión externa (altura
|
|
3148
|
-
* "auto" del contenedor), `flex:1` no tiene espacio extra que repartir y el
|
|
3149
|
-
* panel se comporta igual que antes.
|
|
3150
|
-
*/
|
|
3151
|
-
declare class Panel {
|
|
3152
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
3153
|
-
readonly actionLabel: _angular_core.InputSignal<string | undefined>;
|
|
3154
|
-
readonly actionHref: _angular_core.InputSignal<string | undefined>;
|
|
3155
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Panel, never>;
|
|
3156
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Panel, "kf-panel", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
3157
|
-
}
|
|
3158
|
-
|
|
3159
|
-
/** Un ítem de navegación de la barra de marca. `icon` es opcional y solo se
|
|
3160
|
-
* usa en el drawer mobile (columna, ver template) — el `<nav>` horizontal de
|
|
3161
|
-
* escritorio se mantiene solo texto, sin ícono ni chevron. */
|
|
3162
|
-
interface PortalHeaderNavItem {
|
|
3163
|
-
label: string;
|
|
3164
|
-
href: string;
|
|
3165
|
-
active?: boolean;
|
|
3166
|
-
icon?: IconName;
|
|
3167
|
-
}
|
|
3168
|
-
/** Una acción de la franja de administrador (ej. "Consultar deuda clientes"). */
|
|
3169
|
-
interface PortalHeaderAdminAction {
|
|
3170
|
-
label: string;
|
|
3171
|
-
href: string;
|
|
3172
|
-
}
|
|
3173
|
-
/**
|
|
3174
|
-
* Cabecera completa del portal (página 31) — franja de administrador
|
|
3175
|
-
* (acento ámbar, solo admins), barra de marca con logo, navegación y
|
|
3176
|
-
* pastilla de sesión. Compone `kf-admin-badge` para la franja y `kf-avatar
|
|
3177
|
-
* pill` para la sesión, en vez de reimplementar ambos.
|
|
3178
|
-
*
|
|
3179
|
-
* Es distinto de `kf-page-header`/`kf-page-head` (título de una vista
|
|
3180
|
-
* interna) — este es el chrome global del portal, se monta una sola vez.
|
|
3181
|
-
*
|
|
3182
|
-
* `:host` es `position: sticky; top: 0` — el header queda pegado arriba al
|
|
3183
|
-
* hacer scroll. No es `fixed`: como no se superpone al contenido en el
|
|
3184
|
-
* primer render, no hace falta que el consumidor compense con
|
|
3185
|
-
* `padding-top`.
|
|
3186
|
-
*
|
|
3187
|
-
* Bajo los 768px, el `<nav>` deja de mostrarse en línea junto al logo y
|
|
3188
|
-
* colapsa detrás de un botón de menú (ícono `menu`/`x`) que despliega un
|
|
3189
|
-
* `kf-drawer` (panel lateral genérico, ver `Drawer.ts`) anclado al borde
|
|
3190
|
-
* IZQUIERDO — mismo lado que el botón que lo abre, convención dominante
|
|
3191
|
-
* Material/iOS/Android — con los mismos `navItems` en columna dentro del
|
|
3192
|
-
* body (fondo claro) de ese drawer.
|
|
3193
|
-
*
|
|
3194
|
-
* `PortalHeader` expone dos slots propios pensados para que el consumidor
|
|
3195
|
-
* proyecte contenido que en escritorio vive en otro lugar:
|
|
3196
|
-
* - `<ng-content select="[kf-portal-header-extra]">`: identidad de sesión
|
|
3197
|
-
* (ej. `kf-drawer-session`). Cae en `[kf-drawer-header]` de `kf-drawer` —
|
|
3198
|
-
* el único contenedor con fondo oscuro (`--kf-color-tertiary-deep`, ver
|
|
3199
|
-
* `Drawer.ts`) que `kf-drawer-session` espera como fondo (no trae uno
|
|
3200
|
-
* propio, ver `DrawerSession.ts`).
|
|
3201
|
-
* - `<ng-content select="[kf-portal-header-footer]">`: acciones separadas del
|
|
3202
|
-
* resto (ej. `kf-drawer-logout`). Cae en `[kf-drawer-footer]` de `kf-drawer`.
|
|
3203
|
-
*
|
|
3204
|
-
* `PortalHeader` no sabe qué es ninguno de los dos contenidos, solo les da
|
|
3205
|
-
* el lugar correcto dentro del drawer ya desplegado (ver `Drawer.ts`).
|
|
3206
|
-
*
|
|
3207
|
-
* <kf-portal-header
|
|
3208
|
-
* [isAdmin]="true"
|
|
3209
|
-
* [adminActions]="[{ label: 'Consultar deuda clientes', href: '/deuda' }, { label: 'Cambiar DNI', href: '/dni' }]"
|
|
3210
|
-
* [navItems]="[{ label: 'Home', href: '/', active: true, icon: 'grid' }, { label: 'Vehículos', href: '/vehiculos', icon: 'truck' }]"
|
|
3211
|
-
* tagline="Portal privado"
|
|
3212
|
-
* userInitials="TS"
|
|
3213
|
-
* userName="Tomás Soto"
|
|
3214
|
-
* [showCart]="true"
|
|
3215
|
-
* (cartClick)="onCartClick()"
|
|
3216
|
-
* >
|
|
3217
|
-
* <kf-drawer-session
|
|
3218
|
-
* kf-portal-header-extra
|
|
3219
|
-
* brand="Portal Kaufmann LATAM"
|
|
3220
|
-
* name="Tomás Soto"
|
|
3221
|
-
* email="tomas.soto@kaufmann.com"
|
|
3222
|
-
* />
|
|
3223
|
-
* <kf-drawer-logout kf-portal-header-footer (logoutClick)="onLogout()" />
|
|
3224
|
-
* </kf-portal-header>
|
|
3225
|
-
*/
|
|
3226
|
-
declare class PortalHeader {
|
|
3227
|
-
readonly brand: _angular_core.InputSignal<string>;
|
|
3228
|
-
/** URL del logo como imagen. Sin ella (default), se mantiene el texto de `brand`. */
|
|
3229
|
-
readonly logoSrc: _angular_core.InputSignal<string | undefined>;
|
|
3230
|
-
/** `alt` del logo cuando se usa `logoSrc`. Sin ella, cae en `brand()`. */
|
|
3231
|
-
readonly logoAlt: _angular_core.InputSignal<string | undefined>;
|
|
3232
|
-
readonly isAdmin: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3233
|
-
readonly adminActions: _angular_core.InputSignal<PortalHeaderAdminAction[]>;
|
|
3234
|
-
readonly navItems: _angular_core.InputSignal<PortalHeaderNavItem[]>;
|
|
3235
|
-
readonly userInitials: _angular_core.InputSignal<string>;
|
|
3236
|
-
/** Texto junto al logo (ej. "Portal privado"), con separador vertical. Sin
|
|
3237
|
-
* separador ni texto si queda vacío. */
|
|
3238
|
-
readonly tagline: _angular_core.InputSignal<string>;
|
|
3239
|
-
/** Nombre completo para el bloque "HOLA / {nombre}" dentro de la pastilla
|
|
3240
|
-
* de sesión. Vacío (default) mantiene la pastilla como hoy: solo avatar,
|
|
3241
|
-
* sin bloque de texto ni chevron — retrocompatible con cualquier
|
|
3242
|
-
* consumidor que no pase este input. */
|
|
3243
|
-
readonly userName: _angular_core.InputSignal<string>;
|
|
3244
|
-
readonly showCart: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3245
|
-
readonly sessionClick: _angular_core.OutputEmitterRef<void>;
|
|
3246
|
-
readonly cartClick: _angular_core.OutputEmitterRef<void>;
|
|
3247
|
-
/** Visibilidad del drawer de navegación mobile (bajo los 768px). Se pasa a
|
|
3248
|
-
* `kf-drawer` como `[(open)]` — `PortalHeader` ya no implementa overlay,
|
|
3249
|
-
* `Escape` ni atrapado de foco por su cuenta, eso vive en `Drawer`. */
|
|
3250
|
-
protected readonly mobileMenuOpen: _angular_core.WritableSignal<boolean>;
|
|
3251
|
-
/**
|
|
3252
|
-
* `ElementRef` real del botón de sesión (el avatar en la esquina
|
|
3253
|
-
* derecha), no de todo el header. Pensado para anclar un `kf-dropdown`
|
|
3254
|
-
* externo — sin esto, el único `ElementRef` disponible desde afuera es el
|
|
3255
|
-
* del host de `PortalHeader`, que ocupa el ancho completo de la pantalla
|
|
3256
|
-
* (logo + nav + sesión), y el overlay del CDK termina "pegado" a la
|
|
3257
|
-
* esquina del header entero en vez de al botón que el usuario clickeó.
|
|
3258
|
-
*
|
|
3259
|
-
* <kf-dropdown [(open)]="menuOpen" [anchor]="header().sessionButtonRef()">
|
|
3260
|
-
*/
|
|
3261
|
-
readonly sessionButtonRef: _angular_core.Signal<ElementRef<any>>;
|
|
3262
|
-
/**
|
|
3263
|
-
* Ancla real de cada `<a>` del `<nav>` horizontal (una por `navItems()`,
|
|
3264
|
-
* mismo orden — `@for` trackea por `item.label`, así que la lista no se
|
|
3265
|
-
* recrea en cada cambio de ruta, solo cambia qué índice trae
|
|
3266
|
-
* `active: true`). Sirve para medir dónde poner la cápsula deslizante
|
|
3267
|
-
* (`thumbStyle`, ver abajo) sin duplicar el layout del nav en JS.
|
|
3268
|
-
*/
|
|
3269
|
-
private readonly navItemAnchors;
|
|
3270
|
-
/** Fuerza recalcular `thumbStyle` en un resize — un resize de ventana no
|
|
3271
|
-
* cambia ningún signal de los que `thumbStyle` ya lee (`navItems`,
|
|
3272
|
-
* `navItemAnchors`), pero sí puede correr el layout de los `<a>` bajo un
|
|
3273
|
-
* ancho de columna distinto (texto largo pasando a otra línea, etc.). */
|
|
3274
|
-
private readonly resizeTick;
|
|
3275
|
-
protected onWindowResize(): void;
|
|
3276
|
-
/**
|
|
3277
|
-
* Posición/ancho de la cápsula blanca del ítem activo del `<nav>`, como
|
|
3278
|
-
* un elemento propio (`.kf-portal-header__nav-thumb`) que se desliza con
|
|
3279
|
-
* `transition` en vez de que cada `<a>` traiga su propio fondo blanco
|
|
3280
|
-
* (eso hacía que el fondo "saltara" de un ítem a otro sin animación,
|
|
3281
|
-
* porque son elementos DOM distintos — no hay nada que Angular pueda
|
|
3282
|
-
* animar entre ellos).
|
|
3283
|
-
*/
|
|
3284
|
-
protected readonly thumbStyle: _angular_core.Signal<Record<string, string>>;
|
|
3285
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PortalHeader, never>;
|
|
3286
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PortalHeader, "kf-portal-header", never, { "brand": { "alias": "brand"; "required": false; "isSignal": true; }; "logoSrc": { "alias": "logoSrc"; "required": false; "isSignal": true; }; "logoAlt": { "alias": "logoAlt"; "required": false; "isSignal": true; }; "isAdmin": { "alias": "isAdmin"; "required": false; "isSignal": true; }; "adminActions": { "alias": "adminActions"; "required": false; "isSignal": true; }; "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "userInitials": { "alias": "userInitials"; "required": true; "isSignal": true; }; "tagline": { "alias": "tagline"; "required": false; "isSignal": true; }; "userName": { "alias": "userName"; "required": false; "isSignal": true; }; "showCart": { "alias": "showCart"; "required": false; "isSignal": true; }; }, { "sessionClick": "sessionClick"; "cartClick": "cartClick"; }, never, ["[kf-portal-header-extra]", "[kf-portal-header-footer]"], true, never>;
|
|
3287
|
-
}
|
|
3288
|
-
|
|
3289
|
-
/** Mismo vocabulario que `Badge.tone`/`TextTone` (menos `info`/`service`,
|
|
3290
|
-
* que no aplican a un valor de progreso): `neutral` es el color de marca
|
|
3291
|
-
* por defecto (sin implicar buen/mal estado), `ok`/`warn`/`error` sí
|
|
3292
|
-
* comunican severidad. La librería no conoce el dominio que produce ese
|
|
3293
|
-
* valor (SLA, storage, lo que sea) — el consumidor decide qué tone usar. */
|
|
3294
|
-
type ProgressTone = 'neutral' | 'ok' | 'warn' | 'error';
|
|
3295
|
-
/**
|
|
3296
|
-
* Barra de progreso de un solo valor (0-100%) con color por severidad —
|
|
3297
|
-
* para un porcentaje simple, a diferencia de `kf-bucket-progress`, que
|
|
3298
|
-
* dibuja varias categorías proporcionales en la misma barra.
|
|
3299
|
-
*
|
|
3300
|
-
* <kf-progress [value]="80" tone="ok" label="80%" />
|
|
3301
|
-
* <kf-progress [value]="ratio()" [tone]="severityTone()" />
|
|
3302
|
-
*
|
|
3303
|
-
* `value` se clampea a [0, 100] — un consumidor que calcule un ratio fuera
|
|
3304
|
-
* de rango (ej. tiempo transcurrido sobre un SLA ya vencido) no rompe el
|
|
3305
|
-
* ancho de la barra. `label` es texto libre opcional sobre la barra (ej.
|
|
3306
|
-
* "80%"); sin él, no se renderiza ningún texto, solo la barra.
|
|
3307
|
-
*/
|
|
3308
|
-
declare class Progress {
|
|
3309
|
-
readonly value: _angular_core.InputSignal<number>;
|
|
3310
|
-
readonly tone: _angular_core.InputSignal<ProgressTone>;
|
|
3311
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
3312
|
-
protected readonly clampedValue: _angular_core.Signal<number>;
|
|
3313
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Progress, never>;
|
|
3314
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Progress, "kf-progress", never, { "value": { "alias": "value"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3315
|
-
}
|
|
3316
|
-
|
|
3317
|
-
/**
|
|
3318
|
-
* Punto que emite ondas concéntricas en bucle, para marcar un dato que
|
|
3319
|
-
* necesita atención inmediata sin depender de que el operador lo vea por
|
|
3320
|
-
* casualidad — el mismo rol que un punto rojo estático ya cumple en varios
|
|
3321
|
-
* lugares del producto (ver `.now__d`/`.board-alerts__dot` en
|
|
3322
|
-
* `operations-final.html`), llevado a movimiento porque el color solo
|
|
3323
|
-
* compite por atención con todo lo demás en pantalla; el movimiento no.
|
|
3324
|
-
*
|
|
3325
|
-
* Es una primitiva de énfasis, no un indicador de estado — para eso está
|
|
3326
|
-
* `kf-status-pill` (punto estático + texto). Este componente no tiene
|
|
3327
|
-
* texto ni tono semántico de "ok/warn/error": una sola apariencia (rojo,
|
|
3328
|
-
* el color reservado para lo urgente en el design system), porque emitir
|
|
3329
|
-
* ondas por algo que no es urgente banalizaría la señal la próxima vez que
|
|
3330
|
-
* sí lo sea.
|
|
3331
|
-
*
|
|
3332
|
-
* <kf-pulse-dot />
|
|
3333
|
-
* <kf-pulse-dot size="lg" />
|
|
3334
|
-
*
|
|
3335
|
-
* Respeta `prefers-reduced-motion` (ver PulseDot.css): la onda deja de
|
|
3336
|
-
* animarse y el punto queda como un punto estático, sin perder la
|
|
3337
|
-
* información de "esto es urgente" que da el color.
|
|
3338
|
-
*/
|
|
3339
|
-
declare class PulseDot {
|
|
3340
|
-
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
3341
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PulseDot, never>;
|
|
3342
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PulseDot, "kf-pulse-dot", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3343
|
-
}
|
|
3344
|
-
|
|
3345
|
-
/** Chip de filtro genérico con contador — nunca hardcodeado a un dominio
|
|
3346
|
-
* concreto (ej. estado de una cotización); el consumidor decide qué
|
|
3347
|
-
* representa cada `value` y cómo mapea sus items contra él vía `predicate`.
|
|
3348
|
-
*
|
|
3349
|
-
* Bug real corregido: la primera versión leía `item.status`/`item.chip` por
|
|
3350
|
-
* nombre de campo mágico en vez de un `predicate` — colisionaba con
|
|
3351
|
-
* dominios donde `status` ya significa otra cosa (ej. `Quote.status` en
|
|
3352
|
-
* `web-otd-frontend` es 'ok'|'error'|'warn' de aprobación, no "tiene saldo
|
|
3353
|
-
* pendiente"). Un chip "Con saldo pendiente" sobre cotizaciones terminaba
|
|
3354
|
-
* filtrando por un campo que no tenía nada que ver, mostrando 0 resultados
|
|
3355
|
-
* siempre. `predicate` es explícito y no depende de convenciones de nombre. */
|
|
3356
|
-
interface QuotePickerChip<T = unknown> {
|
|
3357
|
-
value: string;
|
|
3358
|
-
label: string;
|
|
3359
|
-
count: number;
|
|
3360
|
-
predicate: (item: T) => boolean;
|
|
3361
|
-
}
|
|
3362
|
-
/** Una opción del dropdown "Ordenar por", visible solo en `variant="modal"`. */
|
|
3363
|
-
interface QuotePickerSortOption {
|
|
3364
|
-
value: string;
|
|
3365
|
-
label: string;
|
|
3366
|
-
}
|
|
3367
|
-
/**
|
|
3368
|
-
* Selector de un ítem "rico" de una lista buscable/filtrable — generalización
|
|
3369
|
-
* del patrón "elegir una cotización" de Pagos y Facturas de OTD, pero sin
|
|
3370
|
-
* ningún acoplamiento a `Quote`: todo el contenido de cada fila/card llega
|
|
3371
|
-
* por `columns` (mismo `DataTableColumn` de `kf-data-table`, reexportado acá
|
|
3372
|
-
* en vez de duplicar el concepto) + `cellTemplates` para contenido custom
|
|
3373
|
-
* (thumbnail, monto formateado, etc. — mismo mecanismo `TemplateRef` +
|
|
3374
|
-
* `ngTemplateOutlet` que ya usa `kf-data-table`).
|
|
3375
|
-
*
|
|
3376
|
-
* Un solo componente, dos contenedores (`variant: 'inline' | 'modal'`), UNA
|
|
3377
|
-
* sola lógica de búsqueda/filtro/orden interna. Nunca dos implementaciones
|
|
3378
|
-
* paralelas: el riesgo real de eso es que un fix de filtro se aplique en un
|
|
3379
|
-
* modo y se olvide en el otro. Los `computed()` de más abajo
|
|
3380
|
-
* (`filteredItems`, `sortedItems`) son la ÚNICA fuente de verdad para ambos
|
|
3381
|
-
* `variant`; lo que cambia entre inline y modal es solo qué contenedor
|
|
3382
|
-
* envuelve esos datos ya resueltos.
|
|
3383
|
-
*
|
|
3384
|
-
* ## Modo `inline` (default)
|
|
3385
|
-
* Trigger a ANCHO COMPLETO (nunca una caja angosta de ancho fijo) que
|
|
3386
|
-
* muestra el ítem activo colapsado — thumbnail, id + modelo, unidades +
|
|
3387
|
-
* fecha + monto, CTA "Cambiar cotización" con chevron-down. Al click, el
|
|
3388
|
-
* panel se expande INLINE (empuja el contenido de abajo, nunca flota
|
|
3389
|
-
* encima) con buscador propio + chips de filtro + un grid de 2 columnas (1
|
|
3390
|
-
* en mobile, breakpoint `max-width: 900px` vía `matchMediaSignal` — mismo
|
|
3391
|
-
* mecanismo que ya usa el resto de la librería para decisiones de layout en
|
|
3392
|
-
* TypeScript, no solo CSS). Por encima de `expandThreshold` resultados
|
|
3393
|
-
* visibles, el panel recorta a un preview de `PREVIEW_ROWS` filas con un
|
|
3394
|
-
* fade inferior y un botón dashed "Ver las N en pantalla completa" que
|
|
3395
|
-
* emite `expandToModal` — el picker no decide qué pasa después (típicamente
|
|
3396
|
-
* el consumidor pone `variant` en `'modal'` y `open` en `true`).
|
|
3397
|
-
*
|
|
3398
|
-
* ## Modo `modal`
|
|
3399
|
-
* Mismo buscador, mismos chips, misma lógica de filtrado — compone
|
|
3400
|
-
* `kf-modal` (proyectando el contenido) en vez de reimplementar un
|
|
3401
|
-
* `<dialog>` a mano: la API de `Modal` (`[(open)]`, cierre con
|
|
3402
|
-
* Escape/backdrop/botón vía `<dialog>` nativo) ya cubre exactamente lo que
|
|
3403
|
-
* este modo necesita. Compone también `kf-data-table` para la tabla
|
|
3404
|
-
* completa (columnas configurables, fade de overflow horizontal ya
|
|
3405
|
-
* resuelto ahí) y `kf-pagination` para paginar — ninguno de los tres se
|
|
3406
|
-
* reimplementa. Agrega un dropdown propio de "Ordenar por" (calibrado
|
|
3407
|
-
* visualmente contra el trigger de `kf-select`, pero compacto: `kf-select`
|
|
3408
|
-
* fuerza un ancho fijo de 240px pensado para formularios, no para una
|
|
3409
|
-
* barra de herramientas de tabla — ver JSDoc de `sortOpen` más abajo).
|
|
3410
|
-
*
|
|
3411
|
-
* En mobile, `kf-data-table[cardable]` con `defaultView` forzado a
|
|
3412
|
-
* `'cards'` decide la vista (mismo criterio que `matchMediaSignal` ya
|
|
3413
|
-
* resolvió en otros consumidores): dentro de un modal a pantalla completa
|
|
3414
|
-
* no tiene sentido ofrecer un toggle tabla/cards que en mobile daría una
|
|
3415
|
-
* tabla angosta con scroll horizontal.
|
|
3416
|
-
*
|
|
3417
|
-
* DEUDA TÉCNICA CONOCIDA (confirmada con el usuario, ver CHANGELOG.md): el
|
|
3418
|
-
* diseño validado con mockups pedía que en mobile el modal ocupe el 100%
|
|
3419
|
-
* de la pantalla (botón "atrás", sin overlay centrado) — `kf-modal` no
|
|
3420
|
-
* tiene ese modo, así que hoy en mobile se ve como un diálogo centrado
|
|
3421
|
-
* angosto (`width: min(480px, ...)`). Es funcional (cards legibles,
|
|
3422
|
-
* búsqueda, chips, paginación), solo visualmente distinto del mockup.
|
|
3423
|
-
*
|
|
3424
|
-
* <kf-quote-picker
|
|
3425
|
-
* [items]="quotes()"
|
|
3426
|
-
* [columns]="columns"
|
|
3427
|
-
* [selectedId]="selectedQuoteId()"
|
|
3428
|
-
* [idKey]="(q) => q.id"
|
|
3429
|
-
* [chips]="statusChips()"
|
|
3430
|
-
* [cellTemplates]="{ photo: photoCell(), amount: amountCell() }"
|
|
3431
|
-
* (selectedIdChange)="selectedQuoteId.set($event)"
|
|
3432
|
-
* (expandToModal)="variant.set('modal'); open.set(true)"
|
|
3433
|
-
* />
|
|
3434
|
-
*/
|
|
3435
|
-
declare class QuotePicker<T = unknown> {
|
|
3436
|
-
readonly items: _angular_core.InputSignal<T[]>;
|
|
3437
|
-
readonly columns: _angular_core.InputSignal<DataTableColumn[]>;
|
|
3438
|
-
readonly selectedId: _angular_core.InputSignal<string | null>;
|
|
3439
|
-
readonly idKey: _angular_core.InputSignal<(item: T) => string>;
|
|
3440
|
-
/**
|
|
3441
|
-
* Mapa `columnKey -> TemplateRef`, mismo mecanismo que `kf-data-table`
|
|
3442
|
-
* (`ngTemplateOutlet` + contexto `{ $implicit: item, index }`) — se
|
|
3443
|
-
* reenvía tal cual a la tabla interna del modo `modal`, y se usa
|
|
3444
|
-
* directamente en el grid de cards del modo `inline`. Un solo mapa para
|
|
3445
|
-
* ambos modos, consistente con la regla de "una sola lógica interna".
|
|
3446
|
-
*/
|
|
3447
|
-
readonly cellTemplates: _angular_core.InputSignal<Record<string, TemplateRef<{
|
|
3448
|
-
$implicit: T;
|
|
3449
|
-
index: number;
|
|
3450
|
-
}>> | undefined>;
|
|
3451
|
-
readonly chips: _angular_core.InputSignal<QuotePickerChip<T>[]>;
|
|
3452
|
-
readonly sortOptions: _angular_core.InputSignal<QuotePickerSortOption[]>;
|
|
3453
|
-
readonly sort: _angular_core.ModelSignal<string | null>;
|
|
3454
|
-
/**
|
|
3455
|
-
* Umbral de volumen alto — el consumidor decide el número exacto, nunca
|
|
3456
|
-
* hardcodeado a "cotizaciones" ni a ningún caso de uso puntual. Default
|
|
3457
|
-
* 15 según el diseño validado con mockups.
|
|
3458
|
-
*/
|
|
3459
|
-
readonly expandThreshold: _angular_core.InputSignal<number>;
|
|
3460
|
-
readonly variant: _angular_core.InputSignal<"inline" | "modal">;
|
|
3461
|
-
/** Visibilidad del modo `modal`, two-way — mismo patrón que `[(open)]` de `kf-modal`. */
|
|
3462
|
-
readonly open: _angular_core.ModelSignal<boolean>;
|
|
3463
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
3464
|
-
readonly searchPlaceholder: _angular_core.InputSignal<string>;
|
|
3465
|
-
/** Ícono de placeholder cuando ninguna columna `cardRole: 'media'` resuelve
|
|
3466
|
-
* un thumbnail real vía `cellTemplates` — el picker no asume qué dominio
|
|
3467
|
-
* consume (cotización, vehículo, cliente...), así que no hardcodea un
|
|
3468
|
-
* ícono fijo. Default `'file'` solo por no dejar el input sin valor. */
|
|
3469
|
-
readonly placeholderIcon: _angular_core.InputSignal<IconName>;
|
|
3470
|
-
readonly selectedIdChange: _angular_core.OutputEmitterRef<string>;
|
|
3471
|
-
/** Disparado al superar `expandThreshold` en modo inline; el consumidor decide pasar a `modal`. */
|
|
3472
|
-
readonly expandToModal: _angular_core.OutputEmitterRef<void>;
|
|
3473
|
-
protected readonly searchQuery: _angular_core.WritableSignal<string>;
|
|
3474
|
-
protected readonly activeChip: _angular_core.WritableSignal<string | null>;
|
|
3475
|
-
protected readonly expanded: _angular_core.WritableSignal<boolean>;
|
|
3476
|
-
protected readonly page: _angular_core.WritableSignal<number>;
|
|
3477
|
-
protected readonly sortOpen: _angular_core.WritableSignal<boolean>;
|
|
3478
|
-
/**
|
|
3479
|
-
* Mismo breakpoint (`max-width: 900px`) que el resto de la librería usa
|
|
3480
|
-
* para decisiones de layout en TypeScript (no solo CSS) — ver
|
|
3481
|
-
* `matchMediaSignal`. Decide 1 vs. 2 columnas en el grid inline, y tabla
|
|
3482
|
-
* vs. cards apiladas dentro del modal.
|
|
3483
|
-
*/
|
|
3484
|
-
protected readonly isMobile: _angular_core.Signal<boolean>;
|
|
3485
|
-
private readonly destroyRef;
|
|
3486
|
-
private readonly previewScrollEl;
|
|
3487
|
-
/** Mismo mecanismo de fade que `kf-data-table` — ver comentario en QuotePicker.css. */
|
|
3488
|
-
protected readonly canFadeBottom: _angular_core.WritableSignal<boolean>;
|
|
3489
|
-
readonly selectedItem: _angular_core.Signal<T | undefined>;
|
|
3490
|
-
/** Filtro por texto (buscador propio) + filtro por chip activo, en ese orden. */
|
|
3491
|
-
protected readonly filteredItems: _angular_core.Signal<T[]>;
|
|
3492
|
-
/**
|
|
3493
|
-
* Orden solo tiene efecto visible en modo `modal` (el diseño validado no
|
|
3494
|
-
* pide dropdown de orden en inline) — se calcula igual en ambos casos
|
|
3495
|
-
* porque es la MISMA lógica interna; en inline `sort()` simplemente se
|
|
3496
|
-
* queda en `null` salvo que el consumidor lo setee explícitamente.
|
|
3497
|
-
*/
|
|
3498
|
-
protected readonly sortedItems: _angular_core.Signal<T[]>;
|
|
3499
|
-
/** Por encima del umbral, el preview inline se recorta salvo que el usuario ya haya expandido. */
|
|
3500
|
-
protected readonly isHighVolume: _angular_core.Signal<boolean>;
|
|
3501
|
-
protected readonly previewItems: _angular_core.Signal<T[]>;
|
|
3502
|
-
protected readonly pages: _angular_core.Signal<number>;
|
|
3503
|
-
protected readonly pagedItems: _angular_core.Signal<T[]>;
|
|
3504
|
-
protected readonly sortLabel: _angular_core.Signal<string>;
|
|
3505
|
-
constructor();
|
|
3506
|
-
private updateFadeState;
|
|
3507
|
-
private cellText;
|
|
3508
|
-
toggleExpandedPanel(): void;
|
|
3509
|
-
onSearchInput(event: Event): void;
|
|
3510
|
-
selectChip(value: string): void;
|
|
3511
|
-
select(item: T): void;
|
|
3512
|
-
onItemKeydown(event: KeyboardEvent, item: T): void;
|
|
3513
|
-
onSeeAll(): void;
|
|
3514
|
-
onTableRowClick(event: {
|
|
3515
|
-
row: T;
|
|
3516
|
-
index: number;
|
|
3517
|
-
}): void;
|
|
3518
|
-
toggleSort(): void;
|
|
3519
|
-
setSort(value: string): void;
|
|
3520
|
-
trackItem(item: T, index: number): string | number;
|
|
3521
|
-
/** Arrow function como campo (no un método) para que `[rowKey]` reciba
|
|
3522
|
-
* una referencia ESTABLE entre change detections — `trackItem.bind(this)`
|
|
3523
|
-
* en el template recrearía una función nueva en cada ciclo, invalidando
|
|
3524
|
-
* cualquier optimización de `kf-data-table` que dependa de identidad. */
|
|
3525
|
-
protected readonly rowKeyFn: (item: T, index: number) => string | number;
|
|
3526
|
-
protected cellValue(item: T, column: DataTableColumn): string;
|
|
3527
|
-
protected readonly mediaColumn: _angular_core.Signal<DataTableColumn | undefined>;
|
|
3528
|
-
protected readonly titleColumn: _angular_core.Signal<DataTableColumn | undefined>;
|
|
3529
|
-
protected readonly fieldColumns: _angular_core.Signal<DataTableColumn[]>;
|
|
3530
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<QuotePicker<any>, never>;
|
|
3531
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<QuotePicker<any>, "kf-quote-picker", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "idKey": { "alias": "idKey"; "required": true; "isSignal": true; }; "cellTemplates": { "alias": "cellTemplates"; "required": false; "isSignal": true; }; "chips": { "alias": "chips"; "required": false; "isSignal": true; }; "sortOptions": { "alias": "sortOptions"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "expandThreshold": { "alias": "expandThreshold"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "searchPlaceholder": { "alias": "searchPlaceholder"; "required": false; "isSignal": true; }; "placeholderIcon": { "alias": "placeholderIcon"; "required": false; "isSignal": true; }; }, { "sort": "sortChange"; "open": "openChange"; "selectedIdChange": "selectedIdChange"; "expandToModal": "expandToModal"; }, never, never, true, never>;
|
|
3532
|
-
}
|
|
3533
|
-
|
|
3534
|
-
/**
|
|
3535
|
-
* Estado vacío de reservas en taller con llamada a agendar (página 36):
|
|
3536
|
-
* barra de estado vacío arriba ("No tienes reservas de taller"), panel de
|
|
3537
|
-
* invitación al medio (ícono en círculo azul, título, descripción, link) y
|
|
3538
|
-
* una fila de dos acciones al pie — un slot `[actions]` proyectado, para no
|
|
3539
|
-
* acoplar el componente a botones fijos.
|
|
3540
|
-
*
|
|
3541
|
-
* Distinto de `kf-empty-state` genérico: este combina la barra + la
|
|
3542
|
-
* invitación + las acciones como un bloque compuesto propio del dominio
|
|
3543
|
-
* "taller", no un placeholder de una sola pieza.
|
|
3544
|
-
*
|
|
3545
|
-
* `grow` estira el panel de invitación para llenar el espacio vertical
|
|
3546
|
-
* disponible — solo cuando el consumidor comparte fila con una tarjeta más
|
|
3547
|
-
* alta (ej. junto a "Total de vehículos"); en un lugar sin esa presión
|
|
3548
|
-
* (home, debajo del carousel) se deja en su alto natural.
|
|
3549
|
-
*
|
|
3550
|
-
* <kf-reserve-block emptyLabel="No tienes reservas de taller" grow
|
|
3551
|
-
* title="¿Necesitas mantención?" description="Tenemos la mejor red de talleres."
|
|
3552
|
-
* actionLabel="Agenda tu reserva aquí" actionHref="/taller/agendar">
|
|
3553
|
-
* <kf-button actions icon="calendar">Reservar hora</kf-button>
|
|
3554
|
-
* <kf-button actions variant="outline" icon="list">Ver agenda</kf-button>
|
|
3555
|
-
* </kf-reserve-block>
|
|
3556
|
-
*/
|
|
3557
|
-
declare class ReserveBlock {
|
|
3558
|
-
readonly emptyLabel: _angular_core.InputSignal<string>;
|
|
3559
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
3560
|
-
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
3561
|
-
readonly actionLabel: _angular_core.InputSignal<string | undefined>;
|
|
3562
|
-
readonly actionHref: _angular_core.InputSignal<string | undefined>;
|
|
3563
|
-
/** La invitación se estira para llenar la tarjeta (ej. junto a "Total de vehículos"). */
|
|
3564
|
-
readonly grow: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3565
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ReserveBlock, never>;
|
|
3566
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ReserveBlock, "kf-reserve-block", never, { "emptyLabel": { "alias": "emptyLabel"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; "grow": { "alias": "grow"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
|
|
3567
|
-
}
|
|
3568
|
-
|
|
3569
|
-
type RowActionKind = 'link' | 'button';
|
|
3570
|
-
/**
|
|
3571
|
-
* Una acción de fila — mismo shape que ya usaba `WorkshopRowAction` en
|
|
3572
|
-
* `web-portal-latam-frontend` antes de este componente (Taller, tab
|
|
3573
|
-
* "Trabajos terminados"), ahora compartido: `kind: 'link'` navega (necesita
|
|
3574
|
-
* `href`, `onClick` se ignora), `kind: 'button'` dispara `onClick` en la
|
|
3575
|
-
* pantalla actual. `disabled` aplica a ambos — un link sin `href` (o
|
|
3576
|
-
* explícitamente `disabled`) se renderiza inerte en vez de clickeable, en
|
|
3577
|
-
* vez de omitirse del todo: el consumidor decide que la acción EXISTE pero
|
|
3578
|
-
* no está disponible todavía (ej. "Factura" mientras no exista el endpoint
|
|
3579
|
-
* de descarga).
|
|
3580
|
-
*/
|
|
3581
|
-
interface RowAction {
|
|
3582
|
-
readonly kind: RowActionKind;
|
|
3583
|
-
readonly icon: IconName;
|
|
3584
|
-
readonly label: string;
|
|
3585
|
-
readonly href?: string | null;
|
|
3586
|
-
readonly disabled?: boolean;
|
|
3587
|
-
readonly onClick?: () => void;
|
|
3588
|
-
}
|
|
3589
|
-
type RowActionsMode = 'auto' | 'inline' | 'menu';
|
|
3590
|
-
/**
|
|
3591
|
-
* Columna "Acciones" de cualquier tabla del ecosistema. Decide su propia
|
|
3592
|
-
* forma según cuántas acciones recibe — no hace falta que cada tabla elija
|
|
3593
|
-
* a mano entre "botones sueltos" y "menú":
|
|
3594
|
-
*
|
|
3595
|
-
* - `inline` (`actions().length <= inlineLimit()`, default 2): un
|
|
3596
|
-
* ícono-botón de 32px por acción, sin texto — el `label` vive en un
|
|
3597
|
-
* `kfTooltip`. Todas las acciones quedan visibles sin clic extra.
|
|
3598
|
-
* - `menu` (más de `inlineLimit()`): un único botón "kebab" que abre un
|
|
3599
|
-
* `kf-dropdown-panel` con una fila por acción.
|
|
3600
|
-
*
|
|
3601
|
-
* `mode` fuerza uno de los dos modos sin importar cuántas acciones haya
|
|
3602
|
-
* (ej. una tabla que prefiere el kebab siempre, aunque tenga una sola
|
|
3603
|
-
* acción, por consistencia visual con otra columna).
|
|
3604
|
-
*
|
|
3605
|
-
* <kf-row-actions [actions]="rowActions(row)" />
|
|
3606
|
-
* <kf-row-actions [actions]="rowActions(row)" mode="menu" />
|
|
3607
|
-
*/
|
|
3608
|
-
declare class RowActions {
|
|
3609
|
-
readonly actions: _angular_core.InputSignal<readonly RowAction[]>;
|
|
3610
|
-
readonly mode: _angular_core.InputSignal<RowActionsMode>;
|
|
3611
|
-
/** Desde cuántas acciones el modo `auto` pasa de `inline` a `menu`. */
|
|
3612
|
-
readonly inlineLimit: _angular_core.InputSignal<number>;
|
|
3613
|
-
protected readonly menuOpen: _angular_core.WritableSignal<boolean>;
|
|
3614
|
-
protected readonly effectiveMode: _angular_core.Signal<"menu" | "inline">;
|
|
3615
|
-
protected onToggleMenu(): void;
|
|
3616
|
-
protected onButtonAction(action: RowAction): void;
|
|
3617
|
-
protected onMenuLinkClick(): void;
|
|
3618
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<RowActions, never>;
|
|
3619
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<RowActions, "kf-row-actions", never, { "actions": { "alias": "actions"; "required": true; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "inlineLimit": { "alias": "inlineLimit"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
3620
|
-
}
|
|
3621
|
-
|
|
3622
|
-
/**
|
|
3623
|
-
* Título de sub-sección con chip de ícono, pensado para anidarse dentro de
|
|
3624
|
-
* cards o paneles (a diferencia de `PageHeader`, que encabeza una página
|
|
3625
|
-
* completa). Un área de acciones opcional se proyecta vía
|
|
3626
|
-
* `<ng-content select="[actions]">` para no acoplar el componente a un set
|
|
3627
|
-
* fijo de botones.
|
|
3628
|
-
*
|
|
3629
|
-
* `size` sigue la misma escala `'sm'|'md'|'lg'` que `Button`/`Icon`/`Spinner`
|
|
3630
|
-
* (`md` es el default): `sm` reduce tipografía y espaciado para usarse
|
|
3631
|
-
* dentro de cards ya compactas, `lg` los agranda para encabezar un bloque
|
|
3632
|
-
* más prominente. `solid` rellena el chip de ícono con el color primario
|
|
3633
|
-
* sólido en vez del tratamiento "soft" (fondo tenue) — pensado para
|
|
3634
|
-
* superficies que ya tienen un tinte de color propio, donde el chip "soft"
|
|
3635
|
-
* perdería contraste.
|
|
3636
|
-
*
|
|
3637
|
-
* <kf-section-header icon="settings" title="Preferencias"
|
|
3638
|
-
* subtitle="Configuración general de la cuenta">
|
|
3639
|
-
* <button actions>Editar</button>
|
|
3640
|
-
* </kf-section-header>
|
|
3641
|
-
*
|
|
3642
|
-
* <kf-section-header title="Detalle" size="sm" [solid]="true" />
|
|
3643
|
-
* <kf-section-header title="Resumen de flota" size="lg" />
|
|
3644
|
-
*/
|
|
3645
|
-
declare class SectionHeader {
|
|
3646
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
3647
|
-
readonly title: _angular_core.InputSignal<string>;
|
|
3648
|
-
readonly subtitle: _angular_core.InputSignal<string | undefined>;
|
|
3649
|
-
readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
|
|
3650
|
-
readonly solid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3651
|
-
protected readonly iconSize: _angular_core.Signal<"sm" | "md" | "lg">;
|
|
3652
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionHeader, never>;
|
|
3653
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionHeader, "kf-section-header", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": true; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "solid": { "alias": "solid"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
|
|
3654
|
-
}
|
|
3655
|
-
|
|
3656
|
-
/**
|
|
3657
|
-
* Contenedor de navegación por secciones dentro de una misma pantalla —
|
|
3658
|
-
* agrupa `kf-section-nav-item` y resuelve su layout fusionado según
|
|
3659
|
-
* viewport, con un breakpoint PROPIO de 1024px (no el $mobile:900px
|
|
3660
|
-
* compartido del resto de la librería — ver el comentario en
|
|
3661
|
-
* `SectionNav.scss`):
|
|
3662
|
-
*
|
|
3663
|
-
* - Desktop (≥1024px): columna de botones a la izquierda + panel de
|
|
3664
|
-
* contenido separado a la derecha, mostrando el contenido del ítem (o
|
|
3665
|
-
* sub-ítem) activo.
|
|
3666
|
-
* - Mobile y tablet (<1024px): acordeón — el contenido del ítem activo se
|
|
3667
|
-
* despliega inline, justo debajo de su propio botón.
|
|
3668
|
-
*
|
|
3669
|
-
* El cambio entre ambos layouts es solo CSS (`SectionNav.scss` +
|
|
3670
|
-
* `SectionNavItem.scss`, ver comentarios ahí): cada `kf-section-nav-item`
|
|
3671
|
-
* proyecta su contenido una única vez y es la grilla la que lo reposiciona
|
|
3672
|
-
* visualmente, sin recrearlo ni duplicarlo en el DOM.
|
|
3673
|
-
*
|
|
3674
|
-
* A diferencia de `kf-tabs` (selector de vista plano, sin contenido propio)
|
|
3675
|
-
* y de `kf-sidebar-shell` (rail persistente ENTRE rutas, colapsable, fondo
|
|
3676
|
-
* oscuro): esto es navegación DENTRO de una sola pantalla, con paneles de
|
|
3677
|
-
* contenido rico por sección.
|
|
3678
|
-
*
|
|
3679
|
-
* La exclusividad entre ítems (y entre sub-ítems, dentro de cada uno) la
|
|
3680
|
-
* decide quien consume el componente, igual que cada `kf-section-nav-item`
|
|
3681
|
-
* por separado — `kf-section-nav` no guarda ningún estado de selección.
|
|
3682
|
-
*
|
|
3683
|
-
* <kf-section-nav>
|
|
3684
|
-
* <kf-section-nav-item label="Mis datos personales" icon="user"
|
|
3685
|
-
* [active]="openSection() === 'datos'" (toggled)="openSection.set('datos')">
|
|
3686
|
-
* <app-personal-data />
|
|
3687
|
-
* </kf-section-nav-item>
|
|
3688
|
-
* <kf-section-nav-item label="Mis empresas" icon="layers"
|
|
3689
|
-
* [active]="openSection() === 'empresas'" (toggled)="openSection.set('empresas')">
|
|
3690
|
-
* <app-my-companies />
|
|
3691
|
-
* </kf-section-nav-item>
|
|
3692
|
-
* </kf-section-nav>
|
|
3693
|
-
*/
|
|
3694
|
-
declare class SectionNav {
|
|
3695
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNav, never>;
|
|
3696
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNav, "kf-section-nav", never, {}, {}, never, ["*"], true, never>;
|
|
3697
|
-
}
|
|
3698
|
-
|
|
3699
|
-
interface SectionNavSubsectionData {
|
|
3700
|
-
key: string;
|
|
3701
|
-
label: string;
|
|
3702
|
-
icon: IconName;
|
|
3703
|
-
disabled?: boolean;
|
|
3704
|
-
}
|
|
3705
|
-
/**
|
|
3706
|
-
* Ítem de nivel superior de `kf-section-nav`: header clickeable (ícono
|
|
3707
|
-
* identificador opcional + label + chevron) que expande/colapsa contenido
|
|
3708
|
-
* proyectado. La exclusividad entre ítems la decide quien consume el
|
|
3709
|
-
* componente — cada click solo emite `toggled` y el padre resuelve qué
|
|
3710
|
-
* ítem queda `active`, igual que `kf-folder-tabs` con `value`.
|
|
3711
|
-
*
|
|
3712
|
-
* `subsections` agrega un segundo nivel de navegación DENTRO del ítem
|
|
3713
|
-
* (solo visible cuando el ítem está `active`), cada uno con su propio
|
|
3714
|
-
* estado activo (`activeSubsection`) independiente del padre. El contenido
|
|
3715
|
-
* de cada sub-ítem se proyecta envolviéndolo en `<kf-section-nav-subsection
|
|
3716
|
-
* key="...">` dentro del mismo slot por defecto — ver esa clase.
|
|
3717
|
-
*
|
|
3718
|
-
* El contenido proyectado usa `[hidden]`, no `@if`: un ítem puede envolver
|
|
3719
|
-
* un formulario con estado que el usuario ya completó, y colapsar/expandir
|
|
3720
|
-
* (o cruzar el breakpoint propio de 1024px, ver `SectionNav.scss`) no debe
|
|
3721
|
-
* destruir ese subárbol.
|
|
3722
|
-
*
|
|
3723
|
-
* <kf-section-nav-item
|
|
3724
|
-
* label="Mis datos personales"
|
|
3725
|
-
* icon="user"
|
|
3726
|
-
* [active]="openSection() === 'datos'"
|
|
3727
|
-
* (toggled)="openSection.set('datos')"
|
|
3728
|
-
* >
|
|
3729
|
-
* ...
|
|
3730
|
-
* </kf-section-nav-item>
|
|
3731
|
-
*/
|
|
3732
|
-
declare class SectionNavItem {
|
|
3733
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
3734
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
3735
|
-
readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3736
|
-
readonly toggled: _angular_core.OutputEmitterRef<void>;
|
|
3737
|
-
/** Sub-ítems navegables de este ítem, visibles solo mientras `active()`. */
|
|
3738
|
-
readonly subsections: _angular_core.InputSignal<SectionNavSubsectionData[]>;
|
|
3739
|
-
/** `key` del sub-ítem actualmente activo — ver `SectionNavSubsectionData`. */
|
|
3740
|
-
readonly activeSubsection: _angular_core.InputSignal<string | undefined>;
|
|
3741
|
-
readonly subsectionSelected: _angular_core.OutputEmitterRef<string>;
|
|
3742
|
-
protected readonly showSubsections: _angular_core.Signal<boolean>;
|
|
3743
|
-
protected onSubsectionClick(key: string, disabled: boolean | undefined, event: MouseEvent): void;
|
|
3744
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavItem, never>;
|
|
3745
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavItem, "kf-section-nav-item", never, { "label": { "alias": "label"; "required": true; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "subsections": { "alias": "subsections"; "required": false; "isSignal": true; }; "activeSubsection": { "alias": "activeSubsection"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; "subsectionSelected": "subsectionSelected"; }, never, ["*"], true, never>;
|
|
3746
|
-
}
|
|
3747
|
-
|
|
3748
|
-
/**
|
|
3749
|
-
* Envoltorio de contenido para UN sub-ítem de `kf-section-nav-item`. Varios
|
|
3750
|
-
* pueden proyectarse juntos, uno por `key` de `subsections()` del padre —
|
|
3751
|
-
* cada uno queda montado siempre (mismo criterio `[hidden]` que el propio
|
|
3752
|
-
* `kf-section-nav-item`), y solo se muestra el que coincide con
|
|
3753
|
-
* `activeSubsection()` del padre.
|
|
3754
|
-
*
|
|
3755
|
-
* <kf-section-nav-item [subsections]="subs" [activeSubsection]="active()" ...>
|
|
3756
|
-
* <kf-section-nav-subsection key="general"><app-general /></kf-section-nav-subsection>
|
|
3757
|
-
* <kf-section-nav-subsection key="seguridad"><app-seguridad /></kf-section-nav-subsection>
|
|
3758
|
-
* </kf-section-nav-item>
|
|
3759
|
-
*/
|
|
3760
|
-
declare class SectionNavSubsection {
|
|
3761
|
-
readonly key: _angular_core.InputSignal<string>;
|
|
3762
|
-
private readonly parent;
|
|
3763
|
-
protected readonly isActive: _angular_core.Signal<boolean>;
|
|
3764
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SectionNavSubsection, never>;
|
|
3765
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SectionNavSubsection, "kf-section-nav-subsection", never, { "key": { "alias": "key"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
3766
|
-
}
|
|
3767
|
-
|
|
3768
|
-
interface SegmentedOption {
|
|
3769
|
-
value: string;
|
|
3770
|
-
label: string;
|
|
3771
|
-
}
|
|
3772
|
-
/**
|
|
3773
|
-
* Control de segmentos relleno, tipo "iOS segmented control": 2-3 opciones
|
|
3774
|
-
* con un thumb que se desliza detrás de la opción activa.
|
|
3775
|
-
*
|
|
3776
|
-
* La posición del thumb se resuelve con una variable CSS (--kf-segmented-index)
|
|
3777
|
-
* y `transform: translateX()`, así la transición queda a cargo de CSS puro
|
|
3778
|
-
* (mismo criterio que Tabs), sin medir el DOM desde TypeScript.
|
|
3779
|
-
*
|
|
3780
|
-
* <kf-segmented [options]="options" [value]="value" (valueChange)="onChange($event)" />
|
|
3781
|
-
*/
|
|
3782
|
-
declare class Segmented {
|
|
3783
|
-
readonly options: _angular_core.InputSignal<SegmentedOption[]>;
|
|
3784
|
-
readonly value: _angular_core.InputSignal<string>;
|
|
3785
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
3786
|
-
/** Índice de la opción activa; -1 si `value` no matchea ninguna opción. */
|
|
3787
|
-
readonly selectedIndex: _angular_core.Signal<number>;
|
|
3788
|
-
select(nextValue: string): void;
|
|
3789
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Segmented, never>;
|
|
3790
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Segmented, "kf-segmented", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
3791
|
-
}
|
|
3792
|
-
|
|
3793
|
-
/** Normalized shape used internally once `options` (string[] or object[]) is resolved. */
|
|
3794
|
-
interface SelectOption {
|
|
3795
|
-
value: string;
|
|
3796
|
-
label: string;
|
|
3797
|
-
}
|
|
3798
|
-
/**
|
|
3799
|
-
* Dropdown de selección simple con panel propio — NUNCA usa el `<select>`
|
|
3800
|
-
* nativo del navegador. Un `<select>` real siempre delega el popup de
|
|
3801
|
-
* opciones al sistema operativo, y ningún CSS puede controlar cómo se ve
|
|
3802
|
-
* ese popup.
|
|
3803
|
-
*
|
|
3804
|
-
* El panel flotante se conecta al trigger vía `@angular/cdk/overlay` — el
|
|
3805
|
-
* mismo mecanismo que `Dropdown` (ver `../dropdown/Dropdown.ts`).
|
|
3806
|
-
*
|
|
3807
|
-
* <kf-select label="Sede" [options]="['Lima', 'Arequipa', 'Trujillo']" placeholder="Selecciona…" />
|
|
3808
|
-
* <kf-select [options]="[{ value: 'pe', label: 'Perú' }]" (valueChange)="onCountry($event)" />
|
|
3809
|
-
*
|
|
3810
|
-
* `variant="compact"` cambia el ancho de `240px` fijo a intrínseco con un
|
|
3811
|
-
* techo de `160px` (se ajusta al contenido de la opción seleccionada hasta
|
|
3812
|
-
* ese máximo, truncando con ellipsis si no entra) y reduce padding/tamaño de
|
|
3813
|
-
* fuente — pensado para selectores cortos embebidos en una barra (ej. "Filas
|
|
3814
|
-
* por página" en el footer de `kf-data-table`), nunca para un campo de
|
|
3815
|
-
* formulario largo, que sigue usando el `variant="field"` por defecto. El
|
|
3816
|
-
* panel flotante siempre mide el ancho real del trigger en cada apertura
|
|
3817
|
-
* (`SelectOverlay.attach`), así que se angosta solo sin cambios adicionales.
|
|
3818
|
-
*
|
|
3819
|
-
* <kf-select variant="compact" [options]="['5', '10', '25']" [value]="pageSize()" (valueChange)="..." />
|
|
3820
|
-
*
|
|
3821
|
-
* `width="full"` ocupa el 100% del contenedor — para selects dentro de
|
|
3822
|
-
* layouts flex/grid donde el ancho fijo de `md` no encaja.
|
|
3823
|
-
*
|
|
3824
|
-
* <kf-select width="full" [options]="branches" [value]="branch()" (valueChange)="..." />
|
|
3825
|
-
*/
|
|
3826
|
-
declare class Select {
|
|
3827
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
3828
|
-
readonly options: _angular_core.InputSignal<string[] | SelectOption[]>;
|
|
3829
|
-
readonly value: _angular_core.InputSignal<string | undefined>;
|
|
3830
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
3831
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3832
|
-
/** Borde en rojo y `aria-invalid` en el trigger. Ver `errorMessage` para el mensaje asociado — mismo contrato que `kf-input`. */
|
|
3833
|
-
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3834
|
-
/** Mensaje de error con `role="alert"`, debajo del trigger. */
|
|
3835
|
-
readonly errorMessage: _angular_core.InputSignal<string | undefined>;
|
|
3836
|
-
readonly variant: _angular_core.InputSignal<"field" | "compact">;
|
|
3837
|
-
/**
|
|
3838
|
-
* Ancho del control. 'md' (240px) es el default histórico y preserva el
|
|
3839
|
-
* comportamiento actual sin cambios para consumidores existentes.
|
|
3840
|
-
* 'full' ocupa el 100% del contenedor — para selects dentro de layouts
|
|
3841
|
-
* flex/grid donde el ancho fijo no encaja (ej. un footer de sidebar).
|
|
3842
|
-
*/
|
|
3843
|
-
readonly width: _angular_core.InputSignal<"sm" | "md" | "lg" | "full">;
|
|
3844
|
-
/**
|
|
3845
|
-
* Tri-state: si el consumidor no lo especifica (`undefined`), el buscador
|
|
3846
|
-
* se activa solo cuando `options().length` supera `searchThreshold()`. Si
|
|
3847
|
-
* el consumidor define `true`/`false` explícitamente, ese valor manda por
|
|
3848
|
-
* sobre el umbral automático.
|
|
3849
|
-
*/
|
|
3850
|
-
readonly searchable: _angular_core.InputSignal<boolean | undefined>;
|
|
3851
|
-
readonly searchThreshold: _angular_core.InputSignal<number>;
|
|
3852
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
3853
|
-
private readonly instanceId;
|
|
3854
|
-
readonly triggerId: string;
|
|
3855
|
-
readonly listboxId: string;
|
|
3856
|
-
readonly errorId: string;
|
|
3857
|
-
readonly isOpen: _angular_core.WritableSignal<boolean>;
|
|
3858
|
-
readonly searchQuery: _angular_core.WritableSignal<string>;
|
|
3859
|
-
readonly activeIndex: _angular_core.WritableSignal<number>;
|
|
3860
|
-
/** Resolves the union (`string[] | { value; label }[]`) into a single shape for the template. */
|
|
3861
|
-
readonly normalizedOptions: _angular_core.Signal<SelectOption[]>;
|
|
3862
|
-
readonly selectedOption: _angular_core.Signal<SelectOption | undefined>;
|
|
3863
|
-
readonly showSearch: _angular_core.Signal<boolean>;
|
|
3864
|
-
/** Opciones visibles tras aplicar el filtro de búsqueda (case/acento-insensitive). */
|
|
3865
|
-
readonly filteredOptions: _angular_core.Signal<SelectOption[]>;
|
|
3866
|
-
private readonly triggerRef;
|
|
3867
|
-
private readonly panelTemplate;
|
|
3868
|
-
private readonly searchInputRef;
|
|
3869
|
-
private readonly overlay;
|
|
3870
|
-
constructor();
|
|
3871
|
-
/**
|
|
3872
|
-
* Respaldo de `overlayRef.keydownEvents()`: ese observable del CDK solo ve
|
|
3873
|
-
* teclas presionadas con el foco DENTRO del pane del overlay. Si el foco
|
|
3874
|
-
* sigue en el trigger (o en cualquier otro lado de la página) mientras el
|
|
3875
|
-
* panel está abierto, `keydownEvents()` nunca dispara.
|
|
3876
|
-
*/
|
|
3877
|
-
onDocumentEscape(): void;
|
|
3878
|
-
toggle(): void;
|
|
3879
|
-
select(option: SelectOption): void;
|
|
3880
|
-
onSearchInput(event: Event): void;
|
|
3881
|
-
/**
|
|
3882
|
-
* Mueve `activeIndex` sobre las opciones YA FILTRADAS visibles. Clamp
|
|
3883
|
-
* simple (sin wraparound): llegar al final o al principio de la lista se
|
|
3884
|
-
* queda ahí en vez de dar la vuelta — es el comportamiento más predecible
|
|
3885
|
-
* cuando se combina con un buscador que puede reducir la lista a 1 opción.
|
|
3886
|
-
*/
|
|
3887
|
-
moveActive(delta: number): void;
|
|
3888
|
-
selectActive(): void;
|
|
3889
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Select, never>;
|
|
3890
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Select, "kf-select", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "searchable": { "alias": "searchable"; "required": false; "isSignal": true; }; "searchThreshold": { "alias": "searchThreshold"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
3891
|
-
}
|
|
3892
|
-
|
|
3893
|
-
interface SelectableCardOption {
|
|
3894
|
-
value: string;
|
|
3895
|
-
label: string;
|
|
3896
|
-
icon?: IconName;
|
|
3897
|
-
}
|
|
3898
|
-
/**
|
|
3899
|
-
* Radio group real (`role="radiogroup"` + `role="radio"` + `aria-checked`),
|
|
3900
|
-
* con apariencia de cards apiladas verticalmente — para una decisión ÚNICA Y
|
|
3901
|
-
* EXCLUYENTE dentro de un flujo (ej. método de pago, tipo de documento a
|
|
3902
|
-
* subir), no para filtrar una lista.
|
|
3903
|
-
*
|
|
3904
|
-
* Distinto de `kf-filter-chips` a propósito: `FilterChips` es semántica y
|
|
3905
|
-
* visualmente un FILTRO (chips horizontales, se resaltan con `--kf-color-ink`
|
|
3906
|
-
* — pensado para "Todos/Activos/Archivados" sobre una lista, donde elegir
|
|
3907
|
-
* una opción cambia qué se MUESTRA). Acá la elección es la respuesta misma
|
|
3908
|
-
* a una pregunta del flujo ("¿con qué método pagás?"), no un filtro — por
|
|
3909
|
-
* eso necesita affordance de radio (círculo con punto, más peso visual por
|
|
3910
|
-
* opción) en vez de un pill de filtro reciclado.
|
|
3911
|
-
*
|
|
3912
|
-
* Réplica fiel del patrón ya resuelto en el Design System de referencia
|
|
3913
|
-
* (`otd-pagos.jsx` / `otd.css`: `.otd-pay-method` + `.radio`) — apilado
|
|
3914
|
-
* vertical con gap 10px, radio de 18px con punto interno vía `::after`,
|
|
3915
|
-
* borde+fondo+ícono cambian de color al seleccionar. Se agrega manejo de
|
|
3916
|
-
* teclado (flechas arriba/abajo, Home/End) y `:focus-visible` real, ninguno
|
|
3917
|
-
* de los dos presentes en el mockup original — mínimos de accesibilidad que
|
|
3918
|
-
* no dependen de fidelidad visual al mockup.
|
|
3919
|
-
*
|
|
3920
|
-
* <kf-selectable-card-group
|
|
3921
|
-
* [options]="[{ value: 'card', label: 'Tarjeta', icon: 'credit-card' }]"
|
|
3922
|
-
* [value]="method()"
|
|
3923
|
-
* (valueChange)="method.set($event)"
|
|
3924
|
-
* />
|
|
3925
|
-
*/
|
|
3926
|
-
declare class SelectableCardGroup {
|
|
3927
|
-
readonly options: _angular_core.InputSignal<SelectableCardOption[]>;
|
|
3928
|
-
readonly value: _angular_core.InputSignal<string>;
|
|
3929
|
-
/** Accesible: describe qué está eligiendo el usuario (ej. "Método de pago"). */
|
|
3930
|
-
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
3931
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
3932
|
-
select(value: string): void;
|
|
3933
|
-
protected onKeydown(event: KeyboardEvent, currentValue: string): void;
|
|
3934
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SelectableCardGroup, never>;
|
|
3935
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SelectableCardGroup, "kf-selectable-card-group", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
3936
|
-
}
|
|
3937
|
-
|
|
3938
|
-
/** Contrato de datos de `kf-sidebar-shell.navItems`. `icon` es requerido:
|
|
3939
|
-
* en el sidebar persistente el ícono es parte permanente del diseño. */
|
|
3940
|
-
interface SidebarNavItemData {
|
|
3941
|
-
icon: IconName;
|
|
3942
|
-
label: string;
|
|
3943
|
-
href: string;
|
|
3944
|
-
active?: boolean;
|
|
3945
|
-
}
|
|
3946
|
-
|
|
3947
|
-
/**
|
|
3948
|
-
* Shell de layout con navegación lateral persistente — el complemento
|
|
3949
|
-
* vertical de `kf-portal-header` (navbar horizontal). Pensado para
|
|
3950
|
-
* portales tipo "aplicación interna" (Portal OTD, Servicio Star).
|
|
3951
|
-
*
|
|
3952
|
-
* `navItems` se recibe como array de datos (no como contenido proyectado):
|
|
3953
|
-
* el componente no sabe nada de routing, emite `navItemClick` con el ítem
|
|
3954
|
-
* clickeado y deja que el consumidor decida cómo navegar.
|
|
3955
|
-
*
|
|
3956
|
-
* Slots: `[kf-sidebar-brand]` (logo del rail expandido, visible en desktop
|
|
3957
|
-
* y en el panel mobile — es el MISMO rail), `[kf-sidebar-brand-collapsed]`
|
|
3958
|
-
* (reemplazo opcional cuando el rail está colapsado en desktop),
|
|
3959
|
-
* `[kf-sidebar-brand-mobile]` (logo de la topbar angosta de mobile, fondo
|
|
3960
|
-
* claro) y `[kf-sidebar-footer]` (tarjeta de usuario / acciones al pie).
|
|
3961
|
-
*
|
|
3962
|
-
* Botón de colapso: vive como último ítem de la propia lista de
|
|
3963
|
-
* navegación, no flotando en el borde del rail — mismo criterio de
|
|
3964
|
-
* tap-target grande y predecible que el resto de los ítems.
|
|
3965
|
-
*
|
|
3966
|
-
* Responsive: bajo los 900px el sidebar NO se reemplaza por un panel
|
|
3967
|
-
* distinto — es el MISMO rail el que pasa a `position: fixed` fuera de la
|
|
3968
|
-
* pantalla (`translateX(-100%)`) y se desliza a la vista (`translateX(0)`)
|
|
3969
|
-
* sobre un backdrop cuando `mobileOpen` es `true`. Una topbar angosta con
|
|
3970
|
-
* botón de hamburguesa reemplaza al rail en el flujo del documento
|
|
3971
|
-
* mientras el panel está cerrado.
|
|
3972
|
-
*
|
|
3973
|
-
* A propósito NO reutiliza `kf-drawer` (el panel lateral genérico de la
|
|
3974
|
-
* librería): `kf-drawer` tiene su propio fondo claro fijo, incompatible
|
|
3975
|
-
* con el texto claro de `kf-sidebar-nav-item` (pensado para el gradiente
|
|
3976
|
-
* oscuro), y duplicaría el árbol de navegación en un segundo lugar del
|
|
3977
|
-
* DOM. Acá hay un solo rail, un solo árbol de nav, que cambia de posición
|
|
3978
|
-
* según el viewport.
|
|
3979
|
-
*/
|
|
3980
|
-
declare class SidebarShell {
|
|
3981
|
-
/** Ítems del menú del rail. */
|
|
3982
|
-
readonly navItems: _angular_core.InputSignal<SidebarNavItemData[]>;
|
|
3983
|
-
/** Estado de colapso del rail en desktop, two-way. Sin efecto bajo los 900px (ver estilos). */
|
|
3984
|
-
readonly collapsed: _angular_core.ModelSignal<boolean>;
|
|
3985
|
-
/** Visibilidad del rail deslizado como panel en mobile, two-way. */
|
|
3986
|
-
readonly mobileOpen: _angular_core.ModelSignal<boolean>;
|
|
3987
|
-
/** Se emite al clickear un ítem — el consumidor decide cómo navegar (ej. `router.navigateByUrl`). */
|
|
3988
|
-
readonly navItemClick: _angular_core.OutputEmitterRef<SidebarNavItemData>;
|
|
3989
|
-
/** `true` bajo los 900px. */
|
|
3990
|
-
private readonly isMobileViewport;
|
|
3991
|
-
/**
|
|
3992
|
-
* Estado de colapso EFECTIVO — el que ya considera el viewport, no el
|
|
3993
|
-
* `collapsed` crudo. Es lo que usa el propio rail para sus nav-items y
|
|
3994
|
-
* el botón de colapso; se expone público para que el consumidor le
|
|
3995
|
-
* pase el mismo valor a lo que proyecte en `[kf-sidebar-footer]` (ej.
|
|
3996
|
-
* `kf-drawer-session`) — así un footer proyectado no queda colapsado
|
|
3997
|
-
* dentro del panel deslizado de mobile mientras el resto del rail ya
|
|
3998
|
-
* muestra todo expandido.
|
|
3999
|
-
*/
|
|
4000
|
-
readonly itemsCollapsed: _angular_core.Signal<boolean>;
|
|
4001
|
-
/** Cierra el panel mobile con Escape — mismo criterio que `Dropdown`/`Modal`/`Drawer`. */
|
|
4002
|
-
protected onEscape(): void;
|
|
4003
|
-
protected onNavItemClick(event: Event, item: SidebarNavItemData): void;
|
|
4004
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SidebarShell, never>;
|
|
4005
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SidebarShell, "kf-sidebar-shell", never, { "navItems": { "alias": "navItems"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "mobileOpen": { "alias": "mobileOpen"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "mobileOpen": "mobileOpenChange"; "navItemClick": "navItemClick"; }, never, ["[kf-sidebar-brand]", "[kf-sidebar-brand-collapsed]", "[kf-sidebar-footer]", "[kf-sidebar-brand-mobile]"], true, never>;
|
|
4006
|
-
}
|
|
4007
|
-
|
|
4008
|
-
/** Forma del placeholder. */
|
|
4009
|
-
type SkeletonVariant = 'text' | 'circle' | 'rect';
|
|
4010
|
-
/**
|
|
4011
|
-
* Bloque placeholder con shimmer para contenido que todavía carga: una línea
|
|
4012
|
-
* de texto, un avatar o un área de card/imagen, según `variant`.
|
|
4013
|
-
*
|
|
4014
|
-
* Es decorativo (`aria-hidden`): quien lo usa debería marcar el contenedor con
|
|
4015
|
-
* `aria-busy="true"` mientras carga, así el lector de pantalla anuncia el
|
|
4016
|
-
* estado una vez en vez de leer N placeholders vacíos.
|
|
4017
|
-
*
|
|
4018
|
-
* `circle` usa `aspect-ratio`, así que alcanza con darle `width`.
|
|
4019
|
-
*
|
|
4020
|
-
* <kf-skeleton />
|
|
4021
|
-
* <kf-skeleton variant="circle" width="40px" />
|
|
4022
|
-
* <kf-skeleton variant="rect" width="100%" height="120px" />
|
|
4023
|
-
*/
|
|
4024
|
-
declare class Skeleton {
|
|
4025
|
-
readonly variant: _angular_core.InputSignal<SkeletonVariant>;
|
|
4026
|
-
/** Ancho CSS. Default `'100%'`. */
|
|
4027
|
-
readonly width: _angular_core.InputSignal<string>;
|
|
4028
|
-
/** Alto CSS. Vacío deja el alto/aspect-ratio propio de la variante. */
|
|
4029
|
-
readonly height: _angular_core.InputSignal<string>;
|
|
4030
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Skeleton, never>;
|
|
4031
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Skeleton, "kf-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4032
|
-
}
|
|
4033
|
-
|
|
4034
|
-
type SpinnerSize = 'sm' | 'md' | 'lg';
|
|
4035
|
-
/**
|
|
4036
|
-
* Indicador de carga indeterminado: inline, dentro de un botón, o como único
|
|
4037
|
-
* contenido de una sección mientras llega la data.
|
|
4038
|
-
*
|
|
4039
|
-
* Cuando se conoce la forma del contenido que viene, preferir `kf-skeleton`
|
|
4040
|
-
* (dibuja la silueta). El spinner es para "algo está pasando" sin forma
|
|
4041
|
-
* conocida — guardar, enviar, reintentar.
|
|
4042
|
-
*
|
|
4043
|
-
* Lleva `role="status"`, así que el lector de pantalla anuncia el `label`
|
|
4044
|
-
* cuando aparece. Sin `label` cae en un texto accesible por defecto.
|
|
4045
|
-
*
|
|
4046
|
-
* <kf-spinner />
|
|
4047
|
-
* <kf-spinner size="sm" label="Cargando…" />
|
|
4048
|
-
* <kf-spinner onDark />
|
|
4049
|
-
*/
|
|
4050
|
-
declare class Spinner {
|
|
4051
|
-
readonly size: _angular_core.InputSignal<SpinnerSize>;
|
|
4052
|
-
/** Texto al lado del anillo. Vacío deja solo el anillo (y el texto para lectores). */
|
|
4053
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
4054
|
-
/** Invierte los colores para fondos oscuros. */
|
|
4055
|
-
readonly onDark: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4056
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Spinner, never>;
|
|
4057
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Spinner, "kf-spinner", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "onDark": { "alias": "onDark"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4058
|
-
}
|
|
4059
|
-
|
|
4060
|
-
type SsoProvider = 'microsoft';
|
|
4061
|
-
/** Copy y glyph por proveedor — agregar una entrada acá es todo lo que hace
|
|
4062
|
-
* falta para soportar un proveedor nuevo (ej. `google`), sin tocar el
|
|
4063
|
-
* template ni los estilos del componente. */
|
|
4064
|
-
interface SsoProviderConfig {
|
|
4065
|
-
readonly label: string;
|
|
4066
|
-
}
|
|
4067
|
-
/**
|
|
4068
|
-
* Botón de inicio de sesión vía SSO corporativo — pensado como pieza suelta,
|
|
4069
|
-
* no acoplada a `kf-auth-layout`: cualquier consumidor puede usarlo solo,
|
|
4070
|
-
* dentro o fuera del slot `[sso]` de `AuthLayout`.
|
|
4071
|
-
*
|
|
4072
|
-
* `provider` resuelve copy y glyph — hoy solo `'microsoft'` (el método
|
|
4073
|
-
* principal de acceso del ecosistema, cuenta corporativa de Grupo Kaufmann),
|
|
4074
|
-
* con la puerta abierta a sumar otros a futuro sin romper la API existente.
|
|
4075
|
-
*
|
|
4076
|
-
* El glyph es el ícono GENÉRICO de 4 cuadrados de colores que Microsoft
|
|
4077
|
-
* publica en sus propias guías de marca para botones de terceros ("Sign in
|
|
4078
|
-
* with Microsoft") — nunca el logotipo/wordmark oficial completo. No vive en
|
|
4079
|
-
* el sprite de `kf-icon` (`icon-sprite.ts`) a propósito: ese catálogo es
|
|
4080
|
-
* monocromático (`currentColor`, ver `Icon.ts`), pensado para trazos de un
|
|
4081
|
-
* solo color — este glyph necesita sus 4 colores fijos tal como los define
|
|
4082
|
-
* la guía de marca, así que un SVG inline propio es la opción correcta, no
|
|
4083
|
-
* un glyph nuevo forzado al sprite compartido.
|
|
4084
|
-
*
|
|
4085
|
-
* El label por defecto viene de `provider` — pasar contenido propio via
|
|
4086
|
-
* `<ng-content>` lo reemplaza (ej. un texto más corto en un lugar angosto).
|
|
4087
|
-
*
|
|
4088
|
-
* <kf-sso-button provider="microsoft" (ssoClick)="loginWithMicrosoft()" />
|
|
4089
|
-
* <kf-sso-button provider="microsoft" [loading]="loggingIn()">
|
|
4090
|
-
* Ingresar con cuenta corporativa
|
|
4091
|
-
* </kf-sso-button>
|
|
4092
|
-
*/
|
|
4093
|
-
declare class SsoButton {
|
|
4094
|
-
readonly provider: _angular_core.InputSignal<"microsoft">;
|
|
4095
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4096
|
-
/** Reemplaza el glyph + label por `kf-spinner` y fuerza `disabled` — mismo
|
|
4097
|
-
* patrón que `kf-button[loading]`. */
|
|
4098
|
-
readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4099
|
-
/** Igual que `kf-button`: por defecto `submit` dentro de un `<form>`, pero
|
|
4100
|
-
* este botón normalmente vive fuera de cualquier form (dispara un
|
|
4101
|
-
* redirect a Microsoft Entra ID), así que casi siempre conviene `button`. */
|
|
4102
|
-
readonly type: _angular_core.InputSignal<"button" | "submit">;
|
|
4103
|
-
protected readonly config: _angular_core.Signal<SsoProviderConfig>;
|
|
4104
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SsoButton, never>;
|
|
4105
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SsoButton, "kf-sso-button", never, { "provider": { "alias": "provider"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
4106
|
-
}
|
|
4107
|
-
|
|
4108
|
-
type StatCardTone = 'primary' | 'success' | 'error' | 'purple';
|
|
4109
|
-
/**
|
|
4110
|
-
* Card de estadística horizontal: ícono circular grande a la izquierda,
|
|
4111
|
-
* valor + label + nota apilados al centro, chevron opcional al final si es
|
|
4112
|
-
* clickeable. Distinta de `kf-metric-card` (layout vertical, label arriba +
|
|
4113
|
-
* ícono a la derecha) — este es el patrón real del dashboard de OTD ("Bonos
|
|
4114
|
-
* otorgados", "Cortesías otorgadas"), no una variante de la misma card.
|
|
4115
|
-
*
|
|
4116
|
-
* <kf-stat-card icon="gift" tone="purple" value="4" label="Bonos otorgados" note="$15,000.00 en beneficios" (cardClick)="onNavigate('beneficios')" />
|
|
4117
|
-
*/
|
|
4118
|
-
declare class StatCard {
|
|
4119
|
-
readonly icon: _angular_core.InputSignal<IconName>;
|
|
4120
|
-
readonly tone: _angular_core.InputSignal<StatCardTone>;
|
|
4121
|
-
readonly value: _angular_core.InputSignal<string | number>;
|
|
4122
|
-
readonly label: _angular_core.InputSignal<string>;
|
|
4123
|
-
readonly note: _angular_core.InputSignal<string | undefined>;
|
|
4124
|
-
/** Si se escucha `cardClick`, la card se renderiza como botón clickeable con chevron. */
|
|
4125
|
-
readonly clickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4126
|
-
readonly cardClick: _angular_core.OutputEmitterRef<void>;
|
|
4127
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatCard, never>;
|
|
4128
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatCard, "kf-stat-card", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; "label": { "alias": "label"; "required": true; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "clickable": { "alias": "clickable"; "required": false; "isSignal": true; }; }, { "cardClick": "cardClick"; }, never, never, true, never>;
|
|
4129
|
-
}
|
|
4130
|
-
|
|
4131
|
-
/** Vocabulario semántico único de tono, compartido con `TextTone`. */
|
|
4132
|
-
type StatTileTone = 'neutral' | 'ok' | 'warn' | 'error' | 'info';
|
|
4133
|
-
type StatTileVariant = 'inline' | 'card';
|
|
4134
|
-
/**
|
|
4135
|
-
* Indicador numérico compacto: label + valor grande con ícono, para grillas
|
|
4136
|
-
* densas de KPIs. Con `cta` en vez de `value` se convierte en un bloque de
|
|
4137
|
-
* llamada a la acción (título, descripción y link, sin tono ni número).
|
|
4138
|
-
* `variant="inline"` quita fondo/borde para una fila horizontal donde el
|
|
4139
|
-
* consumidor pone sus propios separadores.
|
|
4140
|
-
*
|
|
4141
|
-
* `hasProjectedValue` reemplaza el valor de texto por contenido proyectado
|
|
4142
|
-
* (`[valueContent]`) cuando el dato no es un número/string medido — el
|
|
4143
|
-
* caso típico es un estado con su propio `kf-badge`, que necesita su
|
|
4144
|
-
* tono/dot propios en vez del tono del tile:
|
|
4145
|
-
*
|
|
4146
|
-
* <kf-stat-tile label="Estado" hasProjectedValue>
|
|
4147
|
-
* <kf-badge valueContent [tone]="stateTone()">{{ stateLabel() }}</kf-badge>
|
|
4148
|
-
* </kf-stat-tile>
|
|
4149
|
-
*/
|
|
4150
|
-
declare class StatTile {
|
|
4151
|
-
readonly cta: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4152
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
4153
|
-
readonly value: _angular_core.InputSignal<string | number | undefined>;
|
|
4154
|
-
readonly icon: _angular_core.InputSignal<IconName | undefined>;
|
|
4155
|
-
readonly variant: _angular_core.InputSignal<StatTileVariant>;
|
|
4156
|
-
readonly tone: _angular_core.InputSignal<StatTileTone>;
|
|
4157
|
-
/** Tercera línea bajo el valor. Vacía cae en `notePlaceholder`. */
|
|
4158
|
-
readonly note: _angular_core.InputSignal<string | null | undefined>;
|
|
4159
|
-
/** Qué dice la tercera línea cuando no hay nota. Cada consumidor debería
|
|
4160
|
-
* pasar el motivo real de SU dato ausente, no un texto genérico. */
|
|
4161
|
-
readonly notePlaceholder: _angular_core.InputSignal<string | undefined>;
|
|
4162
|
-
/** Rinde el valor como ausencia, no como dato medido. */
|
|
4163
|
-
readonly valueMissing: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4164
|
-
/** El valor es contenido proyectado (`<ng-content select="[valueContent]">`,
|
|
4165
|
-
* ej. un `kf-badge` de estado) en vez del texto de `value()` — para un
|
|
4166
|
-
* dato cuya representación natural no es un número/string medido. */
|
|
4167
|
-
readonly hasProjectedValue: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4168
|
-
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
4169
|
-
readonly description: _angular_core.InputSignal<string | undefined>;
|
|
4170
|
-
readonly actionLabel: _angular_core.InputSignal<string | undefined>;
|
|
4171
|
-
readonly actionHref: _angular_core.InputSignal<string | undefined>;
|
|
4172
|
-
/** Texto real de la nota. `null` significa "no reservar la línea": pasa
|
|
4173
|
-
* solo cuando el consumidor no declaró ni nota ni placeholder. */
|
|
4174
|
-
protected readonly noteText: _angular_core.Signal<string | null>;
|
|
4175
|
-
protected readonly noteIsPlaceholder: _angular_core.Signal<boolean>;
|
|
4176
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatTile, never>;
|
|
4177
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatTile, "kf-stat-tile", never, { "cta": { "alias": "cta"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "note": { "alias": "note"; "required": false; "isSignal": true; }; "notePlaceholder": { "alias": "notePlaceholder"; "required": false; "isSignal": true; }; "valueMissing": { "alias": "valueMissing"; "required": false; "isSignal": true; }; "hasProjectedValue": { "alias": "hasProjectedValue"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "actionLabel": { "alias": "actionLabel"; "required": false; "isSignal": true; }; "actionHref": { "alias": "actionHref"; "required": false; "isSignal": true; }; }, {}, never, ["[valueContent]"], true, never>;
|
|
4178
|
-
}
|
|
4179
|
-
|
|
4180
|
-
/**
|
|
4181
|
-
* Pill con borde, en mayúsculas y con letter-spacing, pensada para indicadores
|
|
4182
|
-
* de estado únicos y prominentes (ej. "ESTADO TÉCNICO"). El fondo es siempre
|
|
4183
|
-
* transparente; el color de borde/texto/punto depende de `tone`.
|
|
4184
|
-
*
|
|
4185
|
-
* <kf-status-pill tone="ok">Operativo</kf-status-pill>
|
|
4186
|
-
* <kf-status-pill tone="error" dot>Fuera de servicio</kf-status-pill>
|
|
4187
|
-
*/
|
|
4188
|
-
declare class StatusPill {
|
|
4189
|
-
readonly tone: _angular_core.InputSignal<"ok" | "warn" | "error" | "blue">;
|
|
4190
|
-
readonly dot: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4191
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<StatusPill, never>;
|
|
4192
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<StatusPill, "kf-status-pill", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "dot": { "alias": "dot"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
4193
|
-
}
|
|
4194
|
-
|
|
4195
|
-
interface TabOption {
|
|
4196
|
-
value: string;
|
|
4197
|
-
label: string;
|
|
4198
|
-
icon?: IconName;
|
|
4199
|
-
}
|
|
4200
|
-
/**
|
|
4201
|
-
* Barra de tabs subrayada: un indicador se desliza hasta la pestaña activa.
|
|
4202
|
-
* La posición se mide (`offsetLeft`/`offsetWidth`) después de cada render,
|
|
4203
|
-
* ya que las pestañas tienen ancho de contenido variable.
|
|
4204
|
-
*
|
|
4205
|
-
* <kf-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
|
|
4206
|
-
*/
|
|
4207
|
-
declare class Tabs {
|
|
4208
|
-
readonly options: _angular_core.InputSignal<TabOption[]>;
|
|
4209
|
-
readonly value: _angular_core.InputSignal<string>;
|
|
4210
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
4211
|
-
private readonly track;
|
|
4212
|
-
private readonly destroyRef;
|
|
4213
|
-
private readonly activeRect;
|
|
4214
|
-
protected readonly indicatorTransform: _angular_core.Signal<string>;
|
|
4215
|
-
protected readonly indicatorWidth: _angular_core.Signal<number>;
|
|
4216
|
-
constructor();
|
|
4217
|
-
private measure;
|
|
4218
|
-
select(value: string): void;
|
|
4219
|
-
protected onKeydown(event: KeyboardEvent, currentValue: string): void;
|
|
4220
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Tabs, never>;
|
|
4221
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Tabs, "kf-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
4222
|
-
}
|
|
4223
|
-
|
|
4224
|
-
interface FolderTabOption {
|
|
4225
|
-
value: string;
|
|
4226
|
-
label: string;
|
|
4227
|
-
icon?: IconName;
|
|
4228
|
-
}
|
|
4229
|
-
/**
|
|
4230
|
-
* Marca el contenido que `kf-folder-tabs` debe proyectar dentro de su panel.
|
|
4231
|
-
*
|
|
4232
|
-
* <div kfFolderTabsPanel>...</div>
|
|
4233
|
-
*/
|
|
4234
|
-
declare class FolderTabsPanel {
|
|
4235
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabsPanel, never>;
|
|
4236
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FolderTabsPanel, "[kfFolderTabsPanel]", never, {}, {}, never, never, true, never>;
|
|
4237
|
-
}
|
|
4238
|
-
/**
|
|
4239
|
-
* Tabs con forma de "carpeta": borde superior redondeado, la pestaña activa
|
|
4240
|
-
* se funde visualmente con el panel de contenido de abajo. El panel
|
|
4241
|
-
* (`kfFolderTabsPanel`) es opcional — sin él, se renderiza solo la fila de
|
|
4242
|
-
* pestañas.
|
|
4243
|
-
*
|
|
4244
|
-
* <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event">
|
|
4245
|
-
* <div kfFolderTabsPanel>contenido de la pestaña activa</div>
|
|
4246
|
-
* </kf-folder-tabs>
|
|
4247
|
-
*
|
|
4248
|
-
* <!-- o, sin contenido: -->
|
|
4249
|
-
* <kf-folder-tabs [options]="tabs" [value]="active" (valueChange)="active = $event" />
|
|
4250
|
-
*/
|
|
4251
|
-
declare class FolderTabs {
|
|
4252
|
-
readonly options: _angular_core.InputSignal<FolderTabOption[]>;
|
|
4253
|
-
readonly value: _angular_core.InputSignal<string>;
|
|
4254
|
-
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
4255
|
-
/** Id del panel único — todos los tabs lo referencian vía `aria-controls`. */
|
|
4256
|
-
protected readonly panelId: string;
|
|
4257
|
-
private readonly projectedPanel;
|
|
4258
|
-
protected readonly hasPanel: _angular_core.Signal<boolean>;
|
|
4259
|
-
select(value: string): void;
|
|
4260
|
-
protected onKeydown(event: KeyboardEvent, currentValue: string): void;
|
|
4261
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FolderTabs, never>;
|
|
4262
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FolderTabs, "kf-folder-tabs", never, { "options": { "alias": "options"; "required": true; "isSignal": true; }; "value": { "alias": "value"; "required": true; "isSignal": true; }; }, { "valueChange": "valueChange"; }, ["projectedPanel"], ["[kfFolderTabsPanel]"], true, never>;
|
|
4263
|
-
}
|
|
4264
|
-
|
|
4265
|
-
/**
|
|
4266
|
-
* Textarea de formulario apilado: mismo patrón visual y de integración que
|
|
4267
|
-
* `kf-input` (label arriba, `ControlValueAccessor`, funciona con
|
|
4268
|
-
* `[(ngModel)]` y con Reactive Forms) para el caso de texto libre
|
|
4269
|
-
* multilínea (notas, comentarios, descripciones).
|
|
4270
|
-
*
|
|
4271
|
-
* <kf-textarea label="Notas" formControlName="notes" />
|
|
4272
|
-
* <kf-textarea label="Comentario" [(ngModel)]="comment" [minRows]="2" [maxRows]="10" />
|
|
4273
|
-
*
|
|
4274
|
-
* `minRows`/`maxRows` (3 y 6 por defecto) acotan el crecimiento: el campo
|
|
4275
|
-
* crece con el contenido pero nunca pasa de `maxRows` — superado ese tope el
|
|
4276
|
-
* contenido hace scroll interno (`overflow-y: auto`) en vez de seguir
|
|
4277
|
-
* empujando el layout. Reemplaza el `resize: vertical` nativo (deshabilitado
|
|
4278
|
-
* a propósito) porque un resize manual sin tope es exactamente el problema
|
|
4279
|
-
* que motivó este componente: un `<textarea>` a mano podía crecer hasta
|
|
4280
|
-
* tapar los botones del footer de un modal.
|
|
4281
|
-
*
|
|
4282
|
-
* <kf-textarea label="Detalle" formControlName="detail" [maxRows]="12" />
|
|
4283
|
-
*
|
|
4284
|
-
* `invalid` + `errorMessage` y `readonly`/`disabled` siguen el mismo
|
|
4285
|
-
* contrato que `kf-input` — ver su JSDoc para la diferencia entre ambos
|
|
4286
|
-
* estados.
|
|
4287
|
-
*/
|
|
4288
|
-
declare class Textarea implements ControlValueAccessor, AfterViewInit {
|
|
4289
|
-
private static nextId;
|
|
4290
|
-
private readonly nativeTextarea;
|
|
4291
|
-
readonly label: _angular_core.InputSignal<string | undefined>;
|
|
4292
|
-
/** Marca el label con un asterisco visual y aplica `required` al
|
|
4293
|
-
* `<textarea>` nativo — el atributo HTML ya expone el estado obligatorio a
|
|
4294
|
-
* lectores de pantalla (mapeo implícito a `aria-required`), sin necesidad
|
|
4295
|
-
* de un `aria-required` explícito redundante. */
|
|
4296
|
-
readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4297
|
-
readonly hint: _angular_core.InputSignal<string | undefined>;
|
|
4298
|
-
/** Borde y aria-invalid en rojo. Ver `errorMessage` para el mensaje asociado. */
|
|
4299
|
-
readonly invalid: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4300
|
-
/** Mensaje de error con `role="alert"` — reemplaza a `hint` mientras esté presente. */
|
|
4301
|
-
readonly errorMessage: _angular_core.InputSignal<string | undefined>;
|
|
4302
|
-
readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4303
|
-
/** Ver JSDoc de `kf-input` para la diferencia con `disabled`. */
|
|
4304
|
-
readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
4305
|
-
readonly placeholder: _angular_core.InputSignal<string>;
|
|
4306
|
-
/** Filas mínimas visibles en reposo — define la altura de arranque del campo. */
|
|
4307
|
-
readonly minRows: _angular_core.InputSignal<number>;
|
|
4308
|
-
/** Filas máximas antes de que el contenido pase a scroll interno en vez de seguir creciendo. */
|
|
4309
|
-
readonly maxRows: _angular_core.InputSignal<number>;
|
|
4310
|
-
protected readonly textareaId: string;
|
|
4311
|
-
protected readonly hintId: string;
|
|
4312
|
-
protected readonly errorId: string;
|
|
4313
|
-
protected readonly value: _angular_core.WritableSignal<string>;
|
|
4314
|
-
protected readonly focused: _angular_core.WritableSignal<boolean>;
|
|
4315
|
-
/** Deshabilitado por Reactive Forms (formControl.disable()). */
|
|
4316
|
-
private readonly disabledByForm;
|
|
4317
|
-
/** Disabled real: por input() directo o por el FormControl asociado. */
|
|
4318
|
-
protected readonly isDisabled: _angular_core.Signal<boolean>;
|
|
4319
|
-
private onChange;
|
|
4320
|
-
private onTouched;
|
|
4321
|
-
ngAfterViewInit(): void;
|
|
4322
|
-
writeValue(value: string): void;
|
|
4323
|
-
registerOnChange(fn: (value: string) => void): void;
|
|
4324
|
-
registerOnTouched(fn: () => void): void;
|
|
4325
|
-
setDisabledState(isDisabled: boolean): void;
|
|
4326
|
-
protected onInput(rawValue: string): void;
|
|
4327
|
-
protected onBlur(): void;
|
|
4328
|
-
/**
|
|
4329
|
-
* Recalcula la altura según el contenido real (`scrollHeight`), acotada
|
|
4330
|
-
* entre `minRows` y `maxRows` medidos con el line-height ya calculado del
|
|
4331
|
-
* propio elemento — así el tope se mantiene correcto sin importar qué
|
|
4332
|
-
* font-size/line-height termine aplicando cada tema. Superado `maxRows`
|
|
4333
|
-
* el resto del contenido hace scroll interno en vez de seguir creciendo.
|
|
4334
|
-
*/
|
|
4335
|
-
private adjustHeight;
|
|
4336
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<Textarea, never>;
|
|
4337
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<Textarea, "kf-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "invalid": { "alias": "invalid"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "minRows": { "alias": "minRows"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4338
|
-
}
|
|
4339
|
-
|
|
4340
|
-
/**
|
|
4341
|
-
* Da forma al valor de un campo MIENTRAS el usuario escribe — ej.
|
|
4342
|
-
* inserta el guion de un RUT chileno automáticamente, sin que el
|
|
4343
|
-
* usuario tenga que tipearlo — reposicionando el cursor para que
|
|
4344
|
-
* seguir escribiendo se sienta natural (sin esto, cualquier inserción
|
|
4345
|
-
* de caracteres empuja el cursor al final del campo en cada tecla).
|
|
4346
|
-
*
|
|
4347
|
-
* Se aplica junto a `formControlName`/`[formControl]`/`[(ngModel)]`
|
|
4348
|
-
* sobre cualquier input que implemente `ControlValueAccessor` (incluye
|
|
4349
|
-
* `kf-input`, pero no depende de él — funciona igual sobre un
|
|
4350
|
-
* `<input>` nativo):
|
|
4351
|
-
*
|
|
4352
|
-
* <kf-input formControlName="documentId" [kfFormatInput]="formatChileanRut" />
|
|
4353
|
-
*
|
|
4354
|
-
* La función de formateo recibe el valor crudo tecleado y devuelve el
|
|
4355
|
-
* valor con forma — debe ser determinística e idempotente (aplicarla
|
|
4356
|
-
* dos veces seguidas da el mismo resultado), como `formatChileanRut`
|
|
4357
|
-
* en este mismo archivo (`./format.ts`).
|
|
4358
|
-
*/
|
|
4359
|
-
declare class FormatInputDirective {
|
|
4360
|
-
private readonly ngControl;
|
|
4361
|
-
/** La función de formateo a aplicar — sin valor, el directive no
|
|
4362
|
-
* hace nada (permite pasar `undefined` condicionalmente sin tener
|
|
4363
|
-
* que quitar el directive del template entero). */
|
|
4364
|
-
readonly kfFormatInput: _angular_core.InputSignal<((value: string) => string) | undefined>;
|
|
4365
|
-
protected onInput(event: Event): void;
|
|
4366
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormatInputDirective, never>;
|
|
4367
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<FormatInputDirective, "[kfFormatInput]", never, { "kfFormatInput": { "alias": "kfFormatInput"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
4368
|
-
}
|
|
4369
|
-
|
|
4370
|
-
/**
|
|
4371
|
-
* Grilla de tiles que escalona columnas solo entre DIVISORES de `columns`
|
|
4372
|
-
* (4 → 2 → 1, nunca 3), para que ninguna fila quede huérfana. Mide el
|
|
4373
|
-
* contenedor (`container-type: inline-size`), no el viewport, porque el
|
|
4374
|
-
* mismo bloque se rinde tanto en un drawer angosto como en una página
|
|
4375
|
-
* completa bajo el mismo viewport.
|
|
4376
|
-
*/
|
|
4377
|
-
declare class TileGrid {
|
|
4378
|
-
/** Columnas en el ancho máximo. Se acota a 1-6: por encima de 6 un tile
|
|
4379
|
-
* deja de tener ancho para su propio label. */
|
|
4380
|
-
readonly columns: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
4381
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TileGrid, never>;
|
|
4382
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TileGrid, "kf-tile-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
|
|
4383
|
-
}
|
|
4384
|
-
|
|
4385
|
-
/**
|
|
4386
|
-
* Visual tone of a toast. Maps to the state tokens in
|
|
4387
|
-
* projects/ui/src/tokens/base.css. `loading` has no auto-dismiss and shows an
|
|
4388
|
-
* indeterminate bar instead of a countdown — pair it with
|
|
4389
|
-
* {@link ToastService.promise}. It reuses the `info` tokens, the closest
|
|
4390
|
-
* semantic role to "work in progress".
|
|
4391
|
-
*/
|
|
4392
|
-
type ToastTone = 'success' | 'error' | 'warning' | 'info' | 'loading';
|
|
4393
|
-
/** Acción opcional (call-to-action) renderizada dentro del toast, junto al botón de cerrar. */
|
|
4394
|
-
interface ToastAction {
|
|
4395
|
-
/** Label corto, ej. "Ver ticket" — 1-3 palabras, el toast mide solo 360px de ancho. */
|
|
4396
|
-
label: string;
|
|
4397
|
-
/** Se invoca al hacer click; el toast se cierra solo después, sin que el llamador tenga que llamar `dismiss()`. */
|
|
4398
|
-
onClick: () => void;
|
|
4399
|
-
}
|
|
4400
|
-
/** Options for {@link ToastService.show}. */
|
|
4401
|
-
interface ToastOptions {
|
|
4402
|
-
/** Color tone. Defaults to `'info'`. */
|
|
4403
|
-
tone?: ToastTone;
|
|
4404
|
-
/** Milliseconds before auto-dismiss. Ignored when `tone` is `'loading'`. Defaults to `2800`. */
|
|
4405
|
-
duration?: number;
|
|
4406
|
-
/** Botón de acción opcional, ej. ir al registro sobre el que avisa el toast. */
|
|
4407
|
-
action?: ToastAction;
|
|
4408
|
-
}
|
|
4409
|
-
/** Messages for each leg of {@link ToastService.promise}. */
|
|
4410
|
-
interface ToastPromiseMessages<T = unknown> {
|
|
4411
|
-
loading?: string;
|
|
4412
|
-
success?: string | ((value: T) => string);
|
|
4413
|
-
error?: string | ((error: unknown) => string);
|
|
4414
|
-
}
|
|
4415
|
-
/** The single active toast, as rendered by `kf-toast-host`. */
|
|
4416
|
-
interface ToastState {
|
|
4417
|
-
id: number;
|
|
4418
|
-
message: string;
|
|
4419
|
-
tone: ToastTone;
|
|
4420
|
-
duration: number;
|
|
4421
|
-
leaving: boolean;
|
|
4422
|
-
action?: ToastAction;
|
|
4423
|
-
}
|
|
4424
|
-
/** What's currently holding the auto-dismiss timer paused. Tracked as a set so hover and
|
|
4425
|
-
* focus can overlap (e.g. mouse leaves while focus is still on the action button) without
|
|
4426
|
-
* resuming the timer early. */
|
|
4427
|
-
type ToastPauseSource = 'hover' | 'focus';
|
|
4428
|
-
/**
|
|
4429
|
-
* Shows one toast at a time — a new `show()` call replaces whatever is
|
|
4430
|
-
* currently up (this mirrors a global status line, not a notification stack).
|
|
4431
|
-
*
|
|
4432
|
-
* Angular has no global function that can mount UI on its own, so the
|
|
4433
|
-
* imperative `showToast(...)` of the reference design system becomes a
|
|
4434
|
-
* root-provided service holding signal state: `ToastService.show(...)` sets
|
|
4435
|
-
* the active toast and `ToastHost` (standalone, mounted once in the app
|
|
4436
|
-
* shell) renders it.
|
|
4437
|
-
*
|
|
4438
|
-
* @example
|
|
4439
|
-
* ```ts
|
|
4440
|
-
* // app.ts
|
|
4441
|
-
* imports: [ToastHost]
|
|
4442
|
-
* template: `<kf-toast-host />`
|
|
4443
|
-
*
|
|
4444
|
-
* // anywhere else
|
|
4445
|
-
* private readonly toast = inject(ToastService);
|
|
4446
|
-
* this.toast.show('Vehículo guardado', { tone: 'success' });
|
|
4447
|
-
*
|
|
4448
|
-
* // chains a `loading` toast into the promise's outcome:
|
|
4449
|
-
* this.toast.promise(this.api.save(vehicle), {
|
|
4450
|
-
* loading: 'Guardando…',
|
|
4451
|
-
* success: 'Vehículo guardado',
|
|
4452
|
-
* error: 'No se pudo guardar',
|
|
4453
|
-
* });
|
|
4454
|
-
* ```
|
|
4455
|
-
*/
|
|
4456
|
-
declare class ToastService {
|
|
4457
|
-
private readonly _current;
|
|
4458
|
-
private nextId;
|
|
4459
|
-
private dismissTimer?;
|
|
4460
|
-
private removeTimer?;
|
|
4461
|
-
/** Wall-clock time the running `dismissTimer` is due to fire; used to compute how much
|
|
4462
|
-
* time is left when {@link pause} interrupts it. */
|
|
4463
|
-
private dismissDueAt?;
|
|
4464
|
-
/** Time left on the auto-dismiss countdown while paused. `undefined` when no countdown
|
|
4465
|
-
* is currently paused. */
|
|
4466
|
-
private remainingMs?;
|
|
4467
|
-
private readonly pauseSources;
|
|
4468
|
-
/** The single active toast, or `null`. */
|
|
4469
|
-
readonly current: _angular_core.Signal<ToastState | null>;
|
|
4470
|
-
/** Shows a toast, replacing whatever is currently shown. Returns its id. */
|
|
4471
|
-
show(message: string, options?: ToastOptions): number;
|
|
4472
|
-
private scheduleDismiss;
|
|
4473
|
-
/**
|
|
4474
|
-
* Pauses the auto-dismiss countdown for `id` while `source` (pointer hover or focus) is
|
|
4475
|
-
* active on it, so a user reaching for the action/dismiss button never loses the toast
|
|
4476
|
-
* mid-interaction (WCAG 2.2.1). No-op when `id` isn't the active toast, it's leaving, or
|
|
4477
|
-
* it has no running countdown (persistent or `loading` toasts, or already paused by
|
|
4478
|
-
* another source).
|
|
4479
|
-
*/
|
|
4480
|
-
pause(id: number, source: ToastPauseSource): void;
|
|
4481
|
-
/**
|
|
4482
|
-
* Resumes a countdown paused by {@link pause}, honoring the time already elapsed before
|
|
4483
|
-
* the pause. No-op while another pause `source` is still active, or nothing is paused.
|
|
4484
|
-
*/
|
|
4485
|
-
resume(id: number, source: ToastPauseSource): void;
|
|
4486
|
-
/**
|
|
4487
|
-
* Starts the exit animation, then removes the toast. No-op when `id` is no
|
|
4488
|
-
* longer the active toast, so a stale timer never kills a newer toast.
|
|
4489
|
-
*/
|
|
4490
|
-
dismiss(id?: number): void;
|
|
4491
|
-
/**
|
|
4492
|
-
* Shows a `loading` toast, then swaps it for a `success`/`error` toast once
|
|
4493
|
-
* `work` settles. Re-throws `work`'s rejection so callers can still react to
|
|
4494
|
-
* the failure.
|
|
4495
|
-
*/
|
|
4496
|
-
promise<T>(work: Promise<T>, messages?: ToastPromiseMessages<T>): Promise<T>;
|
|
4497
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
|
|
4498
|
-
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToastService>;
|
|
4499
|
-
}
|
|
4500
|
-
/**
|
|
4501
|
-
* Renders whatever `ToastService` currently holds, fixed bottom-right. Mount
|
|
4502
|
-
* one instance in the app shell (e.g. next to the router outlet); it takes no
|
|
4503
|
-
* inputs and re-renders itself from the service state.
|
|
4504
|
-
*
|
|
4505
|
-
* <kf-toast-host />
|
|
4506
|
-
*/
|
|
4507
|
-
declare class ToastHost {
|
|
4508
|
-
private readonly toastService;
|
|
4509
|
-
/** 0-or-1 wrapper so `@for track t.id` remounts the node on every new toast, restarting its animations. */
|
|
4510
|
-
protected readonly toastList: _angular_core.Signal<ToastState[]>;
|
|
4511
|
-
protected toastIcon(tone: ToastTone): IconName;
|
|
4512
|
-
protected dismiss(id: number): void;
|
|
4513
|
-
/** Pauses the toast's auto-dismiss timer while the pointer or keyboard focus is on it. */
|
|
4514
|
-
protected pause(t: ToastState, source: ToastPauseSource): void;
|
|
4515
|
-
/** Resumes the toast's auto-dismiss timer once neither the pointer nor focus is on it. */
|
|
4516
|
-
protected resume(t: ToastState, source: ToastPauseSource): void;
|
|
4517
|
-
/** Ejecuta la acción del toast (ej. "Ver ticket") y lo cierra — el
|
|
4518
|
-
* llamador no tiene que acordarse de descartarlo desde su propio handler. */
|
|
4519
|
-
protected runAction(t: ToastState): void;
|
|
4520
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastHost, never>;
|
|
4521
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastHost, "kf-toast-host", never, {}, {}, never, never, true, never>;
|
|
4522
|
-
}
|
|
4523
|
-
|
|
4524
|
-
type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
|
|
4525
|
-
/**
|
|
4526
|
-
* Tooltip de hover/focus — reemplaza el atributo `title` nativo del
|
|
4527
|
-
* navegador (lento en aparecer, sin estilo, inconsistente entre
|
|
4528
|
-
* navegadores/SO) por un panel propio, mismo mecanismo de
|
|
4529
|
-
* `@angular/cdk/overlay` que ya usa `Dropdown`.
|
|
4530
|
-
*
|
|
4531
|
-
* Pensado para el caso "ícono sin label visible necesita comunicar qué
|
|
4532
|
-
* es" (ej. `kf-sidebar-nav-item` colapsado). No es two-way: a diferencia
|
|
4533
|
-
* de `Dropdown`, esto se abre/cierra solo con hover/focus, nunca por click.
|
|
4534
|
-
*
|
|
4535
|
-
* <a [kfTooltip]="label()" kfTooltipPosition="right">…</a>
|
|
4536
|
-
*/
|
|
4537
|
-
declare class TooltipDirective {
|
|
4538
|
-
text: string;
|
|
4539
|
-
kfTooltipPosition: TooltipPosition;
|
|
4540
|
-
private readonly host;
|
|
4541
|
-
private readonly overlayService;
|
|
4542
|
-
private readonly viewContainerRef;
|
|
4543
|
-
private readonly injector;
|
|
4544
|
-
private readonly contentId;
|
|
4545
|
-
private overlayRef;
|
|
4546
|
-
/**
|
|
4547
|
-
* `focusin` (no `focus`) a propósito: `focus` no burbujea, así que un
|
|
4548
|
-
* disparador que ENVUELVE al elemento realmente enfocable (ej.
|
|
4549
|
-
* `<kf-button>`, cuyo `<button>` nativo vive en el template del hijo, fuera
|
|
4550
|
-
* de alcance de este host) nunca vería el evento — el tooltip quedaría
|
|
4551
|
-
* mudo por teclado justo en el caso de uso que más lo necesita (un botón
|
|
4552
|
-
* solo-ícono). `focusin` SÍ burbujea y sigue disparando igual para el caso
|
|
4553
|
-
* ya cubierto (un `<a>`/`<button>` nativo que es él mismo el host, ver
|
|
4554
|
-
* `Tooltip.spec.ts`) — sin regresión ahí.
|
|
4555
|
-
*/
|
|
4556
|
-
protected show(): void;
|
|
4557
|
-
protected hide(): void;
|
|
4558
|
-
/**
|
|
4559
|
-
* `focusout` (no `blur`, mismo motivo que `show()` usa `focusin`): además,
|
|
4560
|
-
* a diferencia de `mouseleave`/Escape, acá SÍ hace falta revisar
|
|
4561
|
-
* `relatedTarget` — si el host envuelve más de un elemento enfocable, un
|
|
4562
|
-
* foco que se mueve de uno a otro DENTRO del mismo host no debería cerrar
|
|
4563
|
-
* el tooltip (no "salió" del disparador). `Node` en vez de `EventTarget`:
|
|
4564
|
-
* `Node.contains()` es lo que existe para chequear pertenencia al árbol.
|
|
4565
|
-
*/
|
|
4566
|
-
protected onFocusOut(event: FocusEvent): void;
|
|
4567
|
-
private positionsFor;
|
|
4568
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TooltipDirective, never>;
|
|
4569
|
-
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<TooltipDirective, "[kfTooltip]", never, { "text": { "alias": "kfTooltip"; "required": false; }; "kfTooltipPosition": { "alias": "kfTooltipPosition"; "required": false; }; }, {}, never, never, true, never>;
|
|
4570
|
-
}
|
|
4571
|
-
|
|
4572
|
-
/**
|
|
4573
|
-
* Estado puntual mostrado junto a la identidad del vehículo (ej. "En ruta",
|
|
4574
|
-
* "Mantenimiento", "Fuera de servicio"). `tone` define el color semántico:
|
|
4575
|
-
* "crit" no tiene token propio en base.css, se mapea a var(--kf-color-error).
|
|
4576
|
-
*/
|
|
4577
|
-
interface VehicleHeaderStatus {
|
|
4578
|
-
label: string;
|
|
4579
|
-
tone?: 'ok' | 'warn' | 'crit';
|
|
4580
|
-
icon?: IconName;
|
|
4581
|
-
}
|
|
4582
|
-
/**
|
|
4583
|
-
* Header de identidad de un vehículo de flota: unidad (patente/id), modelo
|
|
4584
|
-
* (como badge, no texto plano — página 24: "ABC-123" junto a un badge
|
|
4585
|
-
* "TITAN 4X2"), VIN en fuente mono y un estado opcional. Un área de acciones
|
|
4586
|
-
* opcional se proyecta vía `<ng-content select="[actions]">` para no acoplar
|
|
4587
|
-
* el componente a un set fijo de botones — el patrón real de la spec es
|
|
4588
|
-
* `kf-button variant="outline"` (ej. "Llamar", con ícono) + un `primary`
|
|
4589
|
-
* (ej. "Crear Ticket", con ícono "+"):
|
|
4590
|
-
*
|
|
4591
|
-
* <kf-vehicle-header unit="AB123CD" model="Sprinter 415" vin="9BW..."
|
|
4592
|
-
* [status]="{ label: 'En ruta', tone: 'ok' }">
|
|
4593
|
-
* <kf-button actions variant="outline" icon="phone">Llamar</kf-button>
|
|
4594
|
-
* <kf-button actions icon="plus">Crear Ticket</kf-button>
|
|
4595
|
-
* </kf-vehicle-header>
|
|
4596
|
-
*/
|
|
4597
|
-
declare class VehicleHeader {
|
|
4598
|
-
readonly unit: _angular_core.InputSignal<string>;
|
|
4599
|
-
readonly model: _angular_core.InputSignal<string | undefined>;
|
|
4600
|
-
readonly vin: _angular_core.InputSignal<string | undefined>;
|
|
4601
|
-
readonly status: _angular_core.InputSignal<VehicleHeaderStatus | undefined>;
|
|
4602
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<VehicleHeader, never>;
|
|
4603
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<VehicleHeader, "kf-vehicle-header", never, { "unit": { "alias": "unit"; "required": true; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "vin": { "alias": "vin"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, ["[actions]"], true, never>;
|
|
4604
|
-
}
|
|
4605
|
-
|
|
4606
|
-
type ViewToggleOption = 'table' | 'cards';
|
|
4607
|
-
/**
|
|
4608
|
-
* Switch de dos posiciones para alternar entre vista de tabla y vista de
|
|
4609
|
-
* tarjetas. Pensado para usarse dentro de DataTable, pero es standalone e
|
|
4610
|
-
* independiente: no asume nada sobre el componente que lo contiene.
|
|
4611
|
-
*
|
|
4612
|
-
* Se implementa como un grupo de radio (role="radiogroup") en vez de dos
|
|
4613
|
-
* botones sueltos: semánticamente es una única selección excluyente entre
|
|
4614
|
-
* dos estados, no dos acciones independientes. Esto también habilita
|
|
4615
|
-
* navegación con flechas izquierda/derecha, igual que un <input type="radio">
|
|
4616
|
-
* nativo agrupado.
|
|
4617
|
-
*
|
|
4618
|
-
* <kf-view-toggle [view]="view" (viewChange)="view = $event" />
|
|
4619
|
-
*/
|
|
4620
|
-
declare class ViewToggle {
|
|
4621
|
-
readonly view: _angular_core.InputSignal<ViewToggleOption>;
|
|
4622
|
-
readonly viewChange: _angular_core.OutputEmitterRef<ViewToggleOption>;
|
|
4623
|
-
select(next: ViewToggleOption): void;
|
|
4624
|
-
/** Navegación estándar de ARIA radiogroup: flechas mueven foco y seleccionan. */
|
|
4625
|
-
onKeydown(event: KeyboardEvent): void;
|
|
4626
|
-
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ViewToggle, never>;
|
|
4627
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ViewToggle, "kf-view-toggle", never, { "view": { "alias": "view"; "required": true; "isSignal": true; }; }, { "viewChange": "viewChange"; }, never, never, true, never>;
|
|
4628
|
-
}
|
|
4629
|
-
|
|
4630
|
-
export { ActionTile, AdminBadge, Alert, AlertRow, AuthLayout, AuthLayoutSso, Avatar, Badge, Breadcrumb, BucketProgress, Button, Card, Carousel, CarouselSlide, Checkbox, Chip, Collapsible, CompanySelector, ContactPopover, ContentSlot, ContentState, ContentViewer, DEFAULT_PAGE_SIZE_OPTIONS, DataTable, Divider, DocumentRow, Drawer, DrawerLogout, DrawerSession, Dropdown, DropdownItem, DropdownPanel, EmptyState, EventTimeline, FeatureCard, Field, FieldLabel, Filter, FilterChips, FolderTabs, FolderTabsPanel, Footer, FormatInputDirective, Icon, Input, JourneyStepper, Link, MAP_CONFIG, MapControls, MapView, MetricCard, MobileFooter, MobileHeader, Modal, MultiSelect, NoteBlock, PageHeader, Pagination, Panel, PortalHeader, Progress, PulseDot, QuotePicker, ReserveBlock, RowActions, STYLE_BY_THEME, SectionHeader, SectionNav, SectionNavItem, SectionNavSubsection, Segmented, Select, SelectableCardGroup, SidebarShell, Skeleton, Spinner, SsoButton, StatCard, StatTile, StatusPill, THEME_LABEL, THEME_ORDER, Tabs, Text, Textarea, TileGrid, ToastHost, ToastService, TooltipDirective, VehicleHeader, ViewToggle, dataTableViewSignal, formatChileanRut, formatClockTime, formatCurrency, formatNumber, isValidChileanRut, matchMediaSignal, parseCurrency, parseNumber, provideMapConfig, sanitizeDocumentId };
|
|
4631
|
-
export type { AlertRowTone, AlertTone, AuthLayoutBackground, BreadcrumbItem, BucketProgressItem, CompanySelectorMeta, ContentStateKind, ContentStateLoad, ContentViewerType, DataTableCardRole, DataTableColumn, DataTableDensity, DataTableSort, DataTableView, DividerOrientation, DocumentRowTone, DrawerSide, DropdownItemTone, DropdownPanelVariant, EventTimelineItem, EventTimelineTone, FilterFieldChange, FilterFieldConfig, FilterFieldType, FilterValue, FolderTabOption, FooterLink, FormatCurrencyOptions, FormatNumberOptions, IconName, IconRotation, IconSize, JourneyStep, JourneyStepStatus, JourneyStepperColorScheme, JourneyStepperSurface, LinkVariant, MapConfig, MapControlKind, MapLatLng, MapMarker, MapMarkerTone, MapPopupAction, MapSize, MapTheme, MapVariant, MultiSelectOption, NoteBlockTone, PageHeaderTitleSize, PaginationItem, PortalHeaderAdminAction, PortalHeaderNavItem, ProgressTone, QuotePickerChip, QuotePickerSortOption, RowAction, RowActionKind, RowActionsMode, SectionNavSubsectionData, SegmentedOption, SelectableCardOption, SidebarNavItemData, SkeletonVariant, SpinnerSize, SsoProvider, StatCardTone, StatTileTone, StatTileVariant, TabOption, TextAs, TextTone, TextVariant, ToastAction, ToastOptions, ToastPromiseMessages, ToastState, ToastTone, TooltipPosition, VehicleHeaderStatus, ViewToggleOption };
|
|
1
|
+
export * from '@kaufmann-lab/ui/auth';
|
|
2
|
+
export * from '@kaufmann-lab/ui/business';
|
|
3
|
+
export * from '@kaufmann-lab/ui/core';
|
|
4
|
+
export * from '@kaufmann-lab/ui/mobile';
|
|
5
|
+
export * from '@kaufmann-lab/ui/shared';
|