@litigiovirtual/ius-design-components 2.1.0 → 2.1.8
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 +14 -14
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs +6 -6
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs.map +1 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +1701 -451
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +2 -2
- package/types/litigiovirtual-ius-design-components.d.ts +765 -37
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as _angular_core from '@angular/core';
|
|
2
|
-
import { OnDestroy, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, OnInit, TemplateRef, Signal } from '@angular/core';
|
|
2
|
+
import { OnDestroy, EventEmitter, AfterViewInit, OnChanges, SimpleChanges, OnInit, TemplateRef, ElementRef, Signal } from '@angular/core';
|
|
3
3
|
import { ControlValueAccessor } from '@angular/forms';
|
|
4
4
|
import { SafeHtml } from '@angular/platform-browser';
|
|
5
|
+
import * as _litigiovirtual_ius_design_components from '@litigiovirtual/ius-design-components';
|
|
5
6
|
|
|
6
7
|
/** Jerarquía visual. `danger` = destructivo (color semántico, no accent). */
|
|
7
8
|
type IusButtonVariant = 'primary' | 'outline' | 'secondary' | 'tertiary' | 'danger';
|
|
@@ -613,8 +614,8 @@ type IusCodeFieldSize = 'small' | 'medium' | 'large';
|
|
|
613
614
|
*
|
|
614
615
|
* Nota: las clases `.ius-tf__*` (label/hint) se replican en el SCSS de este
|
|
615
616
|
* componente porque bajo ViewEncapsulation.Emulated las de TextField no
|
|
616
|
-
* alcanzan a otro componente. `showIconHelp`
|
|
617
|
-
*
|
|
617
|
+
* alcanzan a otro componente. `showIconHelp` compone `ius-popover` (igual que
|
|
618
|
+
* la base TextField y el golden).
|
|
618
619
|
*/
|
|
619
620
|
declare class CodeFieldComponent implements ControlValueAccessor {
|
|
620
621
|
/** Label sobre las casillas (con `:` final). */
|
|
@@ -670,7 +671,6 @@ declare class CodeFieldComponent implements ControlValueAccessor {
|
|
|
670
671
|
private onTouched;
|
|
671
672
|
protected get hint(): string | undefined;
|
|
672
673
|
protected get showHint(): boolean;
|
|
673
|
-
protected get helpIconTitle(): string | undefined;
|
|
674
674
|
protected get showClearComputed(): boolean;
|
|
675
675
|
protected cellAria(i: number): string;
|
|
676
676
|
writeValue(value: string): void;
|
|
@@ -849,7 +849,7 @@ declare class AlertComponent {
|
|
|
849
849
|
/** Tamaño. */
|
|
850
850
|
readonly size: _angular_core.InputSignal<AlertSize>;
|
|
851
851
|
/** Estilo del borde. */
|
|
852
|
-
readonly border: _angular_core.InputSignal<"
|
|
852
|
+
readonly border: _angular_core.InputSignal<"none" | "solid" | "dashed">;
|
|
853
853
|
/** Título tonal en negrita. */
|
|
854
854
|
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
855
855
|
/** Línea superior breve (uppercase). */
|
|
@@ -869,7 +869,7 @@ declare class AlertComponent {
|
|
|
869
869
|
/** Alineación (auto: `center` si hay `trailing` sin `actions`). */
|
|
870
870
|
readonly align: _angular_core.InputSignal<"start" | "center" | undefined>;
|
|
871
871
|
/** `status` (default, no interrumpe) o `alert` (asertivo). */
|
|
872
|
-
readonly role: _angular_core.InputSignal<"
|
|
872
|
+
readonly role: _angular_core.InputSignal<"alert" | "status">;
|
|
873
873
|
/** Al pulsar × (original: `onClose`). */
|
|
874
874
|
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
875
875
|
private readonly actionsRef;
|
|
@@ -959,10 +959,9 @@ type IusCheckboxLabelPosition = 'left' | 'right';
|
|
|
959
959
|
* `checked`. Implementa `ControlValueAccessor` (`boolean`) para integrarse con
|
|
960
960
|
* `[(ngModel)]` / `formControl`.
|
|
961
961
|
*
|
|
962
|
-
*
|
|
963
|
-
*
|
|
964
|
-
* `
|
|
965
|
-
* Reemplazar por `ius-popover` cuando exista, sin cambiar la API pública.
|
|
962
|
+
* `showIconHelp` compone `ius-popover` (título + contenido en hover/focus),
|
|
963
|
+
* igual que el golden `Checkbox.jsx` y que TextField; el ícono conserva
|
|
964
|
+
* `tabindex="0"` + `aria-label` y el clic no alterna la casilla.
|
|
966
965
|
*
|
|
967
966
|
* `state` (`idle | hover | pressed | focused | disabled`) de la spec es SOLO
|
|
968
967
|
* para demos/especímenes → se omite de la API pública; el playground congela
|
|
@@ -1004,7 +1003,6 @@ declare class CheckboxComponent implements ControlValueAccessor {
|
|
|
1004
1003
|
/** Glifo Material Symbols dentro de la casilla. */
|
|
1005
1004
|
protected get glyph(): string;
|
|
1006
1005
|
protected get ariaChecked(): 'mixed' | 'true' | 'false';
|
|
1007
|
-
protected get helpIconTitle(): string | undefined;
|
|
1008
1006
|
writeValue(value: boolean): void;
|
|
1009
1007
|
registerOnChange(fn: (value: boolean) => void): void;
|
|
1010
1008
|
registerOnTouched(fn: () => void): void;
|
|
@@ -1193,8 +1191,8 @@ declare class NavUserComponent {
|
|
|
1193
1191
|
*
|
|
1194
1192
|
* Notas de port:
|
|
1195
1193
|
* - Alto 52px según el CSS golden (el prompt menciona 60px; el jsx manda).
|
|
1196
|
-
* - El punto de novedad de notificaciones compone `
|
|
1197
|
-
*
|
|
1194
|
+
* - El punto de novedad de notificaciones compone `ius-insignia` (dot · danger),
|
|
1195
|
+
* igual que el golden; la posición sobre la campana la fija este CSS.
|
|
1198
1196
|
* - Outputs con sufijo `Click` (help/support/… ya son inputs boolean → no se
|
|
1199
1197
|
* puede reusar el nombre; se evita además el nativo `click`).
|
|
1200
1198
|
*/
|
|
@@ -1250,12 +1248,14 @@ interface Dim {
|
|
|
1250
1248
|
/**
|
|
1251
1249
|
* CircularProgress — Ius Design v2.
|
|
1252
1250
|
*
|
|
1253
|
-
* Anillo de progreso: determinado (`value`)
|
|
1254
|
-
* Port del golden CircularProgress.jsx
|
|
1255
|
-
*
|
|
1256
|
-
*
|
|
1251
|
+
* Anillo de progreso: determinado (`value`), cuenta regresiva (`duration`) o
|
|
1252
|
+
* indeterminado (cometa que gira). Port del golden CircularProgress.jsx
|
|
1253
|
+
* (geometría de dos arcos + gradiente cometa + `useCountdown` en rAF).
|
|
1254
|
+
*
|
|
1255
|
+
* El centro admite contenido proyectado (equivalente de `children` del golden):
|
|
1256
|
+
* lo usa Toast para meter su botón de cierre dentro del aro de auto-cierre.
|
|
1257
1257
|
*/
|
|
1258
|
-
declare class CircularProgressComponent {
|
|
1258
|
+
declare class CircularProgressComponent implements OnChanges, OnDestroy {
|
|
1259
1259
|
value: number;
|
|
1260
1260
|
max: number;
|
|
1261
1261
|
indeterminate: boolean;
|
|
@@ -1263,7 +1263,30 @@ declare class CircularProgressComponent {
|
|
|
1263
1263
|
size: IusCircularProgressSize;
|
|
1264
1264
|
showValue: boolean;
|
|
1265
1265
|
ariaLabel?: string;
|
|
1266
|
+
/**
|
|
1267
|
+
* Cuenta regresiva en ms. Si viene > 0 el anillo se vacía de 100 → 0 en ese
|
|
1268
|
+
* tiempo (rAF) en lugar de leer `value`. `null`/`0`/ausente lo desactiva.
|
|
1269
|
+
*/
|
|
1270
|
+
duration?: number | null;
|
|
1271
|
+
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
1272
|
+
paused: boolean;
|
|
1266
1273
|
protected readonly gid: string;
|
|
1274
|
+
private readonly zone;
|
|
1275
|
+
/** % restante de la cuenta regresiva (100 → 0). */
|
|
1276
|
+
private readonly remaining;
|
|
1277
|
+
private startedAt;
|
|
1278
|
+
private msLeft;
|
|
1279
|
+
private rafId;
|
|
1280
|
+
protected get isCountdown(): boolean;
|
|
1281
|
+
ngOnChanges(changes: SimpleChanges): void;
|
|
1282
|
+
ngOnDestroy(): void;
|
|
1283
|
+
/** Arranca de cero: espejo del primer efecto de `useCountdown`. */
|
|
1284
|
+
private resetCountdown;
|
|
1285
|
+
/** Espejo del segundo efecto de `useCountdown` (respeta `paused`). */
|
|
1286
|
+
private syncCountdown;
|
|
1287
|
+
private readonly tick;
|
|
1288
|
+
/** Corta el rAF y congela el tiempo restante (la pausa del golden). */
|
|
1289
|
+
private stopCountdown;
|
|
1267
1290
|
protected get dim(): Dim;
|
|
1268
1291
|
protected get r(): number;
|
|
1269
1292
|
protected get cx(): number;
|
|
@@ -1284,9 +1307,10 @@ declare class CircularProgressComponent {
|
|
|
1284
1307
|
protected get grayOffset(): number;
|
|
1285
1308
|
protected get center(): string | null;
|
|
1286
1309
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CircularProgressComponent, never>;
|
|
1287
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CircularProgressComponent, "ius-circular-progress", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showValue": { "alias": "showValue"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, {}, never,
|
|
1310
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CircularProgressComponent, "ius-circular-progress", never, { "value": { "alias": "value"; "required": false; }; "max": { "alias": "max"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "size": { "alias": "size"; "required": false; }; "showValue": { "alias": "showValue"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "duration": { "alias": "duration"; "required": false; }; "paused": { "alias": "paused"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
1288
1311
|
static ngAcceptInputType_indeterminate: unknown;
|
|
1289
1312
|
static ngAcceptInputType_showValue: unknown;
|
|
1313
|
+
static ngAcceptInputType_paused: unknown;
|
|
1290
1314
|
}
|
|
1291
1315
|
|
|
1292
1316
|
/** Modo de presentación. */
|
|
@@ -1553,6 +1577,13 @@ type DescriptionListSize = 'small' | 'medium';
|
|
|
1553
1577
|
* rico proyectado (`TemplateRef` — Tag, Avatar, EventPill, un mapa…).
|
|
1554
1578
|
*/
|
|
1555
1579
|
interface DescriptionListItem {
|
|
1580
|
+
/**
|
|
1581
|
+
* Clave estable de la fila. Opcional: si no se pasa se usa `label` y, en
|
|
1582
|
+
* último término, el índice. Existe porque `@for` traza por identidad y unos
|
|
1583
|
+
* `items` que se recalculen en cada ciclo (un getter, p. ej.) provocarían
|
|
1584
|
+
* `NG0956` y recrearían el DOM de todas las filas.
|
|
1585
|
+
*/
|
|
1586
|
+
key?: string;
|
|
1556
1587
|
/** Etiqueta (dt). Texto o `TemplateRef`. */
|
|
1557
1588
|
label: string | TemplateRef<unknown>;
|
|
1558
1589
|
/** Valor (dd). Texto o `TemplateRef`. */
|
|
@@ -3004,6 +3035,114 @@ declare class ListViewComponent {
|
|
|
3004
3035
|
static ngAcceptInputType_pageSize: unknown;
|
|
3005
3036
|
}
|
|
3006
3037
|
|
|
3038
|
+
/**
|
|
3039
|
+
* Tratamiento de superficie. `outlined` (borde, default) · `elevated` (sombra) ·
|
|
3040
|
+
* `sunken` (fondo hundido) · `plain` (superficie sin borde ni sombra).
|
|
3041
|
+
*
|
|
3042
|
+
* `plain` no necesita regla propia en el SCSS: la base ya trae borde
|
|
3043
|
+
* transparente y sin sombra, así que es exactamente la ausencia de las otras
|
|
3044
|
+
* tres. Existe para que un consumidor pueda pedir «sin contorno» de forma
|
|
3045
|
+
* explícita (lo usa PersonItem cuando `bordered` está apagado).
|
|
3046
|
+
*/
|
|
3047
|
+
type IusCardVariant = 'outlined' | 'elevated' | 'sunken' | 'plain';
|
|
3048
|
+
/** Padding interno de las zonas. `none` = contenido a sangre (media). */
|
|
3049
|
+
type IusCardPadding = 'none' | 'sm' | 'md' | 'lg';
|
|
3050
|
+
/** Radio de las esquinas. */
|
|
3051
|
+
type IusCardRadius = 'sm' | 'md' | 'lg';
|
|
3052
|
+
/** Elemento raíz efectivo (el `as` del golden). */
|
|
3053
|
+
type IusCardAs = 'div' | 'section' | 'article' | 'a' | 'button';
|
|
3054
|
+
/**
|
|
3055
|
+
* Marca la zona de encabezado (se separa del cuerpo con un hairline):
|
|
3056
|
+
*
|
|
3057
|
+
* ```html
|
|
3058
|
+
* <ius-card>
|
|
3059
|
+
* <strong iusCardHeader>Factura 0042</strong>
|
|
3060
|
+
* Vence el 30-06-2026 · 1.284.000
|
|
3061
|
+
* <ius-text-button iusCardFooter size="small" label="Ver detalle" />
|
|
3062
|
+
* </ius-card>
|
|
3063
|
+
* ```
|
|
3064
|
+
*/
|
|
3065
|
+
declare class IusCardHeaderDirective {
|
|
3066
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IusCardHeaderDirective, never>;
|
|
3067
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IusCardHeaderDirective, "[iusCardHeader]", never, {}, {}, never, never, true, never>;
|
|
3068
|
+
}
|
|
3069
|
+
/** Marca la zona de pie (se separa del cuerpo con un hairline). */
|
|
3070
|
+
declare class IusCardFooterDirective {
|
|
3071
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IusCardFooterDirective, never>;
|
|
3072
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IusCardFooterDirective, "[iusCardFooter]", never, {}, {}, never, never, true, never>;
|
|
3073
|
+
}
|
|
3074
|
+
/**
|
|
3075
|
+
* Card — Ius Design v2 (familia layout).
|
|
3076
|
+
*
|
|
3077
|
+
* **Primitiva de superficie**: la cáscara base con superficie, borde/sombra,
|
|
3078
|
+
* radio y padding consistentes, y zonas opcionales header / cuerpo / footer.
|
|
3079
|
+
* Úsala como contenedor genérico de un panel o bloque cuando no exista un
|
|
3080
|
+
* componente más específico, en vez de reescribir a mano la receta
|
|
3081
|
+
* `superficie + borde + radio + padding`.
|
|
3082
|
+
*
|
|
3083
|
+
* NO reemplaza a las cards ricas con comportamiento propio (ListCard,
|
|
3084
|
+
* KanbanCard, PlanUsageItem); AccountItem sí la compone como raíz.
|
|
3085
|
+
*
|
|
3086
|
+
* **Nota de port — el `as` del golden.** El host de un componente Angular no
|
|
3087
|
+
* puede cambiar de etiqueta, así que `as` se resuelve por SELECTOR (la
|
|
3088
|
+
* alternativa que autoriza la ng-spec, «directivas `ius-card[href]`»): el
|
|
3089
|
+
* elemento que escribe el consumidor ES el raíz, con su semántica y sus
|
|
3090
|
+
* atributos nativos.
|
|
3091
|
+
*
|
|
3092
|
+
* ```html
|
|
3093
|
+
* <ius-card>…</ius-card> <!-- as="div" (default) -->
|
|
3094
|
+
* <section ius-card>…</section> <!-- as="section" -->
|
|
3095
|
+
* <article ius-card>…</article> <!-- as="article" -->
|
|
3096
|
+
* <a ius-card href="/expediente/42">…</a> <!-- as="a", navegable -->
|
|
3097
|
+
* <button ius-card>…</button> <!-- as="button", navegable -->
|
|
3098
|
+
* ```
|
|
3099
|
+
*
|
|
3100
|
+
* Así `href` es el atributo nativo del ancla (no hace falta un input) y el
|
|
3101
|
+
* «ref al raíz» de la spec sale gratis: el host ES el raíz (`hostRef`).
|
|
3102
|
+
*/
|
|
3103
|
+
declare class CardComponent {
|
|
3104
|
+
readonly variant: _angular_core.InputSignal<IusCardVariant>;
|
|
3105
|
+
readonly padding: _angular_core.InputSignal<IusCardPadding>;
|
|
3106
|
+
readonly radius: _angular_core.InputSignal<IusCardRadius>;
|
|
3107
|
+
/** Navegable: cursor, hover con elevación y realce, y foco visible. */
|
|
3108
|
+
readonly interactive: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3109
|
+
/** Seleccionada: borde de marca + anillo. Para cards elegibles (planes, opciones). */
|
|
3110
|
+
readonly selected: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
3111
|
+
/**
|
|
3112
|
+
* Nombre accesible del raíz. Usa este input, NO un `aria-label` suelto en la
|
|
3113
|
+
* etiqueta: el binding del host lo pisaría (mismo criterio que
|
|
3114
|
+
* CircularProgress).
|
|
3115
|
+
*/
|
|
3116
|
+
readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
|
|
3117
|
+
/** Click de la card. Solo se emite cuando es navegable. */
|
|
3118
|
+
readonly clicked: _angular_core.OutputEmitterRef<MouseEvent>;
|
|
3119
|
+
/** El raíz de la card — equivalente del `ref` reenviado del golden. */
|
|
3120
|
+
readonly hostRef: ElementRef<HTMLElement>;
|
|
3121
|
+
/**
|
|
3122
|
+
* Etiqueta efectiva del raíz, deducida del host: es el `as` del golden.
|
|
3123
|
+
* Se llama `rootTag` y no `as` porque `as` es palabra reservada en las
|
|
3124
|
+
* expresiones de plantilla de Angular (`@if (x; as y)`) y no se puede
|
|
3125
|
+
* referenciar desde un host binding.
|
|
3126
|
+
*/
|
|
3127
|
+
readonly rootTag: IusCardAs;
|
|
3128
|
+
/** `<a>` y `<button>` ya traen navegación, foco y teclado nativos. */
|
|
3129
|
+
private readonly nativeInteractive;
|
|
3130
|
+
/** El golden fuerza `type="button"` en la variante botón. */
|
|
3131
|
+
protected readonly hostType: string | null;
|
|
3132
|
+
protected readonly navigable: _angular_core.Signal<boolean>;
|
|
3133
|
+
/** Con div/section/article navegables hay que fabricar la semántica de botón. */
|
|
3134
|
+
protected readonly hostRole: _angular_core.Signal<"button" | null>;
|
|
3135
|
+
protected readonly hostTabIndex: _angular_core.Signal<0 | null>;
|
|
3136
|
+
private readonly headerRef;
|
|
3137
|
+
private readonly footerRef;
|
|
3138
|
+
protected readonly hasHeader: _angular_core.Signal<boolean>;
|
|
3139
|
+
protected readonly hasFooter: _angular_core.Signal<boolean>;
|
|
3140
|
+
protected onClick(event: MouseEvent): void;
|
|
3141
|
+
protected onKeydown(event: KeyboardEvent): void;
|
|
3142
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<CardComponent, never>;
|
|
3143
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<CardComponent, "ius-card, a[ius-card], button[ius-card], section[ius-card], article[ius-card]", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "padding": { "alias": "padding"; "required": false; "isSignal": true; }; "radius": { "alias": "radius"; "required": false; "isSignal": true; }; "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, ["headerRef", "footerRef"], ["[iusCardHeader]", "*", "[iusCardFooter]"], true, never>;
|
|
3144
|
+
}
|
|
3145
|
+
|
|
3007
3146
|
/** Doble rol de la fila: seleccionable (option) o valor eliminable (chip). */
|
|
3008
3147
|
type IusPersonItemVariant = 'option' | 'chip';
|
|
3009
3148
|
/** Escala de avatar + texto. */
|
|
@@ -3042,24 +3181,26 @@ declare class IusPersonItemNameDirective {
|
|
|
3042
3181
|
* y, opcionalmente, menú ⋮ de acciones). Fuente de verdad: `PersonItem.jsx` +
|
|
3043
3182
|
* `PersonItem.d.ts` + `PersonItem.ng-spec.md`. Compone `ius-avatar`.
|
|
3044
3183
|
*
|
|
3045
|
-
*
|
|
3046
|
-
*
|
|
3047
|
-
*
|
|
3184
|
+
* La superficie la pone **`ius-card`** (`outlined · radius lg · padding none`),
|
|
3185
|
+
* como manda la ng-spec: no se reescribe a mano. Con `(clicked)` enlazado y sin
|
|
3186
|
+
* `disabled` la card se vuelve navegable (role, tabindex, Enter/Espacio los
|
|
3187
|
+
* aporta Card) y la fila emite `clicked`. La X de eliminar aparece al enlazar
|
|
3188
|
+
* `(removed)`.
|
|
3048
3189
|
*
|
|
3049
3190
|
* `actions` (chip) compone `ius-dropdown` (trigger IconButton `more_vert`
|
|
3050
3191
|
* proyectado, antes de la X).
|
|
3051
3192
|
*
|
|
3052
|
-
*
|
|
3053
|
-
* -
|
|
3054
|
-
*
|
|
3055
|
-
*
|
|
3056
|
-
*
|
|
3193
|
+
* Nota de port: en React la card y la fila eran EL MISMO elemento, así que el
|
|
3194
|
+
* `data-variant` de PersonItem (`option`/`chip`) pisaba al de Card y la fila se
|
|
3195
|
+
* quedaba sin borde en reposo. Diseño lo resolvió el 2026-08-28 (T5 del pedido
|
|
3196
|
+
* de auditoría): el atributo propio pasó a `data-pi-variant` —ya no colisiona—
|
|
3197
|
+
* y el borde es OPCIONAL vía `bordered`, apagado por defecto, apoyado en la
|
|
3198
|
+
* nueva variante `Card variant="plain"`. Aquí se replica igual.
|
|
3057
3199
|
*
|
|
3058
3200
|
* Para cuenta a la que cambiar → AccountItem; fila de acción → MenuItem; pill
|
|
3059
3201
|
* de texto simple → Chip/Tag.
|
|
3060
3202
|
*/
|
|
3061
3203
|
declare class PersonItemComponent {
|
|
3062
|
-
private readonly el;
|
|
3063
3204
|
/** Nombre (línea principal, negrita). Para markup rico proyectar `[iusPersonItemName]`. */
|
|
3064
3205
|
name?: string;
|
|
3065
3206
|
/** Hasta 2 líneas secundarias; `TemplateRef` para contenido rico (no se enmascara). */
|
|
@@ -3076,6 +3217,16 @@ declare class PersonItemComponent {
|
|
|
3076
3217
|
shape?: IusAvatarShape;
|
|
3077
3218
|
/** Fila seleccionable (`option`) o valor eliminable (`chip`). */
|
|
3078
3219
|
variant: IusPersonItemVariant;
|
|
3220
|
+
/**
|
|
3221
|
+
* Muestra el borde outlined de la fila (superficie Card). **Off por defecto**:
|
|
3222
|
+
* las filas no llevan contorno propio y se separan por el espacio. Enciéndelo
|
|
3223
|
+
* cuando cada fila deba leerse como una tarjeta independiente. Los estados
|
|
3224
|
+
* tintados (hover/selected/pressed en `option`) tiñen el borde igual con o sin
|
|
3225
|
+
* `bordered`.
|
|
3226
|
+
*/
|
|
3227
|
+
bordered: boolean;
|
|
3228
|
+
/** Superficie de la card: con contorno solo si `bordered`. */
|
|
3229
|
+
protected get cardVariant(): IusCardVariant;
|
|
3079
3230
|
/** Escala de avatar + texto; `medium` hereda `--ius-density` del contexto. */
|
|
3080
3231
|
size: IusPersonItemSize;
|
|
3081
3232
|
/** (option) fila elegida: fondo resaltado. */
|
|
@@ -3117,13 +3268,14 @@ declare class PersonItemComponent {
|
|
|
3117
3268
|
tpl?: TemplateRef<unknown>;
|
|
3118
3269
|
}>;
|
|
3119
3270
|
protected get showMenu(): boolean;
|
|
3271
|
+
/** El anillo de selección de Card solo aplica a la variante option. */
|
|
3272
|
+
protected get cardSelected(): boolean;
|
|
3273
|
+
protected get ariaPressed(): string | null;
|
|
3120
3274
|
protected onRemoveMouseDown(event: MouseEvent): void;
|
|
3121
3275
|
protected onRemoveClick(event: MouseEvent): void;
|
|
3122
|
-
protected onHostClick(event: MouseEvent): void;
|
|
3123
|
-
protected onKeyActivate(event: Event): void;
|
|
3124
|
-
protected onSpaceDown(event: Event): void;
|
|
3125
3276
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<PersonItemComponent, never>;
|
|
3126
|
-
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PersonItemComponent, "ius-person-item", never, { "name": { "alias": "name"; "required": false; }; "lines": { "alias": "lines"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "monogram": { "alias": "monogram"; "required": false; }; "color": { "alias": "color"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "showCheck": { "alias": "showCheck"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "actionsLabel": { "alias": "actionsLabel"; "required": false; }; "removeLabel": { "alias": "removeLabel"; "required": false; }; "state": { "alias": "state"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; "removed": "removed"; }, ["trailingRef", "nameRef"], ["[iusPersonItemName]", "[iusPersonItemTrailing]"], true, never>;
|
|
3277
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<PersonItemComponent, "ius-person-item", never, { "name": { "alias": "name"; "required": false; }; "lines": { "alias": "lines"; "required": false; }; "avatar": { "alias": "avatar"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "monogram": { "alias": "monogram"; "required": false; }; "color": { "alias": "color"; "required": false; }; "shape": { "alias": "shape"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "bordered": { "alias": "bordered"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "showCheck": { "alias": "showCheck"; "required": false; }; "mask": { "alias": "mask"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "actionsLabel": { "alias": "actionsLabel"; "required": false; }; "removeLabel": { "alias": "removeLabel"; "required": false; }; "state": { "alias": "state"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; }, { "clicked": "clicked"; "removed": "removed"; }, ["trailingRef", "nameRef"], ["[iusPersonItemName]", "[iusPersonItemTrailing]"], true, never>;
|
|
3278
|
+
static ngAcceptInputType_bordered: unknown;
|
|
3127
3279
|
static ngAcceptInputType_selected: unknown;
|
|
3128
3280
|
static ngAcceptInputType_showCheck: unknown;
|
|
3129
3281
|
static ngAcceptInputType_mask: unknown;
|
|
@@ -3409,8 +3561,8 @@ interface IusMultiTextFieldSlot {
|
|
|
3409
3561
|
*
|
|
3410
3562
|
* Nota: las clases `.ius-tf__*` (label/help/hint/field/clear) se replican en el
|
|
3411
3563
|
* SCSS porque bajo `ViewEncapsulation.Emulated` las de TextField no alcanzan a
|
|
3412
|
-
* otro componente. `showIconHelp`
|
|
3413
|
-
*
|
|
3564
|
+
* otro componente. `showIconHelp` compone `ius-popover` (igual que la base
|
|
3565
|
+
* TextField y el golden). `[data-force]` congela un estado visual en demos.
|
|
3414
3566
|
*/
|
|
3415
3567
|
declare class MultiTextFieldComponent implements ControlValueAccessor {
|
|
3416
3568
|
protected readonly slotsState: _angular_core.WritableSignal<IusMultiTextFieldSlot[]>;
|
|
@@ -3475,7 +3627,6 @@ declare class MultiTextFieldComponent implements ControlValueAccessor {
|
|
|
3475
3627
|
protected get helpId(): string;
|
|
3476
3628
|
protected get hint(): string | undefined;
|
|
3477
3629
|
protected get showHint(): boolean;
|
|
3478
|
-
protected get helpIconTitle(): string | undefined;
|
|
3479
3630
|
/** El botón de limpiar está activo (visible y operable). */
|
|
3480
3631
|
protected get clearActive(): boolean;
|
|
3481
3632
|
/** Se reserva el hueco del clear (visibility) para no desplazar los segmentos. */
|
|
@@ -3542,6 +3693,15 @@ declare class IusModalFooterDirective {
|
|
|
3542
3693
|
*
|
|
3543
3694
|
*/
|
|
3544
3695
|
declare class ModalComponent implements AfterViewInit, OnDestroy {
|
|
3696
|
+
/**
|
|
3697
|
+
* Ids del título y la descripción: el diálogo se nombra con su propio
|
|
3698
|
+
* encabezado (`aria-labelledby`) en vez de repetir el texto en un
|
|
3699
|
+
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
3700
|
+
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
3701
|
+
*/
|
|
3702
|
+
private readonly baseId;
|
|
3703
|
+
protected readonly titleId: string;
|
|
3704
|
+
protected readonly descId: string;
|
|
3545
3705
|
private readonly overlay;
|
|
3546
3706
|
private readonly viewContainerRef;
|
|
3547
3707
|
/** Template con scrim + diálogo; se portalea al overlay al abrir. */
|
|
@@ -4191,6 +4351,8 @@ declare class FlexComponent {
|
|
|
4191
4351
|
inline: boolean;
|
|
4192
4352
|
static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlexComponent, never>;
|
|
4193
4353
|
static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlexComponent, "ius-flex, [ius-flex]", never, { "direction": { "alias": "direction"; "required": false; }; "gap": { "alias": "gap"; "required": false; }; "align": { "alias": "align"; "required": false; }; "justify": { "alias": "justify"; "required": false; }; "wrap": { "alias": "wrap"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, {}, never, ["*"], true, never>;
|
|
4354
|
+
static ngAcceptInputType_wrap: unknown;
|
|
4355
|
+
static ngAcceptInputType_inline: unknown;
|
|
4194
4356
|
}
|
|
4195
4357
|
|
|
4196
4358
|
type IusDividerOrientation = 'horizontal' | 'vertical';
|
|
@@ -5308,5 +5470,571 @@ declare class AppLayoutComponent {
|
|
|
5308
5470
|
static ngAcceptInputType_fill: unknown;
|
|
5309
5471
|
}
|
|
5310
5472
|
|
|
5311
|
-
|
|
5312
|
-
|
|
5473
|
+
/**
|
|
5474
|
+
* Sección de un área de administración. Lista **PLANA** (sin anidamiento).
|
|
5475
|
+
*
|
|
5476
|
+
* Nota de port: el ítem del golden trae además `onClick`. En Angular no se
|
|
5477
|
+
* ponen callbacks en el modelo de datos — la ng-spec lo resuelve con el output
|
|
5478
|
+
* `itemClick`, que emite el ítem completo.
|
|
5479
|
+
*/
|
|
5480
|
+
interface IusSettingsNavItem {
|
|
5481
|
+
/** Identidad de la sección; se compara contra `selectedId`. */
|
|
5482
|
+
id: string;
|
|
5483
|
+
/** Texto de la fila (y nombre accesible del ícono al colapsar). */
|
|
5484
|
+
label: string;
|
|
5485
|
+
/** Ligadura Material Symbols. */
|
|
5486
|
+
icon?: string;
|
|
5487
|
+
/** `number` → contador; `true` → punto azul. */
|
|
5488
|
+
badge?: number | boolean;
|
|
5489
|
+
/** Fila inerte. */
|
|
5490
|
+
disabled?: boolean;
|
|
5491
|
+
/** Renderiza la fila como enlace. */
|
|
5492
|
+
href?: string;
|
|
5493
|
+
}
|
|
5494
|
+
/**
|
|
5495
|
+
* Identidad cromática del área. Son EXACTAMENTE los 9 del mapa `ACCENTS` del
|
|
5496
|
+
* golden — no hay `danger`, `warning` ni `neutral`.
|
|
5497
|
+
*/
|
|
5498
|
+
type IusSettingsNavAccent = 'primary' | 'info' | 'success' | 'aguacate' | 'arandano' | 'uva' | 'durazno' | 'sandia' | 'banano';
|
|
5499
|
+
/** Densidad de la fila (hereda de MenuItem rail). */
|
|
5500
|
+
type IusSettingsNavSize = 'small' | 'medium';
|
|
5501
|
+
/**
|
|
5502
|
+
* Marca el slot libre de encabezado:
|
|
5503
|
+
* `<ius-settings-nav><div iusSettingsNavHeader>…</div></ius-settings-nav>`.
|
|
5504
|
+
* Equivale al prop `header` de React y tiene PRIORIDAD sobre `title`.
|
|
5505
|
+
*/
|
|
5506
|
+
declare class IusSettingsNavHeaderDirective {
|
|
5507
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IusSettingsNavHeaderDirective, never>;
|
|
5508
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IusSettingsNavHeaderDirective, "[iusSettingsNavHeader]", never, {}, {}, never, never, true, never>;
|
|
5509
|
+
}
|
|
5510
|
+
/**
|
|
5511
|
+
* Marca el slot libre de pie:
|
|
5512
|
+
* `<ius-settings-nav><div iusSettingsNavFooter>…</div></ius-settings-nav>`.
|
|
5513
|
+
* Equivale al prop `footer` de React; se pinta sobre una línea separadora.
|
|
5514
|
+
*/
|
|
5515
|
+
declare class IusSettingsNavFooterDirective {
|
|
5516
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IusSettingsNavFooterDirective, never>;
|
|
5517
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IusSettingsNavFooterDirective, "[iusSettingsNavFooter]", never, {}, {}, never, never, true, never>;
|
|
5518
|
+
}
|
|
5519
|
+
/**
|
|
5520
|
+
* SettingsNav — Ius Design v2 (familia navigation).
|
|
5521
|
+
*
|
|
5522
|
+
* Navegación lateral **ancha** (fila horizontal ícono + etiqueta) de un ÁREA DE
|
|
5523
|
+
* ADMINISTRACIÓN de cuenta/sistema: Usuarios, Roles, Seguridad, Facturación.
|
|
5524
|
+
* Es el hermano del NavRail, que queda reservado a los MÓDULOS del producto —
|
|
5525
|
+
* por eso aquí el ícono en reposo es neutro (`--ius-neutral-8`) y no el verde
|
|
5526
|
+
* de marca del rail: un área de administración no es un módulo.
|
|
5527
|
+
*
|
|
5528
|
+
* Compone `ius-menu-item` (`variant="rail"` expandido, `variant="menu"` en el
|
|
5529
|
+
* desborde), `ius-tooltip` (nombre accesible al colapsar) y `ius-popover`
|
|
5530
|
+
* (menú «Más»). Encabezado y pie son opcionales.
|
|
5531
|
+
*
|
|
5532
|
+
* - **priority+ (NO scrollea)**: mide en ALTO cuántas filas caben; las que
|
|
5533
|
+
* sobran se recogen en un Popover a la derecha tras un disparador «Más»
|
|
5534
|
+
* (`more_horiz`) que hereda el estado seleccionado si el activo quedó oculto.
|
|
5535
|
+
* - **Colapsado**: `collapsed` (controlado) o `defaultCollapsed` (interno);
|
|
5536
|
+
* solo iconos, cada uno envuelto en Tooltip a la DERECHA, y el ancho baja a
|
|
5537
|
+
* 64px. Con `collapsible` se añade el botón propio de colapso en el pie.
|
|
5538
|
+
*
|
|
5539
|
+
* Fuente de verdad: `SettingsNav.jsx` + `SettingsNav.d.ts` +
|
|
5540
|
+
* `SettingsNav.ng-spec.md`.
|
|
5541
|
+
*
|
|
5542
|
+
* Notas de port:
|
|
5543
|
+
* - **El host ES el `<nav>`**. No se puede cambiar el `tagName` de un
|
|
5544
|
+
* componente, así que la semántica va en el bloque `host` con
|
|
5545
|
+
* `role="navigation"` (mismo patrón que `header-bar`, que pone
|
|
5546
|
+
* `role="banner"`). Las variables del golden (`--_sn-w`, `--_sn-cico-h`,
|
|
5547
|
+
* `--_sn-fg`, `--_sn-tint`) se enlazan con `[style.--*]` en el host, como ya
|
|
5548
|
+
* hacen `carousel`, `circular-progress` y `countdown`.
|
|
5549
|
+
* - **`onClick` del ítem → output `itemClick`** (regla del monorepo: sin
|
|
5550
|
+
* callbacks en el modelo). Orden de emisión idéntico al golden (`onClick` y
|
|
5551
|
+
* después `onChange`): `itemClick` y luego `selectedIdChange`.
|
|
5552
|
+
* - **`header`/`footer` (slots de React) → directivas marcadoras**
|
|
5553
|
+
* `[iusSettingsNavHeader]` / `[iusSettingsNavFooter]`, proyectadas con
|
|
5554
|
+
* `ng-content select="…"` y detectadas con `contentChild`. `header` manda
|
|
5555
|
+
* sobre `title`, igual que el golden.
|
|
5556
|
+
* - **`collapsed` sin `booleanAttribute`**: hay que distinguir `undefined` (no
|
|
5557
|
+
* controlado) de `false` (controlado en falso); el transform los colapsaría.
|
|
5558
|
+
* - **Una sola plantilla de fila** (`#fila`) estampada con `NgTemplateOutlet`
|
|
5559
|
+
* en la lista visible y en el contenedor de medición, para no duplicar
|
|
5560
|
+
* markup (la spec lo exige). El contexto de un `ng-template` no está tipado,
|
|
5561
|
+
* así que se recupera el tipo con `asItem()` + `@let` y `strictTemplates`
|
|
5562
|
+
* vuelve a comprobar el cuerpo de la fila.
|
|
5563
|
+
* - **Envoltura de medición `__mrow`** (no existe en el golden): el host de
|
|
5564
|
+
* `ius-menu-item` es `display: contents`, así que NO genera caja y su
|
|
5565
|
+
* `offsetHeight` sería 0. Cada clon de medición se envuelve en un `div`
|
|
5566
|
+
* flex-columna (misma caja que `.__items`) y se mide ESE div, que es lo que
|
|
5567
|
+
* en React ya era el `<a>`/`<button>` directo.
|
|
5568
|
+
* - **Medición con `afterRenderEffect` (fase `read`)**: cubre la primera pasada
|
|
5569
|
+
* y las siguientes con una sola pieza, y garantiza que el DOM ya refleja la
|
|
5570
|
+
* firma nueva (un `effect` normal podría medir el layout anterior). No lee
|
|
5571
|
+
* `visibleCount`, así que escribirlo no realimenta el efecto.
|
|
5572
|
+
* - **`role="menuitem"` en las filas del desborde** (el golden no lo pone): el
|
|
5573
|
+
* panel es `role="menu"` y un `menu` exige hijos `menuitem`; `ius-menu-item`
|
|
5574
|
+
* expone `itemRole` justo para esto. Va a favor del contrato ARIA que el
|
|
5575
|
+
* propio golden declara.
|
|
5576
|
+
* - **`aria-haspopup`/`aria-expanded` del disparador «Más» expandido**: no se
|
|
5577
|
+
* ponen porque `ius-menu-item` no expone esos atributos (el golden tampoco
|
|
5578
|
+
* los pasa en esa rama). En colapsado, donde el disparador es un `<button>`
|
|
5579
|
+
* propio, sí van, como en el golden.
|
|
5580
|
+
* - **Firma de medición sin `it.id ?? i`**: la interfaz Angular declara `id`
|
|
5581
|
+
* obligatorio, así que el fallback al índice del golden es inalcanzable.
|
|
5582
|
+
*/
|
|
5583
|
+
declare class SettingsNavComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
5584
|
+
/** Secciones del área. Lista plana. */
|
|
5585
|
+
readonly items: _angular_core.InputSignal<IusSettingsNavItem[]>;
|
|
5586
|
+
/** Sección activa: `item.id === selectedId` → `aria-current="page"`. */
|
|
5587
|
+
readonly selectedId: _angular_core.InputSignal<string | undefined>;
|
|
5588
|
+
/** Identidad del área (tiñe el activo). Admin no es módulo: default marca. */
|
|
5589
|
+
readonly accent: _angular_core.InputSignal<IusSettingsNavAccent>;
|
|
5590
|
+
/** Densidad de la fila; también fija la casilla colapsada (44/40px). */
|
|
5591
|
+
readonly size: _angular_core.InputSignal<IusSettingsNavSize>;
|
|
5592
|
+
/** Ancho expandido; se aplica como `width` Y `min-width`. */
|
|
5593
|
+
readonly width: _angular_core.InputSignal<string | number>;
|
|
5594
|
+
/** Muestra el botón propio de colapso en el pie. */
|
|
5595
|
+
readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5596
|
+
/** Colapsado en modo CONTROLADO. `undefined` = estado interno. */
|
|
5597
|
+
readonly collapsed: _angular_core.InputSignal<boolean | undefined>;
|
|
5598
|
+
/** Estado inicial del modo no controlado. */
|
|
5599
|
+
readonly defaultCollapsed: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5600
|
+
/** Rótulo del encabezado; se OCULTA al colapsar. */
|
|
5601
|
+
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
5602
|
+
/** Etiqueta del disparador de desborde. */
|
|
5603
|
+
readonly overflowLabel: _angular_core.InputSignal<string>;
|
|
5604
|
+
/** Etiqueta accesible del `<nav>`. */
|
|
5605
|
+
readonly ariaLabel: _angular_core.InputSignal<string>;
|
|
5606
|
+
/** `id` de la sección activada. */
|
|
5607
|
+
readonly selectedIdChange: _angular_core.OutputEmitterRef<string>;
|
|
5608
|
+
/** Ítem activado (espejo del `onClick` del modelo en React). */
|
|
5609
|
+
readonly itemClick: _angular_core.OutputEmitterRef<IusSettingsNavItem>;
|
|
5610
|
+
/** Nuevo estado de colapso (también en modo controlado). */
|
|
5611
|
+
readonly collapsedChange: _angular_core.OutputEmitterRef<boolean>;
|
|
5612
|
+
protected readonly headerRef: _angular_core.Signal<IusSettingsNavHeaderDirective | undefined>;
|
|
5613
|
+
protected readonly footerRef: _angular_core.Signal<IusSettingsNavFooterDirective | undefined>;
|
|
5614
|
+
private readonly wrapRef;
|
|
5615
|
+
private readonly measRef;
|
|
5616
|
+
/** Colapso propio del modo no controlado (seed = `defaultCollapsed`). */
|
|
5617
|
+
private readonly selfCollapsed;
|
|
5618
|
+
/**
|
|
5619
|
+
* Filas que caben en alto. Seed «todas» — el golden arranca en
|
|
5620
|
+
* `items.length`; aquí no se puede leer un input en el inicializador de
|
|
5621
|
+
* campo, así que se usa el máximo y `safeCount()` lo acota a `items().length`.
|
|
5622
|
+
*/
|
|
5623
|
+
private readonly visibleCount;
|
|
5624
|
+
/** Popover del desborde (estado propio, no lo controla el consumidor). */
|
|
5625
|
+
protected readonly moreOpen: _angular_core.WritableSignal<boolean>;
|
|
5626
|
+
private ro;
|
|
5627
|
+
/** `collapsed` definido ⇒ el componente NO muta su estado interno. */
|
|
5628
|
+
private readonly isControlled;
|
|
5629
|
+
/** Estado efectivo de colapso. */
|
|
5630
|
+
protected readonly isCollapsed: _angular_core.Signal<boolean>;
|
|
5631
|
+
/** Texto/ícono del activo (700 en `primary`, 600 en el resto). */
|
|
5632
|
+
protected readonly accentFg: _angular_core.Signal<string>;
|
|
5633
|
+
/** Fondo del activo: 16% del escalón 500 sobre blanco (golden). */
|
|
5634
|
+
protected readonly accentTint: _angular_core.Signal<string>;
|
|
5635
|
+
/** Ancho expandido; número ⇒ px. */
|
|
5636
|
+
protected readonly widthCss: _angular_core.Signal<string>;
|
|
5637
|
+
/**
|
|
5638
|
+
* Alto de la casilla colapsada: 40px ESTRUCTURAL en `small`; en `medium` el
|
|
5639
|
+
* token de área tocable mínima (44px).
|
|
5640
|
+
*/
|
|
5641
|
+
protected readonly cicoH: _angular_core.Signal<"40px" | "var(--ius-hit-target-min)">;
|
|
5642
|
+
/** Conteo visible acotado (el golden hace `Math.min`). */
|
|
5643
|
+
protected readonly safeCount: _angular_core.Signal<number>;
|
|
5644
|
+
/** Filas que se pintan en la columna. */
|
|
5645
|
+
protected readonly visibleItems: _angular_core.Signal<IusSettingsNavItem[]>;
|
|
5646
|
+
/** Filas recogidas en el Popover «Más». */
|
|
5647
|
+
protected readonly hiddenItems: _angular_core.Signal<IusSettingsNavItem[]>;
|
|
5648
|
+
/** ¿Hay filas recogidas? */
|
|
5649
|
+
protected readonly hasOverflow: _angular_core.Signal<boolean>;
|
|
5650
|
+
/** El activo quedó oculto ⇒ «Más» hereda el seleccionado. */
|
|
5651
|
+
protected readonly anyHiddenSelected: _angular_core.Signal<boolean>;
|
|
5652
|
+
/** Cambia cuando hay que volver a medir (mismo `sig` del golden). */
|
|
5653
|
+
private readonly measureSignature;
|
|
5654
|
+
/** El rótulo solo se pinta si no hay slot de encabezado y no está colapsado. */
|
|
5655
|
+
protected readonly showTitle: _angular_core.Signal<boolean>;
|
|
5656
|
+
/** Hay pie si el consumidor proyectó uno o si existe el botón de colapso. */
|
|
5657
|
+
protected readonly hasFooter: _angular_core.Signal<boolean>;
|
|
5658
|
+
/** Texto del botón de colapso. */
|
|
5659
|
+
protected readonly toggleLabel: _angular_core.Signal<"Expandir" | "Contraer">;
|
|
5660
|
+
/** Ícono del botón de colapso. */
|
|
5661
|
+
protected readonly toggleIcon: _angular_core.Signal<"menu" | "menu_open">;
|
|
5662
|
+
constructor();
|
|
5663
|
+
ngOnInit(): void;
|
|
5664
|
+
ngAfterViewInit(): void;
|
|
5665
|
+
ngOnDestroy(): void;
|
|
5666
|
+
/** Recupera el tipo del contexto (no tipado) del `ng-template` de fila. */
|
|
5667
|
+
protected asItem(value: unknown): IusSettingsNavItem;
|
|
5668
|
+
/** ¿La fila colapsada se pinta como enlace? (`<a>` solo con href y no inerte). */
|
|
5669
|
+
protected isLink(item: IusSettingsNavItem): boolean;
|
|
5670
|
+
/** Activación de una fila: primero el ítem, después la selección (orden del golden). */
|
|
5671
|
+
protected handle(item: IusSettingsNavItem): void;
|
|
5672
|
+
/** Igual que `handle`, pero cerrando el Popover del desborde (golden). */
|
|
5673
|
+
protected handleFromOverflow(item: IusSettingsNavItem): void;
|
|
5674
|
+
/** Alterna el colapso; en modo controlado solo notifica. */
|
|
5675
|
+
protected toggleCollapsed(): void;
|
|
5676
|
+
/**
|
|
5677
|
+
* priority+ en ALTO (port literal del `measure()` del golden).
|
|
5678
|
+
*
|
|
5679
|
+
* Mide los clones del contenedor oculto y decide cuántas filas caben; si no
|
|
5680
|
+
* caben todas, reserva el alto de UNA fila para el disparador «Más». No
|
|
5681
|
+
* scrollea: lo que no cabe se recoge en el Popover.
|
|
5682
|
+
*/
|
|
5683
|
+
private measure;
|
|
5684
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<SettingsNavComponent, never>;
|
|
5685
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<SettingsNavComponent, "ius-settings-nav", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "selectedId": { "alias": "selectedId"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "defaultCollapsed": { "alias": "defaultCollapsed"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "overflowLabel": { "alias": "overflowLabel"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "selectedIdChange": "selectedIdChange"; "itemClick": "itemClick"; "collapsedChange": "collapsedChange"; }, ["headerRef", "footerRef"], ["[iusSettingsNavHeader]", "[iusSettingsNavFooter]"], true, never>;
|
|
5686
|
+
}
|
|
5687
|
+
|
|
5688
|
+
/**
|
|
5689
|
+
* Tono del toast: fija el ícono por defecto, la barra de acento y el color del
|
|
5690
|
+
* aro de auto-cierre. Son EXACTAMENTE los 5 del golden (`ToastTone`) — aquí no
|
|
5691
|
+
* hay `primary` ni `brand`, aunque CircularProgress sí los tenga.
|
|
5692
|
+
*/
|
|
5693
|
+
type IusToastTone = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
|
|
5694
|
+
/** Esquina donde el viewport apila los toasts. */
|
|
5695
|
+
type IusToastPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
|
|
5696
|
+
/** Ícono por defecto según el tono (mapa `DEFAULT_ICON` del golden). */
|
|
5697
|
+
declare const IUS_TOAST_DEFAULT_ICON: Record<IusToastTone, string>;
|
|
5698
|
+
/** Auto-cierre por defecto, en ms (golden: `duration === undefined ? 5000`). */
|
|
5699
|
+
declare const IUS_TOAST_DEFAULT_DURATION = 5000;
|
|
5700
|
+
/**
|
|
5701
|
+
* Opciones con las que `ToastService` dispara un toast.
|
|
5702
|
+
*
|
|
5703
|
+
* Nota de port: `action` es `React.ReactNode` en el golden; por la regla
|
|
5704
|
+
* transversal 6 del monorepo (render/content de React → `TemplateRef`) aquí
|
|
5705
|
+
* viaja como plantilla, que es lo único proyectable desde una llamada TS.
|
|
5706
|
+
*/
|
|
5707
|
+
interface IusToastOptions {
|
|
5708
|
+
/** id propio; reutilizarlo REEMPLAZA el toast existente (útil para progreso). */
|
|
5709
|
+
id?: string;
|
|
5710
|
+
tone?: IusToastTone;
|
|
5711
|
+
/** Título (negrita). */
|
|
5712
|
+
title?: string;
|
|
5713
|
+
/** Mensaje secundario. */
|
|
5714
|
+
message?: string;
|
|
5715
|
+
/** Ligadura Material Symbols. Por defecto según `tone`; `false` lo oculta. */
|
|
5716
|
+
icon?: string | false;
|
|
5717
|
+
/** Acción inline (p. ej. un `ius-text-button` "Deshacer"). */
|
|
5718
|
+
action?: TemplateRef<unknown>;
|
|
5719
|
+
/** Muestra el × de cierre. Default `true`. */
|
|
5720
|
+
closable?: boolean;
|
|
5721
|
+
/** ms hasta el auto-cierre. `0`/`null` = persistente. Default 5000. */
|
|
5722
|
+
duration?: number | null;
|
|
5723
|
+
}
|
|
5724
|
+
/** Toast ya normalizado dentro de la pila del servicio. */
|
|
5725
|
+
interface IusToastItem {
|
|
5726
|
+
readonly id: string;
|
|
5727
|
+
readonly tone: IusToastTone;
|
|
5728
|
+
readonly title?: string;
|
|
5729
|
+
readonly message?: string;
|
|
5730
|
+
readonly icon?: string | false;
|
|
5731
|
+
readonly action?: TemplateRef<unknown>;
|
|
5732
|
+
readonly closable: boolean;
|
|
5733
|
+
readonly duration: number | null;
|
|
5734
|
+
}
|
|
5735
|
+
|
|
5736
|
+
/**
|
|
5737
|
+
* Marca la acción inline del toast (p. ej. un "Deshacer"):
|
|
5738
|
+
*
|
|
5739
|
+
* ```html
|
|
5740
|
+
* <ius-toast tone="neutral" title="Nota archivada" [duration]="0">
|
|
5741
|
+
* <ius-text-button iusToastAction size="small" label="Deshacer" />
|
|
5742
|
+
* </ius-toast>
|
|
5743
|
+
* ```
|
|
5744
|
+
*
|
|
5745
|
+
* Es la vía declarativa; desde `ToastService` la acción viaja como
|
|
5746
|
+
* `TemplateRef` en el input `action`.
|
|
5747
|
+
*/
|
|
5748
|
+
declare class IusToastActionDirective {
|
|
5749
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<IusToastActionDirective, never>;
|
|
5750
|
+
static ɵdir: _angular_core.ɵɵDirectiveDeclaration<IusToastActionDirective, "[iusToastAction]", never, {}, {}, never, never, true, never>;
|
|
5751
|
+
}
|
|
5752
|
+
/**
|
|
5753
|
+
* Toast — Ius Design v2 (familia overlays).
|
|
5754
|
+
*
|
|
5755
|
+
* Átomo visual de la notificación efímera: tarjeta blanca con barra de acento
|
|
5756
|
+
* tonal a la izquierda, ícono, título/mensaje, acción inline opcional y un ×
|
|
5757
|
+
* de cierre rodeado por el aro de cuenta regresiva del auto-cierre.
|
|
5758
|
+
*
|
|
5759
|
+
* Normalmente NO se instancia a mano: lo renderiza `ius-toast-viewport` con lo
|
|
5760
|
+
* que le empuja `ToastService`. Se expone suelto para poder mostrarlo estático
|
|
5761
|
+
* (documentación, playground) y por paridad con el golden, que también exporta
|
|
5762
|
+
* el átomo.
|
|
5763
|
+
*/
|
|
5764
|
+
declare class ToastComponent {
|
|
5765
|
+
readonly tone: _angular_core.InputSignal<IusToastTone>;
|
|
5766
|
+
/** Título (negrita). */
|
|
5767
|
+
readonly title: _angular_core.InputSignal<string | undefined>;
|
|
5768
|
+
/** Mensaje secundario. */
|
|
5769
|
+
readonly message: _angular_core.InputSignal<string | undefined>;
|
|
5770
|
+
/** Ligadura Material Symbols. Por defecto según `tone`; `false` lo oculta. */
|
|
5771
|
+
readonly icon: _angular_core.InputSignal<string | false | undefined>;
|
|
5772
|
+
/** Acción inline como plantilla (vía `ToastService`). */
|
|
5773
|
+
readonly action: _angular_core.InputSignal<TemplateRef<unknown> | undefined>;
|
|
5774
|
+
/** Muestra el × de cierre. */
|
|
5775
|
+
readonly closable: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5776
|
+
/**
|
|
5777
|
+
* ms del auto-cierre. Si es > 0 dibuja el aro de cuenta regresiva alrededor
|
|
5778
|
+
* del cierre; `0`/`null` lo deja persistente (sin aro). Quien realmente cierra
|
|
5779
|
+
* es el viewport — aquí solo se pinta el aro.
|
|
5780
|
+
*/
|
|
5781
|
+
readonly duration: _angular_core.InputSignal<number | null | undefined>;
|
|
5782
|
+
/** Congela el aro de progreso (hover). */
|
|
5783
|
+
readonly paused: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5784
|
+
/** Cierre pedido desde el ×. */
|
|
5785
|
+
readonly closed: _angular_core.OutputEmitterRef<void>;
|
|
5786
|
+
private readonly actionRef;
|
|
5787
|
+
protected readonly iconName: _angular_core.Signal<string | null>;
|
|
5788
|
+
protected readonly hasAction: _angular_core.Signal<boolean>;
|
|
5789
|
+
/** Solo hay aro si el auto-cierre está activo (golden: `duration && duration > 0`). */
|
|
5790
|
+
protected readonly showRing: _angular_core.Signal<boolean>;
|
|
5791
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastComponent, never>;
|
|
5792
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastComponent, "ius-toast", never, { "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "action": { "alias": "action"; "required": false; "isSignal": true; }; "closable": { "alias": "closable"; "required": false; "isSignal": true; }; "duration": { "alias": "duration"; "required": false; "isSignal": true; }; "paused": { "alias": "paused"; "required": false; "isSignal": true; }; }, { "closed": "closed"; }, ["actionRef"], ["[iusToastAction]"], true, never>;
|
|
5793
|
+
}
|
|
5794
|
+
|
|
5795
|
+
/**
|
|
5796
|
+
* ToastViewport — Ius Design v2 (familia overlays).
|
|
5797
|
+
*
|
|
5798
|
+
* Contenedor fijo donde se apilan los toasts que empuja `ToastService`.
|
|
5799
|
+
* **Se monta UNA sola vez** en el shell de la app:
|
|
5800
|
+
*
|
|
5801
|
+
* ```html
|
|
5802
|
+
* <ius-toast-viewport position="top-right" [max]="4" />
|
|
5803
|
+
* ```
|
|
5804
|
+
*
|
|
5805
|
+
* El elemento en sí no ocupa espacio: se porta a un overlay del CDK (que ya
|
|
5806
|
+
* aporta el `position: fixed` y el `z-index` del golden) y se coloca en la
|
|
5807
|
+
* esquina con una `GlobalPositionStrategy`.
|
|
5808
|
+
*/
|
|
5809
|
+
declare class ToastViewportComponent implements AfterViewInit, OnDestroy {
|
|
5810
|
+
/** Esquina donde se apilan. */
|
|
5811
|
+
readonly position: _angular_core.InputSignal<IusToastPosition>;
|
|
5812
|
+
/** Máximo visible a la vez; los más viejos se ocultan. */
|
|
5813
|
+
readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
|
|
5814
|
+
private readonly overlay;
|
|
5815
|
+
private readonly viewContainerRef;
|
|
5816
|
+
private readonly toasts;
|
|
5817
|
+
private readonly tpl;
|
|
5818
|
+
private overlayRef;
|
|
5819
|
+
/** Los `max` más nuevos de la pila (golden: `list.slice(-max)`). */
|
|
5820
|
+
protected readonly visible: _angular_core.Signal<readonly _litigiovirtual_ius_design_components.IusToastItem[]>;
|
|
5821
|
+
constructor();
|
|
5822
|
+
ngAfterViewInit(): void;
|
|
5823
|
+
ngOnDestroy(): void;
|
|
5824
|
+
protected onDismissed(id: string): void;
|
|
5825
|
+
/** Traduce `position` a la estrategia global del CDK (el `fixed` del golden). */
|
|
5826
|
+
private applyPosition;
|
|
5827
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastViewportComponent, never>;
|
|
5828
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<ToastViewportComponent, "ius-toast-viewport", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
5829
|
+
}
|
|
5830
|
+
|
|
5831
|
+
/** Atajos de tono: el golden fija `tone` y deja el resto de opciones libre. */
|
|
5832
|
+
type ToneShortcutOptions = Omit<IusToastOptions, 'tone' | 'title'>;
|
|
5833
|
+
/**
|
|
5834
|
+
* ToastService — Ius Design v2 (familia overlays).
|
|
5835
|
+
*
|
|
5836
|
+
* Port de la API imperativa del golden (`toast()` / `Toaster`): dispara toasts
|
|
5837
|
+
* desde cualquier parte (un handler, un `catch`, un interceptor) sin acoplarse
|
|
5838
|
+
* a ninguna plantilla. Basta con montar UN `ius-toast-viewport` en el shell de
|
|
5839
|
+
* la app; el servicio le empuja la pila.
|
|
5840
|
+
*
|
|
5841
|
+
* ```ts
|
|
5842
|
+
* private readonly toasts = inject(ToastService);
|
|
5843
|
+
*
|
|
5844
|
+
* this.toasts.success('Proceso creado', { message: 'Radicado 1100…45600.' });
|
|
5845
|
+
* this.toasts.error('No se pudo guardar', { message: 'Revise la conexión.' });
|
|
5846
|
+
*
|
|
5847
|
+
* // persistente + acción "Deshacer"
|
|
5848
|
+
* const id = this.toasts.show({ tone: 'neutral', title: 'Nota archivada', duration: 0, action: this.undoTpl() });
|
|
5849
|
+
* this.toasts.dismiss(id);
|
|
5850
|
+
* ```
|
|
5851
|
+
*/
|
|
5852
|
+
declare class ToastService {
|
|
5853
|
+
private readonly stack;
|
|
5854
|
+
/** Pila actual, de más viejo a más nuevo. La consume `ius-toast-viewport`. */
|
|
5855
|
+
readonly items: _angular_core.Signal<readonly IusToastItem[]>;
|
|
5856
|
+
private seq;
|
|
5857
|
+
/**
|
|
5858
|
+
* Dispara un toast y devuelve su id. Un string suelto es el atajo de una
|
|
5859
|
+
* línea del golden y viaja como `message` (no como título).
|
|
5860
|
+
*/
|
|
5861
|
+
show(opts: IusToastOptions | string): string;
|
|
5862
|
+
success(title: string, opts?: ToneShortcutOptions): string;
|
|
5863
|
+
/** OJO: `error` mapea al tono `danger` (así en el golden). */
|
|
5864
|
+
error(title: string, opts?: ToneShortcutOptions): string;
|
|
5865
|
+
warning(title: string, opts?: ToneShortcutOptions): string;
|
|
5866
|
+
info(title: string, opts?: ToneShortcutOptions): string;
|
|
5867
|
+
neutral(title: string, opts?: ToneShortcutOptions): string;
|
|
5868
|
+
/** Cierra un toast por id. */
|
|
5869
|
+
dismiss(id: string): void;
|
|
5870
|
+
/** Cierra todos. */
|
|
5871
|
+
clear(): void;
|
|
5872
|
+
private add;
|
|
5873
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<ToastService, never>;
|
|
5874
|
+
static ɵprov: _angular_core.ɵɵInjectableDeclaration<ToastService>;
|
|
5875
|
+
}
|
|
5876
|
+
|
|
5877
|
+
/** Tamaño — escala tipografía, padding, ícono y grosor del indicador. */
|
|
5878
|
+
type IusTabsSize = 'small' | 'medium' | 'large';
|
|
5879
|
+
/**
|
|
5880
|
+
* Tono del indicador activo (subrayado + texto). Son EXACTAMENTE los 9 del
|
|
5881
|
+
* golden: `primary` + `info` + `success` + las 6 frutas. NO hay `danger`,
|
|
5882
|
+
* `warning` ni `neutral` — no uniformar con la paleta de Tag.
|
|
5883
|
+
*/
|
|
5884
|
+
type IusTabsAccent = 'primary' | 'info' | 'success' | 'durazno' | 'banano' | 'sandia' | 'arandano' | 'uva' | 'aguacate';
|
|
5885
|
+
/** Tag al final del label; compone el componente `ius-tag`. */
|
|
5886
|
+
interface IusTabTag {
|
|
5887
|
+
label: string;
|
|
5888
|
+
/** Tono cuando la pestaña NO está activa (default `neutral`). */
|
|
5889
|
+
tone?: IusTagTone;
|
|
5890
|
+
}
|
|
5891
|
+
interface IusTabItem {
|
|
5892
|
+
/** ID estable; es lo que viaja en `value` / `valueChange`. */
|
|
5893
|
+
id: string;
|
|
5894
|
+
/** Etiqueta visible. */
|
|
5895
|
+
label: string;
|
|
5896
|
+
/** Ligadura Material Symbols a la izquierda del label. */
|
|
5897
|
+
icon?: string;
|
|
5898
|
+
/** Contador numérico (badge) a la derecha del label. */
|
|
5899
|
+
count?: number;
|
|
5900
|
+
/** Tag al final del label. */
|
|
5901
|
+
tag?: IusTabTag;
|
|
5902
|
+
/** Deshabilita la pestaña (se salta con las flechas). */
|
|
5903
|
+
disabled?: boolean;
|
|
5904
|
+
}
|
|
5905
|
+
/**
|
|
5906
|
+
* Tabs — Ius Design v2 (familia navigation).
|
|
5907
|
+
*
|
|
5908
|
+
* Navegación por pestañas para alternar sub-vistas de una MISMA sección
|
|
5909
|
+
* (Expediente · Proceso · Cliente). Variante de subrayado: una línea base
|
|
5910
|
+
* neutra recorre el ancho y la activa marca el indicador en el tono `accent`.
|
|
5911
|
+
*
|
|
5912
|
+
* Para navegar entre módulos de la app va NavRail; para pasos secuenciales,
|
|
5913
|
+
* Stepper. El consumidor asocia sus paneles (`role="tabpanel"`) por su cuenta.
|
|
5914
|
+
*
|
|
5915
|
+
* ```html
|
|
5916
|
+
* <ius-tabs [items]="vistas" [value]="vista()" (valueChange)="vista.set($event)" accent="success" />
|
|
5917
|
+
* ```
|
|
5918
|
+
*
|
|
5919
|
+
* **Resuelto por diseño el 2026-08-28** (T3 del pedido de auditoría), donde
|
|
5920
|
+
* antes había tres divergencias doc-vs-golden:
|
|
5921
|
+
* - El contador **compone Insignia** (`variant="count-soft"`), no un badge
|
|
5922
|
+
* propio: neutro en reposo y con el accent suave al activarse.
|
|
5923
|
+
* - El indicador es **escalonado 2 / 3 / 4 px** según `size` (`--_tb-line`),
|
|
5924
|
+
* que es lo que ya hacía el golden.
|
|
5925
|
+
* - El contador activo va en tono **suave**, que es justo lo que da
|
|
5926
|
+
* `count-soft`; con eso desapareció la variable muerta `--_tb-accent-soft`.
|
|
5927
|
+
*/
|
|
5928
|
+
declare class TabsComponent {
|
|
5929
|
+
/** Pestañas a mostrar. */
|
|
5930
|
+
readonly items: _angular_core.InputSignal<readonly IusTabItem[]>;
|
|
5931
|
+
/** Pestaña activa (modo controlado). */
|
|
5932
|
+
readonly value: _angular_core.InputSignal<string | undefined>;
|
|
5933
|
+
/** Pestaña activa inicial (modo NO controlado). Default: la primera. */
|
|
5934
|
+
readonly defaultValue: _angular_core.InputSignal<string | undefined>;
|
|
5935
|
+
readonly size: _angular_core.InputSignal<IusTabsSize>;
|
|
5936
|
+
readonly accent: _angular_core.InputSignal<IusTabsAccent>;
|
|
5937
|
+
/** Reparte el ancho disponible por igual entre pestañas. */
|
|
5938
|
+
readonly fullWidth: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
5939
|
+
/** Id de la pestaña seleccionada (el `onChange` del golden). */
|
|
5940
|
+
readonly valueChange: _angular_core.OutputEmitterRef<string>;
|
|
5941
|
+
private readonly tabButtons;
|
|
5942
|
+
/** Selección propia del modo no controlado. */
|
|
5943
|
+
private readonly picked;
|
|
5944
|
+
protected readonly active: _angular_core.Signal<string>;
|
|
5945
|
+
/** OJO: `primary` toma el escalón 900; el resto de accents, el 700. */
|
|
5946
|
+
protected readonly accentStrong: _angular_core.Signal<string>;
|
|
5947
|
+
protected select(item: IusTabItem): void;
|
|
5948
|
+
/** `←` / `→` mueven a la pestaña vecina, dando la vuelta y saltando deshabilitadas. */
|
|
5949
|
+
protected onKeydown(event: KeyboardEvent, index: number): void;
|
|
5950
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<TabsComponent, never>;
|
|
5951
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<TabsComponent, "ius-tabs", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "defaultValue": { "alias": "defaultValue"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "fullWidth": { "alias": "fullWidth"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
|
|
5952
|
+
}
|
|
5953
|
+
|
|
5954
|
+
/** Tratamiento visual de la lista. */
|
|
5955
|
+
type IusAccordionVariant = 'divided' | 'contained';
|
|
5956
|
+
interface IusAccordionItem {
|
|
5957
|
+
/** Identificador del panel (lo usan `open`/`openChange`). Sin él se usa el índice. */
|
|
5958
|
+
id?: string;
|
|
5959
|
+
/** Título del encabezado. */
|
|
5960
|
+
title: string;
|
|
5961
|
+
/**
|
|
5962
|
+
* Contenido que se revela al abrir. El `content` (ReactNode) del golden viaja
|
|
5963
|
+
* como plantilla, según la regla transversal 6 del port:
|
|
5964
|
+
*
|
|
5965
|
+
* ```html
|
|
5966
|
+
* <ng-template #titular>…campos…</ng-template>
|
|
5967
|
+
* ```
|
|
5968
|
+
*/
|
|
5969
|
+
content?: TemplateRef<unknown>;
|
|
5970
|
+
/** Ligadura Material Symbols a la izquierda del título. */
|
|
5971
|
+
icon?: string;
|
|
5972
|
+
/** Deshabilita el panel (no se puede abrir ni cerrar). */
|
|
5973
|
+
disabled?: boolean;
|
|
5974
|
+
}
|
|
5975
|
+
/**
|
|
5976
|
+
* Accordion — Ius Design v2 (familia data-display).
|
|
5977
|
+
*
|
|
5978
|
+
* Lista de secciones plegables (título + chevron) que revelan su contenido al
|
|
5979
|
+
* abrir. Su uso principal es agrupar formularios largos en bloques dentro de un
|
|
5980
|
+
* Drawer; también sirve para FAQ o paneles de detalle.
|
|
5981
|
+
*
|
|
5982
|
+
* **Exclusivo por defecto** (una sección abierta a la vez); con `multiple`
|
|
5983
|
+
* admite varias. Controlado con `open` + `(openChange)`, o no controlado con
|
|
5984
|
+
* `defaultOpen`.
|
|
5985
|
+
*
|
|
5986
|
+
* ```html
|
|
5987
|
+
* <ng-template #titular>…campos…</ng-template>
|
|
5988
|
+
*
|
|
5989
|
+
* <ius-accordion
|
|
5990
|
+
* defaultOpen="titular"
|
|
5991
|
+
* [items]="[{ id: 'titular', title: 'Datos básicos del titular', content: titular }]"
|
|
5992
|
+
* />
|
|
5993
|
+
* ```
|
|
5994
|
+
*
|
|
5995
|
+
* No lo uses para navegar entre páginas (Tabs/Breadcrumb) ni para esconder
|
|
5996
|
+
* acciones críticas.
|
|
5997
|
+
*
|
|
5998
|
+
* **`inert` en el panel cerrado.** El panel NO se desmonta (es lo que permite
|
|
5999
|
+
* animar la altura) y colapsarlo solo con `grid-template-rows: 0fr` +
|
|
6000
|
+
* `overflow: hidden` lo esconde de la vista pero NO lo saca del orden de
|
|
6001
|
+
* tabulación, así que con Tab se llegaba a campos invisibles — justo en el caso
|
|
6002
|
+
* de uso principal, formularios dentro de un Drawer. El panel cerrado lleva
|
|
6003
|
+
* `inert`, sin ningún efecto visual. Contrapartida aceptada: el contenido
|
|
6004
|
+
* cerrado tampoco se anuncia a lectores de pantalla, que es lo coherente con
|
|
6005
|
+
* «cerrado = oculto». Salió de este equipo el 2026-08-27 y diseño lo adoptó en
|
|
6006
|
+
* `Accordion.jsx` el 2026-08-28 (T6): ya es paridad con el golden.
|
|
6007
|
+
*/
|
|
6008
|
+
declare class AccordionComponent {
|
|
6009
|
+
readonly items: _angular_core.InputSignal<readonly IusAccordionItem[]>;
|
|
6010
|
+
/** Varias secciones abiertas a la vez. */
|
|
6011
|
+
readonly multiple: _angular_core.InputSignalWithTransform<boolean, unknown>;
|
|
6012
|
+
/**
|
|
6013
|
+
* Apertura controlada: `id` (o `id[]` si `multiple`). `null` sigue siendo
|
|
6014
|
+
* modo controlado con todo cerrado — solo `undefined` deja el control al
|
|
6015
|
+
* propio componente.
|
|
6016
|
+
*/
|
|
6017
|
+
readonly open: _angular_core.InputSignal<string | readonly string[] | null | undefined>;
|
|
6018
|
+
/** Apertura inicial en modo NO controlado. */
|
|
6019
|
+
readonly defaultOpen: _angular_core.InputSignal<string | readonly string[] | null | undefined>;
|
|
6020
|
+
readonly variant: _angular_core.InputSignal<IusAccordionVariant>;
|
|
6021
|
+
/** Ícono del chevron; rota 180° al abrir. */
|
|
6022
|
+
readonly chevronIcon: _angular_core.InputSignal<string>;
|
|
6023
|
+
/** `id | null` en exclusivo, `id[]` en `multiple` (el `onChange` del golden). */
|
|
6024
|
+
readonly openChange: _angular_core.OutputEmitterRef<string | string[] | null>;
|
|
6025
|
+
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
6026
|
+
private readonly picked;
|
|
6027
|
+
private readonly gid;
|
|
6028
|
+
protected readonly openIds: _angular_core.Signal<string[]>;
|
|
6029
|
+
/** Sin `id` propio, el golden cae al índice. */
|
|
6030
|
+
protected idOf(item: IusAccordionItem, index: number): string;
|
|
6031
|
+
protected isOpen(item: IusAccordionItem, index: number): boolean;
|
|
6032
|
+
protected headerId(index: number): string;
|
|
6033
|
+
protected panelId(index: number): string;
|
|
6034
|
+
protected toggle(item: IusAccordionItem, index: number): void;
|
|
6035
|
+
static ɵfac: _angular_core.ɵɵFactoryDeclaration<AccordionComponent, never>;
|
|
6036
|
+
static ɵcmp: _angular_core.ɵɵComponentDeclaration<AccordionComponent, "ius-accordion", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "multiple": { "alias": "multiple"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "defaultOpen": { "alias": "defaultOpen"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "chevronIcon": { "alias": "chevronIcon"; "required": false; "isSignal": true; }; }, { "openChange": "openChange"; }, never, never, true, never>;
|
|
6037
|
+
}
|
|
6038
|
+
|
|
6039
|
+
export { AccordionComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
6040
|
+
export type { ActuacionStatus, AlertSize, AlertTone, AlertVariant, CountdownDirection, CountdownFormat, CountdownRingSize, CountdownRingTone, DescriptionListItem, DescriptionListLayout, DescriptionListSize, DescriptionListValueClick, GestionStatus, IllustrationEntry, IllustrationName, IllustrationSize, IusAccordionItem, IusAccordionVariant, IusAppLayoutAccent, IusAvatarColor, IusAvatarShape, IusAvatarSize, IusButtonActionResult, IusButtonSize, IusButtonStatus, IusButtonType, IusButtonVariant, IusCaptchaAppearance, IusCaptchaFieldHandle, IusCaptchaProvider, IusCaptchaSize, IusCaptchaState, IusCaptchaTheme, IusCardAs, IusCardPadding, IusCardRadius, IusCardVariant, IusCarouselImage, IusCarouselImageInput, IusCarouselObjectFit, IusCarouselOrder, IusCarouselOverlay, IusCarouselTransition, IusCheckboxLabelPosition, IusCheckboxSize, IusChipSize, IusChipState, IusCircularProgressSize, IusCircularProgressTone, IusCodeFieldSize, IusDividerOrientation, IusDividerTextAlign, IusDividerVariant, IusDrawerSide, IusDrawerSize, IusDropdownItem, IusDropdownTone, IusDropdownVariant, IusEleniaBubblePosition, IusEleniaBubbleSize, IusEleniaOrbMood, IusEleniaOrbSurface, IusEmptyStateAction, IusEmptyStateSize, IusEmptyStateTone, IusEmptyStateVariant, IusFilterField, IusFilterFieldOption, IusFilterFieldType, IusFilterRule, IusFilterValue, IusFlexAlign, IusFlexDirection, IusFlexGap, IusFlexJustify, IusIconButtonShape, IusIconButtonSize, IusIconButtonVariant, IusInsigniaSize, IusInsigniaTone, IusInsigniaVariant, IusListCardAction, IusListCardField, IusListCardMarker, IusListCardMenuItem, IusListCardSize, IusListCardStatus, IusListCardTag, IusListCardTone, IusListViewAction, IusListViewSize, IusListViewSortOption, IusLoadingMarkSurface, IusLoadingVariant, IusMenuItemSize, IusMenuItemState, IusMenuItemVariant, IusMenuOption, IusModalCloseReason, IusModalIconTone, IusModalSize, IusMultiTextFieldSize, IusMultiTextFieldSlot, IusMultiTextFieldState, IusNavUserAccount, IusNavUserLayout, IusNavUserUser, IusOAuthButtonSize, IusOAuthButtonType, IusOAuthProvider, IusOptionItemSize, IusOptionItemState, IusPersonId, IusPersonItemAction, IusPersonItemSize, IusPersonItemState, IusPersonItemVariant, IusPersonOption, IusPersonPickerSelectedContext, IusPopoverPadding, IusPopoverPlacement, IusPopoverTrigger, IusQueryBuilderSize, IusScrollAxis, IusScrollSize, IusSearchBarSize, IusSearchBarState, IusSegmentedSize, IusSegmentedVariant, IusSelectCreateFactory, IusSelectSize, IusSelectState, IusSelectValue, IusSettingsNavAccent, IusSettingsNavItem, IusSettingsNavSize, IusShowMoreAlign, IusSplitterAccent, IusSplitterOrientation, IusStatusChipSize, IusStatusChipTone, IusStatusKind, IusTabItem, IusTabTag, IusTabsAccent, IusTabsSize, IusTagRole, IusTagShape, IusTagSize, IusTagState, IusTagTone, IusTagVariant, IusTextAlign, IusTextAreaSize, IusTextAreaState, IusTextButtonSize, IusTextButtonType, IusTextColor, IusTextFieldSize, IusTextFieldType, IusTextTag, IusTextVariant, IusTextWeight, IusToastItem, IusToastOptions, IusToastPosition, IusToastTone, IusTooltipTrigger, OrbMood, OrbPose, SegmentedOption, SelectOption, SelectOptionGroup, StatusMeta, StatusOption, StatusTone, StatusToneVars, StatusVocabMap, StatusVocabName, UseWizardOptions, WizardApi, WizardStep };
|