@litigiovirtual/ius-design-components 2.0.2 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +14 -14
- package/fesm2022/litigiovirtual-ius-design-components-utils.mjs.map +1 -1
- package/fesm2022/litigiovirtual-ius-design-components.mjs +2184 -102
- package/fesm2022/litigiovirtual-ius-design-components.mjs.map +1 -1
- package/package.json +1 -1
- package/types/litigiovirtual-ius-design-components.d.ts +1351 -26
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, signal, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, inject, NgZone, ElementRef, numberAttribute, ViewChild, ViewContainerRef, forwardRef, computed, viewChildren, input, output, effect, DestroyRef, Directive, contentChild, isDevMode, linkedSignal, TemplateRef, PLATFORM_ID, viewChild, ContentChild, HostListener } from '@angular/core';
|
|
2
|
+
import { EventEmitter, signal, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, inject, NgZone, ElementRef, numberAttribute, ViewChild, ViewContainerRef, forwardRef, computed, viewChildren, input, output, effect, DestroyRef, Directive, contentChild, isDevMode, linkedSignal, TemplateRef, PLATFORM_ID, viewChild, ContentChild, HostListener, afterRenderEffect } from '@angular/core';
|
|
3
3
|
import { Overlay } from '@angular/cdk/overlay';
|
|
4
4
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
5
5
|
import { Subscription } from 'rxjs';
|
|
6
|
-
import
|
|
6
|
+
import * as i1$1 from '@angular/forms';
|
|
7
|
+
import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
7
8
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
8
9
|
import { NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
|
|
9
10
|
import * as i1 from '@angular/cdk/a11y';
|
|
@@ -1026,7 +1027,7 @@ class PopoverComponent {
|
|
|
1026
1027
|
}
|
|
1027
1028
|
}
|
|
1028
1029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PopoverComponent, isStandalone: true, selector: "ius-popover", inputs: { title: "title", content: "content", placement: "placement", trigger: "trigger", offset: ["offset", "offset", numberAttribute], open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], anchorRect: "anchorRect", padding: "padding", dismissable: ["dismissable", "dismissable", booleanAttribute], panelClass: "panelClass" }, outputs: { openChange: "openChange" }, host: { listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "focusin": "onHostFocusIn()", "focusout": "onHostFocusOut()", "click": "onHostClick()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PopoverComponent, isStandalone: true, selector: "ius-popover", inputs: { title: "title", content: "content", placement: "placement", trigger: "trigger", offset: ["offset", "offset", numberAttribute], open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], anchorRect: "anchorRect", padding: "padding", dismissable: ["dismissable", "dismissable", booleanAttribute], panelClass: "panelClass" }, outputs: { openChange: "openChange" }, host: { listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "focusin": "onHostFocusIn()", "focusout": "onHostFocusOut()", "click": "onHostClick()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}.ius-popover.ius-dropdown-pop{padding:var(--ius-space-xxs)}.ius-popover.ius-querybuilder-pop{max-width:none;width:min(720px,100vw - var(--ius-space-2xl));padding:var(--ius-space-md)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1030
1031
|
}
|
|
1031
1032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
1032
1033
|
type: Component,
|
|
@@ -1036,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1036
1037
|
'(focusin)': 'onHostFocusIn()',
|
|
1037
1038
|
'(focusout)': 'onHostFocusOut()',
|
|
1038
1039
|
'(click)': 'onHostClick()',
|
|
1039
|
-
}, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}\n"] }]
|
|
1040
|
+
}, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}.ius-popover.ius-dropdown-pop{padding:var(--ius-space-xxs)}.ius-popover.ius-querybuilder-pop{max-width:none;width:min(720px,100vw - var(--ius-space-2xl));padding:var(--ius-space-md)}\n"] }]
|
|
1040
1041
|
}], propDecorators: { title: [{
|
|
1041
1042
|
type: Input
|
|
1042
1043
|
}], content: [{
|
|
@@ -1288,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1288
1289
|
type: Output
|
|
1289
1290
|
}] } });
|
|
1290
1291
|
|
|
1291
|
-
let uid$
|
|
1292
|
+
let uid$a = 0;
|
|
1292
1293
|
/**
|
|
1293
1294
|
* TextField — Ius Design v2.
|
|
1294
1295
|
*
|
|
@@ -1327,7 +1328,7 @@ class TextFieldComponent {
|
|
|
1327
1328
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1328
1329
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1329
1330
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1330
|
-
this.inputId = `ius-tf-${uid$
|
|
1331
|
+
this.inputId = `ius-tf-${uid$a++}`;
|
|
1331
1332
|
this.helpId = `${this.inputId}-help`;
|
|
1332
1333
|
this.onChange = () => { };
|
|
1333
1334
|
this.onTouched = () => { };
|
|
@@ -1466,7 +1467,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1466
1467
|
type: Output
|
|
1467
1468
|
}] } });
|
|
1468
1469
|
|
|
1469
|
-
let uid$
|
|
1470
|
+
let uid$9 = 0;
|
|
1470
1471
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1471
1472
|
function toChars(str, length) {
|
|
1472
1473
|
const out = new Array(length).fill('');
|
|
@@ -1526,7 +1527,7 @@ class CodeFieldComponent {
|
|
|
1526
1527
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1527
1528
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1528
1529
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1529
|
-
this.baseId = `ius-cf-${uid$
|
|
1530
|
+
this.baseId = `ius-cf-${uid$9++}`;
|
|
1530
1531
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1531
1532
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1532
1533
|
this.onChange = () => { };
|
|
@@ -1845,7 +1846,7 @@ const SIZES$1 = {
|
|
|
1845
1846
|
large: { d: 34, s: 4.5 },
|
|
1846
1847
|
};
|
|
1847
1848
|
/** Arco (fuerte) + track (tinte claro de la misma familia) por tono. */
|
|
1848
|
-
const TONE_VARS$
|
|
1849
|
+
const TONE_VARS$2 = {
|
|
1849
1850
|
primary: { arc: 'var(--ius-primary-900)', trk: 'var(--ius-primary-100)' },
|
|
1850
1851
|
info: { arc: 'var(--ius-info-500)', trk: 'var(--ius-info-100)' },
|
|
1851
1852
|
success: { arc: 'var(--ius-success-600)', trk: 'var(--ius-success-100)' },
|
|
@@ -1899,7 +1900,7 @@ class CountdownRingComponent {
|
|
|
1899
1900
|
...(ngDevMode ? [{ debugName: "dim" }] : /* istanbul ignore next */ []));
|
|
1900
1901
|
this.ringR = computed(() => (this.dim().d - this.dim().s) / 2, /* @ts-ignore */
|
|
1901
1902
|
...(ngDevMode ? [{ debugName: "ringR" }] : /* istanbul ignore next */ []));
|
|
1902
|
-
this.toneVars = computed(() => TONE_VARS$
|
|
1903
|
+
this.toneVars = computed(() => TONE_VARS$2[this.tone()] ?? TONE_VARS$2.primary, /* @ts-ignore */
|
|
1903
1904
|
...(ngDevMode ? [{ debugName: "toneVars" }] : /* istanbul ignore next */ []));
|
|
1904
1905
|
/** Fracción transcurrida 0→1 (controlada o del reloj interno). */
|
|
1905
1906
|
this.elapsed = computed(() => {
|
|
@@ -2420,7 +2421,7 @@ const SIZE_MAP = {
|
|
|
2420
2421
|
medium: 96,
|
|
2421
2422
|
large: 140,
|
|
2422
2423
|
};
|
|
2423
|
-
let uid$
|
|
2424
|
+
let uid$8 = 0;
|
|
2424
2425
|
/**
|
|
2425
2426
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2426
2427
|
*
|
|
@@ -2445,7 +2446,7 @@ class IllustrationComponent {
|
|
|
2445
2446
|
constructor() {
|
|
2446
2447
|
this.sanitizer = inject(DomSanitizer);
|
|
2447
2448
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2448
|
-
this.instanceId = `i${uid$
|
|
2449
|
+
this.instanceId = `i${uid$8++}`;
|
|
2449
2450
|
this._size = 'medium';
|
|
2450
2451
|
this.viewBox = '0 0 110 110';
|
|
2451
2452
|
this.safeInner = '';
|
|
@@ -2504,7 +2505,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2504
2505
|
type: Input
|
|
2505
2506
|
}] } });
|
|
2506
2507
|
|
|
2507
|
-
let uid$
|
|
2508
|
+
let uid$7 = 0;
|
|
2508
2509
|
/**
|
|
2509
2510
|
* Checkbox — Ius Design v2.
|
|
2510
2511
|
*
|
|
@@ -2543,7 +2544,7 @@ class CheckboxComponent {
|
|
|
2543
2544
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2544
2545
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2545
2546
|
this.checkedChange = new EventEmitter();
|
|
2546
|
-
this.inputId = `ius-cbx-${uid$
|
|
2547
|
+
this.inputId = `ius-cbx-${uid$7++}`;
|
|
2547
2548
|
this.onChange = () => { };
|
|
2548
2549
|
this.onTouched = () => { };
|
|
2549
2550
|
}
|
|
@@ -2614,7 +2615,7 @@ class CheckboxComponent {
|
|
|
2614
2615
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
2615
2616
|
multi: true,
|
|
2616
2617
|
},
|
|
2617
|
-
], ngImport: i0, template: "<label class=\"ius-cbx__inner\" [attr.data-label-position]=\"labelPosition\">\
|
|
2618
|
+
], ngImport: i0, template: "<label class=\"ius-cbx__inner\" [attr.data-label-position]=\"labelPosition\">\n <!-- Input primero + ctrl inmediatamente despu\u00E9s: el halo de foco usa el\n selector adyacente `.ius-cbx__input:focus-visible + .ius-cbx__ctrl`, as\u00ED\n que el orden DOM se fija aqu\u00ED y la posici\u00F3n visual del label la resuelve\n `order` en el SCSS (labelPosition left/right). -->\n <input\n [id]=\"inputId\"\n class=\"ius-cbx__input\"\n type=\"checkbox\"\n [name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onToggle()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-cbx__ctrl\" aria-hidden=\"true\">\n <span class=\"ius-cbx__box\">\n <span class=\"ius-cbx__check\">\n <span class=\"ius-icon\">{{ glyph }}</span>\n </span>\n </span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-cbx__label\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <span\n class=\"ius-cbx__help\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n [attr.title]=\"helpIconTitle\"\n (click)=\"$event.preventDefault()\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n }\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_cbx-size: 20px;--_cbx-halo: 38px;--_cbx-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_cbx-size: 16px;--_cbx-halo: 32px;--_cbx-fs: var(--ius-fs-base)}:host([data-size=large]){--_cbx-size: 24px;--_cbx-halo: var(--ius-hit-target-min, 44px);--_cbx-fs: var(--ius-fs-lg)}.ius-cbx__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_cbx-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-cbx__inner[data-label-position=left] .ius-cbx__label{order:-1}:host([data-disabled=true]) .ius-cbx__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-cbx__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-cbx__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-cbx__ctrl:before{content:\"\";position:absolute;width:var(--_cbx-halo);height:var(--_cbx-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-cbx__box{position:relative;z-index:1;width:var(--_cbx-size);height:var(--_cbx-size);border-radius:var(--ius-radius-sm);background:var(--ius-neutral-3);border:1.5px solid transparent;display:grid;place-items:center;color:var(--ius-neutral-white);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-cbx__check{display:inline-flex;opacity:0}.ius-cbx__check .ius-icon{font-size:calc(var(--_cbx-size) - 4px);line-height:1}.ius-cbx__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-cbx__help{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-cbx__help .ius-icon{font-size:calc(var(--_cbx-fs) + 4px);line-height:1}:host([data-disabled=true]) .ius-cbx__help{color:var(--ius-text-disabled)}:host(:hover) .ius-cbx__ctrl:before,:host([data-force=hover]) .ius-cbx__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-cbx__ctrl:before,:host([data-force=pressed]) .ius-cbx__ctrl:before,:host([data-force=focused]) .ius-cbx__ctrl:before,.ius-cbx__input:focus-visible+.ius-cbx__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-indeterminate=true]):not([data-disabled=true]):hover) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true]):not([data-disabled=true]):active) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=hover]) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=pressed]) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=focused]) .ius-cbx__box,.ius-cbx__input:focus-visible+.ius-cbx__ctrl .ius-cbx__box{background:var(--ius-neutral-white);border-color:var(--ius-stroke-strong)}:host([data-checked=true]) .ius-cbx__box,:host([data-indeterminate=true]) .ius-cbx__box{background:var(--ius-primary-900);border-color:transparent}:host([data-checked=true]) .ius-cbx__check,:host([data-indeterminate=true]) .ius-cbx__check{opacity:1}:host([data-disabled=true]) .ius-cbx__box{background:transparent;border-color:var(--ius-stroke)}:host([data-disabled=true][data-checked=true]) .ius-cbx__box,:host([data-disabled=true][data-indeterminate=true]) .ius-cbx__box{background:var(--ius-neutral-3);border-color:transparent;color:var(--ius-neutral-white)}:host([data-disabled=true]) .ius-cbx__ctrl:before{background:transparent!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2618
2619
|
}
|
|
2619
2620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
2620
2621
|
type: Component,
|
|
@@ -2630,7 +2631,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2630
2631
|
'[attr.data-checked]': "checked ? 'true' : null",
|
|
2631
2632
|
'[attr.data-indeterminate]': "indeterminate ? 'true' : null",
|
|
2632
2633
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
2633
|
-
}, template: "<label class=\"ius-cbx__inner\" [attr.data-label-position]=\"labelPosition\">\
|
|
2634
|
+
}, template: "<label class=\"ius-cbx__inner\" [attr.data-label-position]=\"labelPosition\">\n <!-- Input primero + ctrl inmediatamente despu\u00E9s: el halo de foco usa el\n selector adyacente `.ius-cbx__input:focus-visible + .ius-cbx__ctrl`, as\u00ED\n que el orden DOM se fija aqu\u00ED y la posici\u00F3n visual del label la resuelve\n `order` en el SCSS (labelPosition left/right). -->\n <input\n [id]=\"inputId\"\n class=\"ius-cbx__input\"\n type=\"checkbox\"\n [name]=\"name\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [indeterminate]=\"indeterminate\"\n [disabled]=\"disabled\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"onToggle()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-cbx__ctrl\" aria-hidden=\"true\">\n <span class=\"ius-cbx__box\">\n <span class=\"ius-cbx__check\">\n <span class=\"ius-icon\">{{ glyph }}</span>\n </span>\n </span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-cbx__label\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <span\n class=\"ius-cbx__help\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n [attr.title]=\"helpIconTitle\"\n (click)=\"$event.preventDefault()\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n }\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_cbx-size: 20px;--_cbx-halo: 38px;--_cbx-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_cbx-size: 16px;--_cbx-halo: 32px;--_cbx-fs: var(--ius-fs-base)}:host([data-size=large]){--_cbx-size: 24px;--_cbx-halo: var(--ius-hit-target-min, 44px);--_cbx-fs: var(--ius-fs-lg)}.ius-cbx__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_cbx-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-cbx__inner[data-label-position=left] .ius-cbx__label{order:-1}:host([data-disabled=true]) .ius-cbx__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-cbx__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-cbx__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-cbx__ctrl:before{content:\"\";position:absolute;width:var(--_cbx-halo);height:var(--_cbx-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-cbx__box{position:relative;z-index:1;width:var(--_cbx-size);height:var(--_cbx-size);border-radius:var(--ius-radius-sm);background:var(--ius-neutral-3);border:1.5px solid transparent;display:grid;place-items:center;color:var(--ius-neutral-white);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-cbx__check{display:inline-flex;opacity:0}.ius-cbx__check .ius-icon{font-size:calc(var(--_cbx-size) - 4px);line-height:1}.ius-cbx__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-cbx__help{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-cbx__help .ius-icon{font-size:calc(var(--_cbx-fs) + 4px);line-height:1}:host([data-disabled=true]) .ius-cbx__help{color:var(--ius-text-disabled)}:host(:hover) .ius-cbx__ctrl:before,:host([data-force=hover]) .ius-cbx__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-cbx__ctrl:before,:host([data-force=pressed]) .ius-cbx__ctrl:before,:host([data-force=focused]) .ius-cbx__ctrl:before,.ius-cbx__input:focus-visible+.ius-cbx__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-indeterminate=true]):not([data-disabled=true]):hover) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true]):not([data-disabled=true]):active) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=hover]) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=pressed]) .ius-cbx__box,:host(:not([data-checked=true]):not([data-indeterminate=true])[data-force=focused]) .ius-cbx__box,.ius-cbx__input:focus-visible+.ius-cbx__ctrl .ius-cbx__box{background:var(--ius-neutral-white);border-color:var(--ius-stroke-strong)}:host([data-checked=true]) .ius-cbx__box,:host([data-indeterminate=true]) .ius-cbx__box{background:var(--ius-primary-900);border-color:transparent}:host([data-checked=true]) .ius-cbx__check,:host([data-indeterminate=true]) .ius-cbx__check{opacity:1}:host([data-disabled=true]) .ius-cbx__box{background:transparent;border-color:var(--ius-stroke)}:host([data-disabled=true][data-checked=true]) .ius-cbx__box,:host([data-disabled=true][data-indeterminate=true]) .ius-cbx__box{background:var(--ius-neutral-3);border-color:transparent;color:var(--ius-neutral-white)}:host([data-disabled=true]) .ius-cbx__ctrl:before{background:transparent!important}\n"] }]
|
|
2634
2635
|
}], propDecorators: { label: [{
|
|
2635
2636
|
type: Input
|
|
2636
2637
|
}], labelPosition: [{
|
|
@@ -2790,7 +2791,7 @@ class AvatarComponent {
|
|
|
2790
2791
|
}
|
|
2791
2792
|
}
|
|
2792
2793
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2793
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarComponent, isStandalone: true, selector: "ius-avatar", inputs: { alt: "alt", name: "name", monogram: "monogram", icon: "icon", shape: "shape", size: "size", color: "color", editable: ["editable", "editable", booleanAttribute], editIcon: "editIcon", ariaLabel: "ariaLabel", src: "src" }, outputs: { edit: "edit" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-color": "variant === 'photo' ? null : resolvedColor", "attr.data-variant": "variant", "attr.data-editable": "editable ? 'true' : null", "attr.role": "hostRole", "attr.tabindex": "editable ? 0 : null", "attr.aria-label": "hostAriaLabel" }, classAttribute: "ius-avt" }, ngImport: i0, template: "@if (variant === 'photo') {\
|
|
2794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarComponent, isStandalone: true, selector: "ius-avatar", inputs: { alt: "alt", name: "name", monogram: "monogram", icon: "icon", shape: "shape", size: "size", color: "color", editable: ["editable", "editable", booleanAttribute], editIcon: "editIcon", ariaLabel: "ariaLabel", src: "src" }, outputs: { edit: "edit" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-color": "variant === 'photo' ? null : resolvedColor", "attr.data-variant": "variant", "attr.data-editable": "editable ? 'true' : null", "attr.role": "hostRole", "attr.tabindex": "editable ? 0 : null", "attr.aria-label": "hostAriaLabel" }, classAttribute: "ius-avt" }, ngImport: i0, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:600;font-size:var(--_avt-initials);line-height:1;letter-spacing:.01em;color:var(--_avt-fg);background:var(--_avt-bg);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-shape=square]){--_avt-radius: var(--ius-radius-lg)}:host([data-shape=square-outline]){--_avt-radius: var(--ius-radius-lg)}:host([data-size=xsmall]){--_avt-size: 24px;--_avt-initials: 10px;--_avt-glyph: 14px}:host([data-size=small]){--_avt-size: 32px;--_avt-initials: var(--ius-fs-sm);--_avt-glyph: var(--ius-icon-sm)}:host([data-size=large]){--_avt-size: 64px;--_avt-initials: 24px;--_avt-glyph: 34px}:host([data-color=info]){--_avt-bg: var(--ius-info-100);--_avt-fg: var(--ius-info-700)}:host([data-color=primary]){--_avt-bg: var(--ius-primary-100);--_avt-fg: var(--ius-primary-700)}:host([data-color=success]){--_avt-bg: var(--ius-success-100);--_avt-fg: var(--ius-success-800)}:host([data-color=warning]){--_avt-bg: var(--ius-warning-100);--_avt-fg: var(--ius-warning-800)}:host([data-color=danger]){--_avt-bg: var(--ius-danger-100);--_avt-fg: var(--ius-danger-700)}:host([data-color=neutral]){--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9)}:host([data-color=durazno]){--_avt-bg: var(--ius-durazno-100);--_avt-fg: var(--ius-durazno-700)}:host([data-color=banano]){--_avt-bg: var(--ius-banano-100);--_avt-fg: var(--ius-banano-800)}:host([data-color=sandia]){--_avt-bg: var(--ius-sandia-100);--_avt-fg: var(--ius-sandia-700)}:host([data-color=arandano]){--_avt-bg: var(--ius-arandano-100);--_avt-fg: var(--ius-arandano-700)}:host([data-color=uva]){--_avt-bg: var(--ius-uva-100);--_avt-fg: var(--ius-uva-700)}:host([data-color=aguacate]){--_avt-bg: var(--ius-aguacate-100);--_avt-fg: var(--ius-aguacate-700)}:host([data-shape=circle-outline]),:host([data-shape=square-outline]){--_avt-bg: var(--ius-neutral-white);border:1.5px solid var(--_avt-fg)}:host([data-shape=circle-outline][data-color=neutral]),:host([data-shape=square-outline][data-color=neutral]){--_avt-fg: var(--ius-neutral-7)}:host([data-variant=photo]){--_avt-bg: var(--ius-neutral-2)}.ius-avt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ius-avt__icon{display:inline-flex}.ius-avt__icon .ius-icon{font-size:var(--_avt-glyph);line-height:1}.ius-avt__mono{display:inline-flex}.ius-avt__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#2626268c;color:var(--ius-neutral-white);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard);pointer-events:none}.ius-avt__overlay .ius-icon{font-size:calc(var(--_avt-size) * .4);line-height:1}:host([data-editable=true]){cursor:pointer;appearance:none;padding:0;margin:0}:host([data-editable=true]:hover) .ius-avt__overlay,:host([data-editable=true][data-force=hover]) .ius-avt__overlay{opacity:1}:host([data-editable=true]:focus-visible),:host([data-editable=true][data-force=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-editable=true]:focus-visible) .ius-avt__overlay,:host([data-editable=true][data-force=focused]) .ius-avt__overlay{opacity:1;background:var(--ius-info-200);color:var(--ius-text-primary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2794
2795
|
}
|
|
2795
2796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
2796
2797
|
type: Component,
|
|
@@ -2806,7 +2807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2806
2807
|
'[attr.aria-label]': 'hostAriaLabel',
|
|
2807
2808
|
'(click)': 'onHostClick($event)',
|
|
2808
2809
|
'(keydown)': 'onKeydown($event)',
|
|
2809
|
-
}, template: "@if (variant === 'photo') {\
|
|
2810
|
+
}, template: "@if (variant === 'photo') {\n <img\n class=\"ius-avt__img\"\n [src]=\"src\"\n [attr.alt]=\"imgAlt\"\n (error)=\"onImgError()\"\n draggable=\"false\"\n />\n} @else if (variant === 'icon') {\n <span class=\"ius-avt__icon\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ icon }}</span>\n </span>\n} @else {\n <span class=\"ius-avt__mono\" aria-hidden=\"true\">{{ initials }}</span>\n}\n\n@if (editable) {\n <span class=\"ius-avt__overlay\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ editIcon }}</span>\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_avt-size: 40px;--_avt-initials: var(--ius-fs-base);--_avt-glyph: var(--ius-icon-md);--_avt-radius: var(--ius-radius-pill);--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9);position:relative;box-sizing:border-box;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:var(--_avt-size);height:var(--_avt-size);border-radius:var(--_avt-radius);overflow:hidden;font-family:var(--ius-font-display);font-weight:600;font-size:var(--_avt-initials);line-height:1;letter-spacing:.01em;color:var(--_avt-fg);background:var(--_avt-bg);-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-tap-highlight-color:transparent;transition:box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-shape=square]){--_avt-radius: var(--ius-radius-lg)}:host([data-shape=square-outline]){--_avt-radius: var(--ius-radius-lg)}:host([data-size=xsmall]){--_avt-size: 24px;--_avt-initials: 10px;--_avt-glyph: 14px}:host([data-size=small]){--_avt-size: 32px;--_avt-initials: var(--ius-fs-sm);--_avt-glyph: var(--ius-icon-sm)}:host([data-size=large]){--_avt-size: 64px;--_avt-initials: 24px;--_avt-glyph: 34px}:host([data-color=info]){--_avt-bg: var(--ius-info-100);--_avt-fg: var(--ius-info-700)}:host([data-color=primary]){--_avt-bg: var(--ius-primary-100);--_avt-fg: var(--ius-primary-700)}:host([data-color=success]){--_avt-bg: var(--ius-success-100);--_avt-fg: var(--ius-success-800)}:host([data-color=warning]){--_avt-bg: var(--ius-warning-100);--_avt-fg: var(--ius-warning-800)}:host([data-color=danger]){--_avt-bg: var(--ius-danger-100);--_avt-fg: var(--ius-danger-700)}:host([data-color=neutral]){--_avt-bg: var(--ius-neutral-3);--_avt-fg: var(--ius-neutral-9)}:host([data-color=durazno]){--_avt-bg: var(--ius-durazno-100);--_avt-fg: var(--ius-durazno-700)}:host([data-color=banano]){--_avt-bg: var(--ius-banano-100);--_avt-fg: var(--ius-banano-800)}:host([data-color=sandia]){--_avt-bg: var(--ius-sandia-100);--_avt-fg: var(--ius-sandia-700)}:host([data-color=arandano]){--_avt-bg: var(--ius-arandano-100);--_avt-fg: var(--ius-arandano-700)}:host([data-color=uva]){--_avt-bg: var(--ius-uva-100);--_avt-fg: var(--ius-uva-700)}:host([data-color=aguacate]){--_avt-bg: var(--ius-aguacate-100);--_avt-fg: var(--ius-aguacate-700)}:host([data-shape=circle-outline]),:host([data-shape=square-outline]){--_avt-bg: var(--ius-neutral-white);border:1.5px solid var(--_avt-fg)}:host([data-shape=circle-outline][data-color=neutral]),:host([data-shape=square-outline][data-color=neutral]){--_avt-fg: var(--ius-neutral-7)}:host([data-variant=photo]){--_avt-bg: var(--ius-neutral-2)}.ius-avt__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.ius-avt__icon{display:inline-flex}.ius-avt__icon .ius-icon{font-size:var(--_avt-glyph);line-height:1}.ius-avt__mono{display:inline-flex}.ius-avt__overlay{position:absolute;inset:0;display:grid;place-items:center;background:#2626268c;color:var(--ius-neutral-white);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard);pointer-events:none}.ius-avt__overlay .ius-icon{font-size:calc(var(--_avt-size) * .4);line-height:1}:host([data-editable=true]){cursor:pointer;appearance:none;padding:0;margin:0}:host([data-editable=true]:hover) .ius-avt__overlay,:host([data-editable=true][data-force=hover]) .ius-avt__overlay{opacity:1}:host([data-editable=true]:focus-visible),:host([data-editable=true][data-force=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-editable=true]:focus-visible) .ius-avt__overlay,:host([data-editable=true][data-force=focused]) .ius-avt__overlay{opacity:1;background:var(--ius-info-200);color:var(--ius-text-primary)}\n"] }]
|
|
2810
2811
|
}], propDecorators: { alt: [{
|
|
2811
2812
|
type: Input
|
|
2812
2813
|
}], name: [{
|
|
@@ -2942,11 +2943,11 @@ class NavUserComponent {
|
|
|
2942
2943
|
this.clicked.emit(event);
|
|
2943
2944
|
}
|
|
2944
2945
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NavUserComponent, isStandalone: true, selector: "ius-nav-user", inputs: { user: "user", account: "account", layout: "layout", open: ["open", "open", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-navuser-host" }, ngImport: i0, template: "<button\
|
|
2946
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NavUserComponent, isStandalone: true, selector: "ius-nav-user", inputs: { user: "user", account: "account", layout: "layout", open: ["open", "open", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-navuser-host" }, ngImport: i0, template: "<button\n class=\"ius-navuser\"\n type=\"button\"\n [attr.data-open]=\"open ? 'true' : null\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n [attr.aria-label]=\"hostAriaLabel\"\n (click)=\"onClick($event)\"\n>\n <span class=\"ius-navuser__label\">\n @if (layout === 'stacked' && account?.name) {\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\n }\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\n </span>\n\n <span class=\"ius-navuser__photo\">\n <ius-avatar\n size=\"small\"\n shape=\"circle\"\n [src]=\"user?.avatar\"\n [name]=\"user?.name\"\n [icon]=\"avatarIcon\"\n [ariaLabel]=\"user?.name || 'Usuario'\"\n />\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2946
2947
|
}
|
|
2947
2948
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, decorators: [{
|
|
2948
2949
|
type: Component,
|
|
2949
|
-
args: [{ selector: 'ius-nav-user', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-navuser-host' }, template: "<button\
|
|
2950
|
+
args: [{ selector: 'ius-nav-user', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-navuser-host' }, template: "<button\n class=\"ius-navuser\"\n type=\"button\"\n [attr.data-open]=\"open ? 'true' : null\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n [attr.aria-label]=\"hostAriaLabel\"\n (click)=\"onClick($event)\"\n>\n <span class=\"ius-navuser__label\">\n @if (layout === 'stacked' && account?.name) {\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\n }\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\n </span>\n\n <span class=\"ius-navuser__photo\">\n <ius-avatar\n size=\"small\"\n shape=\"circle\"\n [src]=\"user?.avatar\"\n [name]=\"user?.name\"\n [icon]=\"avatarIcon\"\n [ariaLabel]=\"user?.name || 'Usuario'\"\n />\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"] }]
|
|
2950
2951
|
}], propDecorators: { user: [{
|
|
2951
2952
|
type: Input
|
|
2952
2953
|
}], account: [{
|
|
@@ -3010,14 +3011,14 @@ class HeaderBarComponent {
|
|
|
3010
3011
|
return !this.brandClick.observed;
|
|
3011
3012
|
}
|
|
3012
3013
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3013
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: HeaderBarComponent, isStandalone: true, selector: "ius-header-bar", inputs: { module: "module", help: ["help", "help", booleanAttribute], support: ["support", "support", booleanAttribute], apps: ["apps", "apps", booleanAttribute], calendar: ["calendar", "calendar", booleanAttribute], notifications: ["notifications", "notifications", booleanAttribute], appsTemplate: "appsTemplate", user: "user", account: "account", accountOpen: ["accountOpen", "accountOpen", booleanAttribute] }, outputs: { brandClick: "brandClick", helpClick: "helpClick", supportClick: "supportClick", appsClick: "appsClick", calendarClick: "calendarClick", notificationsClick: "notificationsClick", accountClick: "accountClick" }, host: { attributes: { "role": "banner" }, classAttribute: "ius-headerbar" }, ngImport: i0, template: "<button\
|
|
3014
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: HeaderBarComponent, isStandalone: true, selector: "ius-header-bar", inputs: { module: "module", help: ["help", "help", booleanAttribute], support: ["support", "support", booleanAttribute], apps: ["apps", "apps", booleanAttribute], calendar: ["calendar", "calendar", booleanAttribute], notifications: ["notifications", "notifications", booleanAttribute], appsTemplate: "appsTemplate", user: "user", account: "account", accountOpen: ["accountOpen", "accountOpen", booleanAttribute] }, outputs: { brandClick: "brandClick", helpClick: "helpClick", supportClick: "supportClick", appsClick: "appsClick", calendarClick: "calendarClick", notificationsClick: "notificationsClick", accountClick: "accountClick" }, host: { attributes: { "role": "banner" }, classAttribute: "ius-headerbar" }, ngImport: i0, template: "<button\n class=\"ius-headerbar__brand\"\n type=\"button\"\n [attr.data-static]=\"brandStatic ? 'true' : null\"\n aria-label=\"Inicio\"\n (click)=\"brandClick.emit($event)\"\n>\n <ng-content select=\"[slot=logo]\">\n <span class=\"ius-headerbar__logo-slot\" aria-hidden=\"true\"></span>\n </ng-content>\n</button>\n\n@if (module) {\n <span class=\"ius-headerbar__module\">{{ module }}</span>\n}\n\n<span class=\"ius-headerbar__spacer\"></span>\n\n<div class=\"ius-headerbar__actions\">\n <ng-content select=\"[slot=actions]\">\n @if (help) {\n <ius-icon-button\n icon=\"help\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Ayuda\"\n (clicked)=\"helpClick.emit($event)\"\n />\n }\n @if (support) {\n <ius-icon-button\n icon=\"support_agent\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Soporte\"\n (clicked)=\"supportClick.emit($event)\"\n />\n }\n @if (calendar) {\n <ius-icon-button\n icon=\"calendar_month\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Eventos pr\u00F3ximos\"\n (clicked)=\"calendarClick.emit($event)\"\n />\n }\n @if (notifications) {\n <span class=\"ius-headerbar__bell\">\n <ius-icon-button\n icon=\"notifications\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Notificaciones\"\n (clicked)=\"notificationsClick.emit($event)\"\n />\n <span class=\"ius-headerbar__dot\" aria-hidden=\"true\"></span>\n </span>\n }\n @if (apps) {\n @if (appsTemplate) {\n <ng-container [ngTemplateOutlet]=\"appsTemplate\" />\n } @else {\n <ius-icon-button\n icon=\"apps\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Aplicaciones\"\n (clicked)=\"appsClick.emit($event)\"\n />\n }\n }\n </ng-content>\n</div>\n\n@if (user) {\n <div class=\"ius-headerbar__divider\"></div>\n <ius-nav-user\n [user]=\"user\"\n [account]=\"account\"\n [open]=\"accountOpen\"\n (clicked)=\"accountClick.emit($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;height:52px;display:flex;align-items:center;gap:var(--ius-space-md);padding:0 var(--ius-space-md);background:var(--ius-surface-card);border-bottom:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}.ius-headerbar__brand{display:inline-flex;align-items:center;gap:var(--ius-space-xs);flex:0 0 auto;background:transparent;border:0;padding:var(--ius-space-xxs) var(--ius-space-xs);margin:0;border-radius:var(--ius-radius-md);cursor:pointer;color:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-headerbar__brand:hover{background:var(--ius-neutral-2)}.ius-headerbar__brand:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-headerbar__brand[data-static=true]{cursor:default}.ius-headerbar__brand[data-static=true]:hover{background:transparent}.ius-headerbar__wordmark{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h5);line-height:1;color:var(--ius-text-primary);letter-spacing:-.01em}.ius-headerbar__wordmark sup{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);top:-.7em;margin-left:1px}.ius-headerbar__logo-slot{width:116px;height:28px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);flex:0 0 auto}.ius-headerbar__module{font-family:var(--ius-font-display);font-weight:var(--ius-fw-regular, 400);font-size:var(--ius-fs-h5);line-height:1;color:var(--ius-text-secondary);flex:0 0 auto}.ius-headerbar__spacer{flex:1 1 auto}.ius-headerbar__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-headerbar__bell{position:relative;display:inline-flex}.ius-headerbar__bell .ius-headerbar__dot{position:absolute;top:0;right:0;pointer-events:none;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-headerbar__divider{width:1px;height:26px;background:var(--ius-stroke);margin:0 var(--ius-space-xxs);flex:0 0 auto}.ius-headerbar__account{display:inline-flex;align-items:center;gap:var(--ius-space-xs);flex:0 0 auto;background:transparent;border:1px solid transparent;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);cursor:pointer;color:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-headerbar__account:hover{background:var(--ius-neutral-2)}.ius-headerbar__account:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-headerbar__account-name{font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium, 500);font-size:var(--ius-fs-base);line-height:1.2;color:var(--ius-text-primary);white-space:nowrap}.ius-headerbar__account .ius-icon{color:var(--ius-text-tertiary);font-size:var(--ius-icon-md)}@media(max-width:600px){.ius-headerbar__module,.ius-headerbar__account-name{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: NavUserComponent, selector: "ius-nav-user", inputs: ["user", "account", "layout", "open", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3014
3015
|
}
|
|
3015
3016
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: HeaderBarComponent, decorators: [{
|
|
3016
3017
|
type: Component,
|
|
3017
3018
|
args: [{ selector: 'ius-header-bar', standalone: true, imports: [NgTemplateOutlet, IconButtonComponent, NavUserComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
3018
3019
|
class: 'ius-headerbar',
|
|
3019
3020
|
role: 'banner',
|
|
3020
|
-
}, template: "<button\
|
|
3021
|
+
}, template: "<button\n class=\"ius-headerbar__brand\"\n type=\"button\"\n [attr.data-static]=\"brandStatic ? 'true' : null\"\n aria-label=\"Inicio\"\n (click)=\"brandClick.emit($event)\"\n>\n <ng-content select=\"[slot=logo]\">\n <span class=\"ius-headerbar__logo-slot\" aria-hidden=\"true\"></span>\n </ng-content>\n</button>\n\n@if (module) {\n <span class=\"ius-headerbar__module\">{{ module }}</span>\n}\n\n<span class=\"ius-headerbar__spacer\"></span>\n\n<div class=\"ius-headerbar__actions\">\n <ng-content select=\"[slot=actions]\">\n @if (help) {\n <ius-icon-button\n icon=\"help\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Ayuda\"\n (clicked)=\"helpClick.emit($event)\"\n />\n }\n @if (support) {\n <ius-icon-button\n icon=\"support_agent\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Soporte\"\n (clicked)=\"supportClick.emit($event)\"\n />\n }\n @if (calendar) {\n <ius-icon-button\n icon=\"calendar_month\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Eventos pr\u00F3ximos\"\n (clicked)=\"calendarClick.emit($event)\"\n />\n }\n @if (notifications) {\n <span class=\"ius-headerbar__bell\">\n <ius-icon-button\n icon=\"notifications\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Notificaciones\"\n (clicked)=\"notificationsClick.emit($event)\"\n />\n <span class=\"ius-headerbar__dot\" aria-hidden=\"true\"></span>\n </span>\n }\n @if (apps) {\n @if (appsTemplate) {\n <ng-container [ngTemplateOutlet]=\"appsTemplate\" />\n } @else {\n <ius-icon-button\n icon=\"apps\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n ariaLabel=\"Aplicaciones\"\n (clicked)=\"appsClick.emit($event)\"\n />\n }\n }\n </ng-content>\n</div>\n\n@if (user) {\n <div class=\"ius-headerbar__divider\"></div>\n <ius-nav-user\n [user]=\"user\"\n [account]=\"account\"\n [open]=\"accountOpen\"\n (clicked)=\"accountClick.emit($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;width:100%;height:52px;display:flex;align-items:center;gap:var(--ius-space-md);padding:0 var(--ius-space-md);background:var(--ius-surface-card);border-bottom:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}.ius-headerbar__brand{display:inline-flex;align-items:center;gap:var(--ius-space-xs);flex:0 0 auto;background:transparent;border:0;padding:var(--ius-space-xxs) var(--ius-space-xs);margin:0;border-radius:var(--ius-radius-md);cursor:pointer;color:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-headerbar__brand:hover{background:var(--ius-neutral-2)}.ius-headerbar__brand:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-headerbar__brand[data-static=true]{cursor:default}.ius-headerbar__brand[data-static=true]:hover{background:transparent}.ius-headerbar__wordmark{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h5);line-height:1;color:var(--ius-text-primary);letter-spacing:-.01em}.ius-headerbar__wordmark sup{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);top:-.7em;margin-left:1px}.ius-headerbar__logo-slot{width:116px;height:28px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);flex:0 0 auto}.ius-headerbar__module{font-family:var(--ius-font-display);font-weight:var(--ius-fw-regular, 400);font-size:var(--ius-fs-h5);line-height:1;color:var(--ius-text-secondary);flex:0 0 auto}.ius-headerbar__spacer{flex:1 1 auto}.ius-headerbar__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-headerbar__bell{position:relative;display:inline-flex}.ius-headerbar__bell .ius-headerbar__dot{position:absolute;top:0;right:0;pointer-events:none;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-danger-500);box-shadow:0 0 0 2px var(--ius-surface-card)}.ius-headerbar__divider{width:1px;height:26px;background:var(--ius-stroke);margin:0 var(--ius-space-xxs);flex:0 0 auto}.ius-headerbar__account{display:inline-flex;align-items:center;gap:var(--ius-space-xs);flex:0 0 auto;background:transparent;border:1px solid transparent;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);cursor:pointer;color:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-headerbar__account:hover{background:var(--ius-neutral-2)}.ius-headerbar__account:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-headerbar__account-name{font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium, 500);font-size:var(--ius-fs-base);line-height:1.2;color:var(--ius-text-primary);white-space:nowrap}.ius-headerbar__account .ius-icon{color:var(--ius-text-tertiary);font-size:var(--ius-icon-md)}@media(max-width:600px){.ius-headerbar__module,.ius-headerbar__account-name{display:none}}\n"] }]
|
|
3021
3022
|
}], propDecorators: { module: [{
|
|
3022
3023
|
type: Input
|
|
3023
3024
|
}], help: [{
|
|
@@ -3065,7 +3066,7 @@ const SIZES = {
|
|
|
3065
3066
|
medium: { d: 30, s: 2.5 },
|
|
3066
3067
|
large: { d: 44, s: 3 },
|
|
3067
3068
|
};
|
|
3068
|
-
const TONE_VARS = {
|
|
3069
|
+
const TONE_VARS$1 = {
|
|
3069
3070
|
info: 'var(--ius-info-500)',
|
|
3070
3071
|
primary: 'var(--ius-primary-500)',
|
|
3071
3072
|
success: 'var(--ius-success-500)',
|
|
@@ -3085,7 +3086,7 @@ const TONE_GRAD = {
|
|
|
3085
3086
|
// primary-900, cola viva cian primary-500). Para spinner de marca.
|
|
3086
3087
|
brand: { strong: 'var(--ius-primary-900)', light: 'var(--ius-primary-500)' },
|
|
3087
3088
|
};
|
|
3088
|
-
let uid$
|
|
3089
|
+
let uid$6 = 0;
|
|
3089
3090
|
/**
|
|
3090
3091
|
* CircularProgress — Ius Design v2.
|
|
3091
3092
|
*
|
|
@@ -3102,7 +3103,7 @@ class CircularProgressComponent {
|
|
|
3102
3103
|
this.tone = 'info';
|
|
3103
3104
|
this.size = 'medium';
|
|
3104
3105
|
this.showValue = false;
|
|
3105
|
-
this.gid = `ius-cp-${uid$
|
|
3106
|
+
this.gid = `ius-cp-${uid$6++}`;
|
|
3106
3107
|
}
|
|
3107
3108
|
get dim() {
|
|
3108
3109
|
return SIZES[this.size] ?? SIZES.medium;
|
|
@@ -3117,7 +3118,7 @@ class CircularProgressComponent {
|
|
|
3117
3118
|
return this.dim.d / 2;
|
|
3118
3119
|
}
|
|
3119
3120
|
get toneVar() {
|
|
3120
|
-
return TONE_VARS[this.tone] ?? TONE_VARS.info;
|
|
3121
|
+
return TONE_VARS$1[this.tone] ?? TONE_VARS$1.info;
|
|
3121
3122
|
}
|
|
3122
3123
|
get grad() {
|
|
3123
3124
|
return TONE_GRAD[this.tone] ?? TONE_GRAD.info;
|
|
@@ -3156,7 +3157,7 @@ class CircularProgressComponent {
|
|
|
3156
3157
|
return this.showValue && !this.indeterminate ? `${this.roundedPct}%` : null;
|
|
3157
3158
|
}
|
|
3158
3159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CircularProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CircularProgressComponent, isStandalone: true, selector: "ius-circular-progress", inputs: { value: "value", max: "max", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], tone: "tone", size: "size", showValue: ["showValue", "showValue", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-size": "size", "attr.data-indeterminate": "indeterminate ? 'true' : null", "attr.aria-label": "ariaLabel || null", "attr.aria-valuenow": "indeterminate ? null : roundedPct", "attr.aria-valuemin": "indeterminate ? null : 0", "attr.aria-valuemax": "indeterminate ? null : 100", "style.--_cp-ind": "toneVar", "style.width.px": "dim.d", "style.height.px": "dim.d" }, classAttribute: "ius-circprog" }, ngImport: i0, template: "<svg\
|
|
3160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CircularProgressComponent, isStandalone: true, selector: "ius-circular-progress", inputs: { value: "value", max: "max", indeterminate: ["indeterminate", "indeterminate", booleanAttribute], tone: "tone", size: "size", showValue: ["showValue", "showValue", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "progressbar" }, properties: { "attr.data-size": "size", "attr.data-indeterminate": "indeterminate ? 'true' : null", "attr.aria-label": "ariaLabel || null", "attr.aria-valuenow": "indeterminate ? null : roundedPct", "attr.aria-valuemin": "indeterminate ? null : 0", "attr.aria-valuemax": "indeterminate ? null : 100", "style.--_cp-ind": "toneVar", "style.width.px": "dim.d", "style.height.px": "dim.d" }, classAttribute: "ius-circprog" }, ngImport: i0, template: "<svg\n class=\"ius-circprog__svg\"\n [attr.width]=\"dim.d\"\n [attr.height]=\"dim.d\"\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\n>\n @if (indeterminate) {\n <defs>\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\n </linearGradient>\n </defs>\n <circle\n class=\"ius-circprog__trk\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n />\n <circle\n class=\"ius-circprog__ind\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke]=\"'url(#' + gid + ')'\"\n />\n } @else {\n @if (grayLen > 0) {\n <circle\n class=\"ius-circprog__trk\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke-dasharray]=\"grayDash\"\n [style.stroke-dashoffset]=\"grayOffset\"\n />\n }\n @if (coloredLen > 0) {\n <circle\n class=\"ius-circprog__ind\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke-dasharray]=\"coloredDash\"\n [style.stroke-dashoffset]=\"coloredOffset\"\n />\n }\n }\n</svg>\n\n@if (center != null) {\n <span class=\"ius-circprog__center\">{{ center }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);color:var(--ius-text-secondary);line-height:1}:host([data-size=small]) .ius-circprog__center{display:none}:host([data-size=medium]) .ius-circprog__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-circprog__center{font-size:var(--ius-fs-sm)}@media(prefers-reduced-motion:reduce){:host([data-indeterminate=true]) .ius-circprog__svg{animation-duration:2s}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3160
3161
|
}
|
|
3161
3162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CircularProgressComponent, decorators: [{
|
|
3162
3163
|
type: Component,
|
|
@@ -3172,7 +3173,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3172
3173
|
'[style.--_cp-ind]': 'toneVar',
|
|
3173
3174
|
'[style.width.px]': 'dim.d',
|
|
3174
3175
|
'[style.height.px]': 'dim.d',
|
|
3175
|
-
}, template: "<svg\
|
|
3176
|
+
}, template: "<svg\n class=\"ius-circprog__svg\"\n [attr.width]=\"dim.d\"\n [attr.height]=\"dim.d\"\n [attr.viewBox]=\"'0 0 ' + dim.d + ' ' + dim.d\"\n>\n @if (indeterminate) {\n <defs>\n <linearGradient [attr.id]=\"gid\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\">\n <stop offset=\"0%\" [attr.stop-color]=\"grad.strong\" stop-opacity=\"1\" />\n <stop offset=\"100%\" [attr.stop-color]=\"grad.light\" stop-opacity=\"1\" />\n </linearGradient>\n </defs>\n <circle\n class=\"ius-circprog__trk\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n />\n <circle\n class=\"ius-circprog__ind\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke]=\"'url(#' + gid + ')'\"\n />\n } @else {\n @if (grayLen > 0) {\n <circle\n class=\"ius-circprog__trk\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke-dasharray]=\"grayDash\"\n [style.stroke-dashoffset]=\"grayOffset\"\n />\n }\n @if (coloredLen > 0) {\n <circle\n class=\"ius-circprog__ind\"\n [attr.cx]=\"cx\"\n [attr.cy]=\"cy\"\n [attr.r]=\"r\"\n [attr.stroke-width]=\"dim.s\"\n [attr.pathLength]=\"100\"\n [style.stroke-dasharray]=\"coloredDash\"\n [style.stroke-dashoffset]=\"coloredOffset\"\n />\n }\n }\n</svg>\n\n@if (center != null) {\n <span class=\"ius-circprog__center\">{{ center }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:var(--_cp-ind, var(--ius-info-500))}.ius-circprog__svg{display:block;transform:rotate(-90deg)}.ius-circprog__svg circle{fill:none}.ius-circprog__trk{stroke:var(--ius-neutral-3)}.ius-circprog__ind{stroke:currentColor;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset var(--ius-duration-base, .22s) var(--ius-ease-standard)}:host([data-indeterminate=true]) .ius-circprog__svg{animation:ius-circprog-spin 1.2s linear infinite}:host([data-indeterminate=true]) .ius-circprog__trk{stroke:currentColor;stroke-opacity:.4}:host([data-indeterminate=true]) .ius-circprog__ind{stroke-dasharray:70 100;stroke-dashoffset:0}@keyframes ius-circprog-spin{to{transform:rotate(270deg)}}.ius-circprog__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);color:var(--ius-text-secondary);line-height:1}:host([data-size=small]) .ius-circprog__center{display:none}:host([data-size=medium]) .ius-circprog__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-circprog__center{font-size:var(--ius-fs-sm)}@media(prefers-reduced-motion:reduce){:host([data-indeterminate=true]) .ius-circprog__svg{animation-duration:2s}}\n"] }]
|
|
3176
3177
|
}], propDecorators: { value: [{
|
|
3177
3178
|
type: Input
|
|
3178
3179
|
}], max: [{
|
|
@@ -3191,7 +3192,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3191
3192
|
type: Input
|
|
3192
3193
|
}] } });
|
|
3193
3194
|
|
|
3194
|
-
let uid$
|
|
3195
|
+
let uid$5 = 0;
|
|
3195
3196
|
/**
|
|
3196
3197
|
*
|
|
3197
3198
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -3213,7 +3214,7 @@ class LoadingMarkComponent {
|
|
|
3213
3214
|
/** Etiqueta accesible. */
|
|
3214
3215
|
this.ariaLabel = 'Cargando';
|
|
3215
3216
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
3216
|
-
this.id = `lm-${uid$
|
|
3217
|
+
this.id = `lm-${uid$5++}`;
|
|
3217
3218
|
this.baseId = `${this.id}-base`;
|
|
3218
3219
|
this.glowId = `${this.id}-glow`;
|
|
3219
3220
|
this.softId = `${this.id}-soft`;
|
|
@@ -3308,7 +3309,7 @@ class LoadingComponent {
|
|
|
3308
3309
|
return this.showLabel && this.label != null && this.label !== '';
|
|
3309
3310
|
}
|
|
3310
3311
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3311
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoadingComponent, isStandalone: true, selector: "ius-loading", inputs: { variant: "variant", label: "label", showLabel: ["showLabel", "showLabel", booleanAttribute], tone: "tone", brand: ["brand", "brand", booleanAttribute], size: "size", active: ["active", "active", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "attr.data-variant": "variant", "attr.data-brand": "brand ? 'true' : null", "attr.role": "variant !== 'overlay' ? 'status' : null", "attr.aria-live": "variant !== 'overlay' ? 'polite' : null", "attr.aria-busy": "variant === 'overlay' && active ? 'true' : null" }, classAttribute: "ius-loading" }, ngImport: i0, template: "@if (variant === 'overlay') {\
|
|
3312
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoadingComponent, isStandalone: true, selector: "ius-loading", inputs: { variant: "variant", label: "label", showLabel: ["showLabel", "showLabel", booleanAttribute], tone: "tone", brand: ["brand", "brand", booleanAttribute], size: "size", active: ["active", "active", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "attr.data-variant": "variant", "attr.data-brand": "brand ? 'true' : null", "attr.role": "variant !== 'overlay' ? 'status' : null", "attr.aria-live": "variant !== 'overlay' ? 'polite' : null", "attr.aria-busy": "variant === 'overlay' && active ? 'true' : null" }, classAttribute: "ius-loading" }, ngImport: i0, template: "@if (variant === 'overlay') {\n <ng-content />\n @if (active) {\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n </div>\n }\n} @else {\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"], dependencies: [{ kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel"] }, { kind: "component", type: LoadingMarkComponent, selector: "ius-loading-mark", inputs: ["size", "surface", "paused", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3312
3313
|
}
|
|
3313
3314
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
3314
3315
|
type: Component,
|
|
@@ -3319,7 +3320,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3319
3320
|
'[attr.role]': "variant !== 'overlay' ? 'status' : null",
|
|
3320
3321
|
'[attr.aria-live]': "variant !== 'overlay' ? 'polite' : null",
|
|
3321
3322
|
'[attr.aria-busy]': "variant === 'overlay' && active ? 'true' : null",
|
|
3322
|
-
}, template: "@if (variant === 'overlay') {\
|
|
3323
|
+
}, template: "@if (variant === 'overlay') {\n <ng-content />\n @if (active) {\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n </div>\n }\n} @else {\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"] }]
|
|
3323
3324
|
}], propDecorators: { variant: [{
|
|
3324
3325
|
type: Input
|
|
3325
3326
|
}], label: [{
|
|
@@ -3485,7 +3486,7 @@ class EmptyStateComponent {
|
|
|
3485
3486
|
return !!this.actionsTemplate || !!this.primary || !!this.secondary;
|
|
3486
3487
|
}
|
|
3487
3488
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EmptyStateComponent, isStandalone: true, selector: "ius-empty-state", inputs: { variant: "variant", size: "size", tone: "tone", icon: "icon", illustration: "illustration", illustrationTemplate: "illustrationTemplate", title: "title", description: "description", primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionsTemplate: "actionsTemplate", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-variant": "variant", "attr.data-size": "size", "attr.data-tone": "effTone", "attr.role": "role" }, classAttribute: "ius-empty" }, ngImport: i0, template: "@if (hasVisual) {\
|
|
3489
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EmptyStateComponent, isStandalone: true, selector: "ius-empty-state", inputs: { variant: "variant", size: "size", tone: "tone", icon: "icon", illustration: "illustration", illustrationTemplate: "illustrationTemplate", title: "title", description: "description", primaryAction: "primaryAction", secondaryAction: "secondaryAction", actionsTemplate: "actionsTemplate", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, host: { properties: { "attr.data-variant": "variant", "attr.data-size": "size", "attr.data-tone": "effTone", "attr.role": "role" }, classAttribute: "ius-empty" }, ngImport: i0, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_es-title);line-height:var(--_es-title-leading);color:var(--ius-text-primary);text-wrap:pretty}.ius-empty__desc{margin:0;font-family:var(--ius-font-body);font-size:var(--_es-desc);line-height:var(--_es-desc-leading);color:var(--ius-text-secondary);text-wrap:pretty}.ius-empty__actions{margin-top:var(--ius-space-xxs);display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ius-space-sm)}:host([data-size=compact]) .ius-empty__actions{gap:var(--ius-space-xs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IllustrationComponent, selector: "ius-illustration", inputs: ["name", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3489
3490
|
}
|
|
3490
3491
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EmptyStateComponent, decorators: [{
|
|
3491
3492
|
type: Component,
|
|
@@ -3495,7 +3496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3495
3496
|
'[attr.data-size]': 'size',
|
|
3496
3497
|
'[attr.data-tone]': 'effTone',
|
|
3497
3498
|
'[attr.role]': 'role',
|
|
3498
|
-
}, template: "@if (hasVisual) {\
|
|
3499
|
+
}, template: "@if (hasVisual) {\n <div\n class=\"ius-empty__visual\"\n [attr.data-illustration]=\"hasIllustration ? 'true' : null\"\n aria-hidden=\"true\"\n >\n @if (illustrationTemplate) {\n <ng-container [ngTemplateOutlet]=\"illustrationTemplate\" />\n } @else if (illusName) {\n <ius-illustration [name]=\"illusName\" [size]=\"illusSize\" />\n } @else {\n <span class=\"ius-icon\">{{ iconName }}</span>\n }\n </div>\n}\n\n@if (title != null || description != null) {\n <div class=\"ius-empty__text\">\n @if (title != null) {\n <div class=\"ius-empty__title\">{{ title }}</div>\n }\n @if (description != null) {\n <p class=\"ius-empty__desc\">{{ description }}</p>\n }\n </div>\n}\n\n@if (hasActions) {\n <div class=\"ius-empty__actions\">\n @if (actionsTemplate) {\n <ng-container [ngTemplateOutlet]=\"actionsTemplate\" />\n } @else {\n @if (primary) {\n <ius-button\n [variant]=\"primary.variant || 'primary'\"\n [size]=\"btnSize\"\n [label]=\"primary.label\"\n [prefixIcon]=\"primary.icon\"\n [dynamic]=\"!!primary.dynamic\"\n [disabled]=\"!!primary.disabled\"\n (clicked)=\"primaryClick.emit($event)\"\n />\n }\n @if (secondary) {\n <ius-button\n [variant]=\"secondary.variant || 'secondary'\"\n [size]=\"btnSize\"\n [label]=\"secondary.label\"\n [prefixIcon]=\"secondary.icon\"\n [dynamic]=\"!!secondary.dynamic\"\n [disabled]=\"!!secondary.disabled\"\n (clicked)=\"secondaryClick.emit($event)\"\n />\n }\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_es-circle: 56px;--_es-glyph: 28px;--_es-gap: var(--ius-space-sm);--_es-title: 16px;--_es-title-leading: 22px;--_es-desc: 14px;--_es-desc-leading: 21px;--_es-pad: 24px;--_es-max: 360px;--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600);box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--_es-gap);padding:var(--_es-pad);font-family:var(--ius-font-body);-webkit-user-select:none;user-select:none}:host([data-size=compact]){--_es-circle: 40px;--_es-glyph: 22px;--_es-gap: var(--ius-space-xs);--_es-title: 14px;--_es-title-leading: 20px;--_es-desc: 12.5px;--_es-desc-leading: 18px;--_es-pad: 16px;--_es-max: 260px}:host([data-size=compact]) .ius-empty__visual:not([data-illustration=true]){background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}:host([data-size=full]){--_es-circle: 72px;--_es-glyph: 36px;--_es-gap: var(--ius-space-md);--_es-title: 20px;--_es-title-leading: 28px;--_es-desc: 15px;--_es-desc-leading: 23px;--_es-pad: 40px;--_es-max: 460px}:host([data-tone=info]){--_es-tint: var(--ius-info-100);--_es-accent: var(--ius-info-600)}:host([data-tone=primary]){--_es-tint: var(--ius-primary-100);--_es-accent: var(--ius-primary-600)}:host([data-tone=success]){--_es-tint: var(--ius-success-100);--_es-accent: var(--ius-success-700)}:host([data-tone=warning]){--_es-tint: var(--ius-warning-100);--_es-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_es-tint: var(--ius-danger-100);--_es-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_es-tint: var(--ius-neutral-2);--_es-accent: var(--ius-neutral-8)}.ius-empty__visual{flex:0 0 auto;width:var(--_es-circle);height:var(--_es-circle);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--ius-radius-pill);background:var(--_es-tint);color:var(--_es-accent)}.ius-empty__visual .ius-icon{font-size:var(--_es-glyph);line-height:1}.ius-empty__visual[data-illustration=true]{width:auto;height:auto;background:transparent;border-radius:0;color:inherit}.ius-empty__visual[data-illustration=true] img,.ius-empty__visual[data-illustration=true] svg{display:block;max-width:100%;height:auto}.ius-empty__text{display:flex;flex-direction:column;gap:var(--ius-space-xxs);max-width:var(--_es-max)}.ius-empty__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold, 600);font-size:var(--_es-title);line-height:var(--_es-title-leading);color:var(--ius-text-primary);text-wrap:pretty}.ius-empty__desc{margin:0;font-family:var(--ius-font-body);font-size:var(--_es-desc);line-height:var(--_es-desc-leading);color:var(--ius-text-secondary);text-wrap:pretty}.ius-empty__actions{margin-top:var(--ius-space-xxs);display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ius-space-sm)}:host([data-size=compact]) .ius-empty__actions{gap:var(--ius-space-xs)}\n"] }]
|
|
3499
3500
|
}], propDecorators: { variant: [{
|
|
3500
3501
|
type: Input
|
|
3501
3502
|
}], size: [{
|
|
@@ -3627,11 +3628,11 @@ class StatusStateComponent {
|
|
|
3627
3628
|
return resolveIllustration(this.status);
|
|
3628
3629
|
}
|
|
3629
3630
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3630
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatusStateComponent, isStandalone: true, selector: "ius-status-state", inputs: { status: "status", code: "code", showCode: ["showCode", "showCode", booleanAttribute], title: "title", description: "description", illustrationTemplate: "illustrationTemplate", icon: "icon", tone: "tone", size: "size", primaryAction: "primaryAction", secondaryAction: "secondaryAction", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, ngImport: i0, template: "<ng-template #codeTpl>\
|
|
3631
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatusStateComponent, isStandalone: true, selector: "ius-status-state", inputs: { status: "status", code: "code", showCode: ["showCode", "showCode", booleanAttribute], title: "title", description: "description", illustrationTemplate: "illustrationTemplate", icon: "icon", tone: "tone", size: "size", primaryAction: "primaryAction", secondaryAction: "secondaryAction", role: "role" }, outputs: { primaryClick: "primaryClick", secondaryClick: "secondaryClick" }, ngImport: i0, template: "<ng-template #codeTpl>\n <div class=\"ius-statusstate__code\">\n <span class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\n </div>\n</ng-template>\n\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\n<ng-template #illusTpl>\n @if (spotName) {\n <ius-illustration [name]=\"spotName\" size=\"large\" />\n }\n</ng-template>\n\n<ius-empty-state\n [size]=\"size\"\n [tone]=\"effTone\"\n [role]=\"effRole\"\n [icon]=\"statusIcon\"\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\n [title]=\"effTitle\"\n [description]=\"effDescription\"\n [primaryAction]=\"primaryAction\"\n [secondaryAction]=\"secondaryAction\"\n (primaryClick)=\"primaryClick.emit($event)\"\n (secondaryClick)=\"secondaryClick.emit($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"], dependencies: [{ kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: IllustrationComponent, selector: "ius-illustration", inputs: ["name", "size", "title"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3631
3632
|
}
|
|
3632
3633
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusStateComponent, decorators: [{
|
|
3633
3634
|
type: Component,
|
|
3634
|
-
args: [{ selector: 'ius-status-state', standalone: true, imports: [EmptyStateComponent, IllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #codeTpl>\
|
|
3635
|
+
args: [{ selector: 'ius-status-state', standalone: true, imports: [EmptyStateComponent, IllustrationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #codeTpl>\n <div class=\"ius-statusstate__code\">\n <span class=\"ius-icon ius-statusstate__code-icon\" aria-hidden=\"true\" [style.color]=\"toneVar\">{{ statusIcon }}</span>\n <div class=\"ius-statusstate__code-num\" [style.color]=\"toneVar\">{{ effCode }}</div>\n </div>\n</ng-template>\n\n<!-- Ilustraci\u00F3n spot por defecto: SIEMPRE size=\"large\" (independiente de `size`). -->\n<ng-template #illusTpl>\n @if (spotName) {\n <ius-illustration [name]=\"spotName\" size=\"large\" />\n }\n</ng-template>\n\n<ius-empty-state\n [size]=\"size\"\n [tone]=\"effTone\"\n [role]=\"effRole\"\n [icon]=\"statusIcon\"\n [illustrationTemplate]=\"illustrationTemplate || (useCode ? codeTpl : (spotName ? illusTpl : undefined))\"\n [title]=\"effTitle\"\n [description]=\"effDescription\"\n [primaryAction]=\"primaryAction\"\n [secondaryAction]=\"secondaryAction\"\n (primaryClick)=\"primaryClick.emit($event)\"\n (secondaryClick)=\"secondaryClick.emit($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%}.ius-statusstate__code{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs)}.ius-statusstate__code-icon{font-size:var(--ius-icon-xl, 48px);line-height:1}.ius-statusstate__code-num{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-h1, 38px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.04em}\n"] }]
|
|
3635
3636
|
}], propDecorators: { status: [{
|
|
3636
3637
|
type: Input
|
|
3637
3638
|
}], code: [{
|
|
@@ -4042,7 +4043,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
4042
4043
|
};
|
|
4043
4044
|
}
|
|
4044
4045
|
}
|
|
4045
|
-
let uid$
|
|
4046
|
+
let uid$4 = 0;
|
|
4046
4047
|
/**
|
|
4047
4048
|
* CaptchaField — Ius Design v2.
|
|
4048
4049
|
*
|
|
@@ -4191,7 +4192,7 @@ class CaptchaFieldComponent {
|
|
|
4191
4192
|
this.phase = signal('loading', /* @ts-ignore */
|
|
4192
4193
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
4193
4194
|
this.widgetId = null;
|
|
4194
|
-
this.baseId = `ius-cf-${uid$
|
|
4195
|
+
this.baseId = `ius-cf-${uid$4++}`;
|
|
4195
4196
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
4196
4197
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
4197
4198
|
this.onChange = () => { };
|
|
@@ -4589,7 +4590,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4589
4590
|
}, template: "<!-- Prefijo: prefix proyectado \u203A icon \u203A dot -->\r\n@if (hasPrefix()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><ng-content select=\"[iusTagPrefix]\" /></span>\r\n} @else if (icon()) {\r\n <span class=\"ius-tag__icon\" aria-hidden=\"true\"><span class=\"ius-icon\">{{ icon() }}</span></span>\r\n} @else if (showDot()) {\r\n <span class=\"ius-tag__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta: input `label` \u203A contenido proyectado -->\r\n<span class=\"ius-tag__label\">\r\n @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n</span>\r\n\r\n<!-- Sufijo: count (`\u00B7 N`) \u203A suffix proyectado -->\r\n@if (count() != null) {\r\n <span class=\"ius-tag__count\">\u00B7 {{ count() }}</span>\r\n} @else if (hasSuffix()) {\r\n <span class=\"ius-tag__suffix\" aria-hidden=\"true\"><ng-content select=\"[iusTagSuffix]\" /></span>\r\n}\r\n\r\n<!-- Cierre: si el host es interactivo, evita bot\u00F3n-en-bot\u00F3n (span[role=button]) -->\r\n@if (closable()) {\r\n @if (isInteractive()) {\r\n <span\r\n role=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span class=\"ius-icon\">close</span>\r\n </span>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-tag__x\"\r\n [attr.aria-label]=\"closeLabel()\"\r\n tabindex=\"-1\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"onClose($event)\"\r\n >\r\n <span class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;--_tag-py: 4px;--_tag-px: 10px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 16px;--_tag-dot: 7px;--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black);display:inline-flex;align-items:center;gap:var(--_tag-gap);box-sizing:border-box;max-width:100%;padding:var(--_tag-py) var(--_tag-px);border-radius:var(--ius-radius-pill);border:1px solid transparent;background:var(--_c-soft);color:var(--_c-fg);font-family:var(--ius-font-body);font-size:var(--_tag-fs);line-height:var(--_tag-lh);font-weight:500;vertical-align:middle;white-space:nowrap;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_tag-py: 2px;--_tag-px: 8px;--_tag-fs: var(--ius-fs-sm);--_tag-lh: var(--ius-lh-sm);--_tag-gap: var(--ius-space-xxs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 14px;--_tag-dot: 6px}:host([data-size=large]){--_tag-py: 6px;--_tag-px: 12px;--_tag-fs: var(--ius-fs-base);--_tag-lh: var(--ius-lh-base);--_tag-gap: var(--ius-space-xs);--_tag-icon: var(--ius-icon-sm);--_tag-x: 18px;--_tag-dot: 8px}:host([data-shape=rounded]){border-radius:var(--ius-radius-md)}:host([data-tone=primary]){--_c-soft: var(--ius-primary-100);--_c-soft-h: var(--ius-primary-200);--_c-soft-p: var(--ius-primary-300);--_c-fg: var(--ius-primary-700);--_c-accent: var(--ius-primary-500);--_c-solid: var(--ius-primary-900);--_c-solid-h: var(--ius-primary-800);--_c-solid-p: var(--ius-primary-700)}:host([data-tone=info]){--_c-soft: var(--ius-info-100);--_c-soft-h: var(--ius-info-200);--_c-soft-p: var(--ius-info-300);--_c-fg: var(--ius-info-700);--_c-accent: var(--ius-info-500);--_c-solid: var(--ius-info-600);--_c-solid-h: var(--ius-info-700);--_c-solid-p: var(--ius-info-800)}:host([data-tone=success]){--_c-soft: var(--ius-success-100);--_c-soft-h: var(--ius-success-200);--_c-soft-p: var(--ius-success-300);--_c-fg: var(--ius-success-800);--_c-accent: var(--ius-success-600);--_c-solid: var(--ius-success-600);--_c-solid-h: var(--ius-success-700);--_c-solid-p: var(--ius-success-800)}:host([data-tone=warning]){--_c-soft: var(--ius-warning-100);--_c-soft-h: var(--ius-warning-200);--_c-soft-p: var(--ius-warning-300);--_c-fg: var(--ius-warning-800);--_c-accent: var(--ius-warning-600);--_c-solid: var(--ius-warning-600);--_c-solid-h: var(--ius-warning-700);--_c-solid-p: var(--ius-warning-800)}:host([data-tone=danger]){--_c-soft: var(--ius-danger-100);--_c-soft-h: var(--ius-danger-200);--_c-soft-p: var(--ius-danger-300);--_c-fg: var(--ius-danger-700);--_c-accent: var(--ius-danger-500);--_c-solid: var(--ius-danger-600);--_c-solid-h: var(--ius-danger-700);--_c-solid-p: var(--ius-danger-800)}:host([data-tone=neutral]){--_c-soft: var(--ius-neutral-2);--_c-soft-h: var(--ius-neutral-3);--_c-soft-p: var(--ius-neutral-4);--_c-fg: var(--ius-neutral-9);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-9);--_c-solid-h: var(--ius-neutral-10);--_c-solid-p: var(--ius-neutral-black)}:host([data-tone=durazno]){--_c-soft: var(--ius-durazno-100);--_c-soft-h: var(--ius-durazno-200);--_c-soft-p: var(--ius-durazno-300);--_c-fg: var(--ius-durazno-700);--_c-accent: var(--ius-durazno-500);--_c-solid: var(--ius-durazno-600);--_c-solid-h: var(--ius-durazno-700);--_c-solid-p: var(--ius-durazno-800)}:host([data-tone=banano]){--_c-soft: var(--ius-banano-100);--_c-soft-h: var(--ius-banano-200);--_c-soft-p: var(--ius-banano-300);--_c-fg: var(--ius-banano-800);--_c-accent: var(--ius-banano-500);--_c-solid: var(--ius-banano-700);--_c-solid-h: var(--ius-banano-800);--_c-solid-p: var(--ius-banano-900)}:host([data-tone=sandia]){--_c-soft: var(--ius-sandia-100);--_c-soft-h: var(--ius-sandia-200);--_c-soft-p: var(--ius-sandia-300);--_c-fg: var(--ius-sandia-700);--_c-accent: var(--ius-sandia-500);--_c-solid: var(--ius-sandia-600);--_c-solid-h: var(--ius-sandia-700);--_c-solid-p: var(--ius-sandia-800)}:host([data-tone=arandano]){--_c-soft: var(--ius-arandano-100);--_c-soft-h: var(--ius-arandano-200);--_c-soft-p: var(--ius-arandano-300);--_c-fg: var(--ius-arandano-700);--_c-accent: var(--ius-arandano-500);--_c-solid: var(--ius-arandano-600);--_c-solid-h: var(--ius-arandano-700);--_c-solid-p: var(--ius-arandano-800)}:host([data-tone=uva]){--_c-soft: var(--ius-uva-100);--_c-soft-h: var(--ius-uva-200);--_c-soft-p: var(--ius-uva-300);--_c-fg: var(--ius-uva-700);--_c-accent: var(--ius-uva-500);--_c-solid: var(--ius-uva-600);--_c-solid-h: var(--ius-uva-700);--_c-solid-p: var(--ius-uva-800)}:host([data-tone=aguacate]){--_c-soft: var(--ius-aguacate-100);--_c-soft-h: var(--ius-aguacate-200);--_c-soft-p: var(--ius-aguacate-300);--_c-fg: var(--ius-aguacate-700);--_c-accent: var(--ius-aguacate-500);--_c-solid: var(--ius-aguacate-600);--_c-solid-h: var(--ius-aguacate-700);--_c-solid-p: var(--ius-aguacate-800)}:host([data-variant=outline]){background:var(--ius-neutral-white);color:var(--ius-text-primary);border-color:var(--ius-stroke)}:host([data-variant=solid]){background:var(--_c-solid);color:var(--ius-neutral-white);border-color:transparent}.ius-tag__dot{flex:0 0 auto;width:var(--_tag-dot);height:var(--_tag-dot);border-radius:var(--ius-radius-pill);background:var(--_c-accent)}.ius-tag__icon{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}.ius-tag__icon .ius-icon{font-size:var(--_tag-icon);line-height:1}:host([data-variant=solid]) .ius-tag__icon{color:currentColor}:host([data-variant=solid]) .ius-tag__dot{background:currentColor}.ius-tag__label{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-tag__count{flex:0 0 auto;opacity:.6;font-variant-numeric:tabular-nums}.ius-tag__suffix{display:inline-flex;flex:0 0 auto;color:var(--_c-accent)}:host([data-variant=solid]) .ius-tag__suffix{color:currentColor}.ius-tag__suffix .ius-icon{font-size:var(--_tag-icon);line-height:1}.ius-tag__x{appearance:none;border:0;margin:0 -2px 0 0;padding:0;flex:0 0 auto;width:var(--_tag-x);height:var(--_tag-x);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:transparent;color:currentColor;opacity:.6;cursor:pointer;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tag__x:hover{opacity:1;background:#00000014}:host([data-variant=solid]) .ius-tag__x:hover{background:#ffffff38}.ius-tag__x .ius-icon{font-size:calc(var(--_tag-x) - 3px);line-height:1}:host([data-interactive=true]){cursor:pointer;appearance:none;font:inherit}:host([data-interactive=true][data-variant=soft]:hover),:host([data-variant=soft][data-state=hover]){background:var(--_c-soft-h)}:host([data-interactive=true][data-variant=outline]:hover),:host([data-variant=outline][data-state=hover]){background:var(--_c-soft);border-color:transparent}:host([data-interactive=true][data-variant=solid]:hover),:host([data-variant=solid][data-state=hover]){background:var(--_c-solid-h)}:host([data-interactive=true][data-variant=soft]:active),:host([data-variant=soft][data-state=pressed]){background:var(--_c-soft-p)}:host([data-interactive=true][data-variant=outline]:active),:host([data-variant=outline][data-state=pressed]){background:var(--_c-soft-h);border-color:transparent}:host([data-interactive=true][data-variant=solid]:active),:host([data-variant=solid][data-state=pressed]){background:var(--_c-solid-p)}:host([data-interactive=true]:focus-visible),:host([data-state=focused]){outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_c-accent) 35%,transparent)}:host([data-disabled=true]){background:var(--ius-neutral-2);border-color:transparent;color:var(--ius-text-disabled);cursor:default;pointer-events:none}:host([data-disabled=true]) .ius-tag__dot{background:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tag__icon,:host([data-disabled=true]) .ius-tag__suffix{color:var(--ius-text-disabled)}\n"] }]
|
|
4590
4591
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], dot: [{ type: i0.Input, args: [{ isSignal: true, alias: "dot", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], closed: [{ type: i0.Output, args: ["closed"] }], prefixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusTagPrefixDirective), { isSignal: true }] }], suffixRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusTagSuffixDirective), { isSignal: true }] }] } });
|
|
4591
4592
|
|
|
4592
|
-
let uid$
|
|
4593
|
+
let uid$3 = 0;
|
|
4593
4594
|
/**
|
|
4594
4595
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
4595
4596
|
*
|
|
@@ -4645,7 +4646,7 @@ class MultiTextFieldComponent {
|
|
|
4645
4646
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
4646
4647
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
4647
4648
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
4648
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
4649
|
+
this.baseIdState = `ius-mtf-${uid$3++}`;
|
|
4649
4650
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
4650
4651
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
4651
4652
|
this.onChange = () => { };
|
|
@@ -5252,11 +5253,11 @@ class TextComponent {
|
|
|
5252
5253
|
return st;
|
|
5253
5254
|
}
|
|
5254
5255
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5255
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextComponent, isStandalone: true, selector: "ius-text", inputs: { variant: "variant", color: "color", weight: "weight", as: "as", align: "align", italic: ["italic", "italic", booleanAttribute], truncate: ["truncate", "truncate", booleanAttribute], tabularNums: ["tabularNums", "tabularNums", booleanAttribute], for: "for" }, ngImport: i0, template: "@switch (tag) {\r\n @case ('h1') {\r\n <h1 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h5>\r\n }\r\n @case ('p') {\r\n <p [class]=\"klass\" [style]=\"styleObject\"><ng-content /></p>\r\n }\r\n @case ('label') {\r\n <label [class]=\"klass\" [style]=\"styleObject\" [attr.for]=\"for || null\"><ng-content /></label>\r\n }\r\n @case ('div') {\r\n <div [class]=\"klass\" [style]=\"styleObject\"><ng-content /></div>\r\n }\r\n @case ('strong') {\r\n <strong [class]=\"klass\" [style]=\"styleObject\"><ng-content /></strong>\r\n }\r\n @case ('em') {\r\n <em [class]=\"klass\" [style]=\"styleObject\"><ng-content /></em>\r\n }\r\n @case ('small') {\r\n <small [class]=\"klass\" [style]=\"styleObject\"><ng-content /></small>\r\n }\r\n @default {\r\n <span [class]=\"klass\" [style]=\"styleObject\"><ng-content /></span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-text{margin:0;text-wrap:pretty}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5256
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextComponent, isStandalone: true, selector: "ius-text", inputs: { variant: "variant", color: "color", weight: "weight", as: "as", align: "align", italic: ["italic", "italic", booleanAttribute], truncate: ["truncate", "truncate", booleanAttribute], tabularNums: ["tabularNums", "tabularNums", booleanAttribute], for: "for" }, ngImport: i0, template: "<!-- El contenido se captura UNA sola vez y se estampa en el branch activo con\r\n NgTemplateOutlet. Un <ng-content /> repetido por @case NO funciona: Angular\r\n asigna el contenido proyectado a un \u00FAnico slot y los branches del @switch\r\n renderizan vac\u00EDo (bug real: todos los ius-text del login sal\u00EDan sin texto). -->\r\n<ng-template #content><ng-content /></ng-template>\r\n\r\n@switch (tag) {\r\n @case ('h1') {\r\n <h1 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h5>\r\n }\r\n @case ('p') {\r\n <p [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></p>\r\n }\r\n @case ('label') {\r\n <label [class]=\"klass\" [style]=\"styleObject\" [attr.for]=\"for || null\"><ng-container [ngTemplateOutlet]=\"content\" /></label>\r\n }\r\n @case ('div') {\r\n <div [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></div>\r\n }\r\n @case ('strong') {\r\n <strong [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></strong>\r\n }\r\n @case ('em') {\r\n <em [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></em>\r\n }\r\n @case ('small') {\r\n <small [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></small>\r\n }\r\n @default {\r\n <span [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-text{margin:0;text-wrap:pretty}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5256
5257
|
}
|
|
5257
5258
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextComponent, decorators: [{
|
|
5258
5259
|
type: Component,
|
|
5259
|
-
args: [{ selector: 'ius-text', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: "@switch (tag) {\r\n @case ('h1') {\r\n <h1 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"klass\" [style]=\"styleObject\"><ng-content /></h5>\r\n }\r\n @case ('p') {\r\n <p [class]=\"klass\" [style]=\"styleObject\"><ng-content /></p>\r\n }\r\n @case ('label') {\r\n <label [class]=\"klass\" [style]=\"styleObject\" [attr.for]=\"for || null\"><ng-content /></label>\r\n }\r\n @case ('div') {\r\n <div [class]=\"klass\" [style]=\"styleObject\"><ng-content /></div>\r\n }\r\n @case ('strong') {\r\n <strong [class]=\"klass\" [style]=\"styleObject\"><ng-content /></strong>\r\n }\r\n @case ('em') {\r\n <em [class]=\"klass\" [style]=\"styleObject\"><ng-content /></em>\r\n }\r\n @case ('small') {\r\n <small [class]=\"klass\" [style]=\"styleObject\"><ng-content /></small>\r\n }\r\n @default {\r\n <span [class]=\"klass\" [style]=\"styleObject\"><ng-content /></span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-text{margin:0;text-wrap:pretty}\n"] }]
|
|
5260
|
+
args: [{ selector: 'ius-text', standalone: true, imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- El contenido se captura UNA sola vez y se estampa en el branch activo con\r\n NgTemplateOutlet. Un <ng-content /> repetido por @case NO funciona: Angular\r\n asigna el contenido proyectado a un \u00FAnico slot y los branches del @switch\r\n renderizan vac\u00EDo (bug real: todos los ius-text del login sal\u00EDan sin texto). -->\r\n<ng-template #content><ng-content /></ng-template>\r\n\r\n@switch (tag) {\r\n @case ('h1') {\r\n <h1 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h1>\r\n }\r\n @case ('h2') {\r\n <h2 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h2>\r\n }\r\n @case ('h3') {\r\n <h3 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h3>\r\n }\r\n @case ('h4') {\r\n <h4 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h4>\r\n }\r\n @case ('h5') {\r\n <h5 [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></h5>\r\n }\r\n @case ('p') {\r\n <p [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></p>\r\n }\r\n @case ('label') {\r\n <label [class]=\"klass\" [style]=\"styleObject\" [attr.for]=\"for || null\"><ng-container [ngTemplateOutlet]=\"content\" /></label>\r\n }\r\n @case ('div') {\r\n <div [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></div>\r\n }\r\n @case ('strong') {\r\n <strong [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></strong>\r\n }\r\n @case ('em') {\r\n <em [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></em>\r\n }\r\n @case ('small') {\r\n <small [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></small>\r\n }\r\n @default {\r\n <span [class]=\"klass\" [style]=\"styleObject\"><ng-container [ngTemplateOutlet]=\"content\" /></span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-text{margin:0;text-wrap:pretty}\n"] }]
|
|
5260
5261
|
}], propDecorators: { variant: [{
|
|
5261
5262
|
type: Input
|
|
5262
5263
|
}], color: [{
|
|
@@ -5667,7 +5668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
5667
5668
|
type: Output
|
|
5668
5669
|
}] } });
|
|
5669
5670
|
|
|
5670
|
-
let uid = 0;
|
|
5671
|
+
let uid$2 = 0;
|
|
5671
5672
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
5672
5673
|
function isGrouped(options) {
|
|
5673
5674
|
return (Array.isArray(options) &&
|
|
@@ -5702,9 +5703,10 @@ function buildVisible(options, query) {
|
|
|
5702
5703
|
*
|
|
5703
5704
|
* Campo desplegable que reúne el shell del **TextField** (label + required +
|
|
5704
5705
|
* iconHelp + prefixIcon + sufix chevron + estados + helpText/errorText, `size`)
|
|
5705
|
-
* y abre un menú con **scroll**, **búsqueda en vivo** (caja dentro del menú)
|
|
5706
|
-
* **selección única o múltiple
|
|
5707
|
-
*
|
|
5706
|
+
* y abre un menú con **scroll**, **búsqueda en vivo** (caja dentro del menú),
|
|
5707
|
+
* **selección única o múltiple** y —con `creatable`— un **pie para agregar
|
|
5708
|
+
* opciones nuevas en vivo**. Implementa `ControlValueAccessor` completo (valor
|
|
5709
|
+
* escalar en single / array en múltiple) y además soporta `[(value)]`.
|
|
5708
5710
|
*
|
|
5709
5711
|
* - Single: muestra la etiqueta elegida; la opción se resalta en azul (fill).
|
|
5710
5712
|
* - Múltiple: chips removibles dentro del campo + check por opción elegida.
|
|
@@ -5714,9 +5716,10 @@ function buildVisible(options, query) {
|
|
|
5714
5716
|
* Notas del port a Angular:
|
|
5715
5717
|
* - El shell `.ius-tf` del TextField está *scoped* (`:host`) en su componente,
|
|
5716
5718
|
* así que su CSS se re-porta aquí (mismo patrón que el resto del monorepo).
|
|
5717
|
-
* - El golden compone `OptionItem` (filas)
|
|
5718
|
-
*
|
|
5719
|
-
*
|
|
5719
|
+
* - El golden compone `OptionItem` (filas), `Chip` (chips de múltiple),
|
|
5720
|
+
* `Popover` (ícono de ayuda) y `TextButton` (acción del pie `creatable`):
|
|
5721
|
+
* todos ya portados, se componen aquí como `ius-option-item` / `ius-chip` /
|
|
5722
|
+
* `ius-popover` / `ius-text-button` (sin CSS inlineado ni reimplementación).
|
|
5720
5723
|
* - El menú se portalea a `document.body` vía **CDK Overlay**
|
|
5721
5724
|
* (`flexibleConnectedTo` el trigger + `scrollStrategy: reposition`), con
|
|
5722
5725
|
* flip abajo/arriba e igualando el ancho del campo — espejo de
|
|
@@ -5724,10 +5727,28 @@ function buildVisible(options, query) {
|
|
|
5724
5727
|
* estilos del menú siguen aplicando dentro del overlay porque Angular
|
|
5725
5728
|
* inyecta el `<style>` scopeado en el `<head>` global (mismo patrón que
|
|
5726
5729
|
* `ius-modal`, ver `src/lib/modal/modal.component.ts`).
|
|
5730
|
+
*
|
|
5731
|
+
* **Creatable — decisiones del port** (para diseño):
|
|
5732
|
+
* - El golden implementa `creatable` como un **pie propio del menú** con su
|
|
5733
|
+
* campo de texto (`draft`) + `TextButton prefixIcon="add"`, *independiente*
|
|
5734
|
+
* de la caja de búsqueda (conviven). NO es el patrón «la opción nueva
|
|
5735
|
+
* aparece dentro de la lista cuando la búsqueda no matchea ninguna opción»;
|
|
5736
|
+
* si diseño quisiera ese otro patrón, primero hay que cambiar el golden.
|
|
5737
|
+
* - `onCreate` del golden **retorna** la opción a insertar. Un `EventEmitter`
|
|
5738
|
+
* de Angular no puede devolver un valor al emisor, así que el contrato se
|
|
5739
|
+
* parte en dos: `createFactory` (input — la mitad que retorna) + `created`
|
|
5740
|
+
* (output — la mitad que avisa). Ver el TSDoc de cada uno.
|
|
5741
|
+
*
|
|
5742
|
+
* **Divergencia doc-vs-golden anotada** (manda el golden):
|
|
5743
|
+
* - `listMaxH` usa la escala de fila del golden (32/38/46 px por
|
|
5744
|
+
* small/medium/large). El box-model real de `OptionItem` da 32/36/42; el
|
|
5745
|
+
* golden la llama «approx option row height by size» y deja aire de sobra
|
|
5746
|
+
* para el `gap` entre filas. Se conserva la del golden para que `maxVisible`
|
|
5747
|
+
* recorte igual que en el DS.
|
|
5727
5748
|
*/
|
|
5728
5749
|
class SelectComponent {
|
|
5729
5750
|
constructor() {
|
|
5730
|
-
// ── Inputs reactivos (signals)
|
|
5751
|
+
// ── Inputs reactivos (signals)
|
|
5731
5752
|
this.optionsState = signal([], /* @ts-ignore */
|
|
5732
5753
|
...(ngDevMode ? [{ debugName: "optionsState" }] : /* istanbul ignore next */ []));
|
|
5733
5754
|
this.multipleState = signal(false, /* @ts-ignore */
|
|
@@ -5757,11 +5778,22 @@ class SelectComponent {
|
|
|
5757
5778
|
this.searchPlaceholder = 'Buscar';
|
|
5758
5779
|
/** Mensaje cuando la búsqueda no arroja resultados. */
|
|
5759
5780
|
this.emptyText = 'Sin resultados';
|
|
5781
|
+
/**
|
|
5782
|
+
* Permitir **agregar opciones** desde un pie dentro del menú (campo de texto
|
|
5783
|
+
* + botón «Agregar» con ícono `add`). Las opciones nuevas se anexan a la
|
|
5784
|
+
* lista en vivo —a un grupo sin encabezado al final si la lista está
|
|
5785
|
+
* agrupada— y no duplican `value` existentes. Convive con `searchable`.
|
|
5786
|
+
*/
|
|
5787
|
+
this.creatable = false;
|
|
5788
|
+
/** Placeholder del campo de «agregar» (solo con `creatable`). */
|
|
5789
|
+
this.createPlaceholder = 'Escribir opción';
|
|
5790
|
+
/** Texto del botón de «agregar» (solo con `creatable`). */
|
|
5791
|
+
this.createLabel = 'Agregar';
|
|
5760
5792
|
/** Opciones visibles antes de hacer scroll. */
|
|
5761
5793
|
this.maxVisible = 5;
|
|
5762
5794
|
/** Mostrar/ocultar el texto de ayuda. */
|
|
5763
5795
|
this.showHelpText = true;
|
|
5764
|
-
/** Ícono de ayuda `?` junto al label. */
|
|
5796
|
+
/** Ícono de ayuda `?` junto al label (abre `ius-popover` al hover/foco). */
|
|
5765
5797
|
this.showIconHelp = false;
|
|
5766
5798
|
/**
|
|
5767
5799
|
* Mostrar el botón de limpiar (`cancel`). Solo aparece con valor y campo
|
|
@@ -5772,20 +5804,33 @@ class SelectComponent {
|
|
|
5772
5804
|
this.defaultOpen = false;
|
|
5773
5805
|
/** Variante compacta (sin ancho mínimo, padding reducido). Usado por SelectNumber. */
|
|
5774
5806
|
this.compact = false;
|
|
5775
|
-
// ── Outputs
|
|
5807
|
+
// ── Outputs
|
|
5776
5808
|
/** Cambio de valor (original `onChange`). Habilita `[(value)]`. */
|
|
5777
5809
|
this.valueChange = new EventEmitter();
|
|
5778
5810
|
/** Al limpiar el campo (original `onClear`). */
|
|
5779
5811
|
this.cleared = new EventEmitter();
|
|
5780
5812
|
/** Cambio de apertura del menú (original `onOpenChange`). */
|
|
5781
5813
|
this.openChange = new EventEmitter();
|
|
5782
|
-
|
|
5814
|
+
/**
|
|
5815
|
+
* Opción agregada por `creatable` — mitad «aviso» del `onCreate` del golden
|
|
5816
|
+
* (la mitad «que retorna la opción» es el input `createFactory`). Solo emite
|
|
5817
|
+
* cuando la opción se anexó de verdad: un texto cuyo `value` ya existe en la
|
|
5818
|
+
* lista no emite nada.
|
|
5819
|
+
*/
|
|
5820
|
+
this.created = new EventEmitter();
|
|
5821
|
+
// ── Estado interno
|
|
5783
5822
|
this.internalOpen = signal(false, /* @ts-ignore */
|
|
5784
5823
|
...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
|
|
5785
5824
|
this.query = signal('', /* @ts-ignore */
|
|
5786
5825
|
...(ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []));
|
|
5787
5826
|
this.activeIndex = signal(0, /* @ts-ignore */
|
|
5788
5827
|
...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
|
|
5828
|
+
/** Texto en curso del pie `creatable` (se limpia al agregar y al cerrar). */
|
|
5829
|
+
this.draft = signal('', /* @ts-ignore */
|
|
5830
|
+
...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
5831
|
+
/** Opciones agregadas en vivo por `creatable` (se anexan a `options`). */
|
|
5832
|
+
this.createdOptions = signal([], /* @ts-ignore */
|
|
5833
|
+
...(ngDevMode ? [{ debugName: "createdOptions" }] : /* istanbul ignore next */ []));
|
|
5789
5834
|
/** Ancho del menú (portal CDK) — igualado al ancho del campo. */
|
|
5790
5835
|
this.menuWidth = signal(220, /* @ts-ignore */
|
|
5791
5836
|
...(ngDevMode ? [{ debugName: "menuWidth" }] : /* istanbul ignore next */ []));
|
|
@@ -5795,12 +5840,16 @@ class SelectComponent {
|
|
|
5795
5840
|
...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
|
|
5796
5841
|
this.search = viewChild('search', /* @ts-ignore */
|
|
5797
5842
|
...(ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []));
|
|
5843
|
+
this.createInput = viewChild('createInput', /* @ts-ignore */
|
|
5844
|
+
...(ngDevMode ? [{ debugName: "createInput" }] : /* istanbul ignore next */ []));
|
|
5798
5845
|
this.menuTpl = viewChild('menuTpl', /* @ts-ignore */
|
|
5799
5846
|
...(ngDevMode ? [{ debugName: "menuTpl" }] : /* istanbul ignore next */ []));
|
|
5800
|
-
|
|
5801
|
-
|
|
5802
|
-
|
|
5803
|
-
|
|
5847
|
+
/**
|
|
5848
|
+
* `id` de respaldo. `baseId` NO puede ser un inicializador de campo: esos
|
|
5849
|
+
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
5850
|
+
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
5851
|
+
*/
|
|
5852
|
+
this.fallbackId = `ius-sel-${uid$2++}`;
|
|
5804
5853
|
this.onChange = () => { };
|
|
5805
5854
|
this.onTouched = () => { };
|
|
5806
5855
|
this.overlay = inject(Overlay);
|
|
@@ -5809,12 +5858,19 @@ class SelectComponent {
|
|
|
5809
5858
|
this.raf = 0;
|
|
5810
5859
|
// ── Typeahead (buffer de teclas imprimibles, expira a los ~700ms)
|
|
5811
5860
|
this.typeaheadBuffer = '';
|
|
5812
|
-
// ── Derivados
|
|
5861
|
+
// ── Derivados
|
|
5813
5862
|
this.isDisabled = computed(() => this.disabledState() || this.stateInput() === 'disabled', /* @ts-ignore */
|
|
5814
5863
|
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
5815
5864
|
this.isError = computed(() => this.errorState() || this.stateInput() === 'error', /* @ts-ignore */
|
|
5816
5865
|
...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
5817
|
-
|
|
5866
|
+
/**
|
|
5867
|
+
* Apertura efectiva. `state="open"` entra aquí (y no solo en `ngOnInit`) para
|
|
5868
|
+
* que forzar el estado desde un especimen funcione en caliente, igual que el
|
|
5869
|
+
* card remontado del proyecto de diseño.
|
|
5870
|
+
*/
|
|
5871
|
+
this.isOpen = computed(() => (this.openControlled
|
|
5872
|
+
? this.openInput()
|
|
5873
|
+
: this.internalOpen() || this.stateInput() === 'open') &&
|
|
5818
5874
|
!this.isDisabled(), /* @ts-ignore */
|
|
5819
5875
|
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
5820
5876
|
/** `data-focused` del host (espejo del golden): abierto, forzado o error. */
|
|
@@ -5825,10 +5881,29 @@ class SelectComponent {
|
|
|
5825
5881
|
? true
|
|
5826
5882
|
: null, /* @ts-ignore */
|
|
5827
5883
|
...(ngDevMode ? [{ debugName: "focusedAttr" }] : /* istanbul ignore next */ []));
|
|
5828
|
-
|
|
5884
|
+
/**
|
|
5885
|
+
* Opciones efectivas = las de `options` + las agregadas en vivo por
|
|
5886
|
+
* `creatable`. Si la lista viene agrupada, las nuevas van a un grupo sin
|
|
5887
|
+
* encabezado al final (espejo de `mergedOptions` del golden).
|
|
5888
|
+
*/
|
|
5889
|
+
this.mergedOptions = computed(() => {
|
|
5890
|
+
const base = this.optionsState();
|
|
5891
|
+
const extra = this.createdOptions();
|
|
5892
|
+
if (!extra.length)
|
|
5893
|
+
return base;
|
|
5894
|
+
if (isGrouped(base)) {
|
|
5895
|
+
return [...base, { label: null, options: extra }];
|
|
5896
|
+
}
|
|
5897
|
+
return [...base, ...extra];
|
|
5898
|
+
}, /* @ts-ignore */
|
|
5899
|
+
...(ngDevMode ? [{ debugName: "mergedOptions" }] : /* istanbul ignore next */ []));
|
|
5900
|
+
this.allFlat = computed(() => buildVisible(this.mergedOptions(), '').flat, /* @ts-ignore */
|
|
5829
5901
|
...(ngDevMode ? [{ debugName: "allFlat" }] : /* istanbul ignore next */ []));
|
|
5830
|
-
this.visible = computed(() => buildVisible(this.
|
|
5902
|
+
this.visible = computed(() => buildVisible(this.mergedOptions(), this.query()), /* @ts-ignore */
|
|
5831
5903
|
...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
|
|
5904
|
+
/** El botón «Agregar» se habilita solo con texto no vacío (golden). */
|
|
5905
|
+
this.createDisabled = computed(() => !this.draft().trim(), /* @ts-ignore */
|
|
5906
|
+
...(ngDevMode ? [{ debugName: "createDisabled" }] : /* istanbul ignore next */ []));
|
|
5832
5907
|
this.hasValue = computed(() => {
|
|
5833
5908
|
const v = this.valueState();
|
|
5834
5909
|
if (this.multipleState())
|
|
@@ -5846,6 +5921,21 @@ class SelectComponent {
|
|
|
5846
5921
|
return Array.isArray(v) ? null : v;
|
|
5847
5922
|
}, /* @ts-ignore */
|
|
5848
5923
|
...(ngDevMode ? [{ debugName: "singleValue" }] : /* istanbul ignore next */ []));
|
|
5924
|
+
/**
|
|
5925
|
+
* Única fuente del ciclo de vida del overlay: se monta y se desmonta según
|
|
5926
|
+
* `isOpen()`, venga de donde venga (interno, `[open]` controlado o
|
|
5927
|
+
* `state="open"` de un especimen). `attachOverlay` ya es idempotente.
|
|
5928
|
+
*/
|
|
5929
|
+
this.openSync = effect(() => {
|
|
5930
|
+
if (this.isOpen()) {
|
|
5931
|
+
this.scheduleOpen(true);
|
|
5932
|
+
}
|
|
5933
|
+
else {
|
|
5934
|
+
cancelAnimationFrame(this.raf);
|
|
5935
|
+
this.detachOverlay();
|
|
5936
|
+
}
|
|
5937
|
+
}, /* @ts-ignore */
|
|
5938
|
+
...(ngDevMode ? [{ debugName: "openSync" }] : /* istanbul ignore next */ []));
|
|
5849
5939
|
this.onWindowResize = () => {
|
|
5850
5940
|
this.updateMenuWidth();
|
|
5851
5941
|
this.overlayRef?.updatePosition();
|
|
@@ -5910,7 +6000,17 @@ class SelectComponent {
|
|
|
5910
6000
|
get value() {
|
|
5911
6001
|
return this.valueState();
|
|
5912
6002
|
}
|
|
5913
|
-
|
|
6003
|
+
get baseId() {
|
|
6004
|
+
return this.id || this.fallbackId;
|
|
6005
|
+
}
|
|
6006
|
+
get helpId() {
|
|
6007
|
+
return `${this.baseId}-help`;
|
|
6008
|
+
}
|
|
6009
|
+
/** `id` único del menú — target de `aria-controls` en el trigger. */
|
|
6010
|
+
get menuId() {
|
|
6011
|
+
return `${this.baseId}-menu`;
|
|
6012
|
+
}
|
|
6013
|
+
// ── Getters de presentación (derivados de inputs planos)
|
|
5914
6014
|
get hint() {
|
|
5915
6015
|
return this.isError() ? this.errorText || this.helpText : this.helpText;
|
|
5916
6016
|
}
|
|
@@ -5920,22 +6020,43 @@ class SelectComponent {
|
|
|
5920
6020
|
get showClearComputed() {
|
|
5921
6021
|
return this.showClear && this.hasValue() && !this.isDisabled();
|
|
5922
6022
|
}
|
|
5923
|
-
|
|
5924
|
-
|
|
6023
|
+
/**
|
|
6024
|
+
* ¿El campo es "clearable-capable"? Espejo de `clearReserved` del golden: solo
|
|
6025
|
+
* entonces el botón de limpiar entra en el flujo (y dentro de ese caso el slot
|
|
6026
|
+
* se reserva con `visibility`). Con `showClear=false` o `disabled` el golden no
|
|
6027
|
+
* pinta el botón, así que tampoco debe quedar el hueco.
|
|
6028
|
+
*/
|
|
6029
|
+
get clearReserved() {
|
|
6030
|
+
return this.showClear && !this.isDisabled();
|
|
6031
|
+
}
|
|
6032
|
+
/** El popover de ayuda solo tiene sentido con título o contenido. */
|
|
6033
|
+
get iconHelpEmpty() {
|
|
6034
|
+
return !this.iconHelpTitle && !this.iconHelpContent;
|
|
6035
|
+
}
|
|
6036
|
+
/**
|
|
6037
|
+
* Tamaño de los chips de múltiple. El golden usa un chip **más pequeño que
|
|
6038
|
+
* el campo**: `large → medium`, el resto `small`
|
|
6039
|
+
* (`chipSize` en `Select.jsx`).
|
|
6040
|
+
*/
|
|
6041
|
+
get chipSize() {
|
|
6042
|
+
return this.sizeState() === 'large' ? 'medium' : 'small';
|
|
6043
|
+
}
|
|
6044
|
+
/** Tamaño del `TextButton` del pie `creatable` (golden: `large → medium`). */
|
|
6045
|
+
get createButtonSize() {
|
|
6046
|
+
return this.sizeState() === 'large' ? 'medium' : 'small';
|
|
5925
6047
|
}
|
|
5926
6048
|
/**
|
|
5927
|
-
* Alto de fila usado para `maxVisible × itemH
|
|
5928
|
-
*
|
|
5929
|
-
*
|
|
5930
|
-
*
|
|
5931
|
-
*
|
|
5932
|
-
*
|
|
5933
|
-
* (`--ius-space-xxs`) — constante estructural documentada, no medida en
|
|
6049
|
+
* Alto de fila usado para `maxVisible × itemH`. Escala del golden
|
|
6050
|
+
* (`Select.jsx`: «approx option row height by size») — small 32 · medium 38
|
|
6051
|
+
* · large 46 px. Es una aproximación *deliberadamente* mayor que el
|
|
6052
|
+
* box-model real de `OptionItem` (`--_opt-py`×2 + `--ius-lh-base` = 32/36/42)
|
|
6053
|
+
* porque deja aire para el `gap` (`--ius-space-xxs`) entre filas de
|
|
6054
|
+
* `.ius-selectmenu__list`. Constante estructural del golden, no medida en
|
|
5934
6055
|
* runtime.
|
|
5935
6056
|
*/
|
|
5936
6057
|
get listMaxH() {
|
|
5937
6058
|
const sz = this.sizeState();
|
|
5938
|
-
const itemH = sz === 'small' ? 32 : sz === 'large' ?
|
|
6059
|
+
const itemH = sz === 'small' ? 32 : sz === 'large' ? 46 : 38;
|
|
5939
6060
|
return this.maxVisible * itemH;
|
|
5940
6061
|
}
|
|
5941
6062
|
labelFor(val) {
|
|
@@ -5948,7 +6069,7 @@ class SelectComponent {
|
|
|
5948
6069
|
? Array.isArray(v) && v.includes(val)
|
|
5949
6070
|
: v === val;
|
|
5950
6071
|
}
|
|
5951
|
-
// ── Ciclo de vida
|
|
6072
|
+
// ── Ciclo de vida
|
|
5952
6073
|
ngOnInit() {
|
|
5953
6074
|
if (!this.hasExplicitValue && this.defaultValue !== undefined) {
|
|
5954
6075
|
this.valueState.set(this.defaultValue);
|
|
@@ -5956,9 +6077,8 @@ class SelectComponent {
|
|
|
5956
6077
|
else if (!this.hasExplicitValue) {
|
|
5957
6078
|
this.valueState.set(this.multipleState() ? [] : null);
|
|
5958
6079
|
}
|
|
5959
|
-
if (!this.openControlled &&
|
|
6080
|
+
if (!this.openControlled && this.defaultOpen) {
|
|
5960
6081
|
this.internalOpen.set(true);
|
|
5961
|
-
this.scheduleOpen(true);
|
|
5962
6082
|
}
|
|
5963
6083
|
}
|
|
5964
6084
|
ngOnDestroy() {
|
|
@@ -5966,7 +6086,7 @@ class SelectComponent {
|
|
|
5966
6086
|
clearTimeout(this.typeaheadTimer);
|
|
5967
6087
|
this.detachOverlay();
|
|
5968
6088
|
}
|
|
5969
|
-
// ── ControlValueAccessor
|
|
6089
|
+
// ── ControlValueAccessor
|
|
5970
6090
|
writeValue(value) {
|
|
5971
6091
|
this.hasExplicitValue = true;
|
|
5972
6092
|
this.valueState.set(value ?? (this.multipleState() ? [] : null));
|
|
@@ -5980,7 +6100,7 @@ class SelectComponent {
|
|
|
5980
6100
|
setDisabledState(isDisabled) {
|
|
5981
6101
|
this.disabledState.set(isDisabled);
|
|
5982
6102
|
}
|
|
5983
|
-
// ── Interacción
|
|
6103
|
+
// ── Interacción
|
|
5984
6104
|
commit(next) {
|
|
5985
6105
|
this.valueState.set(next);
|
|
5986
6106
|
this.onChange(next);
|
|
@@ -6021,26 +6141,77 @@ class SelectComponent {
|
|
|
6021
6141
|
return;
|
|
6022
6142
|
this.setOpen(!this.isOpen());
|
|
6023
6143
|
}
|
|
6144
|
+
/**
|
|
6145
|
+
* Solo actualiza estado y notifica. El montaje/desmontaje del overlay NO va
|
|
6146
|
+
* aquí: lo gobierna `openSync` a partir de `isOpen()`. Si se hiciera aquí, en
|
|
6147
|
+
* modo controlado (`[open]`) el menú se abriría sin permiso del padre y, al
|
|
6148
|
+
* revés, cambiar `[open]` desde fuera no montaría nada.
|
|
6149
|
+
*/
|
|
6024
6150
|
setOpen(v) {
|
|
6025
6151
|
if (!this.openControlled)
|
|
6026
6152
|
this.internalOpen.set(v);
|
|
6027
6153
|
this.openChange.emit(v);
|
|
6028
6154
|
if (!v) {
|
|
6029
6155
|
this.query.set('');
|
|
6030
|
-
|
|
6031
|
-
this.
|
|
6156
|
+
// El golden también descarta el borrador del pie al cerrar.
|
|
6157
|
+
this.draft.set('');
|
|
6032
6158
|
}
|
|
6033
6159
|
else {
|
|
6034
6160
|
this.activeIndex.set(0);
|
|
6035
|
-
this.scheduleOpen(true);
|
|
6036
6161
|
}
|
|
6037
6162
|
}
|
|
6163
|
+
/**
|
|
6164
|
+
* El alto del menú cambió (filtro de búsqueda, alta de una opción por el pie
|
|
6165
|
+
* `creatable`): re-evalúa flip/posición del overlay en el siguiente frame,
|
|
6166
|
+
* cuando el DOM ya midió el alto nuevo.
|
|
6167
|
+
*/
|
|
6168
|
+
schedulePositionUpdate() {
|
|
6169
|
+
cancelAnimationFrame(this.raf);
|
|
6170
|
+
this.raf = requestAnimationFrame(() => this.overlayRef?.updatePosition());
|
|
6171
|
+
}
|
|
6038
6172
|
onSearch(event) {
|
|
6039
6173
|
this.query.set(event.target.value);
|
|
6040
6174
|
this.activeIndex.set(0);
|
|
6041
|
-
|
|
6042
|
-
|
|
6043
|
-
|
|
6175
|
+
this.schedulePositionUpdate();
|
|
6176
|
+
}
|
|
6177
|
+
// ── Creatable (pie del menú)
|
|
6178
|
+
onCreateInput(event) {
|
|
6179
|
+
this.draft.set(event.target.value);
|
|
6180
|
+
}
|
|
6181
|
+
/**
|
|
6182
|
+
* `Enter` agrega la opción; `Escape` **con texto** solo limpia el borrador y
|
|
6183
|
+
* frena la propagación para que el listener de `document` no cierre el menú
|
|
6184
|
+
* (espejo del golden). Sin texto, `Escape` sigue cerrando el menú.
|
|
6185
|
+
*/
|
|
6186
|
+
onCreateKeyDown(event) {
|
|
6187
|
+
if (event.key === 'Enter') {
|
|
6188
|
+
event.preventDefault();
|
|
6189
|
+
this.addItem();
|
|
6190
|
+
}
|
|
6191
|
+
else if (event.key === 'Escape' && this.draft()) {
|
|
6192
|
+
event.stopPropagation();
|
|
6193
|
+
this.draft.set('');
|
|
6194
|
+
}
|
|
6195
|
+
}
|
|
6196
|
+
/**
|
|
6197
|
+
* Agrega la opción escrita en el pie: la construye con `createFactory` (o
|
|
6198
|
+
* envuelve el texto), la anexa si su `value` no existe ya, emite `created`,
|
|
6199
|
+
* limpia el borrador y devuelve el foco al campo del pie.
|
|
6200
|
+
*/
|
|
6201
|
+
addItem() {
|
|
6202
|
+
const raw = this.draft().trim();
|
|
6203
|
+
if (!raw)
|
|
6204
|
+
return;
|
|
6205
|
+
const opt = this.createFactory?.(raw) || { value: raw, label: raw };
|
|
6206
|
+
const exists = this.allFlat().some((o) => String(o.value) === String(opt.value));
|
|
6207
|
+
if (!exists) {
|
|
6208
|
+
this.createdOptions.update((list) => [...list, opt]);
|
|
6209
|
+
this.created.emit(opt);
|
|
6210
|
+
}
|
|
6211
|
+
this.draft.set('');
|
|
6212
|
+
// La lista creció: el menú es más alto → hay que reposicionar el overlay.
|
|
6213
|
+
this.schedulePositionUpdate();
|
|
6214
|
+
this.createInput()?.nativeElement.focus();
|
|
6044
6215
|
}
|
|
6045
6216
|
moveActive(delta) {
|
|
6046
6217
|
const flat = this.visible().flat;
|
|
@@ -6056,15 +6227,23 @@ class SelectComponent {
|
|
|
6056
6227
|
}
|
|
6057
6228
|
/**
|
|
6058
6229
|
* ¿Es una tecla imprimible de una sola posición (typeahead)? Se ignora
|
|
6059
|
-
* cuando el foco está en
|
|
6060
|
-
*
|
|
6230
|
+
* cuando el foco está en una caja de texto del menú — la de búsqueda **o**
|
|
6231
|
+
* la del pie `creatable`: ahí escribir filtra o redacta el nombre nuevo, y
|
|
6232
|
+
* mover el resaltado sería un efecto colateral indeseado. También se ignora
|
|
6233
|
+
* con modificadores (Ctrl/Alt/Meta).
|
|
6234
|
+
*
|
|
6235
|
+
* (Hoy el pie de `creatable` no enruta a `onTriggerKeyDown` —vive en el
|
|
6236
|
+
* overlay y tiene su propio handler—, pero la guarda se deja explícita para
|
|
6237
|
+
* que reenrutarlo mañana no reintroduzca el bug.)
|
|
6061
6238
|
*/
|
|
6062
6239
|
isTypeaheadKey(event) {
|
|
6063
6240
|
if (event.key.length !== 1 || event.ctrlKey || event.altKey || event.metaKey) {
|
|
6064
6241
|
return false;
|
|
6065
6242
|
}
|
|
6066
|
-
const
|
|
6067
|
-
if (
|
|
6243
|
+
const target = event.target;
|
|
6244
|
+
if (target && target === this.search()?.nativeElement)
|
|
6245
|
+
return false;
|
|
6246
|
+
if (target && target === this.createInput()?.nativeElement)
|
|
6068
6247
|
return false;
|
|
6069
6248
|
return true;
|
|
6070
6249
|
}
|
|
@@ -6131,7 +6310,7 @@ class SelectComponent {
|
|
|
6131
6310
|
this.handleSelect(opt);
|
|
6132
6311
|
}
|
|
6133
6312
|
}
|
|
6134
|
-
// ── Cierre por click-fuera / Escape
|
|
6313
|
+
// ── Cierre por click-fuera / Escape
|
|
6135
6314
|
onDocumentMouseDown(event) {
|
|
6136
6315
|
if (!this.isOpen())
|
|
6137
6316
|
return;
|
|
@@ -6200,17 +6379,17 @@ class SelectComponent {
|
|
|
6200
6379
|
this.menuWidth.set(origin.getBoundingClientRect().width);
|
|
6201
6380
|
}
|
|
6202
6381
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
6382
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "ius-select", inputs: { options: "options", multiple: ["multiple", "multiple", booleanAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute], error: ["error", "error", booleanAttribute], state: "state", open: ["open", "open", booleanAttribute], value: "value", label: "label", required: ["required", "required", booleanAttribute], placeholder: "placeholder", prefixIcon: "prefixIcon", searchable: ["searchable", "searchable", booleanAttribute], searchPlaceholder: "searchPlaceholder", emptyText: "emptyText", creatable: ["creatable", "creatable", booleanAttribute], createPlaceholder: "createPlaceholder", createLabel: "createLabel", createFactory: "createFactory", maxVisible: ["maxVisible", "maxVisible", numberAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", showClear: ["showClear", "showClear", booleanAttribute], defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], compact: ["compact", "compact", booleanAttribute], defaultValue: "defaultValue", id: "id", name: "name" }, outputs: { valueChange: "valueChange", cleared: "cleared", openChange: "openChange", created: "created" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event)", "document:keydown.escape": "onEscape()" }, properties: { "class.ius-tf--compact": "compact", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focusedAttr()", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-tf ius-tf--select" }, providers: [
|
|
6204
6383
|
{
|
|
6205
6384
|
provide: NG_VALUE_ACCESSOR,
|
|
6206
6385
|
useExisting: forwardRef(() => SelectComponent),
|
|
6207
6386
|
multi: true,
|
|
6208
6387
|
},
|
|
6209
|
-
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\r\n <label [for]=\"baseId\" 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 <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n [attr.title]=\"helpIconTitle\"\r\n >\r\n <span class=\"ius-icon\">help</span>\r\n </span>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n removable\r\n size=\"small\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span class=\"ius-icon\">cancel</span>\r\n </button>\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\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}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.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}: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{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.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([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__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xxs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6388
|
+
], viewQueries: [{ propertyName: "field", first: true, predicate: ["field"], descendants: true, isSignal: true }, { propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }, { propertyName: "search", first: true, predicate: ["search"], descendants: true, isSignal: true }, { propertyName: "createInput", first: true, predicate: ["createInput"], descendants: true, isSignal: true }, { propertyName: "menuTpl", first: true, predicate: ["menuTpl"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label != null) {\n <label [for]=\"baseId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"iconHelpEmpty\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div\n #field\n [id]=\"baseId\"\n class=\"ius-tf__field\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"isError() || null\"\n (click)=\"toggleOpen()\"\n (keydown)=\"onTriggerKeyDown($event)\"\n>\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n @if (multiple && hasValue()) {\n <div class=\"ius-select__chips\">\n @for (val of valueArray(); track val) {\n <ius-chip\n [removable]=\"!isDisabled()\"\n [size]=\"chipSize\"\n [label]=\"labelFor(val)\"\n [disabled]=\"isDisabled()\"\n (removed)=\"removeChip(val)\"\n />\n }\n </div>\n } @else {\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\n </span>\n }\n\n <!--\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\n -->\n @if (clearReserved) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear($event)\"\n >\n <span class=\"ius-icon\">cancel</span>\n </button>\n }\n\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\n </span>\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n\n<ng-template #menuTpl>\n <div\n #menu\n [id]=\"menuId\"\n class=\"ius-selectmenu\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple || null\"\n [attr.data-size]=\"size !== 'medium' ? size : null\"\n [style.width.px]=\"menuWidth()\"\n >\n @if (searchable) {\n <div class=\"ius-selectmenu__search\">\n <span class=\"ius-icon\">search</span>\n <input\n #search\n type=\"text\"\n [placeholder]=\"searchPlaceholder\"\n [attr.aria-label]=\"searchPlaceholder\"\n [value]=\"query()\"\n (input)=\"onSearch($event)\"\n (keydown)=\"onTriggerKeyDown($event)\"\n />\n </div>\n }\n\n <div\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\n [style.max-height.px]=\"listMaxH\"\n >\n @if (visible().flat.length === 0) {\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\n } @else {\n @for (g of visible().groups; track $index) {\n @if (g.label) {\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\n }\n @for (item of g.items; track item.opt.value) {\n <ius-option-item\n [label]=\"item.opt.label\"\n [icon]=\"item.opt.icon\"\n [size]=\"size\"\n [value]=\"item.opt.value\"\n [selected]=\"isChosen(item.opt.value)\"\n [multi]=\"multiple\"\n [active]=\"item.flatIndex === activeIndex()\"\n [disabled]=\"item.opt.disabled || false\"\n (selectClicked)=\"handleSelect(item.opt)\"\n />\n }\n }\n }\n </div>\n\n @if (creatable) {\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\n reimplementa; su interior es inalcanzable desde este SCSS\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\n <div class=\"ius-selectmenu__create\">\n <div class=\"ius-selectmenu__create-field\">\n <input\n #createInput\n type=\"text\"\n [placeholder]=\"createPlaceholder\"\n [attr.aria-label]=\"createPlaceholder\"\n [value]=\"draft()\"\n (input)=\"onCreateInput($event)\"\n (keydown)=\"onCreateKeyDown($event)\"\n />\n </div>\n <span class=\"ius-selectmenu__create-action\">\n <ius-text-button\n prefixIcon=\"add\"\n [label]=\"createLabel\"\n [size]=\"createButtonSize\"\n [disabled]=\"createDisabled()\"\n (clicked)=\"addItem()\"\n />\n </span>\n </div>\n }\n </div>\n</ng-template>\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}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.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}: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{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.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([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__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"], dependencies: [{ kind: "component", type: OptionItemComponent, selector: "ius-option-item", inputs: ["label", "icon", "selected", "multi", "active", "disabled", "size", "value", "state"], outputs: ["selectClicked"] }, { kind: "component", type: ChipComponent, selector: "ius-chip", inputs: ["label", "icon", "removable", "size", "disabled", "state", "removeLabel"], outputs: ["removed"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6210
6389
|
}
|
|
6211
6390
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
6212
6391
|
type: Component,
|
|
6213
|
-
args: [{ selector: 'ius-select', standalone: true, imports: [OptionItemComponent, ChipComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
6392
|
+
args: [{ selector: 'ius-select', standalone: true, imports: [OptionItemComponent, ChipComponent, PopoverComponent, TextButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
6214
6393
|
{
|
|
6215
6394
|
provide: NG_VALUE_ACCESSOR,
|
|
6216
6395
|
useExisting: forwardRef(() => SelectComponent),
|
|
@@ -6224,7 +6403,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6224
6403
|
'[attr.data-error]': 'isError() || null',
|
|
6225
6404
|
'[attr.data-disabled]': 'isDisabled() || null',
|
|
6226
6405
|
'[attr.data-force]': 'stateInput() || null',
|
|
6227
|
-
}, template: "@if (label != null) {\r\n <label [for]=\"baseId\" 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 <span\r\n class=\"ius-tf__help-icon\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Ayuda\"\r\n [attr.title]=\"helpIconTitle\"\r\n >\r\n <span class=\"ius-icon\">help</span>\r\n </span>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </label>\r\n}\r\n\r\n<div\r\n #field\r\n [id]=\"baseId\"\r\n class=\"ius-tf__field\"\r\n role=\"combobox\"\r\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\r\n [attr.aria-expanded]=\"isOpen()\"\r\n aria-haspopup=\"listbox\"\r\n [attr.aria-controls]=\"menuId\"\r\n [attr.aria-required]=\"required || null\"\r\n [attr.aria-invalid]=\"isError() || null\"\r\n (click)=\"toggleOpen()\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n>\r\n @if (prefixIcon) {\r\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\r\n <span class=\"ius-icon\">{{ prefixIcon }}</span>\r\n </span>\r\n }\r\n\r\n @if (multiple && hasValue()) {\r\n <div class=\"ius-select__chips\">\r\n @for (val of valueArray(); track val) {\r\n <ius-chip\r\n removable\r\n size=\"small\"\r\n [label]=\"labelFor(val)\"\r\n [disabled]=\"isDisabled()\"\r\n (removed)=\"removeChip(val)\"\r\n />\r\n }\r\n </div>\r\n } @else {\r\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\r\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\r\n </span>\r\n }\r\n\r\n <button\r\n type=\"button\"\r\n class=\"ius-tf__clear\"\r\n aria-label=\"Limpiar campo\"\r\n tabindex=\"-1\"\r\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\r\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\r\n (mousedown)=\"$event.preventDefault()\"\r\n (click)=\"clear($event)\"\r\n >\r\n <span class=\"ius-icon\">cancel</span>\r\n </button>\r\n\r\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\r\n <span class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\r\n </span>\r\n</div>\r\n\r\n@if (showHint) {\r\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\r\n}\r\n\r\n<ng-template #menuTpl>\r\n <div\r\n #menu\r\n [id]=\"menuId\"\r\n class=\"ius-selectmenu\"\r\n role=\"listbox\"\r\n [attr.aria-multiselectable]=\"multiple || null\"\r\n [attr.data-size]=\"size !== 'medium' ? size : null\"\r\n [style.width.px]=\"menuWidth()\"\r\n >\r\n @if (searchable) {\r\n <div class=\"ius-selectmenu__search\">\r\n <span class=\"ius-icon\">search</span>\r\n <input\r\n #search\r\n type=\"text\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [attr.aria-label]=\"searchPlaceholder\"\r\n [value]=\"query()\"\r\n (input)=\"onSearch($event)\"\r\n (keydown)=\"onTriggerKeyDown($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\r\n [style.max-height.px]=\"listMaxH\"\r\n >\r\n @if (visible().flat.length === 0) {\r\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\r\n } @else {\r\n @for (g of visible().groups; track $index) {\r\n @if (g.label) {\r\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\r\n }\r\n @for (item of g.items; track item.opt.value) {\r\n <ius-option-item\r\n [label]=\"item.opt.label\"\r\n [icon]=\"item.opt.icon\"\r\n [size]=\"size\"\r\n [value]=\"item.opt.value\"\r\n [selected]=\"isChosen(item.opt.value)\"\r\n [multi]=\"multiple\"\r\n [active]=\"item.flatIndex === activeIndex()\"\r\n [disabled]=\"item.opt.disabled || false\"\r\n (selectClicked)=\"handleSelect(item.opt)\"\r\n />\r\n }\r\n }\r\n }\r\n </div>\r\n </div>\r\n</ng-template>\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}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.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}: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{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.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([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__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xxs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}\n"] }]
|
|
6406
|
+
}, template: "@if (label != null) {\n <label [for]=\"baseId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- El golden envuelve el \u00EDcono en <Popover placement=\"top\" trigger=\"hover\">\n (ambos son los defaults de `ius-popover`) \u2014 mismo patr\u00F3n que TextField. -->\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"iconHelpEmpty\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div\n #field\n [id]=\"baseId\"\n class=\"ius-tf__field\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-expanded]=\"isOpen()\"\n aria-haspopup=\"listbox\"\n [attr.aria-controls]=\"menuId\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"isError() || null\"\n (click)=\"toggleOpen()\"\n (keydown)=\"onTriggerKeyDown($event)\"\n>\n @if (prefixIcon) {\n <span class=\"ius-tf__prefix\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ prefixIcon }}</span>\n </span>\n }\n\n @if (multiple && hasValue()) {\n <div class=\"ius-select__chips\">\n @for (val of valueArray(); track val) {\n <ius-chip\n [removable]=\"!isDisabled()\"\n [size]=\"chipSize\"\n [label]=\"labelFor(val)\"\n [disabled]=\"isDisabled()\"\n (removed)=\"removeChip(val)\"\n />\n }\n </div>\n } @else {\n <span class=\"ius-select__value\" [attr.data-placeholder]=\"!hasValue() || null\">\n {{ hasValue() ? labelFor(singleValue()!) : placeholder }}\n </span>\n }\n\n <!--\n Espejo de `clearReserved` del golden: el bot\u00F3n entra en el flujo solo si el\n campo es \"clearable-capable\" (showClear !== false y habilitado). Dentro de\n ese caso el slot S\u00CD queda reservado con `visibility`, para que el chevron no\n se desplace al aparecer/quitar el valor (auditor\u00EDa 2026-07-24). Con\n `showClear=false` o `disabled` desaparece del flujo, como el golden.\n -->\n @if (clearReserved) {\n <button\n type=\"button\"\n class=\"ius-tf__clear\"\n aria-label=\"Limpiar campo\"\n tabindex=\"-1\"\n [style.visibility]=\"showClearComputed ? 'visible' : 'hidden'\"\n [attr.aria-hidden]=\"showClearComputed ? null : 'true'\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear($event)\"\n >\n <span class=\"ius-icon\">cancel</span>\n </button>\n }\n\n <span class=\"ius-select__chevron\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ isOpen() ? 'expand_less' : 'expand_more' }}</span>\n </span>\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n\n<ng-template #menuTpl>\n <div\n #menu\n [id]=\"menuId\"\n class=\"ius-selectmenu\"\n role=\"listbox\"\n [attr.aria-multiselectable]=\"multiple || null\"\n [attr.data-size]=\"size !== 'medium' ? size : null\"\n [style.width.px]=\"menuWidth()\"\n >\n @if (searchable) {\n <div class=\"ius-selectmenu__search\">\n <span class=\"ius-icon\">search</span>\n <input\n #search\n type=\"text\"\n [placeholder]=\"searchPlaceholder\"\n [attr.aria-label]=\"searchPlaceholder\"\n [value]=\"query()\"\n (input)=\"onSearch($event)\"\n (keydown)=\"onTriggerKeyDown($event)\"\n />\n </div>\n }\n\n <div\n class=\"ius-selectmenu__list ius-scroll ius-scroll--sm\"\n [style.max-height.px]=\"listMaxH\"\n >\n @if (visible().flat.length === 0) {\n <div class=\"ius-selectmenu__empty\">{{ emptyText }}</div>\n } @else {\n @for (g of visible().groups; track $index) {\n @if (g.label) {\n <div class=\"ius-selectmenu__group-label\">{{ g.label }}</div>\n }\n @for (item of g.items; track item.opt.value) {\n <ius-option-item\n [label]=\"item.opt.label\"\n [icon]=\"item.opt.icon\"\n [size]=\"size\"\n [value]=\"item.opt.value\"\n [selected]=\"isChosen(item.opt.value)\"\n [multi]=\"multiple\"\n [active]=\"item.flatIndex === activeIndex()\"\n [disabled]=\"item.opt.disabled || false\"\n (selectClicked)=\"handleSelect(item.opt)\"\n />\n }\n }\n }\n </div>\n\n @if (creatable) {\n <!-- Pie \u00ABagregar opci\u00F3n\u00BB: campo propio (independiente de la b\u00FAsqueda) +\n `ius-text-button` con \u00EDcono `add`. El bot\u00F3n se compone, no se\n reimplementa; su interior es inalcanzable desde este SCSS\n (encapsulaci\u00F3n), por eso el `flex: 0 0 auto` del golden se aplica al\n envoltorio `.ius-selectmenu__create-action`, no al `.ius-txtbtn`. -->\n <div class=\"ius-selectmenu__create\">\n <div class=\"ius-selectmenu__create-field\">\n <input\n #createInput\n type=\"text\"\n [placeholder]=\"createPlaceholder\"\n [attr.aria-label]=\"createPlaceholder\"\n [value]=\"draft()\"\n (input)=\"onCreateInput($event)\"\n (keydown)=\"onCreateKeyDown($event)\"\n />\n </div>\n <span class=\"ius-selectmenu__create-action\">\n <ius-text-button\n prefixIcon=\"add\"\n [label]=\"createLabel\"\n [size]=\"createButtonSize\"\n [disabled]=\"createDisabled()\"\n (clicked)=\"addItem()\"\n />\n </span>\n </div>\n }\n </div>\n</ng-template>\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}:host(.ius-tf--compact){min-width:0;width:auto;max-width:none}.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}: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{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}.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([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__field{cursor:pointer;flex-wrap:wrap;gap:var(--ius-space-xs);align-items:flex-start}.ius-select__value,.ius-tf__prefix,.ius-select__chevron,.ius-tf__clear{align-self:center}:host(:has(.ius-select__chips)) .ius-select__chevron,:host(:has(.ius-select__chips)) .ius-tf__clear{align-self:flex-start}:host([data-disabled=true]) .ius-tf__field{cursor:not-allowed}.ius-select__value{flex:1 1 auto;min-width:0;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-select__value[data-placeholder=true]{color:var(--_tf-placeholder)}.ius-select__chevron{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-select__chevron .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-select__chips{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);flex:1 1 0;min-width:0}.ius-selectmenu{box-sizing:border-box;background:var(--ius-neutral-white);border-radius:var(--ius-radius-lg);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);animation:ius-selectmenu-in .12s var(--ius-ease-decelerate)}@keyframes ius-selectmenu-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ius-selectmenu__search{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__search:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__search .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-selectmenu__search input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu[data-size=large] .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu[data-size=large] .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}@container style(--ius-control-size: large){.ius-selectmenu:not([data-size]) .ius-selectmenu__search{padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-selectmenu:not([data-size]) .ius-selectmenu__search input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}}.ius-selectmenu__list{overflow-y:auto;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-selectmenu__group-label{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);padding:var(--ius-space-xs) var(--ius-space-sm) var(--ius-space-xxs)}.ius-selectmenu__empty{padding:var(--ius-space-lg) var(--ius-space-sm);text-align:center;font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-selectmenu__create{display:flex;align-items:center;gap:var(--ius-space-xs);border-top:1px solid var(--ius-stroke);margin-top:var(--ius-space-xxs);padding-top:var(--ius-space-xs)}.ius-selectmenu__create-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-neutral-2);border:1px solid transparent;border-radius:var(--ius-radius-md)}.ius-selectmenu__create-field:focus-within{background:var(--ius-info-100);border-color:var(--ius-primary-500);box-shadow:var(--ius-focus-ring)}.ius-selectmenu__create-field input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);min-width:0}.ius-selectmenu__create-action{display:inline-flex;align-items:center;flex:0 0 auto}.ius-selectmenu[data-size=large] .ius-selectmenu__create-field input{font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg)}\n"] }]
|
|
6228
6407
|
}], propDecorators: { options: [{
|
|
6229
6408
|
type: Input
|
|
6230
6409
|
}], multiple: [{
|
|
@@ -6261,6 +6440,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6261
6440
|
type: Input
|
|
6262
6441
|
}], emptyText: [{
|
|
6263
6442
|
type: Input
|
|
6443
|
+
}], creatable: [{
|
|
6444
|
+
type: Input,
|
|
6445
|
+
args: [{ transform: booleanAttribute }]
|
|
6446
|
+
}], createPlaceholder: [{
|
|
6447
|
+
type: Input
|
|
6448
|
+
}], createLabel: [{
|
|
6449
|
+
type: Input
|
|
6450
|
+
}], createFactory: [{
|
|
6451
|
+
type: Input
|
|
6264
6452
|
}], maxVisible: [{
|
|
6265
6453
|
type: Input,
|
|
6266
6454
|
args: [{ transform: numberAttribute }]
|
|
@@ -6299,7 +6487,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6299
6487
|
type: Output
|
|
6300
6488
|
}], openChange: [{
|
|
6301
6489
|
type: Output
|
|
6302
|
-
}],
|
|
6490
|
+
}], created: [{
|
|
6491
|
+
type: Output
|
|
6492
|
+
}], field: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }], search: [{ type: i0.ViewChild, args: ['search', { isSignal: true }] }], createInput: [{ type: i0.ViewChild, args: ['createInput', { isSignal: true }] }], menuTpl: [{ type: i0.ViewChild, args: ['menuTpl', { isSignal: true }] }], onDocumentMouseDown: [{
|
|
6303
6493
|
type: HostListener,
|
|
6304
6494
|
args: ['document:mousedown', ['$event']]
|
|
6305
6495
|
}], onEscape: [{
|
|
@@ -6736,18 +6926,18 @@ class DividerComponent {
|
|
|
6736
6926
|
this.hasLabel.set(this.orientation === 'horizontal' && conContenido);
|
|
6737
6927
|
}
|
|
6738
6928
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DividerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6739
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: DividerComponent, isStandalone: true, selector: "ius-divider", inputs: { orientation: "orientation", variant: "variant", textAlign: "textAlign" }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation", "attr.data-orientation": "orientation", "attr.data-variant": "variant", "attr.data-text-align": "hasLabel() ? textAlign : null", "attr.data-empty": "orientation === 'horizontal' && !hasLabel() ? 'true' : null" } }, viewQueries: [{ propertyName: "labelWrap", first: true, predicate: ["labelWrap"], descendants: true, static: true }], ngImport: i0, template: `
|
|
6740
|
-
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
6741
|
-
<ng-content />
|
|
6742
|
-
</span>
|
|
6929
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: DividerComponent, isStandalone: true, selector: "ius-divider", inputs: { orientation: "orientation", variant: "variant", textAlign: "textAlign" }, host: { attributes: { "role": "separator" }, properties: { "attr.aria-orientation": "orientation", "attr.data-orientation": "orientation", "attr.data-variant": "variant", "attr.data-text-align": "hasLabel() ? textAlign : null", "attr.data-empty": "orientation === 'horizontal' && !hasLabel() ? 'true' : null" } }, viewQueries: [{ propertyName: "labelWrap", first: true, predicate: ["labelWrap"], descendants: true, static: true }], ngImport: i0, template: `
|
|
6930
|
+
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
6931
|
+
<ng-content />
|
|
6932
|
+
</span>
|
|
6743
6933
|
`, isInline: true, styles: ["@charset \"UTF-8\";:host{--_color: var(--ius-neutral-3);--_thickness: 1px;--_gap: 12px;--_stub: 28px;font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold, 600);line-height:1.2;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-orientation=horizontal]){display:flex;align-items:center;gap:var(--_gap);width:100%}:host([data-orientation=horizontal]):before,:host([data-orientation=horizontal]):after{content:\"\";flex:1 1 auto;min-width:0;border-top:var(--_thickness) solid var(--_color)}:host([data-orientation=horizontal][data-variant=dashed]):before,:host([data-orientation=horizontal][data-variant=dashed]):after{border-top-style:dashed}:host([data-orientation=horizontal][data-empty=true]){display:block}:host([data-orientation=horizontal][data-empty=true]):before{display:block;flex:none;width:100%}:host([data-orientation=horizontal][data-empty=true]):after{display:none}:host([data-orientation=horizontal][data-text-align=start]):before{flex:0 0 var(--_stub)}:host([data-orientation=horizontal][data-text-align=end]):after{flex:0 0 var(--_stub)}.ius-divider__label{flex:0 0 auto;max-width:100%;color:var(--ius-text-secondary)}:host([data-orientation=vertical]){display:inline-flex;align-self:stretch;align-items:stretch;width:var(--_thickness);min-height:16px;background:transparent;border-left:var(--_thickness) solid var(--_color)}:host([data-orientation=vertical][data-variant=dashed]){border-left-style:dashed}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6744
6934
|
}
|
|
6745
6935
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DividerComponent, decorators: [{
|
|
6746
6936
|
type: Component,
|
|
6747
|
-
args: [{ selector: 'ius-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6748
|
-
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
6749
|
-
<ng-content />
|
|
6750
|
-
</span>
|
|
6937
|
+
args: [{ selector: 'ius-divider', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
|
|
6938
|
+
<span #labelWrap class="ius-divider__label" [hidden]="!hasLabel()">
|
|
6939
|
+
<ng-content />
|
|
6940
|
+
</span>
|
|
6751
6941
|
`, host: {
|
|
6752
6942
|
role: 'separator',
|
|
6753
6943
|
'[attr.aria-orientation]': 'orientation',
|
|
@@ -6767,6 +6957,1898 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6767
6957
|
args: ['labelWrap', { static: true }]
|
|
6768
6958
|
}] } });
|
|
6769
6959
|
|
|
6960
|
+
/**
|
|
6961
|
+
* Insignia — Ius Design v2 (familia feedback).
|
|
6962
|
+
*
|
|
6963
|
+
* Indicador atómico de estado o actividad: punto de color (`dot`) o píldora de
|
|
6964
|
+
* contador (`count` tonal · `count-soft` suave), con `label` opcional al lado.
|
|
6965
|
+
* Display puro — sin outputs. Fuente de verdad: `Insignia.jsx` + `Insignia.d.ts`
|
|
6966
|
+
* + `Insignia.ng-spec.md`.
|
|
6967
|
+
*
|
|
6968
|
+
* Para etiqueta con texto contenedor → Tag; para token removible en un campo →
|
|
6969
|
+
* Chip. La consume MenuItem (badge) y la barra de navegación.
|
|
6970
|
+
*/
|
|
6971
|
+
class InsigniaComponent {
|
|
6972
|
+
constructor() {
|
|
6973
|
+
/** Punto de color · píldora tonal · píldora neutra. */
|
|
6974
|
+
this.variant = input('dot', /* @ts-ignore */
|
|
6975
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
6976
|
+
/** Familia de color. */
|
|
6977
|
+
this.tone = input('neutral', /* @ts-ignore */
|
|
6978
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
6979
|
+
/** Tamaño. */
|
|
6980
|
+
this.size = input('medium', /* @ts-ignore */
|
|
6981
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
6982
|
+
/** Texto junto al indicador (alternativa a proyectar contenido). */
|
|
6983
|
+
this.label = input(/* @ts-ignore */
|
|
6984
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
6985
|
+
/** Valor del contador (variantes `count` / `count-soft`). */
|
|
6986
|
+
this.count = input(/* @ts-ignore */
|
|
6987
|
+
...(ngDevMode ? [undefined, { debugName: "count" }] : /* istanbul ignore next */ []));
|
|
6988
|
+
/** Tope antes de mostrar `N+`. */
|
|
6989
|
+
this.max = input(999, { ...(ngDevMode ? { debugName: "max" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
6990
|
+
/** Halo suave alrededor del punto (solo `dot`). */
|
|
6991
|
+
this.ring = input(false, { ...(ngDevMode ? { debugName: "ring" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
6992
|
+
/** Recomendada cuando no hay `label`. */
|
|
6993
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
6994
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
6995
|
+
/** `count`/`count-soft` renderizan píldora; `dot` renderiza punto. */
|
|
6996
|
+
this.isCount = computed(() => this.variant() !== 'dot', /* @ts-ignore */
|
|
6997
|
+
...(ngDevMode ? [{ debugName: "isCount" }] : /* istanbul ignore next */ []));
|
|
6998
|
+
/** El halo es exclusivo del punto (el golden lo ignora en las píldoras). */
|
|
6999
|
+
this.showRing = computed(() => !this.isCount() && this.ring(), /* @ts-ignore */
|
|
7000
|
+
...(ngDevMode ? [{ debugName: "showRing" }] : /* istanbul ignore next */ []));
|
|
7001
|
+
/** `count > max` → `${max}+`; los valores string pasan tal cual. */
|
|
7002
|
+
this.displayCount = computed(() => {
|
|
7003
|
+
const count = this.count();
|
|
7004
|
+
const max = this.max();
|
|
7005
|
+
return typeof count === 'number' && count > max ? `${max}+` : count;
|
|
7006
|
+
}, /* @ts-ignore */
|
|
7007
|
+
...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
|
|
7008
|
+
}
|
|
7009
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7010
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InsigniaComponent, isStandalone: true, selector: "ius-insignia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() !== 'dot' ? variant() : null", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-ring": "showRing() || null", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-insignia" }, ngImport: i0, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\n@if (isCount()) {\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\n} @else {\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\n@if (label() != null) {\n <span class=\"ius-insignia__label\">{{ label() }}</span>\n} @else {\n <span class=\"ius-insignia__label\"><ng-content /></span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7011
|
+
}
|
|
7012
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, decorators: [{
|
|
7013
|
+
type: Component,
|
|
7014
|
+
args: [{ selector: 'ius-insignia', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7015
|
+
class: 'ius-insignia',
|
|
7016
|
+
'[attr.data-variant]': "variant() !== 'dot' ? variant() : null",
|
|
7017
|
+
'[attr.data-tone]': 'tone()',
|
|
7018
|
+
'[attr.data-size]': "size() !== 'medium' ? size() : null",
|
|
7019
|
+
'[attr.data-ring]': 'showRing() || null',
|
|
7020
|
+
'[attr.role]': "ariaLabel() ? 'img' : null",
|
|
7021
|
+
'[attr.aria-label]': 'ariaLabel() || null',
|
|
7022
|
+
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\n@if (isCount()) {\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\n} @else {\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\n@if (label() != null) {\n <span class=\"ius-insignia__label\">{{ label() }}</span>\n} @else {\n <span class=\"ius-insignia__label\"><ng-content /></span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:600;line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"] }]
|
|
7023
|
+
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
7024
|
+
|
|
7025
|
+
/**
|
|
7026
|
+
* Marca contenido libre al final de la fila (chevron, valor, atajo):
|
|
7027
|
+
* `<ius-menu-item><span iusMenuItemTrailing>⌘K</span></ius-menu-item>`.
|
|
7028
|
+
*/
|
|
7029
|
+
class IusMenuItemTrailingDirective {
|
|
7030
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusMenuItemTrailingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7031
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusMenuItemTrailingDirective, isStandalone: true, selector: "[iusMenuItemTrailing]", ngImport: i0 }); }
|
|
7032
|
+
}
|
|
7033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusMenuItemTrailingDirective, decorators: [{
|
|
7034
|
+
type: Directive,
|
|
7035
|
+
args: [{ selector: '[iusMenuItemTrailing]', standalone: true }]
|
|
7036
|
+
}] });
|
|
7037
|
+
/**
|
|
7038
|
+
* MenuItem — Ius Design v2 (familia navigation).
|
|
7039
|
+
*
|
|
7040
|
+
* Fila de acción o navegación: ícono + etiqueta + badge/trailing. Unidad
|
|
7041
|
+
* compartida por la superficie **Menu** (overlays) y el **NavRail**:
|
|
7042
|
+
* `variant="menu"` es neutral; `variant="rail"` lleva el ícono verde de marca y
|
|
7043
|
+
* el pressed verde sólido sobre blanco (firma del rail). `danger` (rojo) solo
|
|
7044
|
+
* aplica a `menu` — el caso canónico es «Cerrar sesión».
|
|
7045
|
+
*
|
|
7046
|
+
* Con `href` renderiza `<a>`; si no, `<button type="button">`. Por eso el host
|
|
7047
|
+
* es `display: contents`: el elemento real de la fila (y por tanto el foco, el
|
|
7048
|
+
* `:hover` y la semántica) es el `<a>`/`<button>` interno, tal como el golden.
|
|
7049
|
+
*
|
|
7050
|
+
* Fuente de verdad: `MenuItem.jsx` + `MenuItem.d.ts` + `MenuItem.ng-spec.md`.
|
|
7051
|
+
* Compone Insignia para el badge. Para botón con texto → Button; píldora de
|
|
7052
|
+
* valor → Tag/Chip.
|
|
7053
|
+
*/
|
|
7054
|
+
class MenuItemComponent {
|
|
7055
|
+
constructor() {
|
|
7056
|
+
/** Ícono Material Symbols a la izquierda. */
|
|
7057
|
+
this.icon = input(/* @ts-ignore */
|
|
7058
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
7059
|
+
/** Texto de la fila (alternativa a proyectar contenido). */
|
|
7060
|
+
this.label = input(/* @ts-ignore */
|
|
7061
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
7062
|
+
/** `number` → Insignia contador; `true` → punto; `null`/`false` → sin badge. */
|
|
7063
|
+
this.badge = input(/* @ts-ignore */
|
|
7064
|
+
...(ngDevMode ? [undefined, { debugName: "badge" }] : /* istanbul ignore next */ []));
|
|
7065
|
+
/** Contexto de uso (menu neutral · rail verde marca). */
|
|
7066
|
+
this.variant = input('menu', /* @ts-ignore */
|
|
7067
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
7068
|
+
/** Tamaño de la fila. */
|
|
7069
|
+
this.size = input('medium', /* @ts-ignore */
|
|
7070
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
7071
|
+
/** Fondo persistente + `aria-current`. */
|
|
7072
|
+
this.selected = input(false, { ...(ngDevMode ? { debugName: "selected" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7073
|
+
/** Fila inerte. */
|
|
7074
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7075
|
+
/** Acción destructiva (rojo). Solo `variant="menu"`. */
|
|
7076
|
+
this.danger = input(false, { ...(ngDevMode ? { debugName: "danger" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7077
|
+
/** Estado forzado — **solo demos**. */
|
|
7078
|
+
this.state = input(/* @ts-ignore */
|
|
7079
|
+
...(ngDevMode ? [undefined, { debugName: "state" }] : /* istanbul ignore next */ []));
|
|
7080
|
+
/** Renderiza la fila como `<a href>`. */
|
|
7081
|
+
this.href = input(/* @ts-ignore */
|
|
7082
|
+
...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
|
|
7083
|
+
/** Etiqueta accesible cuando el texto no basta. */
|
|
7084
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
7085
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
7086
|
+
/** Rol ARIA del elemento de fila — Menu lo fija en `menuitem`. */
|
|
7087
|
+
this.itemRole = input(/* @ts-ignore */
|
|
7088
|
+
...(ngDevMode ? [undefined, { debugName: "itemRole" }] : /* istanbul ignore next */ []));
|
|
7089
|
+
/** Al activar la fila (espejo de `onClick`). */
|
|
7090
|
+
this.clicked = output();
|
|
7091
|
+
this.trailingRef = contentChild(IusMenuItemTrailingDirective, /* @ts-ignore */
|
|
7092
|
+
...(ngDevMode ? [{ debugName: "trailingRef" }] : /* istanbul ignore next */ []));
|
|
7093
|
+
/** El `<a>` solo se usa si hay `href` y la fila no está deshabilitada. */
|
|
7094
|
+
this.isLink = computed(() => !!this.href() && !this.disabled(), /* @ts-ignore */
|
|
7095
|
+
...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
|
|
7096
|
+
/** `null`/`undefined`/`false` = sin badge (el 0 sí se muestra, como el golden). */
|
|
7097
|
+
this.hasBadge = computed(() => {
|
|
7098
|
+
const badge = this.badge();
|
|
7099
|
+
return badge != null && badge !== false;
|
|
7100
|
+
}, /* @ts-ignore */
|
|
7101
|
+
...(ngDevMode ? [{ debugName: "hasBadge" }] : /* istanbul ignore next */ []));
|
|
7102
|
+
/** `true` → punto; número → píldora de contador. */
|
|
7103
|
+
this.badgeVariant = computed(() => this.badge() === true ? 'dot' : 'count', /* @ts-ignore */
|
|
7104
|
+
...(ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []));
|
|
7105
|
+
/** El punto del rail es informativo (azul); en menu avisa (rojo). */
|
|
7106
|
+
this.badgeTone = computed(() => {
|
|
7107
|
+
if (this.badge() !== true)
|
|
7108
|
+
return 'info';
|
|
7109
|
+
return this.variant() === 'rail' ? 'info' : 'danger';
|
|
7110
|
+
}, /* @ts-ignore */
|
|
7111
|
+
...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
|
|
7112
|
+
/** Valor del contador (solo cuando el badge es numérico). */
|
|
7113
|
+
this.badgeCount = computed(() => {
|
|
7114
|
+
const badge = this.badge();
|
|
7115
|
+
return typeof badge === 'number' ? badge : undefined;
|
|
7116
|
+
}, /* @ts-ignore */
|
|
7117
|
+
...(ngDevMode ? [{ debugName: "badgeCount" }] : /* istanbul ignore next */ []));
|
|
7118
|
+
}
|
|
7119
|
+
onClick(event) {
|
|
7120
|
+
if (this.disabled()) {
|
|
7121
|
+
event.preventDefault();
|
|
7122
|
+
return;
|
|
7123
|
+
}
|
|
7124
|
+
this.clicked.emit(event);
|
|
7125
|
+
}
|
|
7126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuItemComponent, isStandalone: true, selector: "ius-menu-item", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, itemRole: { classPropertyName: "itemRole", publicName: "itemRole", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-menu-item-host" }, queries: [{ propertyName: "trailingRef", first: true, predicate: IusMenuItemTrailingDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\n template compartido `#row` y se monta una \u00FAnica vez.\n-->\n@if (isLink()) {\n <a\n class=\"ius-menuitem\"\n [href]=\"href()\"\n [attr.role]=\"itemRole() || null\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-selected]=\"selected() ? 'true' : null\"\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\n [attr.data-danger]=\"danger() ? 'true' : null\"\n [attr.data-state]=\"state() || null\"\n [attr.aria-current]=\"selected() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"row\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"ius-menuitem\"\n [disabled]=\"disabled()\"\n [attr.role]=\"itemRole() || null\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-selected]=\"selected() ? 'true' : null\"\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\n [attr.data-danger]=\"danger() ? 'true' : null\"\n [attr.data-state]=\"state() || null\"\n [attr.aria-current]=\"selected() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"row\" />\n </button>\n}\n\n<ng-template #row>\n @if (icon()) {\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ icon() }}</span>\n </span>\n }\n\n <span class=\"ius-menuitem__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (hasBadge() || trailingRef()) {\n <span class=\"ius-menuitem__trailing\">\n @if (hasBadge()) {\n <ius-insignia\n [variant]=\"badgeVariant()\"\n [tone]=\"badgeTone()\"\n [count]=\"badgeCount()\"\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\n />\n }\n <ng-content select=\"[iusMenuItemTrailing]\" />\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7128
|
+
}
|
|
7129
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemComponent, decorators: [{
|
|
7130
|
+
type: Component,
|
|
7131
|
+
args: [{ selector: 'ius-menu-item', standalone: true, imports: [NgTemplateOutlet, InsigniaComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-menu-item-host' }, template: "<!--\n El elemento real de la fila es el `<a>`/`<button>` (host = display:contents).\n Solo una rama se instancia, as\u00ED que la proyecci\u00F3n del contenido vive en el\n template compartido `#row` y se monta una \u00FAnica vez.\n-->\n@if (isLink()) {\n <a\n class=\"ius-menuitem\"\n [href]=\"href()\"\n [attr.role]=\"itemRole() || null\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-selected]=\"selected() ? 'true' : null\"\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\n [attr.data-danger]=\"danger() ? 'true' : null\"\n [attr.data-state]=\"state() || null\"\n [attr.aria-current]=\"selected() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"row\" />\n </a>\n} @else {\n <button\n type=\"button\"\n class=\"ius-menuitem\"\n [disabled]=\"disabled()\"\n [attr.role]=\"itemRole() || null\"\n [attr.data-variant]=\"variant()\"\n [attr.data-size]=\"size() !== 'medium' ? size() : null\"\n [attr.data-selected]=\"selected() ? 'true' : null\"\n [attr.data-disabled]=\"disabled() ? 'true' : null\"\n [attr.data-danger]=\"danger() ? 'true' : null\"\n [attr.data-state]=\"state() || null\"\n [attr.aria-current]=\"selected() ? 'true' : null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"onClick($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"row\" />\n </button>\n}\n\n<ng-template #row>\n @if (icon()) {\n <span class=\"ius-menuitem__icon\" aria-hidden=\"true\">\n <span class=\"ius-icon\">{{ icon() }}</span>\n </span>\n }\n\n <span class=\"ius-menuitem__label\">\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (hasBadge() || trailingRef()) {\n <span class=\"ius-menuitem__trailing\">\n @if (hasBadge()) {\n <ius-insignia\n [variant]=\"badgeVariant()\"\n [tone]=\"badgeTone()\"\n [count]=\"badgeCount()\"\n [size]=\"badgeVariant() === 'count' ? 'small' : 'medium'\"\n />\n }\n <ng-content select=\"[iusMenuItemTrailing]\" />\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-menuitem{--_mi-icon: var(--ius-neutral-8);-webkit-user-select:none;user-select:none;--_mi-pad-y: 8px;--_mi-pad-x: 12px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 14px;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:var(--_mi-gap);padding:var(--_mi-pad-y) var(--_mi-pad-x);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-menuitem[data-size=small]{--_mi-pad-y: 6px;--_mi-pad-x: 10px;--_mi-gap: var(--ius-space-xs);--_mi-icon-size: var(--ius-icon-sm);--_mi-label: 13px}.ius-menuitem[data-size=large]{--_mi-pad-y: 11px;--_mi-pad-x: 14px;--_mi-gap: var(--ius-space-sm);--_mi-icon-size: var(--ius-icon-md);--_mi-label: 15px}.ius-menuitem__icon{flex:0 0 auto;display:inline-flex;color:var(--_mi-icon)}.ius-menuitem__icon .ius-icon{font-size:var(--_mi-icon-size);line-height:1}.ius-menuitem__label{flex:1 1 auto;min-width:0;font-size:var(--_mi-label);line-height:1.4;font-weight:var(--ius-fw-regular, 400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-menuitem__trailing{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-menuitem__trailing .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-menuitem:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-menuitem[data-disabled=true]{cursor:default;opacity:.5;pointer-events:none}.ius-menuitem[data-variant=menu]{--_mi-icon: var(--ius-neutral-8)}.ius-menuitem[data-variant=menu]:hover,.ius-menuitem[data-variant=menu][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=menu]:active,.ius-menuitem[data-variant=menu][data-state=pressed]{background:var(--ius-neutral-3)}.ius-menuitem[data-variant=menu][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=menu][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=menu][data-danger=true]{--_mi-icon: var(--ius-danger-500);color:var(--ius-danger-600)}.ius-menuitem[data-variant=menu][data-danger=true]:hover{background:color-mix(in srgb,var(--ius-danger-500) 10%,white)}.ius-menuitem[data-variant=rail]{--_mi-icon: var(--ius-success-500)}.ius-menuitem[data-variant=rail]:hover,.ius-menuitem[data-variant=rail][data-state=hover]{background:var(--ius-neutral-5)}.ius-menuitem[data-variant=rail][data-selected=true]{background:var(--ius-neutral-4)}.ius-menuitem[data-variant=rail][data-selected=true] .ius-menuitem__label{font-weight:var(--ius-fw-medium, 500)}.ius-menuitem[data-variant=rail]:active,.ius-menuitem[data-variant=rail][data-state=pressed]{--_mi-icon: var(--ius-neutral-white);background:var(--ius-success-500);color:var(--ius-neutral-white)}\n"] }]
|
|
7132
|
+
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], danger: [{ type: i0.Input, args: [{ isSignal: true, alias: "danger", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], itemRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemRole", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusMenuItemTrailingDirective), { isSignal: true }] }] } });
|
|
7133
|
+
|
|
7134
|
+
/**
|
|
7135
|
+
* Menu — Ius Design v2 (familia overlays). **SUPERFICIE compartida de menú.**
|
|
7136
|
+
*
|
|
7137
|
+
* Lista de **MenuItem** con encabezado opcional, divisores, grupos, ítems
|
|
7138
|
+
* peligrosos/deshabilitados y modo selección única (check a la derecha). Es el
|
|
7139
|
+
* cuerpo que **Dropdown** ancla a un disparador y **ContextMenu** ancla al
|
|
7140
|
+
* cursor: por sí sola **no se posiciona ni gestiona apertura**.
|
|
7141
|
+
*
|
|
7142
|
+
* Fuente de verdad: `Menu.jsx` + `Menu.d.ts` + `Menu.ng-spec.md`. Las filas se
|
|
7143
|
+
* renderizan con `size="small"` y `variant="menu"`, como el golden.
|
|
7144
|
+
*/
|
|
7145
|
+
class MenuComponent {
|
|
7146
|
+
constructor() {
|
|
7147
|
+
/** Opciones del menú (tipo compartido con Dropdown/ContextMenu). */
|
|
7148
|
+
this.items = input([], /* @ts-ignore */
|
|
7149
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
7150
|
+
/** Selección única: marca `value` con un check. */
|
|
7151
|
+
this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7152
|
+
/** Valor elegido en modo `selectable`. */
|
|
7153
|
+
this.value = input(/* @ts-ignore */
|
|
7154
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
7155
|
+
/** Encabezado visual del menú. */
|
|
7156
|
+
this.label = input(/* @ts-ignore */
|
|
7157
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
7158
|
+
/** Etiqueta accesible de la superficie. */
|
|
7159
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
7160
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
7161
|
+
/** Modo `selectable` — espejo de `onChange`. */
|
|
7162
|
+
this.valueChange = output();
|
|
7163
|
+
/** Tras activar un ítem — Dropdown/ContextMenu lo usan para cerrar. */
|
|
7164
|
+
this.itemClick = output();
|
|
7165
|
+
/**
|
|
7166
|
+
* Aplana `items` a filas pintables insertando los divisores de grupo: al
|
|
7167
|
+
* cambiar `group` respecto de la fila anterior se mete un separador (el
|
|
7168
|
+
* primer ítem nunca lo lleva), y `separator: true` es un divisor explícito.
|
|
7169
|
+
*/
|
|
7170
|
+
this.rows = computed(() => {
|
|
7171
|
+
const rows = [];
|
|
7172
|
+
const selectable = this.selectable();
|
|
7173
|
+
const value = this.value();
|
|
7174
|
+
let lastGroup;
|
|
7175
|
+
this.items().forEach((item, index) => {
|
|
7176
|
+
if (item.separator) {
|
|
7177
|
+
rows.push({ kind: 'separator', key: `sep-${index}` });
|
|
7178
|
+
return;
|
|
7179
|
+
}
|
|
7180
|
+
if (index > 0 && item.group !== undefined && item.group !== lastGroup) {
|
|
7181
|
+
rows.push({ kind: 'separator', key: `gsep-${index}` });
|
|
7182
|
+
}
|
|
7183
|
+
lastGroup = item.group;
|
|
7184
|
+
rows.push({
|
|
7185
|
+
kind: 'item',
|
|
7186
|
+
key: String(item.key ?? item.value ?? index),
|
|
7187
|
+
item,
|
|
7188
|
+
selected: selectable && item.value === value,
|
|
7189
|
+
});
|
|
7190
|
+
});
|
|
7191
|
+
return rows;
|
|
7192
|
+
}, /* @ts-ignore */
|
|
7193
|
+
...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
|
|
7194
|
+
}
|
|
7195
|
+
/** `trailing` como TemplateRef (slot rico) — si no, se pinta como texto. */
|
|
7196
|
+
trailingTpl(item) {
|
|
7197
|
+
return item.trailing instanceof TemplateRef ? item.trailing : null;
|
|
7198
|
+
}
|
|
7199
|
+
/** `trailing` como texto plano (atajo, valor corto). */
|
|
7200
|
+
trailingText(item) {
|
|
7201
|
+
return typeof item.trailing === 'string' ? item.trailing : null;
|
|
7202
|
+
}
|
|
7203
|
+
onItemClick(row, event) {
|
|
7204
|
+
const item = row.item;
|
|
7205
|
+
if (!item || item.disabled)
|
|
7206
|
+
return;
|
|
7207
|
+
if (this.selectable())
|
|
7208
|
+
this.valueChange.emit({ value: item.value, item });
|
|
7209
|
+
item.onClick?.(event);
|
|
7210
|
+
this.itemClick.emit({ item, event });
|
|
7211
|
+
}
|
|
7212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuComponent, isStandalone: true, selector: "ius-menu", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", itemClick: "itemClick" }, host: { attributes: { "role": "menu" }, properties: { "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-menu" }, ngImport: i0, template: "@if (label()) {\n <div class=\"ius-menu__label\">{{ label() }}</div>\n}\n\n@for (row of rows(); track row.key) {\n @if (row.kind === 'separator') {\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n itemRole=\"menuitem\"\n [icon]=\"row.item!.icon\"\n [label]=\"row.item!.label\"\n [danger]=\"!!row.item!.danger\"\n [disabled]=\"!!row.item!.disabled\"\n [selected]=\"!!row.selected\"\n (clicked)=\"onItemClick(row, $event)\"\n >\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\n @if (selectable()) {\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\n @if (row.selected) {\n <span class=\"ius-icon\">check</span>\n }\n </span>\n } @else if (trailingTpl(row.item!)) {\n <span iusMenuItemTrailing>\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\n </span>\n } @else if (trailingText(row.item!)) {\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\n }\n </ius-menu-item>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold, 600) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "directive", type: IusMenuItemTrailingDirective, selector: "[iusMenuItemTrailing]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7214
|
+
}
|
|
7215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuComponent, decorators: [{
|
|
7216
|
+
type: Component,
|
|
7217
|
+
args: [{ selector: 'ius-menu', standalone: true, imports: [NgTemplateOutlet, MenuItemComponent, IusMenuItemTrailingDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
7218
|
+
class: 'ius-menu',
|
|
7219
|
+
role: 'menu',
|
|
7220
|
+
'[attr.aria-label]': 'ariaLabel() || null',
|
|
7221
|
+
}, template: "@if (label()) {\n <div class=\"ius-menu__label\">{{ label() }}</div>\n}\n\n@for (row of rows(); track row.key) {\n @if (row.kind === 'separator') {\n <div class=\"ius-menu__sep\" role=\"separator\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n itemRole=\"menuitem\"\n [icon]=\"row.item!.icon\"\n [label]=\"row.item!.label\"\n [danger]=\"!!row.item!.danger\"\n [disabled]=\"!!row.item!.disabled\"\n [selected]=\"!!row.selected\"\n (clicked)=\"onItemClick(row, $event)\"\n >\n <!-- selectable \u2192 carril fijo del check; si no, el trailing de la opci\u00F3n -->\n @if (selectable()) {\n <span class=\"ius-menu__check\" iusMenuItemTrailing>\n @if (row.selected) {\n <span class=\"ius-icon\">check</span>\n }\n </span>\n } @else if (trailingTpl(row.item!)) {\n <span iusMenuItemTrailing>\n <ng-container [ngTemplateOutlet]=\"trailingTpl(row.item!)!\" />\n </span>\n } @else if (trailingText(row.item!)) {\n <span iusMenuItemTrailing>{{ trailingText(row.item!) }}</span>\n }\n </ius-menu-item>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;max-width:320px}.ius-menu__sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}.ius-menu__label{padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font:var(--ius-fw-semibold, 600) var(--ius-fs-sm)/1.2 var(--ius-font-display);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-menu__check{flex:0 0 auto;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-primary-700)}.ius-menu__check .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
7222
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
|
|
7223
|
+
|
|
7224
|
+
/**
|
|
7225
|
+
* Marca un disparador propio, en lugar del ghost texto+chevron por defecto:
|
|
7226
|
+
* `<ius-dropdown><ius-icon-button iusDropdownTrigger …/></ius-dropdown>`.
|
|
7227
|
+
*/
|
|
7228
|
+
class IusDropdownTriggerDirective {
|
|
7229
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusDropdownTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
7230
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusDropdownTriggerDirective, isStandalone: true, selector: "[iusDropdownTrigger]", ngImport: i0 }); }
|
|
7231
|
+
}
|
|
7232
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusDropdownTriggerDirective, decorators: [{
|
|
7233
|
+
type: Directive,
|
|
7234
|
+
args: [{ selector: '[iusDropdownTrigger]', standalone: true }]
|
|
7235
|
+
}] });
|
|
7236
|
+
/**
|
|
7237
|
+
* Dropdown — Ius Design v2 (familia overlays).
|
|
7238
|
+
*
|
|
7239
|
+
* Menú desplegable accionable: un disparador abre un **Popover** (sin rabito,
|
|
7240
|
+
* `bottom-start` por defecto) con una superficie **Menu**. Dos modos: **acciones**
|
|
7241
|
+
* (cada ítem ejecuta y cierra) y **selección única** (`selectable`, check en la
|
|
7242
|
+
* activa y la etiqueta elegida en el disparador).
|
|
7243
|
+
*
|
|
7244
|
+
* El disparador por defecto es un botón ghost texto+chevron (el chevron gira al
|
|
7245
|
+
* abrir); `variant="outline"` replica el contenedor del botón de QueryBuilder
|
|
7246
|
+
* (mismo borde/radio/padding/altura) para encajar en barras y SegmentGroup. Con
|
|
7247
|
+
* `[iusDropdownTrigger]` se proyecta un disparador propio.
|
|
7248
|
+
*
|
|
7249
|
+
* No es campo de formulario — eso es **Select**; para una sola acción →
|
|
7250
|
+
* Button/IconButton. Fuente de verdad: `Dropdown.jsx` + `Dropdown.d.ts` +
|
|
7251
|
+
* `Dropdown.ng-spec.md`.
|
|
7252
|
+
*/
|
|
7253
|
+
class DropdownComponent {
|
|
7254
|
+
constructor() {
|
|
7255
|
+
/** Opciones del menú (mismo shape que `MenuOption`). */
|
|
7256
|
+
this.items = input([], /* @ts-ignore */
|
|
7257
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
7258
|
+
/** Selección única: marca la opción activa con un check. */
|
|
7259
|
+
this.selectable = input(false, { ...(ngDevMode ? { debugName: "selectable" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7260
|
+
/** Valor elegido en modo `selectable`. */
|
|
7261
|
+
this.value = input(/* @ts-ignore */
|
|
7262
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
7263
|
+
/** Encabezado del menú (y texto del disparador por defecto si no hay elegida). */
|
|
7264
|
+
this.label = input(/* @ts-ignore */
|
|
7265
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
7266
|
+
/** Texto del disparador por defecto (gana sobre la opción elegida y `label`). */
|
|
7267
|
+
this.triggerLabel = input(/* @ts-ignore */
|
|
7268
|
+
...(ngDevMode ? [undefined, { debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
|
|
7269
|
+
/** Ícono Material Symbols del disparador por defecto. */
|
|
7270
|
+
this.triggerIcon = input(/* @ts-ignore */
|
|
7271
|
+
...(ngDevMode ? [undefined, { debugName: "triggerIcon" }] : /* istanbul ignore next */ []));
|
|
7272
|
+
/** Familia de color del disparador por defecto. */
|
|
7273
|
+
this.tone = input('primary', /* @ts-ignore */
|
|
7274
|
+
...(ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
7275
|
+
/** Tratamiento del disparador por defecto. */
|
|
7276
|
+
this.variant = input('ghost', /* @ts-ignore */
|
|
7277
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
7278
|
+
/** Colocación del panel respecto del disparador. */
|
|
7279
|
+
this.placement = input('bottom-start', /* @ts-ignore */
|
|
7280
|
+
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
7281
|
+
/** Modo controlado (`undefined` = no controlado con `defaultOpen`). */
|
|
7282
|
+
this.open = input(undefined, /* @ts-ignore */
|
|
7283
|
+
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
7284
|
+
/** Estado inicial del modo no controlado. */
|
|
7285
|
+
this.defaultOpen = input(false, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
7286
|
+
/** Etiqueta accesible del disparador por defecto. */
|
|
7287
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
7288
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
7289
|
+
/** Modo `selectable` — espejo de `onChange`. */
|
|
7290
|
+
this.valueChange = output();
|
|
7291
|
+
/** Apertura/cierre del panel. */
|
|
7292
|
+
this.openChange = output();
|
|
7293
|
+
this.customTrigger = contentChild(IusDropdownTriggerDirective, /* @ts-ignore */
|
|
7294
|
+
...(ngDevMode ? [{ debugName: "customTrigger" }] : /* istanbul ignore next */ []));
|
|
7295
|
+
/** `null` = el usuario todavía no ha abierto/cerrado → manda `defaultOpen`. */
|
|
7296
|
+
this.internalOpen = signal(null, /* @ts-ignore */
|
|
7297
|
+
...(ngDevMode ? [{ debugName: "internalOpen" }] : /* istanbul ignore next */ []));
|
|
7298
|
+
/** Controlado por `open` si viene definido; si no, estado interno. */
|
|
7299
|
+
this.isOpen = computed(() => this.open() ?? this.internalOpen() ?? this.defaultOpen(), /* @ts-ignore */
|
|
7300
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
7301
|
+
/** Opción activa en modo `selectable` — alimenta el texto del disparador. */
|
|
7302
|
+
this.current = computed(() => {
|
|
7303
|
+
if (!this.selectable())
|
|
7304
|
+
return undefined;
|
|
7305
|
+
return this.items().find((item) => item.value === this.value());
|
|
7306
|
+
}, /* @ts-ignore */
|
|
7307
|
+
...(ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []));
|
|
7308
|
+
/** `triggerLabel` › etiqueta de la opción elegida › `label`. */
|
|
7309
|
+
this.triggerText = computed(() => {
|
|
7310
|
+
const explicit = this.triggerLabel();
|
|
7311
|
+
if (explicit != null)
|
|
7312
|
+
return explicit;
|
|
7313
|
+
return this.current()?.label ?? this.label();
|
|
7314
|
+
}, /* @ts-ignore */
|
|
7315
|
+
...(ngDevMode ? [{ debugName: "triggerText" }] : /* istanbul ignore next */ []));
|
|
7316
|
+
/** El encabezado del menú solo aplica en modo selección (como el golden). */
|
|
7317
|
+
this.menuLabel = computed(() => this.selectable() ? this.label() : undefined, /* @ts-ignore */
|
|
7318
|
+
...(ngDevMode ? [{ debugName: "menuLabel" }] : /* istanbul ignore next */ []));
|
|
7319
|
+
}
|
|
7320
|
+
onOpenChange(open) {
|
|
7321
|
+
if (this.open() === undefined)
|
|
7322
|
+
this.internalOpen.set(open);
|
|
7323
|
+
this.openChange.emit(open);
|
|
7324
|
+
}
|
|
7325
|
+
onValueChange(payload) {
|
|
7326
|
+
this.valueChange.emit(payload);
|
|
7327
|
+
}
|
|
7328
|
+
/** Activar un ítem cierra el panel (acciones y selección). */
|
|
7329
|
+
onItemClick() {
|
|
7330
|
+
if (this.isOpen())
|
|
7331
|
+
this.onOpenChange(false);
|
|
7332
|
+
}
|
|
7333
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DropdownComponent, isStandalone: true, selector: "ius-dropdown", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, triggerIcon: { classPropertyName: "triggerIcon", publicName: "triggerIcon", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", openChange: "openChange" }, host: { classAttribute: "ius-dropdown" }, queries: [{ propertyName: "customTrigger", first: true, predicate: IusDropdownTriggerDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<ius-popover\n [placement]=\"placement()\"\n trigger=\"click\"\n [showArrow]=\"false\"\n [open]=\"isOpen()\"\n [dismissable]=\"true\"\n panelClass=\"ius-dropdown-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\n @if (customTrigger()) {\n <ng-content select=\"[iusDropdownTrigger]\" />\n } @else {\n <button\n type=\"button\"\n class=\"ius-dropdown__trigger\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n >\n @if (triggerIcon()) {\n <span class=\"ius-icon\">{{ triggerIcon() }}</span>\n }\n {{ triggerText() }}\n <span class=\"ius-icon ius-dropdown__chev\">expand_more</span>\n </button>\n }\n\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\n <div iusPopoverContent>\n <ius-menu\n [items]=\"items()\"\n [selectable]=\"selectable()\"\n [value]=\"value()\"\n [label]=\"menuLabel()\"\n [ariaLabel]=\"ariaLabel()\"\n (valueChange)=\"onValueChange($event)\"\n (itemClick)=\"onItemClick()\"\n />\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold, 600) var(--ius-fs-sm)/1.2 var(--ius-font-body);color:var(--ius-primary-700);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger:hover{background:var(--ius-neutral-2)}.ius-dropdown__trigger[data-tone=neutral]{color:var(--ius-text-secondary)}.ius-dropdown__trigger[data-tone=neutral]:hover,.ius-dropdown__trigger[data-tone=neutral][data-open=true]{color:var(--ius-text-primary)}.ius-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-dropdown__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-dropdown__trigger .ius-dropdown__chev{transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger[data-open=true] .ius-dropdown__chev{transform:rotate(180deg)}.ius-dropdown__trigger[data-variant=outline]{border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1 var(--ius-font-body)}.ius-dropdown__trigger[data-variant=outline]:hover{background:var(--ius-neutral-white);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-dropdown__trigger[data-variant=outline][data-open=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}\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"] }, { kind: "component", type: MenuComponent, selector: "ius-menu", inputs: ["items", "selectable", "value", "label", "ariaLabel"], outputs: ["valueChange", "itemClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7335
|
+
}
|
|
7336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
7337
|
+
type: Component,
|
|
7338
|
+
args: [{ selector: 'ius-dropdown', standalone: true, imports: [PopoverComponent, MenuComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-dropdown' }, template: "<ius-popover\n [placement]=\"placement()\"\n trigger=\"click\"\n [showArrow]=\"false\"\n [open]=\"isOpen()\"\n [dismissable]=\"true\"\n panelClass=\"ius-dropdown-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- Disparador: propio proyectado \u203A ghost/outline texto+chevron por defecto -->\n @if (customTrigger()) {\n <ng-content select=\"[iusDropdownTrigger]\" />\n } @else {\n <button\n type=\"button\"\n class=\"ius-dropdown__trigger\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-tone]=\"tone() !== 'primary' ? tone() : null\"\n [attr.data-variant]=\"variant() !== 'ghost' ? variant() : null\"\n [attr.aria-haspopup]=\"'menu'\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel() || null\"\n >\n @if (triggerIcon()) {\n <span class=\"ius-icon\">{{ triggerIcon() }}</span>\n }\n {{ triggerText() }}\n <span class=\"ius-icon ius-dropdown__chev\">expand_more</span>\n </button>\n }\n\n <!-- Panel: la superficie Menu (el Popover solo la ancla) -->\n <div iusPopoverContent>\n <ius-menu\n [items]=\"items()\"\n [selectable]=\"selectable()\"\n [value]=\"value()\"\n [label]=\"menuLabel()\"\n [ariaLabel]=\"ariaLabel()\"\n (valueChange)=\"onValueChange($event)\"\n (itemClick)=\"onItemClick()\"\n />\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-dropdown__trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-semibold, 600) var(--ius-fs-sm)/1.2 var(--ius-font-body);color:var(--ius-primary-700);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);white-space:nowrap;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger:hover{background:var(--ius-neutral-2)}.ius-dropdown__trigger[data-tone=neutral]{color:var(--ius-text-secondary)}.ius-dropdown__trigger[data-tone=neutral]:hover,.ius-dropdown__trigger[data-tone=neutral][data-open=true]{color:var(--ius-text-primary)}.ius-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-dropdown__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-dropdown__trigger .ius-dropdown__chev{transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-dropdown__trigger[data-open=true] .ius-dropdown__chev{transform:rotate(180deg)}.ius-dropdown__trigger[data-variant=outline]{border:1px solid var(--ius-stroke);background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);gap:var(--ius-space-xs);font:var(--ius-fw-regular, 400) var(--ius-fs-base)/1 var(--ius-font-body)}.ius-dropdown__trigger[data-variant=outline]:hover{background:var(--ius-neutral-white);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-dropdown__trigger[data-variant=outline][data-open=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}\n"] }]
|
|
7339
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], triggerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerIcon", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], openChange: [{ type: i0.Output, args: ["openChange"] }], customTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusDropdownTriggerDirective), { isSignal: true }] }] } });
|
|
7340
|
+
|
|
7341
|
+
/*
|
|
7342
|
+
* StatusCatalog — foundation (vocabulario controlado de ESTADOS por entidad).
|
|
7343
|
+
*
|
|
7344
|
+
* QUÉ ES. No es un componente de UI: son `const` + funciones puras, igual que
|
|
7345
|
+
* IllustrationCatalog / EventCatalog / CategoryPalette. Define QUÉ estados
|
|
7346
|
+
* existen para cada entidad del sistema y con qué `label · tone · icon`, de modo
|
|
7347
|
+
* que un único átomo visual (`StatusChip`) sirva a todas las entidades y cada
|
|
7348
|
+
* una traiga su propio diccionario.
|
|
7349
|
+
*
|
|
7350
|
+
* QUÉ COMPONE. Es la fuente de verdad compartida por: `StatusChip`, los filtros
|
|
7351
|
+
* y ordenamientos por estado (`statusOptions`), el enum de estados del backend y
|
|
7352
|
+
* los prompts de ElenIA (valores permitidos al clasificar).
|
|
7353
|
+
*
|
|
7354
|
+
* REGLA FIRME. Estado → familia SEMÁNTICA (`info`/`neutral`/`primary`/`success`/
|
|
7355
|
+
* `warning`/`danger`). Nunca un hue "fruta": la fruta es IDENTIDAD (categoría),
|
|
7356
|
+
* no estado.
|
|
7357
|
+
*
|
|
7358
|
+
* CUÁNDO **NO** USARLO.
|
|
7359
|
+
* - Para un color de identidad/categoría → `CategoryPalette`.
|
|
7360
|
+
* - Para un tipo de evento (kind → ícono) → `EventCatalog`.
|
|
7361
|
+
* - Para elegir tono/ícono de estado "a ojo" en el consumidor: si un estado aún
|
|
7362
|
+
* no está en el catálogo se pasa por `customMap` y, si se vuelve común, se
|
|
7363
|
+
* PROMUEVE a este archivo.
|
|
7364
|
+
* - Para DERIVAR estados: calcular `por_vencer`/`vencida` desde la fecha límite
|
|
7365
|
+
* de una tarea vive en el CONSUMIDOR. El catálogo solo mapea la clave ya
|
|
7366
|
+
* resuelta (un solo campo, un solo chip).
|
|
7367
|
+
*
|
|
7368
|
+
* FUENTE DE VERDAD. Proyecto Claude Design →
|
|
7369
|
+
* `components/foundations/StatusCatalog/StatusCatalog.jsx` + `.d.ts` +
|
|
7370
|
+
* `.ng-spec.md` + `statuscatalog.card.html`.
|
|
7371
|
+
*
|
|
7372
|
+
* DIVERGENCIAS / DECISIONES DE PORT (para que diseño las resuelva):
|
|
7373
|
+
* 1. `StatusMeta.label` es `string` (en el golden es `ReactNode`). Regla 5 del
|
|
7374
|
+
* port: un ReactNode dentro de un objeto de datos se degrada a string. Si
|
|
7375
|
+
* alguna vez hiciera falta contenido rico, el consumidor lo resuelve con un
|
|
7376
|
+
* `TemplateRef` a partir de `label`.
|
|
7377
|
+
* 2. NO se porta el render auxiliar `StatusCatalog(props)` del `.jsx`: es una
|
|
7378
|
+
* ayuda visual de la card de documentación, no API de producción. Su
|
|
7379
|
+
* equivalente vive en el playground.
|
|
7380
|
+
* 3. El vocabulario `gestion` está marcado en la ng-spec como **propuesto —
|
|
7381
|
+
* confirmar con backend**. Se porta tal cual el golden, pero sus claves y
|
|
7382
|
+
* tonos pueden cambiar; `actuacion` sí está validado.
|
|
7383
|
+
* 4. Catálogo ABIERTO e INCOMPLETO a propósito: FALTAN (pendientes de
|
|
7384
|
+
* validación humana, §6 del golden) `correo_enviado`, `whatsapp_enviado`,
|
|
7385
|
+
* `localizador_consultado`, `factura`, `plan`, `usuario`, `rol`, `grupo`,
|
|
7386
|
+
* entre otras. NO se inventan aquí: se listan en `STATUS_VOCABS_PENDING` y
|
|
7387
|
+
* se agregan a `STATUS_VOCAB` cuando el backend confirme sus estados/tonos.
|
|
7388
|
+
* Ver `backlog.md › «StatusCatalog — vocabularios por entidad»`.
|
|
7389
|
+
* 5. `statusToneVars` acepta `null`/`undefined` (el golden tipa `StatusTone`).
|
|
7390
|
+
* Es un superset: el consumidor que aún no resolvió el tono cae a `neutral`
|
|
7391
|
+
* sin ramas extra, igual que el `|| TONE_VARS.neutral` del golden.
|
|
7392
|
+
*/
|
|
7393
|
+
/** Los 6 tonos semánticos, en el orden del contrato. Útil para matrices/demos. */
|
|
7394
|
+
const STATUS_TONES = [
|
|
7395
|
+
'info',
|
|
7396
|
+
'neutral',
|
|
7397
|
+
'primary',
|
|
7398
|
+
'success',
|
|
7399
|
+
'warning',
|
|
7400
|
+
'danger',
|
|
7401
|
+
];
|
|
7402
|
+
/**
|
|
7403
|
+
* Catálogo: entidad → `{ status → StatusMeta }`.
|
|
7404
|
+
*
|
|
7405
|
+
* El **orden de declaración** de cada estado es el orden del ciclo. El catálogo
|
|
7406
|
+
* es ABIERTO: se agregan entidades aquí sin tocar `StatusChip` (ver
|
|
7407
|
+
* `STATUS_VOCABS_PENDING`). Un módulo puede además extender en runtime pasando
|
|
7408
|
+
* `customMap` a `resolveStatus`.
|
|
7409
|
+
*/
|
|
7410
|
+
const STATUS_VOCAB = {
|
|
7411
|
+
/* ── Actuaciones / novedades (ciclo VALIDADO) ─────────────────────────────
|
|
7412
|
+
Ciclo tipo "leer un correo": nueva (IA, no leída) → vista (leída, sin
|
|
7413
|
+
trabajo — fin válido) → en gestión (tarea/actividad en trámite) → cerrada
|
|
7414
|
+
(completada y confirmada). La actuación NO vence: el vencimiento es estado
|
|
7415
|
+
de sus TAREAS (vocab `gestion`), no de la actuación — por eso `gestion` de
|
|
7416
|
+
actuación es `primary` y no `warning`. */
|
|
7417
|
+
actuacion: {
|
|
7418
|
+
nueva: { label: 'Nueva', tone: 'info', icon: 'fiber_new' },
|
|
7419
|
+
vista: { label: 'Vista', tone: 'neutral', icon: 'drafts' },
|
|
7420
|
+
gestion: { label: 'En gestión', tone: 'primary', icon: 'pending_actions' },
|
|
7421
|
+
cerrada: { label: 'Cerrada', tone: 'success', icon: 'check_circle' },
|
|
7422
|
+
},
|
|
7423
|
+
/* ── Gestiones / tareas del equipo interno ────────────────────────────────
|
|
7424
|
+
Ciclo de una tarea/actividad: por hacer → en curso → hecha. La URGENCIA
|
|
7425
|
+
(`por_vencer` / `vencida`) NO es un estado propio: se DERIVA de la fecha
|
|
7426
|
+
límite EN EL CONSUMIDOR y reemplaza a `por_hacer`/`en_curso` al mostrar. Las
|
|
7427
|
+
ANOTACIONES (notas) no tienen ciclo → no llevan chip (son un registro).
|
|
7428
|
+
Estados/tonos PROPUESTOS — confirmar con backend (§6 del golden). */
|
|
7429
|
+
gestion: {
|
|
7430
|
+
por_hacer: { label: 'Por hacer', tone: 'info', icon: 'radio_button_unchecked' },
|
|
7431
|
+
en_curso: { label: 'En curso', tone: 'primary', icon: 'pending' },
|
|
7432
|
+
por_vencer: { label: 'Por vencer', tone: 'warning', icon: 'schedule' },
|
|
7433
|
+
vencida: { label: 'Vencida', tone: 'danger', icon: 'event_busy' },
|
|
7434
|
+
hecha: { label: 'Hecha', tone: 'success', icon: 'check_circle' },
|
|
7435
|
+
},
|
|
7436
|
+
/* ── Puntos de extensión (PENDIENTES de validación humana · §6) ───────────
|
|
7437
|
+
Los estados/tonos de esas entidades requieren ajuste con el backend antes de
|
|
7438
|
+
fijarlos: NO se inventan aquí. Se agregan como una entrada más (misma forma
|
|
7439
|
+
que `actuacion`) cuando se validen. Ver `STATUS_VOCABS_PENDING`. */
|
|
7440
|
+
};
|
|
7441
|
+
/**
|
|
7442
|
+
* Vista abierta del catálogo para los helpers: acepta cualquier `string` y
|
|
7443
|
+
* devuelve `undefined` si la entidad no existe. `STATUS_VOCAB` conserva sus
|
|
7444
|
+
* claves literales para el consumidor tipado.
|
|
7445
|
+
*/
|
|
7446
|
+
const CATALOG = STATUS_VOCAB;
|
|
7447
|
+
/** Entidades con vocabulario definido. */
|
|
7448
|
+
const STATUS_VOCABS = Object.keys(STATUS_VOCAB);
|
|
7449
|
+
/**
|
|
7450
|
+
* Entidades que TIENEN estado pero cuyo vocabulario aún NO está en el catálogo:
|
|
7451
|
+
* sus estados/tonos son decisión humana pendiente con el backend (§6 del
|
|
7452
|
+
* golden). Se listan para documentar el hueco, no para inventarlo. Al validarse
|
|
7453
|
+
* se agregan a `STATUS_VOCAB` y se quitan de aquí; `StatusChip` no se toca.
|
|
7454
|
+
*/
|
|
7455
|
+
const STATUS_VOCABS_PENDING = [
|
|
7456
|
+
'correo_enviado',
|
|
7457
|
+
'whatsapp_enviado',
|
|
7458
|
+
'localizador_consultado',
|
|
7459
|
+
'factura',
|
|
7460
|
+
'plan',
|
|
7461
|
+
'usuario',
|
|
7462
|
+
'rol',
|
|
7463
|
+
'grupo',
|
|
7464
|
+
];
|
|
7465
|
+
/**
|
|
7466
|
+
* Estados (claves) de una entidad, en orden de ciclo.
|
|
7467
|
+
* `[]` si la entidad no existe.
|
|
7468
|
+
*/
|
|
7469
|
+
function statusOrder(vocab) {
|
|
7470
|
+
const map = CATALOG[vocab];
|
|
7471
|
+
return map ? Object.keys(map) : [];
|
|
7472
|
+
}
|
|
7473
|
+
/**
|
|
7474
|
+
* Mapa `status → StatusMeta` de una entidad.
|
|
7475
|
+
* `null` si la entidad no está en el catálogo (retorno nullable, a propósito).
|
|
7476
|
+
*/
|
|
7477
|
+
function statusVocab(vocab) {
|
|
7478
|
+
return CATALOG[vocab] ?? null;
|
|
7479
|
+
}
|
|
7480
|
+
/**
|
|
7481
|
+
* Resuelve un estado a `StatusMeta` en este orden:
|
|
7482
|
+
* 1. `customMap[status]` — extensión en runtime del módulo consumidor;
|
|
7483
|
+
* 2. catálogo central de la entidad;
|
|
7484
|
+
* 3. `null` — entidad o estado desconocido: el consumidor decide (el átomo
|
|
7485
|
+
* `StatusChip` cae a `neutral` con el `status` crudo como rótulo).
|
|
7486
|
+
*
|
|
7487
|
+
* @param vocab Entidad (p. ej. `'actuacion'`).
|
|
7488
|
+
* @param status Clave del estado YA resuelta por el consumidor (la urgencia de
|
|
7489
|
+
* una tarea se deriva antes de llamar aquí).
|
|
7490
|
+
* @param customMap Vocabulario extra del módulo; gana sobre el catálogo.
|
|
7491
|
+
*/
|
|
7492
|
+
function resolveStatus(vocab, status, customMap) {
|
|
7493
|
+
if (customMap && status != null && customMap[status])
|
|
7494
|
+
return customMap[status];
|
|
7495
|
+
const map = CATALOG[vocab];
|
|
7496
|
+
if (!map || status == null)
|
|
7497
|
+
return null;
|
|
7498
|
+
return map[status] ?? null;
|
|
7499
|
+
}
|
|
7500
|
+
/**
|
|
7501
|
+
* Opciones listas para dropdown / filtro / orden de una entidad, en orden de
|
|
7502
|
+
* ciclo. `[]` si la entidad no existe.
|
|
7503
|
+
*/
|
|
7504
|
+
function statusOptions(vocab) {
|
|
7505
|
+
const map = CATALOG[vocab];
|
|
7506
|
+
if (!map)
|
|
7507
|
+
return [];
|
|
7508
|
+
return Object.keys(map).map((key) => {
|
|
7509
|
+
const meta = map[key];
|
|
7510
|
+
return { value: key, label: meta.label, tone: meta.tone, icon: meta.icon };
|
|
7511
|
+
});
|
|
7512
|
+
}
|
|
7513
|
+
/*
|
|
7514
|
+
* Tono semántico → variables de color del punto/texto.
|
|
7515
|
+
*
|
|
7516
|
+
* ESPEJO EXACTO del bloque `[data-tone]` del SCSS de `StatusChip`: una sola
|
|
7517
|
+
* fuente de verdad tono→variables. Si cambia aquí, cambia allá (y viceversa).
|
|
7518
|
+
* El SCSS del átomo debe declarar literalmente estos mismos pares:
|
|
7519
|
+
*
|
|
7520
|
+
* :host([data-tone='info']) { --_sc-fg: var(--ius-info-700); --_sc-mark: var(--ius-info-500); }
|
|
7521
|
+
* :host([data-tone='neutral']) { --_sc-fg: var(--ius-text-secondary); --_sc-mark: var(--ius-neutral-6); }
|
|
7522
|
+
* :host([data-tone='primary']) { --_sc-fg: var(--ius-primary-700); --_sc-mark: var(--ius-primary-500); }
|
|
7523
|
+
* :host([data-tone='success']) { --_sc-fg: var(--ius-success-700); --_sc-mark: var(--ius-success-600); }
|
|
7524
|
+
* :host([data-tone='warning']) { --_sc-fg: var(--ius-warning-700); --_sc-mark: var(--ius-warning-500); }
|
|
7525
|
+
* :host([data-tone='danger']) { --_sc-fg: var(--ius-danger-700); --_sc-mark: var(--ius-danger-500); }
|
|
7526
|
+
*
|
|
7527
|
+
* Ojo: `success` usa `-600` en la marca (no `-500`) y `neutral` usa el token
|
|
7528
|
+
* semántico de texto `--ius-text-secondary`; así está en el golden.
|
|
7529
|
+
*/
|
|
7530
|
+
const TONE_VARS = {
|
|
7531
|
+
info: { fg: 'var(--ius-info-700)', mark: 'var(--ius-info-500)' },
|
|
7532
|
+
neutral: { fg: 'var(--ius-text-secondary)', mark: 'var(--ius-neutral-6)' },
|
|
7533
|
+
primary: { fg: 'var(--ius-primary-700)', mark: 'var(--ius-primary-500)' },
|
|
7534
|
+
success: { fg: 'var(--ius-success-700)', mark: 'var(--ius-success-600)' },
|
|
7535
|
+
warning: { fg: 'var(--ius-warning-700)', mark: 'var(--ius-warning-500)' },
|
|
7536
|
+
danger: { fg: 'var(--ius-danger-700)', mark: 'var(--ius-danger-500)' },
|
|
7537
|
+
};
|
|
7538
|
+
/**
|
|
7539
|
+
* Tono semántico → `{ fg, mark }` (strings `var(--ius-*)`).
|
|
7540
|
+
* Único punto del sistema que conoce las vars de color del estado.
|
|
7541
|
+
* Un tono desconocido, `null` o `undefined` cae a `neutral` (nunca falla).
|
|
7542
|
+
*/
|
|
7543
|
+
function statusToneVars(tone) {
|
|
7544
|
+
return (tone && TONE_VARS[tone]) || TONE_VARS.neutral;
|
|
7545
|
+
}
|
|
7546
|
+
|
|
7547
|
+
/**
|
|
7548
|
+
* Texto de relleno que el golden muestra en los especímenes con estado forzado
|
|
7549
|
+
* (`hover` / `focused`) cuando la barra NO está atada a un valor y está vacía,
|
|
7550
|
+
* para que el círculo de limpiar se vea "natural" en la matriz de la card.
|
|
7551
|
+
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
7552
|
+
*/
|
|
7553
|
+
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
7554
|
+
let uid$1 = 0;
|
|
7555
|
+
/**
|
|
7556
|
+
* SearchBar — Ius Design v2.
|
|
7557
|
+
*
|
|
7558
|
+
* Barra de **búsqueda** (filtrado de tablas, listas y resultados: proceso,
|
|
7559
|
+
* radicado, deudor). Compone: `input[type=search]` + botón circular de limpiar
|
|
7560
|
+
* (slot reservado) + botón de lupa. Tratamiento de color poco intrusivo:
|
|
7561
|
+
* vacía = relleno gris discreto · con criterio = blanco + borde hairline ·
|
|
7562
|
+
* foco = blanco + borde de marca + lupa azul · disabled = gris atenuado.
|
|
7563
|
+
*
|
|
7564
|
+
* **Cuándo NO usarlo:** como campo de formulario con label/validación (eso es
|
|
7565
|
+
* `ius-text-field`), para elegir de una lista cerrada (`ius-select`) o para
|
|
7566
|
+
* filtros estructurados por chips (FilterBar).
|
|
7567
|
+
*
|
|
7568
|
+
* Implementa `ControlValueAccessor` completo (`string`) para `[(ngModel)]` /
|
|
7569
|
+
* `formControl`, y además soporta `[(value)]`.
|
|
7570
|
+
*
|
|
7571
|
+
* Fuente de verdad: `components/inputs/SearchBar/SearchBar.jsx` + `.d.ts` +
|
|
7572
|
+
* `SearchBar.ng-spec.md` + `searchbar.card.html` / `playground.card.html`.
|
|
7573
|
+
*
|
|
7574
|
+
* ── Notas del port a Angular ─────────────────────────────────────────────
|
|
7575
|
+
* - `.ius-sb` (raíz del golden) **es el host**: no hay div envolvente, porque
|
|
7576
|
+
* uno rompería `:focus-within` y el `role="search"` del contenedor real.
|
|
7577
|
+
* - El botón de limpiar **nunca sale del flujo**: solo alterna `visibility` +
|
|
7578
|
+
* `pointer-events` (`.ius-sb__clear--hidden`), así aparecer/desaparecer no
|
|
7579
|
+
* desplaza el input ni la lupa (geometría estable).
|
|
7580
|
+
* - `blur` → `onTouched()` es un añadido del port (el golden React no tiene
|
|
7581
|
+
* `onBlur`); lo exige el `ControlValueAccessor`.
|
|
7582
|
+
* - Limpiar emite `valueChange('')` además de `cleared` (el golden solo llama
|
|
7583
|
+
* `onClear`): el CVA obliga a propagar el valor nuevo al modelo. Mismo
|
|
7584
|
+
* criterio que `ius-text-field`.
|
|
7585
|
+
*
|
|
7586
|
+
* ── Divergencias doc vs golden (manda el golden; para diseño) ────────────
|
|
7587
|
+
* - `searchbar.card.html` §06 lista `--ius-radius-md (8px)` como radio de la
|
|
7588
|
+
* barra, pero el CSS golden usa `var(--ius-radius-lg)` (14px). Se porta el
|
|
7589
|
+
* golden.
|
|
7590
|
+
* - `SearchBar.prompt.md` y §06 anuncian **anillo de foco** (`--ius-focus-ring`)
|
|
7591
|
+
* en la barra enfocada; el CSS golden lo niega explícitamente
|
|
7592
|
+
* ("sin sombra exterior") y solo aplica el anillo al `:focus-visible` de los
|
|
7593
|
+
* botones internos. Se porta el golden.
|
|
7594
|
+
* - §02 "Anatomía" numera la lupa como pieza 1 (sugiere lupa a la izquierda),
|
|
7595
|
+
* pero el golden renderiza `input → limpiar → lupa`, así que la lupa queda a
|
|
7596
|
+
* la **derecha**. Se porta el golden.
|
|
7597
|
+
*/
|
|
7598
|
+
class SearchBarComponent {
|
|
7599
|
+
constructor() {
|
|
7600
|
+
// ── Valor ─────────────────────────────────────────────────────────────
|
|
7601
|
+
this.valueState = signal('', /* @ts-ignore */
|
|
7602
|
+
...(ngDevMode ? [{ debugName: "valueState" }] : /* istanbul ignore next */ []));
|
|
7603
|
+
/** Marca si el consumidor ató el valor (input `value`, `[(value)]` o CVA). */
|
|
7604
|
+
this.boundValue = signal(false, /* @ts-ignore */
|
|
7605
|
+
...(ngDevMode ? [{ debugName: "boundValue" }] : /* istanbul ignore next */ []));
|
|
7606
|
+
// ── Inputs con signal de respaldo (patrón familia de texto) ───────────
|
|
7607
|
+
this.sizeState = signal('medium', /* @ts-ignore */
|
|
7608
|
+
...(ngDevMode ? [{ debugName: "sizeState" }] : /* istanbul ignore next */ []));
|
|
7609
|
+
/** `disabled` recibido como input del template. */
|
|
7610
|
+
this.disabledInput = signal(false, /* @ts-ignore */
|
|
7611
|
+
...(ngDevMode ? [{ debugName: "disabledInput" }] : /* istanbul ignore next */ []));
|
|
7612
|
+
/** `disabled` impuesto por el formulario (`setDisabledState`). */
|
|
7613
|
+
this.disabledByForm = signal(false, /* @ts-ignore */
|
|
7614
|
+
...(ngDevMode ? [{ debugName: "disabledByForm" }] : /* istanbul ignore next */ []));
|
|
7615
|
+
/** Estado visual forzado — **solo demos/especímenes** del DS. */
|
|
7616
|
+
this.stateInput = signal(undefined, /* @ts-ignore */
|
|
7617
|
+
...(ngDevMode ? [{ debugName: "stateInput" }] : /* istanbul ignore next */ []));
|
|
7618
|
+
// ── Inputs planos ─────────────────────────────────────────────────────
|
|
7619
|
+
/** Texto guía dentro del input. Di qué se puede buscar. */
|
|
7620
|
+
this.placeholder = 'Buscar';
|
|
7621
|
+
/** Etiqueta accesible del input. */
|
|
7622
|
+
this.ariaLabel = 'Buscar';
|
|
7623
|
+
// ── Outputs ───────────────────────────────────────────────────────────
|
|
7624
|
+
/** Cambio de criterio en cada tecla (original `onChange`). Habilita `[(value)]`. */
|
|
7625
|
+
this.valueChange = new EventEmitter();
|
|
7626
|
+
/**
|
|
7627
|
+
* Disparo de búsqueda: Enter o clic en la lupa (original `onSearch`).
|
|
7628
|
+
*
|
|
7629
|
+
* Nota: `input[type=search]` tiene un evento DOM nativo homónimo, pero al
|
|
7630
|
+
* declararse como `@Output` Angular enlaza **solo** este emisor en
|
|
7631
|
+
* `(search)` (no añade listener de DOM), así que no hay doble disparo.
|
|
7632
|
+
*/
|
|
7633
|
+
this.search = new EventEmitter();
|
|
7634
|
+
/** Al limpiar con el botón circular (original `onClear`). */
|
|
7635
|
+
this.cleared = new EventEmitter();
|
|
7636
|
+
// ── Estado interno ────────────────────────────────────────────────────
|
|
7637
|
+
this.inputRef = viewChild.required('input');
|
|
7638
|
+
this.autoId = `ius-sb-${uid$1++}`;
|
|
7639
|
+
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
7640
|
+
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
7641
|
+
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
7642
|
+
/** Disabled efectivo (input + formulario + estado forzado de demo). */
|
|
7643
|
+
this.isDisabled = computed(() => this.disabledInput() ||
|
|
7644
|
+
this.disabledByForm() ||
|
|
7645
|
+
this.stateInput() === 'disabled', /* @ts-ignore */
|
|
7646
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
7647
|
+
/** ¿Hay criterio? Gobierna `data-filled` y la visibilidad del círculo ×. */
|
|
7648
|
+
this.filled = computed(() => (!!this.valueState() || this.demoFilled()) && !this.isDisabled(), /* @ts-ignore */
|
|
7649
|
+
...(ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []));
|
|
7650
|
+
/** Valor que se pinta en el input (solo difiere del real en demos). */
|
|
7651
|
+
this.displayValue = computed(() => this.demoFilled() && !this.boundValue() && !this.valueState()
|
|
7652
|
+
? IUS_SB_DEMO_VALUE
|
|
7653
|
+
: this.valueState(), /* @ts-ignore */
|
|
7654
|
+
...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
7655
|
+
this.onChangeFn = () => { };
|
|
7656
|
+
this.onTouchedFn = () => { };
|
|
7657
|
+
}
|
|
7658
|
+
/** Criterio de búsqueda (controlado). Habilita `[(value)]`. */
|
|
7659
|
+
set value(value) {
|
|
7660
|
+
if (value === undefined)
|
|
7661
|
+
return;
|
|
7662
|
+
this.boundValue.set(true);
|
|
7663
|
+
this.valueState.set(value ?? '');
|
|
7664
|
+
}
|
|
7665
|
+
get value() {
|
|
7666
|
+
return this.valueState();
|
|
7667
|
+
}
|
|
7668
|
+
/** Criterio inicial (no controlado). Equivale a `defaultValue` del golden. */
|
|
7669
|
+
set defaultValue(value) {
|
|
7670
|
+
if (value === undefined || value === null)
|
|
7671
|
+
return;
|
|
7672
|
+
this.valueState.set(value);
|
|
7673
|
+
}
|
|
7674
|
+
/** Escala de la barra. Sin valor explícito hereda `--ius-control-size`. */
|
|
7675
|
+
set size(value) {
|
|
7676
|
+
this.sizeState.set(value ?? 'medium');
|
|
7677
|
+
}
|
|
7678
|
+
get size() {
|
|
7679
|
+
return this.sizeState();
|
|
7680
|
+
}
|
|
7681
|
+
/**
|
|
7682
|
+
* Estado deshabilitado. El efectivo es
|
|
7683
|
+
* `input || setDisabledState() || state === 'disabled'`, así una fuente no
|
|
7684
|
+
* pisa a la otra (un `[disabled]="false"` no reactiva un control que el
|
|
7685
|
+
* formulario deshabilitó, ni al revés).
|
|
7686
|
+
*/
|
|
7687
|
+
set disabled(value) {
|
|
7688
|
+
this.disabledInput.set(value);
|
|
7689
|
+
}
|
|
7690
|
+
get disabled() {
|
|
7691
|
+
return this.isDisabled();
|
|
7692
|
+
}
|
|
7693
|
+
/**
|
|
7694
|
+
* Fuerza un estado visual (`hover` · `focused` · `disabled`).
|
|
7695
|
+
* **Solo demos/especímenes**: en producción usa `disabled` y deja que el
|
|
7696
|
+
* navegador resuelva hover/foco. Con `hover`/`focused`, la barra vacía y
|
|
7697
|
+
* *sin* valor atado, el golden pinta un criterio de relleno para que se vea
|
|
7698
|
+
* el círculo de limpiar (ver `IUS_SB_DEMO_VALUE`).
|
|
7699
|
+
*/
|
|
7700
|
+
set state(value) {
|
|
7701
|
+
this.stateInput.set(value ?? undefined);
|
|
7702
|
+
}
|
|
7703
|
+
get state() {
|
|
7704
|
+
return this.stateInput();
|
|
7705
|
+
}
|
|
7706
|
+
get inputId() {
|
|
7707
|
+
return this.id ?? this.autoId;
|
|
7708
|
+
}
|
|
7709
|
+
// ── ControlValueAccessor ──────────────────────────────────────────────
|
|
7710
|
+
writeValue(value) {
|
|
7711
|
+
// `filled` / `displayValue` derivan de `valueState`, así que el
|
|
7712
|
+
// `data-filled` del host se recalcula solo al escribir desde el formulario.
|
|
7713
|
+
this.boundValue.set(true);
|
|
7714
|
+
this.valueState.set(value ?? '');
|
|
7715
|
+
}
|
|
7716
|
+
registerOnChange(fn) {
|
|
7717
|
+
this.onChangeFn = fn;
|
|
7718
|
+
}
|
|
7719
|
+
registerOnTouched(fn) {
|
|
7720
|
+
this.onTouchedFn = fn;
|
|
7721
|
+
}
|
|
7722
|
+
setDisabledState(isDisabled) {
|
|
7723
|
+
this.disabledByForm.set(isDisabled);
|
|
7724
|
+
}
|
|
7725
|
+
// ── Handlers ──────────────────────────────────────────────────────────
|
|
7726
|
+
onInput(event) {
|
|
7727
|
+
const next = event.target.value;
|
|
7728
|
+
this.valueState.set(next);
|
|
7729
|
+
this.onChangeFn(next);
|
|
7730
|
+
this.valueChange.emit(next);
|
|
7731
|
+
}
|
|
7732
|
+
onBlur() {
|
|
7733
|
+
this.onTouchedFn();
|
|
7734
|
+
}
|
|
7735
|
+
/** Enter en el input o clic en la lupa. */
|
|
7736
|
+
triggerSearch() {
|
|
7737
|
+
if (this.isDisabled())
|
|
7738
|
+
return;
|
|
7739
|
+
this.search.emit(this.valueState());
|
|
7740
|
+
}
|
|
7741
|
+
/** Botón circular ×: limpia, notifica y devuelve el foco al input. */
|
|
7742
|
+
clear() {
|
|
7743
|
+
if (!this.filled() || this.isDisabled())
|
|
7744
|
+
return;
|
|
7745
|
+
this.valueState.set('');
|
|
7746
|
+
this.onChangeFn('');
|
|
7747
|
+
this.valueChange.emit('');
|
|
7748
|
+
this.cleared.emit();
|
|
7749
|
+
this.inputRef().nativeElement.focus();
|
|
7750
|
+
}
|
|
7751
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SearchBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7752
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: SearchBarComponent, isStandalone: true, selector: "ius-search-bar", inputs: { value: "value", defaultValue: "defaultValue", size: "size", disabled: ["disabled", "disabled", booleanAttribute], state: "state", placeholder: "placeholder", ariaLabel: "ariaLabel", name: "name", id: "id" }, outputs: { valueChange: "valueChange", search: "search", cleared: "cleared" }, host: { attributes: { "role": "search" }, properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-filled": "filled() ? 'true' : null", "attr.data-disabled": "isDisabled() ? 'true' : null", "attr.data-force": "stateInput() || null" }, classAttribute: "ius-sb" }, providers: [
|
|
7753
|
+
{
|
|
7754
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7755
|
+
useExisting: forwardRef(() => SearchBarComponent),
|
|
7756
|
+
multi: true,
|
|
7757
|
+
},
|
|
7758
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, isSignal: true }], ngImport: i0, template: "<!--\n Orden del golden (SearchBar.jsx): input \u2192 limpiar \u2192 lupa.\n El host ES `.ius-sb` (role=\"search\", display:flex), as\u00ED que aqu\u00ED NO hay\n contenedor: un div envolvente romper\u00EDa `:focus-within` de la barra.\n-->\n<input\n #input\n class=\"ius-sb__input\"\n type=\"search\"\n [id]=\"inputId\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [value]=\"displayValue()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"triggerSearch()\"\n (blur)=\"onBlur()\"\n/>\n\n<!--\n Slot reservado: el bot\u00F3n permanece en el flujo (reserva ancho + gap) y solo\n alterna `visibility`, para que aparecer/desaparecer NO desplace el input ni\n la lupa. `mousedown.preventDefault()` evita que el input pierda el foco antes\n del clic; `clear()` se lo devuelve despu\u00E9s.\n-->\n<button\n type=\"button\"\n class=\"ius-sb__clear\"\n [class.ius-sb__clear--hidden]=\"!filled()\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n [attr.aria-hidden]=\"filled() ? null : 'true'\"\n [attr.tabindex]=\"filled() && !isDisabled() ? 0 : -1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n>\n <span class=\"ius-icon\">close</span>\n</button>\n\n<button\n type=\"button\"\n class=\"ius-sb__search\"\n aria-label=\"Buscar\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [disabled]=\"isDisabled()\"\n (click)=\"triggerSearch()\"\n>\n <span class=\"ius-icon\">search</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--_sb-py: 9px;--_sb-px: 12px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-md);--_sb-clear: 22px;--_sb-bg: var(--ius-neutral-2);--_sb-border: transparent;--_sb-fg: var(--ius-text-primary);--_sb-placeholder: var(--ius-text-tertiary);--_sb-search: var(--ius-text-secondary);display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;min-width:220px;max-width:420px;padding:var(--_sb-py) var(--_sb-px);background:var(--_sb-bg);border:1px solid var(--_sb-border);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);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)}:host([data-size=small]){--_sb-py: 6px;--_sb-px: 10px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-sm);--_sb-clear: 20px}:host([data-size=large]){--_sb-py: 12px;--_sb-px: 14px;--_sb-fs: var(--ius-fs-lg);--_sb-lh: var(--ius-lh-lg);--_sb-icon: var(--ius-icon-lg);--_sb-clear: 26px}@container style(--ius-control-size: small){:host(:not([data-size])){--_sb-py: 6px;--_sb-px: 10px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-sm);--_sb-clear: 20px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_sb-py: 12px;--_sb-px: 14px;--_sb-fs: var(--ius-fs-lg);--_sb-lh: var(--ius-lh-lg);--_sb-icon: var(--ius-icon-lg);--_sb-clear: 26px}}:host(:hover),:host([data-force=hover]){--_sb-bg: var(--ius-neutral-3)}:host([data-filled=true]){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-stroke);--_sb-search: var(--ius-text-primary)}:host([data-filled=true]:hover),:host([data-filled=true][data-force=hover]){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-stroke-strong)}:host([data-force=focused]),:host(:focus-within){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-primary-500);--_sb-search: var(--ius-primary-500)}:host([data-disabled=true]),:host([data-force=disabled]){--_sb-bg: var(--ius-neutral-2);--_sb-border: transparent;--_sb-fg: var(--ius-text-disabled);--_sb-placeholder: var(--ius-text-disabled);--_sb-search: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}.ius-sb__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_sb-fs);line-height:var(--_sb-lh);color:var(--_sb-fg);min-width:0;padding:0}.ius-sb__input::placeholder{color:var(--_sb-placeholder)}.ius-sb__input::-webkit-search-cancel-button{display:none}.ius-sb__input:disabled{cursor:not-allowed}.ius-sb__clear{appearance:none;border:0;padding:0;margin:0;flex:0 0 auto;width:var(--_sb-clear);height:var(--_sb-clear);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white);cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sb__clear:hover{background:var(--ius-primary-500)}.ius-sb__clear--hidden{visibility:hidden;pointer-events:none}.ius-sb__clear:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-sb__clear .ius-icon{font-size:calc(var(--_sb-clear) - 7px);line-height:1}.ius-sb__search{appearance:none;border:0;padding:0;margin:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--_sb-search);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sb__search:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-sb__search:disabled{cursor:not-allowed}.ius-sb__search .ius-icon{font-size:var(--_sb-icon);line-height:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7759
|
+
}
|
|
7760
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SearchBarComponent, decorators: [{
|
|
7761
|
+
type: Component,
|
|
7762
|
+
args: [{ selector: 'ius-search-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
7763
|
+
{
|
|
7764
|
+
provide: NG_VALUE_ACCESSOR,
|
|
7765
|
+
useExisting: forwardRef(() => SearchBarComponent),
|
|
7766
|
+
multi: true,
|
|
7767
|
+
},
|
|
7768
|
+
], host: {
|
|
7769
|
+
class: 'ius-sb',
|
|
7770
|
+
role: 'search',
|
|
7771
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
7772
|
+
'[attr.data-filled]': "filled() ? 'true' : null",
|
|
7773
|
+
'[attr.data-disabled]': "isDisabled() ? 'true' : null",
|
|
7774
|
+
'[attr.data-force]': 'stateInput() || null',
|
|
7775
|
+
}, template: "<!--\n Orden del golden (SearchBar.jsx): input \u2192 limpiar \u2192 lupa.\n El host ES `.ius-sb` (role=\"search\", display:flex), as\u00ED que aqu\u00ED NO hay\n contenedor: un div envolvente romper\u00EDa `:focus-within` de la barra.\n-->\n<input\n #input\n class=\"ius-sb__input\"\n type=\"search\"\n [id]=\"inputId\"\n [attr.name]=\"name || null\"\n [placeholder]=\"placeholder\"\n [value]=\"displayValue()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"ariaLabel\"\n (input)=\"onInput($event)\"\n (keydown.enter)=\"triggerSearch()\"\n (blur)=\"onBlur()\"\n/>\n\n<!--\n Slot reservado: el bot\u00F3n permanece en el flujo (reserva ancho + gap) y solo\n alterna `visibility`, para que aparecer/desaparecer NO desplace el input ni\n la lupa. `mousedown.preventDefault()` evita que el input pierda el foco antes\n del clic; `clear()` se lo devuelve despu\u00E9s.\n-->\n<button\n type=\"button\"\n class=\"ius-sb__clear\"\n [class.ius-sb__clear--hidden]=\"!filled()\"\n aria-label=\"Limpiar b\u00FAsqueda\"\n [attr.aria-hidden]=\"filled() ? null : 'true'\"\n [attr.tabindex]=\"filled() && !isDisabled() ? 0 : -1\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"clear()\"\n>\n <span class=\"ius-icon\">close</span>\n</button>\n\n<button\n type=\"button\"\n class=\"ius-sb__search\"\n aria-label=\"Buscar\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [disabled]=\"isDisabled()\"\n (click)=\"triggerSearch()\"\n>\n <span class=\"ius-icon\">search</span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{--_sb-py: 9px;--_sb-px: 12px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-md);--_sb-clear: 22px;--_sb-bg: var(--ius-neutral-2);--_sb-border: transparent;--_sb-fg: var(--ius-text-primary);--_sb-placeholder: var(--ius-text-tertiary);--_sb-search: var(--ius-text-secondary);display:flex;align-items:center;gap:var(--ius-space-xs);box-sizing:border-box;width:100%;min-width:220px;max-width:420px;padding:var(--_sb-py) var(--_sb-px);background:var(--_sb-bg);border:1px solid var(--_sb-border);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);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)}:host([data-size=small]){--_sb-py: 6px;--_sb-px: 10px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-sm);--_sb-clear: 20px}:host([data-size=large]){--_sb-py: 12px;--_sb-px: 14px;--_sb-fs: var(--ius-fs-lg);--_sb-lh: var(--ius-lh-lg);--_sb-icon: var(--ius-icon-lg);--_sb-clear: 26px}@container style(--ius-control-size: small){:host(:not([data-size])){--_sb-py: 6px;--_sb-px: 10px;--_sb-fs: var(--ius-fs-base);--_sb-lh: var(--ius-lh-base);--_sb-icon: var(--ius-icon-sm);--_sb-clear: 20px}}@container style(--ius-control-size: large){:host(:not([data-size])){--_sb-py: 12px;--_sb-px: 14px;--_sb-fs: var(--ius-fs-lg);--_sb-lh: var(--ius-lh-lg);--_sb-icon: var(--ius-icon-lg);--_sb-clear: 26px}}:host(:hover),:host([data-force=hover]){--_sb-bg: var(--ius-neutral-3)}:host([data-filled=true]){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-stroke);--_sb-search: var(--ius-text-primary)}:host([data-filled=true]:hover),:host([data-filled=true][data-force=hover]){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-stroke-strong)}:host([data-force=focused]),:host(:focus-within){--_sb-bg: var(--ius-neutral-white);--_sb-border: var(--ius-primary-500);--_sb-search: var(--ius-primary-500)}:host([data-disabled=true]),:host([data-force=disabled]){--_sb-bg: var(--ius-neutral-2);--_sb-border: transparent;--_sb-fg: var(--ius-text-disabled);--_sb-placeholder: var(--ius-text-disabled);--_sb-search: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}.ius-sb__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_sb-fs);line-height:var(--_sb-lh);color:var(--_sb-fg);min-width:0;padding:0}.ius-sb__input::placeholder{color:var(--_sb-placeholder)}.ius-sb__input::-webkit-search-cancel-button{display:none}.ius-sb__input:disabled{cursor:not-allowed}.ius-sb__clear{appearance:none;border:0;padding:0;margin:0;flex:0 0 auto;width:var(--_sb-clear);height:var(--_sb-clear);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-primary-900);color:var(--ius-neutral-white);cursor:pointer;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sb__clear:hover{background:var(--ius-primary-500)}.ius-sb__clear--hidden{visibility:hidden;pointer-events:none}.ius-sb__clear:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-sb__clear .ius-icon{font-size:calc(var(--_sb-clear) - 7px);line-height:1}.ius-sb__search{appearance:none;border:0;padding:0;margin:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--_sb-search);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sb__search:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-sb__search:disabled{cursor:not-allowed}.ius-sb__search .ius-icon{font-size:var(--_sb-icon);line-height:1}\n"] }]
|
|
7776
|
+
}], propDecorators: { value: [{
|
|
7777
|
+
type: Input
|
|
7778
|
+
}], defaultValue: [{
|
|
7779
|
+
type: Input
|
|
7780
|
+
}], size: [{
|
|
7781
|
+
type: Input
|
|
7782
|
+
}], disabled: [{
|
|
7783
|
+
type: Input,
|
|
7784
|
+
args: [{ transform: booleanAttribute }]
|
|
7785
|
+
}], state: [{
|
|
7786
|
+
type: Input
|
|
7787
|
+
}], placeholder: [{
|
|
7788
|
+
type: Input
|
|
7789
|
+
}], ariaLabel: [{
|
|
7790
|
+
type: Input
|
|
7791
|
+
}], name: [{
|
|
7792
|
+
type: Input
|
|
7793
|
+
}], id: [{
|
|
7794
|
+
type: Input
|
|
7795
|
+
}], valueChange: [{
|
|
7796
|
+
type: Output
|
|
7797
|
+
}], search: [{
|
|
7798
|
+
type: Output
|
|
7799
|
+
}], cleared: [{
|
|
7800
|
+
type: Output
|
|
7801
|
+
}], inputRef: [{ type: i0.ViewChild, args: ['input', { isSignal: true }] }] } });
|
|
7802
|
+
|
|
7803
|
+
let uid = 0;
|
|
7804
|
+
/**
|
|
7805
|
+
* TextArea — Ius Design v2 (familia inputs).
|
|
7806
|
+
*
|
|
7807
|
+
* Variante **multilínea** de TextField para texto largo de redacción libre
|
|
7808
|
+
* (notas de impulso, observaciones de audiencia, descripciones, comentarios).
|
|
7809
|
+
* Reusa el wrapper `.ius-tf` (label + required + iconHelp + 5 estados + `size`
|
|
7810
|
+
* + helpText/errorText) y **crece con el contenido** desde `rows` hasta
|
|
7811
|
+
* `maxRows`, tras lo cual hace scroll interno. Implementa
|
|
7812
|
+
* `ControlValueAccessor` completo (`[(ngModel)]` / `formControl`) con `string`
|
|
7813
|
+
* como valor.
|
|
7814
|
+
*
|
|
7815
|
+
* Compone `ius-popover` para la pastilla «?» (`showIconHelp`), igual que
|
|
7816
|
+
* TextField.
|
|
7817
|
+
*
|
|
7818
|
+
* **Cuándo NO usarlo**: una sola línea → `ius-text-field`; datos segmentados →
|
|
7819
|
+
* `ius-multi-text-field`; códigos OTP → `ius-code-field`.
|
|
7820
|
+
*
|
|
7821
|
+
* Fuente de verdad: `components/inputs/TextArea/TextArea.jsx` + `TextArea.d.ts`
|
|
7822
|
+
* (delta sobre `TextField.ng-spec.md`) del proyecto Claude Design.
|
|
7823
|
+
*
|
|
7824
|
+
* ---
|
|
7825
|
+
* **Divergencias doc-vs-golden** (manda el `.jsx` golden; quedan anotadas para
|
|
7826
|
+
* que diseño las resuelva):
|
|
7827
|
+
*
|
|
7828
|
+
* 1. **Scrollbar.** `TextArea.ng-spec.md` dice «luego scroll interno con
|
|
7829
|
+
* `.ius-scroll`»; el CSS golden **no** usa `.ius-scroll`: pinta su propio
|
|
7830
|
+
* scrollbar en el `<textarea>` (`::-webkit-scrollbar` de 6px, pulgar
|
|
7831
|
+
* `--ius-neutral-5` con radio pill, `scrollbar-width: thin`). Se portó el
|
|
7832
|
+
* golden.
|
|
7833
|
+
* 2. **`resizable`.** El `.d.ts` y el `.prompt.md` hablan del «control nativo
|
|
7834
|
+
* de arrastre (esquina inferior derecha)»; el golden desactiva el grip
|
|
7835
|
+
* nativo (`resize: none`) y dibuja una **manija propia** `.ius-tf__resize`
|
|
7836
|
+
* (ícono `drag_handle` rotado −45°, arrastre por pointer events, solo
|
|
7837
|
+
* vertical). Se portó el golden.
|
|
7838
|
+
* 3. **Tokens.** El panel «Tokens que consume» de `textarea.card.html` cita
|
|
7839
|
+
* `--ius-neutral-white` y `--ius-stroke` para fondo/borde; el CSS golden
|
|
7840
|
+
* hereda de `.ius-tf`: fondo `--ius-neutral-2` y borde `transparent` en
|
|
7841
|
+
* reposo. Se portó el golden.
|
|
7842
|
+
* 4. **`id` / `className` / `style`** del `.d.ts` no se exponen: el host ya es
|
|
7843
|
+
* el elemento estilable y el `id` del `<textarea>` se genera para enlazar el
|
|
7844
|
+
* `<label for>` (mismo criterio que `ius-text-field`).
|
|
7845
|
+
*
|
|
7846
|
+
* Nota de implementación: las clases `.ius-tf__*` (label/help/hint/field) se
|
|
7847
|
+
* **replican** en este SCSS porque bajo `ViewEncapsulation.Emulated` las de
|
|
7848
|
+
* TextField no alcanzan a otro componente — mismo precedente que
|
|
7849
|
+
* `ius-multi-text-field` y `ius-code-field`.
|
|
7850
|
+
*/
|
|
7851
|
+
class TextAreaComponent {
|
|
7852
|
+
/** Líneas mínimas visibles. Default `3`. */
|
|
7853
|
+
set rows(value) {
|
|
7854
|
+
const n = Number(value);
|
|
7855
|
+
this.rowsState.set(Number.isFinite(n) && n > 0 ? Math.floor(n) : 3);
|
|
7856
|
+
}
|
|
7857
|
+
get rows() {
|
|
7858
|
+
return this.rowsState();
|
|
7859
|
+
}
|
|
7860
|
+
/** Tope de líneas antes de hacer scroll interno. Sin tope si se omite. */
|
|
7861
|
+
set maxRows(value) {
|
|
7862
|
+
const n = value === null || value === undefined || value === '' ? NaN : Number(value);
|
|
7863
|
+
this.maxRowsState.set(Number.isFinite(n) && n > 0 ? Math.floor(n) : undefined);
|
|
7864
|
+
}
|
|
7865
|
+
get maxRows() {
|
|
7866
|
+
return this.maxRowsState();
|
|
7867
|
+
}
|
|
7868
|
+
/**
|
|
7869
|
+
* Crecer con el contenido entre `rows` y `maxRows`. Default `true`.
|
|
7870
|
+
* Con `false` la altura queda fija en `rows`. `resizable` lo anula.
|
|
7871
|
+
*/
|
|
7872
|
+
set autoGrow(value) {
|
|
7873
|
+
this.autoGrowState.set(value);
|
|
7874
|
+
}
|
|
7875
|
+
get autoGrow() {
|
|
7876
|
+
return this.autoGrowState();
|
|
7877
|
+
}
|
|
7878
|
+
/**
|
|
7879
|
+
* Permitir redimensionar a mano arrastrando la manija inferior derecha.
|
|
7880
|
+
* **Excluyente con `autoGrow`** (al activarlo, el auto-crecimiento se apaga).
|
|
7881
|
+
* Default `false`.
|
|
7882
|
+
*/
|
|
7883
|
+
set resizable(value) {
|
|
7884
|
+
this.resizableState.set(value);
|
|
7885
|
+
}
|
|
7886
|
+
get resizable() {
|
|
7887
|
+
return this.resizableState();
|
|
7888
|
+
}
|
|
7889
|
+
/** Límite de caracteres (`maxlength` nativo). */
|
|
7890
|
+
set maxLength(value) {
|
|
7891
|
+
const n = value === null || value === undefined || value === '' ? NaN : Number(value);
|
|
7892
|
+
this.maxLengthState.set(Number.isFinite(n) && n > 0 ? Math.floor(n) : undefined);
|
|
7893
|
+
}
|
|
7894
|
+
get maxLength() {
|
|
7895
|
+
return this.maxLengthState();
|
|
7896
|
+
}
|
|
7897
|
+
/** Estado de error (colores + `errorText`). */
|
|
7898
|
+
set error(value) {
|
|
7899
|
+
this.errorState.set(value);
|
|
7900
|
+
}
|
|
7901
|
+
get error() {
|
|
7902
|
+
return this.errorState();
|
|
7903
|
+
}
|
|
7904
|
+
/** Estado deshabilitado (también lo escribe el CVA vía `setDisabledState`). */
|
|
7905
|
+
set disabled(value) {
|
|
7906
|
+
this.disabledState.set(value);
|
|
7907
|
+
}
|
|
7908
|
+
get disabled() {
|
|
7909
|
+
return this.disabledState();
|
|
7910
|
+
}
|
|
7911
|
+
/** Tamaño: `small` · `medium` (default) · `large`. */
|
|
7912
|
+
set size(value) {
|
|
7913
|
+
this.sizeState.set(value ?? 'medium');
|
|
7914
|
+
}
|
|
7915
|
+
get size() {
|
|
7916
|
+
return this.sizeState();
|
|
7917
|
+
}
|
|
7918
|
+
/**
|
|
7919
|
+
* Forzar visualmente un estado completo. **Solo demos / especímenes** — no
|
|
7920
|
+
* usar en producción: no altera la interacción real, solo la piel.
|
|
7921
|
+
*/
|
|
7922
|
+
set state(value) {
|
|
7923
|
+
this.stateState.set(value ?? undefined);
|
|
7924
|
+
}
|
|
7925
|
+
get state() {
|
|
7926
|
+
return this.stateState();
|
|
7927
|
+
}
|
|
7928
|
+
get hint() {
|
|
7929
|
+
return this.isError() ? this.errorText || this.helpText : this.helpText;
|
|
7930
|
+
}
|
|
7931
|
+
get showHint() {
|
|
7932
|
+
return this.showHelpText && !!this.hint;
|
|
7933
|
+
}
|
|
7934
|
+
/** Texto del contador `n / max`, o `null` si no aplica. */
|
|
7935
|
+
get count() {
|
|
7936
|
+
const max = this.maxLengthState();
|
|
7937
|
+
return this.showCount && max ? `${(this.value() || '').length} / ${max}` : null;
|
|
7938
|
+
}
|
|
7939
|
+
/** `min-height` inline del golden cuando la altura se arrastra a mano. */
|
|
7940
|
+
get resizableMinHeight() {
|
|
7941
|
+
return this.resizableState()
|
|
7942
|
+
? `calc(var(--_tf-lh) * ${this.rowsState()} + var(--_tf-py) * 2)`
|
|
7943
|
+
: null;
|
|
7944
|
+
}
|
|
7945
|
+
constructor() {
|
|
7946
|
+
this.zone = inject(NgZone);
|
|
7947
|
+
/** Punto rojo (•) a la izquierda del label. */
|
|
7948
|
+
this.required = false;
|
|
7949
|
+
/** Mostrar/ocultar la línea de ayuda. */
|
|
7950
|
+
this.showHelpText = true;
|
|
7951
|
+
/** Pastilla «?» junto al label (compone `ius-popover` en hover/foco). */
|
|
7952
|
+
this.showIconHelp = false;
|
|
7953
|
+
// ── Delta propio del TextArea ───────────────────────────────────────────
|
|
7954
|
+
this.rowsState = signal(3, /* @ts-ignore */
|
|
7955
|
+
...(ngDevMode ? [{ debugName: "rowsState" }] : /* istanbul ignore next */ []));
|
|
7956
|
+
this.maxRowsState = signal(undefined, /* @ts-ignore */
|
|
7957
|
+
...(ngDevMode ? [{ debugName: "maxRowsState" }] : /* istanbul ignore next */ []));
|
|
7958
|
+
this.autoGrowState = signal(true, /* @ts-ignore */
|
|
7959
|
+
...(ngDevMode ? [{ debugName: "autoGrowState" }] : /* istanbul ignore next */ []));
|
|
7960
|
+
this.resizableState = signal(false, /* @ts-ignore */
|
|
7961
|
+
...(ngDevMode ? [{ debugName: "resizableState" }] : /* istanbul ignore next */ []));
|
|
7962
|
+
this.maxLengthState = signal(undefined, /* @ts-ignore */
|
|
7963
|
+
...(ngDevMode ? [{ debugName: "maxLengthState" }] : /* istanbul ignore next */ []));
|
|
7964
|
+
/** Mostrar el contador `n / max` bajo el campo (requiere `maxLength`). */
|
|
7965
|
+
this.showCount = false;
|
|
7966
|
+
// ── Estados ─────────────────────────────────────────────────────────────
|
|
7967
|
+
this.errorState = signal(false, /* @ts-ignore */
|
|
7968
|
+
...(ngDevMode ? [{ debugName: "errorState" }] : /* istanbul ignore next */ []));
|
|
7969
|
+
this.disabledState = signal(false, /* @ts-ignore */
|
|
7970
|
+
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
7971
|
+
this.sizeState = signal('medium', /* @ts-ignore */
|
|
7972
|
+
...(ngDevMode ? [{ debugName: "sizeState" }] : /* istanbul ignore next */ []));
|
|
7973
|
+
this.stateState = signal(undefined, /* @ts-ignore */
|
|
7974
|
+
...(ngDevMode ? [{ debugName: "stateState" }] : /* istanbul ignore next */ []));
|
|
7975
|
+
// ── Outputs ─────────────────────────────────────────────────────────────
|
|
7976
|
+
/** Además del CVA: notifica cada cambio de valor del `<textarea>`. */
|
|
7977
|
+
this.valueChange = new EventEmitter();
|
|
7978
|
+
// ── Estado interno ──────────────────────────────────────────────────────
|
|
7979
|
+
this.value = signal('', /* @ts-ignore */
|
|
7980
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
7981
|
+
this.focused = signal(false, /* @ts-ignore */
|
|
7982
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
7983
|
+
this.areaId = `ius-ta-${uid++}`;
|
|
7984
|
+
this.helpId = `${this.areaId}-help`;
|
|
7985
|
+
this.area = viewChild('area', /* @ts-ignore */
|
|
7986
|
+
...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
7987
|
+
this.onChange = () => { };
|
|
7988
|
+
this.onTouched = () => { };
|
|
7989
|
+
/** Cancela los listeners del arrastre en curso (no-op si no hay ninguno). */
|
|
7990
|
+
this.stopResize = () => { };
|
|
7991
|
+
// ── Derivados (lógica golden de TextArea.jsx) ───────────────────────────
|
|
7992
|
+
this.isDisabled = computed(() => this.disabledState() || this.stateState() === 'disabled', /* @ts-ignore */
|
|
7993
|
+
...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
7994
|
+
this.isError = computed(() => this.errorState() || this.stateState() === 'error', /* @ts-ignore */
|
|
7995
|
+
...(ngDevMode ? [{ debugName: "isError" }] : /* istanbul ignore next */ []));
|
|
7996
|
+
this.isFocused = computed(() => this.focused() ||
|
|
7997
|
+
this.stateState() === 'focused' ||
|
|
7998
|
+
this.stateState() === 'error', /* @ts-ignore */
|
|
7999
|
+
...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
|
|
8000
|
+
// `autoGrow` es un `useLayoutEffect` en el golden: mide el DOM DESPUÉS del
|
|
8001
|
+
// render. `afterRenderEffect` es el equivalente reactivo en Angular — se
|
|
8002
|
+
// re-ejecuta cuando cambia cualquiera de las señales leídas y NO corre en
|
|
8003
|
+
// el servidor (SSR), donde no hay layout que medir.
|
|
8004
|
+
afterRenderEffect(() => {
|
|
8005
|
+
// Dependencias reactivas explícitas (el array del `useLayoutEffect`
|
|
8006
|
+
// golden — value, size, rows — más los interruptores que apagan la
|
|
8007
|
+
// medición).
|
|
8008
|
+
this.value();
|
|
8009
|
+
this.sizeState();
|
|
8010
|
+
this.rowsState();
|
|
8011
|
+
this.maxRowsState();
|
|
8012
|
+
this.autoGrowState();
|
|
8013
|
+
this.resizableState();
|
|
8014
|
+
this.adjust();
|
|
8015
|
+
});
|
|
8016
|
+
inject(DestroyRef).onDestroy(() => this.stopResize());
|
|
8017
|
+
}
|
|
8018
|
+
// ── ControlValueAccessor ────────────────────────────────────────────────
|
|
8019
|
+
writeValue(value) {
|
|
8020
|
+
// Escribir la señal reprograma el `afterRenderEffect` → re-mide la altura.
|
|
8021
|
+
this.value.set(value ?? '');
|
|
8022
|
+
}
|
|
8023
|
+
registerOnChange(fn) {
|
|
8024
|
+
this.onChange = fn;
|
|
8025
|
+
}
|
|
8026
|
+
registerOnTouched(fn) {
|
|
8027
|
+
this.onTouched = fn;
|
|
8028
|
+
}
|
|
8029
|
+
setDisabledState(isDisabled) {
|
|
8030
|
+
this.disabledState.set(isDisabled);
|
|
8031
|
+
}
|
|
8032
|
+
// ── Handlers ────────────────────────────────────────────────────────────
|
|
8033
|
+
onInput(event) {
|
|
8034
|
+
const next = event.target.value;
|
|
8035
|
+
this.value.set(next);
|
|
8036
|
+
this.onChange(next);
|
|
8037
|
+
this.valueChange.emit(next);
|
|
8038
|
+
}
|
|
8039
|
+
onFocus() {
|
|
8040
|
+
this.focused.set(true);
|
|
8041
|
+
}
|
|
8042
|
+
onBlur() {
|
|
8043
|
+
this.focused.set(false);
|
|
8044
|
+
this.onTouched();
|
|
8045
|
+
}
|
|
8046
|
+
/**
|
|
8047
|
+
* Arrastre vertical de la manija (`.ius-tf__resize`). Port del `startResize`
|
|
8048
|
+
* golden: los listeners viven en `window` y se registran fuera de la zona
|
|
8049
|
+
* para no disparar change detection en cada `pointermove`.
|
|
8050
|
+
*/
|
|
8051
|
+
startResize(event) {
|
|
8052
|
+
event.preventDefault();
|
|
8053
|
+
const el = this.area()?.nativeElement;
|
|
8054
|
+
if (!el || this.isDisabled())
|
|
8055
|
+
return;
|
|
8056
|
+
const startY = event.clientY;
|
|
8057
|
+
const startH = el.offsetHeight;
|
|
8058
|
+
const cs = getComputedStyle(el);
|
|
8059
|
+
const lh = parseFloat(cs.lineHeight) || 20;
|
|
8060
|
+
const padV = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
|
|
8061
|
+
const minH = lh * this.rowsState() + padV;
|
|
8062
|
+
// Un arrastre nuevo cancela el anterior (pointercancel, doble pointerdown…).
|
|
8063
|
+
this.stopResize();
|
|
8064
|
+
this.zone.runOutsideAngular(() => {
|
|
8065
|
+
const onMove = (ev) => {
|
|
8066
|
+
el.style.height = Math.max(minH, startH + (ev.clientY - startY)) + 'px';
|
|
8067
|
+
};
|
|
8068
|
+
const onUp = () => this.stopResize();
|
|
8069
|
+
this.stopResize = () => {
|
|
8070
|
+
window.removeEventListener('pointermove', onMove);
|
|
8071
|
+
window.removeEventListener('pointerup', onUp);
|
|
8072
|
+
window.removeEventListener('pointercancel', onUp);
|
|
8073
|
+
this.stopResize = () => { };
|
|
8074
|
+
};
|
|
8075
|
+
window.addEventListener('pointermove', onMove);
|
|
8076
|
+
window.addEventListener('pointerup', onUp);
|
|
8077
|
+
window.addEventListener('pointercancel', onUp);
|
|
8078
|
+
});
|
|
8079
|
+
}
|
|
8080
|
+
// ── Auto-grow ───────────────────────────────────────────────────────────
|
|
8081
|
+
/**
|
|
8082
|
+
* Ajusta la altura al contenido entre `rows` y `maxRows` (port literal del
|
|
8083
|
+
* `adjust()` golden). Se desactiva con `autoGrow=false` o `resizable=true`,
|
|
8084
|
+
* casos en que la altura la fija el atributo `rows` / el arrastre.
|
|
8085
|
+
*/
|
|
8086
|
+
adjust() {
|
|
8087
|
+
const el = this.area()?.nativeElement;
|
|
8088
|
+
if (!el)
|
|
8089
|
+
return;
|
|
8090
|
+
// `resizable`: la altura la manda el arrastre del usuario, que vive en el
|
|
8091
|
+
// `style.height` inline. Salimos SIN tocar el estilo — igual que el golden
|
|
8092
|
+
// (`if (!el || !autoGrow || resizable) return;`). Limpiarlo aquí borraría la
|
|
8093
|
+
// altura arrastrada en la siguiente pasada (al teclear, o al cambiar
|
|
8094
|
+
// size/rows/maxRows) y la caja volvería al alto de `rows`.
|
|
8095
|
+
if (this.resizableState())
|
|
8096
|
+
return;
|
|
8097
|
+
if (!this.autoGrowState()) {
|
|
8098
|
+
// Sin auto-grow ni arrastre: devolver el control al atributo `rows`.
|
|
8099
|
+
el.style.height = '';
|
|
8100
|
+
el.style.overflowY = '';
|
|
8101
|
+
return;
|
|
8102
|
+
}
|
|
8103
|
+
const previous = el.style.height;
|
|
8104
|
+
el.style.height = 'auto';
|
|
8105
|
+
const h = el.scrollHeight;
|
|
8106
|
+
if (!h) {
|
|
8107
|
+
// Sin layout (pruebas sin render real, elemento oculto): no inventar una
|
|
8108
|
+
// altura de 0px — dejar la anterior.
|
|
8109
|
+
el.style.height = previous;
|
|
8110
|
+
return;
|
|
8111
|
+
}
|
|
8112
|
+
const maxRows = this.maxRowsState();
|
|
8113
|
+
if (maxRows) {
|
|
8114
|
+
const cs = getComputedStyle(el);
|
|
8115
|
+
const lh = parseFloat(cs.lineHeight) || 20;
|
|
8116
|
+
const padV = (parseFloat(cs.paddingTop) || 0) + (parseFloat(cs.paddingBottom) || 0);
|
|
8117
|
+
const cap = lh * maxRows + padV;
|
|
8118
|
+
el.style.height = Math.min(h, cap) + 'px';
|
|
8119
|
+
el.style.overflowY = h > cap ? 'auto' : 'hidden';
|
|
8120
|
+
}
|
|
8121
|
+
else {
|
|
8122
|
+
el.style.height = h + 'px';
|
|
8123
|
+
el.style.overflowY = 'hidden';
|
|
8124
|
+
}
|
|
8125
|
+
}
|
|
8126
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8127
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TextAreaComponent, isStandalone: true, selector: "ius-text-area", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", name: "name", rows: "rows", maxRows: "maxRows", autoGrow: ["autoGrow", "autoGrow", booleanAttribute], resizable: ["resizable", "resizable", booleanAttribute], maxLength: "maxLength", showCount: ["showCount", "showCount", booleanAttribute], error: ["error", "error", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], size: "size", state: "state" }, outputs: { valueChange: "valueChange" }, host: { properties: { "class.ius-tf--resizable": "resizableState()", "attr.data-size": "sizeState() !== 'medium' ? sizeState() : null", "attr.data-focused": "isFocused() || null", "attr.data-error": "isError() || null", "attr.data-disabled": "isDisabled() || null", "attr.data-force": "stateState() || null" }, classAttribute: "ius-tf ius-tf--area" }, providers: [
|
|
8128
|
+
{
|
|
8129
|
+
provide: NG_VALUE_ACCESSOR,
|
|
8130
|
+
useExisting: forwardRef(() => TextAreaComponent),
|
|
8131
|
+
multi: true,
|
|
8132
|
+
},
|
|
8133
|
+
], viewQueries: [{ propertyName: "area", first: true, predicate: ["area"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (label) {\n <label [for]=\"areaId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n <textarea\n #area\n [id]=\"areaId\"\n class=\"ius-tf__textarea\"\n [attr.name]=\"name ?? null\"\n [attr.placeholder]=\"placeholder ?? null\"\n [rows]=\"rowsState()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [attr.maxlength]=\"maxLengthState() ?? null\"\n [attr.data-resizable]=\"resizableState() ? 'true' : null\"\n [style.min-height]=\"resizableMinHeight\"\n [attr.aria-invalid]=\"isError() || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n ></textarea>\n\n @if (resizableState() && !isDisabled()) {\n <span\n class=\"ius-tf__resize\"\n aria-hidden=\"true\"\n title=\"Arrastrar para redimensionar\"\n (pointerdown)=\"startResize($event)\"\n >\n <span class=\"ius-icon\">drag_handle</span>\n </span>\n }\n</div>\n\n@if (showHint || count) {\n <div class=\"ius-tf__foot\" [attr.data-between]=\"showHint ? 'true' : null\">\n @if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n }\n @if (count) {\n <span class=\"ius-tf__count\">{{ count }}</span>\n }\n </div>\n}\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:480px}: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__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:stretch;gap:var(--ius-space-xxs);padding:0;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)}:host(.ius-tf--resizable) .ius-tf__field{position:relative}.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__textarea{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;width:100%;padding:calc(var(--_tf-py) + 1px) calc(var(--_tf-px) + var(--ius-space-xxs));box-sizing:border-box;border-radius:var(--ius-radius-md);margin:0;display:block;resize:none;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-tf__textarea::-webkit-scrollbar{width:6px}.ius-tf__textarea::-webkit-scrollbar-track{margin:var(--ius-space-xs) 0;background:transparent}.ius-tf__textarea::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill)}.ius-tf__textarea::placeholder{color:var(--_tf-placeholder)}.ius-tf__textarea:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-tf__textarea[data-resizable=true]{resize:none;overflow-y:auto}:host([data-error=true]) .ius-tf__textarea{color:var(--ius-text-primary)}.ius-tf__resize{position:absolute;right:5px;bottom:5px;width:16px;height:16px;display:grid;place-items:center;cursor:ns-resize;color:var(--ius-text-tertiary);z-index:1;touch-action:none}.ius-tf__resize:hover{color:var(--ius-primary-500)}.ius-tf__resize .ius-icon{font-size:var(--ius-icon-sm);transform:rotate(-45deg)}:host([data-disabled=true]) .ius-tf__resize,:host([data-force=disabled]) .ius-tf__resize{display:none}.ius-tf__foot{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-tf__foot[data-between=true]{justify-content:space-between}.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)}.ius-tf__count{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-align:right;font-variant-numeric:tabular-nums}:host([data-error=true]) .ius-tf__count,:host([data-force=error]) .ius-tf__count{color:var(--ius-danger-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 }); }
|
|
8134
|
+
}
|
|
8135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TextAreaComponent, decorators: [{
|
|
8136
|
+
type: Component,
|
|
8137
|
+
args: [{ selector: 'ius-text-area', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
8138
|
+
{
|
|
8139
|
+
provide: NG_VALUE_ACCESSOR,
|
|
8140
|
+
useExisting: forwardRef(() => TextAreaComponent),
|
|
8141
|
+
multi: true,
|
|
8142
|
+
},
|
|
8143
|
+
], host: {
|
|
8144
|
+
class: 'ius-tf ius-tf--area',
|
|
8145
|
+
'[class.ius-tf--resizable]': 'resizableState()',
|
|
8146
|
+
'[attr.data-size]': "sizeState() !== 'medium' ? sizeState() : null",
|
|
8147
|
+
'[attr.data-focused]': 'isFocused() || null',
|
|
8148
|
+
'[attr.data-error]': 'isError() || null',
|
|
8149
|
+
'[attr.data-disabled]': 'isDisabled() || null',
|
|
8150
|
+
'[attr.data-force]': 'stateState() || null',
|
|
8151
|
+
}, template: "@if (label) {\n <label [for]=\"areaId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span\n class=\"ius-tf__help-icon\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Ayuda\"\n >\n <span class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n <textarea\n #area\n [id]=\"areaId\"\n class=\"ius-tf__textarea\"\n [attr.name]=\"name ?? null\"\n [attr.placeholder]=\"placeholder ?? null\"\n [rows]=\"rowsState()\"\n [value]=\"value()\"\n [disabled]=\"isDisabled()\"\n [attr.maxlength]=\"maxLengthState() ?? null\"\n [attr.data-resizable]=\"resizableState() ? 'true' : null\"\n [style.min-height]=\"resizableMinHeight\"\n [attr.aria-invalid]=\"isError() || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n ></textarea>\n\n @if (resizableState() && !isDisabled()) {\n <span\n class=\"ius-tf__resize\"\n aria-hidden=\"true\"\n title=\"Arrastrar para redimensionar\"\n (pointerdown)=\"startResize($event)\"\n >\n <span class=\"ius-icon\">drag_handle</span>\n </span>\n }\n</div>\n\n@if (showHint || count) {\n <div class=\"ius-tf__foot\" [attr.data-between]=\"showHint ? 'true' : null\">\n @if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n }\n @if (count) {\n <span class=\"ius-tf__count\">{{ count }}</span>\n }\n </div>\n}\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:480px}: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__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:stretch;gap:var(--ius-space-xxs);padding:0;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)}:host(.ius-tf--resizable) .ius-tf__field{position:relative}.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__textarea{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;width:100%;padding:calc(var(--_tf-py) + 1px) calc(var(--_tf-px) + var(--ius-space-xxs));box-sizing:border-box;border-radius:var(--ius-radius-md);margin:0;display:block;resize:none;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-tf__textarea::-webkit-scrollbar{width:6px}.ius-tf__textarea::-webkit-scrollbar-track{margin:var(--ius-space-xs) 0;background:transparent}.ius-tf__textarea::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill)}.ius-tf__textarea::placeholder{color:var(--_tf-placeholder)}.ius-tf__textarea:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-tf__textarea[data-resizable=true]{resize:none;overflow-y:auto}:host([data-error=true]) .ius-tf__textarea{color:var(--ius-text-primary)}.ius-tf__resize{position:absolute;right:5px;bottom:5px;width:16px;height:16px;display:grid;place-items:center;cursor:ns-resize;color:var(--ius-text-tertiary);z-index:1;touch-action:none}.ius-tf__resize:hover{color:var(--ius-primary-500)}.ius-tf__resize .ius-icon{font-size:var(--ius-icon-sm);transform:rotate(-45deg)}:host([data-disabled=true]) .ius-tf__resize,:host([data-force=disabled]) .ius-tf__resize{display:none}.ius-tf__foot{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-tf__foot[data-between=true]{justify-content:space-between}.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)}.ius-tf__count{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary);text-align:right;font-variant-numeric:tabular-nums}:host([data-error=true]) .ius-tf__count,:host([data-force=error]) .ius-tf__count{color:var(--ius-danger-700)}\n"] }]
|
|
8152
|
+
}], ctorParameters: () => [], propDecorators: { label: [{
|
|
8153
|
+
type: Input
|
|
8154
|
+
}], placeholder: [{
|
|
8155
|
+
type: Input
|
|
8156
|
+
}], required: [{
|
|
8157
|
+
type: Input,
|
|
8158
|
+
args: [{ transform: booleanAttribute }]
|
|
8159
|
+
}], helpText: [{
|
|
8160
|
+
type: Input
|
|
8161
|
+
}], errorText: [{
|
|
8162
|
+
type: Input
|
|
8163
|
+
}], showHelpText: [{
|
|
8164
|
+
type: Input,
|
|
8165
|
+
args: [{ transform: booleanAttribute }]
|
|
8166
|
+
}], showIconHelp: [{
|
|
8167
|
+
type: Input,
|
|
8168
|
+
args: [{ transform: booleanAttribute }]
|
|
8169
|
+
}], iconHelpTitle: [{
|
|
8170
|
+
type: Input
|
|
8171
|
+
}], iconHelpContent: [{
|
|
8172
|
+
type: Input
|
|
8173
|
+
}], name: [{
|
|
8174
|
+
type: Input
|
|
8175
|
+
}], rows: [{
|
|
8176
|
+
type: Input
|
|
8177
|
+
}], maxRows: [{
|
|
8178
|
+
type: Input
|
|
8179
|
+
}], autoGrow: [{
|
|
8180
|
+
type: Input,
|
|
8181
|
+
args: [{ transform: booleanAttribute }]
|
|
8182
|
+
}], resizable: [{
|
|
8183
|
+
type: Input,
|
|
8184
|
+
args: [{ transform: booleanAttribute }]
|
|
8185
|
+
}], maxLength: [{
|
|
8186
|
+
type: Input
|
|
8187
|
+
}], showCount: [{
|
|
8188
|
+
type: Input,
|
|
8189
|
+
args: [{ transform: booleanAttribute }]
|
|
8190
|
+
}], error: [{
|
|
8191
|
+
type: Input,
|
|
8192
|
+
args: [{ transform: booleanAttribute }]
|
|
8193
|
+
}], disabled: [{
|
|
8194
|
+
type: Input,
|
|
8195
|
+
args: [{ transform: booleanAttribute }]
|
|
8196
|
+
}], size: [{
|
|
8197
|
+
type: Input
|
|
8198
|
+
}], state: [{
|
|
8199
|
+
type: Input
|
|
8200
|
+
}], valueChange: [{
|
|
8201
|
+
type: Output
|
|
8202
|
+
}], area: [{ type: i0.ViewChild, args: ['area', { isSignal: true }] }] } });
|
|
8203
|
+
|
|
8204
|
+
/**
|
|
8205
|
+
* StatusChip — Ius Design v2 (familia data-display).
|
|
8206
|
+
*
|
|
8207
|
+
* **Átomo visual de estado**: marca semántica (punto de 8px, o ícono) + el
|
|
8208
|
+
* rótulo EN EL COLOR DEL TONO, **sin píldora**. Es el patrón reconocible de
|
|
8209
|
+
* "estado", reusable por cualquier entidad del sistema (actuación, tarea,
|
|
8210
|
+
* factura, plan, usuario…). No es interactivo: no tiene outputs, ni foco, ni
|
|
8211
|
+
* máquina de estado.
|
|
8212
|
+
*
|
|
8213
|
+
* **QUÉ COMPONE.** Nada visual: es una hoja. Lo que SÍ consume es la foundation
|
|
8214
|
+
* `status-catalog` (`resolveStatus`), donde vive el **vocabulario** — qué
|
|
8215
|
+
* estados existen por entidad y con qué `label · tone · icon`. El átomo solo
|
|
8216
|
+
* pinta: se le pasa `vocab` + `status` y resuelve; o se le pasan
|
|
8217
|
+
* `tone`/`label`/`icon` directo (escape hatch genérico). `vocab` por defecto =
|
|
8218
|
+
* `actuacion` (ciclo `nueva → vista → gestion → cerrada`). La actuación **no
|
|
8219
|
+
* vence**: el vencimiento es estado de sus TAREAS (`vocab="gestion"`), por eso
|
|
8220
|
+
* `gestion` de actuación es `primary` y no `warning`.
|
|
8221
|
+
*
|
|
8222
|
+
* **Resolución (orden del golden).**
|
|
8223
|
+
* - `meta = resolveStatus(vocab, status, customMap)`
|
|
8224
|
+
* - `tono = tone || meta?.tone || 'neutral'`
|
|
8225
|
+
* - `rótulo = <ng-content> › label › meta?.label › status crudo`
|
|
8226
|
+
* - `glifo = icon===true ? meta?.icon : (string ? ese glifo : ninguno → punto)`
|
|
8227
|
+
*
|
|
8228
|
+
* Un `vocab`/`status` **desconocido nunca falla**: `meta` queda `null` y el chip
|
|
8229
|
+
* cae a `neutral` con el `status` crudo como rótulo.
|
|
8230
|
+
*
|
|
8231
|
+
* **CUÁNDO NO USARLO.**
|
|
8232
|
+
* - Etiqueta / categoría / filtro (píldora con fondo) → `ius-tag`.
|
|
8233
|
+
* - Punto o contador atómico SIN texto → `ius-insignia`.
|
|
8234
|
+
* - Página completa de error/vacío (404, 500) → `ius-status-state`.
|
|
8235
|
+
* - Token de un evento de agenda con hora → `EventPill` (aún no portado).
|
|
8236
|
+
* - Un color de IDENTIDAD/categoría (hue "fruta") → `CategoryPalette`: esto es
|
|
8237
|
+
* ESTADO, y el estado siempre es una familia semántica.
|
|
8238
|
+
*
|
|
8239
|
+
* **A11y.** El host lleva `role="status"`; la marca (punto/ícono) es
|
|
8240
|
+
* `aria-hidden="true"` porque el color NO puede ser el único canal de
|
|
8241
|
+
* información: el rótulo textual es quien comunica el estado.
|
|
8242
|
+
*
|
|
8243
|
+
* `id` / `class` / `style` son passthrough natural del host de Angular: no hay
|
|
8244
|
+
* inputs para ellos.
|
|
8245
|
+
*
|
|
8246
|
+
* FUENTE DE VERDAD. Proyecto Claude Design →
|
|
8247
|
+
* `components/data-display/StatusChip/StatusChip.jsx` + `.d.ts` + `.ng-spec.md`
|
|
8248
|
+
* + `statuschip.card.html` + `playground.card.html`.
|
|
8249
|
+
*
|
|
8250
|
+
* DIVERGENCIAS / DECISIONES DE PORT (para que diseño las resuelva):
|
|
8251
|
+
* 1. `label` es `string` (el golden lo tipa `ReactNode`). Regla 5 del port. Si
|
|
8252
|
+
* hace falta contenido rico se PROYECTA (`<ng-content>`), que gana sobre
|
|
8253
|
+
* `label`.
|
|
8254
|
+
* 2. `icon` como **atributo sin valor** (`<ius-status-chip icon>`) llega como
|
|
8255
|
+
* `''`, no como `true`: se interpreta como `true` (ícono del catálogo), que
|
|
8256
|
+
* es la traducción fiel del `<StatusChip icon />` de React. También se
|
|
8257
|
+
* aceptan los strings `'true'` / `'false'`. Un string no vacío distinto de
|
|
8258
|
+
* esos dos es el glifo Material Symbols. NO se usa `booleanAttribute`:
|
|
8259
|
+
* destruiría el caso string.
|
|
8260
|
+
* 3. `data-size` se omite cuando vale el default (`small`), igual que `ius-tag`
|
|
8261
|
+
* e `ius-insignia`; el golden lo emite siempre. Es equivalente visualmente
|
|
8262
|
+
* (el bloque base del CSS ES el de `small`), pero el DOM difiere.
|
|
8263
|
+
* 4. El golden no expone `aria-label`; se confía en el rótulo textual. Si un
|
|
8264
|
+
* consumidor necesitara un rótulo accesible distinto del visible, lo pone
|
|
8265
|
+
* él sobre el host (passthrough).
|
|
8266
|
+
*/
|
|
8267
|
+
class StatusChipComponent {
|
|
8268
|
+
constructor() {
|
|
8269
|
+
/**
|
|
8270
|
+
* Entidad cuyo vocabulario (en `status-catalog`) resuelve el `status`.
|
|
8271
|
+
* Default `'actuacion'`. Una entidad fuera del catálogo no falla: el chip cae
|
|
8272
|
+
* a `neutral`.
|
|
8273
|
+
*/
|
|
8274
|
+
this.vocab = input('actuacion', /* @ts-ignore */
|
|
8275
|
+
...(ngDevMode ? [{ debugName: "vocab" }] : /* istanbul ignore next */ []));
|
|
8276
|
+
/**
|
|
8277
|
+
* Clave del estado DENTRO del `vocab` (p. ej. `'gestion'`). Resuelve rótulo +
|
|
8278
|
+
* tono + ícono. La urgencia de una tarea (`por_vencer`/`vencida`) se DERIVA de
|
|
8279
|
+
* la fecha límite en el consumidor ANTES de llegar aquí.
|
|
8280
|
+
*/
|
|
8281
|
+
this.status = input(/* @ts-ignore */
|
|
8282
|
+
...(ngDevMode ? [undefined, { debugName: "status" }] : /* istanbul ignore next */ []));
|
|
8283
|
+
/**
|
|
8284
|
+
* Fuerza el tono y sobrescribe el del catálogo. Escape hatch genérico para
|
|
8285
|
+
* estados que todavía no tienen vocabulario.
|
|
8286
|
+
*/
|
|
8287
|
+
this.tone = input(/* @ts-ignore */
|
|
8288
|
+
...(ngDevMode ? [undefined, { debugName: "tone" }] : /* istanbul ignore next */ []));
|
|
8289
|
+
/**
|
|
8290
|
+
* Sobrescribe el rótulo. Alternativa a proyectar contenido; si hay
|
|
8291
|
+
* `<ng-content>`, la proyección GANA. Si no resuelve nada, se muestra el
|
|
8292
|
+
* `status` crudo.
|
|
8293
|
+
*/
|
|
8294
|
+
this.label = input(/* @ts-ignore */
|
|
8295
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
8296
|
+
/**
|
|
8297
|
+
* Marca del chip. `false`/ausente → punto de 8px (default). `true` (o el
|
|
8298
|
+
* atributo sin valor `icon`) → ícono del estado tomado del catálogo. Un string
|
|
8299
|
+
* no vacío → ese glifo Material Symbols Rounded (p. ej. `'event_busy'`).
|
|
8300
|
+
* Es `boolean | string` a propósito: no lleva `booleanAttribute`.
|
|
8301
|
+
*/
|
|
8302
|
+
this.icon = input(/* @ts-ignore */
|
|
8303
|
+
...(ngDevMode ? [undefined, { debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
8304
|
+
/** Escala tipográfica: `small` (`fs-sm`, default) · `medium` (`fs-base`). */
|
|
8305
|
+
this.size = input('small', /* @ts-ignore */
|
|
8306
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8307
|
+
/**
|
|
8308
|
+
* Extiende / sobrescribe el vocabulario EN RUNTIME (`status → StatusMeta`).
|
|
8309
|
+
* Gana sobre el catálogo central. Si un estado pasado por aquí se vuelve
|
|
8310
|
+
* común, se PROMUEVE a `status-catalog`.
|
|
8311
|
+
*/
|
|
8312
|
+
this.customMap = input(/* @ts-ignore */
|
|
8313
|
+
...(ngDevMode ? [undefined, { debugName: "customMap" }] : /* istanbul ignore next */ []));
|
|
8314
|
+
/** `true` si el consumidor proyectó contenido no vacío. */
|
|
8315
|
+
this.hayProyeccion = signal(false, /* @ts-ignore */
|
|
8316
|
+
...(ngDevMode ? [{ debugName: "hayProyeccion" }] : /* istanbul ignore next */ []));
|
|
8317
|
+
/** Entrada del catálogo, o `null` si el `vocab`/`status` no se reconoce. */
|
|
8318
|
+
this.meta = computed(() => resolveStatus(this.vocab(), this.status(), this.customMap()), /* @ts-ignore */
|
|
8319
|
+
...(ngDevMode ? [{ debugName: "meta" }] : /* istanbul ignore next */ []));
|
|
8320
|
+
/**
|
|
8321
|
+
* Tono aplicado: `tone` explícito › tono del catálogo › `neutral`.
|
|
8322
|
+
* Se usa `||` (no `??`) para calcar el fallback del golden.
|
|
8323
|
+
*/
|
|
8324
|
+
this.tonoEfectivo = computed(() => this.tone() || this.meta()?.tone || 'neutral', /* @ts-ignore */
|
|
8325
|
+
...(ngDevMode ? [{ debugName: "tonoEfectivo" }] : /* istanbul ignore next */ []));
|
|
8326
|
+
/**
|
|
8327
|
+
* Rótulo cuando NO hay proyección: `label` › `meta.label` › `status` crudo.
|
|
8328
|
+
* Se usa `??` porque el golden compara con `!= null`: un `label=""` explícito
|
|
8329
|
+
* es un override válido a cadena vacía.
|
|
8330
|
+
*/
|
|
8331
|
+
this.rotulo = computed(() => this.label() ?? this.meta()?.label ?? this.status() ?? '', /* @ts-ignore */
|
|
8332
|
+
...(ngDevMode ? [{ debugName: "rotulo" }] : /* istanbul ignore next */ []));
|
|
8333
|
+
/**
|
|
8334
|
+
* Glifo Material Symbols a pintar en lugar del punto, o `null` para el punto.
|
|
8335
|
+
* Se parsea a mano porque `icon` es `boolean | string`: cualquier transform
|
|
8336
|
+
* booleano destruiría el caso "glifo arbitrario".
|
|
8337
|
+
*/
|
|
8338
|
+
this.glifo = computed(() => {
|
|
8339
|
+
const icon = this.icon();
|
|
8340
|
+
if (icon == null || icon === false)
|
|
8341
|
+
return null;
|
|
8342
|
+
if (icon === true)
|
|
8343
|
+
return this.meta()?.icon ?? null;
|
|
8344
|
+
const valor = icon.trim();
|
|
8345
|
+
// '' = atributo sin valor (`<ius-status-chip icon>`) → ícono del catálogo.
|
|
8346
|
+
if (valor === '' || valor === 'true')
|
|
8347
|
+
return this.meta()?.icon ?? null;
|
|
8348
|
+
if (valor === 'false')
|
|
8349
|
+
return null;
|
|
8350
|
+
return valor;
|
|
8351
|
+
}, /* @ts-ignore */
|
|
8352
|
+
...(ngDevMode ? [{ debugName: "glifo" }] : /* istanbul ignore next */ []));
|
|
8353
|
+
}
|
|
8354
|
+
/**
|
|
8355
|
+
* Retro-compat con el estático `StatusChip.states` del golden: alias al
|
|
8356
|
+
* vocabulario `actuacion` del catálogo. NO re-declara nada; es la misma
|
|
8357
|
+
* referencia que `STATUS_VOCAB.actuacion`.
|
|
8358
|
+
*/
|
|
8359
|
+
static { this.states = STATUS_VOCAB.actuacion; }
|
|
8360
|
+
/**
|
|
8361
|
+
* Retro-compat con el estático `StatusChip.order` del golden: claves de
|
|
8362
|
+
* `actuacion` en orden de ciclo, leídas del catálogo con `statusOrder`.
|
|
8363
|
+
*/
|
|
8364
|
+
static { this.order = statusOrder('actuacion'); }
|
|
8365
|
+
/** Detección única de proyección (igual que `ius-divider`). */
|
|
8366
|
+
ngAfterViewInit() {
|
|
8367
|
+
const nodos = Array.from(this.proyeccionRef.nativeElement.childNodes);
|
|
8368
|
+
this.hayProyeccion.set(nodos.some((n) => n.nodeType === Node.ELEMENT_NODE ||
|
|
8369
|
+
(n.nodeType === Node.TEXT_NODE && (n.textContent ?? '').trim().length > 0)));
|
|
8370
|
+
}
|
|
8371
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8372
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatusChipComponent, isStandalone: true, selector: "ius-status-chip", inputs: { vocab: { classPropertyName: "vocab", publicName: "vocab", isSignal: true, isRequired: false, transformFunction: null }, status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, customMap: { classPropertyName: "customMap", publicName: "customMap", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.data-tone": "tonoEfectivo()", "attr.data-size": "size() !== 'small' ? size() : null" }, classAttribute: "ius-status-chip" }, viewQueries: [{ propertyName: "proyeccionRef", first: true, predicate: ["proyeccion"], descendants: true, static: true }], ngImport: i0, template: "<!--\n Marca: \u00EDcono (del cat\u00E1logo o glifo propio) \u203A punto de 8px.\n Siempre `aria-hidden`: el color/forma NUNCA es el \u00FAnico canal de informaci\u00F3n,\n el r\u00F3tulo textual de abajo es quien comunica el estado.\n-->\n@if (glifo(); as glyph) {\n <span class=\"ius-icon ius-status-chip__icon\" aria-hidden=\"true\">{{ glyph }}</span>\n} @else {\n <span class=\"ius-status-chip__dot\" aria-hidden=\"true\"></span>\n}\n\n<!--\n R\u00F3tulo: contenido proyectado \u203A `label` \u203A `meta.label` \u203A `status` crudo.\n El span de proyecci\u00F3n existe SIEMPRE (es el ancla del ViewChild), pero se\n oculta cuando est\u00E1 vac\u00EDo para no consumir el `gap` del host.\n-->\n<span\n #proyeccion\n class=\"ius-status-chip__label\"\n [hidden]=\"!hayProyeccion()\"\n><ng-content /></span>\n@if (!hayProyeccion()) {\n <span class=\"ius-status-chip__label\">{{ rotulo() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_sc-fg: var(--ius-info-700);--_sc-mark: var(--ius-info-500);--_sc-dot: 8px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--_sc-fg);white-space:nowrap;-webkit-user-select:none;user-select:none}:host([data-size=medium]){font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-tone=info]){--_sc-fg: var(--ius-info-700);--_sc-mark: var(--ius-info-500)}:host([data-tone=neutral]){--_sc-fg: var(--ius-text-secondary);--_sc-mark: var(--ius-neutral-6)}:host([data-tone=primary]){--_sc-fg: var(--ius-primary-700);--_sc-mark: var(--ius-primary-500)}:host([data-tone=success]){--_sc-fg: var(--ius-success-700);--_sc-mark: var(--ius-success-600)}:host([data-tone=warning]){--_sc-fg: var(--ius-warning-700);--_sc-mark: var(--ius-warning-500)}:host([data-tone=danger]){--_sc-fg: var(--ius-danger-700);--_sc-mark: var(--ius-danger-500)}.ius-status-chip__dot{flex:0 0 auto;width:var(--_sc-dot);height:var(--_sc-dot);border-radius:var(--ius-radius-pill);background:var(--_sc-mark)}.ius-status-chip__icon.ius-icon{font-size:var(--ius-icon-sm);color:var(--_sc-mark)}.ius-status-chip__label{color:inherit}.ius-status-chip__label:empty,.ius-status-chip__label[hidden]{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8373
|
+
}
|
|
8374
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatusChipComponent, decorators: [{
|
|
8375
|
+
type: Component,
|
|
8376
|
+
args: [{ selector: 'ius-status-chip', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
8377
|
+
class: 'ius-status-chip',
|
|
8378
|
+
role: 'status',
|
|
8379
|
+
'[attr.data-tone]': 'tonoEfectivo()',
|
|
8380
|
+
'[attr.data-size]': "size() !== 'small' ? size() : null",
|
|
8381
|
+
}, template: "<!--\n Marca: \u00EDcono (del cat\u00E1logo o glifo propio) \u203A punto de 8px.\n Siempre `aria-hidden`: el color/forma NUNCA es el \u00FAnico canal de informaci\u00F3n,\n el r\u00F3tulo textual de abajo es quien comunica el estado.\n-->\n@if (glifo(); as glyph) {\n <span class=\"ius-icon ius-status-chip__icon\" aria-hidden=\"true\">{{ glyph }}</span>\n} @else {\n <span class=\"ius-status-chip__dot\" aria-hidden=\"true\"></span>\n}\n\n<!--\n R\u00F3tulo: contenido proyectado \u203A `label` \u203A `meta.label` \u203A `status` crudo.\n El span de proyecci\u00F3n existe SIEMPRE (es el ancla del ViewChild), pero se\n oculta cuando est\u00E1 vac\u00EDo para no consumir el `gap` del host.\n-->\n<span\n #proyeccion\n class=\"ius-status-chip__label\"\n [hidden]=\"!hayProyeccion()\"\n><ng-content /></span>\n@if (!hayProyeccion()) {\n <span class=\"ius-status-chip__label\">{{ rotulo() }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_sc-fg: var(--ius-info-700);--_sc-mark: var(--ius-info-500);--_sc-dot: 8px;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--_sc-fg);white-space:nowrap;-webkit-user-select:none;user-select:none}:host([data-size=medium]){font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-tone=info]){--_sc-fg: var(--ius-info-700);--_sc-mark: var(--ius-info-500)}:host([data-tone=neutral]){--_sc-fg: var(--ius-text-secondary);--_sc-mark: var(--ius-neutral-6)}:host([data-tone=primary]){--_sc-fg: var(--ius-primary-700);--_sc-mark: var(--ius-primary-500)}:host([data-tone=success]){--_sc-fg: var(--ius-success-700);--_sc-mark: var(--ius-success-600)}:host([data-tone=warning]){--_sc-fg: var(--ius-warning-700);--_sc-mark: var(--ius-warning-500)}:host([data-tone=danger]){--_sc-fg: var(--ius-danger-700);--_sc-mark: var(--ius-danger-500)}.ius-status-chip__dot{flex:0 0 auto;width:var(--_sc-dot);height:var(--_sc-dot);border-radius:var(--ius-radius-pill);background:var(--_sc-mark)}.ius-status-chip__icon.ius-icon{font-size:var(--ius-icon-sm);color:var(--_sc-mark)}.ius-status-chip__label{color:inherit}.ius-status-chip__label:empty,.ius-status-chip__label[hidden]{display:none}\n"] }]
|
|
8382
|
+
}], propDecorators: { vocab: [{ type: i0.Input, args: [{ isSignal: true, alias: "vocab", required: false }] }], status: [{ type: i0.Input, args: [{ isSignal: true, alias: "status", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], customMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "customMap", required: false }] }], proyeccionRef: [{
|
|
8383
|
+
type: ViewChild,
|
|
8384
|
+
args: ['proyeccion', { static: true }]
|
|
8385
|
+
}] } });
|
|
8386
|
+
|
|
8387
|
+
/**
|
|
8388
|
+
* Operadores contextuales por tipo de campo — espejo literal de `OPERATORS`
|
|
8389
|
+
* del golden. El primero de cada lista es el default al elegir el campo.
|
|
8390
|
+
* Se exporta para que el consumidor pueda pintar las reglas aplicadas (chips,
|
|
8391
|
+
* resumen…) con la misma etiqueta que usa el panel.
|
|
8392
|
+
*/
|
|
8393
|
+
const IUS_FILTER_OPERATORS = {
|
|
8394
|
+
text: [
|
|
8395
|
+
{ value: 'contains', label: 'Contiene' },
|
|
8396
|
+
{ value: 'equals', label: 'Es igual a' },
|
|
8397
|
+
{ value: 'not_contains', label: 'No contiene' },
|
|
8398
|
+
],
|
|
8399
|
+
enum: [
|
|
8400
|
+
{ value: 'is', label: 'Es' },
|
|
8401
|
+
{ value: 'is_not', label: 'No es' },
|
|
8402
|
+
],
|
|
8403
|
+
number: [
|
|
8404
|
+
{ value: 'eq', label: 'Igual a' },
|
|
8405
|
+
{ value: 'gte', label: 'Mayor o igual' },
|
|
8406
|
+
{ value: 'lte', label: 'Menor o igual' },
|
|
8407
|
+
],
|
|
8408
|
+
date: [
|
|
8409
|
+
{ value: 'between', label: 'Entre' },
|
|
8410
|
+
{ value: 'before', label: 'Antes de' },
|
|
8411
|
+
{ value: 'after', label: 'Después de' },
|
|
8412
|
+
],
|
|
8413
|
+
};
|
|
8414
|
+
/** Operador por defecto de un tipo (espejo de `defaultOp` del golden). */
|
|
8415
|
+
function defaultOp(type) {
|
|
8416
|
+
return String(IUS_FILTER_OPERATORS[type][0].value);
|
|
8417
|
+
}
|
|
8418
|
+
/** Contador de identidad de filas (RID del golden). */
|
|
8419
|
+
let RID = 0;
|
|
8420
|
+
/** Array vacío compartido: evita crear una referencia nueva en cada ciclo de CD. */
|
|
8421
|
+
const NO_OPTIONS = [];
|
|
8422
|
+
/** ¿La fila tiene un valor utilizable? (espejo del filtro del golden). */
|
|
8423
|
+
function isValidRow(row) {
|
|
8424
|
+
return row.value !== '' && row.value != null;
|
|
8425
|
+
}
|
|
8426
|
+
/**
|
|
8427
|
+
* QueryBuilder — Ius Design v2 (familia navigation).
|
|
8428
|
+
*
|
|
8429
|
+
* Constructor de **filtros secundarios estructurados** (estilo Linear/Vercel):
|
|
8430
|
+
* un botón "Filtros" con contador abre un **Popover** con **filas de criterio**
|
|
8431
|
+
* —campo · operador · valor · quitar— más un footer "Añadir filtro · Limpiar
|
|
8432
|
+
* todo · Aplicar", y un estado vacío.
|
|
8433
|
+
*
|
|
8434
|
+
* Decisiones de UX fijas (vienen del golden, no son configurables):
|
|
8435
|
+
* - **Operadores contextuales** por tipo de campo (text → Contiene/Es igual/No
|
|
8436
|
+
* contiene · enum → Es/No es · number → Igual/≥/≤ · date → Entre/Antes/Después).
|
|
8437
|
+
* - **Staged**: el panel arma un *borrador* y solo confirma al pulsar "Aplicar"
|
|
8438
|
+
* (nunca filtra en vivo). Al abrir, el borrador se re-siembra desde lo aplicado.
|
|
8439
|
+
* - **Solo Y (AND)** y **un criterio por campo**: los campos ya usados se
|
|
8440
|
+
* deshabilitan en el selector y al cubrirlos todos se apaga "Añadir filtro".
|
|
8441
|
+
*
|
|
8442
|
+
* Compone (no reimplementa) `ius-popover`, `ius-select`, `ius-text-field`,
|
|
8443
|
+
* `ius-icon-button`, `ius-button` y `ius-text-button`.
|
|
8444
|
+
*
|
|
8445
|
+
* **Cuándo NO usarlo**: filtro primario rápido por chips → `FilterBar`; rango
|
|
8446
|
+
* de fechas → control dedicado con DatePicker; búsqueda libre → `SearchBar`;
|
|
8447
|
+
* captura de datos → un formulario.
|
|
8448
|
+
*
|
|
8449
|
+
* Fuente de verdad: `components/navigation/QueryBuilder/QueryBuilder.jsx` +
|
|
8450
|
+
* `QueryBuilder.d.ts` + `QueryBuilder.ng-spec.md` del proyecto Claude Design.
|
|
8451
|
+
*
|
|
8452
|
+
* ---
|
|
8453
|
+
* **Divergencias doc-vs-golden anotadas** (manda el golden, diseño decide):
|
|
8454
|
+
* 1. `applyLabel` NO es el texto del botón de confirmar en el caso general: el
|
|
8455
|
+
* golden lo calcula («Aplicar N filtro/filtros» con reglas válidas; «Quitar
|
|
8456
|
+
* filtros» si no hay ninguna válida pero sí aplicadas) y solo cae a
|
|
8457
|
+
* `applyLabel` cuando el borrador y lo aplicado están vacíos. La ng-spec lo
|
|
8458
|
+
* presenta como una etiqueta llana.
|
|
8459
|
+
* 2. Los textos "y" (conjunción), "Selecciona un valor", "Escribe un valor" /
|
|
8460
|
+
* "Escribe un número" y "Quitar filtro" están **fijos en el golden**: no hay
|
|
8461
|
+
* input para traducirlos. Si diseño los quiere configurables, primero
|
|
8462
|
+
* cambia el golden.
|
|
8463
|
+
* 3. El campo `type: 'number'` usa un TextField de texto plano (el golden no
|
|
8464
|
+
* pasa `type="number"`), así que el valor viaja siempre como `string`.
|
|
8465
|
+
* 4. `FilterField.icon` está en el contrato pero el golden **no lo pinta**.
|
|
8466
|
+
*
|
|
8467
|
+
* **Decisiones del port a Angular**:
|
|
8468
|
+
* - El Popover se usa en modo controlado (`[open]` + `(openChange)`) y **sin**
|
|
8469
|
+
* `dismissable`, igual que el golden (que tampoco lo activa). Además, aquí es
|
|
8470
|
+
* obligatorio: el menú del `ius-select` vive en OTRO overlay del CDK, así que
|
|
8471
|
+
* `outsidePointerEvents()` del Popover lo leería como "clic fuera" y cerraría
|
|
8472
|
+
* el panel al elegir cualquier opción. El panel se cierra con el propio botón
|
|
8473
|
+
* "Filtros" o con "Aplicar".
|
|
8474
|
+
* - El ancho/padding del panel (`popoverStyle` del golden) se porta como la
|
|
8475
|
+
* piel `.ius-popover.ius-querybuilder-pop` en `popover/popover.component.scss`
|
|
8476
|
+
* (mismo patrón que `.ius-tooltip` y `.ius-dropdown-pop`): el panel se estampa
|
|
8477
|
+
* desde el template del Popover y lleva SU encapsulación.
|
|
8478
|
+
* - El valor de texto se escribe con `[ngModel]` porque `TextFieldComponent`
|
|
8479
|
+
* expone su valor solo por `ControlValueAccessor`. Hace falta para poder
|
|
8480
|
+
* **vaciar** el control cuando cambia el campo de la fila.
|
|
8481
|
+
*/
|
|
8482
|
+
class QueryBuilderComponent {
|
|
8483
|
+
constructor() {
|
|
8484
|
+
// ── Inputs ────────────────────────────────────────────────────────────
|
|
8485
|
+
/** Campos filtrables: definen los operadores y el control de valor. */
|
|
8486
|
+
this.fields = input([], /* @ts-ignore */
|
|
8487
|
+
...(ngDevMode ? [{ debugName: "fields" }] : /* istanbul ignore next */ []));
|
|
8488
|
+
/**
|
|
8489
|
+
* Reglas aplicadas — **modo controlado**. Si se enlaza, el componente no
|
|
8490
|
+
* guarda estado propio: hay que reaccionar a `apply` y volver a enlazar.
|
|
8491
|
+
*/
|
|
8492
|
+
this.value = input(undefined, /* @ts-ignore */
|
|
8493
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
8494
|
+
/** Reglas iniciales del modo **no controlado**. */
|
|
8495
|
+
this.defaultValue = input(undefined, /* @ts-ignore */
|
|
8496
|
+
...(ngDevMode ? [{ debugName: "defaultValue" }] : /* istanbul ignore next */ []));
|
|
8497
|
+
/** Texto del botón disparador. */
|
|
8498
|
+
this.triggerLabel = input('Filtros', /* @ts-ignore */
|
|
8499
|
+
...(ngDevMode ? [{ debugName: "triggerLabel" }] : /* istanbul ignore next */ []));
|
|
8500
|
+
/** Colocación del panel respecto del disparador. */
|
|
8501
|
+
this.placement = input('bottom-start', /* @ts-ignore */
|
|
8502
|
+
...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
|
|
8503
|
+
/** Escala de los controles del panel (se propaga a Select/TextField/botones). */
|
|
8504
|
+
this.size = input('small', /* @ts-ignore */
|
|
8505
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
8506
|
+
/**
|
|
8507
|
+
* Máximo de filas. Default = `fields.length` (un criterio por campo: no se
|
|
8508
|
+
* repite campo y al cubrirlos todos se desactiva "Añadir filtro"). Fíjalo
|
|
8509
|
+
* solo para un tope distinto.
|
|
8510
|
+
*/
|
|
8511
|
+
this.maxRows = input(undefined, /* @ts-ignore */
|
|
8512
|
+
...(ngDevMode ? [{ debugName: "maxRows" }] : /* istanbul ignore next */ []));
|
|
8513
|
+
/** Etiqueta del botón que añade una fila. */
|
|
8514
|
+
this.addLabel = input('Añadir filtro', /* @ts-ignore */
|
|
8515
|
+
...(ngDevMode ? [{ debugName: "addLabel" }] : /* istanbul ignore next */ []));
|
|
8516
|
+
/** Etiqueta del botón que vacía el borrador. */
|
|
8517
|
+
this.clearLabel = input('Limpiar todo', /* @ts-ignore */
|
|
8518
|
+
...(ngDevMode ? [{ debugName: "clearLabel" }] : /* istanbul ignore next */ []));
|
|
8519
|
+
/**
|
|
8520
|
+
* Etiqueta del botón de confirmar **solo cuando no hay nada que aplicar ni
|
|
8521
|
+
* aplicado**. Ver la divergencia 1 del comentario de cabecera.
|
|
8522
|
+
*/
|
|
8523
|
+
this.applyLabel = input('Aplicar filtro', /* @ts-ignore */
|
|
8524
|
+
...(ngDevMode ? [{ debugName: "applyLabel" }] : /* istanbul ignore next */ []));
|
|
8525
|
+
/** Título del estado vacío del panel. */
|
|
8526
|
+
this.emptyTitle = input('Sin filtros aplicados', /* @ts-ignore */
|
|
8527
|
+
...(ngDevMode ? [{ debugName: "emptyTitle" }] : /* istanbul ignore next */ []));
|
|
8528
|
+
/** Pista del estado vacío del panel. */
|
|
8529
|
+
this.emptyHint = input('Añade filtros para acotar los resultados.', /* @ts-ignore */
|
|
8530
|
+
...(ngDevMode ? [{ debugName: "emptyHint" }] : /* istanbul ignore next */ []));
|
|
8531
|
+
// ── Outputs ───────────────────────────────────────────────────────────
|
|
8532
|
+
/**
|
|
8533
|
+
* Reglas válidas al pulsar "Aplicar" (espejo de `onApply`). Nombre fijado
|
|
8534
|
+
* por la ng-spec; no colisiona con ningún evento del DOM.
|
|
8535
|
+
*/
|
|
8536
|
+
this.apply = output();
|
|
8537
|
+
// ── Estado interno ────────────────────────────────────────────────────
|
|
8538
|
+
/** `null` = todavía no se ha aplicado nada → manda `defaultValue`. */
|
|
8539
|
+
this.internalApplied = signal(null, /* @ts-ignore */
|
|
8540
|
+
...(ngDevMode ? [{ debugName: "internalApplied" }] : /* istanbul ignore next */ []));
|
|
8541
|
+
/** Apertura del panel (el Popover se usa en modo controlado). */
|
|
8542
|
+
this.isOpen = signal(false, /* @ts-ignore */
|
|
8543
|
+
...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
8544
|
+
/** Borrador del panel: lo que se está armando, aún sin aplicar. */
|
|
8545
|
+
this.draft = signal([], /* @ts-ignore */
|
|
8546
|
+
...(ngDevMode ? [{ debugName: "draft" }] : /* istanbul ignore next */ []));
|
|
8547
|
+
// ── Derivados ─────────────────────────────────────────────────────────
|
|
8548
|
+
/** Reglas efectivamente aplicadas (controlado › interno › `defaultValue`). */
|
|
8549
|
+
this.applied = computed(() => this.value() ?? this.internalApplied() ?? this.defaultValue() ?? [], /* @ts-ignore */
|
|
8550
|
+
...(ngDevMode ? [{ debugName: "applied" }] : /* istanbul ignore next */ []));
|
|
8551
|
+
/** Contador del disparador. */
|
|
8552
|
+
this.count = computed(() => this.applied().length, /* @ts-ignore */
|
|
8553
|
+
...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
|
|
8554
|
+
/** Índice campo → definición, para resolver tipo/opciones sin recorrer. */
|
|
8555
|
+
this.fieldIndex = computed(() => {
|
|
8556
|
+
const index = new Map();
|
|
8557
|
+
for (const field of this.fields())
|
|
8558
|
+
index.set(field.value, field);
|
|
8559
|
+
return index;
|
|
8560
|
+
}, /* @ts-ignore */
|
|
8561
|
+
...(ngDevMode ? [{ debugName: "fieldIndex" }] : /* istanbul ignore next */ []));
|
|
8562
|
+
/**
|
|
8563
|
+
* Opciones del selector de campo, por fila: un campo ya usado en OTRA fila
|
|
8564
|
+
* se deshabilita (un criterio por campo). Memorizado para no crear arrays
|
|
8565
|
+
* nuevos en cada ciclo de detección (dispararía el setter de `ius-select`).
|
|
8566
|
+
*/
|
|
8567
|
+
this.fieldOptions = computed(() => {
|
|
8568
|
+
const rows = this.draft();
|
|
8569
|
+
const out = {};
|
|
8570
|
+
for (const row of rows) {
|
|
8571
|
+
out[row.id] = this.fields().map((field) => ({
|
|
8572
|
+
value: field.value,
|
|
8573
|
+
label: field.label,
|
|
8574
|
+
disabled: rows.some((other) => other.id !== row.id && other.field === field.value),
|
|
8575
|
+
}));
|
|
8576
|
+
}
|
|
8577
|
+
return out;
|
|
8578
|
+
}, /* @ts-ignore */
|
|
8579
|
+
...(ngDevMode ? [{ debugName: "fieldOptions" }] : /* istanbul ignore next */ []));
|
|
8580
|
+
/** Opciones del control de valor para los campos `enum`, por campo. */
|
|
8581
|
+
this.enumOptions = computed(() => {
|
|
8582
|
+
const out = {};
|
|
8583
|
+
for (const field of this.fields()) {
|
|
8584
|
+
if (field.type !== 'enum')
|
|
8585
|
+
continue;
|
|
8586
|
+
out[field.value] = (field.options ?? []).map((option) => ({
|
|
8587
|
+
value: option.value,
|
|
8588
|
+
label: option.label,
|
|
8589
|
+
}));
|
|
8590
|
+
}
|
|
8591
|
+
return out;
|
|
8592
|
+
}, /* @ts-ignore */
|
|
8593
|
+
...(ngDevMode ? [{ debugName: "enumOptions" }] : /* istanbul ignore next */ []));
|
|
8594
|
+
/** Tope efectivo de filas. */
|
|
8595
|
+
this.maxRowsEff = computed(() => this.maxRows() ?? this.fields().length, /* @ts-ignore */
|
|
8596
|
+
...(ngDevMode ? [{ debugName: "maxRowsEff" }] : /* istanbul ignore next */ []));
|
|
8597
|
+
/** Ya no caben más filas → "Añadir filtro" apagado. */
|
|
8598
|
+
this.atCap = computed(() => this.draft().length >= this.maxRowsEff(), /* @ts-ignore */
|
|
8599
|
+
...(ngDevMode ? [{ debugName: "atCap" }] : /* istanbul ignore next */ []));
|
|
8600
|
+
/** Filas del borrador con valor utilizable. */
|
|
8601
|
+
this.validCount = computed(() => this.draft().filter(isValidRow).length, /* @ts-ignore */
|
|
8602
|
+
...(ngDevMode ? [{ debugName: "validCount" }] : /* istanbul ignore next */ []));
|
|
8603
|
+
/** Texto del botón de confirmar (lógica del golden; ver divergencia 1). */
|
|
8604
|
+
this.applyText = computed(() => {
|
|
8605
|
+
const valid = this.validCount();
|
|
8606
|
+
if (valid > 0) {
|
|
8607
|
+
return `Aplicar ${valid} ${valid === 1 ? 'filtro' : 'filtros'}`;
|
|
8608
|
+
}
|
|
8609
|
+
return this.count() > 0 ? 'Quitar filtros' : this.applyLabel();
|
|
8610
|
+
}, /* @ts-ignore */
|
|
8611
|
+
...(ngDevMode ? [{ debugName: "applyText" }] : /* istanbul ignore next */ []));
|
|
8612
|
+
/** Sin nada que aplicar y sin nada aplicado → no hay acción posible. */
|
|
8613
|
+
this.applyDisabled = computed(() => this.validCount() === 0 && this.count() === 0, /* @ts-ignore */
|
|
8614
|
+
...(ngDevMode ? [{ debugName: "applyDisabled" }] : /* istanbul ignore next */ []));
|
|
8615
|
+
/** El selector de campo se vuelve buscable con listas largas (golden: `> 6`). */
|
|
8616
|
+
this.fieldsSearchable = computed(() => this.fields().length > 6, /* @ts-ignore */
|
|
8617
|
+
...(ngDevMode ? [{ debugName: "fieldsSearchable" }] : /* istanbul ignore next */ []));
|
|
8618
|
+
}
|
|
8619
|
+
// ── Helpers de plantilla ──────────────────────────────────────────────
|
|
8620
|
+
/** Tipo del campo (default `text`, como el golden). */
|
|
8621
|
+
typeOf(fieldValue) {
|
|
8622
|
+
return this.fieldIndex().get(fieldValue)?.type ?? 'text';
|
|
8623
|
+
}
|
|
8624
|
+
/** Operadores contextuales del campo — referencia estable por tipo. */
|
|
8625
|
+
operatorOptions(fieldValue) {
|
|
8626
|
+
return IUS_FILTER_OPERATORS[this.typeOf(fieldValue)];
|
|
8627
|
+
}
|
|
8628
|
+
/** Opciones del selector de campo de una fila (referencia memorizada). */
|
|
8629
|
+
fieldOptionsFor(rid) {
|
|
8630
|
+
return this.fieldOptions()[rid] ?? NO_OPTIONS;
|
|
8631
|
+
}
|
|
8632
|
+
/** Opciones del valor `enum` de un campo. */
|
|
8633
|
+
valueOptions(fieldValue) {
|
|
8634
|
+
return this.enumOptions()[fieldValue] ?? NO_OPTIONS;
|
|
8635
|
+
}
|
|
8636
|
+
/** El valor `enum` también se vuelve buscable con listas largas (golden: > 6). */
|
|
8637
|
+
valueSearchable(fieldValue) {
|
|
8638
|
+
return this.valueOptions(fieldValue).length > 6;
|
|
8639
|
+
}
|
|
8640
|
+
/** Placeholder del control de texto (golden: el del campo o uno por tipo). */
|
|
8641
|
+
valuePlaceholder(fieldValue) {
|
|
8642
|
+
const field = this.fieldIndex().get(fieldValue);
|
|
8643
|
+
if (field?.placeholder)
|
|
8644
|
+
return field.placeholder;
|
|
8645
|
+
return this.typeOf(fieldValue) === 'number'
|
|
8646
|
+
? 'Escribe un número'
|
|
8647
|
+
: 'Escribe un valor';
|
|
8648
|
+
}
|
|
8649
|
+
/** Valor para el `ius-select` de `enum`: `''` → `null` (muestra placeholder). */
|
|
8650
|
+
selectValue(value) {
|
|
8651
|
+
return value === '' ? null : value;
|
|
8652
|
+
}
|
|
8653
|
+
/** Valor para el `ius-text-field` (siempre `string`). */
|
|
8654
|
+
textValue(value) {
|
|
8655
|
+
return String(value ?? '');
|
|
8656
|
+
}
|
|
8657
|
+
// ── Apertura / borrador ───────────────────────────────────────────────
|
|
8658
|
+
/**
|
|
8659
|
+
* Al **abrir**, el borrador se re-siembra desde las reglas aplicadas (espejo
|
|
8660
|
+
* del `useEffect([open])` del golden): lo que se dejó a medias sin aplicar se
|
|
8661
|
+
* descarta.
|
|
8662
|
+
*/
|
|
8663
|
+
onOpenChange(open) {
|
|
8664
|
+
this.isOpen.set(open);
|
|
8665
|
+
if (!open)
|
|
8666
|
+
return;
|
|
8667
|
+
this.draft.set(this.applied().map((rule) => this.mkRow(rule)));
|
|
8668
|
+
}
|
|
8669
|
+
/** Crea una fila nueva (espejo de `mkRow`). */
|
|
8670
|
+
mkRow(rule) {
|
|
8671
|
+
// Defensa que el golden no tiene: `fields[0]` es `undefined` con la lista
|
|
8672
|
+
// vacía. Sin campos no hay filtro posible, pero no debe reventar.
|
|
8673
|
+
const field = rule ? rule.field : (this.fields()[0]?.value ?? '');
|
|
8674
|
+
const type = this.typeOf(field);
|
|
8675
|
+
return {
|
|
8676
|
+
id: ++RID,
|
|
8677
|
+
field,
|
|
8678
|
+
operator: rule ? rule.operator : defaultOp(type),
|
|
8679
|
+
value: rule ? rule.value : '',
|
|
8680
|
+
};
|
|
8681
|
+
}
|
|
8682
|
+
/** Parche inmutable de una fila por `id`. */
|
|
8683
|
+
patch(rid, next) {
|
|
8684
|
+
this.draft.update((rows) => rows.map((row) => (row.id === rid ? { ...row, ...next } : row)));
|
|
8685
|
+
}
|
|
8686
|
+
// ── Handlers de fila ──────────────────────────────────────────────────
|
|
8687
|
+
/** Cambiar el campo resetea operador (al default del tipo) y valor. */
|
|
8688
|
+
onFieldChange(rid, next) {
|
|
8689
|
+
const field = this.scalar(next);
|
|
8690
|
+
if (field === null)
|
|
8691
|
+
return;
|
|
8692
|
+
const type = this.typeOf(String(field));
|
|
8693
|
+
this.patch(rid, {
|
|
8694
|
+
field: String(field),
|
|
8695
|
+
operator: defaultOp(type),
|
|
8696
|
+
value: '',
|
|
8697
|
+
});
|
|
8698
|
+
}
|
|
8699
|
+
/** Cambio de operador. */
|
|
8700
|
+
onOperatorChange(rid, next) {
|
|
8701
|
+
const operator = this.scalar(next);
|
|
8702
|
+
if (operator === null)
|
|
8703
|
+
return;
|
|
8704
|
+
this.patch(rid, { operator: String(operator) });
|
|
8705
|
+
}
|
|
8706
|
+
/** Cambio del valor `enum`. */
|
|
8707
|
+
onValueChange(rid, next) {
|
|
8708
|
+
const value = this.scalar(next);
|
|
8709
|
+
this.patch(rid, { value: value ?? '' });
|
|
8710
|
+
}
|
|
8711
|
+
/** Cambio del valor de texto/número (incluye el botón de limpiar). */
|
|
8712
|
+
onTextValueChange(rid, next) {
|
|
8713
|
+
this.patch(rid, { value: next ?? '' });
|
|
8714
|
+
}
|
|
8715
|
+
/** Normaliza la salida del `ius-select` (single) a escalar. */
|
|
8716
|
+
scalar(next) {
|
|
8717
|
+
if (Array.isArray(next))
|
|
8718
|
+
return next[0] ?? null;
|
|
8719
|
+
return next ?? null;
|
|
8720
|
+
}
|
|
8721
|
+
// ── Acciones del footer ───────────────────────────────────────────────
|
|
8722
|
+
/** Añade una fila con el primer campo libre (respetando `maxRows`). */
|
|
8723
|
+
addRow() {
|
|
8724
|
+
this.draft.update((rows) => {
|
|
8725
|
+
if (rows.length >= this.maxRowsEff())
|
|
8726
|
+
return rows;
|
|
8727
|
+
const used = new Set(rows.map((row) => row.field));
|
|
8728
|
+
const next = this.fields().find((field) => !used.has(field.value));
|
|
8729
|
+
if (!next)
|
|
8730
|
+
return rows;
|
|
8731
|
+
return [
|
|
8732
|
+
...rows,
|
|
8733
|
+
this.mkRow({
|
|
8734
|
+
field: next.value,
|
|
8735
|
+
operator: defaultOp(next.type ?? 'text'),
|
|
8736
|
+
value: '',
|
|
8737
|
+
}),
|
|
8738
|
+
];
|
|
8739
|
+
});
|
|
8740
|
+
}
|
|
8741
|
+
/** Quita una fila por su `id` (nunca por índice). */
|
|
8742
|
+
removeRow(rid) {
|
|
8743
|
+
this.draft.update((rows) => rows.filter((row) => row.id !== rid));
|
|
8744
|
+
}
|
|
8745
|
+
/** Vacía el borrador (todavía no aplica nada: hay que confirmar). */
|
|
8746
|
+
clearAll() {
|
|
8747
|
+
this.draft.set([]);
|
|
8748
|
+
}
|
|
8749
|
+
/** Confirma el borrador: emite las reglas válidas y cierra el panel. */
|
|
8750
|
+
applyDraft() {
|
|
8751
|
+
const rules = this.draft()
|
|
8752
|
+
.filter(isValidRow)
|
|
8753
|
+
.map((row) => ({
|
|
8754
|
+
field: row.field,
|
|
8755
|
+
operator: row.operator,
|
|
8756
|
+
value: row.value,
|
|
8757
|
+
}));
|
|
8758
|
+
if (this.value() === undefined)
|
|
8759
|
+
this.internalApplied.set(rules);
|
|
8760
|
+
this.apply.emit(rules);
|
|
8761
|
+
this.isOpen.set(false);
|
|
8762
|
+
}
|
|
8763
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: QueryBuilderComponent, isStandalone: true, selector: "ius-query-builder", inputs: { fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, triggerLabel: { classPropertyName: "triggerLabel", publicName: "triggerLabel", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyHint: { classPropertyName: "emptyHint", publicName: "emptyHint", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { classAttribute: "ius-querybuilder" }, ngImport: i0, template: "<!--\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\n como children y el panel como `[iusPopoverContent]`. Modo controlado\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\n-->\n<ius-popover\n trigger=\"click\"\n [placement]=\"placement()\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [open]=\"isOpen()\"\n panelClass=\"ius-querybuilder-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\n <button\n type=\"button\"\n class=\"ius-querybuilder__trigger\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\n [attr.aria-expanded]=\"isOpen()\"\n >\n <span class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\n <span>{{ triggerLabel() }}</span>\n @if (count() > 0) {\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\n }\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\n <span class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\n </button>\n\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\n @if (draft().length === 0) {\n <div class=\"ius-querybuilder__empty\">\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\n </div>\n } @else {\n <div class=\"ius-querybuilder__rows\">\n <!--\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\n fila intermedia se reciclar\u00EDan los controles y los valores se\n cruzar\u00EDan entre filas.\n -->\n @for (row of draft(); track row.id; let i = $index) {\n <div class=\"ius-querybuilder__rule\">\n @if (i > 0) {\n <span class=\"ius-querybuilder__conj\">y</span>\n }\n\n <!--\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\n `@if` solo dejan comentarios, que no cuentan como elementos.\n -->\n <div class=\"ius-querybuilder__row\">\n <ius-select\n [options]=\"fieldOptionsFor(row.id)\"\n [value]=\"row.field\"\n [size]=\"size()\"\n [searchable]=\"fieldsSearchable()\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onFieldChange(row.id, $event)\"\n />\n\n <ius-select\n [options]=\"operatorOptions(row.field)\"\n [value]=\"row.operator\"\n [size]=\"size()\"\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onOperatorChange(row.id, $event)\"\n />\n\n @if (typeOf(row.field) === 'enum') {\n <ius-select\n [options]=\"valueOptions(row.field)\"\n [value]=\"selectValue(row.value)\"\n placeholder=\"Selecciona un valor\"\n [size]=\"size()\"\n [searchable]=\"valueSearchable(row.field)\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onValueChange(row.id, $event)\"\n />\n } @else {\n <!--\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\n CVA y hace falta poder vaciarlo al cambiar el campo.\n -->\n <ius-text-field\n [ngModel]=\"textValue(row.value)\"\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\n [placeholder]=\"valuePlaceholder(row.field)\"\n [size]=\"size()\"\n [showHelpText]=\"false\"\n />\n }\n\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n [size]=\"size()\"\n ariaLabel=\"Quitar filtro\"\n (clicked)=\"removeRow(row.id)\"\n />\n </div>\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\n <div class=\"ius-querybuilder__foot\">\n <ius-text-button\n [label]=\"addLabel()\"\n prefixIcon=\"add\"\n [size]=\"size()\"\n [disabled]=\"atCap()\"\n (clicked)=\"addRow()\"\n />\n <span class=\"ius-querybuilder__foot-r\">\n @if (draft().length) {\n <ius-text-button\n [label]=\"clearLabel()\"\n [size]=\"size()\"\n (clicked)=\"clearAll()\"\n />\n }\n <ius-button\n variant=\"primary\"\n [size]=\"size()\"\n [label]=\"applyText()\"\n [disabled]=\"applyDisabled()\"\n (clicked)=\"applyDraft()\"\n />\n </span>\n </div>\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }, { kind: "component", type: TextFieldComponent, selector: "ius-text-field", inputs: ["label", "placeholder", "required", "prefixIcon", "showClear", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "error", "name", "type", "size", "disabled"], outputs: ["valueChange", "cleared"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8765
|
+
}
|
|
8766
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
8767
|
+
type: Component,
|
|
8768
|
+
args: [{ selector: 'ius-query-builder', standalone: true, imports: [
|
|
8769
|
+
FormsModule,
|
|
8770
|
+
PopoverComponent,
|
|
8771
|
+
SelectComponent,
|
|
8772
|
+
TextFieldComponent,
|
|
8773
|
+
IconButtonComponent,
|
|
8774
|
+
ButtonComponent,
|
|
8775
|
+
TextButtonComponent,
|
|
8776
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-querybuilder' }, template: "<!--\n QueryBuilder \u2014 el Popover es el motor de anclaje; el disparador se proyecta\n como children y el panel como `[iusPopoverContent]`. Modo controlado\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\n `dismissable` queda apagado a prop\u00F3sito: ver el TSDoc de cabecera.\n-->\n<ius-popover\n trigger=\"click\"\n [placement]=\"placement()\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [open]=\"isOpen()\"\n panelClass=\"ius-querybuilder-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- \u2500\u2500 Disparador: bot\u00F3n \"Filtros\" con contador de reglas aplicadas \u2500\u2500 -->\n <button\n type=\"button\"\n class=\"ius-querybuilder__trigger\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-active]=\"count() > 0 ? 'true' : null\"\n [attr.aria-expanded]=\"isOpen()\"\n >\n <span class=\"ius-icon\" aria-hidden=\"true\">filter_list</span>\n <span>{{ triggerLabel() }}</span>\n @if (count() > 0) {\n <span class=\"ius-querybuilder__count\">{{ count() }}</span>\n }\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\n <span class=\"ius-icon ius-querybuilder__chev\" aria-hidden=\"true\">expand_more</span>\n </button>\n\n <!-- \u2500\u2500 Panel: filas de criterio + footer (se estampa en el overlay) \u2500\u2500 -->\n <div iusPopoverContent class=\"ius-querybuilder__panel\">\n @if (draft().length === 0) {\n <div class=\"ius-querybuilder__empty\">\n <span class=\"ius-querybuilder__empty-t\">{{ emptyTitle() }}</span>\n <span class=\"ius-querybuilder__empty-h\">{{ emptyHint() }}</span>\n </div>\n } @else {\n <div class=\"ius-querybuilder__rows\">\n <!--\n `track row.id` (el RID incremental), NUNCA `$index`: al quitar una\n fila intermedia se reciclar\u00EDan los controles y los valores se\n cruzar\u00EDan entre filas.\n -->\n @for (row of draft(); track row.id; let i = $index) {\n <div class=\"ius-querybuilder__rule\">\n @if (i > 0) {\n <span class=\"ius-querybuilder__conj\">y</span>\n }\n\n <!--\n Orden de elementos del grid (lo usa el `:nth-child(3)` del\n responsive): campo \u00B7 operador \u00B7 valor \u00B7 quitar. Los bloques\n `@if` solo dejan comentarios, que no cuentan como elementos.\n -->\n <div class=\"ius-querybuilder__row\">\n <ius-select\n [options]=\"fieldOptionsFor(row.id)\"\n [value]=\"row.field\"\n [size]=\"size()\"\n [searchable]=\"fieldsSearchable()\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onFieldChange(row.id, $event)\"\n />\n\n <ius-select\n [options]=\"operatorOptions(row.field)\"\n [value]=\"row.operator\"\n [size]=\"size()\"\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onOperatorChange(row.id, $event)\"\n />\n\n @if (typeOf(row.field) === 'enum') {\n <ius-select\n [options]=\"valueOptions(row.field)\"\n [value]=\"selectValue(row.value)\"\n placeholder=\"Selecciona un valor\"\n [size]=\"size()\"\n [searchable]=\"valueSearchable(row.field)\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n (valueChange)=\"onValueChange(row.id, $event)\"\n />\n } @else {\n <!--\n `[ngModel]` de una v\u00EDa: TextField expone su valor solo por\n CVA y hace falta poder vaciarlo al cambiar el campo.\n -->\n <ius-text-field\n [ngModel]=\"textValue(row.value)\"\n (ngModelChange)=\"onTextValueChange(row.id, $event)\"\n [placeholder]=\"valuePlaceholder(row.field)\"\n [size]=\"size()\"\n [showHelpText]=\"false\"\n />\n }\n\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n [size]=\"size()\"\n ariaLabel=\"Quitar filtro\"\n (clicked)=\"removeRow(row.id)\"\n />\n </div>\n </div>\n }\n </div>\n }\n\n <!-- \u2500\u2500 Footer: a\u00F1adir \u00B7 limpiar \u00B7 aplicar (staged) \u2500\u2500 -->\n <div class=\"ius-querybuilder__foot\">\n <ius-text-button\n [label]=\"addLabel()\"\n prefixIcon=\"add\"\n [size]=\"size()\"\n [disabled]=\"atCap()\"\n (clicked)=\"addRow()\"\n />\n <span class=\"ius-querybuilder__foot-r\">\n @if (draft().length) {\n <ius-text-button\n [label]=\"clearLabel()\"\n [size]=\"size()\"\n (clicked)=\"clearAll()\"\n />\n }\n <ius-button\n variant=\"primary\"\n [size]=\"size()\"\n [label]=\"applyText()\"\n [disabled]=\"applyDisabled()\"\n (clicked)=\"applyDraft()\"\n />\n </span>\n </div>\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-querybuilder__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-querybuilder__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-querybuilder__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-querybuilder__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-querybuilder__count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 var(--ius-space-xxs);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);color:var(--ius-neutral-white);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;line-height:1}.ius-querybuilder__chev{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-querybuilder__trigger[data-open=true] .ius-querybuilder__chev{transform:rotate(180deg)}.ius-querybuilder__panel{display:flex;flex-direction:column;gap:var(--ius-space-md);width:min(720px,100vw - var(--ius-space-2xl));max-width:100%;box-sizing:border-box}.ius-querybuilder__rows{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-querybuilder__rule{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-querybuilder__conj{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary);padding-left:var(--ius-space-xxs)}.ius-querybuilder__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1.7fr) auto;gap:var(--ius-space-sm);align-items:center}.ius-querybuilder__row>*{min-width:0}.ius-querybuilder__row ::ng-deep .ius-tf__field{flex-wrap:nowrap}.ius-querybuilder__empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}.ius-querybuilder__empty-t{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-base);color:var(--ius-text-primary)}.ius-querybuilder__empty-h{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-querybuilder__foot{display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-querybuilder__foot-r{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}@media(max-width:600px){.ius-querybuilder__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}.ius-querybuilder__row>:nth-child(3){grid-column:1/3}}\n"] }]
|
|
8777
|
+
}], propDecorators: { fields: [{ type: i0.Input, args: [{ isSignal: true, alias: "fields", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], triggerLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "triggerLabel", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyHint: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyHint", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }] } });
|
|
8778
|
+
|
|
8779
|
+
/**
|
|
8780
|
+
* SegmentGroup — Ius Design v2 (familia layout).
|
|
8781
|
+
*
|
|
8782
|
+
* Agrupa **dos o más controles tipo píldora** ya existentes (`ius-button`
|
|
8783
|
+
* `variant="outline"`, `ius-dropdown` `variant="outline"`, el disparador de
|
|
8784
|
+
* `ius-query-builder`…) en un **bloque segmentado**: el grupo aporta el ÚNICO
|
|
8785
|
+
* shell (borde 1px + radio), los controles internos pierden borde/radio/fondo
|
|
8786
|
+
* propios, el borde compartido se convierte en un **divisor de 1px** y las
|
|
8787
|
+
* esquinas redondeadas quedan solo en el exterior (izquierdas del primero,
|
|
8788
|
+
* derechas del último). Es puramente visual: **cada hijo conserva su propio
|
|
8789
|
+
* clic, su propio menú y su propio estado**; el grupo no tiene outputs.
|
|
8790
|
+
*
|
|
8791
|
+
* Compone: nada. Solo proyecta (`<ng-content>`) y re-estiliza a sus hijos.
|
|
8792
|
+
*
|
|
8793
|
+
* **Cuándo NO usarlo**
|
|
8794
|
+
* - Elegir UNA opción entre varias → `ius-segmented-control` (eso sí es un
|
|
8795
|
+
* input con selección única).
|
|
8796
|
+
* - Una acción primaria suelta → `ius-button` a secas.
|
|
8797
|
+
* - Barra de filtros de chips removibles → FilterBar/`ius-chip`.
|
|
8798
|
+
*
|
|
8799
|
+
* **Requisito de los hijos.** Todos con tratamiento outline y la misma altura.
|
|
8800
|
+
* OJO: en esta librería `ius-button variant="outline"` es el outline VERDE
|
|
8801
|
+
* (`--ius-success-*`, port verbatim de `Button.jsx`) y es más alto que los
|
|
8802
|
+
* disparadores outline de Dropdown/QueryBuilder (padding `sm lg` vs `xs sm`).
|
|
8803
|
+
* El grupo estira a todos al alto del más alto, pero el color del texto del
|
|
8804
|
+
* Button sigue siendo el suyo. La `SegmentGroup.prompt.md` describe el outline
|
|
8805
|
+
* como «borde 1px stroke + radio md», que es el de Dropdown/QueryBuilder, no el
|
|
8806
|
+
* del Button: divergencia de diseño a resolver por diseño, no por el port.
|
|
8807
|
+
*
|
|
8808
|
+
* **Divergencias doc-vs-golden** (manda el `.jsx`, según regla del repo):
|
|
8809
|
+
* - `segmentgroup.card.html` (panel «Tokens que consume») cita
|
|
8810
|
+
* `--ius-surface-card` para el fondo y `--ius-radius-lg` (14px) para las
|
|
8811
|
+
* esquinas. `SegmentGroup.jsx` usa `--ius-neutral-white` y
|
|
8812
|
+
* `--ius-radius-md` (8px). Se portó el JSX. El fondo es equivalente
|
|
8813
|
+
* (`--ius-surface-card` → `--ius-neutral-white`), pero el radio SÍ difiere:
|
|
8814
|
+
* 8px reales frente a 14px documentados. Pendiente de que diseño elija.
|
|
8815
|
+
*
|
|
8816
|
+
* Fuente de verdad: `components/layout/SegmentGroup/SegmentGroup.jsx` +
|
|
8817
|
+
* `SegmentGroup.d.ts` + `SegmentGroup.ng-spec.md` (proyecto Claude Design).
|
|
8818
|
+
*
|
|
8819
|
+
* @example
|
|
8820
|
+
* ```html
|
|
8821
|
+
* <ius-segment-group ariaLabel="Filtros de la lista">
|
|
8822
|
+
* <ius-dropdown variant="outline" triggerIcon="calendar_month"
|
|
8823
|
+
* triggerLabel="Últimos 30 días" [items]="rangos" selectable />
|
|
8824
|
+
* <ius-query-builder [fields]="campos" (apply)="aplicar($event)" />
|
|
8825
|
+
* </ius-segment-group>
|
|
8826
|
+
* ```
|
|
8827
|
+
*/
|
|
8828
|
+
class SegmentGroupComponent {
|
|
8829
|
+
constructor() {
|
|
8830
|
+
/**
|
|
8831
|
+
* Etiqueta accesible del grupo — se emite como `aria-label` sobre el
|
|
8832
|
+
* `role="group"` del host. Sin ella el grupo queda sin nombre accesible:
|
|
8833
|
+
* decláralo siempre que el conjunto tenga un significado propio
|
|
8834
|
+
* («Herramientas de la lista», «Filtros»…).
|
|
8835
|
+
*/
|
|
8836
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
8837
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
8838
|
+
}
|
|
8839
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8840
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SegmentGroupComponent, isStandalone: true, selector: "ius-segment-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() ?? null" }, classAttribute: "ius-segmentgroup" }, ngImport: i0, template: "<!--\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\n siguen coincidiendo con los hosts reales de cada control).\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\n-->\n<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8841
|
+
}
|
|
8842
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, decorators: [{
|
|
8843
|
+
type: Component,
|
|
8844
|
+
args: [{ selector: 'ius-segment-group', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
8845
|
+
// Clase raíz del golden (`.ius-segmentgroup`): el host ES la raíz del grupo.
|
|
8846
|
+
class: 'ius-segmentgroup',
|
|
8847
|
+
role: 'group',
|
|
8848
|
+
'[attr.aria-label]': 'ariaLabel() ?? null',
|
|
8849
|
+
}, template: "<!--\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\n siguen coincidiendo con los hosts reales de cada control).\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\n-->\n<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"] }]
|
|
8850
|
+
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
8851
|
+
|
|
6770
8852
|
/*
|
|
6771
8853
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
6772
8854
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -6778,5 +8860,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6778
8860
|
* Generated bundle index. Do not edit.
|
|
6779
8861
|
*/
|
|
6780
8862
|
|
|
6781
|
-
export { AlertComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IconButtonComponent, IllustrationComponent, IusAlertActionsDirective, IusAlertTrailingDirective, IusModalFooterDirective, IusTagPrefixDirective, IusTagSuffixDirective, LoadingComponent, LoadingMarkComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PopoverComponent, ScrollAreaComponent, SegmentedControlComponent, SelectComponent, ShowMoreComponent, StatusStateComponent, TagComponent, TextButtonComponent, TextComponent, TextFieldComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, voiceEnv };
|
|
8863
|
+
export { AlertComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DropdownComponent, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAlertActionsDirective, IusAlertTrailingDirective, IusDropdownTriggerDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusTagPrefixDirective, IusTagSuffixDirective, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, ShowMoreComponent, StatusChipComponent, StatusStateComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TooltipComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
6782
8864
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|