@litigiovirtual/ius-design-components 2.1.19 → 2.1.20
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.
|
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1289
1289
|
type: Output
|
|
1290
1290
|
}] } });
|
|
1291
1291
|
|
|
1292
|
-
let uid$
|
|
1292
|
+
let uid$f = 0;
|
|
1293
1293
|
/**
|
|
1294
1294
|
* TextField — Ius Design v2.
|
|
1295
1295
|
*
|
|
@@ -1328,7 +1328,7 @@ class TextFieldComponent {
|
|
|
1328
1328
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1329
1329
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1330
1330
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1331
|
-
this.inputId = `ius-tf-${uid$
|
|
1331
|
+
this.inputId = `ius-tf-${uid$f++}`;
|
|
1332
1332
|
this.helpId = `${this.inputId}-help`;
|
|
1333
1333
|
this.onChange = () => { };
|
|
1334
1334
|
this.onTouched = () => { };
|
|
@@ -1469,7 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1469
1469
|
type: Output
|
|
1470
1470
|
}] } });
|
|
1471
1471
|
|
|
1472
|
-
let uid$
|
|
1472
|
+
let uid$e = 0;
|
|
1473
1473
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1474
1474
|
function toChars(str, length) {
|
|
1475
1475
|
const out = new Array(length).fill('');
|
|
@@ -1529,7 +1529,7 @@ class CodeFieldComponent {
|
|
|
1529
1529
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1530
1530
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1531
1531
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1532
|
-
this.baseId = `ius-cf-${uid$
|
|
1532
|
+
this.baseId = `ius-cf-${uid$e++}`;
|
|
1533
1533
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1534
1534
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1535
1535
|
this.onChange = () => { };
|
|
@@ -2420,7 +2420,7 @@ const SIZE_MAP = {
|
|
|
2420
2420
|
medium: 96,
|
|
2421
2421
|
large: 140,
|
|
2422
2422
|
};
|
|
2423
|
-
let uid$
|
|
2423
|
+
let uid$d = 0;
|
|
2424
2424
|
/**
|
|
2425
2425
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2426
2426
|
*
|
|
@@ -2445,7 +2445,7 @@ class IllustrationComponent {
|
|
|
2445
2445
|
constructor() {
|
|
2446
2446
|
this.sanitizer = inject(DomSanitizer);
|
|
2447
2447
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2448
|
-
this.instanceId = `i${uid$
|
|
2448
|
+
this.instanceId = `i${uid$d++}`;
|
|
2449
2449
|
this._size = 'medium';
|
|
2450
2450
|
this.viewBox = '0 0 110 110';
|
|
2451
2451
|
this.safeInner = '';
|
|
@@ -2504,7 +2504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2504
2504
|
type: Input
|
|
2505
2505
|
}] } });
|
|
2506
2506
|
|
|
2507
|
-
let uid$
|
|
2507
|
+
let uid$c = 0;
|
|
2508
2508
|
/**
|
|
2509
2509
|
* Checkbox — Ius Design v2.
|
|
2510
2510
|
*
|
|
@@ -2542,7 +2542,7 @@ class CheckboxComponent {
|
|
|
2542
2542
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2543
2543
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2544
2544
|
this.checkedChange = new EventEmitter();
|
|
2545
|
-
this.inputId = `ius-cbx-${uid$
|
|
2545
|
+
this.inputId = `ius-cbx-${uid$c++}`;
|
|
2546
2546
|
this.onChange = () => { };
|
|
2547
2547
|
this.onTouched = () => { };
|
|
2548
2548
|
}
|
|
@@ -4546,7 +4546,7 @@ function prefersReducedMotion() {
|
|
|
4546
4546
|
typeof window.matchMedia === 'function' &&
|
|
4547
4547
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
4548
4548
|
}
|
|
4549
|
-
let uid$
|
|
4549
|
+
let uid$b = 0;
|
|
4550
4550
|
/**
|
|
4551
4551
|
* CircularProgress — Ius Design v2.
|
|
4552
4552
|
*
|
|
@@ -4567,7 +4567,7 @@ class CircularProgressComponent {
|
|
|
4567
4567
|
this.showValue = false;
|
|
4568
4568
|
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
4569
4569
|
this.paused = false;
|
|
4570
|
-
this.gid = `ius-cp-${uid$
|
|
4570
|
+
this.gid = `ius-cp-${uid$b++}`;
|
|
4571
4571
|
this.zone = inject(NgZone);
|
|
4572
4572
|
/** % restante de la cuenta regresiva (100 → 0). */
|
|
4573
4573
|
this.remaining = signal(100, /* @ts-ignore */
|
|
@@ -4729,7 +4729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4729
4729
|
args: [{ transform: booleanAttribute }]
|
|
4730
4730
|
}] } });
|
|
4731
4731
|
|
|
4732
|
-
let uid$
|
|
4732
|
+
let uid$a = 0;
|
|
4733
4733
|
/**
|
|
4734
4734
|
*
|
|
4735
4735
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -4751,7 +4751,7 @@ class LoadingMarkComponent {
|
|
|
4751
4751
|
/** Etiqueta accesible. */
|
|
4752
4752
|
this.ariaLabel = 'Cargando';
|
|
4753
4753
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
4754
|
-
this.id = `lm-${uid$
|
|
4754
|
+
this.id = `lm-${uid$a++}`;
|
|
4755
4755
|
this.baseId = `${this.id}-base`;
|
|
4756
4756
|
this.glowId = `${this.id}-glow`;
|
|
4757
4757
|
this.softId = `${this.id}-soft`;
|
|
@@ -5580,7 +5580,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
5580
5580
|
};
|
|
5581
5581
|
}
|
|
5582
5582
|
}
|
|
5583
|
-
let uid$
|
|
5583
|
+
let uid$9 = 0;
|
|
5584
5584
|
/**
|
|
5585
5585
|
* CaptchaField — Ius Design v2.
|
|
5586
5586
|
*
|
|
@@ -5729,7 +5729,7 @@ class CaptchaFieldComponent {
|
|
|
5729
5729
|
this.phase = signal('loading', /* @ts-ignore */
|
|
5730
5730
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
5731
5731
|
this.widgetId = null;
|
|
5732
|
-
this.baseId = `ius-cf-${uid$
|
|
5732
|
+
this.baseId = `ius-cf-${uid$9++}`;
|
|
5733
5733
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
5734
5734
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
5735
5735
|
this.onChange = () => { };
|
|
@@ -7017,7 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7017
7017
|
type: Output
|
|
7018
7018
|
}] } });
|
|
7019
7019
|
|
|
7020
|
-
let uid$
|
|
7020
|
+
let uid$8 = 0;
|
|
7021
7021
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
7022
7022
|
function isGrouped(options) {
|
|
7023
7023
|
return (Array.isArray(options) &&
|
|
@@ -7198,7 +7198,7 @@ class SelectComponent {
|
|
|
7198
7198
|
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
7199
7199
|
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
7200
7200
|
*/
|
|
7201
|
-
this.fallbackId = `ius-sel-${uid$
|
|
7201
|
+
this.fallbackId = `ius-sel-${uid$8++}`;
|
|
7202
7202
|
this.onChange = () => { };
|
|
7203
7203
|
this.onTouched = () => { };
|
|
7204
7204
|
this.overlay = inject(Overlay);
|
|
@@ -8829,7 +8829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8829
8829
|
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
8830
8830
|
*/
|
|
8831
8831
|
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
8832
|
-
let uid$
|
|
8832
|
+
let uid$7 = 0;
|
|
8833
8833
|
/**
|
|
8834
8834
|
* SearchBar — Ius Design v2.
|
|
8835
8835
|
*
|
|
@@ -8913,7 +8913,7 @@ class SearchBarComponent {
|
|
|
8913
8913
|
this.cleared = new EventEmitter();
|
|
8914
8914
|
// ── Estado interno ────────────────────────────────────────────────────
|
|
8915
8915
|
this.inputRef = viewChild.required('input');
|
|
8916
|
-
this.autoId = `ius-sb-${uid$
|
|
8916
|
+
this.autoId = `ius-sb-${uid$7++}`;
|
|
8917
8917
|
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
8918
8918
|
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
8919
8919
|
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
@@ -9383,7 +9383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
9383
9383
|
args: ['triggerEl']
|
|
9384
9384
|
}] } });
|
|
9385
9385
|
|
|
9386
|
-
let uid$
|
|
9386
|
+
let uid$6 = 0;
|
|
9387
9387
|
/**
|
|
9388
9388
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
9389
9389
|
*
|
|
@@ -9439,7 +9439,7 @@ class MultiTextFieldComponent {
|
|
|
9439
9439
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
9440
9440
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
9441
9441
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
9442
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
9442
|
+
this.baseIdState = `ius-mtf-${uid$6++}`;
|
|
9443
9443
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
9444
9444
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
9445
9445
|
this.onChange = () => { };
|
|
@@ -9722,7 +9722,7 @@ const ICON_TONES = {
|
|
|
9722
9722
|
neutral: { bg: 'var(--ius-neutral-2)', fg: 'var(--ius-neutral-7)' },
|
|
9723
9723
|
};
|
|
9724
9724
|
/** Contador para los ids del nombre accesible (equivalente del `useId` del golden). */
|
|
9725
|
-
let uid$
|
|
9725
|
+
let uid$5 = 0;
|
|
9726
9726
|
/**
|
|
9727
9727
|
* Modal — Ius Design v2.
|
|
9728
9728
|
*
|
|
@@ -9745,7 +9745,7 @@ class ModalComponent {
|
|
|
9745
9745
|
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
9746
9746
|
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
9747
9747
|
*/
|
|
9748
|
-
this.baseId = `ius-modal-${uid$
|
|
9748
|
+
this.baseId = `ius-modal-${uid$5++}`;
|
|
9749
9749
|
this.titleId = `${this.baseId}-title`;
|
|
9750
9750
|
this.descId = `${this.baseId}-desc`;
|
|
9751
9751
|
this.overlay = inject(Overlay);
|
|
@@ -10676,7 +10676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10676
10676
|
args: [{ transform: booleanAttribute }]
|
|
10677
10677
|
}] } });
|
|
10678
10678
|
|
|
10679
|
-
let uid$
|
|
10679
|
+
let uid$4 = 0;
|
|
10680
10680
|
/**
|
|
10681
10681
|
* TextArea — Ius Design v2 (familia inputs).
|
|
10682
10682
|
*
|
|
@@ -10856,7 +10856,7 @@ class TextAreaComponent {
|
|
|
10856
10856
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10857
10857
|
this.focused = signal(false, /* @ts-ignore */
|
|
10858
10858
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
10859
|
-
this.areaId = `ius-ta-${uid$
|
|
10859
|
+
this.areaId = `ius-ta-${uid$4++}`;
|
|
10860
10860
|
this.helpId = `${this.areaId}-help`;
|
|
10861
10861
|
this.area = viewChild('area', /* @ts-ignore */
|
|
10862
10862
|
...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
@@ -12849,7 +12849,7 @@ function normalizeOpen(value, multiple) {
|
|
|
12849
12849
|
const list = Array.isArray(value) ? [...value] : [value];
|
|
12850
12850
|
return multiple ? list : list.slice(0, 1);
|
|
12851
12851
|
}
|
|
12852
|
-
let uid = 0;
|
|
12852
|
+
let uid$3 = 0;
|
|
12853
12853
|
/**
|
|
12854
12854
|
* Accordion — Ius Design v2 (familia data-display).
|
|
12855
12855
|
*
|
|
@@ -12909,7 +12909,7 @@ class AccordionComponent {
|
|
|
12909
12909
|
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
12910
12910
|
this.picked = signal(null, /* @ts-ignore */
|
|
12911
12911
|
...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
|
|
12912
|
-
this.gid = `ius-acc-${uid++}`;
|
|
12912
|
+
this.gid = `ius-acc-${uid$3++}`;
|
|
12913
12913
|
this.openIds = computed(() => {
|
|
12914
12914
|
const controlled = this.open();
|
|
12915
12915
|
if (controlled !== undefined)
|
|
@@ -14269,6 +14269,681 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14269
14269
|
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\n@if (hasBreadcrumb()) {\n <div class=\"ius-pageheader__bc\">\n @if (backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\n </div>\n}\n\n<div class=\"ius-pageheader__top\">\n <div class=\"ius-pageheader__lead\">\n @if (showBack() && !backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <div class=\"ius-pageheader__titles\">\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\n @if (overline() != null || hasOverlineSlot()) {\n <span class=\"ius-pageheader__overline\">\n @if (overline() != null) {\n {{ overline() }}\n } @else {\n <ng-content select=\"[iusPageHeaderOverline]\" />\n }\n </span>\n }\n @if (title() != null || hasTitleSlot()) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">\n @if (title() != null) {\n {{ title() }}\n } @else {\n <ng-content select=\"[iusPageHeaderTitle]\" />\n }\n </h1>\n }\n @if (subtitle() != null || hasSubtitleSlot()) {\n <p class=\"ius-pageheader__subtitle\">\n @if (subtitle() != null) {\n {{ subtitle() }}\n } @else {\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\n }\n </p>\n }\n </div>\n </div>\n @if (hasActions()) {\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\n }\n</div>\n\n@if (hasToolbar()) {\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}\n"] }]
|
|
14270
14270
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], titleLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLevel", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], breadcrumbRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderBreadcrumbDirective), { isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderActionsDirective), { isSignal: true }] }], toolbarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderToolbarDirective), { isSignal: true }] }], overlineRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderOverlineDirective), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderTitleDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderSubtitleDirective), { isSignal: true }] }] } });
|
|
14271
14271
|
|
|
14272
|
+
let uid$2 = 0;
|
|
14273
|
+
/** `min`/`max`/`step` llegan como número o como atributo de texto; vacío = sin valor.
|
|
14274
|
+
* (Declaración de función: el compilador exige un transform analizable estáticamente.) */
|
|
14275
|
+
function numeroOpcional(v) {
|
|
14276
|
+
if (v == null || v === '')
|
|
14277
|
+
return undefined;
|
|
14278
|
+
const n = Number(v);
|
|
14279
|
+
return Number.isNaN(n) ? undefined : n;
|
|
14280
|
+
}
|
|
14281
|
+
/** Decimales significativos de `step` (para no arrastrar 0.30000000000000004). */
|
|
14282
|
+
function decimalesDe(step) {
|
|
14283
|
+
const s = String(step);
|
|
14284
|
+
const i = s.indexOf('.');
|
|
14285
|
+
return i < 0 ? 0 : s.length - i - 1;
|
|
14286
|
+
}
|
|
14287
|
+
/**
|
|
14288
|
+
* NumberField — Ius Design v2 (Contador).
|
|
14289
|
+
*
|
|
14290
|
+
* Campo numérico con stepper (±) a la derecha. Variación de **TextField**:
|
|
14291
|
+
* reusa su wrapper `.ius-tf` (label + required + iconHelp + 5 estados +
|
|
14292
|
+
* helpText/errorText + `size`) y añade los botones `expand_less`/`expand_more`
|
|
14293
|
+
* y las flechas ↑/↓ del teclado, acotado por `min`/`max` y en pasos de `step`.
|
|
14294
|
+
* Se ocultan los spinners nativos del navegador. Implementa
|
|
14295
|
+
* `ControlValueAccessor` con `number | null`.
|
|
14296
|
+
*
|
|
14297
|
+
* Decisiones del port (golden `NumberField.jsx` / `.d.ts`):
|
|
14298
|
+
* - El CSS de TextField se incorpora vía `@use` del SCSS hermano (en React el
|
|
14299
|
+
* golden importa TextField para heredar `.ius-tf`; con encapsulación
|
|
14300
|
+
* emulada cada componente lleva sus propias reglas).
|
|
14301
|
+
* - Vaciar el campo confirma `null` (el golden conserva el último número
|
|
14302
|
+
* mientras el input se ve vacío — con CVA eso desincroniza modelo y vista).
|
|
14303
|
+
* - Al perder el foco, además del recorte a `min`/`max`, el valor se
|
|
14304
|
+
* redondea a la precisión de `step` (step entero → sin decimales), que es lo
|
|
14305
|
+
* que un "Contador" espera. Con `step` decimal se conservan sus decimales.
|
|
14306
|
+
* - `ariaLabel` (passthrough al input) para casillas sin `label` visible, p. ej.
|
|
14307
|
+
* dentro de una celda de tabla.
|
|
14308
|
+
* - `state` (hover|focused|error|disabled) del golden es solo para demos → fuera
|
|
14309
|
+
* de la API; el playground lo congela con `data-force` como TextField.
|
|
14310
|
+
*/
|
|
14311
|
+
class NumberFieldComponent {
|
|
14312
|
+
constructor() {
|
|
14313
|
+
/** Placeholder dentro del input. Default `0`. */
|
|
14314
|
+
this.placeholder = '0';
|
|
14315
|
+
/** Punto rojo (•) a la izquierda del label. */
|
|
14316
|
+
this.required = false;
|
|
14317
|
+
this.minState = signal(undefined, /* @ts-ignore */
|
|
14318
|
+
...(ngDevMode ? [{ debugName: "minState" }] : /* istanbul ignore next */ []));
|
|
14319
|
+
this.maxState = signal(undefined, /* @ts-ignore */
|
|
14320
|
+
...(ngDevMode ? [{ debugName: "maxState" }] : /* istanbul ignore next */ []));
|
|
14321
|
+
this.stepState = signal(1, /* @ts-ignore */
|
|
14322
|
+
...(ngDevMode ? [{ debugName: "stepState" }] : /* istanbul ignore next */ []));
|
|
14323
|
+
/** Mostrar/ocultar la línea de ayuda. */
|
|
14324
|
+
this.showHelpText = true;
|
|
14325
|
+
/** Pastilla "?" junto al label. */
|
|
14326
|
+
this.showIconHelp = false;
|
|
14327
|
+
/** Estado de error (colores + errorText). */
|
|
14328
|
+
this.error = false;
|
|
14329
|
+
this.sizeState = signal('medium', /* @ts-ignore */
|
|
14330
|
+
...(ngDevMode ? [{ debugName: "sizeState" }] : /* istanbul ignore next */ []));
|
|
14331
|
+
this.disabledState = signal(false, /* @ts-ignore */
|
|
14332
|
+
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
14333
|
+
/** Además del CVA: cada valor confirmado (`onChange(value)` del golden). `null` = campo vacío. */
|
|
14334
|
+
this.valueChange = new EventEmitter();
|
|
14335
|
+
/** Valor numérico confirmado. */
|
|
14336
|
+
this.value = signal(null, /* @ts-ignore */
|
|
14337
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
14338
|
+
/** Texto crudo que edita el usuario (permite vacío o parcial como "-"). */
|
|
14339
|
+
this.text = signal('', /* @ts-ignore */
|
|
14340
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
14341
|
+
this.focused = signal(false, /* @ts-ignore */
|
|
14342
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
14343
|
+
this.inputId = `ius-num-${uid$2++}`;
|
|
14344
|
+
this.helpId = `${this.inputId}-help`;
|
|
14345
|
+
this.atMax = computed(() => {
|
|
14346
|
+
const max = this.maxState();
|
|
14347
|
+
const v = this.value();
|
|
14348
|
+
return typeof max === 'number' && v != null && v >= max;
|
|
14349
|
+
}, /* @ts-ignore */
|
|
14350
|
+
...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
|
|
14351
|
+
this.atMin = computed(() => {
|
|
14352
|
+
const min = this.minState();
|
|
14353
|
+
const v = this.value();
|
|
14354
|
+
return typeof min === 'number' && v != null && v <= min;
|
|
14355
|
+
}, /* @ts-ignore */
|
|
14356
|
+
...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
|
|
14357
|
+
this.onChange = () => { };
|
|
14358
|
+
this.onTouched = () => { };
|
|
14359
|
+
}
|
|
14360
|
+
/** Valor mínimo. */
|
|
14361
|
+
set min(v) {
|
|
14362
|
+
this.minState.set(v);
|
|
14363
|
+
}
|
|
14364
|
+
get min() {
|
|
14365
|
+
return this.minState();
|
|
14366
|
+
}
|
|
14367
|
+
/** Valor máximo. */
|
|
14368
|
+
set max(v) {
|
|
14369
|
+
this.maxState.set(v);
|
|
14370
|
+
}
|
|
14371
|
+
get max() {
|
|
14372
|
+
return this.maxState();
|
|
14373
|
+
}
|
|
14374
|
+
/** Incremento de los controles y las flechas del teclado. Default `1`. */
|
|
14375
|
+
set step(v) {
|
|
14376
|
+
this.stepState.set(v && v > 0 ? v : 1);
|
|
14377
|
+
}
|
|
14378
|
+
get step() {
|
|
14379
|
+
return this.stepState();
|
|
14380
|
+
}
|
|
14381
|
+
set size(value) {
|
|
14382
|
+
this.sizeState.set(value ?? 'medium');
|
|
14383
|
+
}
|
|
14384
|
+
get size() {
|
|
14385
|
+
return this.sizeState();
|
|
14386
|
+
}
|
|
14387
|
+
set disabled(value) {
|
|
14388
|
+
this.disabledState.set(value);
|
|
14389
|
+
}
|
|
14390
|
+
get disabled() {
|
|
14391
|
+
return this.disabledState();
|
|
14392
|
+
}
|
|
14393
|
+
get hint() {
|
|
14394
|
+
return this.error ? this.errorText || this.helpText : this.helpText;
|
|
14395
|
+
}
|
|
14396
|
+
get showHint() {
|
|
14397
|
+
return this.showHelpText && !!this.hint;
|
|
14398
|
+
}
|
|
14399
|
+
// ── ControlValueAccessor ──────────────────────────────────────────────
|
|
14400
|
+
writeValue(value) {
|
|
14401
|
+
const v = typeof value === 'number' && !Number.isNaN(value) ? value : null;
|
|
14402
|
+
this.value.set(v);
|
|
14403
|
+
this.text.set(v != null ? String(v) : '');
|
|
14404
|
+
}
|
|
14405
|
+
registerOnChange(fn) {
|
|
14406
|
+
this.onChange = fn;
|
|
14407
|
+
}
|
|
14408
|
+
registerOnTouched(fn) {
|
|
14409
|
+
this.onTouched = fn;
|
|
14410
|
+
}
|
|
14411
|
+
setDisabledState(isDisabled) {
|
|
14412
|
+
this.disabledState.set(isDisabled);
|
|
14413
|
+
}
|
|
14414
|
+
// ── Lógica numérica ───────────────────────────────────────────────────
|
|
14415
|
+
clamp(n) {
|
|
14416
|
+
let v = n;
|
|
14417
|
+
const min = this.minState();
|
|
14418
|
+
const max = this.maxState();
|
|
14419
|
+
if (typeof min === 'number')
|
|
14420
|
+
v = Math.max(min, v);
|
|
14421
|
+
if (typeof max === 'number')
|
|
14422
|
+
v = Math.min(max, v);
|
|
14423
|
+
return v;
|
|
14424
|
+
}
|
|
14425
|
+
/** Redondea a la precisión de `step` (step entero → entero). */
|
|
14426
|
+
aPrecision(n) {
|
|
14427
|
+
const dec = decimalesDe(this.stepState());
|
|
14428
|
+
return Number(n.toFixed(dec));
|
|
14429
|
+
}
|
|
14430
|
+
commit(n) {
|
|
14431
|
+
this.value.set(n);
|
|
14432
|
+
this.onChange(n);
|
|
14433
|
+
this.valueChange.emit(n);
|
|
14434
|
+
}
|
|
14435
|
+
bump(dir) {
|
|
14436
|
+
if (this.disabled)
|
|
14437
|
+
return;
|
|
14438
|
+
const cur = this.value();
|
|
14439
|
+
const base = cur != null && !Number.isNaN(cur) ? cur : 0;
|
|
14440
|
+
const next = this.aPrecision(this.clamp(base + dir * this.stepState()));
|
|
14441
|
+
this.commit(next);
|
|
14442
|
+
this.text.set(String(next));
|
|
14443
|
+
}
|
|
14444
|
+
// ── Handlers ──────────────────────────────────────────────────────────
|
|
14445
|
+
onInput(event) {
|
|
14446
|
+
const raw = event.target.value;
|
|
14447
|
+
this.text.set(raw);
|
|
14448
|
+
if (raw === '') {
|
|
14449
|
+
this.commit(null);
|
|
14450
|
+
return;
|
|
14451
|
+
}
|
|
14452
|
+
if (raw === '-')
|
|
14453
|
+
return;
|
|
14454
|
+
const n = Number(raw);
|
|
14455
|
+
if (!Number.isNaN(n))
|
|
14456
|
+
this.commit(n);
|
|
14457
|
+
}
|
|
14458
|
+
onFocus() {
|
|
14459
|
+
this.focused.set(true);
|
|
14460
|
+
}
|
|
14461
|
+
onBlur() {
|
|
14462
|
+
this.focused.set(false);
|
|
14463
|
+
this.onTouched();
|
|
14464
|
+
const t = this.text();
|
|
14465
|
+
if (t === '')
|
|
14466
|
+
return;
|
|
14467
|
+
const n = Number(t);
|
|
14468
|
+
if (t === '-' || Number.isNaN(n)) {
|
|
14469
|
+
const v = this.value();
|
|
14470
|
+
this.text.set(v != null ? String(v) : '');
|
|
14471
|
+
return;
|
|
14472
|
+
}
|
|
14473
|
+
const c = this.aPrecision(this.clamp(n));
|
|
14474
|
+
if (c !== this.value())
|
|
14475
|
+
this.commit(c);
|
|
14476
|
+
this.text.set(String(c));
|
|
14477
|
+
}
|
|
14478
|
+
onKeyDown(event) {
|
|
14479
|
+
if (event.key === 'ArrowUp') {
|
|
14480
|
+
event.preventDefault();
|
|
14481
|
+
this.bump(1);
|
|
14482
|
+
}
|
|
14483
|
+
else if (event.key === 'ArrowDown') {
|
|
14484
|
+
event.preventDefault();
|
|
14485
|
+
this.bump(-1);
|
|
14486
|
+
}
|
|
14487
|
+
}
|
|
14488
|
+
aumentar() {
|
|
14489
|
+
this.bump(1);
|
|
14490
|
+
}
|
|
14491
|
+
disminuir() {
|
|
14492
|
+
this.bump(-1);
|
|
14493
|
+
}
|
|
14494
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NumberFieldComponent, isStandalone: true, selector: "ius-number-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], min: ["min", "min", numeroOpcional], max: ["max", "max", numeroOpcional], step: ["step", "step", numeroOpcional], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", ariaLabel: "ariaLabel", size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf ius-tf--stepper" }, providers: [
|
|
14496
|
+
{
|
|
14497
|
+
provide: NG_VALUE_ACCESSOR,
|
|
14498
|
+
useExisting: forwardRef(() => NumberFieldComponent),
|
|
14499
|
+
multi: true,
|
|
14500
|
+
},
|
|
14501
|
+
], ngImport: i0, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n placement=\"top\"\r\n trigger=\"hover\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n role=\"spinbutton\"\r\n [name]=\"name\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"text()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <div class=\"ius-num__steppers\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-num__step\"\r\n tabindex=\"-1\"\r\n aria-label=\"Aumentar\"\r\n [disabled]=\"disabled || atMax()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"aumentar()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">expand_less</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-num__step\"\r\n tabindex=\"-1\"\r\n aria-label=\"Disminuir\"\r\n [disabled]=\"disabled || atMin()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"disminuir()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host{max-width:240px}.ius-tf__input{-moz-appearance:textfield}.ius-tf__input::-webkit-outer-spin-button,.ius-tf__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ius-tf__field{padding-right:var(--ius-space-xs)}.ius-num__steppers{display:flex;flex-direction:column;flex:0 0 auto;align-self:center;justify-content:center}.ius-num__step{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 var(--ius-space-xxs);line-height:0;color:var(--_tf-icon);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-num__step:first-child{margin-bottom:-3px}.ius-num__step:last-child{margin-top:-3px}.ius-num__step:hover{color:var(--ius-primary-500)}.ius-num__step:active{color:var(--ius-primary-600)}.ius-num__step:disabled{color:var(--ius-text-disabled);cursor:not-allowed}.ius-num__step .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host([data-error=true]) .ius-num__step,:host([data-force=error]) .ius-num__step{color:var(--ius-danger-700)}:host([data-error=true]) .ius-num__step:hover,:host([data-force=error]) .ius-num__step:hover{color:var(--ius-danger-800)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14502
|
+
}
|
|
14503
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
14504
|
+
type: Component,
|
|
14505
|
+
args: [{ selector: 'ius-number-field', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
14506
|
+
{
|
|
14507
|
+
provide: NG_VALUE_ACCESSOR,
|
|
14508
|
+
useExisting: forwardRef(() => NumberFieldComponent),
|
|
14509
|
+
multi: true,
|
|
14510
|
+
},
|
|
14511
|
+
], host: {
|
|
14512
|
+
class: 'ius-tf ius-tf--stepper',
|
|
14513
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
14514
|
+
'[attr.data-focused]': 'focused() || null',
|
|
14515
|
+
'[attr.data-error]': 'error || null',
|
|
14516
|
+
'[attr.data-disabled]': 'disabled || null',
|
|
14517
|
+
}, template: "@if (label) {\r\n <label [for]=\"inputId\" class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n placement=\"top\"\r\n trigger=\"hover\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div class=\"ius-tf__field\">\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-tf__input\"\r\n type=\"text\"\r\n inputmode=\"numeric\"\r\n role=\"spinbutton\"\r\n [name]=\"name\"\r\n [placeholder]=\"placeholder\"\r\n [value]=\"text()\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-invalid]=\"error || null\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-valuenow]=\"value()\"\r\n [attr.aria-valuemin]=\"min\"\r\n [attr.aria-valuemax]=\"max\"\r\n [attr.aria-describedby]=\"showHint ? helpId : null\"\r\n (input)=\"onInput($event)\"\r\n (keydown)=\"onKeyDown($event)\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <div class=\"ius-num__steppers\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-num__step\"\r\n tabindex=\"-1\"\r\n aria-label=\"Aumentar\"\r\n [disabled]=\"disabled || atMax()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"aumentar()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">expand_less</span>\r\n </button>\r\n <button\r\n type=\"button\"\r\n class=\"ius-num__step\"\r\n tabindex=\"-1\"\r\n aria-label=\"Disminuir\"\r\n [disabled]=\"disabled || atMin()\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"disminuir()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host{max-width:240px}.ius-tf__input{-moz-appearance:textfield}.ius-tf__input::-webkit-outer-spin-button,.ius-tf__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ius-tf__field{padding-right:var(--ius-space-xs)}.ius-num__steppers{display:flex;flex-direction:column;flex:0 0 auto;align-self:center;justify-content:center}.ius-num__step{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 var(--ius-space-xxs);line-height:0;color:var(--_tf-icon);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-num__step:first-child{margin-bottom:-3px}.ius-num__step:last-child{margin-top:-3px}.ius-num__step:hover{color:var(--ius-primary-500)}.ius-num__step:active{color:var(--ius-primary-600)}.ius-num__step:disabled{color:var(--ius-text-disabled);cursor:not-allowed}.ius-num__step .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host([data-error=true]) .ius-num__step,:host([data-force=error]) .ius-num__step{color:var(--ius-danger-700)}:host([data-error=true]) .ius-num__step:hover,:host([data-force=error]) .ius-num__step:hover{color:var(--ius-danger-800)}\n"] }]
|
|
14518
|
+
}], propDecorators: { label: [{
|
|
14519
|
+
type: Input
|
|
14520
|
+
}], placeholder: [{
|
|
14521
|
+
type: Input
|
|
14522
|
+
}], required: [{
|
|
14523
|
+
type: Input,
|
|
14524
|
+
args: [{ transform: booleanAttribute }]
|
|
14525
|
+
}], min: [{
|
|
14526
|
+
type: Input,
|
|
14527
|
+
args: [{ transform: numeroOpcional }]
|
|
14528
|
+
}], max: [{
|
|
14529
|
+
type: Input,
|
|
14530
|
+
args: [{ transform: numeroOpcional }]
|
|
14531
|
+
}], step: [{
|
|
14532
|
+
type: Input,
|
|
14533
|
+
args: [{ transform: numeroOpcional }]
|
|
14534
|
+
}], helpText: [{
|
|
14535
|
+
type: Input
|
|
14536
|
+
}], errorText: [{
|
|
14537
|
+
type: Input
|
|
14538
|
+
}], showHelpText: [{
|
|
14539
|
+
type: Input,
|
|
14540
|
+
args: [{ transform: booleanAttribute }]
|
|
14541
|
+
}], showIconHelp: [{
|
|
14542
|
+
type: Input,
|
|
14543
|
+
args: [{ transform: booleanAttribute }]
|
|
14544
|
+
}], iconHelpTitle: [{
|
|
14545
|
+
type: Input
|
|
14546
|
+
}], iconHelpContent: [{
|
|
14547
|
+
type: Input
|
|
14548
|
+
}], error: [{
|
|
14549
|
+
type: Input,
|
|
14550
|
+
args: [{ transform: booleanAttribute }]
|
|
14551
|
+
}], name: [{
|
|
14552
|
+
type: Input
|
|
14553
|
+
}], ariaLabel: [{
|
|
14554
|
+
type: Input
|
|
14555
|
+
}], size: [{
|
|
14556
|
+
type: Input
|
|
14557
|
+
}], disabled: [{
|
|
14558
|
+
type: Input,
|
|
14559
|
+
args: [{ transform: booleanAttribute }]
|
|
14560
|
+
}], valueChange: [{
|
|
14561
|
+
type: Output
|
|
14562
|
+
}] } });
|
|
14563
|
+
|
|
14564
|
+
/** Footer personalizado (reemplaza al footer por defecto Guardar/Cancelar). */
|
|
14565
|
+
class IusFormFooterDirective {
|
|
14566
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusFormFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14567
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusFormFooterDirective, isStandalone: true, selector: "[iusFormFooter]", ngImport: i0 }); }
|
|
14568
|
+
}
|
|
14569
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusFormFooterDirective, decorators: [{
|
|
14570
|
+
type: Directive,
|
|
14571
|
+
args: [{ selector: '[iusFormFooter]', standalone: true }]
|
|
14572
|
+
}] });
|
|
14573
|
+
let uid$1 = 0;
|
|
14574
|
+
/**
|
|
14575
|
+
* Form — Ius Design v2 (familia layout).
|
|
14576
|
+
*
|
|
14577
|
+
* **Cáscara** de formulario: rejilla responsive por container-query (1→2
|
|
14578
|
+
* columnas), secciones (`ius-form-section`, opcionalmente colapsables vía
|
|
14579
|
+
* `ius-accordion`), resumen de validación (`ius-alert` danger con enlaces que
|
|
14580
|
+
* enfocan el campo) y footer de acciones sticky (`ius-button`). **No maneja
|
|
14581
|
+
* estado ni valida**: los inputs controlados del sistema resuelven label /
|
|
14582
|
+
* helpText / errorText / required y el consumidor pasa `errorSummary` ya
|
|
14583
|
+
* calculado. Vive en Drawer (default), Modal (≤ 4 campos) o página completa;
|
|
14584
|
+
* dentro de Drawer/Modal el footer lo pone el contenedor → `[footer]="false"`.
|
|
14585
|
+
*
|
|
14586
|
+
* Composición: `ius-form` › `ius-form-section` › `ius-form-field` › inputs.
|
|
14587
|
+
*
|
|
14588
|
+
* Decisiones del port (golden `Form.jsx` / `Form.d.ts`):
|
|
14589
|
+
* - El golden muestra el footer por defecto solo si recibe `onSubmit`/`onCancel`.
|
|
14590
|
+
* Un output no expone suscriptores: `footer` (default `true`) lo muestra con
|
|
14591
|
+
* el botón de envío; `showCancel` añade el de cancelar; `[iusFormFooter]`
|
|
14592
|
+
* proyecta uno propio.
|
|
14593
|
+
* - `submitted` reenvía el `SubmitEvent` nativo (ya con `preventDefault`).
|
|
14594
|
+
* - El host `ius-form` envuelve un `<form novalidate>` interno, que es el
|
|
14595
|
+
* contenedor de la container-query y quien recibe el submit del botón.
|
|
14596
|
+
*/
|
|
14597
|
+
class FormComponent {
|
|
14598
|
+
constructor() {
|
|
14599
|
+
this.document = inject(DOCUMENT);
|
|
14600
|
+
/** Columnas de la rejilla. Default `auto`. Las secciones lo heredan salvo que pasen el suyo. */
|
|
14601
|
+
this.columns = input('auto', /* @ts-ignore */
|
|
14602
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14603
|
+
/** Campos con error → Alert danger arriba. Vacío/omitido = sin resumen. */
|
|
14604
|
+
this.errorSummary = input(undefined, /* @ts-ignore */
|
|
14605
|
+
...(ngDevMode ? [{ debugName: "errorSummary" }] : /* istanbul ignore next */ []));
|
|
14606
|
+
/** Título del resumen de errores. */
|
|
14607
|
+
this.errorTitle = input('Revisa los siguientes campos', /* @ts-ignore */
|
|
14608
|
+
...(ngDevMode ? [{ debugName: "errorTitle" }] : /* istanbul ignore next */ []));
|
|
14609
|
+
/** Etiqueta del botón de envío. */
|
|
14610
|
+
this.submitLabel = input('Guardar', /* @ts-ignore */
|
|
14611
|
+
...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
|
|
14612
|
+
/** Etiqueta del botón de cancelar. */
|
|
14613
|
+
this.cancelLabel = input('Cancelar', /* @ts-ignore */
|
|
14614
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
14615
|
+
/** Variante del botón de envío. */
|
|
14616
|
+
this.submitVariant = input('primary', /* @ts-ignore */
|
|
14617
|
+
...(ngDevMode ? [{ debugName: "submitVariant" }] : /* istanbul ignore next */ []));
|
|
14618
|
+
/** Variante del botón de cancelar. */
|
|
14619
|
+
this.cancelVariant = input('tertiary', /* @ts-ignore */
|
|
14620
|
+
...(ngDevMode ? [{ debugName: "cancelVariant" }] : /* istanbul ignore next */ []));
|
|
14621
|
+
/** Estado loading del botón de envío. */
|
|
14622
|
+
this.submitting = input(false, { ...(ngDevMode ? { debugName: "submitting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14623
|
+
/** Deshabilita el botón de envío. */
|
|
14624
|
+
this.submitDisabled = input(false, { ...(ngDevMode ? { debugName: "submitDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14625
|
+
/** `false` = sin footer (dentro de Drawer/Modal, que ya ponen el suyo). */
|
|
14626
|
+
this.footer = input(true, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14627
|
+
/** Añade el botón de cancelar al footer por defecto (equivale a pasar `onCancel`). */
|
|
14628
|
+
this.showCancel = input(false, { ...(ngDevMode ? { debugName: "showCancel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14629
|
+
/** Footer fijo al fondo del scroll (solo el footer propio). Default `true`. */
|
|
14630
|
+
this.stickyFooter = input(true, { ...(ngDevMode ? { debugName: "stickyFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14631
|
+
/** Modo acordeón: solo una sección colapsable abierta a la vez. */
|
|
14632
|
+
this.accordion = input(false, { ...(ngDevMode ? { debugName: "accordion" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14633
|
+
/** Tratamiento de las secciones colapsables. Default `contained`. */
|
|
14634
|
+
this.sectionVariant = input('contained', /* @ts-ignore */
|
|
14635
|
+
...(ngDevMode ? [{ debugName: "sectionVariant" }] : /* istanbul ignore next */ []));
|
|
14636
|
+
/** Envío (`onSubmit`): el `SubmitEvent` nativo, ya prevenido. */
|
|
14637
|
+
this.submitted = output();
|
|
14638
|
+
/** Cancelar (`onCancel`). */
|
|
14639
|
+
this.cancelled = output();
|
|
14640
|
+
this.footerSlot = contentChild(IusFormFooterDirective, /* @ts-ignore */
|
|
14641
|
+
...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
|
|
14642
|
+
this.hasFooterSlot = computed(() => !!this.footerSlot(), /* @ts-ignore */
|
|
14643
|
+
...(ngDevMode ? [{ debugName: "hasFooterSlot" }] : /* istanbul ignore next */ []));
|
|
14644
|
+
this.errores = computed(() => this.errorSummary() ?? [], /* @ts-ignore */
|
|
14645
|
+
...(ngDevMode ? [{ debugName: "errores" }] : /* istanbul ignore next */ []));
|
|
14646
|
+
this.hasErrors = computed(() => this.errores().length > 0, /* @ts-ignore */
|
|
14647
|
+
...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
|
|
14648
|
+
this.formId = `ius-form-${uid$1++}`;
|
|
14649
|
+
// ── Coordinación single-open de las secciones colapsables ──────────────
|
|
14650
|
+
/** Sección colapsable abierta en modo `accordion` (`null` = todas cerradas). */
|
|
14651
|
+
this.openSectionId = signal(null, /* @ts-ignore */
|
|
14652
|
+
...(ngDevMode ? [{ debugName: "openSectionId" }] : /* istanbul ignore next */ []));
|
|
14653
|
+
this.inicializado = false;
|
|
14654
|
+
}
|
|
14655
|
+
/** Una sección colapsable se registra al montarse; la primera con `defaultOpen` queda abierta. */
|
|
14656
|
+
register(sectionId, defaultOpen) {
|
|
14657
|
+
if (!this.inicializado && defaultOpen) {
|
|
14658
|
+
this.inicializado = true;
|
|
14659
|
+
this.openSectionId.set(sectionId);
|
|
14660
|
+
}
|
|
14661
|
+
}
|
|
14662
|
+
setOpen(sectionId) {
|
|
14663
|
+
this.openSectionId.set(sectionId);
|
|
14664
|
+
}
|
|
14665
|
+
// ── Handlers ──────────────────────────────────────────────────────────
|
|
14666
|
+
onSubmit(event) {
|
|
14667
|
+
event.preventDefault();
|
|
14668
|
+
this.submitted.emit(event);
|
|
14669
|
+
}
|
|
14670
|
+
onCancel() {
|
|
14671
|
+
this.cancelled.emit();
|
|
14672
|
+
}
|
|
14673
|
+
/** Enlace del resumen: enfoca el campo por `id` o `name`. */
|
|
14674
|
+
focusField(field, event) {
|
|
14675
|
+
event.preventDefault();
|
|
14676
|
+
const el = this.document.getElementById(field) ??
|
|
14677
|
+
this.document.querySelector(`[name="${field}"]`);
|
|
14678
|
+
el?.focus();
|
|
14679
|
+
}
|
|
14680
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14681
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormComponent, isStandalone: true, selector: "ius-form", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, errorSummary: { classPropertyName: "errorSummary", publicName: "errorSummary", isSignal: true, isRequired: false, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submitVariant: { classPropertyName: "submitVariant", publicName: "submitVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelVariant: { classPropertyName: "cancelVariant", publicName: "cancelVariant", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, submitDisabled: { classPropertyName: "submitDisabled", publicName: "submitDisabled", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, sectionVariant: { classPropertyName: "sectionVariant", publicName: "sectionVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusFormFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\r\n @if (hasErrors()) {\r\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\r\n <ul class=\"ius-form__summary-list\">\r\n @for (e of errores(); track e.field ?? $index) {\r\n <li>\r\n @if (e.field; as field) {\r\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\r\n } @else {\r\n {{ e.label || '' }}\r\n }\r\n @if (e.message) {\r\n \u2014 {{ e.message }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </ius-alert>\r\n }\r\n\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (footer()) {\r\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\r\n @if (hasFooterSlot()) {\r\n <ng-content select=\"[iusFormFooter]\" />\r\n } @else {\r\n @if (showCancel()) {\r\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\r\n }\r\n <ius-button\r\n [variant]=\"submitVariant()\"\r\n type=\"submit\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"submitDisabled()\"\r\n [label]=\"submitLabel()\"\r\n />\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "ius-alert", inputs: ["tone", "variant", "size", "border", "title", "overline", "icon", "iconChip", "meta", "closable", "closeLabel", "actionsDivider", "align", "role"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14682
|
+
}
|
|
14683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, decorators: [{
|
|
14684
|
+
type: Component,
|
|
14685
|
+
args: [{ selector: 'ius-form', standalone: true, imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\r\n @if (hasErrors()) {\r\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\r\n <ul class=\"ius-form__summary-list\">\r\n @for (e of errores(); track e.field ?? $index) {\r\n <li>\r\n @if (e.field; as field) {\r\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\r\n } @else {\r\n {{ e.label || '' }}\r\n }\r\n @if (e.message) {\r\n \u2014 {{ e.message }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </ius-alert>\r\n }\r\n\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (footer()) {\r\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\r\n @if (hasFooterSlot()) {\r\n <ng-content select=\"[iusFormFooter]\" />\r\n } @else {\r\n @if (showCancel()) {\r\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\r\n }\r\n <ius-button\r\n [variant]=\"submitVariant()\"\r\n type=\"submit\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"submitDisabled()\"\r\n [label]=\"submitLabel()\"\r\n />\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"] }]
|
|
14686
|
+
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], errorSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorSummary", required: false }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submitVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitVariant", required: false }] }], cancelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelVariant", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], submitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitDisabled", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], sectionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionVariant", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusFormFooterDirective), { isSignal: true }] }] } });
|
|
14687
|
+
|
|
14688
|
+
let uid = 0;
|
|
14689
|
+
/**
|
|
14690
|
+
* FormSection — agrupa campos bajo un título (opcionalmente colapsable).
|
|
14691
|
+
*
|
|
14692
|
+
* No colapsable: cabecera (ícono + título + descripción) y divisor superior
|
|
14693
|
+
* respecto a la sección anterior. Colapsable: reusa `ius-accordion` con el
|
|
14694
|
+
* `sectionVariant` del `ius-form` (`contained` card · `divided` hairline) y,
|
|
14695
|
+
* si el form está en modo `accordion`, solo una sección abierta a la vez.
|
|
14696
|
+
* Hereda `columns` del `ius-form` salvo que pase el suyo.
|
|
14697
|
+
*/
|
|
14698
|
+
class FormSectionComponent {
|
|
14699
|
+
constructor() {
|
|
14700
|
+
this.form = inject(FormComponent, { optional: true });
|
|
14701
|
+
/** Título de la sección. */
|
|
14702
|
+
this.title = input(undefined, /* @ts-ignore */
|
|
14703
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
14704
|
+
/** Descripción breve bajo el título. */
|
|
14705
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
14706
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
14707
|
+
/** Ícono Material Symbols a la izquierda del título (solo no colapsable). */
|
|
14708
|
+
this.icon = input(undefined, /* @ts-ignore */
|
|
14709
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
14710
|
+
/** Sección plegable (Accordion). Default `false`. */
|
|
14711
|
+
this.collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14712
|
+
/** Sobreescribe el `sectionVariant` del Form para esta sección colapsable. */
|
|
14713
|
+
this.variant = input(undefined, /* @ts-ignore */
|
|
14714
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
14715
|
+
/** Abierta por defecto cuando es colapsable. Default `true`. */
|
|
14716
|
+
this.defaultOpen = input(true, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14717
|
+
/** Columnas de la rejilla interna. Si se omite, hereda el `columns` del Form; si tampoco, `auto`. */
|
|
14718
|
+
this.columns = input(undefined, /* @ts-ignore */
|
|
14719
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14720
|
+
this.cuerpo = viewChild.required('cuerpo');
|
|
14721
|
+
this.sectionId = `ius-form-sec-${uid++}`;
|
|
14722
|
+
this.colsEfectivas = computed(() => this.columns() ?? this.form?.columns() ?? 'auto', /* @ts-ignore */
|
|
14723
|
+
...(ngDevMode ? [{ debugName: "colsEfectivas" }] : /* istanbul ignore next */ []));
|
|
14724
|
+
this.variantEfectiva = computed(() => this.variant() ?? this.form?.sectionVariant() ?? 'contained', /* @ts-ignore */
|
|
14725
|
+
...(ngDevMode ? [{ debugName: "variantEfectiva" }] : /* istanbul ignore next */ []));
|
|
14726
|
+
/** Modo single-open coordinado por el Form. */
|
|
14727
|
+
this.single = computed(() => !!this.form?.accordion(), /* @ts-ignore */
|
|
14728
|
+
...(ngDevMode ? [{ debugName: "single" }] : /* istanbul ignore next */ []));
|
|
14729
|
+
/** Apertura controlada solo en modo `accordion`; `undefined` deja el control al Accordion. */
|
|
14730
|
+
this.accOpen = computed(() => {
|
|
14731
|
+
if (!this.single())
|
|
14732
|
+
return undefined;
|
|
14733
|
+
return this.form.openSectionId() === this.sectionId ? this.sectionId : null;
|
|
14734
|
+
}, /* @ts-ignore */
|
|
14735
|
+
...(ngDevMode ? [{ debugName: "accOpen" }] : /* istanbul ignore next */ []));
|
|
14736
|
+
this.accDefaultOpen = computed(() => this.single() ? undefined : this.defaultOpen() ? this.sectionId : undefined, /* @ts-ignore */
|
|
14737
|
+
...(ngDevMode ? [{ debugName: "accDefaultOpen" }] : /* istanbul ignore next */ []));
|
|
14738
|
+
this.items = computed(() => [
|
|
14739
|
+
{ id: this.sectionId, title: this.title() ?? '', icon: this.icon(), content: this.cuerpo() },
|
|
14740
|
+
], /* @ts-ignore */
|
|
14741
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
14742
|
+
// Registro en el Form cuando participa del modo single-open (useEffect del golden).
|
|
14743
|
+
effect(() => {
|
|
14744
|
+
if (this.single() && this.collapsible()) {
|
|
14745
|
+
const abierta = this.defaultOpen();
|
|
14746
|
+
untracked(() => this.form.register(this.sectionId, abierta));
|
|
14747
|
+
}
|
|
14748
|
+
});
|
|
14749
|
+
}
|
|
14750
|
+
onAccOpenChange(openId) {
|
|
14751
|
+
if (!this.single())
|
|
14752
|
+
return;
|
|
14753
|
+
this.form.setOpen(openId ? this.sectionId : null);
|
|
14754
|
+
}
|
|
14755
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14756
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormSectionComponent, isStandalone: true, selector: "ius-form-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ius-form__section--plain": "!collapsible()", "class.ius-form__section--divided-acc": "collapsible() && variantEfectiva() === 'divided'", "attr.id": "sectionId" }, classAttribute: "ius-form__section" }, viewQueries: [{ propertyName: "cuerpo", first: true, predicate: ["cuerpo"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\r\n<ng-template #campos>\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\r\n <ng-content />\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\r\n<ng-template #cuerpo>\r\n @if (description()) {\r\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\r\n }\r\n <ng-container *ngTemplateOutlet=\"campos\" />\r\n</ng-template>\r\n\r\n@if (collapsible()) {\r\n <ius-accordion\r\n [variant]=\"variantEfectiva()\"\r\n [items]=\"items()\"\r\n [open]=\"accOpen()\"\r\n [defaultOpen]=\"accDefaultOpen()\"\r\n (openChange)=\"onAccOpenChange($event)\"\r\n />\r\n} @else {\r\n @if (title() || description()) {\r\n <div class=\"ius-form__section-head\">\r\n @if (title()) {\r\n <div class=\"ius-form__section-title\">\r\n @if (icon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n }\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (description()) {\r\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\r\n }\r\n </div>\r\n }\r\n <ng-container *ngTemplateOutlet=\"campos\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14757
|
+
}
|
|
14758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
14759
|
+
type: Component,
|
|
14760
|
+
args: [{ selector: 'ius-form-section', standalone: true, imports: [NgTemplateOutlet, AccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14761
|
+
class: 'ius-form__section',
|
|
14762
|
+
'[class.ius-form__section--plain]': '!collapsible()',
|
|
14763
|
+
'[class.ius-form__section--divided-acc]': "collapsible() && variantEfectiva() === 'divided'",
|
|
14764
|
+
'[attr.id]': 'sectionId',
|
|
14765
|
+
}, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\r\n<ng-template #campos>\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\r\n <ng-content />\r\n </div>\r\n</ng-template>\r\n\r\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\r\n<ng-template #cuerpo>\r\n @if (description()) {\r\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\r\n }\r\n <ng-container *ngTemplateOutlet=\"campos\" />\r\n</ng-template>\r\n\r\n@if (collapsible()) {\r\n <ius-accordion\r\n [variant]=\"variantEfectiva()\"\r\n [items]=\"items()\"\r\n [open]=\"accOpen()\"\r\n [defaultOpen]=\"accDefaultOpen()\"\r\n (openChange)=\"onAccOpenChange($event)\"\r\n />\r\n} @else {\r\n @if (title() || description()) {\r\n <div class=\"ius-form__section-head\">\r\n @if (title()) {\r\n <div class=\"ius-form__section-title\">\r\n @if (icon()) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n }\r\n {{ title() }}\r\n </div>\r\n }\r\n @if (description()) {\r\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\r\n }\r\n </div>\r\n }\r\n <ng-container *ngTemplateOutlet=\"campos\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"] }]
|
|
14766
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], cuerpo: [{ type: i0.ViewChild, args: ['cuerpo', { isSignal: true }] }] } });
|
|
14767
|
+
|
|
14768
|
+
/**
|
|
14769
|
+
* FormField — envoltorio de un campo en la rejilla del `ius-form` /
|
|
14770
|
+
* `ius-form-section`; `span="full"` cruza ambas columnas. Port de
|
|
14771
|
+
* `FormField` del golden `Form.jsx` (`.ius-form__field[data-span]`).
|
|
14772
|
+
*/
|
|
14773
|
+
class FormFieldComponent {
|
|
14774
|
+
constructor() {
|
|
14775
|
+
/** `1` (default) una columna · `full` ambas. */
|
|
14776
|
+
this.span = input(1, /* @ts-ignore */
|
|
14777
|
+
...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
|
|
14778
|
+
}
|
|
14779
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14780
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "ius-form-field", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-span": "span() === 'full' ? 'full' : null" }, classAttribute: "ius-form__field" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;min-width:0}:host([data-span=\"full\"]){grid-column:1 / -1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14781
|
+
}
|
|
14782
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
14783
|
+
type: Component,
|
|
14784
|
+
args: [{ selector: 'ius-form-field', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14785
|
+
class: 'ius-form__field',
|
|
14786
|
+
'[attr.data-span]': "span() === 'full' ? 'full' : null",
|
|
14787
|
+
}, styles: [":host{display:block;min-width:0}:host([data-span=\"full\"]){grid-column:1 / -1}\n"] }]
|
|
14788
|
+
}], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }] } });
|
|
14789
|
+
|
|
14790
|
+
/** Slot de acción a la derecha del título (TextButton, IconButton, ShowMore…). */
|
|
14791
|
+
class IusSectionTitleActionDirective {
|
|
14792
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusSectionTitleActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14793
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusSectionTitleActionDirective, isStandalone: true, selector: "[iusSectionTitleAction]", ngImport: i0 }); }
|
|
14794
|
+
}
|
|
14795
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusSectionTitleActionDirective, decorators: [{
|
|
14796
|
+
type: Directive,
|
|
14797
|
+
args: [{ selector: '[iusSectionTitleAction]', standalone: true }]
|
|
14798
|
+
}] });
|
|
14799
|
+
/**
|
|
14800
|
+
* SectionTitle — Ius Design v2 (familia layout).
|
|
14801
|
+
*
|
|
14802
|
+
* **Título de una sección de contenido**: encabezado display/bold con hairline
|
|
14803
|
+
* inferior opcional, ícono de ayuda opcional (abre `ius-popover` con título +
|
|
14804
|
+
* contenido) y slot de acción a la derecha (`[iusSectionTitleAction]`). Titula
|
|
14805
|
+
* bloques dentro de un panel, tarjeta o pestaña, en Sentence case.
|
|
14806
|
+
*
|
|
14807
|
+
* No confundir con `ius-section-header` (grupos de lista/árbol) ni con
|
|
14808
|
+
* `ius-page-header` (encabezado de la vista completa).
|
|
14809
|
+
*
|
|
14810
|
+
* Decisión del port (golden `SectionTitle.jsx`): `as` cambia la etiqueta raíz
|
|
14811
|
+
* en React; aquí el host es fijo (`ius-section-title`), así que `h2`–`h5` se
|
|
14812
|
+
* expresan como `role="heading"` + `aria-level` (misma semántica para AT).
|
|
14813
|
+
*/
|
|
14814
|
+
class SectionTitleComponent {
|
|
14815
|
+
constructor() {
|
|
14816
|
+
/** Contenido de ayuda. Si se pasa, aparece el ícono que abre el Popover. */
|
|
14817
|
+
this.help = input(undefined, /* @ts-ignore */
|
|
14818
|
+
...(ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []));
|
|
14819
|
+
/** Título (en negrita) del Popover de ayuda. */
|
|
14820
|
+
this.helpTitle = input(undefined, /* @ts-ignore */
|
|
14821
|
+
...(ngDevMode ? [{ debugName: "helpTitle" }] : /* istanbul ignore next */ []));
|
|
14822
|
+
/** Glifo Material Symbols del ícono de ayuda. Default `help`. */
|
|
14823
|
+
this.helpIcon = input('help', /* @ts-ignore */
|
|
14824
|
+
...(ngDevMode ? [{ debugName: "helpIcon" }] : /* istanbul ignore next */ []));
|
|
14825
|
+
/** Colocación del Popover de ayuda. Default `top`. */
|
|
14826
|
+
this.helpPlacement = input('top', /* @ts-ignore */
|
|
14827
|
+
...(ngDevMode ? [{ debugName: "helpPlacement" }] : /* istanbul ignore next */ []));
|
|
14828
|
+
/** Cómo se dispara el Popover de ayuda. Default `click`. */
|
|
14829
|
+
this.helpTrigger = input('click', /* @ts-ignore */
|
|
14830
|
+
...(ngDevMode ? [{ debugName: "helpTrigger" }] : /* istanbul ignore next */ []));
|
|
14831
|
+
/** Línea inferior (hairline) bajo el título. Default `true`. */
|
|
14832
|
+
this.divider = input(true, { ...(ngDevMode ? { debugName: "divider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14833
|
+
/** Trunca el título con elipsis en una línea. Default `false`. */
|
|
14834
|
+
this.truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14835
|
+
/** Escala. `small` = fs-sm · `medium` (default) = fs-base. */
|
|
14836
|
+
this.size = input('medium', /* @ts-ignore */
|
|
14837
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14838
|
+
/** Semántica del raíz. `div` (default) · `h2`–`h5`. */
|
|
14839
|
+
this.as = input('div', /* @ts-ignore */
|
|
14840
|
+
...(ngDevMode ? [{ debugName: "as" }] : /* istanbul ignore next */ []));
|
|
14841
|
+
this.headingRole = computed(() => (this.as() !== 'div' ? 'heading' : null), /* @ts-ignore */
|
|
14842
|
+
...(ngDevMode ? [{ debugName: "headingRole" }] : /* istanbul ignore next */ []));
|
|
14843
|
+
this.headingLevel = computed(() => {
|
|
14844
|
+
const as = this.as();
|
|
14845
|
+
return as === 'div' ? null : Number(as.slice(1));
|
|
14846
|
+
}, /* @ts-ignore */
|
|
14847
|
+
...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
14848
|
+
this.helpAriaLabel = computed(() => this.helpTitle() ?? 'Ayuda', /* @ts-ignore */
|
|
14849
|
+
...(ngDevMode ? [{ debugName: "helpAriaLabel" }] : /* istanbul ignore next */ []));
|
|
14850
|
+
}
|
|
14851
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14852
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SectionTitleComponent, isStandalone: true, selector: "ius-section-title", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpPlacement: { classPropertyName: "helpPlacement", publicName: "helpPlacement", isSignal: true, isRequired: false, transformFunction: null }, helpTrigger: { classPropertyName: "helpTrigger", publicName: "helpTrigger", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-divider": "divider() ? 'true' : null", "attr.data-truncate": "truncate() ? 'true' : null", "attr.role": "headingRole()", "attr.aria-level": "headingLevel()" }, classAttribute: "ius-section-title" }, ngImport: i0, template: "<span class=\"ius-section-title__label\"><ng-content /></span>\r\n\r\n@if (help() != null) {\r\n <ius-popover\r\n [title]=\"helpTitle()\"\r\n [content]=\"help()\"\r\n [placement]=\"helpPlacement()\"\r\n [trigger]=\"helpTrigger()\"\r\n >\r\n <span\r\n translate=\"no\"\r\n class=\"ius-icon ius-section-title__help\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"helpAriaLabel()\"\r\n >{{ helpIcon() }}</span\r\n >\r\n </ius-popover>\r\n}\r\n\r\n<span class=\"ius-section-title__action\"><ng-content select=\"[iusSectionTitleAction]\" /></span>\r\n", styles: ["@charset \"UTF-8\";:host{--_st-fs: var(--ius-fs-base);--_st-lh: var(--ius-lh-base);display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin:0;box-sizing:border-box;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_st-fs);line-height:var(--_st-lh);color:var(--ius-text-primary)}:host([data-size=small]){--_st-fs: var(--ius-fs-sm);--_st-lh: var(--ius-lh-sm)}:host([data-divider=true]){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-section-title__label{min-width:0}:host([data-truncate=true]) .ius-section-title__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-section-title__action{margin-left:auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-section-title__action:empty{display:none}.ius-section-title__help{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-section-title__help:hover{color:var(--ius-text-secondary)}.ius-section-title__help:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14853
|
+
}
|
|
14854
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
14855
|
+
type: Component,
|
|
14856
|
+
args: [{ selector: 'ius-section-title', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14857
|
+
class: 'ius-section-title',
|
|
14858
|
+
'[attr.data-size]': 'size()',
|
|
14859
|
+
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
14860
|
+
'[attr.data-truncate]': "truncate() ? 'true' : null",
|
|
14861
|
+
// `as` es palabra reservada en expresiones de plantilla → se lee vía computed.
|
|
14862
|
+
'[attr.role]': 'headingRole()',
|
|
14863
|
+
'[attr.aria-level]': 'headingLevel()',
|
|
14864
|
+
}, template: "<span class=\"ius-section-title__label\"><ng-content /></span>\r\n\r\n@if (help() != null) {\r\n <ius-popover\r\n [title]=\"helpTitle()\"\r\n [content]=\"help()\"\r\n [placement]=\"helpPlacement()\"\r\n [trigger]=\"helpTrigger()\"\r\n >\r\n <span\r\n translate=\"no\"\r\n class=\"ius-icon ius-section-title__help\"\r\n tabindex=\"0\"\r\n role=\"button\"\r\n [attr.aria-label]=\"helpAriaLabel()\"\r\n >{{ helpIcon() }}</span\r\n >\r\n </ius-popover>\r\n}\r\n\r\n<span class=\"ius-section-title__action\"><ng-content select=\"[iusSectionTitleAction]\" /></span>\r\n", styles: ["@charset \"UTF-8\";:host{--_st-fs: var(--ius-fs-base);--_st-lh: var(--ius-lh-base);display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin:0;box-sizing:border-box;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_st-fs);line-height:var(--_st-lh);color:var(--ius-text-primary)}:host([data-size=small]){--_st-fs: var(--ius-fs-sm);--_st-lh: var(--ius-lh-sm)}:host([data-divider=true]){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-section-title__label{min-width:0}:host([data-truncate=true]) .ius-section-title__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-section-title__action{margin-left:auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-section-title__action:empty{display:none}.ius-section-title__help{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-section-title__help:hover{color:var(--ius-text-secondary)}.ius-section-title__help:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
14865
|
+
}], propDecorators: { help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], helpTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTitle", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPlacement", required: false }] }], helpTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTrigger", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }] } });
|
|
14866
|
+
|
|
14867
|
+
/**
|
|
14868
|
+
* Breadcrumb — Ius Design v2 (familia navigation).
|
|
14869
|
+
*
|
|
14870
|
+
* Rastro de **navegación jerárquica** (Cliente › Expediente › Proceso ›
|
|
14871
|
+
* Actuación). Cada nivel es un enlace (o botón) salvo el último, que es la
|
|
14872
|
+
* página actual (`aria-current="page"`, navy `primary-900`, peso medio).
|
|
14873
|
+
* Separador chevron o slash; con `maxItems` los niveles intermedios se pliegan
|
|
14874
|
+
* en un menú "…" (`ius-popover` por clic). Para secciones paralelas → Tabs.
|
|
14875
|
+
*
|
|
14876
|
+
* Decisiones del port (golden `Breadcrumb.jsx` / `.d.ts`):
|
|
14877
|
+
* - `item.onClick` del golden no existe: toda navegación (crumbs y menú "…")
|
|
14878
|
+
* sale por el output `navigate` `{ item, index, event }`; el consumidor hace
|
|
14879
|
+
* `event.preventDefault()` si enruta por SPA.
|
|
14880
|
+
* - El menú "…" compone `ius-popover` (trigger click, controlado con `open`)
|
|
14881
|
+
* y se cierra al elegir un nivel.
|
|
14882
|
+
*/
|
|
14883
|
+
class BreadcrumbComponent {
|
|
14884
|
+
constructor() {
|
|
14885
|
+
/** Niveles, de la raíz (izquierda) a la página actual (derecha). */
|
|
14886
|
+
this.items = input([], /* @ts-ignore */
|
|
14887
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
14888
|
+
/** Separador entre crumbs. Default `chevron`. */
|
|
14889
|
+
this.separator = input('chevron', /* @ts-ignore */
|
|
14890
|
+
...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
14891
|
+
/** Tamaño. `small` · `medium` (default). */
|
|
14892
|
+
this.size = input('medium', /* @ts-ignore */
|
|
14893
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14894
|
+
/** Si > 0 y hay más de `maxItems` crumbs, colapsa los del medio en un menú "…". */
|
|
14895
|
+
this.maxItems = input(0, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14896
|
+
/** Crumbs visibles al inicio cuando se colapsa. Default 1. */
|
|
14897
|
+
this.itemsBeforeCollapse = input(1, { ...(ngDevMode ? { debugName: "itemsBeforeCollapse" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14898
|
+
/** Crumbs visibles al final cuando se colapsa. Default 2. */
|
|
14899
|
+
this.itemsAfterCollapse = input(2, { ...(ngDevMode ? { debugName: "itemsAfterCollapse" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14900
|
+
/** Etiqueta accesible del `<nav>`. Default `Ruta de navegación`. */
|
|
14901
|
+
this.ariaLabel = input('Ruta de navegación', /* @ts-ignore */
|
|
14902
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
14903
|
+
/** Navegación de cualquier crumb, también desde el menú "…" (`onNavigate`). */
|
|
14904
|
+
this.navigate = output();
|
|
14905
|
+
/** Apertura del menú "…" (controlada para cerrarlo al elegir un nivel). */
|
|
14906
|
+
this.moreOpen = signal(false, /* @ts-ignore */
|
|
14907
|
+
...(ngDevMode ? [{ debugName: "moreOpen" }] : /* istanbul ignore next */ []));
|
|
14908
|
+
this.total = computed(() => this.items().length, /* @ts-ignore */
|
|
14909
|
+
...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
14910
|
+
/** Todos los crumbs, o cabeza + "…" + cola cuando se colapsa. */
|
|
14911
|
+
this.rendered = computed(() => {
|
|
14912
|
+
const items = this.items();
|
|
14913
|
+
const total = items.length;
|
|
14914
|
+
const max = this.maxItems();
|
|
14915
|
+
const before = this.itemsBeforeCollapse();
|
|
14916
|
+
const after = this.itemsAfterCollapse();
|
|
14917
|
+
const collapse = max > 0 && total > max && total > before + after;
|
|
14918
|
+
if (!collapse)
|
|
14919
|
+
return items.map((item, index) => ({ kind: 'crumb', item, index }));
|
|
14920
|
+
const head = items.slice(0, before).map((item, index) => ({ kind: 'crumb', item, index }));
|
|
14921
|
+
const tail = items
|
|
14922
|
+
.slice(total - after)
|
|
14923
|
+
.map((item, i) => ({ kind: 'crumb', item, index: total - after + i }));
|
|
14924
|
+
const hidden = items.slice(before, total - after).map((item, i) => ({ item, index: before + i }));
|
|
14925
|
+
return [...head, { kind: 'more', hidden }, ...tail];
|
|
14926
|
+
}, /* @ts-ignore */
|
|
14927
|
+
...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
|
|
14928
|
+
}
|
|
14929
|
+
isCurrent(index) {
|
|
14930
|
+
return index === this.total() - 1;
|
|
14931
|
+
}
|
|
14932
|
+
onCrumb(item, index, event) {
|
|
14933
|
+
this.navigate.emit({ item, index, event });
|
|
14934
|
+
}
|
|
14935
|
+
onHidden(item, index, event) {
|
|
14936
|
+
this.navigate.emit({ item, index, event });
|
|
14937
|
+
this.moreOpen.set(false);
|
|
14938
|
+
}
|
|
14939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14940
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BreadcrumbComponent, isStandalone: true, selector: "ius-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\">\r\n <ol class=\"ius-bc\" [attr.data-size]=\"size() !== 'medium' ? size() : null\">\r\n @for (entry of rendered(); track $index; let i = $index) {\r\n @if (i > 0) {\r\n <li class=\"ius-bc__item\" aria-hidden=\"true\">\r\n @if (separator() === 'slash') {\r\n <span class=\"ius-bc__sep ius-bc__sep--slash\">/</span>\r\n } @else {\r\n <span class=\"ius-bc__sep\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </li>\r\n }\r\n\r\n @if (entry.kind === 'more') {\r\n <li class=\"ius-bc__item\">\r\n <ius-popover\r\n placement=\"bottom\"\r\n trigger=\"click\"\r\n [showArrow]=\"true\"\r\n padding=\"compact\"\r\n [open]=\"moreOpen()\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n <button type=\"button\" class=\"ius-bc__more\" aria-label=\"Mostrar ruta oculta\">\r\n <span translate=\"no\" class=\"ius-icon\">more_horiz</span>\r\n </button>\r\n <div iusPopoverContent class=\"ius-bc__menu\">\r\n @for (h of entry.hidden; track h.index) {\r\n <button type=\"button\" class=\"ius-bc__menu-item\" (click)=\"onHidden(h.item, h.index, $event)\">\r\n @if (h.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ h.item.icon }}</span>\r\n }\r\n <span>{{ h.item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ius-popover>\r\n </li>\r\n } @else {\r\n <li class=\"ius-bc__item\">\r\n @if (isCurrent(entry.index)) {\r\n <span class=\"ius-bc__crumb\" aria-current=\"page\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </span>\r\n } @else if (entry.item.href) {\r\n <a class=\"ius-bc__crumb\" [href]=\"entry.item.href\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </a>\r\n } @else {\r\n <button type=\"button\" class=\"ius-bc__crumb\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </button>\r\n }\r\n </li>\r\n }\r\n }\r\n </ol>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-bc{-webkit-user-select:none;user-select:none;--_bc-fs: var(--ius-fs-base);--_bc-lh: var(--ius-lh-base);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xs);display:flex;align-items:center;flex-wrap:wrap;font-family:var(--ius-font-body);margin:0;padding:0;list-style:none}.ius-bc[data-size=small]{--_bc-fs: var(--ius-fs-sm);--_bc-lh: var(--ius-lh-sm);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xxs)}.ius-bc__item{display:inline-flex;align-items:center}.ius-bc__crumb{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);margin:0;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;gap:var(--_bc-gap);font-family:inherit;font-size:var(--_bc-fs);line-height:var(--_bc-lh);font-weight:var(--ius-fw-regular);color:var(--ius-text-secondary);text-decoration:none;cursor:pointer;max-width:220px;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__crumb .ius-bc__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-bc__crumb .ius-icon{font-size:var(--_bc-icon);line-height:1;flex:0 0 auto}a.ius-bc__crumb:hover,button.ius-bc__crumb:hover{color:var(--ius-primary-500)}a.ius-bc__crumb:focus-visible,button.ius-bc__crumb:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__crumb[aria-current=page]{color:var(--ius-primary-900);font-weight:var(--ius-fw-medium);cursor:default}.ius-bc__sep{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-6);margin:0 var(--ius-space-xxs);-webkit-user-select:none;user-select:none}.ius-bc__sep .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__sep--slash{font-size:var(--_bc-fs);line-height:var(--_bc-lh)}.ius-bc__more{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;color:var(--ius-text-secondary);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__more:hover{color:var(--ius-primary-500);background:var(--ius-neutral-2)}.ius-bc__more:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__more .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:160px}.ius-bc__menu-item{appearance:none;border:0;background:transparent;text-align:left;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);cursor:pointer;white-space:nowrap}.ius-bc__menu-item:hover{background:var(--ius-info-100);color:var(--ius-primary-900)}.ius-bc__menu-item .ius-icon{font-size:var(--ius-icon-md);line-height:1;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-bc__menu-item:hover .ius-icon{color:var(--ius-primary-700)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14941
|
+
}
|
|
14942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
14943
|
+
type: Component,
|
|
14944
|
+
args: [{ selector: 'ius-breadcrumb', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel()\">\r\n <ol class=\"ius-bc\" [attr.data-size]=\"size() !== 'medium' ? size() : null\">\r\n @for (entry of rendered(); track $index; let i = $index) {\r\n @if (i > 0) {\r\n <li class=\"ius-bc__item\" aria-hidden=\"true\">\r\n @if (separator() === 'slash') {\r\n <span class=\"ius-bc__sep ius-bc__sep--slash\">/</span>\r\n } @else {\r\n <span class=\"ius-bc__sep\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\r\n }\r\n </li>\r\n }\r\n\r\n @if (entry.kind === 'more') {\r\n <li class=\"ius-bc__item\">\r\n <ius-popover\r\n placement=\"bottom\"\r\n trigger=\"click\"\r\n [showArrow]=\"true\"\r\n padding=\"compact\"\r\n [open]=\"moreOpen()\"\r\n (openChange)=\"moreOpen.set($event)\"\r\n >\r\n <button type=\"button\" class=\"ius-bc__more\" aria-label=\"Mostrar ruta oculta\">\r\n <span translate=\"no\" class=\"ius-icon\">more_horiz</span>\r\n </button>\r\n <div iusPopoverContent class=\"ius-bc__menu\">\r\n @for (h of entry.hidden; track h.index) {\r\n <button type=\"button\" class=\"ius-bc__menu-item\" (click)=\"onHidden(h.item, h.index, $event)\">\r\n @if (h.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ h.item.icon }}</span>\r\n }\r\n <span>{{ h.item.label }}</span>\r\n </button>\r\n }\r\n </div>\r\n </ius-popover>\r\n </li>\r\n } @else {\r\n <li class=\"ius-bc__item\">\r\n @if (isCurrent(entry.index)) {\r\n <span class=\"ius-bc__crumb\" aria-current=\"page\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </span>\r\n } @else if (entry.item.href) {\r\n <a class=\"ius-bc__crumb\" [href]=\"entry.item.href\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </a>\r\n } @else {\r\n <button type=\"button\" class=\"ius-bc__crumb\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\r\n @if (entry.item.icon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\r\n }\r\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\r\n </button>\r\n }\r\n </li>\r\n }\r\n }\r\n </ol>\r\n</nav>\r\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-bc{-webkit-user-select:none;user-select:none;--_bc-fs: var(--ius-fs-base);--_bc-lh: var(--ius-lh-base);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xs);display:flex;align-items:center;flex-wrap:wrap;font-family:var(--ius-font-body);margin:0;padding:0;list-style:none}.ius-bc[data-size=small]{--_bc-fs: var(--ius-fs-sm);--_bc-lh: var(--ius-lh-sm);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xxs)}.ius-bc__item{display:inline-flex;align-items:center}.ius-bc__crumb{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);margin:0;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;gap:var(--_bc-gap);font-family:inherit;font-size:var(--_bc-fs);line-height:var(--_bc-lh);font-weight:var(--ius-fw-regular);color:var(--ius-text-secondary);text-decoration:none;cursor:pointer;max-width:220px;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__crumb .ius-bc__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-bc__crumb .ius-icon{font-size:var(--_bc-icon);line-height:1;flex:0 0 auto}a.ius-bc__crumb:hover,button.ius-bc__crumb:hover{color:var(--ius-primary-500)}a.ius-bc__crumb:focus-visible,button.ius-bc__crumb:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__crumb[aria-current=page]{color:var(--ius-primary-900);font-weight:var(--ius-fw-medium);cursor:default}.ius-bc__sep{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-6);margin:0 var(--ius-space-xxs);-webkit-user-select:none;user-select:none}.ius-bc__sep .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__sep--slash{font-size:var(--_bc-fs);line-height:var(--_bc-lh)}.ius-bc__more{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;color:var(--ius-text-secondary);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__more:hover{color:var(--ius-primary-500);background:var(--ius-neutral-2)}.ius-bc__more:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__more .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:160px}.ius-bc__menu-item{appearance:none;border:0;background:transparent;text-align:left;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);cursor:pointer;white-space:nowrap}.ius-bc__menu-item:hover{background:var(--ius-info-100);color:var(--ius-primary-900)}.ius-bc__menu-item .ius-icon{font-size:var(--ius-icon-md);line-height:1;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-bc__menu-item:hover .ius-icon{color:var(--ius-primary-700)}\n"] }]
|
|
14945
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
14946
|
+
|
|
14272
14947
|
/*
|
|
14273
14948
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
14274
14949
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -14280,5 +14955,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14280
14955
|
* Generated bundle index. Do not edit.
|
|
14281
14956
|
*/
|
|
14282
14957
|
|
|
14283
|
-
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SplitterComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
14958
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, BreadcrumbComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusFormFooterDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SplitterComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
14284
14959
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|