@litigiovirtual/ius-design-components 2.1.24 → 2.1.25
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.
|
@@ -531,7 +531,7 @@ class EleniaOrbComponent {
|
|
|
531
531
|
});
|
|
532
532
|
}
|
|
533
533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EleniaOrbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EleniaOrbComponent, isStandalone: true, selector: "ius-elenia-orb", inputs: { size: ["size", "size", numberAttribute], mood: "mood", surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel", "attr.data-state": "mood", "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "style.width.px": "size", "style.height.px": "size", "style.--_orb": "size + 'px'" } }, viewQueries: [{ propertyName: "cubeGroup", first: true, predicate: ["cubeGroup"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"ius-orb__sphere\">\
|
|
534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EleniaOrbComponent, isStandalone: true, selector: "ius-elenia-orb", inputs: { size: ["size", "size", numberAttribute], mood: "mood", surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel", "attr.data-state": "mood", "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "style.width.px": "size", "style.height.px": "size", "style.--_orb": "size + 'px'" } }, viewQueries: [{ propertyName: "cubeGroup", first: true, predicate: ["cubeGroup"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"ius-orb__sphere\">\n <span class=\"ius-orb__flow\">\n <span class=\"ius-orb__blob b1\"></span>\n <span class=\"ius-orb__blob b2\"></span>\n <span class=\"ius-orb__blob b3\"></span>\n <span class=\"ius-orb__blob b4\"></span>\n </span>\n <span class=\"ius-orb__cube\">\n <svg viewBox=\"-1.6 -1.6 3.2 3.2\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n <g class=\"cube-g\" #cubeGroup></g>\n </svg>\n </span>\n <span class=\"ius-orb__spec\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-grid;place-items:center;isolation:isolate;line-height:0;--_c1: var(--ius-primary-500);--_c2: var(--ius-info-500);--_c3: var(--ius-primary-400);--_c4: var(--ius-info-300);--_halo: var(--ius-primary-400);--_edge: var(--ius-primary-100);--_cube-glow: rgba(150, 230, 255, .95)}:host:after{content:\"\";position:absolute;inset:-18%;border-radius:50%;z-index:-1;background:radial-gradient(circle at 50% 50%,var(--_halo) 0%,transparent 60%);opacity:.55;filter:blur(calc(var(--_orb) * .12));animation:ius-orb-halo 5.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__sphere{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 120%,var(--ius-primary-700) 0%,var(--ius-primary-900) 70%);box-shadow:inset 0 calc(var(--_orb) * .04) calc(var(--_orb) * .12) #ffffff2e,inset 0 calc(var(--_orb) * -.05) calc(var(--_orb) * .14) #0000008c;animation:ius-orb-breathe-soft 6s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__flow{position:absolute;inset:0;animation:ius-orb-swirl 24s linear infinite;will-change:transform}.ius-orb__blob{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(calc(var(--_orb) * .08));will-change:transform}.ius-orb__blob.b1{width:90%;height:90%;left:-6%;top:-4%;background:radial-gradient(circle,var(--_c1) 0%,transparent 66%);animation:ius-orb-f1 7s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__blob.b2{width:80%;height:80%;right:-8%;top:6%;background:radial-gradient(circle,var(--_c2) 0%,transparent 64%);animation:ius-orb-f2 8.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__blob.b3{width:76%;height:76%;left:4%;bottom:-10%;background:radial-gradient(circle,var(--_c3) 0%,transparent 62%);animation:ius-orb-f3 9.5s var(--ius-ease-ambient, ease-in-out) infinite;opacity:.8}.ius-orb__blob.b4{width:60%;height:60%;right:2%;bottom:0%;background:radial-gradient(circle,var(--_c4) 0%,transparent 66%);animation:ius-orb-f1 6.5s var(--ius-ease-ambient, ease-in-out) infinite reverse}.ius-orb__cube{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:transform;filter:drop-shadow(0 0 calc(var(--_orb) * .045) var(--_cube-glow)) drop-shadow(0 0 calc(var(--_orb) * .015) rgba(255,255,255,.8));animation:ius-orb-cube-float 5.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__cube svg{width:100%;height:100%;overflow:visible}.ius-orb__cube ::ng-deep .cube-edge{fill:none;stroke:var(--_edge);stroke-width:.26;stroke-linecap:round;stroke-linejoin:round}.ius-orb__spec{position:absolute;left:20%;top:12%;width:40%;height:34%;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.85) 0%,transparent 68%);opacity:.5;filter:blur(calc(var(--_orb) * .015))}:host([data-state=alert]){--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200);--_halo: var(--ius-primary-400);--_edge: var(--ius-primary-100);--_cube-glow: rgba(150, 235, 255, .98)}:host([data-state=alert]):after{animation:ius-orb-beacon 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-state=alert]) .ius-orb__sphere{animation:ius-orb-beacon-breathe 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-state=alert]) .ius-orb__flow{animation:ius-orb-swirl 24s linear infinite,ius-orb-beacon-glow 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-surface=dark]) .ius-orb__flow{filter:brightness(1.12)}:host([data-state=off]):after{opacity:.3;animation:none}:host([data-state=off]) .ius-orb__sphere{animation:none;background:radial-gradient(circle at 50% 120%,var(--ius-neutral-7) 0%,var(--ius-neutral-10) 62%,var(--ius-neutral-black) 82%);filter:brightness(.98) saturate(.6)}:host([data-state=off]) .ius-orb__flow{animation:none;filter:grayscale(.15) brightness(.9);opacity:.72}:host([data-state=off]) .ius-orb__blob{animation:none}:host([data-state=off]) .ius-orb__cube{animation:none;opacity:.82;filter:drop-shadow(0 0 calc(var(--_orb) * .032) rgba(150,205,235,.7))}:host([data-state=off]) ::ng-deep .cube-edge{stroke:var(--ius-neutral-4);stroke-width:.22}:host([data-state=off]) .ius-orb__spec{opacity:.38}:host([data-state=speaking]){--_cube-glow: rgba(150, 230, 255, .95)}:host([data-state=speaking]) .ius-orb__cube{filter:drop-shadow(0 0 calc(var(--_orb) * (.045 + .02 * var(--_voice, 0))) var(--_cube-glow)) drop-shadow(0 0 calc(var(--_orb) * .015) rgba(255,255,255,.8))}:host([data-state=speaking]) .ius-orb__cube svg{transform:scale(calc(1 + .028 * var(--_voice, 0)));transform-origin:50% 50%}:host([data-state=speaking]) ::ng-deep .cube-edge{stroke-width:calc(.22 + .04 * var(--_voice, 0))}@keyframes ius-orb-f1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(16%,12%) scale(1.18)}66%{transform:translate(-8%,18%) scale(.9)}}@keyframes ius-orb-f2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-14%,10%) scale(.92)}66%{transform:translate(10%,-12%) scale(1.2)}}@keyframes ius-orb-f3{0%,to{transform:translate(0) scale(1)}33%{transform:translate(12%,-14%) scale(1.15)}66%{transform:translate(-12%,-4%) scale(.95)}}@keyframes ius-orb-swirl{to{transform:rotate(360deg)}}@keyframes ius-orb-breathe-soft{0%,to{transform:scale(.985)}50%{transform:scale(1.05)}}@keyframes ius-orb-halo{0%,to{opacity:.4;transform:scale(.96)}50%{opacity:.65;transform:scale(1.06)}}@keyframes ius-orb-cube-float{0%,to{transform:translate(-50%,-52%)}50%{transform:translate(-50%,-48%)}}@keyframes ius-orb-beacon{0%,to{opacity:.32;transform:scale(.9)}50%{opacity:.95;transform:scale(1.2)}}@keyframes ius-orb-beacon-glow{0%,to{filter:saturate(1.12) brightness(1.06)}50%{filter:saturate(1.5) brightness(1.55)}}@keyframes ius-orb-beacon-breathe{0%,to{transform:scale(.99)}50%{transform:scale(1.06)}}:host([data-state=thinking]) .ius-orb__blob.b1{animation-duration:2.4s}:host([data-state=thinking]) .ius-orb__blob.b2{animation-duration:2.8s}:host([data-state=thinking]) .ius-orb__blob.b3{animation-duration:3.1s}:host([data-state=thinking]) .ius-orb__blob.b4{animation-duration:2.2s}:host([data-state=thinking]) .ius-orb__sphere{animation-duration:2.6s}:host([data-state=thinking]):after{animation-duration:2.6s}:host([data-paused=true]) .ius-orb__sphere,:host([data-paused=true]) .ius-orb__flow,:host([data-paused=true]) .ius-orb__blob,:host([data-paused=true]) .ius-orb__cube,:host([data-paused=true]):after{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){:host:after,.ius-orb__sphere,.ius-orb__flow,.ius-orb__blob,.ius-orb__cube{animation:none!important}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
535
535
|
}
|
|
536
536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EleniaOrbComponent, decorators: [{
|
|
537
537
|
type: Component,
|
|
@@ -544,7 +544,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
544
544
|
'[style.width.px]': 'size',
|
|
545
545
|
'[style.height.px]': 'size',
|
|
546
546
|
'[style.--_orb]': "size + 'px'",
|
|
547
|
-
}, template: "<span class=\"ius-orb__sphere\">\
|
|
547
|
+
}, template: "<span class=\"ius-orb__sphere\">\n <span class=\"ius-orb__flow\">\n <span class=\"ius-orb__blob b1\"></span>\n <span class=\"ius-orb__blob b2\"></span>\n <span class=\"ius-orb__blob b3\"></span>\n <span class=\"ius-orb__blob b4\"></span>\n </span>\n <span class=\"ius-orb__cube\">\n <svg viewBox=\"-1.6 -1.6 3.2 3.2\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\n <g class=\"cube-g\" #cubeGroup></g>\n </svg>\n </span>\n <span class=\"ius-orb__spec\"></span>\n</span>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-grid;place-items:center;isolation:isolate;line-height:0;--_c1: var(--ius-primary-500);--_c2: var(--ius-info-500);--_c3: var(--ius-primary-400);--_c4: var(--ius-info-300);--_halo: var(--ius-primary-400);--_edge: var(--ius-primary-100);--_cube-glow: rgba(150, 230, 255, .95)}:host:after{content:\"\";position:absolute;inset:-18%;border-radius:50%;z-index:-1;background:radial-gradient(circle at 50% 50%,var(--_halo) 0%,transparent 60%);opacity:.55;filter:blur(calc(var(--_orb) * .12));animation:ius-orb-halo 5.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__sphere{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 120%,var(--ius-primary-700) 0%,var(--ius-primary-900) 70%);box-shadow:inset 0 calc(var(--_orb) * .04) calc(var(--_orb) * .12) #ffffff2e,inset 0 calc(var(--_orb) * -.05) calc(var(--_orb) * .14) #0000008c;animation:ius-orb-breathe-soft 6s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__flow{position:absolute;inset:0;animation:ius-orb-swirl 24s linear infinite;will-change:transform}.ius-orb__blob{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(calc(var(--_orb) * .08));will-change:transform}.ius-orb__blob.b1{width:90%;height:90%;left:-6%;top:-4%;background:radial-gradient(circle,var(--_c1) 0%,transparent 66%);animation:ius-orb-f1 7s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__blob.b2{width:80%;height:80%;right:-8%;top:6%;background:radial-gradient(circle,var(--_c2) 0%,transparent 64%);animation:ius-orb-f2 8.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__blob.b3{width:76%;height:76%;left:4%;bottom:-10%;background:radial-gradient(circle,var(--_c3) 0%,transparent 62%);animation:ius-orb-f3 9.5s var(--ius-ease-ambient, ease-in-out) infinite;opacity:.8}.ius-orb__blob.b4{width:60%;height:60%;right:2%;bottom:0%;background:radial-gradient(circle,var(--_c4) 0%,transparent 66%);animation:ius-orb-f1 6.5s var(--ius-ease-ambient, ease-in-out) infinite reverse}.ius-orb__cube{position:absolute;left:50%;top:50%;width:70%;height:70%;transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:transform;filter:drop-shadow(0 0 calc(var(--_orb) * .045) var(--_cube-glow)) drop-shadow(0 0 calc(var(--_orb) * .015) rgba(255,255,255,.8));animation:ius-orb-cube-float 5.5s var(--ius-ease-ambient, ease-in-out) infinite}.ius-orb__cube svg{width:100%;height:100%;overflow:visible}.ius-orb__cube ::ng-deep .cube-edge{fill:none;stroke:var(--_edge);stroke-width:.26;stroke-linecap:round;stroke-linejoin:round}.ius-orb__spec{position:absolute;left:20%;top:12%;width:40%;height:34%;border-radius:50%;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.85) 0%,transparent 68%);opacity:.5;filter:blur(calc(var(--_orb) * .015))}:host([data-state=alert]){--_c1: var(--ius-primary-400);--_c2: var(--ius-info-400);--_c3: var(--ius-primary-300);--_c4: var(--ius-primary-200);--_halo: var(--ius-primary-400);--_edge: var(--ius-primary-100);--_cube-glow: rgba(150, 235, 255, .98)}:host([data-state=alert]):after{animation:ius-orb-beacon 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-state=alert]) .ius-orb__sphere{animation:ius-orb-beacon-breathe 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-state=alert]) .ius-orb__flow{animation:ius-orb-swirl 24s linear infinite,ius-orb-beacon-glow 1.8s var(--ius-ease-ambient, ease-in-out) infinite}:host([data-surface=dark]) .ius-orb__flow{filter:brightness(1.12)}:host([data-state=off]):after{opacity:.3;animation:none}:host([data-state=off]) .ius-orb__sphere{animation:none;background:radial-gradient(circle at 50% 120%,var(--ius-neutral-7) 0%,var(--ius-neutral-10) 62%,var(--ius-neutral-black) 82%);filter:brightness(.98) saturate(.6)}:host([data-state=off]) .ius-orb__flow{animation:none;filter:grayscale(.15) brightness(.9);opacity:.72}:host([data-state=off]) .ius-orb__blob{animation:none}:host([data-state=off]) .ius-orb__cube{animation:none;opacity:.82;filter:drop-shadow(0 0 calc(var(--_orb) * .032) rgba(150,205,235,.7))}:host([data-state=off]) ::ng-deep .cube-edge{stroke:var(--ius-neutral-4);stroke-width:.22}:host([data-state=off]) .ius-orb__spec{opacity:.38}:host([data-state=speaking]){--_cube-glow: rgba(150, 230, 255, .95)}:host([data-state=speaking]) .ius-orb__cube{filter:drop-shadow(0 0 calc(var(--_orb) * (.045 + .02 * var(--_voice, 0))) var(--_cube-glow)) drop-shadow(0 0 calc(var(--_orb) * .015) rgba(255,255,255,.8))}:host([data-state=speaking]) .ius-orb__cube svg{transform:scale(calc(1 + .028 * var(--_voice, 0)));transform-origin:50% 50%}:host([data-state=speaking]) ::ng-deep .cube-edge{stroke-width:calc(.22 + .04 * var(--_voice, 0))}@keyframes ius-orb-f1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(16%,12%) scale(1.18)}66%{transform:translate(-8%,18%) scale(.9)}}@keyframes ius-orb-f2{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-14%,10%) scale(.92)}66%{transform:translate(10%,-12%) scale(1.2)}}@keyframes ius-orb-f3{0%,to{transform:translate(0) scale(1)}33%{transform:translate(12%,-14%) scale(1.15)}66%{transform:translate(-12%,-4%) scale(.95)}}@keyframes ius-orb-swirl{to{transform:rotate(360deg)}}@keyframes ius-orb-breathe-soft{0%,to{transform:scale(.985)}50%{transform:scale(1.05)}}@keyframes ius-orb-halo{0%,to{opacity:.4;transform:scale(.96)}50%{opacity:.65;transform:scale(1.06)}}@keyframes ius-orb-cube-float{0%,to{transform:translate(-50%,-52%)}50%{transform:translate(-50%,-48%)}}@keyframes ius-orb-beacon{0%,to{opacity:.32;transform:scale(.9)}50%{opacity:.95;transform:scale(1.2)}}@keyframes ius-orb-beacon-glow{0%,to{filter:saturate(1.12) brightness(1.06)}50%{filter:saturate(1.5) brightness(1.55)}}@keyframes ius-orb-beacon-breathe{0%,to{transform:scale(.99)}50%{transform:scale(1.06)}}:host([data-state=thinking]) .ius-orb__blob.b1{animation-duration:2.4s}:host([data-state=thinking]) .ius-orb__blob.b2{animation-duration:2.8s}:host([data-state=thinking]) .ius-orb__blob.b3{animation-duration:3.1s}:host([data-state=thinking]) .ius-orb__blob.b4{animation-duration:2.2s}:host([data-state=thinking]) .ius-orb__sphere{animation-duration:2.6s}:host([data-state=thinking]):after{animation-duration:2.6s}:host([data-paused=true]) .ius-orb__sphere,:host([data-paused=true]) .ius-orb__flow,:host([data-paused=true]) .ius-orb__blob,:host([data-paused=true]) .ius-orb__cube,:host([data-paused=true]):after{animation-play-state:paused!important}@media(prefers-reduced-motion:reduce){:host:after,.ius-orb__sphere,.ius-orb__flow,.ius-orb__blob,.ius-orb__cube{animation:none!important}}\n"] }]
|
|
548
548
|
}], propDecorators: { size: [{
|
|
549
549
|
type: Input,
|
|
550
550
|
args: [{ transform: numberAttribute }]
|
|
@@ -699,7 +699,7 @@ class OauthButtonComponent {
|
|
|
699
699
|
return this.ariaLabel ?? `Continuar con ${this.text}`;
|
|
700
700
|
}
|
|
701
701
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OauthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
702
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OauthButtonComponent, isStandalone: true, selector: "ius-oauth-button", inputs: { provider: "provider", label: "label", size: "size", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-provider": "provider", "attr.data-size": "size", "attr.data-disabled": "disabled || null" } }, ngImport: i0, template: "<ius-button\
|
|
702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OauthButtonComponent, isStandalone: true, selector: "ius-oauth-button", inputs: { provider: "provider", label: "label", size: "size", fullWidth: ["fullWidth", "fullWidth", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], type: "type", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "attr.data-provider": "provider", "attr.data-size": "size", "attr.data-disabled": "disabled || null" } }, ngImport: i0, template: "<ius-button\n variant=\"secondary\"\n [size]=\"size\"\n [fullWidth]=\"fullWidth\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [ariaLabel]=\"effectiveAriaLabel\"\n (clicked)=\"clicked.emit($event)\"\n>\n <span class=\"ius-oauth__content\">\n <span class=\"ius-oauth__logo\" aria-hidden=\"true\">\n <!-- Logos de marca oficiales (multicolor) \u2014 excepci\u00F3n documentada:\n no tokenizar ni recolorear (ng-spec \u00A75). Paths verbatim del golden. -->\n @switch (provider) {\n @case ('microsoft') {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z\" fill=\"#F35325\" />\n <path d=\"M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z\" fill=\"#81BC06\" />\n <path d=\"M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z\" fill=\"#05A6F0\" />\n <path d=\"M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z\" fill=\"#FFBA08\" />\n </svg>\n }\n @case ('linkedin') {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z\" fill=\"#007EBB\" />\n <path d=\"M17.2222 17.2223H14.2543V12.1673C14.2543 10.7814 13.7277 10.0069 12.6307 10.0069C11.4374 10.0069 10.8139 10.8129 10.8139 12.1673V17.2223H7.9537V7.59265H10.8139V8.88976C10.8139 8.88976 11.6739 7.29845 13.7174 7.29845C15.7599 7.29845 17.2222 8.54574 17.2222 11.1254V17.2223ZM4.54148 6.33172C3.56723 6.33172 2.77777 5.53607 2.77777 4.55478C2.77777 3.57349 3.56723 2.77783 4.54148 2.77783C5.51573 2.77783 6.30472 3.57349 6.30472 4.55478C6.30472 5.53607 5.51573 6.33172 4.54148 6.33172ZM3.06459 17.2223H6.04705V7.59265H3.06459V17.2223Z\" fill=\"#FFFFFF\" />\n </svg>\n }\n @default {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z\" fill=\"#4285F4\" />\n <path d=\"M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z\" fill=\"#34A853\" />\n <path d=\"M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z\" fill=\"#FBBC05\" />\n <path d=\"M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z\" fill=\"#EA4335\" />\n </svg>\n }\n }\n </span>\n <span class=\"ius-oauth__label\">{{ text }}</span>\n </span>\n</ius-button>\n", styles: ["@charset \"UTF-8\";:host{display:contents;--_oa-logo: 20px}:host([data-size=small]){--_oa-logo: 18px}:host([data-size=large]){--_oa-logo: 22px}.ius-oauth__content{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-oauth__logo{display:inline-flex;flex:0 0 auto}.ius-oauth__logo svg{display:block;width:var(--_oa-logo);height:var(--_oa-logo)}:host([data-disabled=true]) .ius-oauth__logo{filter:grayscale(1);opacity:.45}:host ::ng-deep .ius-btn[data-variant]{--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-neutral-5);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-text-primary)}:host([data-force=hover]) ::ng-deep .ius-btn[data-variant]:not(:disabled){background:var(--ius-neutral-4);color:var(--ius-text-primary)}:host([data-force=pressed]) ::ng-deep .ius-btn[data-variant]:not(:disabled){background:var(--ius-neutral-5);color:var(--ius-text-primary)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
703
703
|
}
|
|
704
704
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OauthButtonComponent, decorators: [{
|
|
705
705
|
type: Component,
|
|
@@ -707,7 +707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
707
707
|
'[attr.data-provider]': 'provider',
|
|
708
708
|
'[attr.data-size]': 'size',
|
|
709
709
|
'[attr.data-disabled]': 'disabled || null',
|
|
710
|
-
}, template: "<ius-button\
|
|
710
|
+
}, template: "<ius-button\n variant=\"secondary\"\n [size]=\"size\"\n [fullWidth]=\"fullWidth\"\n [disabled]=\"disabled\"\n [type]=\"type\"\n [ariaLabel]=\"effectiveAriaLabel\"\n (clicked)=\"clicked.emit($event)\"\n>\n <span class=\"ius-oauth__content\">\n <span class=\"ius-oauth__logo\" aria-hidden=\"true\">\n <!-- Logos de marca oficiales (multicolor) \u2014 excepci\u00F3n documentada:\n no tokenizar ni recolorear (ng-spec \u00A75). Paths verbatim del golden. -->\n @switch (provider) {\n @case ('microsoft') {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z\" fill=\"#F35325\" />\n <path d=\"M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z\" fill=\"#81BC06\" />\n <path d=\"M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z\" fill=\"#05A6F0\" />\n <path d=\"M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z\" fill=\"#FFBA08\" />\n </svg>\n }\n @case ('linkedin') {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M2.22222 20H17.7778C19.0051 20 20 19.0051 20 17.7778V2.22222C20 0.994923 19.0051 0 17.7778 0H2.22222C0.994923 0 0 0.994923 0 2.22222V17.7778C0 19.0051 0.994923 20 2.22222 20Z\" fill=\"#007EBB\" />\n <path d=\"M17.2222 17.2223H14.2543V12.1673C14.2543 10.7814 13.7277 10.0069 12.6307 10.0069C11.4374 10.0069 10.8139 10.8129 10.8139 12.1673V17.2223H7.9537V7.59265H10.8139V8.88976C10.8139 8.88976 11.6739 7.29845 13.7174 7.29845C15.7599 7.29845 17.2222 8.54574 17.2222 11.1254V17.2223ZM4.54148 6.33172C3.56723 6.33172 2.77777 5.53607 2.77777 4.55478C2.77777 3.57349 3.56723 2.77783 4.54148 2.77783C5.51573 2.77783 6.30472 3.57349 6.30472 4.55478C6.30472 5.53607 5.51573 6.33172 4.54148 6.33172ZM3.06459 17.2223H6.04705V7.59265H3.06459V17.2223Z\" fill=\"#FFFFFF\" />\n </svg>\n }\n @default {\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\n <path d=\"M18.8 10.2084C18.8 9.55837 18.7417 8.93337 18.6333 8.33337H10V11.8834H14.9333C14.7167 13.025 14.0667 13.9917 13.0917 14.6417V16.95H16.0667C17.8 15.35 18.8 13 18.8 10.2084Z\" fill=\"#4285F4\" />\n <path d=\"M10 19.1667C12.475 19.1667 14.55 18.35 16.0667 16.95L13.0917 14.6417C12.275 15.1917 11.2333 15.525 10 15.525C7.61668 15.525 5.59168 13.9167 4.86668 11.75H1.81668V14.1167C3.32501 17.1083 6.41668 19.1667 10 19.1667Z\" fill=\"#34A853\" />\n <path d=\"M4.86668 11.7417C4.68334 11.1917 4.57501 10.6084 4.57501 10.0001C4.57501 9.39172 4.68334 8.80839 4.86668 8.25839V5.89172H1.81668C1.19168 7.12506 0.833344 8.51672 0.833344 10.0001C0.833344 11.4834 1.19168 12.8751 1.81668 14.1084L4.19168 12.2584L4.86668 11.7417Z\" fill=\"#FBBC05\" />\n <path d=\"M10 4.48337C11.35 4.48337 12.55 4.95004 13.5083 5.85004L16.1333 3.22504C14.5417 1.74171 12.475 0.833374 10 0.833374C6.41668 0.833374 3.32501 2.89171 1.81668 5.89171L4.86668 8.25837C5.59168 6.09171 7.61668 4.48337 10 4.48337Z\" fill=\"#EA4335\" />\n </svg>\n }\n }\n </span>\n <span class=\"ius-oauth__label\">{{ text }}</span>\n </span>\n</ius-button>\n", styles: ["@charset \"UTF-8\";:host{display:contents;--_oa-logo: 20px}:host([data-size=small]){--_oa-logo: 18px}:host([data-size=large]){--_oa-logo: 22px}.ius-oauth__content{display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-oauth__logo{display:inline-flex;flex:0 0 auto}.ius-oauth__logo svg{display:block;width:var(--_oa-logo);height:var(--_oa-logo)}:host([data-disabled=true]) .ius-oauth__logo{filter:grayscale(1);opacity:.45}:host ::ng-deep .ius-btn[data-variant]{--_btn-bg-hover: var(--ius-neutral-4);--_btn-bg-pressed: var(--ius-neutral-5);--_btn-fg-hover: var(--ius-text-primary);--_btn-fg-pressed: var(--ius-text-primary)}:host([data-force=hover]) ::ng-deep .ius-btn[data-variant]:not(:disabled){background:var(--ius-neutral-4);color:var(--ius-text-primary)}:host([data-force=pressed]) ::ng-deep .ius-btn[data-variant]:not(:disabled){background:var(--ius-neutral-5);color:var(--ius-text-primary)}\n"] }]
|
|
711
711
|
}], propDecorators: { provider: [{
|
|
712
712
|
type: Input,
|
|
713
713
|
args: [{ required: true }]
|
|
@@ -1027,7 +1027,7 @@ class PopoverComponent {
|
|
|
1027
1027
|
}
|
|
1028
1028
|
}
|
|
1029
1029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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. -->\
|
|
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. -->\n<ng-content />\n\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\n<ng-template #panelTpl>\n <div\n class=\"ius-popover\"\n [class]=\"panelClass ?? ''\"\n role=\"tooltip\"\n [attr.data-side]=\"side()\"\n [attr.data-padding]=\"padding\"\n >\n @if (title != null) {\n <div class=\"ius-popover__title\">{{ title }}</div>\n }\n <div class=\"ius-popover__content\">\n @if (content != null) {\n {{ content }}\n } @else {\n <ng-content select=\"[iusPopoverContent]\" />\n }\n </div>\n @if (showArrow) {\n <span\n class=\"ius-popover__arrow\"\n [style.left]=\"arrowLeft()\"\n [style.top]=\"arrowTop()\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n</ng-template>\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)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1031
1031
|
}
|
|
1032
1032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
1033
1033
|
type: Component,
|
|
@@ -1037,7 +1037,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1037
1037
|
'(focusin)': 'onHostFocusIn()',
|
|
1038
1038
|
'(focusout)': 'onHostFocusOut()',
|
|
1039
1039
|
'(click)': 'onHostClick()',
|
|
1040
|
-
}, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\
|
|
1040
|
+
}, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\n<ng-content />\n\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\n<ng-template #panelTpl>\n <div\n class=\"ius-popover\"\n [class]=\"panelClass ?? ''\"\n role=\"tooltip\"\n [attr.data-side]=\"side()\"\n [attr.data-padding]=\"padding\"\n >\n @if (title != null) {\n <div class=\"ius-popover__title\">{{ title }}</div>\n }\n <div class=\"ius-popover__content\">\n @if (content != null) {\n {{ content }}\n } @else {\n <ng-content select=\"[iusPopoverContent]\" />\n }\n </div>\n @if (showArrow) {\n <span\n class=\"ius-popover__arrow\"\n [style.left]=\"arrowLeft()\"\n [style.top]=\"arrowTop()\"\n aria-hidden=\"true\"\n ></span>\n }\n </div>\n</ng-template>\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)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}\n"] }]
|
|
1041
1041
|
}], propDecorators: { title: [{
|
|
1042
1042
|
type: Input
|
|
1043
1043
|
}], content: [{
|
|
@@ -1194,7 +1194,7 @@ class ShowMoreComponent {
|
|
|
1194
1194
|
return this.expanded && !this.collapsible;
|
|
1195
1195
|
}
|
|
1196
1196
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShowMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1197
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShowMoreComponent, isStandalone: true, selector: "ius-show-more", inputs: { expanded: ["expanded", "expanded", booleanAttribute], remaining: "remaining", moreLabel: "moreLabel", lessLabel: "lessLabel", collapsible: ["collapsible", "collapsible", booleanAttribute], size: "size", align: "align", ariaControls: "ariaControls" }, outputs: { toggle: "toggle" }, host: { properties: { "attr.data-align": "align !== 'center' ? align : null", "style.display": "hidden ? 'none' : ''", "attr.aria-hidden": "hidden || null" } }, ngImport: i0, template: "@if (!hidden) {\
|
|
1197
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ShowMoreComponent, isStandalone: true, selector: "ius-show-more", inputs: { expanded: ["expanded", "expanded", booleanAttribute], remaining: "remaining", moreLabel: "moreLabel", lessLabel: "lessLabel", collapsible: ["collapsible", "collapsible", booleanAttribute], size: "size", align: "align", ariaControls: "ariaControls" }, outputs: { toggle: "toggle" }, host: { properties: { "attr.data-align": "align !== 'center' ? align : null", "style.display": "hidden ? 'none' : ''", "attr.aria-hidden": "hidden || null" } }, ngImport: i0, template: "@if (!hidden) {\n <ius-text-button\n [size]=\"size\"\n [label]=\"label\"\n [sufixIcon]=\"expanded ? 'expand_less' : 'expand_more'\"\n [ariaExpanded]=\"expanded\"\n [ariaControls]=\"ariaControls\"\n (clicked)=\"toggle.emit($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;justify-content:var(--_sm-justify, center);padding:var(--ius-space-xs) 0}:host([data-align=start]){--_sm-justify: flex-start}:host([data-align=end]){--_sm-justify: flex-end}:host([data-align=block]){--_sm-justify: stretch}:host([data-align=block]) ::ng-deep .ius-txtbtn{width:100%;justify-content:center}\n"], dependencies: [{ kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1198
1198
|
}
|
|
1199
1199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShowMoreComponent, decorators: [{
|
|
1200
1200
|
type: Component,
|
|
@@ -1202,7 +1202,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1202
1202
|
'[attr.data-align]': "align !== 'center' ? align : null",
|
|
1203
1203
|
'[style.display]': "hidden ? 'none' : ''",
|
|
1204
1204
|
'[attr.aria-hidden]': 'hidden || null',
|
|
1205
|
-
}, template: "@if (!hidden) {\
|
|
1205
|
+
}, template: "@if (!hidden) {\n <ius-text-button\n [size]=\"size\"\n [label]=\"label\"\n [sufixIcon]=\"expanded ? 'expand_less' : 'expand_more'\"\n [ariaExpanded]=\"expanded\"\n [ariaControls]=\"ariaControls\"\n (clicked)=\"toggle.emit($event)\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;justify-content:var(--_sm-justify, center);padding:var(--ius-space-xs) 0}:host([data-align=start]){--_sm-justify: flex-start}:host([data-align=end]){--_sm-justify: flex-end}:host([data-align=block]){--_sm-justify: stretch}:host([data-align=block]) ::ng-deep .ius-txtbtn{width:100%;justify-content:center}\n"] }]
|
|
1206
1206
|
}], propDecorators: { expanded: [{
|
|
1207
1207
|
type: Input,
|
|
1208
1208
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1260,11 +1260,11 @@ class TooltipComponent {
|
|
|
1260
1260
|
return this.disabled || !this.label;
|
|
1261
1261
|
}
|
|
1262
1262
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1263
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: TooltipComponent, isStandalone: true, selector: "ius-tooltip", inputs: { label: "label", placement: "placement", trigger: "trigger", offset: ["offset", "offset", numberAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute] }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<ius-popover\
|
|
1263
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: TooltipComponent, isStandalone: true, selector: "ius-tooltip", inputs: { label: "label", placement: "placement", trigger: "trigger", offset: ["offset", "offset", numberAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute] }, outputs: { openChange: "openChange" }, ngImport: i0, template: "<ius-popover\n panelClass=\"ius-tooltip\"\n [content]=\"label\"\n [placement]=\"placement\"\n [trigger]=\"trigger\"\n [offset]=\"offset\"\n [showArrow]=\"showArrow\"\n [disabled]=\"effectiveDisabled\"\n [open]=\"open\"\n [defaultOpen]=\"defaultOpen\"\n (openChange)=\"openChange.emit($event)\"\n>\n <ng-content />\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}\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 }); }
|
|
1264
1264
|
}
|
|
1265
1265
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1266
1266
|
type: Component,
|
|
1267
|
-
args: [{ selector: 'ius-tooltip', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-popover\
|
|
1267
|
+
args: [{ selector: 'ius-tooltip', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-popover\n panelClass=\"ius-tooltip\"\n [content]=\"label\"\n [placement]=\"placement\"\n [trigger]=\"trigger\"\n [offset]=\"offset\"\n [showArrow]=\"showArrow\"\n [disabled]=\"effectiveDisabled\"\n [open]=\"open\"\n [defaultOpen]=\"defaultOpen\"\n (openChange)=\"openChange.emit($event)\"\n>\n <ng-content />\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}\n"] }]
|
|
1268
1268
|
}], propDecorators: { label: [{
|
|
1269
1269
|
type: Input
|
|
1270
1270
|
}], placement: [{
|
|
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1289
1289
|
type: Output
|
|
1290
1290
|
}] } });
|
|
1291
1291
|
|
|
1292
|
-
let uid$
|
|
1292
|
+
let uid$i = 0;
|
|
1293
1293
|
/**
|
|
1294
1294
|
* TextField — Ius Design v2.
|
|
1295
1295
|
*
|
|
@@ -1328,7 +1328,7 @@ class TextFieldComponent {
|
|
|
1328
1328
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1329
1329
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1330
1330
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1331
|
-
this.inputId = `ius-tf-${uid$
|
|
1331
|
+
this.inputId = `ius-tf-${uid$i++}`;
|
|
1332
1332
|
this.helpId = `${this.inputId}-help`;
|
|
1333
1333
|
this.onChange = () => { };
|
|
1334
1334
|
this.onTouched = () => { };
|
|
@@ -1469,7 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1469
1469
|
type: Output
|
|
1470
1470
|
}] } });
|
|
1471
1471
|
|
|
1472
|
-
let uid$
|
|
1472
|
+
let uid$h = 0;
|
|
1473
1473
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1474
1474
|
function toChars(str, length) {
|
|
1475
1475
|
const out = new Array(length).fill('');
|
|
@@ -1529,7 +1529,7 @@ class CodeFieldComponent {
|
|
|
1529
1529
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1530
1530
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1531
1531
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1532
|
-
this.baseId = `ius-cf-${uid$
|
|
1532
|
+
this.baseId = `ius-cf-${uid$h++}`;
|
|
1533
1533
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1534
1534
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1535
1535
|
this.onChange = () => { };
|
|
@@ -1931,7 +1931,7 @@ class CountdownRingComponent {
|
|
|
1931
1931
|
inject(DestroyRef).onDestroy(() => this.clock.destroy());
|
|
1932
1932
|
}
|
|
1933
1933
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CountdownRingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1934
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CountdownRingComponent, isStandalone: true, selector: "ius-countdown-ring", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "img" }, properties: { "attr.data-size": "size()", "attr.data-eased": "isControlled() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cdr-arc": "toneVars().arc", "style.--_cdr-trk": "toneVars().trk", "style.width.px": "dim().d", "style.height.px": "dim().d" }, classAttribute: "ius-cdring" }, ngImport: i0, template: "<svg\n class=\"ius-cdring__svg\"\n [attr.width]=\"dim().d\"\n [attr.height]=\"dim().d\"\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\n>\n <circle\n class=\"ius-cdring__trk\"\n [attr.cx]=\"dim().d / 2\"\n [attr.cy]=\"dim().d / 2\"\n [attr.r]=\"ringR()\"\n [attr.stroke-width]=\"dim().s\"\n pathLength=\"100\"\n />\n @if (arcLen() > 0) {\n <circle\n class=\"ius-cdring__arc\"\n [attr.cx]=\"dim().d / 2\"\n [attr.cy]=\"dim().d / 2\"\n [attr.r]=\"ringR()\"\n [attr.stroke-width]=\"dim().s\"\n pathLength=\"100\"\n [style.stroke-dasharray]=\"dashArray()\"\n />\n }\n</svg>\n\n<span class=\"ius-cdring__center\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__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);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1934
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CountdownRingComponent, isStandalone: true, selector: "ius-countdown-ring", inputs: { progress: { classPropertyName: "progress", publicName: "progress", isSignal: true, isRequired: false, transformFunction: null }, seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, inverse: { classPropertyName: "inverse", publicName: "inverse", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "img" }, properties: { "attr.data-size": "size()", "attr.data-eased": "isControlled() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cdr-arc": "toneVars().arc", "style.--_cdr-trk": "toneVars().trk", "style.width.px": "dim().d", "style.height.px": "dim().d" }, classAttribute: "ius-cdring" }, ngImport: i0, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__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);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1935
1935
|
}
|
|
1936
1936
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CountdownRingComponent, decorators: [{
|
|
1937
1937
|
type: Component,
|
|
@@ -1945,7 +1945,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1945
1945
|
'[style.--_cdr-trk]': 'toneVars().trk',
|
|
1946
1946
|
'[style.width.px]': 'dim().d',
|
|
1947
1947
|
'[style.height.px]': 'dim().d',
|
|
1948
|
-
}, template: "<svg\n class=\"ius-cdring__svg\"\n [attr.width]=\"dim().d\"\n [attr.height]=\"dim().d\"\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\n>\n <circle\n class=\"ius-cdring__trk\"\n [attr.cx]=\"dim().d / 2\"\n [attr.cy]=\"dim().d / 2\"\n [attr.r]=\"ringR()\"\n [attr.stroke-width]=\"dim().s\"\n pathLength=\"100\"\n />\n @if (arcLen() > 0) {\n <circle\n class=\"ius-cdring__arc\"\n [attr.cx]=\"dim().d / 2\"\n [attr.cy]=\"dim().d / 2\"\n [attr.r]=\"ringR()\"\n [attr.stroke-width]=\"dim().s\"\n pathLength=\"100\"\n [style.stroke-dasharray]=\"dashArray()\"\n />\n }\n</svg>\n\n<span class=\"ius-cdring__center\"><ng-content /></span>\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__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);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"] }]
|
|
1948
|
+
}, template: "<svg\r\n class=\"ius-cdring__svg\"\r\n [attr.width]=\"dim().d\"\r\n [attr.height]=\"dim().d\"\r\n [attr.viewBox]=\"'0 0 ' + dim().d + ' ' + dim().d\"\r\n>\r\n <circle\r\n class=\"ius-cdring__trk\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n />\r\n @if (arcLen() > 0) {\r\n <circle\r\n class=\"ius-cdring__arc\"\r\n [attr.cx]=\"dim().d / 2\"\r\n [attr.cy]=\"dim().d / 2\"\r\n [attr.r]=\"ringR()\"\r\n [attr.stroke-width]=\"dim().s\"\r\n pathLength=\"100\"\r\n [style.stroke-dasharray]=\"dashArray()\"\r\n />\r\n }\r\n</svg>\r\n\r\n<span class=\"ius-cdring__center\"><ng-content /></span>\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle}.ius-cdring__svg{display:block;transform:rotate(-90deg)}.ius-cdring__svg circle{fill:none}.ius-cdring__trk{stroke:var(--_cdr-trk)}.ius-cdring__arc{stroke:var(--_cdr-arc);stroke-linecap:round}:host([data-eased=true]) .ius-cdring__arc{transition:stroke-dasharray var(--ius-duration-base, .22s) var(--ius-ease-standard)}@media(prefers-reduced-motion:reduce){:host([data-eased=true]) .ius-cdring__arc{transition:none}}.ius-cdring__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);color:var(--ius-text-primary);line-height:1;font-variant-numeric:tabular-nums}:host([data-size=small]) .ius-cdring__center{display:none}:host([data-size=medium]) .ius-cdring__center{font-size:var(--ius-fs-sm)}:host([data-size=large]) .ius-cdring__center{font-size:var(--ius-fs-sm)}\n"] }]
|
|
1949
1949
|
}], ctorParameters: () => [], propDecorators: { progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: false }] }], running: [{ type: i0.Input, args: [{ isSignal: true, alias: "running", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], inverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "inverse", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
1950
1950
|
|
|
1951
1951
|
/** Color del número por tono (espeja el arco del CountdownRing). */
|
|
@@ -2062,7 +2062,7 @@ class CountdownComponent {
|
|
|
2062
2062
|
inject(DestroyRef).onDestroy(() => this.clock.destroy());
|
|
2063
2063
|
}
|
|
2064
2064
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CountdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2065
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CountdownComponent, isStandalone: true, selector: "ius-countdown", inputs: { seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showRing: { classPropertyName: "showRing", publicName: "showRing", isSignal: true, isRequired: false, transformFunction: null }, ringPlacement: { classPropertyName: "ringPlacement", publicName: "ringPlacement", isSignal: true, isRequired: false, transformFunction: null }, ringInverse: { classPropertyName: "ringInverse", publicName: "ringInverse", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "timer", "aria-live": "off" }, properties: { "attr.data-size": "size()", "attr.data-done": "done() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cd-num": "numColor()" }, classAttribute: "ius-countdown" }, ngImport: i0, template: "@if (showRing() && ringPlacement() === 'start') {\n <ius-countdown-ring\n [progress]=\"fraction()\"\n [inverse]=\"ringInv()\"\n [tone]=\"tone()\"\n [size]=\"size()\"\n />\n}\n\n@if (label() != null) {\n <span class=\"ius-countdown__label\">{{ label() }}</span>\n}\n\n<span class=\"ius-countdown__time\">{{ text() }}</span>\n\n@if (showRing() && ringPlacement() === 'end') {\n <ius-countdown-ring\n [progress]=\"fraction()\"\n [inverse]=\"ringInv()\"\n [tone]=\"tone()\"\n [size]=\"size()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);line-height:1;-webkit-user-select:none;user-select:none}.ius-countdown__label{color:var(--ius-text-secondary);font-weight:var(--ius-fw-regular, 400)}.ius-countdown__time{color:var(--_cd-num, var(--ius-primary-900));font-weight:var(--ius-fw-bold, 700);font-variant-numeric:tabular-nums;letter-spacing:-.01em}:host([data-done=true]) .ius-countdown__time{opacity:.55}:host([data-size=small]) .ius-countdown__label{font-size:var(--ius-fs-sm)}:host([data-size=small]) .ius-countdown__time{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__label{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__time{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__label{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__time{font-size:var(--ius-fs-h3)}\n"], dependencies: [{ kind: "component", type: CountdownRingComponent, selector: "ius-countdown-ring", inputs: ["progress", "seconds", "running", "paused", "inverse", "tone", "size", "ariaLabel"], outputs: ["completed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2065
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CountdownComponent, isStandalone: true, selector: "ius-countdown", inputs: { seconds: { classPropertyName: "seconds", publicName: "seconds", isSignal: true, isRequired: true, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, running: { classPropertyName: "running", publicName: "running", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null }, format: { classPropertyName: "format", publicName: "format", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, showRing: { classPropertyName: "showRing", publicName: "showRing", isSignal: true, isRequired: false, transformFunction: null }, ringPlacement: { classPropertyName: "ringPlacement", publicName: "ringPlacement", isSignal: true, isRequired: false, transformFunction: null }, ringInverse: { classPropertyName: "ringInverse", publicName: "ringInverse", 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { completed: "completed" }, host: { attributes: { "role": "timer", "aria-live": "off" }, properties: { "attr.data-size": "size()", "attr.data-done": "done() ? 'true' : null", "attr.aria-label": "ariaLabel() || null", "style.--_cd-num": "numColor()" }, classAttribute: "ius-countdown" }, ngImport: i0, template: "@if (showRing() && ringPlacement() === 'start') {\r\n <ius-countdown-ring\r\n [progress]=\"fraction()\"\r\n [inverse]=\"ringInv()\"\r\n [tone]=\"tone()\"\r\n [size]=\"size()\"\r\n />\r\n}\r\n\r\n@if (label() != null) {\r\n <span class=\"ius-countdown__label\">{{ label() }}</span>\r\n}\r\n\r\n<span class=\"ius-countdown__time\">{{ text() }}</span>\r\n\r\n@if (showRing() && ringPlacement() === 'end') {\r\n <ius-countdown-ring\r\n [progress]=\"fraction()\"\r\n [inverse]=\"ringInv()\"\r\n [tone]=\"tone()\"\r\n [size]=\"size()\"\r\n />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);line-height:1;-webkit-user-select:none;user-select:none}.ius-countdown__label{color:var(--ius-text-secondary);font-weight:var(--ius-fw-regular, 400)}.ius-countdown__time{color:var(--_cd-num, var(--ius-primary-900));font-weight:var(--ius-fw-bold, 700);font-variant-numeric:tabular-nums;letter-spacing:-.01em}:host([data-done=true]) .ius-countdown__time{opacity:.55}:host([data-size=small]) .ius-countdown__label{font-size:var(--ius-fs-sm)}:host([data-size=small]) .ius-countdown__time{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__label{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__time{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__label{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__time{font-size:var(--ius-fs-h3)}\n"], dependencies: [{ kind: "component", type: CountdownRingComponent, selector: "ius-countdown-ring", inputs: ["progress", "seconds", "running", "paused", "inverse", "tone", "size", "ariaLabel"], outputs: ["completed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2066
2066
|
}
|
|
2067
2067
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CountdownComponent, decorators: [{
|
|
2068
2068
|
type: Component,
|
|
@@ -2074,7 +2074,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2074
2074
|
'[attr.data-done]': "done() ? 'true' : null",
|
|
2075
2075
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
2076
2076
|
'[style.--_cd-num]': 'numColor()',
|
|
2077
|
-
}, template: "@if (showRing() && ringPlacement() === 'start') {\n <ius-countdown-ring\n [progress]=\"fraction()\"\n [inverse]=\"ringInv()\"\n [tone]=\"tone()\"\n [size]=\"size()\"\n />\n}\n\n@if (label() != null) {\n <span class=\"ius-countdown__label\">{{ label() }}</span>\n}\n\n<span class=\"ius-countdown__time\">{{ text() }}</span>\n\n@if (showRing() && ringPlacement() === 'end') {\n <ius-countdown-ring\n [progress]=\"fraction()\"\n [inverse]=\"ringInv()\"\n [tone]=\"tone()\"\n [size]=\"size()\"\n />\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);line-height:1;-webkit-user-select:none;user-select:none}.ius-countdown__label{color:var(--ius-text-secondary);font-weight:var(--ius-fw-regular, 400)}.ius-countdown__time{color:var(--_cd-num, var(--ius-primary-900));font-weight:var(--ius-fw-bold, 700);font-variant-numeric:tabular-nums;letter-spacing:-.01em}:host([data-done=true]) .ius-countdown__time{opacity:.55}:host([data-size=small]) .ius-countdown__label{font-size:var(--ius-fs-sm)}:host([data-size=small]) .ius-countdown__time{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__label{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__time{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__label{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__time{font-size:var(--ius-fs-h3)}\n"] }]
|
|
2077
|
+
}, template: "@if (showRing() && ringPlacement() === 'start') {\r\n <ius-countdown-ring\r\n [progress]=\"fraction()\"\r\n [inverse]=\"ringInv()\"\r\n [tone]=\"tone()\"\r\n [size]=\"size()\"\r\n />\r\n}\r\n\r\n@if (label() != null) {\r\n <span class=\"ius-countdown__label\">{{ label() }}</span>\r\n}\r\n\r\n<span class=\"ius-countdown__time\">{{ text() }}</span>\r\n\r\n@if (showRing() && ringPlacement() === 'end') {\r\n <ius-countdown-ring\r\n [progress]=\"fraction()\"\r\n [inverse]=\"ringInv()\"\r\n [tone]=\"tone()\"\r\n [size]=\"size()\"\r\n />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);line-height:1;-webkit-user-select:none;user-select:none}.ius-countdown__label{color:var(--ius-text-secondary);font-weight:var(--ius-fw-regular, 400)}.ius-countdown__time{color:var(--_cd-num, var(--ius-primary-900));font-weight:var(--ius-fw-bold, 700);font-variant-numeric:tabular-nums;letter-spacing:-.01em}:host([data-done=true]) .ius-countdown__time{opacity:.55}:host([data-size=small]) .ius-countdown__label{font-size:var(--ius-fs-sm)}:host([data-size=small]) .ius-countdown__time{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__label{font-size:var(--ius-fs-lg)}:host([data-size=medium]) .ius-countdown__time{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__label{font-size:var(--ius-fs-h5)}:host([data-size=large]) .ius-countdown__time{font-size:var(--ius-fs-h3)}\n"] }]
|
|
2078
2078
|
}], ctorParameters: () => [], propDecorators: { seconds: [{ type: i0.Input, args: [{ isSignal: true, alias: "seconds", required: true }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], running: [{ type: i0.Input, args: [{ isSignal: true, alias: "running", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], format: [{ type: i0.Input, args: [{ isSignal: true, alias: "format", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], showRing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showRing", required: false }] }], ringPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringPlacement", required: false }] }], ringInverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "ringInverse", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], completed: [{ type: i0.Output, args: ["completed"] }] } });
|
|
2079
2079
|
|
|
2080
2080
|
/** Ícono por defecto según el tono. */
|
|
@@ -2420,7 +2420,7 @@ const SIZE_MAP = {
|
|
|
2420
2420
|
medium: 96,
|
|
2421
2421
|
large: 140,
|
|
2422
2422
|
};
|
|
2423
|
-
let uid$
|
|
2423
|
+
let uid$g = 0;
|
|
2424
2424
|
/**
|
|
2425
2425
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2426
2426
|
*
|
|
@@ -2445,7 +2445,7 @@ class IllustrationComponent {
|
|
|
2445
2445
|
constructor() {
|
|
2446
2446
|
this.sanitizer = inject(DomSanitizer);
|
|
2447
2447
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2448
|
-
this.instanceId = `i${uid$
|
|
2448
|
+
this.instanceId = `i${uid$g++}`;
|
|
2449
2449
|
this._size = 'medium';
|
|
2450
2450
|
this.viewBox = '0 0 110 110';
|
|
2451
2451
|
this.safeInner = '';
|
|
@@ -2490,11 +2490,11 @@ class IllustrationComponent {
|
|
|
2490
2490
|
this.safeInner = this.sanitizer.bypassSecurityTrustHtml(inner);
|
|
2491
2491
|
}
|
|
2492
2492
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IllustrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2493
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: IllustrationComponent, isStandalone: true, selector: "ius-illustration", inputs: { name: "name", size: "size", title: "title" }, host: { classAttribute: "ius-illustration" }, ngImport: i0, template: "@if (hasEntry) {\n <svg\n [attr.viewBox]=\"viewBox\"\n [attr.width]=\"px\"\n [attr.height]=\"px\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel\"\n [innerHTML]=\"safeInner\"\n ></svg>\n} @else {\n <!-- Placeholder: nombre v\u00E1lido sin arte disponible (data parcial) o nombre\n desconocido. Espejo del fallback de Illustration.jsx. -->\n <svg\n viewBox=\"0 0 110 110\"\n [attr.width]=\"px\"\n [attr.height]=\"px\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <rect\n x=\"6\"\n y=\"6\"\n width=\"98\"\n height=\"98\"\n rx=\"14\"\n fill=\"var(--ius-neutral-2)\"\n stroke=\"var(--ius-stroke)\"\n stroke-dasharray=\"4 4\"\n />\n </svg>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0}svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2493
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: IllustrationComponent, isStandalone: true, selector: "ius-illustration", inputs: { name: "name", size: "size", title: "title" }, host: { classAttribute: "ius-illustration" }, ngImport: i0, template: "@if (hasEntry) {\r\n <svg\r\n [attr.viewBox]=\"viewBox\"\r\n [attr.width]=\"px\"\r\n [attr.height]=\"px\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [innerHTML]=\"safeInner\"\r\n ></svg>\r\n} @else {\r\n <!-- Placeholder: nombre v\u00E1lido sin arte disponible (data parcial) o nombre\r\n desconocido. Espejo del fallback de Illustration.jsx. -->\r\n <svg\r\n viewBox=\"0 0 110 110\"\r\n [attr.width]=\"px\"\r\n [attr.height]=\"px\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n >\r\n <rect\r\n x=\"6\"\r\n y=\"6\"\r\n width=\"98\"\r\n height=\"98\"\r\n rx=\"14\"\r\n fill=\"var(--ius-neutral-2)\"\r\n stroke=\"var(--ius-stroke)\"\r\n stroke-dasharray=\"4 4\"\r\n />\r\n </svg>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0}svg{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2494
2494
|
}
|
|
2495
2495
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IllustrationComponent, decorators: [{
|
|
2496
2496
|
type: Component,
|
|
2497
|
-
args: [{ selector: 'ius-illustration', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-illustration' }, template: "@if (hasEntry) {\n <svg\n [attr.viewBox]=\"viewBox\"\n [attr.width]=\"px\"\n [attr.height]=\"px\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel\"\n [innerHTML]=\"safeInner\"\n ></svg>\n} @else {\n <!-- Placeholder: nombre v\u00E1lido sin arte disponible (data parcial) o nombre\n desconocido. Espejo del fallback de Illustration.jsx. -->\n <svg\n viewBox=\"0 0 110 110\"\n [attr.width]=\"px\"\n [attr.height]=\"px\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel\"\n >\n <rect\n x=\"6\"\n y=\"6\"\n width=\"98\"\n height=\"98\"\n rx=\"14\"\n fill=\"var(--ius-neutral-2)\"\n stroke=\"var(--ius-stroke)\"\n stroke-dasharray=\"4 4\"\n />\n </svg>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0}svg{display:block}\n"] }]
|
|
2497
|
+
args: [{ selector: 'ius-illustration', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-illustration' }, template: "@if (hasEntry) {\r\n <svg\r\n [attr.viewBox]=\"viewBox\"\r\n [attr.width]=\"px\"\r\n [attr.height]=\"px\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [innerHTML]=\"safeInner\"\r\n ></svg>\r\n} @else {\r\n <!-- Placeholder: nombre v\u00E1lido sin arte disponible (data parcial) o nombre\r\n desconocido. Espejo del fallback de Illustration.jsx. -->\r\n <svg\r\n viewBox=\"0 0 110 110\"\r\n [attr.width]=\"px\"\r\n [attr.height]=\"px\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n >\r\n <rect\r\n x=\"6\"\r\n y=\"6\"\r\n width=\"98\"\r\n height=\"98\"\r\n rx=\"14\"\r\n fill=\"var(--ius-neutral-2)\"\r\n stroke=\"var(--ius-stroke)\"\r\n stroke-dasharray=\"4 4\"\r\n />\r\n </svg>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;line-height:0}svg{display:block}\n"] }]
|
|
2498
2498
|
}], propDecorators: { name: [{
|
|
2499
2499
|
type: Input,
|
|
2500
2500
|
args: [{ required: true }]
|
|
@@ -2504,7 +2504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2504
2504
|
type: Input
|
|
2505
2505
|
}] } });
|
|
2506
2506
|
|
|
2507
|
-
let uid$
|
|
2507
|
+
let uid$f = 0;
|
|
2508
2508
|
/**
|
|
2509
2509
|
* Checkbox — Ius Design v2.
|
|
2510
2510
|
*
|
|
@@ -2542,7 +2542,7 @@ class CheckboxComponent {
|
|
|
2542
2542
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2543
2543
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2544
2544
|
this.checkedChange = new EventEmitter();
|
|
2545
|
-
this.inputId = `ius-cbx-${uid$
|
|
2545
|
+
this.inputId = `ius-cbx-${uid$f++}`;
|
|
2546
2546
|
this.onChange = () => { };
|
|
2547
2547
|
this.onTouched = () => { };
|
|
2548
2548
|
}
|
|
@@ -4546,7 +4546,7 @@ function prefersReducedMotion() {
|
|
|
4546
4546
|
typeof window.matchMedia === 'function' &&
|
|
4547
4547
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
4548
4548
|
}
|
|
4549
|
-
let uid$
|
|
4549
|
+
let uid$e = 0;
|
|
4550
4550
|
/**
|
|
4551
4551
|
* CircularProgress — Ius Design v2.
|
|
4552
4552
|
*
|
|
@@ -4567,7 +4567,7 @@ class CircularProgressComponent {
|
|
|
4567
4567
|
this.showValue = false;
|
|
4568
4568
|
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
4569
4569
|
this.paused = false;
|
|
4570
|
-
this.gid = `ius-cp-${uid$
|
|
4570
|
+
this.gid = `ius-cp-${uid$e++}`;
|
|
4571
4571
|
this.zone = inject(NgZone);
|
|
4572
4572
|
/** % restante de la cuenta regresiva (100 → 0). */
|
|
4573
4573
|
this.remaining = signal(100, /* @ts-ignore */
|
|
@@ -4729,7 +4729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4729
4729
|
args: [{ transform: booleanAttribute }]
|
|
4730
4730
|
}] } });
|
|
4731
4731
|
|
|
4732
|
-
let uid$
|
|
4732
|
+
let uid$d = 0;
|
|
4733
4733
|
/**
|
|
4734
4734
|
*
|
|
4735
4735
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -4751,7 +4751,7 @@ class LoadingMarkComponent {
|
|
|
4751
4751
|
/** Etiqueta accesible. */
|
|
4752
4752
|
this.ariaLabel = 'Cargando';
|
|
4753
4753
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
4754
|
-
this.id = `lm-${uid$
|
|
4754
|
+
this.id = `lm-${uid$d++}`;
|
|
4755
4755
|
this.baseId = `${this.id}-base`;
|
|
4756
4756
|
this.glowId = `${this.id}-glow`;
|
|
4757
4757
|
this.softId = `${this.id}-soft`;
|
|
@@ -5580,7 +5580,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
5580
5580
|
};
|
|
5581
5581
|
}
|
|
5582
5582
|
}
|
|
5583
|
-
let uid$
|
|
5583
|
+
let uid$c = 0;
|
|
5584
5584
|
/**
|
|
5585
5585
|
* CaptchaField — Ius Design v2.
|
|
5586
5586
|
*
|
|
@@ -5729,7 +5729,7 @@ class CaptchaFieldComponent {
|
|
|
5729
5729
|
this.phase = signal('loading', /* @ts-ignore */
|
|
5730
5730
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
5731
5731
|
this.widgetId = null;
|
|
5732
|
-
this.baseId = `ius-cf-${uid$
|
|
5732
|
+
this.baseId = `ius-cf-${uid$c++}`;
|
|
5733
5733
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
5734
5734
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
5735
5735
|
this.onChange = () => { };
|
|
@@ -7017,7 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7017
7017
|
type: Output
|
|
7018
7018
|
}] } });
|
|
7019
7019
|
|
|
7020
|
-
let uid$
|
|
7020
|
+
let uid$b = 0;
|
|
7021
7021
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
7022
7022
|
function isGrouped(options) {
|
|
7023
7023
|
return (Array.isArray(options) &&
|
|
@@ -7198,7 +7198,7 @@ class SelectComponent {
|
|
|
7198
7198
|
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
7199
7199
|
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
7200
7200
|
*/
|
|
7201
|
-
this.fallbackId = `ius-sel-${uid$
|
|
7201
|
+
this.fallbackId = `ius-sel-${uid$b++}`;
|
|
7202
7202
|
this.onChange = () => { };
|
|
7203
7203
|
this.onTouched = () => { };
|
|
7204
7204
|
this.overlay = inject(Overlay);
|
|
@@ -7989,7 +7989,7 @@ class ListViewPaginationComponent {
|
|
|
7989
7989
|
this.pageSizeChange.emit(n);
|
|
7990
7990
|
}
|
|
7991
7991
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListViewPaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7992
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ListViewPaginationComponent, isStandalone: true, selector: "ius-list-view-pagination", inputs: { variant: "variant", page: "page", defaultPage: ["defaultPage", "defaultPage", numberAttribute], totalPages: "totalPages", total: "total", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", showCount: ["showCount", "showCount", booleanAttribute], countNoun: "countNoun", siblingCount: ["siblingCount", "siblingCount", numberAttribute], boundaryCount: ["boundaryCount", "boundaryCount", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, properties: { "attr.data-variant": "variant", "attr.data-block": "showCountBlock ? 'true' : null", "style.--_pg-h": "preset.h + 'px'", "style.--_pg-icon": "preset.icon", "style.--_pg-fs": "preset.fs", "style.--_pg-gap": "preset.gap + 'px'" }, classAttribute: "ius-pagination" }, ngImport: i0, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\n@if (showCountBlock) {\n <div class=\"ius-pagination__count\">\n @if (countRanged) {\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\n } @else {\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\n }\n </div>\n}\n\n<div class=\"ius-pagination__main\">\n <!-- Selector \"Filas por p\u00E1gina\" -->\n @if (pageSizeSelectOptions.length) {\n <div class=\"ius-pagination__sizer\">\n <span>Filas</span>\n <span class=\"ius-pagination__numsel\">\n <ius-select\n [options]=\"pageSizeSelectOptions\"\n [value]=\"pageSize\"\n (valueChange)=\"onSelectPageSize($event)\"\n compact\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n placeholder=\"\"\n />\n </span>\n </div>\n }\n\n @if (variant === 'compact') {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"first_page\"\n variant=\"tertiary\"\n ariaLabel=\"Primera p\u00E1gina\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(1)\"\n />\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <span class=\"ius-pagination__compact\">\n P\u00E1gina \n <span class=\"ius-pagination__numsel\">\n <ius-select\n [options]=\"pageOptions\"\n [value]=\"currentPage\"\n (valueChange)=\"onSelectPage($event)\"\n compact\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [size]=\"size\"\n [disabled]=\"disabled || effTotalPages <= 1\"\n placeholder=\"\"\n />\n </span>\n <span> de </span>\n <b>{{ fmt(effTotalPages) }}</b>\n </span>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n <ius-icon-button\n icon=\"last_page\"\n variant=\"tertiary\"\n ariaLabel=\"\u00DAltima p\u00E1gina\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(effTotalPages)\"\n />\n </div>\n } @else {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <div class=\"ius-pagination__pages\">\n @for (row of pageRows; track $index) {\n @if (row.ellipsis) {\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ius-button\n class=\"ius-pagination__num\"\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\n [size]=\"size\"\n [label]=\"fmt(row.value!)\"\n [disabled]=\"disabled\"\n [attr.aria-current]=\"row.value === currentPage ? 'page' : null\"\n (clicked)=\"goTo(row.value!)\"\n />\n }\n }\n </div>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__numsel ::ng-deep .ius-tf__field{padding-right:var(--ius-space-xs);padding-left:var(--ius-space-sm);gap:var(--ius-space-xxs)}.ius-pagination__numsel ::ng-deep .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}.ius-pagination__numsel ::ng-deep .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ 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: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ListViewPaginationComponent, isStandalone: true, selector: "ius-list-view-pagination", inputs: { variant: "variant", page: "page", defaultPage: ["defaultPage", "defaultPage", numberAttribute], totalPages: "totalPages", total: "total", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", showCount: ["showCount", "showCount", booleanAttribute], countNoun: "countNoun", siblingCount: ["siblingCount", "siblingCount", numberAttribute], boundaryCount: ["boundaryCount", "boundaryCount", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, properties: { "attr.data-variant": "variant", "attr.data-block": "showCountBlock ? 'true' : null", "style.--_pg-h": "preset.h + 'px'", "style.--_pg-icon": "preset.icon", "style.--_pg-fs": "preset.fs", "style.--_pg-gap": "preset.gap + 'px'" }, classAttribute: "ius-pagination" }, ngImport: i0, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\r\n@if (showCountBlock) {\r\n <div class=\"ius-pagination__count\">\r\n @if (countRanged) {\r\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n } @else {\r\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n }\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pagination__main\">\r\n <!-- Selector \"Filas por p\u00E1gina\" -->\r\n @if (pageSizeSelectOptions.length) {\r\n <div class=\"ius-pagination__sizer\">\r\n <span>Filas</span>\r\n <span class=\"ius-pagination__numsel\">\r\n <ius-select\r\n [options]=\"pageSizeSelectOptions\"\r\n [value]=\"pageSize\"\r\n (valueChange)=\"onSelectPageSize($event)\"\r\n compact\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled\"\r\n placeholder=\"\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n\r\n @if (variant === 'compact') {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"first_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"Primera p\u00E1gina\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <span class=\"ius-pagination__compact\">\r\n P\u00E1gina \r\n <span class=\"ius-pagination__numsel\">\r\n <ius-select\r\n [options]=\"pageOptions\"\r\n [value]=\"currentPage\"\r\n (valueChange)=\"onSelectPage($event)\"\r\n compact\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || effTotalPages <= 1\"\r\n placeholder=\"\"\r\n />\r\n </span>\r\n <span> de </span>\r\n <b>{{ fmt(effTotalPages) }}</b>\r\n </span>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"last_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"\u00DAltima p\u00E1gina\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(effTotalPages)\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <div class=\"ius-pagination__pages\">\r\n @for (row of pageRows; track $index) {\r\n @if (row.ellipsis) {\r\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n } @else {\r\n <ius-button\r\n class=\"ius-pagination__num\"\r\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\r\n [size]=\"size\"\r\n [label]=\"fmt(row.value!)\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-current]=\"row.value === currentPage ? 'page' : null\"\r\n (clicked)=\"goTo(row.value!)\"\r\n />\r\n }\r\n }\r\n </div>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__numsel ::ng-deep .ius-tf__field{padding-right:var(--ius-space-xs);padding-left:var(--ius-space-sm);gap:var(--ius-space-xxs)}.ius-pagination__numsel ::ng-deep .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}.ius-pagination__numsel ::ng-deep .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ 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: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
7993
7993
|
}
|
|
7994
7994
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListViewPaginationComponent, decorators: [{
|
|
7995
7995
|
type: Component,
|
|
@@ -8003,7 +8003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8003
8003
|
'[style.--_pg-icon]': 'preset.icon',
|
|
8004
8004
|
'[style.--_pg-fs]': 'preset.fs',
|
|
8005
8005
|
'[style.--_pg-gap]': "preset.gap + 'px'",
|
|
8006
|
-
}, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\n@if (showCountBlock) {\n <div class=\"ius-pagination__count\">\n @if (countRanged) {\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\n } @else {\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\n }\n </div>\n}\n\n<div class=\"ius-pagination__main\">\n <!-- Selector \"Filas por p\u00E1gina\" -->\n @if (pageSizeSelectOptions.length) {\n <div class=\"ius-pagination__sizer\">\n <span>Filas</span>\n <span class=\"ius-pagination__numsel\">\n <ius-select\n [options]=\"pageSizeSelectOptions\"\n [value]=\"pageSize\"\n (valueChange)=\"onSelectPageSize($event)\"\n compact\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [size]=\"size\"\n [disabled]=\"disabled\"\n placeholder=\"\"\n />\n </span>\n </div>\n }\n\n @if (variant === 'compact') {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"first_page\"\n variant=\"tertiary\"\n ariaLabel=\"Primera p\u00E1gina\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(1)\"\n />\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <span class=\"ius-pagination__compact\">\n P\u00E1gina \n <span class=\"ius-pagination__numsel\">\n <ius-select\n [options]=\"pageOptions\"\n [value]=\"currentPage\"\n (valueChange)=\"onSelectPage($event)\"\n compact\n [searchable]=\"false\"\n [showClear]=\"false\"\n [showHelpText]=\"false\"\n [size]=\"size\"\n [disabled]=\"disabled || effTotalPages <= 1\"\n placeholder=\"\"\n />\n </span>\n <span> de </span>\n <b>{{ fmt(effTotalPages) }}</b>\n </span>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n <ius-icon-button\n icon=\"last_page\"\n variant=\"tertiary\"\n ariaLabel=\"\u00DAltima p\u00E1gina\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(effTotalPages)\"\n />\n </div>\n } @else {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <div class=\"ius-pagination__pages\">\n @for (row of pageRows; track $index) {\n @if (row.ellipsis) {\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ius-button\n class=\"ius-pagination__num\"\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\n [size]=\"size\"\n [label]=\"fmt(row.value!)\"\n [disabled]=\"disabled\"\n [attr.aria-current]=\"row.value === currentPage ? 'page' : null\"\n (clicked)=\"goTo(row.value!)\"\n />\n }\n }\n </div>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__numsel ::ng-deep .ius-tf__field{padding-right:var(--ius-space-xs);padding-left:var(--ius-space-sm);gap:var(--ius-space-xxs)}.ius-pagination__numsel ::ng-deep .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}.ius-pagination__numsel ::ng-deep .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
8006
|
+
}, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\r\n@if (showCountBlock) {\r\n <div class=\"ius-pagination__count\">\r\n @if (countRanged) {\r\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n } @else {\r\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n }\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pagination__main\">\r\n <!-- Selector \"Filas por p\u00E1gina\" -->\r\n @if (pageSizeSelectOptions.length) {\r\n <div class=\"ius-pagination__sizer\">\r\n <span>Filas</span>\r\n <span class=\"ius-pagination__numsel\">\r\n <ius-select\r\n [options]=\"pageSizeSelectOptions\"\r\n [value]=\"pageSize\"\r\n (valueChange)=\"onSelectPageSize($event)\"\r\n compact\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled\"\r\n placeholder=\"\"\r\n />\r\n </span>\r\n </div>\r\n }\r\n\r\n @if (variant === 'compact') {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"first_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"Primera p\u00E1gina\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <span class=\"ius-pagination__compact\">\r\n P\u00E1gina \r\n <span class=\"ius-pagination__numsel\">\r\n <ius-select\r\n [options]=\"pageOptions\"\r\n [value]=\"currentPage\"\r\n (valueChange)=\"onSelectPage($event)\"\r\n compact\r\n [searchable]=\"false\"\r\n [showClear]=\"false\"\r\n [showHelpText]=\"false\"\r\n [size]=\"size\"\r\n [disabled]=\"disabled || effTotalPages <= 1\"\r\n placeholder=\"\"\r\n />\r\n </span>\r\n <span> de </span>\r\n <b>{{ fmt(effTotalPages) }}</b>\r\n </span>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"last_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"\u00DAltima p\u00E1gina\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(effTotalPages)\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <div class=\"ius-pagination__pages\">\r\n @for (row of pageRows; track $index) {\r\n @if (row.ellipsis) {\r\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n } @else {\r\n <ius-button\r\n class=\"ius-pagination__num\"\r\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\r\n [size]=\"size\"\r\n [label]=\"fmt(row.value!)\"\r\n [disabled]=\"disabled\"\r\n [attr.aria-current]=\"row.value === currentPage ? 'page' : null\"\r\n (clicked)=\"goTo(row.value!)\"\r\n />\r\n }\r\n }\r\n </div>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__numsel ::ng-deep .ius-tf__field{padding-right:var(--ius-space-xs);padding-left:var(--ius-space-sm);gap:var(--ius-space-xxs)}.ius-pagination__numsel ::ng-deep .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}.ius-pagination__numsel ::ng-deep .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
8007
8007
|
}], propDecorators: { variant: [{
|
|
8008
8008
|
type: Input
|
|
8009
8009
|
}], page: [{
|
|
@@ -8246,7 +8246,7 @@ class ListViewComponent {
|
|
|
8246
8246
|
this.sortChange.emit(payload.value);
|
|
8247
8247
|
}
|
|
8248
8248
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8249
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ListViewComponent, isStandalone: true, selector: "ius-list-view", inputs: { hideHeader: ["hideHeader", "hideHeader", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], allSelected: ["allSelected", "allSelected", booleanAttribute], someSelected: ["someSelected", "someSelected", booleanAttribute], selectLabel: "selectLabel", sortOptions: "sortOptions", sortValue: "sortValue", actions: "actions", selectedCount: ["selectedCount", "selectedCount", numberAttribute], selectionActions: "selectionActions", gap: "gap", bodyPadding: "bodyPadding", bordered: ["bordered", "bordered", booleanAttribute], scrollTrackMargin: "scrollTrackMargin", fit: ["fit", "fit", booleanAttribute], fieldWidths: "fieldWidths", hideFooter: ["hideFooter", "hideFooter", booleanAttribute], total: "total", countNoun: "countNoun", pagination: ["pagination", "pagination", booleanAttribute], paginationVariant: "paginationVariant", page: "page", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", size: "size" }, outputs: { selectAll: "selectAll", sortChange: "sortChange", clearSelection: "clearSelection", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-bordered": "bordered ? 'true' : 'false'", "attr.data-fit": "fit ? 'height' : null" }, classAttribute: "ius-listview" }, queries: [{ propertyName: "filtersRef", first: true, predicate: IusListViewFiltersDirective, descendants: true, isSignal: true }, { propertyName: "headerStartRef", first: true, predicate: IusListViewHeaderStartDirective, descendants: true, isSignal: true }, { propertyName: "headerEndRef", first: true, predicate: IusListViewHeaderEndDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusListViewToolbarDirective, descendants: true, isSignal: true }, { propertyName: "footerStartRef", first: true, predicate: IusListViewFooterStartDirective, descendants: true, isSignal: true }, { propertyName: "footerEndRef", first: true, predicate: IusListViewFooterEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\n@if (!hideHeader) {\n @if (inSelection) {\n <div class=\"ius-listview__header\" data-mode=\"selection\">\n @if (selectable) {\n <ius-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\"\n size=\"small\"\n (checkedChange)=\"selectAll.emit($event)\"\n />\n }\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\n @if (selectionActions.length) {\n <span class=\"ius-listview__divider\"></span>\n }\n <div class=\"ius-listview__actions\">\n @for (a of selectionActions; track a.key ?? $index) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n [size]=\"iconSize\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"a.disabled ?? false\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </div>\n <span class=\"ius-listview__spacer\"></span>\n @if (showClear) {\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\n }\n </div>\n } @else if (hasToolbar) {\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\n <ng-content select=\"[iusListViewToolbar]\" />\n </div>\n } @else {\n <div class=\"ius-listview__header\">\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\n <ng-content select=\"[iusListViewHeaderStart]\" />\n @if (selectable) {\n <ius-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\"\n size=\"small\"\n [label]=\"selectLabel\"\n (checkedChange)=\"selectAll.emit($event)\"\n />\n }\n @if (sortOptions.length) {\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\n <span class=\"ius-listview__sort\">\n <ius-dropdown\n selectable\n [items]=\"sortOptions\"\n [value]=\"sortValue\"\n [triggerLabel]=\"sortTriggerFallback\"\n triggerIcon=\"swap_vert\"\n tone=\"neutral\"\n ariaLabel=\"Ordenar\"\n (valueChange)=\"onSortChange($event)\"\n />\n </span>\n }\n @if (hasFilters) {\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\n }\n </div>\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\n @if (actions.length) {\n <div class=\"ius-listview__actions\">\n @for (a of actions; track a.key ?? $index) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n [size]=\"iconSize\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"a.disabled ?? false\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </div>\n }\n <ng-content select=\"[iusListViewHeaderEnd]\" />\n </div>\n </div>\n }\n}\n\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\n<div\n class=\"ius-listview__body ius-scroll\"\n [style.gap]=\"px(gap)\"\n [style.padding]=\"px(bodyPadding)\"\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\n [style.--_lc-col-1]=\"colVar(0)\"\n [style.--_lc-col-2]=\"colVar(1)\"\n [style.--_lc-col-3]=\"colVar(2)\"\n [style.--_lc-col-4]=\"colVar(3)\"\n [style.--_lc-col-5]=\"colVar(4)\"\n [style.--_lc-col-6]=\"colVar(5)\"\n>\n <ng-content />\n</div>\n\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\n@if (showFooter) {\n <div class=\"ius-listview__footer\">\n <ng-content select=\"[iusListViewFooterStart]\" />\n @if (countText) {\n <span class=\"ius-listview__count\">{{ countText }}</span>\n }\n @if (pagination) {\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\n <ius-list-view-pagination\n [variant]=\"paginationVariant\"\n [total]=\"total\"\n [page]=\"page\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n size=\"small\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n />\n }\n <ng-content select=\"[iusListViewFooterEnd]\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: ListViewPaginationComponent, selector: "ius-list-view-pagination", inputs: ["variant", "page", "defaultPage", "totalPages", "total", "pageSize", "pageSizeOptions", "showCount", "countNoun", "siblingCount", "boundaryCount", "size", "disabled"], outputs: ["pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ListViewComponent, isStandalone: true, selector: "ius-list-view", inputs: { hideHeader: ["hideHeader", "hideHeader", booleanAttribute], selectable: ["selectable", "selectable", booleanAttribute], allSelected: ["allSelected", "allSelected", booleanAttribute], someSelected: ["someSelected", "someSelected", booleanAttribute], selectLabel: "selectLabel", sortOptions: "sortOptions", sortValue: "sortValue", actions: "actions", selectedCount: ["selectedCount", "selectedCount", numberAttribute], selectionActions: "selectionActions", gap: "gap", bodyPadding: "bodyPadding", bordered: ["bordered", "bordered", booleanAttribute], scrollTrackMargin: "scrollTrackMargin", fit: ["fit", "fit", booleanAttribute], fieldWidths: "fieldWidths", hideFooter: ["hideFooter", "hideFooter", booleanAttribute], total: "total", countNoun: "countNoun", pagination: ["pagination", "pagination", booleanAttribute], paginationVariant: "paginationVariant", page: "page", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", size: "size" }, outputs: { selectAll: "selectAll", sortChange: "sortChange", clearSelection: "clearSelection", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-bordered": "bordered ? 'true' : 'false'", "attr.data-fit": "fit ? 'height' : null" }, classAttribute: "ius-listview" }, queries: [{ propertyName: "filtersRef", first: true, predicate: IusListViewFiltersDirective, descendants: true, isSignal: true }, { propertyName: "headerStartRef", first: true, predicate: IusListViewHeaderStartDirective, descendants: true, isSignal: true }, { propertyName: "headerEndRef", first: true, predicate: IusListViewHeaderEndDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusListViewToolbarDirective, descendants: true, isSignal: true }, { propertyName: "footerStartRef", first: true, predicate: IusListViewFooterStartDirective, descendants: true, isSignal: true }, { propertyName: "footerEndRef", first: true, predicate: IusListViewFooterEndDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: ListViewPaginationComponent, selector: "ius-list-view-pagination", inputs: ["variant", "page", "defaultPage", "totalPages", "total", "pageSize", "pageSizeOptions", "showCount", "countNoun", "siblingCount", "boundaryCount", "size", "disabled"], outputs: ["pageChange", "pageSizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8250
8250
|
}
|
|
8251
8251
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ListViewComponent, decorators: [{
|
|
8252
8252
|
type: Component,
|
|
@@ -8261,7 +8261,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8261
8261
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
8262
8262
|
'[attr.data-bordered]': "bordered ? 'true' : 'false'",
|
|
8263
8263
|
'[attr.data-fit]': "fit ? 'height' : null",
|
|
8264
|
-
}, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\n@if (!hideHeader) {\n @if (inSelection) {\n <div class=\"ius-listview__header\" data-mode=\"selection\">\n @if (selectable) {\n <ius-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\"\n size=\"small\"\n (checkedChange)=\"selectAll.emit($event)\"\n />\n }\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\n @if (selectionActions.length) {\n <span class=\"ius-listview__divider\"></span>\n }\n <div class=\"ius-listview__actions\">\n @for (a of selectionActions; track a.key ?? $index) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n [size]=\"iconSize\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"a.disabled ?? false\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </div>\n <span class=\"ius-listview__spacer\"></span>\n @if (showClear) {\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\n }\n </div>\n } @else if (hasToolbar) {\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\n <ng-content select=\"[iusListViewToolbar]\" />\n </div>\n } @else {\n <div class=\"ius-listview__header\">\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\n <ng-content select=\"[iusListViewHeaderStart]\" />\n @if (selectable) {\n <ius-checkbox\n [checked]=\"allSelected\"\n [indeterminate]=\"someSelected\"\n size=\"small\"\n [label]=\"selectLabel\"\n (checkedChange)=\"selectAll.emit($event)\"\n />\n }\n @if (sortOptions.length) {\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\n <span class=\"ius-listview__sort\">\n <ius-dropdown\n selectable\n [items]=\"sortOptions\"\n [value]=\"sortValue\"\n [triggerLabel]=\"sortTriggerFallback\"\n triggerIcon=\"swap_vert\"\n tone=\"neutral\"\n ariaLabel=\"Ordenar\"\n (valueChange)=\"onSortChange($event)\"\n />\n </span>\n }\n @if (hasFilters) {\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\n }\n </div>\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\n @if (actions.length) {\n <div class=\"ius-listview__actions\">\n @for (a of actions; track a.key ?? $index) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n [size]=\"iconSize\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"a.disabled ?? false\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </div>\n }\n <ng-content select=\"[iusListViewHeaderEnd]\" />\n </div>\n </div>\n }\n}\n\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\n<div\n class=\"ius-listview__body ius-scroll\"\n [style.gap]=\"px(gap)\"\n [style.padding]=\"px(bodyPadding)\"\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\n [style.--_lc-col-1]=\"colVar(0)\"\n [style.--_lc-col-2]=\"colVar(1)\"\n [style.--_lc-col-3]=\"colVar(2)\"\n [style.--_lc-col-4]=\"colVar(3)\"\n [style.--_lc-col-5]=\"colVar(4)\"\n [style.--_lc-col-6]=\"colVar(5)\"\n>\n <ng-content />\n</div>\n\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\n@if (showFooter) {\n <div class=\"ius-listview__footer\">\n <ng-content select=\"[iusListViewFooterStart]\" />\n @if (countText) {\n <span class=\"ius-listview__count\">{{ countText }}</span>\n }\n @if (pagination) {\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\n <ius-list-view-pagination\n [variant]=\"paginationVariant\"\n [total]=\"total\"\n [page]=\"page\"\n [pageSize]=\"pageSize\"\n [pageSizeOptions]=\"pageSizeOptions\"\n size=\"small\"\n (pageChange)=\"pageChange.emit($event)\"\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\n />\n }\n <ng-content select=\"[iusListViewFooterEnd]\" />\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"] }]
|
|
8264
|
+
}, template: "<!-- Header: modo selecci\u00F3n > toolbar > integrado -->\r\n@if (!hideHeader) {\r\n @if (inSelection) {\r\n <div class=\"ius-listview__header\" data-mode=\"selection\">\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n <span class=\"ius-listview__selcount\">{{ selCountText }}</span>\r\n @if (selectionActions.length) {\r\n <span class=\"ius-listview__divider\"></span>\r\n }\r\n <div class=\"ius-listview__actions\">\r\n @for (a of selectionActions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n <span class=\"ius-listview__spacer\"></span>\r\n @if (showClear) {\r\n <ius-text-button label=\"Limpiar\" (clicked)=\"clearSelection.emit()\" />\r\n }\r\n </div>\r\n } @else if (hasToolbar) {\r\n <div class=\"ius-listview__header ius-listview__header--toolbar\">\r\n <ng-content select=\"[iusListViewToolbar]\" />\r\n </div>\r\n } @else {\r\n <div class=\"ius-listview__header\">\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--grow\">\r\n <ng-content select=\"[iusListViewHeaderStart]\" />\r\n @if (selectable) {\r\n <ius-checkbox\r\n [checked]=\"allSelected\"\r\n [indeterminate]=\"someSelected\"\r\n size=\"small\"\r\n [label]=\"selectLabel\"\r\n (checkedChange)=\"selectAll.emit($event)\"\r\n />\r\n }\r\n @if (sortOptions.length) {\r\n <!-- orden: Dropdown de selecci\u00F3n \u00FAnica (trigger ghost swap_vert, tone neutral) -->\r\n <span class=\"ius-listview__sort\">\r\n <ius-dropdown\r\n selectable\r\n [items]=\"sortOptions\"\r\n [value]=\"sortValue\"\r\n [triggerLabel]=\"sortTriggerFallback\"\r\n triggerIcon=\"swap_vert\"\r\n tone=\"neutral\"\r\n ariaLabel=\"Ordenar\"\r\n (valueChange)=\"onSortChange($event)\"\r\n />\r\n </span>\r\n }\r\n @if (hasFilters) {\r\n <div class=\"ius-listview__filters\"><ng-content select=\"[iusListViewFilters]\" /></div>\r\n }\r\n </div>\r\n <div class=\"ius-listview__hgroup ius-listview__hgroup--end\">\r\n @if (actions.length) {\r\n <div class=\"ius-listview__actions\">\r\n @for (a of actions; track a.key ?? $index) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n [size]=\"iconSize\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"a.disabled ?? false\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </div>\r\n }\r\n <ng-content select=\"[iusListViewHeaderEnd]\" />\r\n </div>\r\n </div>\r\n }\r\n}\r\n\r\n<!-- Body: \u00FAnico scroller; emite la rejilla --_lc-col-N a los ListCard proyectados -->\r\n<div\r\n class=\"ius-listview__body ius-scroll\"\r\n [style.gap]=\"px(gap)\"\r\n [style.padding]=\"px(bodyPadding)\"\r\n [style.--_sb-track-margin]=\"px(scrollTrackMargin)\"\r\n [style.--_lc-col-1]=\"colVar(0)\"\r\n [style.--_lc-col-2]=\"colVar(1)\"\r\n [style.--_lc-col-3]=\"colVar(2)\"\r\n [style.--_lc-col-4]=\"colVar(3)\"\r\n [style.--_lc-col-5]=\"colVar(4)\"\r\n [style.--_lc-col-6]=\"colVar(5)\"\r\n>\r\n <ng-content />\r\n</div>\r\n\r\n<!-- Footer: total a la izquierda + paginaci\u00F3n a la derecha -->\r\n@if (showFooter) {\r\n <div class=\"ius-listview__footer\">\r\n <ng-content select=\"[iusListViewFooterStart]\" />\r\n @if (countText) {\r\n <span class=\"ius-listview__count\">{{ countText }}</span>\r\n }\r\n @if (pagination) {\r\n <!-- FALLBACK Pagination: port interno (reemplazar por ius-pagination cuando exista) -->\r\n <ius-list-view-pagination\r\n [variant]=\"paginationVariant\"\r\n [total]=\"total\"\r\n [page]=\"page\"\r\n [pageSize]=\"pageSize\"\r\n [pageSizeOptions]=\"pageSizeOptions\"\r\n size=\"small\"\r\n (pageChange)=\"pageChange.emit($event)\"\r\n (pageSizeChange)=\"pageSizeChange.emit($event)\"\r\n />\r\n }\r\n <ng-content select=\"[iusListViewFooterEnd]\" />\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;width:100%;height:100%;font-family:var(--ius-font-body);box-sizing:border-box}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-listview__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:nowrap;padding:var(--ius-space-xs) var(--ius-space-md);min-height:40px}.ius-listview__hgroup{display:flex;align-items:center;gap:var(--ius-space-sm);min-width:0;flex-wrap:wrap}.ius-listview__hgroup--grow{flex:1 1 auto}.ius-listview__hgroup--end{flex:0 0 auto;flex-wrap:nowrap;justify-content:flex-end}:host([data-bordered=true]) .ius-listview__header{border-bottom:1px solid var(--ius-stroke)}.ius-listview__header--toolbar{flex-wrap:wrap;min-height:0}:host([data-size=small]) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}@container style(--ius-density: small){:host(:not([data-size])) .ius-listview__header{gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-sm);min-height:36px}}.ius-listview__spacer{flex:1 1 auto}.ius-listview__divider{align-self:stretch;width:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) var(--ius-space-xs)}.ius-listview__filters{display:flex;align-items:center;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-listview__actions{display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-listview__selcount{font:var(--ius-fw-regular, 400) var(--ius-fs-base)/var(--ius-lh-base) var(--ius-font-body);color:var(--ius-primary-900);font-variant-numeric:tabular-nums}.ius-listview__body{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column}:host([data-fit=height]){flex:1 1 auto;min-height:0;overflow:hidden}.ius-listview__body ::ng-deep .ius-listcard:hover{z-index:2}.ius-listview__footer{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-bordered=true]) .ius-listview__footer{border-top:1px solid var(--ius-stroke)}.ius-listview__count{font:var(--ius-fw-regular, 400) var(--ius-fs-sm)/var(--ius-lh-sm) var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-listview__footer .ius-pagination{margin-left:auto;flex:0 0 auto}.ius-listview__sort{display:inline-flex}\n"] }]
|
|
8265
8265
|
}], propDecorators: { hideHeader: [{
|
|
8266
8266
|
type: Input,
|
|
8267
8267
|
args: [{ transform: booleanAttribute }]
|
|
@@ -8767,11 +8767,11 @@ class DrawerComponent {
|
|
|
8767
8767
|
this.timers = [];
|
|
8768
8768
|
}
|
|
8769
8769
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8770
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DrawerComponent, isStandalone: true, selector: "ius-drawer", inputs: { open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], side: "side", size: "size", title: "title", centerTitle: ["centerTitle", "centerTitle", booleanAttribute], showBack: "showBack", showClose: ["showClose", "showClose", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "titleSlot", first: true, predicate: IusDrawerTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: IusDrawerHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\n @if (showScrim) {\n <div\n class=\"ius-drawer-scrim\"\n [attr.data-visible]=\"visible() ? 'true' : null\"\n (click)=\"onScrimClick()\"\n ></div>\n }\n <div\n class=\"ius-drawer\"\n role=\"dialog\"\n aria-modal=\"true\"\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"labelledBy\"\n [attr.data-side]=\"side\"\n [attr.data-size]=\"size\"\n [attr.data-visible]=\"visible() ? 'true' : null\"\n [attr.data-entered]=\"entered() ? 'true' : null\"\n >\n @if (hasHeader) {\n <div class=\"ius-drawer__header\">\n @if (showBackBtn) {\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"medium\"\n ariaLabel=\"Volver\"\n (clicked)=\"onBackClick()\"\n />\n }\n @if (hasTitle) {\n <h2\n class=\"ius-drawer__title\"\n [class.ius-drawer__title--center]=\"centerTitle\"\n [id]=\"titleId\"\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\n }\n @if (hasActionsZone) {\n <div class=\"ius-drawer__actions\">\n <ng-content select=\"[iusDrawerHeaderActions]\" />\n @if (showClose) {\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"requestClose()\"\n />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\n\n @if (footerSlot) {\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DrawerComponent, isStandalone: true, selector: "ius-drawer", inputs: { open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], side: "side", size: "size", title: "title", centerTitle: ["centerTitle", "centerTitle", booleanAttribute], showBack: "showBack", showClose: ["showClose", "showClose", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "titleSlot", first: true, predicate: IusDrawerTitleDirective, descendants: true }, { propertyName: "actionsSlot", first: true, predicate: IusDrawerHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusDrawerFooterDirective, descendants: true }], viewQueries: [{ propertyName: "tpl", first: true, predicate: ["tpl"], descendants: true, static: true }], ngImport: i0, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"], dependencies: [{ kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i1.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8771
8771
|
}
|
|
8772
8772
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
8773
8773
|
type: Component,
|
|
8774
|
-
args: [{ selector: 'ius-drawer', standalone: true, imports: [A11yModule, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\n @if (showScrim) {\n <div\n class=\"ius-drawer-scrim\"\n [attr.data-visible]=\"visible() ? 'true' : null\"\n (click)=\"onScrimClick()\"\n ></div>\n }\n <div\n class=\"ius-drawer\"\n role=\"dialog\"\n aria-modal=\"true\"\n tabindex=\"-1\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-labelledby]=\"labelledBy\"\n [attr.data-side]=\"side\"\n [attr.data-size]=\"size\"\n [attr.data-visible]=\"visible() ? 'true' : null\"\n [attr.data-entered]=\"entered() ? 'true' : null\"\n >\n @if (hasHeader) {\n <div class=\"ius-drawer__header\">\n @if (showBackBtn) {\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"medium\"\n ariaLabel=\"Volver\"\n (clicked)=\"onBackClick()\"\n />\n }\n @if (hasTitle) {\n <h2\n class=\"ius-drawer__title\"\n [class.ius-drawer__title--center]=\"centerTitle\"\n [id]=\"titleId\"\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\n }\n @if (hasActionsZone) {\n <div class=\"ius-drawer__actions\">\n <ng-content select=\"[iusDrawerHeaderActions]\" />\n @if (showClose) {\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"medium\"\n ariaLabel=\"Cerrar\"\n (clicked)=\"requestClose()\"\n />\n }\n </div>\n }\n </div>\n }\n\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\n\n @if (footerSlot) {\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\n }\n </div>\n</ng-template>\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"] }]
|
|
8774
|
+
args: [{ selector: 'ius-drawer', standalone: true, imports: [A11yModule, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #tpl>\r\n @if (showScrim) {\r\n <div\r\n class=\"ius-drawer-scrim\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n (click)=\"onScrimClick()\"\r\n ></div>\r\n }\r\n <div\r\n class=\"ius-drawer\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n tabindex=\"-1\"\r\n cdkTrapFocus\r\n [cdkTrapFocusAutoCapture]=\"true\"\r\n [attr.aria-label]=\"ariaLabel || null\"\r\n [attr.aria-labelledby]=\"labelledBy\"\r\n [attr.data-side]=\"side\"\r\n [attr.data-size]=\"size\"\r\n [attr.data-visible]=\"visible() ? 'true' : null\"\r\n [attr.data-entered]=\"entered() ? 'true' : null\"\r\n >\r\n @if (hasHeader) {\r\n <div class=\"ius-drawer__header\">\r\n @if (showBackBtn) {\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Volver\"\r\n (clicked)=\"onBackClick()\"\r\n />\r\n }\r\n @if (hasTitle) {\r\n <h2\r\n class=\"ius-drawer__title\"\r\n [class.ius-drawer__title--center]=\"centerTitle\"\r\n [id]=\"titleId\"\r\n >{{ title }}<ng-content select=\"[iusDrawerTitle]\" /></h2>\r\n }\r\n @if (hasActionsZone) {\r\n <div class=\"ius-drawer__actions\">\r\n <ng-content select=\"[iusDrawerHeaderActions]\" />\r\n @if (showClose) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"medium\"\r\n ariaLabel=\"Cerrar\"\r\n (clicked)=\"requestClose()\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-drawer__body ius-scroll\"><ng-content /></div>\r\n\r\n @if (footerSlot) {\r\n <div class=\"ius-drawer__footer\"><ng-content select=\"[iusDrawerFooter]\" /></div>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";.ius-drawer-scrim{position:fixed;inset:0;background:var(--ius-surface-overlay);opacity:0;transition:opacity var(--ius-duration-slow) var(--ius-ease-standard)}.ius-drawer-scrim[data-visible=true]{opacity:1}.ius-drawer{position:fixed;top:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;width:var(--_drawer-w, min(440px, 100vw));background:var(--ius-surface-card);box-shadow:var(--ius-elevation-400);font-family:var(--ius-font-body);transition:transform var(--ius-duration-slow) var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1))}.ius-drawer[data-side=right]{right:0;transform:translate(100%);border-radius:var(--ius-radius-lg) 0 0 var(--ius-radius-lg)}.ius-drawer[data-side=left]{left:0;transform:translate(-100%);border-radius:0 var(--ius-radius-lg) var(--ius-radius-lg) 0}.ius-drawer[data-visible=true]{transform:translate(0)}.ius-drawer[data-entered=true]{transform:none}.ius-drawer[data-size=sm]{--_drawer-w: min(400px, 100vw)}.ius-drawer[data-size=md]{--_drawer-w: min(440px, 100vw)}.ius-drawer[data-size=lg]{--_drawer-w: min(560px, 100vw)}.ius-drawer[data-size=xl]{--_drawer-w: min(720px, 100vw)}@media(max-width:480px){.ius-drawer{width:100vw;border-radius:0}}@media(prefers-reduced-motion:reduce){.ius-drawer,.ius-drawer-scrim{transition:none}}.ius-drawer__header{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);height:56px;box-sizing:border-box;padding:0 var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-drawer__title{flex:1 1 auto;min-width:0;margin:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-drawer__title--center{text-align:center}.ius-drawer__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-drawer__body{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg) var(--ius-space-md);display:flex;flex-direction:column;gap:var(--ius-space-md);scrollbar-width:thin;scrollbar-color:var(--ius-neutral-5) transparent}.ius-drawer__body::-webkit-scrollbar{width:10px}.ius-drawer__body::-webkit-scrollbar-track{background:transparent}.ius-drawer__body::-webkit-scrollbar-thumb{background:var(--ius-neutral-5);border-radius:var(--ius-radius-pill);border:3px solid var(--ius-surface-card);background-clip:padding-box}.ius-drawer__body::-webkit-scrollbar-thumb:hover{background:var(--ius-neutral-6);background-clip:padding-box}.ius-drawer__body ::ng-deep .ius-tf,.ius-drawer__body ::ng-deep .ius-sb{max-width:none}.ius-drawer__footer{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--ius-space-xs);padding:var(--ius-space-md);border-top:1px solid var(--ius-stroke);background:var(--ius-surface-card)}.ius-drawer[data-side=right] .ius-drawer__footer{border-bottom-left-radius:var(--ius-radius-lg)}.ius-drawer[data-side=left] .ius-drawer__footer{border-bottom-right-radius:var(--ius-radius-lg)}\n"] }]
|
|
8775
8775
|
}], propDecorators: { tpl: [{
|
|
8776
8776
|
type: ViewChild,
|
|
8777
8777
|
args: ['tpl', { static: true }]
|
|
@@ -8829,7 +8829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8829
8829
|
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
8830
8830
|
*/
|
|
8831
8831
|
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
8832
|
-
let uid$
|
|
8832
|
+
let uid$a = 0;
|
|
8833
8833
|
/**
|
|
8834
8834
|
* SearchBar — Ius Design v2.
|
|
8835
8835
|
*
|
|
@@ -8913,7 +8913,7 @@ class SearchBarComponent {
|
|
|
8913
8913
|
this.cleared = new EventEmitter();
|
|
8914
8914
|
// ── Estado interno ────────────────────────────────────────────────────
|
|
8915
8915
|
this.inputRef = viewChild.required('input');
|
|
8916
|
-
this.autoId = `ius-sb-${uid$
|
|
8916
|
+
this.autoId = `ius-sb-${uid$a++}`;
|
|
8917
8917
|
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
8918
8918
|
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
8919
8919
|
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
@@ -9383,7 +9383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
9383
9383
|
args: ['triggerEl']
|
|
9384
9384
|
}] } });
|
|
9385
9385
|
|
|
9386
|
-
let uid$
|
|
9386
|
+
let uid$9 = 0;
|
|
9387
9387
|
/**
|
|
9388
9388
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
9389
9389
|
*
|
|
@@ -9439,7 +9439,7 @@ class MultiTextFieldComponent {
|
|
|
9439
9439
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
9440
9440
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
9441
9441
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
9442
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
9442
|
+
this.baseIdState = `ius-mtf-${uid$9++}`;
|
|
9443
9443
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
9444
9444
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
9445
9445
|
this.onChange = () => { };
|
|
@@ -9722,7 +9722,7 @@ const ICON_TONES = {
|
|
|
9722
9722
|
neutral: { bg: 'var(--ius-neutral-2)', fg: 'var(--ius-neutral-7)' },
|
|
9723
9723
|
};
|
|
9724
9724
|
/** Contador para los ids del nombre accesible (equivalente del `useId` del golden). */
|
|
9725
|
-
let uid$
|
|
9725
|
+
let uid$8 = 0;
|
|
9726
9726
|
/**
|
|
9727
9727
|
* Modal — Ius Design v2.
|
|
9728
9728
|
*
|
|
@@ -9745,7 +9745,7 @@ class ModalComponent {
|
|
|
9745
9745
|
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
9746
9746
|
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
9747
9747
|
*/
|
|
9748
|
-
this.baseId = `ius-modal-${uid$
|
|
9748
|
+
this.baseId = `ius-modal-${uid$8++}`;
|
|
9749
9749
|
this.titleId = `${this.baseId}-title`;
|
|
9750
9750
|
this.descId = `${this.baseId}-desc`;
|
|
9751
9751
|
this.overlay = inject(Overlay);
|
|
@@ -10676,7 +10676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10676
10676
|
args: [{ transform: booleanAttribute }]
|
|
10677
10677
|
}] } });
|
|
10678
10678
|
|
|
10679
|
-
let uid$
|
|
10679
|
+
let uid$7 = 0;
|
|
10680
10680
|
/**
|
|
10681
10681
|
* TextArea — Ius Design v2 (familia inputs).
|
|
10682
10682
|
*
|
|
@@ -10856,7 +10856,7 @@ class TextAreaComponent {
|
|
|
10856
10856
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10857
10857
|
this.focused = signal(false, /* @ts-ignore */
|
|
10858
10858
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
10859
|
-
this.areaId = `ius-ta-${uid$
|
|
10859
|
+
this.areaId = `ius-ta-${uid$7++}`;
|
|
10860
10860
|
this.helpId = `${this.areaId}-help`;
|
|
10861
10861
|
this.area = viewChild('area', /* @ts-ignore */
|
|
10862
10862
|
...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
@@ -12852,7 +12852,7 @@ function normalizeOpen(value, multiple) {
|
|
|
12852
12852
|
const list = Array.isArray(value) ? [...value] : [value];
|
|
12853
12853
|
return multiple ? list : list.slice(0, 1);
|
|
12854
12854
|
}
|
|
12855
|
-
let uid$
|
|
12855
|
+
let uid$6 = 0;
|
|
12856
12856
|
/**
|
|
12857
12857
|
* Accordion — Ius Design v2 (familia data-display).
|
|
12858
12858
|
*
|
|
@@ -12912,7 +12912,7 @@ class AccordionComponent {
|
|
|
12912
12912
|
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
12913
12913
|
this.picked = signal(null, /* @ts-ignore */
|
|
12914
12914
|
...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
|
|
12915
|
-
this.gid = `ius-acc-${uid$
|
|
12915
|
+
this.gid = `ius-acc-${uid$6++}`;
|
|
12916
12916
|
this.openIds = computed(() => {
|
|
12917
12917
|
const controlled = this.open();
|
|
12918
12918
|
if (controlled !== undefined)
|
|
@@ -13949,7 +13949,7 @@ class StatComponent {
|
|
|
13949
13949
|
event.preventDefault();
|
|
13950
13950
|
}
|
|
13951
13951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13952
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatComponent, isStandalone: true, selector: "ius-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueTone: { classPropertyName: "valueTone", publicName: "valueTone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", 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 } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "effSize()", "attr.data-align": "align()", "attr.data-interactive": "navigable() || null", "attr.role": "navigable() ? (href() ? 'link' : 'button') : null", "attr.tabindex": "navigable() ? 0 : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-stat" }, queries: [{ propertyName: "deltaSlot", first: true, predicate: IusStatDeltaDirective, descendants: true, isSignal: true }, { propertyName: "sparkSlot", first: true, predicate: IusStatSparklineDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: IusStatLabelDirective, descendants: true, isSignal: true }, { propertyName: "deltaLabelSlot", first: true, predicate: IusStatDeltaLabelDirective, descendants: true, isSignal: true }, { propertyName: "captionSlot", first: true, predicate: IusStatCaptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\
|
|
13952
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatComponent, isStandalone: true, selector: "ius-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueTone: { classPropertyName: "valueTone", publicName: "valueTone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", 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 } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "effSize()", "attr.data-align": "align()", "attr.data-interactive": "navigable() || null", "attr.role": "navigable() ? (href() ? 'link' : 'button') : null", "attr.tabindex": "navigable() ? 0 : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-stat" }, queries: [{ propertyName: "deltaSlot", first: true, predicate: IusStatDeltaDirective, descendants: true, isSignal: true }, { propertyName: "sparkSlot", first: true, predicate: IusStatSparklineDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: IusStatLabelDirective, descendants: true, isSignal: true }, { propertyName: "deltaLabelSlot", first: true, predicate: IusStatDeltaLabelDirective, descendants: true, isSignal: true }, { propertyName: "captionSlot", first: true, predicate: IusStatCaptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\n@if (label() != null || hasLabelSlot()) {\n <span class=\"ius-stat__overline\">\n @if (labelIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\n }\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content select=\"[iusStatLabel]\" />\n }\n </span>\n}\n\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\n<span class=\"ius-stat__row\">\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\n @if (value() != null) {\n {{ value() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (delta() != null) {\n <span\n class=\"ius-stat__delta\"\n [attr.data-dir]=\"deltaDir()\"\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\n {{ deltaText() }}\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n } @else if (hasDeltaSlot()) {\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\n <ng-content select=\"[iusStatDelta]\" />\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n }\n</span>\n\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\n@if (hasSparkline()) {\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\n}\n\n<!-- Apoyo (multil\u00EDnea; input de texto \u203A proyecci\u00F3n) -->\n@if (caption() != null || hasCaptionSlot()) {\n <span class=\"ius-stat__caption\">\n @if (caption() != null) {\n {{ caption() }}\n } @else {\n <ng-content select=\"[iusStatCaption]\" />\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_stat-value-fs: var(--ius-fs-h2);--_stat-value-lh: var(--ius-lh-h2);display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;box-sizing:border-box}:host([data-size=sm]){--_stat-value-fs: var(--ius-fs-h3);--_stat-value-lh: var(--ius-lh-h3)}:host([data-size=lg]){--_stat-value-fs: var(--ius-fs-h1);--_stat-value-lh: var(--ius-lh-h1)}:host([data-align=center]){text-align:center;align-items:center}:host([data-interactive=true]){cursor:pointer;border-radius:var(--ius-radius-sm)}:host([data-interactive=true]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-stat__overline{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-stat__overline .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__row{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}:host([data-align=center]) .ius-stat__row{justify-content:center}.ius-stat__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_stat-value-fs);line-height:var(--_stat-value-lh);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-stat__delta{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1;font-weight:var(--ius-fw-bold);font-variant-numeric:tabular-nums}.ius-stat__delta .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__delta[data-dir=up]{color:var(--ius-success-700)}.ius-stat__delta[data-dir=down],.ius-stat__delta[data-dir=up][data-invert=true]{color:var(--ius-danger-600)}.ius-stat__delta[data-dir=down][data-invert=true]{color:var(--ius-success-700)}.ius-stat__delta-label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}.ius-stat__spark{margin-top:var(--ius-space-xxs);line-height:0}.ius-stat__caption{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13953
13953
|
}
|
|
13954
13954
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, decorators: [{
|
|
13955
13955
|
type: Component,
|
|
@@ -13965,7 +13965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13965
13965
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
13966
13966
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
13967
13967
|
'(keyup.space)': 'onKeyActivate($event)',
|
|
13968
|
-
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\
|
|
13968
|
+
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\n@if (label() != null || hasLabelSlot()) {\n <span class=\"ius-stat__overline\">\n @if (labelIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\n }\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content select=\"[iusStatLabel]\" />\n }\n </span>\n}\n\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\n<span class=\"ius-stat__row\">\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\n @if (value() != null) {\n {{ value() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (delta() != null) {\n <span\n class=\"ius-stat__delta\"\n [attr.data-dir]=\"deltaDir()\"\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\n {{ deltaText() }}\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n } @else if (hasDeltaSlot()) {\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\n <ng-content select=\"[iusStatDelta]\" />\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n }\n</span>\n\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\n@if (hasSparkline()) {\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\n}\n\n<!-- Apoyo (multil\u00EDnea; input de texto \u203A proyecci\u00F3n) -->\n@if (caption() != null || hasCaptionSlot()) {\n <span class=\"ius-stat__caption\">\n @if (caption() != null) {\n {{ caption() }}\n } @else {\n <ng-content select=\"[iusStatCaption]\" />\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_stat-value-fs: var(--ius-fs-h2);--_stat-value-lh: var(--ius-lh-h2);display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;box-sizing:border-box}:host([data-size=sm]){--_stat-value-fs: var(--ius-fs-h3);--_stat-value-lh: var(--ius-lh-h3)}:host([data-size=lg]){--_stat-value-fs: var(--ius-fs-h1);--_stat-value-lh: var(--ius-lh-h1)}:host([data-align=center]){text-align:center;align-items:center}:host([data-interactive=true]){cursor:pointer;border-radius:var(--ius-radius-sm)}:host([data-interactive=true]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-stat__overline{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-stat__overline .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__row{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}:host([data-align=center]) .ius-stat__row{justify-content:center}.ius-stat__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_stat-value-fs);line-height:var(--_stat-value-lh);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-stat__delta{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1;font-weight:var(--ius-fw-bold);font-variant-numeric:tabular-nums}.ius-stat__delta .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__delta[data-dir=up]{color:var(--ius-success-700)}.ius-stat__delta[data-dir=down],.ius-stat__delta[data-dir=up][data-invert=true]{color:var(--ius-danger-600)}.ius-stat__delta[data-dir=down][data-invert=true]{color:var(--ius-success-700)}.ius-stat__delta-label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}.ius-stat__spark{margin-top:var(--ius-space-xxs);line-height:0}.ius-stat__caption{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}\n"] }]
|
|
13969
13969
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTone", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaLabel", required: false }] }], invertDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "invertDelta", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], deltaSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatDeltaDirective), { isSignal: true }] }], sparkSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatSparklineDirective), { isSignal: true }] }], labelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatLabelDirective), { isSignal: true }] }], deltaLabelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatDeltaLabelDirective), { isSignal: true }] }], captionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatCaptionDirective), { isSignal: true }] }] } });
|
|
13970
13970
|
/** Mapa tono → color, idéntico a valueColor/iconColor del golden. */
|
|
13971
13971
|
function toneColor(tone, kind) {
|
|
@@ -14047,7 +14047,7 @@ const DEFAULT_W = {
|
|
|
14047
14047
|
};
|
|
14048
14048
|
/** Alturas relativas de las barras del chart (patrón estable, no aleatorio). */
|
|
14049
14049
|
const CHART_BARS = ['52%', '78%', '40%', '96%', '64%', '84%', '48%'];
|
|
14050
|
-
const toCss = (v) => v == null ? undefined : typeof v === 'number' ? `${v}px` : v;
|
|
14050
|
+
const toCss$1 = (v) => v == null ? undefined : typeof v === 'number' ? `${v}px` : v;
|
|
14051
14051
|
/**
|
|
14052
14052
|
* Skeleton — Ius Design v2 (familia feedback).
|
|
14053
14053
|
*
|
|
@@ -14101,18 +14101,18 @@ class SkeletonComponent {
|
|
|
14101
14101
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
14102
14102
|
this.anim = computed(() => this.animation() === 'none' ? null : this.animation(), /* @ts-ignore */
|
|
14103
14103
|
...(ngDevMode ? [{ debugName: "anim" }] : /* istanbul ignore next */ []));
|
|
14104
|
-
this.gapCss = computed(() => toCss(this.gap()), /* @ts-ignore */
|
|
14104
|
+
this.gapCss = computed(() => toCss$1(this.gap()), /* @ts-ignore */
|
|
14105
14105
|
...(ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []));
|
|
14106
|
-
this.radiusCss = computed(() => toCss(this.radius()), /* @ts-ignore */
|
|
14106
|
+
this.radiusCss = computed(() => toCss$1(this.radius()), /* @ts-ignore */
|
|
14107
14107
|
...(ngDevMode ? [{ debugName: "radiusCss" }] : /* istanbul ignore next */ []));
|
|
14108
|
-
this.widthCss = computed(() => toCss(this.width() ?? DEFAULT_W[this.variant()] ?? '100%'), /* @ts-ignore */
|
|
14108
|
+
this.widthCss = computed(() => toCss$1(this.width() ?? DEFAULT_W[this.variant()] ?? '100%'), /* @ts-ignore */
|
|
14109
14109
|
...(ngDevMode ? [{ debugName: "widthCss" }] : /* istanbul ignore next */ []));
|
|
14110
|
-
this.heightCss = computed(() => toCss(this.height() ?? DEFAULT_H[this.variant()]), /* @ts-ignore */
|
|
14110
|
+
this.heightCss = computed(() => toCss$1(this.height() ?? DEFAULT_H[this.variant()]), /* @ts-ignore */
|
|
14111
14111
|
...(ngDevMode ? [{ debugName: "heightCss" }] : /* istanbul ignore next */ []));
|
|
14112
14112
|
/** Líneas del `text` multilínea: ancho por línea (la última corta). */
|
|
14113
14113
|
this.textLines = computed(() => {
|
|
14114
14114
|
const n = Math.max(1, this.lines());
|
|
14115
|
-
return Array.from({ length: n }, (_, i) => i === n - 1 && n > 1 ? toCss(this.lastLineWidth()) : this.widthCss());
|
|
14115
|
+
return Array.from({ length: n }, (_, i) => i === n - 1 && n > 1 ? toCss$1(this.lastLineWidth()) : this.widthCss());
|
|
14116
14116
|
}, /* @ts-ignore */
|
|
14117
14117
|
...(ngDevMode ? [{ debugName: "textLines" }] : /* istanbul ignore next */ []));
|
|
14118
14118
|
/** Barras del `chart`: altura relativa por barra (patrón estable). */
|
|
@@ -14121,17 +14121,17 @@ class SkeletonComponent {
|
|
|
14121
14121
|
return Array.from({ length: n }, (_, i) => CHART_BARS[i % CHART_BARS.length]);
|
|
14122
14122
|
}, /* @ts-ignore */
|
|
14123
14123
|
...(ngDevMode ? [{ debugName: "chartBars" }] : /* istanbul ignore next */ []));
|
|
14124
|
-
this.chartHeightCss = computed(() => toCss(this.height() ?? DEFAULT_H.chart), /* @ts-ignore */
|
|
14124
|
+
this.chartHeightCss = computed(() => toCss$1(this.height() ?? DEFAULT_H.chart), /* @ts-ignore */
|
|
14125
14125
|
...(ngDevMode ? [{ debugName: "chartHeightCss" }] : /* istanbul ignore next */ []));
|
|
14126
|
-
this.chartWidthCss = computed(() => toCss(this.width() ?? '100%'), /* @ts-ignore */
|
|
14126
|
+
this.chartWidthCss = computed(() => toCss$1(this.width() ?? '100%'), /* @ts-ignore */
|
|
14127
14127
|
...(ngDevMode ? [{ debugName: "chartWidthCss" }] : /* istanbul ignore next */ []));
|
|
14128
14128
|
}
|
|
14129
14129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SkeletonComponent, isStandalone: true, selector: "ius-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, lastLineWidth: { classPropertyName: "lastLineWidth", publicName: "lastLineWidth", isSignal: true, isRequired: false, transformFunction: null }, bars: { classPropertyName: "bars", publicName: "bars", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ius-skeleton-host" }, ngImport: i0, template: "@if (!loading()) {\
|
|
14130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SkeletonComponent, isStandalone: true, selector: "ius-skeleton", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, radius: { classPropertyName: "radius", publicName: "radius", isSignal: true, isRequired: false, transformFunction: null }, lines: { classPropertyName: "lines", publicName: "lines", isSignal: true, isRequired: false, transformFunction: null }, lastLineWidth: { classPropertyName: "lastLineWidth", publicName: "lastLineWidth", isSignal: true, isRequired: false, transformFunction: null }, bars: { classPropertyName: "bars", publicName: "bars", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ius-skeleton-host" }, ngImport: i0, template: "@if (!loading()) {\n <!-- Cargado: el contenido real reemplaza al esqueleto (modo envoltorio). -->\n <ng-content />\n} @else if (variant() === 'chart') {\n <!-- Fila de barras verticales que insin\u00FAan una gr\u00E1fica. -->\n <span\n class=\"ius-skeleton-chart\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [style.gap]=\"gapCss()\"\n [style.height]=\"chartHeightCss()\"\n [style.width]=\"chartWidthCss()\"\n >\n @for (barHeight of chartBars(); track $index) {\n <span\n class=\"ius-skeleton\"\n data-variant=\"chart-bar\"\n [attr.data-anim]=\"anim()\"\n [style.height]=\"barHeight\"\n ></span>\n }\n </span>\n} @else if (variant() === 'text' && lines() > 1) {\n <!-- Texto multil\u00EDnea: la \u00FAltima l\u00EDnea m\u00E1s corta. -->\n <span\n class=\"ius-skeleton-text\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [style.gap]=\"gapCss()\"\n >\n @for (lineWidth of textLines(); track $index) {\n <span\n class=\"ius-skeleton\"\n [attr.data-variant]=\"variant()\"\n [attr.data-anim]=\"anim()\"\n [style.width]=\"lineWidth\"\n [style.height]=\"heightCss()\"\n [style.border-radius]=\"radiusCss()\"\n ></span>\n }\n </span>\n} @else {\n <!-- Caso simple: una sola pieza. -->\n <span\n class=\"ius-skeleton\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-anim]=\"anim()\"\n [style.width]=\"widthCss()\"\n [style.height]=\"heightCss()\"\n [style.border-radius]=\"radiusCss()\"\n ></span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-skeleton{display:block;position:relative;overflow:hidden;background:var(--ius-neutral-3);border-radius:var(--ius-radius-sm);flex:none;-webkit-user-select:none;user-select:none}.ius-skeleton[data-anim=shimmer]:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--ius-neutral-white) 70%,transparent) 50%,transparent 100%);animation:ius-skeleton-shimmer 1.4s ease-in-out infinite}@keyframes ius-skeleton-shimmer{to{transform:translate(100%)}}.ius-skeleton[data-anim=pulse]{animation:ius-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ius-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.ius-skeleton[data-variant=circle],.ius-skeleton[data-variant=pill]{border-radius:var(--ius-radius-pill)}.ius-skeleton[data-variant=button]{border-radius:var(--ius-radius-lg)}.ius-skeleton[data-variant=rect]{border-radius:var(--ius-radius-md)}.ius-skeleton-text{display:flex;flex-direction:column}.ius-skeleton-chart{display:flex;align-items:flex-end}.ius-skeleton-chart .ius-skeleton{flex:1 1 0;border-radius:var(--ius-radius-sm)}@media(prefers-reduced-motion:reduce){.ius-skeleton[data-anim=shimmer]:after{animation:none}.ius-skeleton[data-anim=pulse]{animation:none;opacity:.85}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14131
14131
|
}
|
|
14132
14132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
14133
14133
|
type: Component,
|
|
14134
|
-
args: [{ selector: 'ius-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-skeleton-host' }, template: "@if (!loading()) {\
|
|
14134
|
+
args: [{ selector: 'ius-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-skeleton-host' }, template: "@if (!loading()) {\n <!-- Cargado: el contenido real reemplaza al esqueleto (modo envoltorio). -->\n <ng-content />\n} @else if (variant() === 'chart') {\n <!-- Fila de barras verticales que insin\u00FAan una gr\u00E1fica. -->\n <span\n class=\"ius-skeleton-chart\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [style.gap]=\"gapCss()\"\n [style.height]=\"chartHeightCss()\"\n [style.width]=\"chartWidthCss()\"\n >\n @for (barHeight of chartBars(); track $index) {\n <span\n class=\"ius-skeleton\"\n data-variant=\"chart-bar\"\n [attr.data-anim]=\"anim()\"\n [style.height]=\"barHeight\"\n ></span>\n }\n </span>\n} @else if (variant() === 'text' && lines() > 1) {\n <!-- Texto multil\u00EDnea: la \u00FAltima l\u00EDnea m\u00E1s corta. -->\n <span\n class=\"ius-skeleton-text\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [style.gap]=\"gapCss()\"\n >\n @for (lineWidth of textLines(); track $index) {\n <span\n class=\"ius-skeleton\"\n [attr.data-variant]=\"variant()\"\n [attr.data-anim]=\"anim()\"\n [style.width]=\"lineWidth\"\n [style.height]=\"heightCss()\"\n [style.border-radius]=\"radiusCss()\"\n ></span>\n }\n </span>\n} @else {\n <!-- Caso simple: una sola pieza. -->\n <span\n class=\"ius-skeleton\"\n role=\"status\"\n aria-busy=\"true\"\n aria-live=\"polite\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-variant]=\"variant()\"\n [attr.data-anim]=\"anim()\"\n [style.width]=\"widthCss()\"\n [style.height]=\"heightCss()\"\n [style.border-radius]=\"radiusCss()\"\n ></span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-skeleton{display:block;position:relative;overflow:hidden;background:var(--ius-neutral-3);border-radius:var(--ius-radius-sm);flex:none;-webkit-user-select:none;user-select:none}.ius-skeleton[data-anim=shimmer]:after{content:\"\";position:absolute;inset:0;transform:translate(-100%);background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--ius-neutral-white) 70%,transparent) 50%,transparent 100%);animation:ius-skeleton-shimmer 1.4s ease-in-out infinite}@keyframes ius-skeleton-shimmer{to{transform:translate(100%)}}.ius-skeleton[data-anim=pulse]{animation:ius-skeleton-pulse 1.5s ease-in-out infinite}@keyframes ius-skeleton-pulse{0%,to{opacity:1}50%{opacity:.45}}.ius-skeleton[data-variant=circle],.ius-skeleton[data-variant=pill]{border-radius:var(--ius-radius-pill)}.ius-skeleton[data-variant=button]{border-radius:var(--ius-radius-lg)}.ius-skeleton[data-variant=rect]{border-radius:var(--ius-radius-md)}.ius-skeleton-text{display:flex;flex-direction:column}.ius-skeleton-chart{display:flex;align-items:flex-end}.ius-skeleton-chart .ius-skeleton{flex:1 1 0;border-radius:var(--ius-radius-sm)}@media(prefers-reduced-motion:reduce){.ius-skeleton[data-anim=shimmer]:after{animation:none}.ius-skeleton[data-anim=pulse]{animation:none;opacity:.85}}\n"] }]
|
|
14135
14135
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], radius: [{ type: i0.Input, args: [{ isSignal: true, alias: "radius", required: false }] }], lines: [{ type: i0.Input, args: [{ isSignal: true, alias: "lines", required: false }] }], lastLineWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastLineWidth", required: false }] }], bars: [{ type: i0.Input, args: [{ isSignal: true, alias: "bars", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
14136
14136
|
|
|
14137
14137
|
/** Breadcrumb proyectado (solo detalle): `<ius-breadcrumb iusPageHeaderBreadcrumb />`. */
|
|
@@ -14261,7 +14261,7 @@ class PageHeaderComponent {
|
|
|
14261
14261
|
...(ngDevMode ? [{ debugName: "backInBreadcrumb" }] : /* istanbul ignore next */ []));
|
|
14262
14262
|
}
|
|
14263
14263
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14264
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PageHeaderComponent, isStandalone: true, selector: "ius-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, titleLevel: { classPropertyName: "titleLevel", publicName: "titleLevel", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { properties: { "attr.data-divider": "divider() ? 'true' : null", "attr.data-surface": "surface() ? 'true' : null" }, classAttribute: "ius-pageheader" }, queries: [{ propertyName: "breadcrumbRef", first: true, predicate: IusPageHeaderBreadcrumbDirective, descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: IusPageHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusPageHeaderToolbarDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusPageHeaderOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusPageHeaderTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusPageHeaderSubtitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\
|
|
14264
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PageHeaderComponent, isStandalone: true, selector: "ius-page-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, titleLevel: { classPropertyName: "titleLevel", publicName: "titleLevel", isSignal: true, isRequired: false, transformFunction: null }, showBack: { classPropertyName: "showBack", publicName: "showBack", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { back: "back" }, host: { properties: { "attr.data-divider": "divider() ? 'true' : null", "attr.data-surface": "surface() ? 'true' : null" }, classAttribute: "ius-pageheader" }, queries: [{ propertyName: "breadcrumbRef", first: true, predicate: IusPageHeaderBreadcrumbDirective, descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: IusPageHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusPageHeaderToolbarDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusPageHeaderOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusPageHeaderTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusPageHeaderSubtitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\n@if (hasBreadcrumb()) {\n <div class=\"ius-pageheader__bc\">\n @if (backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\n </div>\n}\n\n<div class=\"ius-pageheader__top\">\n <div class=\"ius-pageheader__lead\">\n @if (showBack() && !backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <div class=\"ius-pageheader__titles\">\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\n @if (overline() != null || hasOverlineSlot()) {\n <span class=\"ius-pageheader__overline\">\n @if (overline() != null) {\n {{ overline() }}\n } @else {\n <ng-content select=\"[iusPageHeaderOverline]\" />\n }\n </span>\n }\n @if (title() != null || hasTitleSlot()) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">\n @if (title() != null) {\n {{ title() }}\n } @else {\n <ng-content select=\"[iusPageHeaderTitle]\" />\n }\n </h1>\n }\n @if (subtitle() != null || hasSubtitleSlot()) {\n <p class=\"ius-pageheader__subtitle\">\n @if (subtitle() != null) {\n {{ subtitle() }}\n } @else {\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\n }\n </p>\n }\n </div>\n </div>\n @if (hasActions()) {\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\n }\n</div>\n\n@if (hasToolbar()) {\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14265
14265
|
}
|
|
14266
14266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
14267
14267
|
type: Component,
|
|
@@ -14269,10 +14269,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14269
14269
|
class: 'ius-pageheader',
|
|
14270
14270
|
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
14271
14271
|
'[attr.data-surface]': "surface() ? 'true' : null",
|
|
14272
|
-
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\
|
|
14272
|
+
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\n@if (hasBreadcrumb()) {\n <div class=\"ius-pageheader__bc\">\n @if (backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\n </div>\n}\n\n<div class=\"ius-pageheader__top\">\n <div class=\"ius-pageheader__lead\">\n @if (showBack() && !backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <div class=\"ius-pageheader__titles\">\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\n @if (overline() != null || hasOverlineSlot()) {\n <span class=\"ius-pageheader__overline\">\n @if (overline() != null) {\n {{ overline() }}\n } @else {\n <ng-content select=\"[iusPageHeaderOverline]\" />\n }\n </span>\n }\n @if (title() != null || hasTitleSlot()) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">\n @if (title() != null) {\n {{ title() }}\n } @else {\n <ng-content select=\"[iusPageHeaderTitle]\" />\n }\n </h1>\n }\n @if (subtitle() != null || hasSubtitleSlot()) {\n <p class=\"ius-pageheader__subtitle\">\n @if (subtitle() != null) {\n {{ subtitle() }}\n } @else {\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\n }\n </p>\n }\n </div>\n </div>\n @if (hasActions()) {\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\n }\n</div>\n\n@if (hasToolbar()) {\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}\n"] }]
|
|
14273
14273
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], titleLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleLevel", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], breadcrumbRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderBreadcrumbDirective), { isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderActionsDirective), { isSignal: true }] }], toolbarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderToolbarDirective), { isSignal: true }] }], overlineRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderOverlineDirective), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderTitleDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderSubtitleDirective), { isSignal: true }] }] } });
|
|
14274
14274
|
|
|
14275
|
-
let uid$
|
|
14275
|
+
let uid$5 = 0;
|
|
14276
14276
|
/** `min`/`max`/`step` llegan como número o como atributo de texto; vacío = sin valor.
|
|
14277
14277
|
* (Declaración de función: el compilador exige un transform analizable estáticamente.) */
|
|
14278
14278
|
function numeroOpcional(v) {
|
|
@@ -14343,7 +14343,7 @@ class NumberFieldComponent {
|
|
|
14343
14343
|
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
14344
14344
|
this.focused = signal(false, /* @ts-ignore */
|
|
14345
14345
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
14346
|
-
this.inputId = `ius-num-${uid$
|
|
14346
|
+
this.inputId = `ius-num-${uid$5++}`;
|
|
14347
14347
|
this.helpId = `${this.inputId}-help`;
|
|
14348
14348
|
this.atMax = computed(() => {
|
|
14349
14349
|
const max = this.maxState();
|
|
@@ -14573,7 +14573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14573
14573
|
type: Directive,
|
|
14574
14574
|
args: [{ selector: '[iusFormFooter]', standalone: true }]
|
|
14575
14575
|
}] });
|
|
14576
|
-
let uid$
|
|
14576
|
+
let uid$4 = 0;
|
|
14577
14577
|
/**
|
|
14578
14578
|
* Form — Ius Design v2 (familia layout).
|
|
14579
14579
|
*
|
|
@@ -14648,7 +14648,7 @@ class FormComponent {
|
|
|
14648
14648
|
...(ngDevMode ? [{ debugName: "errores" }] : /* istanbul ignore next */ []));
|
|
14649
14649
|
this.hasErrors = computed(() => this.errores().length > 0, /* @ts-ignore */
|
|
14650
14650
|
...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
|
|
14651
|
-
this.formId = `ius-form-${uid$
|
|
14651
|
+
this.formId = `ius-form-${uid$4++}`;
|
|
14652
14652
|
// ── Coordinación single-open de las secciones colapsables ──────────────
|
|
14653
14653
|
/** Sección colapsable abierta en modo `accordion` (`null` = todas cerradas). */
|
|
14654
14654
|
this.openSectionId = signal(null, /* @ts-ignore */
|
|
@@ -14688,7 +14688,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14688
14688
|
args: [{ selector: 'ius-form', standalone: true, imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\r\n @if (hasErrors()) {\r\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\r\n <ul class=\"ius-form__summary-list\">\r\n @for (e of errores(); track e.field ?? $index) {\r\n <li>\r\n @if (e.field; as field) {\r\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\r\n } @else {\r\n {{ e.label || '' }}\r\n }\r\n @if (e.message) {\r\n \u2014 {{ e.message }}\r\n }\r\n </li>\r\n }\r\n </ul>\r\n </ius-alert>\r\n }\r\n\r\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\r\n <ng-content />\r\n </div>\r\n\r\n @if (footer()) {\r\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\r\n @if (hasFooterSlot()) {\r\n <ng-content select=\"[iusFormFooter]\" />\r\n } @else {\r\n @if (showCancel()) {\r\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\r\n }\r\n <ius-button\r\n [variant]=\"submitVariant()\"\r\n type=\"submit\"\r\n [loading]=\"submitting()\"\r\n [disabled]=\"submitDisabled()\"\r\n [label]=\"submitLabel()\"\r\n />\r\n }\r\n </div>\r\n }\r\n</form>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"] }]
|
|
14689
14689
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], errorSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorSummary", required: false }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submitVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitVariant", required: false }] }], cancelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelVariant", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], submitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitDisabled", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], sectionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionVariant", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusFormFooterDirective), { isSignal: true }] }] } });
|
|
14690
14690
|
|
|
14691
|
-
let uid$
|
|
14691
|
+
let uid$3 = 0;
|
|
14692
14692
|
/**
|
|
14693
14693
|
* FormSection — agrupa campos bajo un título (opcionalmente colapsable).
|
|
14694
14694
|
*
|
|
@@ -14721,7 +14721,7 @@ class FormSectionComponent {
|
|
|
14721
14721
|
this.columns = input(undefined, /* @ts-ignore */
|
|
14722
14722
|
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14723
14723
|
this.cuerpo = viewChild.required('cuerpo');
|
|
14724
|
-
this.sectionId = `ius-form-sec-${uid$
|
|
14724
|
+
this.sectionId = `ius-form-sec-${uid$3++}`;
|
|
14725
14725
|
this.colsEfectivas = computed(() => this.columns() ?? this.form?.columns() ?? 'auto', /* @ts-ignore */
|
|
14726
14726
|
...(ngDevMode ? [{ debugName: "colsEfectivas" }] : /* istanbul ignore next */ []));
|
|
14727
14727
|
this.variantEfectiva = computed(() => this.variant() ?? this.form?.sectionVariant() ?? 'contained', /* @ts-ignore */
|
|
@@ -15068,7 +15068,7 @@ function chartPrefersReducedMotion() {
|
|
|
15068
15068
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
15069
15069
|
}
|
|
15070
15070
|
|
|
15071
|
-
let uid$
|
|
15071
|
+
let uid$2 = 0;
|
|
15072
15072
|
/**
|
|
15073
15073
|
* Sparkline — Ius Design v2 (familia charts).
|
|
15074
15074
|
*
|
|
@@ -15121,7 +15121,7 @@ class SparklineComponent {
|
|
|
15121
15121
|
this.ariaLabel = input(/* @ts-ignore */
|
|
15122
15122
|
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
15123
15123
|
/** Id del degradado del área, único por instancia (igual que `gid` del golden). */
|
|
15124
|
-
this.gid = `iussp-${++uid$
|
|
15124
|
+
this.gid = `iussp-${++uid$2}`;
|
|
15125
15125
|
/** Solo valores numéricos finitos (el golden descarta null/NaN antes de dibujar). */
|
|
15126
15126
|
this.vals = computed(() => (this.data() ?? []).filter((v) => v != null && Number.isFinite(v)), /* @ts-ignore */
|
|
15127
15127
|
...(ngDevMode ? [{ debugName: "vals" }] : /* istanbul ignore next */ []));
|
|
@@ -15200,7 +15200,7 @@ class SparklineComponent {
|
|
|
15200
15200
|
...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
|
|
15201
15201
|
}
|
|
15202
15202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SparklineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15203
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SparklineComponent, isStandalone: true, selector: "ius-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "width()", "style.height.px": "height()" }, classAttribute: "ius-spark" }, ngImport: i0, template: "<!-- Sin datos el golden deja el span vac\u00EDo con su caja (width/height van en el host). -->\n@if (hasData()) {\n <svg\n class=\"ius-spark__svg\"\n [attr.width]=\"width()\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel() || null\"\n >\n @if (variant() === 'bar') {\n <g>\n @for (b of bars(); track $index) {\n <rect\n [attr.x]=\"b.x\"\n [attr.y]=\"b.y\"\n [attr.width]=\"b.w\"\n [attr.height]=\"b.h\"\n [attr.rx]=\"b.rx\"\n [attr.fill]=\"color()\"\n [attr.fill-opacity]=\"b.opacity\"\n />\n }\n </g>\n } @else {\n <g>\n @if (area()) {\n <defs>\n <linearGradient [attr.id]=\"gid\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.24\" />\n <stop offset=\"100%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.02\" />\n </linearGradient>\n </defs>\n <path [attr.d]=\"dArea()\" [attr.fill]=\"'url(#' + gid + ')'\" />\n }\n <path class=\"ius-spark__line\" [attr.d]=\"dLine()\" [attr.stroke]=\"color()\" [attr.stroke-width]=\"strokeWidth()\" />\n @if (showDot()) {\n @if (last(); as p) {\n <circle class=\"ius-spark__dot\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" [attr.r]=\"dotR()\" [attr.fill]=\"color()\" stroke-width=\"1\" />\n }\n }\n </g>\n }\n </svg>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0;vertical-align:middle;-webkit-user-select:none;user-select:none}.ius-spark__svg{display:block;overflow:visible}.ius-spark__line{fill:none;stroke-linecap:round;stroke-linejoin:round}.ius-spark__dot{stroke:var(--ius-surface-card)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SparklineComponent, isStandalone: true, selector: "ius-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, trend: { classPropertyName: "trend", publicName: "trend", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, showDot: { classPropertyName: "showDot", publicName: "showDot", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "width()", "style.height.px": "height()" }, classAttribute: "ius-spark" }, ngImport: i0, template: "<!-- Sin datos el golden deja el span vac\u00EDo con su caja (width/height van en el host). -->\r\n@if (hasData()) {\r\n <svg\r\n class=\"ius-spark__svg\"\r\n [attr.width]=\"width()\"\r\n [attr.height]=\"height()\"\r\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (variant() === 'bar') {\r\n <g>\r\n @for (b of bars(); track $index) {\r\n <rect\r\n [attr.x]=\"b.x\"\r\n [attr.y]=\"b.y\"\r\n [attr.width]=\"b.w\"\r\n [attr.height]=\"b.h\"\r\n [attr.rx]=\"b.rx\"\r\n [attr.fill]=\"color()\"\r\n [attr.fill-opacity]=\"b.opacity\"\r\n />\r\n }\r\n </g>\r\n } @else {\r\n <g>\r\n @if (area()) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.24\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.02\" />\r\n </linearGradient>\r\n </defs>\r\n <path [attr.d]=\"dArea()\" [attr.fill]=\"'url(#' + gid + ')'\" />\r\n }\r\n <path class=\"ius-spark__line\" [attr.d]=\"dLine()\" [attr.stroke]=\"color()\" [attr.stroke-width]=\"strokeWidth()\" />\r\n @if (showDot()) {\r\n @if (last(); as p) {\r\n <circle class=\"ius-spark__dot\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" [attr.r]=\"dotR()\" [attr.fill]=\"color()\" stroke-width=\"1\" />\r\n }\r\n }\r\n </g>\r\n }\r\n </svg>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0;vertical-align:middle;-webkit-user-select:none;user-select:none}.ius-spark__svg{display:block;overflow:visible}.ius-spark__line{fill:none;stroke-linecap:round;stroke-linejoin:round}.ius-spark__dot{stroke:var(--ius-surface-card)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15204
15204
|
}
|
|
15205
15205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SparklineComponent, decorators: [{
|
|
15206
15206
|
type: Component,
|
|
@@ -15208,10 +15208,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15208
15208
|
class: 'ius-spark',
|
|
15209
15209
|
'[style.width.px]': 'width()',
|
|
15210
15210
|
'[style.height.px]': 'height()',
|
|
15211
|
-
}, template: "<!-- Sin datos el golden deja el span vac\u00EDo con su caja (width/height van en el host). -->\n@if (hasData()) {\n <svg\n class=\"ius-spark__svg\"\n [attr.width]=\"width()\"\n [attr.height]=\"height()\"\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel() || null\"\n >\n @if (variant() === 'bar') {\n <g>\n @for (b of bars(); track $index) {\n <rect\n [attr.x]=\"b.x\"\n [attr.y]=\"b.y\"\n [attr.width]=\"b.w\"\n [attr.height]=\"b.h\"\n [attr.rx]=\"b.rx\"\n [attr.fill]=\"color()\"\n [attr.fill-opacity]=\"b.opacity\"\n />\n }\n </g>\n } @else {\n <g>\n @if (area()) {\n <defs>\n <linearGradient [attr.id]=\"gid\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.24\" />\n <stop offset=\"100%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.02\" />\n </linearGradient>\n </defs>\n <path [attr.d]=\"dArea()\" [attr.fill]=\"'url(#' + gid + ')'\" />\n }\n <path class=\"ius-spark__line\" [attr.d]=\"dLine()\" [attr.stroke]=\"color()\" [attr.stroke-width]=\"strokeWidth()\" />\n @if (showDot()) {\n @if (last(); as p) {\n <circle class=\"ius-spark__dot\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" [attr.r]=\"dotR()\" [attr.fill]=\"color()\" stroke-width=\"1\" />\n }\n }\n </g>\n }\n </svg>\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0;vertical-align:middle;-webkit-user-select:none;user-select:none}.ius-spark__svg{display:block;overflow:visible}.ius-spark__line{fill:none;stroke-linecap:round;stroke-linejoin:round}.ius-spark__dot{stroke:var(--ius-surface-card)}\n"] }]
|
|
15211
|
+
}, template: "<!-- Sin datos el golden deja el span vac\u00EDo con su caja (width/height van en el host). -->\r\n@if (hasData()) {\r\n <svg\r\n class=\"ius-spark__svg\"\r\n [attr.width]=\"width()\"\r\n [attr.height]=\"height()\"\r\n [attr.viewBox]=\"'0 0 ' + width() + ' ' + height()\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n >\r\n @if (variant() === 'bar') {\r\n <g>\r\n @for (b of bars(); track $index) {\r\n <rect\r\n [attr.x]=\"b.x\"\r\n [attr.y]=\"b.y\"\r\n [attr.width]=\"b.w\"\r\n [attr.height]=\"b.h\"\r\n [attr.rx]=\"b.rx\"\r\n [attr.fill]=\"color()\"\r\n [attr.fill-opacity]=\"b.opacity\"\r\n />\r\n }\r\n </g>\r\n } @else {\r\n <g>\r\n @if (area()) {\r\n <defs>\r\n <linearGradient [attr.id]=\"gid\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.24\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"color()\" stop-opacity=\"0.02\" />\r\n </linearGradient>\r\n </defs>\r\n <path [attr.d]=\"dArea()\" [attr.fill]=\"'url(#' + gid + ')'\" />\r\n }\r\n <path class=\"ius-spark__line\" [attr.d]=\"dLine()\" [attr.stroke]=\"color()\" [attr.stroke-width]=\"strokeWidth()\" />\r\n @if (showDot()) {\r\n @if (last(); as p) {\r\n <circle class=\"ius-spark__dot\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" [attr.r]=\"dotR()\" [attr.fill]=\"color()\" stroke-width=\"1\" />\r\n }\r\n }\r\n </g>\r\n }\r\n </svg>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-block;line-height:0;vertical-align:middle;-webkit-user-select:none;user-select:none}.ius-spark__svg{display:block;overflow:visible}.ius-spark__line{fill:none;stroke-linecap:round;stroke-linejoin:round}.ius-spark__dot{stroke:var(--ius-surface-card)}\n"] }]
|
|
15212
15212
|
}], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], trend: [{ type: i0.Input, args: [{ isSignal: true, alias: "trend", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], showDot: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDot", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
15213
15213
|
|
|
15214
|
-
let uid = 0;
|
|
15214
|
+
let uid$1 = 0;
|
|
15215
15215
|
/** Duración del dibujado de la línea (WAAPI) y red de seguridad que la deja sólida. */
|
|
15216
15216
|
const ANIM_MS = 820;
|
|
15217
15217
|
const ANIM_SAFETY_MS = 950;
|
|
@@ -15328,7 +15328,7 @@ class LineChartComponent {
|
|
|
15328
15328
|
/** Categoría bajo el cursor (tooltip + guía). */
|
|
15329
15329
|
this.active = signal(null, /* @ts-ignore */
|
|
15330
15330
|
...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
15331
|
-
this.uidStr = `iuslc-${++uid}`;
|
|
15331
|
+
this.uidStr = `iuslc-${++uid$1}`;
|
|
15332
15332
|
this.hasData = computed(() => {
|
|
15333
15333
|
const cats = this.categories();
|
|
15334
15334
|
const series = this.series();
|
|
@@ -15629,7 +15629,7 @@ class LineChartComponent {
|
|
|
15629
15629
|
this.animations = [];
|
|
15630
15630
|
}
|
|
15631
15631
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LineChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LineChartComponent, isStandalone: true, selector: "ius-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, yAxisWidth: { classPropertyName: "yAxisWidth", publicName: "yAxisWidth", isSignal: true, isRequired: false, transformFunction: null }, showXAxis: { classPropertyName: "showXAxis", publicName: "showXAxis", isSignal: true, isRequired: false, transformFunction: null }, showYAxis: { classPropertyName: "showYAxis", publicName: "showYAxis", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, yTicks: { classPropertyName: "yTicks", publicName: "yTicks", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-animate": "animate() && !loading() ? 'true' : 'false'", "style.width.px": "width() ?? null" }, classAttribute: "ius-chart" }, ngImport: i0, template: "@if (!loading() && !hasData()) {\n <!-- Vac\u00EDo: EmptyState compacto (o la plantilla propia del consumidor), a la altura del \u00E1rea. -->\n <div class=\"ius-chart__block\" [style.height.px]=\"frame().H\">\n @if (emptyTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n <ius-empty-state variant=\"no-data\" size=\"compact\" [title]=\"emptyTitle()\" [description]=\"emptyDescription()\" />\n }\n </div>\n} @else {\n @if (legendOn() && !loading()) {\n <div class=\"ius-chart__legend\">\n @for (l of lines(); track l.key) {\n <span class=\"ius-chart__leg\">\n <span class=\"ius-chart__dot\" [style.background]=\"l.color\"></span>\n {{ l.label }}\n </span>\n }\n </div>\n }\n\n <div class=\"ius-chart__plot\">\n <svg\n class=\"ius-chart__svg\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (mousemove)=\"onMove($event)\"\n (mouseleave)=\"onLeave()\"\n >\n <defs>\n @for (l of lines(); track l.key) {\n <linearGradient [attr.id]=\"l.gradId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.22\" />\n <stop offset=\"100%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.02\" />\n </linearGradient>\n }\n </defs>\n\n <!-- grilla -->\n @if (showGrid() && !loading()) {\n <g class=\"ius-chart__grid\">\n @for (y of gridYs(); track $index) {\n <line [attr.x1]=\"frame().mL\" [attr.y1]=\"y\" [attr.x2]=\"frame().mL + frame().innerW\" [attr.y2]=\"y\" />\n }\n </g>\n }\n\n <!-- eje Y -->\n @if (showYAxis()) {\n <g class=\"ius-chart__tick\" text-anchor=\"end\" dominant-baseline=\"middle\">\n @for (t of yTickItems(); track $index) {\n <text [attr.x]=\"frame().mL - 8\" [attr.y]=\"t.y\">{{ t.text }}</text>\n }\n </g>\n }\n\n <!-- skeleton -->\n @if (loading()) {\n <g>\n <rect\n class=\"ius-chart__skel\"\n [attr.x]=\"frame().mL\"\n [attr.y]=\"frame().mT\"\n [attr.width]=\"frame().innerW\"\n [attr.height]=\"frame().innerH\"\n rx=\"8\"\n opacity=\"0.5\"\n />\n <path class=\"ius-chart__skel--line\" [attr.d]=\"skeletonPath()\" />\n </g>\n }\n\n <!-- \u00E1reas + l\u00EDneas -->\n @if (!loading()) {\n @for (l of lines(); track l.key) {\n <g>\n @if (l.dArea) {\n <path class=\"ius-chart__area\" [attr.d]=\"l.dArea\" [attr.fill]=\"'url(#' + l.gradId + ')'\" />\n }\n <path class=\"ius-chart__line\" [attr.data-dashed]=\"l.dashed ? 'true' : null\" [attr.d]=\"l.dLine\" [attr.stroke]=\"l.color\" />\n @if (showPoints() === 'always') {\n @for (p of l.points; track $index) {\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"3.5\" [attr.fill]=\"l.color\" />\n }\n }\n </g>\n }\n }\n\n <!-- etiquetas de valor (1 serie recomendado) -->\n @if (!loading() && showValueLabels()) {\n @for (v of valueLabels(); track $index) {\n <text class=\"ius-chart__vlabel\" [attr.x]=\"v.x\" [attr.y]=\"v.y\">{{ v.text }}</text>\n }\n }\n\n <!-- gu\u00EDa vertical + puntos activos -->\n @if (activeMarks(); as am) {\n <g>\n <line class=\"ius-chart__guide\" [attr.x1]=\"am.x\" [attr.y1]=\"am.y1\" [attr.x2]=\"am.x\" [attr.y2]=\"am.y2\" />\n @for (p of am.points; track p.key) {\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"4.5\" [attr.fill]=\"p.color\" />\n }\n </g>\n }\n\n <!-- eje X -->\n @if (showXAxis() && !loading()) {\n <g class=\"ius-chart__xlabel\" text-anchor=\"middle\">\n <line\n class=\"ius-chart__axisline\"\n [attr.x1]=\"frame().mL\"\n [attr.y1]=\"frame().mT + frame().innerH\"\n [attr.x2]=\"frame().mL + frame().innerW\"\n [attr.y2]=\"frame().mT + frame().innerH\"\n />\n @for (x of xLabels(); track $index) {\n <text [attr.x]=\"x.x\" [attr.y]=\"frame().mT + frame().innerH + 18\">{{ x.text }}</text>\n }\n </g>\n }\n </svg>\n\n <!-- tooltip (HTML) -->\n @if (tooltip(); as tip) {\n <div class=\"ius-chart__tip\" [style.left.%]=\"tip.left\" [style.top.%]=\"tip.top\">\n <div class=\"ius-chart__tip-x\">{{ tip.title }}</div>\n @for (r of tip.rows; track r.key) {\n <div class=\"ius-chart__tip-row\">\n <span class=\"ius-chart__dot\" [style.background]=\"r.color\"></span>\n {{ r.label }}\n <b>{{ r.value }}</b>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;width:100%;box-sizing:border-box;font-family:var(--ius-font-body);color:var(--ius-text-primary);-webkit-user-select:none;user-select:none}.ius-chart__svg{display:block;width:100%;height:auto;overflow:visible}.ius-chart__plot{position:relative}.ius-chart__grid line{stroke:var(--ius-neutral-3);stroke-width:1;shape-rendering:crispEdges}.ius-chart__axisline{stroke:var(--ius-stroke);stroke-width:1;shape-rendering:crispEdges}.ius-chart__tick,.ius-chart__xlabel{fill:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm)}.ius-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ius-chart__line[data-dashed=true]{stroke-dasharray:6 5}.ius-chart__pt{stroke:var(--ius-surface-card);stroke-width:2}.ius-chart__vlabel{fill:var(--ius-text-secondary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);text-anchor:middle}.ius-chart__guide{stroke:var(--ius-stroke-strong);stroke-width:1;stroke-dasharray:4 4}.ius-chart__legend{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs) var(--ius-space-md);margin-bottom:var(--ius-space-sm)}.ius-chart__leg{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-chart__dot{width:10px;height:10px;border-radius:var(--ius-radius-pill);flex:0 0 auto}.ius-chart__tip{position:absolute;pointer-events:none;z-index:var(--ius-z-sticky);min-width:132px;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs) var(--ius-space-sm);transform:translate(-50%,calc(-100% - var(--ius-space-sm)))}.ius-chart__tip-x{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs);white-space:nowrap}.ius-chart__tip-row{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);white-space:nowrap}.ius-chart__tip-row b{margin-left:auto;padding-left:var(--ius-space-sm);color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-chart__skel{fill:var(--ius-neutral-2)}.ius-chart__skel--line{stroke:var(--ius-neutral-3);stroke-width:2;fill:none}.ius-chart__block{display:grid;place-items:center;min-height:160px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LineChartComponent, isStandalone: true, selector: "ius-line-chart", inputs: { categories: { classPropertyName: "categories", publicName: "categories", isSignal: true, isRequired: false, transformFunction: null }, series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, yAxisWidth: { classPropertyName: "yAxisWidth", publicName: "yAxisWidth", isSignal: true, isRequired: false, transformFunction: null }, showXAxis: { classPropertyName: "showXAxis", publicName: "showXAxis", isSignal: true, isRequired: false, transformFunction: null }, showYAxis: { classPropertyName: "showYAxis", publicName: "showYAxis", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, yTicks: { classPropertyName: "yTicks", publicName: "yTicks", isSignal: true, isRequired: false, transformFunction: null }, yMin: { classPropertyName: "yMin", publicName: "yMin", isSignal: true, isRequired: false, transformFunction: null }, yMax: { classPropertyName: "yMax", publicName: "yMax", isSignal: true, isRequired: false, transformFunction: null }, area: { classPropertyName: "area", publicName: "area", isSignal: true, isRequired: false, transformFunction: null }, curve: { classPropertyName: "curve", publicName: "curve", isSignal: true, isRequired: false, transformFunction: null }, showPoints: { classPropertyName: "showPoints", publicName: "showPoints", isSignal: true, isRequired: false, transformFunction: null }, showValueLabels: { classPropertyName: "showValueLabels", publicName: "showValueLabels", isSignal: true, isRequired: false, transformFunction: null }, showLegend: { classPropertyName: "showLegend", publicName: "showLegend", isSignal: true, isRequired: false, transformFunction: null }, showTooltip: { classPropertyName: "showTooltip", publicName: "showTooltip", isSignal: true, isRequired: false, transformFunction: null }, valueFormat: { classPropertyName: "valueFormat", publicName: "valueFormat", isSignal: true, isRequired: false, transformFunction: null }, xFormat: { classPropertyName: "xFormat", publicName: "xFormat", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, emptyTitle: { classPropertyName: "emptyTitle", publicName: "emptyTitle", isSignal: true, isRequired: false, transformFunction: null }, emptyDescription: { classPropertyName: "emptyDescription", publicName: "emptyDescription", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-animate": "animate() && !loading() ? 'true' : 'false'", "style.width.px": "width() ?? null" }, classAttribute: "ius-chart" }, ngImport: i0, template: "@if (!loading() && !hasData()) {\r\n <!-- Vac\u00EDo: EmptyState compacto (o la plantilla propia del consumidor), a la altura del \u00E1rea. -->\r\n <div class=\"ius-chart__block\" [style.height.px]=\"frame().H\">\r\n @if (emptyTemplate(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else {\r\n <ius-empty-state variant=\"no-data\" size=\"compact\" [title]=\"emptyTitle()\" [description]=\"emptyDescription()\" />\r\n }\r\n </div>\r\n} @else {\r\n @if (legendOn() && !loading()) {\r\n <div class=\"ius-chart__legend\">\r\n @for (l of lines(); track l.key) {\r\n <span class=\"ius-chart__leg\">\r\n <span class=\"ius-chart__dot\" [style.background]=\"l.color\"></span>\r\n {{ l.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-chart__plot\">\r\n <svg\r\n class=\"ius-chart__svg\"\r\n [attr.viewBox]=\"viewBox()\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (mousemove)=\"onMove($event)\"\r\n (mouseleave)=\"onLeave()\"\r\n >\r\n <defs>\r\n @for (l of lines(); track l.key) {\r\n <linearGradient [attr.id]=\"l.gradId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.22\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.02\" />\r\n </linearGradient>\r\n }\r\n </defs>\r\n\r\n <!-- grilla -->\r\n @if (showGrid() && !loading()) {\r\n <g class=\"ius-chart__grid\">\r\n @for (y of gridYs(); track $index) {\r\n <line [attr.x1]=\"frame().mL\" [attr.y1]=\"y\" [attr.x2]=\"frame().mL + frame().innerW\" [attr.y2]=\"y\" />\r\n }\r\n </g>\r\n }\r\n\r\n <!-- eje Y -->\r\n @if (showYAxis()) {\r\n <g class=\"ius-chart__tick\" text-anchor=\"end\" dominant-baseline=\"middle\">\r\n @for (t of yTickItems(); track $index) {\r\n <text [attr.x]=\"frame().mL - 8\" [attr.y]=\"t.y\">{{ t.text }}</text>\r\n }\r\n </g>\r\n }\r\n\r\n <!-- skeleton -->\r\n @if (loading()) {\r\n <g>\r\n <rect\r\n class=\"ius-chart__skel\"\r\n [attr.x]=\"frame().mL\"\r\n [attr.y]=\"frame().mT\"\r\n [attr.width]=\"frame().innerW\"\r\n [attr.height]=\"frame().innerH\"\r\n rx=\"8\"\r\n opacity=\"0.5\"\r\n />\r\n <path class=\"ius-chart__skel--line\" [attr.d]=\"skeletonPath()\" />\r\n </g>\r\n }\r\n\r\n <!-- \u00E1reas + l\u00EDneas -->\r\n @if (!loading()) {\r\n @for (l of lines(); track l.key) {\r\n <g>\r\n @if (l.dArea) {\r\n <path class=\"ius-chart__area\" [attr.d]=\"l.dArea\" [attr.fill]=\"'url(#' + l.gradId + ')'\" />\r\n }\r\n <path class=\"ius-chart__line\" [attr.data-dashed]=\"l.dashed ? 'true' : null\" [attr.d]=\"l.dLine\" [attr.stroke]=\"l.color\" />\r\n @if (showPoints() === 'always') {\r\n @for (p of l.points; track $index) {\r\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"3.5\" [attr.fill]=\"l.color\" />\r\n }\r\n }\r\n </g>\r\n }\r\n }\r\n\r\n <!-- etiquetas de valor (1 serie recomendado) -->\r\n @if (!loading() && showValueLabels()) {\r\n @for (v of valueLabels(); track $index) {\r\n <text class=\"ius-chart__vlabel\" [attr.x]=\"v.x\" [attr.y]=\"v.y\">{{ v.text }}</text>\r\n }\r\n }\r\n\r\n <!-- gu\u00EDa vertical + puntos activos -->\r\n @if (activeMarks(); as am) {\r\n <g>\r\n <line class=\"ius-chart__guide\" [attr.x1]=\"am.x\" [attr.y1]=\"am.y1\" [attr.x2]=\"am.x\" [attr.y2]=\"am.y2\" />\r\n @for (p of am.points; track p.key) {\r\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"4.5\" [attr.fill]=\"p.color\" />\r\n }\r\n </g>\r\n }\r\n\r\n <!-- eje X -->\r\n @if (showXAxis() && !loading()) {\r\n <g class=\"ius-chart__xlabel\" text-anchor=\"middle\">\r\n <line\r\n class=\"ius-chart__axisline\"\r\n [attr.x1]=\"frame().mL\"\r\n [attr.y1]=\"frame().mT + frame().innerH\"\r\n [attr.x2]=\"frame().mL + frame().innerW\"\r\n [attr.y2]=\"frame().mT + frame().innerH\"\r\n />\r\n @for (x of xLabels(); track $index) {\r\n <text [attr.x]=\"x.x\" [attr.y]=\"frame().mT + frame().innerH + 18\">{{ x.text }}</text>\r\n }\r\n </g>\r\n }\r\n </svg>\r\n\r\n <!-- tooltip (HTML) -->\r\n @if (tooltip(); as tip) {\r\n <div class=\"ius-chart__tip\" [style.left.%]=\"tip.left\" [style.top.%]=\"tip.top\">\r\n <div class=\"ius-chart__tip-x\">{{ tip.title }}</div>\r\n @for (r of tip.rows; track r.key) {\r\n <div class=\"ius-chart__tip-row\">\r\n <span class=\"ius-chart__dot\" [style.background]=\"r.color\"></span>\r\n {{ r.label }}\r\n <b>{{ r.value }}</b>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;width:100%;box-sizing:border-box;font-family:var(--ius-font-body);color:var(--ius-text-primary);-webkit-user-select:none;user-select:none}.ius-chart__svg{display:block;width:100%;height:auto;overflow:visible}.ius-chart__plot{position:relative}.ius-chart__grid line{stroke:var(--ius-neutral-3);stroke-width:1;shape-rendering:crispEdges}.ius-chart__axisline{stroke:var(--ius-stroke);stroke-width:1;shape-rendering:crispEdges}.ius-chart__tick,.ius-chart__xlabel{fill:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm)}.ius-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ius-chart__line[data-dashed=true]{stroke-dasharray:6 5}.ius-chart__pt{stroke:var(--ius-surface-card);stroke-width:2}.ius-chart__vlabel{fill:var(--ius-text-secondary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);text-anchor:middle}.ius-chart__guide{stroke:var(--ius-stroke-strong);stroke-width:1;stroke-dasharray:4 4}.ius-chart__legend{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs) var(--ius-space-md);margin-bottom:var(--ius-space-sm)}.ius-chart__leg{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-chart__dot{width:10px;height:10px;border-radius:var(--ius-radius-pill);flex:0 0 auto}.ius-chart__tip{position:absolute;pointer-events:none;z-index:var(--ius-z-sticky);min-width:132px;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs) var(--ius-space-sm);transform:translate(-50%,calc(-100% - var(--ius-space-sm)))}.ius-chart__tip-x{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs);white-space:nowrap}.ius-chart__tip-row{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);white-space:nowrap}.ius-chart__tip-row b{margin-left:auto;padding-left:var(--ius-space-sm);color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-chart__skel{fill:var(--ius-neutral-2)}.ius-chart__skel--line{stroke:var(--ius-neutral-3);stroke-width:2;fill:none}.ius-chart__block{display:grid;place-items:center;min-height:160px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15633
15633
|
}
|
|
15634
15634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LineChartComponent, decorators: [{
|
|
15635
15635
|
type: Component,
|
|
@@ -15637,9 +15637,2068 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15637
15637
|
class: 'ius-chart',
|
|
15638
15638
|
'[attr.data-animate]': "animate() && !loading() ? 'true' : 'false'",
|
|
15639
15639
|
'[style.width.px]': 'width() ?? null',
|
|
15640
|
-
}, template: "@if (!loading() && !hasData()) {\n <!-- Vac\u00EDo: EmptyState compacto (o la plantilla propia del consumidor), a la altura del \u00E1rea. -->\n <div class=\"ius-chart__block\" [style.height.px]=\"frame().H\">\n @if (emptyTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n <ius-empty-state variant=\"no-data\" size=\"compact\" [title]=\"emptyTitle()\" [description]=\"emptyDescription()\" />\n }\n </div>\n} @else {\n @if (legendOn() && !loading()) {\n <div class=\"ius-chart__legend\">\n @for (l of lines(); track l.key) {\n <span class=\"ius-chart__leg\">\n <span class=\"ius-chart__dot\" [style.background]=\"l.color\"></span>\n {{ l.label }}\n </span>\n }\n </div>\n }\n\n <div class=\"ius-chart__plot\">\n <svg\n class=\"ius-chart__svg\"\n [attr.viewBox]=\"viewBox()\"\n role=\"img\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (mousemove)=\"onMove($event)\"\n (mouseleave)=\"onLeave()\"\n >\n <defs>\n @for (l of lines(); track l.key) {\n <linearGradient [attr.id]=\"l.gradId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.22\" />\n <stop offset=\"100%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.02\" />\n </linearGradient>\n }\n </defs>\n\n <!-- grilla -->\n @if (showGrid() && !loading()) {\n <g class=\"ius-chart__grid\">\n @for (y of gridYs(); track $index) {\n <line [attr.x1]=\"frame().mL\" [attr.y1]=\"y\" [attr.x2]=\"frame().mL + frame().innerW\" [attr.y2]=\"y\" />\n }\n </g>\n }\n\n <!-- eje Y -->\n @if (showYAxis()) {\n <g class=\"ius-chart__tick\" text-anchor=\"end\" dominant-baseline=\"middle\">\n @for (t of yTickItems(); track $index) {\n <text [attr.x]=\"frame().mL - 8\" [attr.y]=\"t.y\">{{ t.text }}</text>\n }\n </g>\n }\n\n <!-- skeleton -->\n @if (loading()) {\n <g>\n <rect\n class=\"ius-chart__skel\"\n [attr.x]=\"frame().mL\"\n [attr.y]=\"frame().mT\"\n [attr.width]=\"frame().innerW\"\n [attr.height]=\"frame().innerH\"\n rx=\"8\"\n opacity=\"0.5\"\n />\n <path class=\"ius-chart__skel--line\" [attr.d]=\"skeletonPath()\" />\n </g>\n }\n\n <!-- \u00E1reas + l\u00EDneas -->\n @if (!loading()) {\n @for (l of lines(); track l.key) {\n <g>\n @if (l.dArea) {\n <path class=\"ius-chart__area\" [attr.d]=\"l.dArea\" [attr.fill]=\"'url(#' + l.gradId + ')'\" />\n }\n <path class=\"ius-chart__line\" [attr.data-dashed]=\"l.dashed ? 'true' : null\" [attr.d]=\"l.dLine\" [attr.stroke]=\"l.color\" />\n @if (showPoints() === 'always') {\n @for (p of l.points; track $index) {\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"3.5\" [attr.fill]=\"l.color\" />\n }\n }\n </g>\n }\n }\n\n <!-- etiquetas de valor (1 serie recomendado) -->\n @if (!loading() && showValueLabels()) {\n @for (v of valueLabels(); track $index) {\n <text class=\"ius-chart__vlabel\" [attr.x]=\"v.x\" [attr.y]=\"v.y\">{{ v.text }}</text>\n }\n }\n\n <!-- gu\u00EDa vertical + puntos activos -->\n @if (activeMarks(); as am) {\n <g>\n <line class=\"ius-chart__guide\" [attr.x1]=\"am.x\" [attr.y1]=\"am.y1\" [attr.x2]=\"am.x\" [attr.y2]=\"am.y2\" />\n @for (p of am.points; track p.key) {\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"4.5\" [attr.fill]=\"p.color\" />\n }\n </g>\n }\n\n <!-- eje X -->\n @if (showXAxis() && !loading()) {\n <g class=\"ius-chart__xlabel\" text-anchor=\"middle\">\n <line\n class=\"ius-chart__axisline\"\n [attr.x1]=\"frame().mL\"\n [attr.y1]=\"frame().mT + frame().innerH\"\n [attr.x2]=\"frame().mL + frame().innerW\"\n [attr.y2]=\"frame().mT + frame().innerH\"\n />\n @for (x of xLabels(); track $index) {\n <text [attr.x]=\"x.x\" [attr.y]=\"frame().mT + frame().innerH + 18\">{{ x.text }}</text>\n }\n </g>\n }\n </svg>\n\n <!-- tooltip (HTML) -->\n @if (tooltip(); as tip) {\n <div class=\"ius-chart__tip\" [style.left.%]=\"tip.left\" [style.top.%]=\"tip.top\">\n <div class=\"ius-chart__tip-x\">{{ tip.title }}</div>\n @for (r of tip.rows; track r.key) {\n <div class=\"ius-chart__tip-row\">\n <span class=\"ius-chart__dot\" [style.background]=\"r.color\"></span>\n {{ r.label }}\n <b>{{ r.value }}</b>\n </div>\n }\n </div>\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;width:100%;box-sizing:border-box;font-family:var(--ius-font-body);color:var(--ius-text-primary);-webkit-user-select:none;user-select:none}.ius-chart__svg{display:block;width:100%;height:auto;overflow:visible}.ius-chart__plot{position:relative}.ius-chart__grid line{stroke:var(--ius-neutral-3);stroke-width:1;shape-rendering:crispEdges}.ius-chart__axisline{stroke:var(--ius-stroke);stroke-width:1;shape-rendering:crispEdges}.ius-chart__tick,.ius-chart__xlabel{fill:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm)}.ius-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ius-chart__line[data-dashed=true]{stroke-dasharray:6 5}.ius-chart__pt{stroke:var(--ius-surface-card);stroke-width:2}.ius-chart__vlabel{fill:var(--ius-text-secondary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);text-anchor:middle}.ius-chart__guide{stroke:var(--ius-stroke-strong);stroke-width:1;stroke-dasharray:4 4}.ius-chart__legend{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs) var(--ius-space-md);margin-bottom:var(--ius-space-sm)}.ius-chart__leg{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-chart__dot{width:10px;height:10px;border-radius:var(--ius-radius-pill);flex:0 0 auto}.ius-chart__tip{position:absolute;pointer-events:none;z-index:var(--ius-z-sticky);min-width:132px;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs) var(--ius-space-sm);transform:translate(-50%,calc(-100% - var(--ius-space-sm)))}.ius-chart__tip-x{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs);white-space:nowrap}.ius-chart__tip-row{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);white-space:nowrap}.ius-chart__tip-row b{margin-left:auto;padding-left:var(--ius-space-sm);color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-chart__skel{fill:var(--ius-neutral-2)}.ius-chart__skel--line{stroke:var(--ius-neutral-3);stroke-width:2;fill:none}.ius-chart__block{display:grid;place-items:center;min-height:160px}\n"] }]
|
|
15640
|
+
}, template: "@if (!loading() && !hasData()) {\r\n <!-- Vac\u00EDo: EmptyState compacto (o la plantilla propia del consumidor), a la altura del \u00E1rea. -->\r\n <div class=\"ius-chart__block\" [style.height.px]=\"frame().H\">\r\n @if (emptyTemplate(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else {\r\n <ius-empty-state variant=\"no-data\" size=\"compact\" [title]=\"emptyTitle()\" [description]=\"emptyDescription()\" />\r\n }\r\n </div>\r\n} @else {\r\n @if (legendOn() && !loading()) {\r\n <div class=\"ius-chart__legend\">\r\n @for (l of lines(); track l.key) {\r\n <span class=\"ius-chart__leg\">\r\n <span class=\"ius-chart__dot\" [style.background]=\"l.color\"></span>\r\n {{ l.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-chart__plot\">\r\n <svg\r\n class=\"ius-chart__svg\"\r\n [attr.viewBox]=\"viewBox()\"\r\n role=\"img\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (mousemove)=\"onMove($event)\"\r\n (mouseleave)=\"onLeave()\"\r\n >\r\n <defs>\r\n @for (l of lines(); track l.key) {\r\n <linearGradient [attr.id]=\"l.gradId\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\r\n <stop offset=\"0%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.22\" />\r\n <stop offset=\"100%\" [attr.stop-color]=\"l.color\" stop-opacity=\"0.02\" />\r\n </linearGradient>\r\n }\r\n </defs>\r\n\r\n <!-- grilla -->\r\n @if (showGrid() && !loading()) {\r\n <g class=\"ius-chart__grid\">\r\n @for (y of gridYs(); track $index) {\r\n <line [attr.x1]=\"frame().mL\" [attr.y1]=\"y\" [attr.x2]=\"frame().mL + frame().innerW\" [attr.y2]=\"y\" />\r\n }\r\n </g>\r\n }\r\n\r\n <!-- eje Y -->\r\n @if (showYAxis()) {\r\n <g class=\"ius-chart__tick\" text-anchor=\"end\" dominant-baseline=\"middle\">\r\n @for (t of yTickItems(); track $index) {\r\n <text [attr.x]=\"frame().mL - 8\" [attr.y]=\"t.y\">{{ t.text }}</text>\r\n }\r\n </g>\r\n }\r\n\r\n <!-- skeleton -->\r\n @if (loading()) {\r\n <g>\r\n <rect\r\n class=\"ius-chart__skel\"\r\n [attr.x]=\"frame().mL\"\r\n [attr.y]=\"frame().mT\"\r\n [attr.width]=\"frame().innerW\"\r\n [attr.height]=\"frame().innerH\"\r\n rx=\"8\"\r\n opacity=\"0.5\"\r\n />\r\n <path class=\"ius-chart__skel--line\" [attr.d]=\"skeletonPath()\" />\r\n </g>\r\n }\r\n\r\n <!-- \u00E1reas + l\u00EDneas -->\r\n @if (!loading()) {\r\n @for (l of lines(); track l.key) {\r\n <g>\r\n @if (l.dArea) {\r\n <path class=\"ius-chart__area\" [attr.d]=\"l.dArea\" [attr.fill]=\"'url(#' + l.gradId + ')'\" />\r\n }\r\n <path class=\"ius-chart__line\" [attr.data-dashed]=\"l.dashed ? 'true' : null\" [attr.d]=\"l.dLine\" [attr.stroke]=\"l.color\" />\r\n @if (showPoints() === 'always') {\r\n @for (p of l.points; track $index) {\r\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"3.5\" [attr.fill]=\"l.color\" />\r\n }\r\n }\r\n </g>\r\n }\r\n }\r\n\r\n <!-- etiquetas de valor (1 serie recomendado) -->\r\n @if (!loading() && showValueLabels()) {\r\n @for (v of valueLabels(); track $index) {\r\n <text class=\"ius-chart__vlabel\" [attr.x]=\"v.x\" [attr.y]=\"v.y\">{{ v.text }}</text>\r\n }\r\n }\r\n\r\n <!-- gu\u00EDa vertical + puntos activos -->\r\n @if (activeMarks(); as am) {\r\n <g>\r\n <line class=\"ius-chart__guide\" [attr.x1]=\"am.x\" [attr.y1]=\"am.y1\" [attr.x2]=\"am.x\" [attr.y2]=\"am.y2\" />\r\n @for (p of am.points; track p.key) {\r\n <circle class=\"ius-chart__pt\" [attr.cx]=\"p.x\" [attr.cy]=\"p.y\" r=\"4.5\" [attr.fill]=\"p.color\" />\r\n }\r\n </g>\r\n }\r\n\r\n <!-- eje X -->\r\n @if (showXAxis() && !loading()) {\r\n <g class=\"ius-chart__xlabel\" text-anchor=\"middle\">\r\n <line\r\n class=\"ius-chart__axisline\"\r\n [attr.x1]=\"frame().mL\"\r\n [attr.y1]=\"frame().mT + frame().innerH\"\r\n [attr.x2]=\"frame().mL + frame().innerW\"\r\n [attr.y2]=\"frame().mT + frame().innerH\"\r\n />\r\n @for (x of xLabels(); track $index) {\r\n <text [attr.x]=\"x.x\" [attr.y]=\"frame().mT + frame().innerH + 18\">{{ x.text }}</text>\r\n }\r\n </g>\r\n }\r\n </svg>\r\n\r\n <!-- tooltip (HTML) -->\r\n @if (tooltip(); as tip) {\r\n <div class=\"ius-chart__tip\" [style.left.%]=\"tip.left\" [style.top.%]=\"tip.top\">\r\n <div class=\"ius-chart__tip-x\">{{ tip.title }}</div>\r\n @for (r of tip.rows; track r.key) {\r\n <div class=\"ius-chart__tip-row\">\r\n <span class=\"ius-chart__dot\" [style.background]=\"r.color\"></span>\r\n {{ r.label }}\r\n <b>{{ r.value }}</b>\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{position:relative;display:block;width:100%;box-sizing:border-box;font-family:var(--ius-font-body);color:var(--ius-text-primary);-webkit-user-select:none;user-select:none}.ius-chart__svg{display:block;width:100%;height:auto;overflow:visible}.ius-chart__plot{position:relative}.ius-chart__grid line{stroke:var(--ius-neutral-3);stroke-width:1;shape-rendering:crispEdges}.ius-chart__axisline{stroke:var(--ius-stroke);stroke-width:1;shape-rendering:crispEdges}.ius-chart__tick,.ius-chart__xlabel{fill:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm)}.ius-chart__line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ius-chart__line[data-dashed=true]{stroke-dasharray:6 5}.ius-chart__pt{stroke:var(--ius-surface-card);stroke-width:2}.ius-chart__vlabel{fill:var(--ius-text-secondary);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);text-anchor:middle}.ius-chart__guide{stroke:var(--ius-stroke-strong);stroke-width:1;stroke-dasharray:4 4}.ius-chart__legend{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs) var(--ius-space-md);margin-bottom:var(--ius-space-sm)}.ius-chart__leg{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-chart__dot{width:10px;height:10px;border-radius:var(--ius-radius-pill);flex:0 0 auto}.ius-chart__tip{position:absolute;pointer-events:none;z-index:var(--ius-z-sticky);min-width:132px;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);box-shadow:var(--ius-elevation-300);padding:var(--ius-space-xs) var(--ius-space-sm);transform:translate(-50%,calc(-100% - var(--ius-space-sm)))}.ius-chart__tip-x{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs);white-space:nowrap}.ius-chart__tip-row{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);white-space:nowrap}.ius-chart__tip-row b{margin-left:auto;padding-left:var(--ius-space-sm);color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-chart__skel{fill:var(--ius-neutral-2)}.ius-chart__skel--line{stroke:var(--ius-neutral-3);stroke-width:2;fill:none}.ius-chart__block{display:grid;place-items:center;min-height:160px}\n"] }]
|
|
15641
15641
|
}], ctorParameters: () => [], propDecorators: { categories: [{ type: i0.Input, args: [{ isSignal: true, alias: "categories", required: false }] }], series: [{ type: i0.Input, args: [{ isSignal: true, alias: "series", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], yAxisWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "yAxisWidth", required: false }] }], showXAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "showXAxis", required: false }] }], showYAxis: [{ type: i0.Input, args: [{ isSignal: true, alias: "showYAxis", required: false }] }], showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], yTicks: [{ type: i0.Input, args: [{ isSignal: true, alias: "yTicks", required: false }] }], yMin: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMin", required: false }] }], yMax: [{ type: i0.Input, args: [{ isSignal: true, alias: "yMax", required: false }] }], area: [{ type: i0.Input, args: [{ isSignal: true, alias: "area", required: false }] }], curve: [{ type: i0.Input, args: [{ isSignal: true, alias: "curve", required: false }] }], showPoints: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPoints", required: false }] }], showValueLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValueLabels", required: false }] }], showLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLegend", required: false }] }], showTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTooltip", required: false }] }], valueFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormat", required: false }] }], xFormat: [{ type: i0.Input, args: [{ isSignal: true, alias: "xFormat", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], emptyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTemplate", required: false }] }], emptyTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitle", required: false }] }], emptyDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescription", required: false }] }], animate: [{ type: i0.Input, args: [{ isSignal: true, alias: "animate", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
15642
15642
|
|
|
15643
|
+
/*
|
|
15644
|
+
* CategoryPalette — foundation (vocabulario controlado de CATEGORÍAS DE COLOR).
|
|
15645
|
+
*
|
|
15646
|
+
* QUÉ ES. No es un componente de UI: son `const` + funciones puras, igual que
|
|
15647
|
+
* EventCatalog / IllustrationCatalog / StatusCatalog. Es a los colores lo que
|
|
15648
|
+
* EventCatalog es a los íconos: define qué `category` existen y con qué **hue**
|
|
15649
|
+
* (familia de color) se pintan, y de ahí resuelve los tokens `var(--ius-*)`
|
|
15650
|
+
* (fill/border/text/accent/solid) que consumen EventPill, Scheduler, Tag,
|
|
15651
|
+
* Avatar, Insignia y las leyendas/filtros por categoría.
|
|
15652
|
+
*
|
|
15653
|
+
* REGLA DE TONO (CLAUDE.md): una categoría que comunica **estado/urgencia** (un
|
|
15654
|
+
* término que vence, un plazo) usa una familia **semántica** (danger, warning…).
|
|
15655
|
+
* Una categoría que es pura **identidad** (audiencia, reunión, tarea) usa un hue
|
|
15656
|
+
* **categórico de fruta** (arandano, uva, aguacate…), deliberadamente más
|
|
15657
|
+
* apagado para no confundirse con un estado.
|
|
15658
|
+
*
|
|
15659
|
+
* EXTENSIÓN POR MÓDULO. Un módulo puede extender el catálogo en runtime pasando
|
|
15660
|
+
* un `customMap` (category → hue) a `resolveCategoryHue`/`categoryColors` sin
|
|
15661
|
+
* tocar este archivo — en la resolución, el mapa del módulo GANA sobre el
|
|
15662
|
+
* catálogo central.
|
|
15663
|
+
*
|
|
15664
|
+
* DEVUELVE STRINGS DE TOKEN, no colores: el consumidor los aplica a `style`/CSS
|
|
15665
|
+
* (`--_ep-accent: var(--ius-uva-600)`). Nunca resuelve el color computado.
|
|
15666
|
+
*
|
|
15667
|
+
* FUENTE DE VERDAD. Proyecto Claude Design →
|
|
15668
|
+
* `components/foundations/CategoryPalette/CategoryPalette.jsx` (+ `.d.ts`).
|
|
15669
|
+
*
|
|
15670
|
+
* DECISIÓN DE PORT: NO se porta el render auxiliar `CategoryPalette(props)` del
|
|
15671
|
+
* `.jsx` (grid category ↔ swatch): es una ayuda visual de la card de
|
|
15672
|
+
* documentación, no API de producción. Su equivalente vive en el playground.
|
|
15673
|
+
*/
|
|
15674
|
+
/** Definición central: category → { label legible, hue (familia de color), tone }. */
|
|
15675
|
+
const CATEGORY_DEF = {
|
|
15676
|
+
/* ── Estado / urgencia → familia semántica ── */
|
|
15677
|
+
termino: { label: 'Término que vence', hue: 'danger', tone: 'state' },
|
|
15678
|
+
plazo: { label: 'Plazo de gestión', hue: 'warning', tone: 'state' },
|
|
15679
|
+
vencido: { label: 'Vencido', hue: 'danger', tone: 'state' },
|
|
15680
|
+
pago: { label: 'Pago / factura', hue: 'success', tone: 'state' },
|
|
15681
|
+
/* ── Identidad (sin estado) → hue categórico de fruta ── */
|
|
15682
|
+
audiencia: { label: 'Audiencia', hue: 'arandano', tone: 'identity' },
|
|
15683
|
+
diligencia: { label: 'Diligencia', hue: 'uva', tone: 'identity' },
|
|
15684
|
+
tarea: { label: 'Tarea', hue: 'aguacate', tone: 'identity' },
|
|
15685
|
+
reunion: { label: 'Reunión', hue: 'sandia', tone: 'identity' },
|
|
15686
|
+
recordatorio: { label: 'Recordatorio', hue: 'banano', tone: 'identity' },
|
|
15687
|
+
notificacion: { label: 'Notificación', hue: 'durazno', tone: 'identity' },
|
|
15688
|
+
evento: { label: 'Evento', hue: 'primary', tone: 'identity' },
|
|
15689
|
+
/* ── Bloqueo neutro ── */
|
|
15690
|
+
libre: { label: 'Tiempo libre', hue: 'neutral', tone: 'identity' },
|
|
15691
|
+
};
|
|
15692
|
+
/** Mapa directo category → hue (paralelo a EVENT_KIND_ICON). */
|
|
15693
|
+
const CATEGORY_HUE = Object.fromEntries(Object.entries(CATEGORY_DEF).map(([k, v]) => [k, v.hue]));
|
|
15694
|
+
/** Lista de categorías reconocidas (orden del catálogo). */
|
|
15695
|
+
const CATEGORIES = Object.keys(CATEGORY_DEF);
|
|
15696
|
+
/**
|
|
15697
|
+
* Resuelve el **hue** de un objeto `{ category?, hue? }`. Orden:
|
|
15698
|
+
* 1. `hue` (escape hatch directo) → 2. `customMap[category]` (extensión por
|
|
15699
|
+
* módulo) → 3. Catálogo central → 4. `'neutral'` (fallback seguro).
|
|
15700
|
+
*/
|
|
15701
|
+
function resolveCategoryHue(o, customMap) {
|
|
15702
|
+
if (!o)
|
|
15703
|
+
return 'neutral';
|
|
15704
|
+
if (o.hue)
|
|
15705
|
+
return o.hue;
|
|
15706
|
+
if (!o.category)
|
|
15707
|
+
return 'neutral';
|
|
15708
|
+
if (customMap && customMap[o.category])
|
|
15709
|
+
return customMap[o.category];
|
|
15710
|
+
return CATEGORY_HUE[o.category] || 'neutral';
|
|
15711
|
+
}
|
|
15712
|
+
/** Hues que NO siguen la escala numérica 100–900 (se mapean a mano). */
|
|
15713
|
+
const NEUTRAL_SHADES = {
|
|
15714
|
+
accent: 'var(--ius-neutral-7)',
|
|
15715
|
+
fill: 'var(--ius-neutral-2)',
|
|
15716
|
+
border: 'var(--ius-neutral-4)',
|
|
15717
|
+
text: 'var(--ius-neutral-9)',
|
|
15718
|
+
solid: 'var(--ius-neutral-6)',
|
|
15719
|
+
onSolid: 'var(--ius-neutral-white)',
|
|
15720
|
+
};
|
|
15721
|
+
/**
|
|
15722
|
+
* Devuelve los tokens de color resueltos para un hue, listos para EventPill:
|
|
15723
|
+
* accent — punto / ícono / barra (hue-600)
|
|
15724
|
+
* fill — fondo suave del pill (hue-100)
|
|
15725
|
+
* border — borde del pill (hue-200)
|
|
15726
|
+
* text — texto sobre fill (hue-800)
|
|
15727
|
+
* solid — relleno fuerte / punto compacto (hue-500)
|
|
15728
|
+
* onSolid — texto sobre solid
|
|
15729
|
+
* Acepta un hue (string) o un objeto `{ category?, hue? }`.
|
|
15730
|
+
*/
|
|
15731
|
+
function categoryColors(hueOrObj, customMap) {
|
|
15732
|
+
const hue = typeof hueOrObj === 'string' ? hueOrObj : resolveCategoryHue(hueOrObj, customMap);
|
|
15733
|
+
if (hue === 'neutral')
|
|
15734
|
+
return { ...NEUTRAL_SHADES, hue };
|
|
15735
|
+
return {
|
|
15736
|
+
accent: `var(--ius-${hue}-600)`,
|
|
15737
|
+
fill: `var(--ius-${hue}-100)`,
|
|
15738
|
+
border: `var(--ius-${hue}-200)`,
|
|
15739
|
+
text: `var(--ius-${hue}-800)`,
|
|
15740
|
+
solid: `var(--ius-${hue}-500)`,
|
|
15741
|
+
onSolid: 'var(--ius-neutral-white)',
|
|
15742
|
+
hue,
|
|
15743
|
+
};
|
|
15744
|
+
}
|
|
15745
|
+
/** Opciones listas para un dropdown/leyenda (value · label · hue). */
|
|
15746
|
+
function categoryOptions() {
|
|
15747
|
+
return CATEGORIES.map((value) => ({
|
|
15748
|
+
value,
|
|
15749
|
+
label: CATEGORY_DEF[value].label,
|
|
15750
|
+
hue: CATEGORY_DEF[value].hue,
|
|
15751
|
+
}));
|
|
15752
|
+
}
|
|
15753
|
+
|
|
15754
|
+
/*
|
|
15755
|
+
* Catálogo de tipos de archivo / entidad — base de FileTypeIcon (y de FileItem,
|
|
15756
|
+
* la tabla del explorador, breadcrumbs de entidad y el filtro «Tipo»).
|
|
15757
|
+
*
|
|
15758
|
+
* `kind → { label, icon, hue, group }`. Dos grupos desde un solo catálogo:
|
|
15759
|
+
* `fs` (sistema de archivos, tipo Drive/Finder) y `domain` (entidades del
|
|
15760
|
+
* ecosistema jurídico). El hue es SIEMPRE categórico (identidad, no estado —
|
|
15761
|
+
* CLAUDE §6): un tipo identifica, nunca comunica estado. Un kind → un hue; no se
|
|
15762
|
+
* reasigna por gusto (rompe la identidad). Colisiones de hue entre kinds son
|
|
15763
|
+
* aceptables: el ícono distingue.
|
|
15764
|
+
*
|
|
15765
|
+
* `EXT_KIND` es la fuente de verdad para resolver por nombre: las extensiones se
|
|
15766
|
+
* amplían AQUÍ, no en el consumidor.
|
|
15767
|
+
*
|
|
15768
|
+
* Port de `FileTypeIcon.jsx` (catálogo y helpers colgados del componente en
|
|
15769
|
+
* React → const + funciones puras exportadas por la librería en Angular).
|
|
15770
|
+
*/
|
|
15771
|
+
/** Vocabulario de tipos: `kind → { label, icon, hue, group }`. */
|
|
15772
|
+
const KIND_DEF = {
|
|
15773
|
+
/* ── Sistema de archivos ── */
|
|
15774
|
+
folder: { label: 'Carpeta', icon: 'folder', hue: 'primary', group: 'fs' },
|
|
15775
|
+
folderShared: { label: 'Carpeta compartida', icon: 'folder_shared', hue: 'primary', group: 'fs' },
|
|
15776
|
+
pdf: { label: 'PDF', icon: 'picture_as_pdf', hue: 'durazno', group: 'fs' },
|
|
15777
|
+
doc: { label: 'Documento', icon: 'description', hue: 'arandano', group: 'fs' },
|
|
15778
|
+
sheet: { label: 'Hoja de cálculo', icon: 'table_chart', hue: 'aguacate', group: 'fs' },
|
|
15779
|
+
slide: { label: 'Presentación', icon: 'co_present', hue: 'sandia', group: 'fs' },
|
|
15780
|
+
image: { label: 'Imagen', icon: 'image', hue: 'uva', group: 'fs' },
|
|
15781
|
+
video: { label: 'Video', icon: 'movie', hue: 'sandia', group: 'fs' },
|
|
15782
|
+
audio: { label: 'Audio', icon: 'audiotrack', hue: 'banano', group: 'fs' },
|
|
15783
|
+
archive: { label: 'Comprimido', icon: 'folder_zip', hue: 'durazno', group: 'fs' },
|
|
15784
|
+
code: { label: 'Código', icon: 'code', hue: 'aguacate', group: 'fs' },
|
|
15785
|
+
text: { label: 'Texto', icon: 'article', hue: 'neutral', group: 'fs' },
|
|
15786
|
+
email: { label: 'Correo', icon: 'mail', hue: 'arandano', group: 'fs' },
|
|
15787
|
+
generic: { label: 'Archivo', icon: 'draft', hue: 'neutral', group: 'fs' },
|
|
15788
|
+
/* ── Dominio (ecosistema jurídico) ── */
|
|
15789
|
+
cliente: { label: 'Cliente', icon: 'contacts', hue: 'arandano', group: 'domain' },
|
|
15790
|
+
expediente: { label: 'Expediente', icon: 'topic', hue: 'uva', group: 'domain' },
|
|
15791
|
+
proceso: { label: 'Proceso', icon: 'gavel', hue: 'primary', group: 'domain' },
|
|
15792
|
+
actuacion: { label: 'Actuación', icon: 'bolt', hue: 'sandia', group: 'domain' },
|
|
15793
|
+
actividad: { label: 'Actividad', icon: 'task_alt', hue: 'aguacate', group: 'domain' },
|
|
15794
|
+
usuario: { label: 'Usuario', icon: 'person', hue: 'banano', group: 'domain' },
|
|
15795
|
+
};
|
|
15796
|
+
/** Tipo de reserva para un kind desconocido. */
|
|
15797
|
+
const KIND_FALLBACK = { label: 'Archivo', icon: 'draft', hue: 'neutral', group: 'fs' };
|
|
15798
|
+
/** Lista de kinds reconocidos (orden del catálogo). */
|
|
15799
|
+
const KINDS = Object.keys(KIND_DEF);
|
|
15800
|
+
/** Extensión de archivo → kind. Fuente de verdad para resolver por nombre. */
|
|
15801
|
+
const EXT_KIND = {
|
|
15802
|
+
pdf: 'pdf',
|
|
15803
|
+
doc: 'doc', docx: 'doc', odt: 'doc', rtf: 'doc', pages: 'doc',
|
|
15804
|
+
xls: 'sheet', xlsx: 'sheet', csv: 'sheet', ods: 'sheet', numbers: 'sheet',
|
|
15805
|
+
ppt: 'slide', pptx: 'slide', odp: 'slide', key: 'slide',
|
|
15806
|
+
png: 'image', jpg: 'image', jpeg: 'image', gif: 'image', webp: 'image', svg: 'image', heic: 'image', bmp: 'image', tif: 'image', tiff: 'image',
|
|
15807
|
+
mp4: 'video', mov: 'video', avi: 'video', mkv: 'video', webm: 'video',
|
|
15808
|
+
mp3: 'audio', wav: 'audio', ogg: 'audio', m4a: 'audio', aac: 'audio',
|
|
15809
|
+
zip: 'archive', rar: 'archive', '7z': 'archive', tar: 'archive', gz: 'archive',
|
|
15810
|
+
js: 'code', ts: 'code', json: 'code', html: 'code', css: 'code', xml: 'code', py: 'code', java: 'code', sql: 'code',
|
|
15811
|
+
txt: 'text', md: 'text', log: 'text',
|
|
15812
|
+
eml: 'email', msg: 'email',
|
|
15813
|
+
};
|
|
15814
|
+
function isKind(kind) {
|
|
15815
|
+
return !!kind && Object.prototype.hasOwnProperty.call(KIND_DEF, kind);
|
|
15816
|
+
}
|
|
15817
|
+
/** Extrae la extensión (en minúsculas, sin punto) de un nombre de archivo. */
|
|
15818
|
+
function extOf(name) {
|
|
15819
|
+
if (!name || typeof name !== 'string')
|
|
15820
|
+
return '';
|
|
15821
|
+
const m = name.match(/\.([a-z0-9]+)$/i);
|
|
15822
|
+
return m ? m[1].toLowerCase() : '';
|
|
15823
|
+
}
|
|
15824
|
+
/**
|
|
15825
|
+
* Resuelve a una clave de kind conocida. Orden:
|
|
15826
|
+
* 1) `kind` explícito si ya es un kind del catálogo
|
|
15827
|
+
* 2) extensión de `name` (o del propio `kind` si vino una extensión suelta)
|
|
15828
|
+
* 3) `'generic'`
|
|
15829
|
+
*/
|
|
15830
|
+
function resolveKind(kind, name) {
|
|
15831
|
+
if (isKind(kind))
|
|
15832
|
+
return kind;
|
|
15833
|
+
const fromName = EXT_KIND[extOf(name)];
|
|
15834
|
+
if (fromName)
|
|
15835
|
+
return fromName;
|
|
15836
|
+
if (kind && EXT_KIND[String(kind).toLowerCase()])
|
|
15837
|
+
return EXT_KIND[String(kind).toLowerCase()];
|
|
15838
|
+
return 'generic';
|
|
15839
|
+
}
|
|
15840
|
+
/** Definición completa de un kind (con fallback seguro). */
|
|
15841
|
+
function kindMeta(kind, name) {
|
|
15842
|
+
const k = resolveKind(kind, name);
|
|
15843
|
+
return { kind: k, ...(KIND_DEF[k] || KIND_FALLBACK) };
|
|
15844
|
+
}
|
|
15845
|
+
/** Ícono (Material Symbols) de un kind. */
|
|
15846
|
+
function kindIcon(kind, name) {
|
|
15847
|
+
return kindMeta(kind, name).icon;
|
|
15848
|
+
}
|
|
15849
|
+
/** Etiqueta legible de un kind. */
|
|
15850
|
+
function kindLabel(kind, name) {
|
|
15851
|
+
return kindMeta(kind, name).label;
|
|
15852
|
+
}
|
|
15853
|
+
/** Hue categórico de un kind. */
|
|
15854
|
+
function kindHue(kind, name) {
|
|
15855
|
+
return kindMeta(kind, name).hue;
|
|
15856
|
+
}
|
|
15857
|
+
/** Opciones para filtro/dropdown «Tipo» (value · label · icon · hue), filtrable por grupo. */
|
|
15858
|
+
function kindOptions(group) {
|
|
15859
|
+
return KINDS.filter((k) => !group || KIND_DEF[k].group === group).map((k) => ({
|
|
15860
|
+
value: k,
|
|
15861
|
+
label: KIND_DEF[k].label,
|
|
15862
|
+
icon: KIND_DEF[k].icon,
|
|
15863
|
+
hue: KIND_DEF[k].hue,
|
|
15864
|
+
}));
|
|
15865
|
+
}
|
|
15866
|
+
|
|
15867
|
+
/**
|
|
15868
|
+
* FileTypeIcon — Ius Design v2 (familia data-display).
|
|
15869
|
+
*
|
|
15870
|
+
* Ícono de tipo estilo explorador: un glifo (o miniatura real) que identifica un
|
|
15871
|
+
* archivo, carpeta o entidad de dominio, pintado en su **hue categórico**
|
|
15872
|
+
* (identidad, nunca estado). Resuelve el kind desde `kind` explícito o la
|
|
15873
|
+
* extensión de `name` (catálogo `file-kind-catalog.ts`: `KIND_DEF` / `EXT_KIND`
|
|
15874
|
+
* / `resolveKind`). Átomo consumido por FileItem, la tabla del explorador,
|
|
15875
|
+
* breadcrumbs de entidad y cualquier lista que necesite identificar un tipo de
|
|
15876
|
+
* un vistazo.
|
|
15877
|
+
*
|
|
15878
|
+
* El host es el `<span class="ius-ftype">` raíz del golden. No lleva
|
|
15879
|
+
* `--ius-control-size`: lo dimensiona el host vía `size`. Sin outputs (no es
|
|
15880
|
+
* interactivo). Fuente de verdad: `FileTypeIcon.jsx` + `FileTypeIcon.d.ts` +
|
|
15881
|
+
* `FileTypeIcon.ng-spec.md`.
|
|
15882
|
+
*/
|
|
15883
|
+
class FileTypeIconComponent {
|
|
15884
|
+
constructor() {
|
|
15885
|
+
/** Tratamiento visual. */
|
|
15886
|
+
this.variant = 'glyph';
|
|
15887
|
+
/** Lado del glifo. */
|
|
15888
|
+
this.size = 'medium';
|
|
15889
|
+
/** Decorativo (`aria-hidden`). `false` cuando el ícono sea la única señal de tipo (`role=img` + `aria-label`). */
|
|
15890
|
+
this.decorative = true;
|
|
15891
|
+
}
|
|
15892
|
+
get meta() {
|
|
15893
|
+
return kindMeta(this.kind, this.name);
|
|
15894
|
+
}
|
|
15895
|
+
get effHue() {
|
|
15896
|
+
return this.hue || this.meta.hue;
|
|
15897
|
+
}
|
|
15898
|
+
get effIcon() {
|
|
15899
|
+
return this.icon || this.meta.icon;
|
|
15900
|
+
}
|
|
15901
|
+
/** Etiqueta accesible: `title` explícito o la etiqueta del kind resuelto. */
|
|
15902
|
+
get label() {
|
|
15903
|
+
return this.title != null ? this.title : this.meta.label;
|
|
15904
|
+
}
|
|
15905
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileTypeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileTypeIconComponent, isStandalone: true, selector: "ius-file-type-icon", inputs: { kind: "kind", name: "name", hue: "hue", icon: "icon", thumbnail: "thumbnail", variant: "variant", size: "size", title: "title", decorative: ["decorative", "decorative", booleanAttribute] }, host: { properties: { "attr.data-hue": "effHue", "attr.data-variant": "variant !== 'glyph' ? variant : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.role": "decorative ? null : 'img'", "attr.aria-hidden": "decorative ? 'true' : null", "attr.aria-label": "decorative ? null : label", "attr.title": "title || null" }, classAttribute: "ius-ftype" }, ngImport: i0, template: "@if (thumbnail) {\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n} @else {\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15907
|
+
}
|
|
15908
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileTypeIconComponent, decorators: [{
|
|
15909
|
+
type: Component,
|
|
15910
|
+
args: [{ selector: 'ius-file-type-icon', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
15911
|
+
class: 'ius-ftype',
|
|
15912
|
+
'[attr.data-hue]': 'effHue',
|
|
15913
|
+
'[attr.data-variant]': "variant !== 'glyph' ? variant : null",
|
|
15914
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
15915
|
+
'[attr.role]': "decorative ? null : 'img'",
|
|
15916
|
+
'[attr.aria-hidden]': "decorative ? 'true' : null",
|
|
15917
|
+
'[attr.aria-label]': 'decorative ? null : label',
|
|
15918
|
+
'[attr.title]': 'title || null',
|
|
15919
|
+
}, template: "@if (thumbnail) {\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n} @else {\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"] }]
|
|
15920
|
+
}], propDecorators: { kind: [{
|
|
15921
|
+
type: Input
|
|
15922
|
+
}], name: [{
|
|
15923
|
+
type: Input
|
|
15924
|
+
}], hue: [{
|
|
15925
|
+
type: Input
|
|
15926
|
+
}], icon: [{
|
|
15927
|
+
type: Input
|
|
15928
|
+
}], thumbnail: [{
|
|
15929
|
+
type: Input
|
|
15930
|
+
}], variant: [{
|
|
15931
|
+
type: Input
|
|
15932
|
+
}], size: [{
|
|
15933
|
+
type: Input
|
|
15934
|
+
}], title: [{
|
|
15935
|
+
type: Input
|
|
15936
|
+
}], decorative: [{
|
|
15937
|
+
type: Input,
|
|
15938
|
+
args: [{ transform: booleanAttribute }]
|
|
15939
|
+
}] } });
|
|
15940
|
+
|
|
15941
|
+
function toCss(value) {
|
|
15942
|
+
if (value == null)
|
|
15943
|
+
return null;
|
|
15944
|
+
return typeof value === 'number' ? `${value}px` : value;
|
|
15945
|
+
}
|
|
15946
|
+
/**
|
|
15947
|
+
* AvatarStack — Ius Design v2 (familia data-display).
|
|
15948
|
+
*
|
|
15949
|
+
* Pila de avatares **solapados** que representa varios participantes de un mismo
|
|
15950
|
+
* objeto (responsables de un evento, miembros de un proceso, asistentes a una
|
|
15951
|
+
* audiencia). Muestra hasta `max` medallones encimados y resume el resto en un
|
|
15952
|
+
* círculo **«+N»** neutro, para no desbordar contextos estrechos (un EventPill,
|
|
15953
|
+
* una fila de tabla). Reusa `ius-avatar` por cara (hereda tamaños y formas); un
|
|
15954
|
+
* anillo del color de la superficie separa los medallones encimados.
|
|
15955
|
+
*
|
|
15956
|
+
* Para **2+ personas**; una sola → `ius-avatar` directo. El host es el
|
|
15957
|
+
* `<span class="ius-as" role="group">` raíz del golden. Fuente de verdad:
|
|
15958
|
+
* `AvatarStack.jsx` + `AvatarStack.d.ts` + `AvatarStack.ng-spec.md`.
|
|
15959
|
+
*
|
|
15960
|
+
* Decisión de port: el golden declara `onItemClick` pero no lo cablea a las caras;
|
|
15961
|
+
* aquí `itemClick` sí se emite al pulsar una cara (además de `item.onClick`).
|
|
15962
|
+
*/
|
|
15963
|
+
class AvatarStackComponent {
|
|
15964
|
+
constructor() {
|
|
15965
|
+
this._items = [];
|
|
15966
|
+
/** Máximo de caras visibles antes del «+N». `0` = mostrar todas. */
|
|
15967
|
+
this.max = 3;
|
|
15968
|
+
/** Tamaño de cada avatar (se propaga a `ius-avatar`). */
|
|
15969
|
+
this.size = 'small';
|
|
15970
|
+
/** Forma de cada avatar. */
|
|
15971
|
+
this.shape = 'circle';
|
|
15972
|
+
/** Color del anillo separador. Sobre un fondo de color pasar ese color. */
|
|
15973
|
+
this.ring = 'var(--ius-surface-card)';
|
|
15974
|
+
/** Click sobre cualquier cara (además de `item.onClick`). */
|
|
15975
|
+
this.itemClick = new EventEmitter();
|
|
15976
|
+
/** Click sobre el «+N» (abrir lista completa, popover…). Lo vuelve un botón. */
|
|
15977
|
+
this.moreClick = new EventEmitter();
|
|
15978
|
+
}
|
|
15979
|
+
/** Personas a apilar. `string` se interpreta como `{ name }`. */
|
|
15980
|
+
set items(value) {
|
|
15981
|
+
this._items = (value || [])
|
|
15982
|
+
.map((it) => (typeof it === 'string' ? { name: it } : it))
|
|
15983
|
+
.filter((it) => it != null);
|
|
15984
|
+
}
|
|
15985
|
+
get items() {
|
|
15986
|
+
return this._items;
|
|
15987
|
+
}
|
|
15988
|
+
get ringWidthCss() {
|
|
15989
|
+
return toCss(this.ringWidth);
|
|
15990
|
+
}
|
|
15991
|
+
get overlapCss() {
|
|
15992
|
+
return toCss(this.overlap);
|
|
15993
|
+
}
|
|
15994
|
+
/** Total contra el que se calcula el excedente. */
|
|
15995
|
+
get totalCount() {
|
|
15996
|
+
return typeof this.total === 'number' ? this.total : this._items.length;
|
|
15997
|
+
}
|
|
15998
|
+
/** `max` 0 o negativo → todas. */
|
|
15999
|
+
get limit() {
|
|
16000
|
+
return this.max > 0 ? this.max : this._items.length;
|
|
16001
|
+
}
|
|
16002
|
+
get visible() {
|
|
16003
|
+
return this._items.slice(0, this.limit);
|
|
16004
|
+
}
|
|
16005
|
+
get extra() {
|
|
16006
|
+
return Math.max(0, this.totalCount - this.visible.length);
|
|
16007
|
+
}
|
|
16008
|
+
get moreClickable() {
|
|
16009
|
+
return this.moreClick.observed;
|
|
16010
|
+
}
|
|
16011
|
+
/** Tooltip del «+N»: `moreLabel` o los nombres restantes. */
|
|
16012
|
+
get moreTitle() {
|
|
16013
|
+
if (this.moreLabel != null)
|
|
16014
|
+
return this.moreLabel;
|
|
16015
|
+
const rest = this._items.slice(this.limit).map((it) => it.name).filter(Boolean).join(', ');
|
|
16016
|
+
return rest || null;
|
|
16017
|
+
}
|
|
16018
|
+
get moreAria() {
|
|
16019
|
+
return this.moreTitle ? `${this.extra} más: ${this.moreTitle}` : `${this.extra} más`;
|
|
16020
|
+
}
|
|
16021
|
+
/** Sin foto/nombre/monograma el medallón cae al ícono `person` (golden). */
|
|
16022
|
+
iconFor(it) {
|
|
16023
|
+
if (it.icon)
|
|
16024
|
+
return it.icon;
|
|
16025
|
+
return it.name || it.src || it.monogram ? undefined : 'person';
|
|
16026
|
+
}
|
|
16027
|
+
trackItem(it, index) {
|
|
16028
|
+
return it.id != null ? it.id : index;
|
|
16029
|
+
}
|
|
16030
|
+
onItemClick(item, index, event) {
|
|
16031
|
+
item.onClick?.(event);
|
|
16032
|
+
this.itemClick.emit({ item, index, event });
|
|
16033
|
+
}
|
|
16034
|
+
onMoreClick(event) {
|
|
16035
|
+
this.moreClick.emit(event);
|
|
16036
|
+
}
|
|
16037
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarStackComponent, isStandalone: true, selector: "ius-avatar-stack", inputs: { items: "items", max: ["max", "max", numberAttribute], total: ["total", "total", numberAttribute], size: "size", shape: "shape", ring: "ring", ringWidth: "ringWidth", overlap: "overlap", itemStyle: "itemStyle", moreStyle: "moreStyle", moreLabel: "moreLabel", ariaLabel: "ariaLabel" }, outputs: { itemClick: "itemClick", moreClick: "moreClick" }, host: { attributes: { "role": "group" }, properties: { "attr.data-size": "size", "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.aria-label": "ariaLabel || null", "style.--_as-ring": "ring", "style.--_as-ring-w": "ringWidthCss", "style.--_as-overlap": "overlapCss" }, classAttribute: "ius-as" }, ngImport: i0, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\n <ius-avatar\n [size]=\"size\"\n [shape]=\"shape\"\n [src]=\"it.src\"\n [name]=\"it.name\"\n [monogram]=\"it.monogram\"\n [icon]=\"iconFor(it)\"\n [color]=\"it.color ?? 'auto'\"\n [alt]=\"it.name\"\n [ariaLabel]=\"it.ariaLabel\"\n [style]=\"itemStyle ?? null\"\n />\n </span>\n}\n\n@if (extra > 0) {\n @if (moreClickable) {\n <button\n type=\"button\"\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n (click)=\"onMoreClick($event)\"\n >+{{ extra }}</button>\n } @else {\n <span\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n >+{{ extra }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\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 }); }
|
|
16039
|
+
}
|
|
16040
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarStackComponent, decorators: [{
|
|
16041
|
+
type: Component,
|
|
16042
|
+
args: [{ selector: 'ius-avatar-stack', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
16043
|
+
class: 'ius-as',
|
|
16044
|
+
role: 'group',
|
|
16045
|
+
'[attr.data-size]': 'size',
|
|
16046
|
+
'[attr.data-shape]': "shape !== 'circle' ? shape : null",
|
|
16047
|
+
'[attr.aria-label]': 'ariaLabel || null',
|
|
16048
|
+
'[style.--_as-ring]': 'ring',
|
|
16049
|
+
'[style.--_as-ring-w]': 'ringWidthCss',
|
|
16050
|
+
'[style.--_as-overlap]': 'overlapCss',
|
|
16051
|
+
}, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\n <ius-avatar\n [size]=\"size\"\n [shape]=\"shape\"\n [src]=\"it.src\"\n [name]=\"it.name\"\n [monogram]=\"it.monogram\"\n [icon]=\"iconFor(it)\"\n [color]=\"it.color ?? 'auto'\"\n [alt]=\"it.name\"\n [ariaLabel]=\"it.ariaLabel\"\n [style]=\"itemStyle ?? null\"\n />\n </span>\n}\n\n@if (extra > 0) {\n @if (moreClickable) {\n <button\n type=\"button\"\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n (click)=\"onMoreClick($event)\"\n >+{{ extra }}</button>\n } @else {\n <span\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n >+{{ extra }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\n"] }]
|
|
16052
|
+
}], propDecorators: { items: [{
|
|
16053
|
+
type: Input
|
|
16054
|
+
}], max: [{
|
|
16055
|
+
type: Input,
|
|
16056
|
+
args: [{ transform: numberAttribute }]
|
|
16057
|
+
}], total: [{
|
|
16058
|
+
type: Input,
|
|
16059
|
+
args: [{ transform: numberAttribute }]
|
|
16060
|
+
}], size: [{
|
|
16061
|
+
type: Input
|
|
16062
|
+
}], shape: [{
|
|
16063
|
+
type: Input
|
|
16064
|
+
}], ring: [{
|
|
16065
|
+
type: Input
|
|
16066
|
+
}], ringWidth: [{
|
|
16067
|
+
type: Input
|
|
16068
|
+
}], overlap: [{
|
|
16069
|
+
type: Input
|
|
16070
|
+
}], itemStyle: [{
|
|
16071
|
+
type: Input
|
|
16072
|
+
}], moreStyle: [{
|
|
16073
|
+
type: Input
|
|
16074
|
+
}], moreLabel: [{
|
|
16075
|
+
type: Input
|
|
16076
|
+
}], ariaLabel: [{
|
|
16077
|
+
type: Input
|
|
16078
|
+
}], itemClick: [{
|
|
16079
|
+
type: Output
|
|
16080
|
+
}], moreClick: [{
|
|
16081
|
+
type: Output
|
|
16082
|
+
}] } });
|
|
16083
|
+
|
|
16084
|
+
/**
|
|
16085
|
+
* EventPill — Ius Design v2 (familia data-display).
|
|
16086
|
+
*
|
|
16087
|
+
* Token visual de un evento del calendario/agenda. El color sale de su
|
|
16088
|
+
* `category` (vía **CategoryPalette**) y el ícono de su `kind` (vía
|
|
16089
|
+
* **EventCatalog**). Es el átomo que pinta el Scheduler en mes, semana, día y
|
|
16090
|
+
* agenda. No gestiona datos ni posición: solo se pinta con lo que recibe.
|
|
16091
|
+
*
|
|
16092
|
+
* El host es la raíz `.ius-ep` del golden (div, o button cuando hay `onClick`):
|
|
16093
|
+
* con `(clicked)` enlazado se vuelve `role=button` enfocable y responde a
|
|
16094
|
+
* Enter/Espacio. Acabados (`fill`): `soft` = resaltador translúcido (el fondo se
|
|
16095
|
+
* transparenta; hover intensifica), `plain` = transparente con punto de acento,
|
|
16096
|
+
* `solid` = relleno con texto encima (hover oscurece), `gradient` = resaltador en
|
|
16097
|
+
* degradado. Fuente de verdad: `EventPill.jsx` + `EventPill.d.ts` +
|
|
16098
|
+
* `EventPill.ng-spec.md`.
|
|
16099
|
+
*/
|
|
16100
|
+
class EventPillComponent {
|
|
16101
|
+
constructor() {
|
|
16102
|
+
this.variant = 'bar';
|
|
16103
|
+
this.fill = 'soft';
|
|
16104
|
+
this.size = 'medium';
|
|
16105
|
+
this._assignees = [];
|
|
16106
|
+
/** Mostrar el responsable cuando hay `assignee`. */
|
|
16107
|
+
this.showAssignee = true;
|
|
16108
|
+
/** Mostrar el ícono del kind como lead (en `block` se muestra siempre). */
|
|
16109
|
+
this.showIcon = false;
|
|
16110
|
+
/** Mostrar punto de acento cuando no hay ícono. */
|
|
16111
|
+
this.showDot = true;
|
|
16112
|
+
/** Resaltado/seleccionado (anillo de foco). */
|
|
16113
|
+
this.selected = false;
|
|
16114
|
+
/** Evento pasado → atenuado. */
|
|
16115
|
+
this.past = false;
|
|
16116
|
+
/** Hover en pills NO-button pero interactivas (drag del TimeGrid). */
|
|
16117
|
+
this.hoverable = false;
|
|
16118
|
+
/** Click sobre el pill; enlazarlo lo vuelve `role=button` (original `onClick`). */
|
|
16119
|
+
this.clicked = new EventEmitter();
|
|
16120
|
+
}
|
|
16121
|
+
/** Responsable(s) (solo en `block`). Uno → Avatar xsmall + nombre; varios → AvatarStack «+N». */
|
|
16122
|
+
set assignee(value) {
|
|
16123
|
+
const list = Array.isArray(value) ? value : value == null ? [] : [value];
|
|
16124
|
+
this._assignees = list
|
|
16125
|
+
.map((a) => (typeof a === 'string' ? { name: a } : a))
|
|
16126
|
+
.filter((a) => a != null);
|
|
16127
|
+
}
|
|
16128
|
+
get assignee() {
|
|
16129
|
+
return this._assignees;
|
|
16130
|
+
}
|
|
16131
|
+
get clickable() {
|
|
16132
|
+
return this.clicked.observed;
|
|
16133
|
+
}
|
|
16134
|
+
/** Tokens del hue resuelto: `hue` (escape) › `customHues[category]` › catálogo › neutral. */
|
|
16135
|
+
get colors() {
|
|
16136
|
+
return categoryColors(this.hue ? { hue: this.hue } : { category: this.category }, this.customHues);
|
|
16137
|
+
}
|
|
16138
|
+
/** Ícono del lead: solo con `showIcon` o en `block` (EventCatalog: icon › customIcons › catálogo). */
|
|
16139
|
+
get resolvedIcon() {
|
|
16140
|
+
if (!this.showIcon && this.variant !== 'block')
|
|
16141
|
+
return null;
|
|
16142
|
+
return resolveEventIcon({ kind: this.kind, icon: this.icon }, this.customIcons);
|
|
16143
|
+
}
|
|
16144
|
+
get timeText() {
|
|
16145
|
+
if (!this.time)
|
|
16146
|
+
return null;
|
|
16147
|
+
return this.endTime ? `${this.time}–${this.endTime}` : this.time;
|
|
16148
|
+
}
|
|
16149
|
+
get clampTitle() {
|
|
16150
|
+
return !!this.titleLines && this.titleLines > 0;
|
|
16151
|
+
}
|
|
16152
|
+
get who() {
|
|
16153
|
+
return this._assignees.length === 1 ? this._assignees[0] : null;
|
|
16154
|
+
}
|
|
16155
|
+
get showAssignees() {
|
|
16156
|
+
return this.variant === 'block' && this.showAssignee && this._assignees.length > 0;
|
|
16157
|
+
}
|
|
16158
|
+
/** Anillo de la pila: el color del fondo del pill, para que no se note. */
|
|
16159
|
+
get stackRing() {
|
|
16160
|
+
if (this.fill === 'solid')
|
|
16161
|
+
return 'var(--_ep-solid)';
|
|
16162
|
+
if (this.fill === 'plain')
|
|
16163
|
+
return 'var(--ius-surface-card)';
|
|
16164
|
+
return 'var(--_ep-fill)';
|
|
16165
|
+
}
|
|
16166
|
+
/** Tinte de las caras al hue del pill: sobre fills claros → acento + glifo claro; sobre solid → tinte claro + glifo oscuro. */
|
|
16167
|
+
get stackItemStyle() {
|
|
16168
|
+
const c = this.colors;
|
|
16169
|
+
return this.fill === 'solid'
|
|
16170
|
+
? { '--_avt-bg': c.fill, '--_avt-fg': c.text }
|
|
16171
|
+
: { '--_avt-bg': c.accent, '--_avt-fg': c.onSolid };
|
|
16172
|
+
}
|
|
16173
|
+
/** El «+N» toma el mismo tinte (background/color, no son vars de Avatar). */
|
|
16174
|
+
get stackMoreStyle() {
|
|
16175
|
+
const c = this.colors;
|
|
16176
|
+
return this.fill === 'solid'
|
|
16177
|
+
? { background: c.fill, color: c.text }
|
|
16178
|
+
: { background: c.accent, color: c.onSolid };
|
|
16179
|
+
}
|
|
16180
|
+
get stackItems() {
|
|
16181
|
+
return this._assignees;
|
|
16182
|
+
}
|
|
16183
|
+
/** Uno → medallón tintado al hue del pill (hereda si no trae color propio). */
|
|
16184
|
+
get whoStyle() {
|
|
16185
|
+
const who = this.who;
|
|
16186
|
+
if (!who)
|
|
16187
|
+
return null;
|
|
16188
|
+
const explicit = who.color && who.color !== 'auto';
|
|
16189
|
+
const ac = explicit ? categoryColors(who.color) : this.colors;
|
|
16190
|
+
return this.fill === 'solid'
|
|
16191
|
+
? { '--_avt-bg': ac.fill, '--_avt-fg': ac.text }
|
|
16192
|
+
: { '--_avt-bg': ac.accent, '--_avt-fg': ac.onSolid };
|
|
16193
|
+
}
|
|
16194
|
+
get whoIcon() {
|
|
16195
|
+
const who = this.who;
|
|
16196
|
+
if (!who)
|
|
16197
|
+
return undefined;
|
|
16198
|
+
return who.icon || (who.name ? undefined : 'person');
|
|
16199
|
+
}
|
|
16200
|
+
onHostClick(event) {
|
|
16201
|
+
if (this.clickable)
|
|
16202
|
+
this.clicked.emit(event);
|
|
16203
|
+
}
|
|
16204
|
+
onKeydown(event) {
|
|
16205
|
+
if (!this.clickable)
|
|
16206
|
+
return;
|
|
16207
|
+
if (event.key === 'Enter' || event.key === ' ') {
|
|
16208
|
+
event.preventDefault();
|
|
16209
|
+
this.clicked.emit(event);
|
|
16210
|
+
}
|
|
16211
|
+
}
|
|
16212
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EventPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16213
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EventPillComponent, isStandalone: true, selector: "ius-event-pill", inputs: { title: "title", time: "time", endTime: "endTime", category: "category", hue: "hue", kind: "kind", icon: "icon", customHues: "customHues", customIcons: "customIcons", variant: "variant", fill: "fill", size: "size", location: "location", meta: "meta", assignee: "assignee", showAssignee: ["showAssignee", "showAssignee", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], showDot: ["showDot", "showDot", booleanAttribute], titleLines: ["titleLines", "titleLines", numberAttribute], selected: ["selected", "selected", booleanAttribute], past: ["past", "past", booleanAttribute], hoverable: ["hoverable", "hoverable", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-variant": "variant", "attr.data-fill": "fill", "attr.data-size": "size", "attr.data-past": "past ? 'true' : 'false'", "attr.data-selected": "selected ? 'true' : 'false'", "attr.data-hoverable": "hoverable ? 'true' : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel || null", "attr.aria-pressed": "clickable && selected ? 'true' : null", "style.--_ep-accent": "colors.accent", "style.--_ep-fill": "colors.fill", "style.--_ep-border": "colors.border", "style.--_ep-text": "colors.text", "style.--_ep-solid": "colors.solid", "style.--_ep-on-solid": "colors.onSolid" }, classAttribute: "ius-ep" }, ngImport: i0, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\n<ng-template #lead>\n @if (resolvedIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\n } @else if (showDot) {\n <span class=\"ius-ep__dot\"></span>\n }\n</ng-template>\n\n<ng-template #timeTpl>\n @if (timeText) {\n <span class=\"ius-ep__time\">{{ timeText }}</span>\n }\n</ng-template>\n\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\n line-clamp deja de funcionar. -->\n<ng-template #titleTpl>\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\n @if (clampTitle) {\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\n } @else {\n {{ title }}<ng-content />\n }\n </span>\n</ng-template>\n\n<ng-template #metaTpl>\n @if (meta) {\n <span class=\"ius-ep__meta\">{{ meta }}</span>\n }\n</ng-template>\n\n@if (variant === 'block') {\n <span class=\"ius-ep__head\">\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n </span>\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n\n @if (location) {\n <span class=\"ius-ep__loc\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\n <span>{{ location }}</span>\n </span>\n }\n\n @if (showAssignees) {\n <span class=\"ius-ep__assignee\">\n @if (who; as w) {\n <ius-avatar\n size=\"xsmall\"\n [src]=\"w.src\"\n [name]=\"w.name\"\n [monogram]=\"w.monogram\"\n [icon]=\"whoIcon\"\n [alt]=\"w.name\"\n [style]=\"whoStyle\"\n />\n @if (w.name) {\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\n }\n } @else {\n <ius-avatar-stack\n [items]=\"stackItems\"\n size=\"xsmall\"\n [max]=\"3\"\n [ring]=\"stackRing\"\n [itemStyle]=\"stackItemStyle\"\n [moreStyle]=\"stackMoreStyle\"\n ariaLabel=\"Responsables\"\n />\n }\n </span>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: AvatarStackComponent, selector: "ius-avatar-stack", inputs: ["items", "max", "total", "size", "shape", "ring", "ringWidth", "overlap", "itemStyle", "moreStyle", "moreLabel", "ariaLabel"], outputs: ["itemClick", "moreClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16214
|
+
}
|
|
16215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EventPillComponent, decorators: [{
|
|
16216
|
+
type: Component,
|
|
16217
|
+
args: [{ selector: 'ius-event-pill', standalone: true, imports: [NgTemplateOutlet, AvatarComponent, AvatarStackComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
16218
|
+
class: 'ius-ep',
|
|
16219
|
+
'[attr.data-variant]': 'variant',
|
|
16220
|
+
'[attr.data-fill]': 'fill',
|
|
16221
|
+
'[attr.data-size]': 'size',
|
|
16222
|
+
'[attr.data-past]': "past ? 'true' : 'false'",
|
|
16223
|
+
'[attr.data-selected]': "selected ? 'true' : 'false'",
|
|
16224
|
+
'[attr.data-hoverable]': "hoverable ? 'true' : null",
|
|
16225
|
+
'[attr.data-clickable]': "clickable ? 'true' : null",
|
|
16226
|
+
'[attr.role]': "clickable ? 'button' : null",
|
|
16227
|
+
'[attr.tabindex]': 'clickable ? 0 : null',
|
|
16228
|
+
'[attr.aria-label]': 'ariaLabel || null',
|
|
16229
|
+
'[attr.aria-pressed]': "clickable && selected ? 'true' : null",
|
|
16230
|
+
'[style.--_ep-accent]': 'colors.accent',
|
|
16231
|
+
'[style.--_ep-fill]': 'colors.fill',
|
|
16232
|
+
'[style.--_ep-border]': 'colors.border',
|
|
16233
|
+
'[style.--_ep-text]': 'colors.text',
|
|
16234
|
+
'[style.--_ep-solid]': 'colors.solid',
|
|
16235
|
+
'[style.--_ep-on-solid]': 'colors.onSolid',
|
|
16236
|
+
'(click)': 'onHostClick($event)',
|
|
16237
|
+
'(keydown)': 'onKeydown($event)',
|
|
16238
|
+
}, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\n<ng-template #lead>\n @if (resolvedIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\n } @else if (showDot) {\n <span class=\"ius-ep__dot\"></span>\n }\n</ng-template>\n\n<ng-template #timeTpl>\n @if (timeText) {\n <span class=\"ius-ep__time\">{{ timeText }}</span>\n }\n</ng-template>\n\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\n line-clamp deja de funcionar. -->\n<ng-template #titleTpl>\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\n @if (clampTitle) {\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\n } @else {\n {{ title }}<ng-content />\n }\n </span>\n</ng-template>\n\n<ng-template #metaTpl>\n @if (meta) {\n <span class=\"ius-ep__meta\">{{ meta }}</span>\n }\n</ng-template>\n\n@if (variant === 'block') {\n <span class=\"ius-ep__head\">\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n </span>\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n\n @if (location) {\n <span class=\"ius-ep__loc\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\n <span>{{ location }}</span>\n </span>\n }\n\n @if (showAssignees) {\n <span class=\"ius-ep__assignee\">\n @if (who; as w) {\n <ius-avatar\n size=\"xsmall\"\n [src]=\"w.src\"\n [name]=\"w.name\"\n [monogram]=\"w.monogram\"\n [icon]=\"whoIcon\"\n [alt]=\"w.name\"\n [style]=\"whoStyle\"\n />\n @if (w.name) {\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\n }\n } @else {\n <ius-avatar-stack\n [items]=\"stackItems\"\n size=\"xsmall\"\n [max]=\"3\"\n [ring]=\"stackRing\"\n [itemStyle]=\"stackItemStyle\"\n [moreStyle]=\"stackMoreStyle\"\n ariaLabel=\"Responsables\"\n />\n }\n </span>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
16239
|
+
}], propDecorators: { title: [{
|
|
16240
|
+
type: Input
|
|
16241
|
+
}], time: [{
|
|
16242
|
+
type: Input
|
|
16243
|
+
}], endTime: [{
|
|
16244
|
+
type: Input
|
|
16245
|
+
}], category: [{
|
|
16246
|
+
type: Input
|
|
16247
|
+
}], hue: [{
|
|
16248
|
+
type: Input
|
|
16249
|
+
}], kind: [{
|
|
16250
|
+
type: Input
|
|
16251
|
+
}], icon: [{
|
|
16252
|
+
type: Input
|
|
16253
|
+
}], customHues: [{
|
|
16254
|
+
type: Input
|
|
16255
|
+
}], customIcons: [{
|
|
16256
|
+
type: Input
|
|
16257
|
+
}], variant: [{
|
|
16258
|
+
type: Input
|
|
16259
|
+
}], fill: [{
|
|
16260
|
+
type: Input
|
|
16261
|
+
}], size: [{
|
|
16262
|
+
type: Input
|
|
16263
|
+
}], location: [{
|
|
16264
|
+
type: Input
|
|
16265
|
+
}], meta: [{
|
|
16266
|
+
type: Input
|
|
16267
|
+
}], assignee: [{
|
|
16268
|
+
type: Input
|
|
16269
|
+
}], showAssignee: [{
|
|
16270
|
+
type: Input,
|
|
16271
|
+
args: [{ transform: booleanAttribute }]
|
|
16272
|
+
}], showIcon: [{
|
|
16273
|
+
type: Input,
|
|
16274
|
+
args: [{ transform: booleanAttribute }]
|
|
16275
|
+
}], showDot: [{
|
|
16276
|
+
type: Input,
|
|
16277
|
+
args: [{ transform: booleanAttribute }]
|
|
16278
|
+
}], titleLines: [{
|
|
16279
|
+
type: Input,
|
|
16280
|
+
args: [{ transform: numberAttribute }]
|
|
16281
|
+
}], selected: [{
|
|
16282
|
+
type: Input,
|
|
16283
|
+
args: [{ transform: booleanAttribute }]
|
|
16284
|
+
}], past: [{
|
|
16285
|
+
type: Input,
|
|
16286
|
+
args: [{ transform: booleanAttribute }]
|
|
16287
|
+
}], hoverable: [{
|
|
16288
|
+
type: Input,
|
|
16289
|
+
args: [{ transform: booleanAttribute }]
|
|
16290
|
+
}], ariaLabel: [{
|
|
16291
|
+
type: Input
|
|
16292
|
+
}], clicked: [{
|
|
16293
|
+
type: Output
|
|
16294
|
+
}] } });
|
|
16295
|
+
|
|
16296
|
+
const isMissing = (n) => !n || /^no\s+registra$/i.test(String(n).trim());
|
|
16297
|
+
const cleanSide = (names) => Array.isArray(names) ? names.filter((n) => !isMissing(n)) : [];
|
|
16298
|
+
/**
|
|
16299
|
+
* PartyList — Ius Design v2 (familia data-display).
|
|
16300
|
+
*
|
|
16301
|
+
* Render canónico de las **partes procesales** de un proceso, en una sola línea:
|
|
16302
|
+
* primer nombre por lado + contador de excedente («+N») unidos por un conector
|
|
16303
|
+
* («vs» por defecto). Un solo lado se muestra sin conector. Siempre muestra al
|
|
16304
|
+
* menos un nombre por lado cuando hay datos.
|
|
16305
|
+
*
|
|
16306
|
+
* Encapsula además la regla de **dato faltante**: cuando no hay partes
|
|
16307
|
+
* registradas (vacío o «No registra»), en vez de imprimir el vacío **invita a
|
|
16308
|
+
* completar** la información (`(complete)`). Es el equivalente de AvatarStack
|
|
16309
|
+
* para nombres: una sola fuente de verdad para el «+N», el conector y el estado
|
|
16310
|
+
* vacío. No es para avatares (AvatarStack) ni para etiquetas de estado (Tag).
|
|
16311
|
+
*
|
|
16312
|
+
* El host es el `<span class="ius-partylist">` raíz del golden. Fuente de verdad:
|
|
16313
|
+
* `PartyList.jsx` + `PartyList.d.ts` + `PartyList.ng-spec.md`.
|
|
16314
|
+
*/
|
|
16315
|
+
class PartyListComponent {
|
|
16316
|
+
constructor() {
|
|
16317
|
+
/** Conector entre lados. */
|
|
16318
|
+
this.connector = 'vs';
|
|
16319
|
+
/** Nombres visibles por lado antes del «+N». */
|
|
16320
|
+
this.max = 1;
|
|
16321
|
+
/** Tamaño tipográfico. */
|
|
16322
|
+
this.size = 'medium';
|
|
16323
|
+
/** Texto cuando no hay partes registradas. */
|
|
16324
|
+
this.emptyLabel = 'Sin partes registradas';
|
|
16325
|
+
/** Texto del invite a completar. */
|
|
16326
|
+
this.completeLabel = 'Completar';
|
|
16327
|
+
/** Invite accionable del estado vacío (original `onComplete`); enlazarlo lo muestra. */
|
|
16328
|
+
this.complete = new EventEmitter();
|
|
16329
|
+
/** Click en el «+N» (original `onOverflowClick`); enlazarlo lo vuelve botón. */
|
|
16330
|
+
this.overflowClick = new EventEmitter();
|
|
16331
|
+
}
|
|
16332
|
+
/** Normaliza la entrada a lados limpios (sin «No registra»). */
|
|
16333
|
+
get cleaned() {
|
|
16334
|
+
let raw;
|
|
16335
|
+
if (Array.isArray(this.sides))
|
|
16336
|
+
raw = this.sides;
|
|
16337
|
+
else if (this.demandantes || this.demandados)
|
|
16338
|
+
raw = [this.demandantes || [], this.demandados || []];
|
|
16339
|
+
else
|
|
16340
|
+
raw = [];
|
|
16341
|
+
return raw.map(cleanSide);
|
|
16342
|
+
}
|
|
16343
|
+
get isEmpty() {
|
|
16344
|
+
return !this.cleaned.some((s) => s.length > 0);
|
|
16345
|
+
}
|
|
16346
|
+
get partySides() {
|
|
16347
|
+
return this.cleaned.map((names) => {
|
|
16348
|
+
if (names.length === 0)
|
|
16349
|
+
return { shown: 'Sin identificar', extra: 0, missing: true };
|
|
16350
|
+
const shown = names.slice(0, Math.max(1, this.max));
|
|
16351
|
+
return { shown: shown.join(', '), extra: names.length - shown.length, missing: false };
|
|
16352
|
+
});
|
|
16353
|
+
}
|
|
16354
|
+
get showComplete() {
|
|
16355
|
+
return this.complete.observed;
|
|
16356
|
+
}
|
|
16357
|
+
get overflowClickable() {
|
|
16358
|
+
return this.overflowClick.observed;
|
|
16359
|
+
}
|
|
16360
|
+
onComplete(event) {
|
|
16361
|
+
this.complete.emit(event);
|
|
16362
|
+
}
|
|
16363
|
+
onOverflow(event) {
|
|
16364
|
+
this.overflowClick.emit(event);
|
|
16365
|
+
}
|
|
16366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PartyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16367
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PartyListComponent, isStandalone: true, selector: "ius-party-list", inputs: { sides: "sides", demandantes: "demandantes", demandados: "demandados", connector: "connector", max: ["max", "max", numberAttribute], size: "size", emptyLabel: "emptyLabel", completeLabel: "completeLabel" }, outputs: { complete: "complete", overflowClick: "overflowClick" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null" }, classAttribute: "ius-partylist" }, ngImport: i0, template: "@if (isEmpty) {\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\n <span class=\"ius-partylist__empty\">\n <span class=\"ius-partylist__emptylabel\">\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\n <span>{{ emptyLabel }}</span>\n </span>\n @if (showComplete) {\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\n }\n </span>\n} @else {\n @for (side of partySides; track $index; let i = $index) {\n @if (i > 0) {\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\n }\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\n {{ side.shown }}\n @if (side.extra > 0) {\n @if (overflowClickable) {\n <button\n type=\"button\"\n class=\"ius-partylist__extra\"\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\n (click)=\"onOverflow($event)\"\n >+{{ side.extra }}</button>\n } @else {\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\n }\n }\n </span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"], dependencies: [{ kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16368
|
+
}
|
|
16369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PartyListComponent, decorators: [{
|
|
16370
|
+
type: Component,
|
|
16371
|
+
args: [{ selector: 'ius-party-list', standalone: true, imports: [TextButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
16372
|
+
class: 'ius-partylist',
|
|
16373
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
16374
|
+
}, template: "@if (isEmpty) {\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\n <span class=\"ius-partylist__empty\">\n <span class=\"ius-partylist__emptylabel\">\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\n <span>{{ emptyLabel }}</span>\n </span>\n @if (showComplete) {\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\n }\n </span>\n} @else {\n @for (side of partySides; track $index; let i = $index) {\n @if (i > 0) {\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\n }\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\n {{ side.shown }}\n @if (side.extra > 0) {\n @if (overflowClickable) {\n <button\n type=\"button\"\n class=\"ius-partylist__extra\"\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\n (click)=\"onOverflow($event)\"\n >+{{ side.extra }}</button>\n } @else {\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\n }\n }\n </span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"] }]
|
|
16375
|
+
}], propDecorators: { sides: [{
|
|
16376
|
+
type: Input
|
|
16377
|
+
}], demandantes: [{
|
|
16378
|
+
type: Input
|
|
16379
|
+
}], demandados: [{
|
|
16380
|
+
type: Input
|
|
16381
|
+
}], connector: [{
|
|
16382
|
+
type: Input
|
|
16383
|
+
}], max: [{
|
|
16384
|
+
type: Input,
|
|
16385
|
+
args: [{ transform: numberAttribute }]
|
|
16386
|
+
}], size: [{
|
|
16387
|
+
type: Input
|
|
16388
|
+
}], emptyLabel: [{
|
|
16389
|
+
type: Input
|
|
16390
|
+
}], completeLabel: [{
|
|
16391
|
+
type: Input
|
|
16392
|
+
}], complete: [{
|
|
16393
|
+
type: Output
|
|
16394
|
+
}], overflowClick: [{
|
|
16395
|
+
type: Output
|
|
16396
|
+
}] } });
|
|
16397
|
+
|
|
16398
|
+
/**
|
|
16399
|
+
* FileItem — Ius Design v2 (familia data-display).
|
|
16400
|
+
*
|
|
16401
|
+
* Fila o tarjeta de un archivo, carpeta o entidad de dominio en el explorador de
|
|
16402
|
+
* documentos. Compone `ius-file-type-icon` con nombre, metadatos y señales del
|
|
16403
|
+
* explorador (selección, no-leído, compartido, destacado, etiquetas, dueño), con
|
|
16404
|
+
* acciones en hover y menú ⋮ (`ius-dropdown`). Dos layouts desde el mismo
|
|
16405
|
+
* contrato: `row` (lista/tabla con columnas `fields`) y `card` (cuadrícula con
|
|
16406
|
+
* vista previa). No para fila de negocio genérica (ListCard) ni persona/cuenta
|
|
16407
|
+
* (PersonItem/AccountItem).
|
|
16408
|
+
*
|
|
16409
|
+
* **Selección vs apertura**: clic simple = `clicked` (selección/foco; la
|
|
16410
|
+
* multi-selección la decide el consumidor); apertura = `opened` (doble clic /
|
|
16411
|
+
* Enter, o clic simple con `activateOn="single"`), o navega por `href`. La
|
|
16412
|
+
* casilla y el menú detienen la propagación. El host es la raíz `.ius-fileitem`
|
|
16413
|
+
* del golden. Fuente de verdad: `FileItem.jsx` + `FileItem.d.ts` +
|
|
16414
|
+
* `FileItem.ng-spec.md`.
|
|
16415
|
+
*
|
|
16416
|
+
* Decisión de port: el `onContextMenu` del golden se expone como `contextMenu`
|
|
16417
|
+
* (regla transversal 3: los outputs nunca llevan el nombre de un evento nativo,
|
|
16418
|
+
* y `contextmenu` dispararía doble). Se agrega `actionClick` para escuchar las
|
|
16419
|
+
* acciones rápidas sin depender del `onClick` de cada item.
|
|
16420
|
+
*/
|
|
16421
|
+
class FileItemComponent {
|
|
16422
|
+
constructor() {
|
|
16423
|
+
/** Fila (lista/tabla) o tarjeta (cuadrícula). */
|
|
16424
|
+
this.layout = 'row';
|
|
16425
|
+
/** Escala; también responde a `--ius-density` cuando no viene explícito. */
|
|
16426
|
+
this.size = 'medium';
|
|
16427
|
+
/** Cómo se abre: doble clic (estilo explorador) o clic simple. */
|
|
16428
|
+
this.activateOn = 'double';
|
|
16429
|
+
/** Muestra la casilla de selección (visible en hover o si `selected`). */
|
|
16430
|
+
this.selectable = false;
|
|
16431
|
+
this.selected = false;
|
|
16432
|
+
/** Punto navy + nombre en negrita (no leído). */
|
|
16433
|
+
this.unread = false;
|
|
16434
|
+
/** Indicador de compartido. */
|
|
16435
|
+
this.shared = false;
|
|
16436
|
+
/** Etiquetas a la derecha del nombre (row). */
|
|
16437
|
+
this.tags = [];
|
|
16438
|
+
/** Columnas de metadatos (row): modificado, tamaño, etc. */
|
|
16439
|
+
this.fields = [];
|
|
16440
|
+
/** Acciones rápidas reveladas en hover (IconButton). */
|
|
16441
|
+
this.actions = [];
|
|
16442
|
+
/** Opciones del menú ⋮ (items de Dropdown). */
|
|
16443
|
+
this.menu = [];
|
|
16444
|
+
this.disabled = false;
|
|
16445
|
+
/** Abrir el elemento (doble clic / Enter, o clic si `activateOn="single"`). Original `onOpen`. */
|
|
16446
|
+
this.opened = new EventEmitter();
|
|
16447
|
+
/** Clic simple (selección/foco). */
|
|
16448
|
+
this.clicked = new EventEmitter();
|
|
16449
|
+
/** Cambio de la casilla. Original `onSelectChange`. */
|
|
16450
|
+
this.selectChange = new EventEmitter();
|
|
16451
|
+
/** Cambio de la estrella. Original `onStarChange`. */
|
|
16452
|
+
this.starChange = new EventEmitter();
|
|
16453
|
+
/** Clic derecho (para anclar un ContextMenu). Original `onContextMenu`. */
|
|
16454
|
+
this.contextMenu = new EventEmitter();
|
|
16455
|
+
/** Acción rápida pulsada (además del `onClick` del item). */
|
|
16456
|
+
this.actionClick = new EventEmitter();
|
|
16457
|
+
/** Mantiene visibles acciones y menú mientras el ⋮ está abierto. */
|
|
16458
|
+
this.menuOpen = signal(false, /* @ts-ignore */
|
|
16459
|
+
...(ngDevMode ? [{ debugName: "menuOpen" }] : /* istanbul ignore next */ []));
|
|
16460
|
+
}
|
|
16461
|
+
get isCard() {
|
|
16462
|
+
return this.layout === 'card';
|
|
16463
|
+
}
|
|
16464
|
+
get activatable() {
|
|
16465
|
+
return this.opened.observed || this.href != null;
|
|
16466
|
+
}
|
|
16467
|
+
get clickable() {
|
|
16468
|
+
return this.activatable || this.selectable;
|
|
16469
|
+
}
|
|
16470
|
+
get hasStar() {
|
|
16471
|
+
return this.starred != null;
|
|
16472
|
+
}
|
|
16473
|
+
get starLabel() {
|
|
16474
|
+
return this.starred ? 'Quitar de destacados' : 'Marcar como destacado';
|
|
16475
|
+
}
|
|
16476
|
+
widthOf(f) {
|
|
16477
|
+
if (f.width == null)
|
|
16478
|
+
return null;
|
|
16479
|
+
return typeof f.width === 'number' ? `${f.width}px` : f.width;
|
|
16480
|
+
}
|
|
16481
|
+
trackKey(item, index) {
|
|
16482
|
+
return item.key != null ? item.key : index;
|
|
16483
|
+
}
|
|
16484
|
+
doOpen(event) {
|
|
16485
|
+
if (this.disabled)
|
|
16486
|
+
return;
|
|
16487
|
+
if (this.opened.observed)
|
|
16488
|
+
this.opened.emit(event);
|
|
16489
|
+
else if (this.href != null)
|
|
16490
|
+
window.location.href = this.href;
|
|
16491
|
+
}
|
|
16492
|
+
onHostClick(event) {
|
|
16493
|
+
if (this.disabled || !this.clickable)
|
|
16494
|
+
return;
|
|
16495
|
+
this.clicked.emit(event);
|
|
16496
|
+
if (this.activateOn === 'single')
|
|
16497
|
+
this.doOpen(event);
|
|
16498
|
+
}
|
|
16499
|
+
onHostDblClick(event) {
|
|
16500
|
+
if (!this.activatable || this.activateOn === 'single')
|
|
16501
|
+
return;
|
|
16502
|
+
this.doOpen(event);
|
|
16503
|
+
}
|
|
16504
|
+
onKeydown(event) {
|
|
16505
|
+
if (this.disabled || !this.clickable)
|
|
16506
|
+
return;
|
|
16507
|
+
if (event.key === 'Enter') {
|
|
16508
|
+
event.preventDefault();
|
|
16509
|
+
this.doOpen(event);
|
|
16510
|
+
}
|
|
16511
|
+
else if (event.key === ' ' && this.selectable) {
|
|
16512
|
+
event.preventDefault();
|
|
16513
|
+
this.selectChange.emit(!this.selected);
|
|
16514
|
+
}
|
|
16515
|
+
}
|
|
16516
|
+
onContextMenu(event) {
|
|
16517
|
+
this.contextMenu.emit(event);
|
|
16518
|
+
}
|
|
16519
|
+
/** La casilla y el menú no disparan apertura ni selección por clic en la fila. */
|
|
16520
|
+
stop(event) {
|
|
16521
|
+
event.stopPropagation();
|
|
16522
|
+
}
|
|
16523
|
+
onSelect(next) {
|
|
16524
|
+
this.selectChange.emit(next);
|
|
16525
|
+
}
|
|
16526
|
+
onStar(event) {
|
|
16527
|
+
event.stopPropagation();
|
|
16528
|
+
this.starChange.emit(!this.starred);
|
|
16529
|
+
}
|
|
16530
|
+
onAction(action, event) {
|
|
16531
|
+
event.stopPropagation();
|
|
16532
|
+
action.onClick?.(event);
|
|
16533
|
+
this.actionClick.emit({ action, event });
|
|
16534
|
+
}
|
|
16535
|
+
onMenuOpen(open) {
|
|
16536
|
+
this.menuOpen.set(open);
|
|
16537
|
+
}
|
|
16538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16539
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileItemComponent, isStandalone: true, selector: "ius-file-item", inputs: { kind: "kind", name: "name", thumbnail: "thumbnail", layout: "layout", size: "size", href: "href", activateOn: "activateOn", selectable: ["selectable", "selectable", booleanAttribute], selected: ["selected", "selected", booleanAttribute], unread: ["unread", "unread", booleanAttribute], shared: ["shared", "shared", booleanAttribute], starred: "starred", tags: "tags", fields: "fields", caption: "caption", owner: "owner", actions: "actions", menu: "menu", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { opened: "opened", clicked: "clicked", selectChange: "selectChange", starChange: "starChange", contextMenu: "contextMenu", actionClick: "actionClick" }, host: { listeners: { "click": "onHostClick($event)", "dblclick": "onHostDblClick($event)", "keydown": "onKeydown($event)", "contextmenu": "onContextMenu($event)" }, properties: { "attr.data-layout": "layout", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-selected": "selected ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-disabled": "disabled ? 'true' : null", "attr.role": "selectable ? 'option' : activatable ? 'button' : null", "attr.aria-selected": "selectable ? (selected ? 'true' : 'false') : null", "attr.tabindex": "clickable && !disabled ? 0 : null", "attr.aria-label": "ariaLabel || name || null", "attr.aria-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-fileitem" }, ngImport: i0, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\n<ng-template #checkTpl>\n @if (selectable) {\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\n <ius-checkbox\n size=\"small\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n ariaLabel=\"Seleccionar\"\n (checkedChange)=\"onSelect($event)\"\n />\n </span>\n }\n</ng-template>\n\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\n<ng-template #starTpl>\n @if (hasStar) {\n <button\n type=\"button\"\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\n [attr.data-on]=\"starred ? 'true' : 'false'\"\n [attr.aria-label]=\"starLabel\"\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\n [disabled]=\"disabled\"\n (click)=\"onStar($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\n </button>\n }\n</ng-template>\n\n<ng-template #sharedTpl>\n @if (shared) {\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\n <span translate=\"no\" class=\"ius-icon\">group</span>\n </span>\n }\n</ng-template>\n\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\n<ng-template #menuTpl>\n @if (menu.length) {\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpen($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n</ng-template>\n\n@if (isCard) {\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\n <span class=\"ius-fileitem__thumb\">\n @if (thumbnail) {\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n } @else {\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\n }\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n @if (menu.length) {\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n </span>\n <span class=\"ius-fileitem__foot\">\n <span class=\"ius-fileitem__footmain\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n </span>\n} @else {\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas \u00B7 due\u00F1o/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n <span class=\"ius-fileitem__lead\">\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\n </span>\n <span class=\"ius-fileitem__main\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n @if (tags.length) {\n <span class=\"ius-fileitem__tags\">\n @for (t of tags; track trackKey(t, $index)) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [label]=\"t.label\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n />\n }\n </span>\n }\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n\n @if (fields.length) {\n <span class=\"ius-fileitem__fields\">\n @for (f of fields; track trackKey(f, $index)) {\n <span class=\"ius-fileitem__field\" [attr.data-align]=\"f.align || null\" [style.width]=\"widthOf(f)\">\n @if (f.label) {\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-fileitem__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n <span>{{ f.value }}</span>\n </span>\n </span>\n }\n </span>\n }\n\n <span class=\"ius-fileitem__trail\">\n @if (owner) {\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\n </span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n @if (actions.length) {\n <span class=\"ius-fileitem__actions\">\n @for (a of actions; track trackKey(a, $index)) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"disabled\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </span>\n }\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;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]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16540
|
+
}
|
|
16541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileItemComponent, decorators: [{
|
|
16542
|
+
type: Component,
|
|
16543
|
+
args: [{ selector: 'ius-file-item', standalone: true, imports: [
|
|
16544
|
+
NgTemplateOutlet,
|
|
16545
|
+
AvatarComponent,
|
|
16546
|
+
CheckboxComponent,
|
|
16547
|
+
DropdownComponent,
|
|
16548
|
+
IusDropdownTriggerDirective,
|
|
16549
|
+
FileTypeIconComponent,
|
|
16550
|
+
IconButtonComponent,
|
|
16551
|
+
TagComponent,
|
|
16552
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
16553
|
+
class: 'ius-fileitem',
|
|
16554
|
+
'[attr.data-layout]': 'layout',
|
|
16555
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
16556
|
+
'[attr.data-clickable]': "clickable ? 'true' : null",
|
|
16557
|
+
'[attr.data-selected]': "selected ? 'true' : null",
|
|
16558
|
+
'[attr.data-unread]': "unread ? 'true' : null",
|
|
16559
|
+
'[attr.data-menu-open]': "menuOpen() ? 'true' : null",
|
|
16560
|
+
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
16561
|
+
'[attr.role]': "selectable ? 'option' : activatable ? 'button' : null",
|
|
16562
|
+
'[attr.aria-selected]': "selectable ? (selected ? 'true' : 'false') : null",
|
|
16563
|
+
'[attr.tabindex]': 'clickable && !disabled ? 0 : null',
|
|
16564
|
+
'[attr.aria-label]': 'ariaLabel || name || null',
|
|
16565
|
+
'[attr.aria-disabled]': "disabled ? 'true' : null",
|
|
16566
|
+
'(click)': 'onHostClick($event)',
|
|
16567
|
+
'(dblclick)': 'onHostDblClick($event)',
|
|
16568
|
+
'(keydown)': 'onKeydown($event)',
|
|
16569
|
+
'(contextmenu)': 'onContextMenu($event)',
|
|
16570
|
+
}, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\n<ng-template #checkTpl>\n @if (selectable) {\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\n <ius-checkbox\n size=\"small\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n ariaLabel=\"Seleccionar\"\n (checkedChange)=\"onSelect($event)\"\n />\n </span>\n }\n</ng-template>\n\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\n<ng-template #starTpl>\n @if (hasStar) {\n <button\n type=\"button\"\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\n [attr.data-on]=\"starred ? 'true' : 'false'\"\n [attr.aria-label]=\"starLabel\"\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\n [disabled]=\"disabled\"\n (click)=\"onStar($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\n </button>\n }\n</ng-template>\n\n<ng-template #sharedTpl>\n @if (shared) {\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\n <span translate=\"no\" class=\"ius-icon\">group</span>\n </span>\n }\n</ng-template>\n\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\n<ng-template #menuTpl>\n @if (menu.length) {\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpen($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n</ng-template>\n\n@if (isCard) {\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\n <span class=\"ius-fileitem__thumb\">\n @if (thumbnail) {\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n } @else {\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\n }\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n @if (menu.length) {\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n </span>\n <span class=\"ius-fileitem__foot\">\n <span class=\"ius-fileitem__footmain\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n </span>\n} @else {\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas \u00B7 due\u00F1o/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n <span class=\"ius-fileitem__lead\">\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\n </span>\n <span class=\"ius-fileitem__main\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n @if (tags.length) {\n <span class=\"ius-fileitem__tags\">\n @for (t of tags; track trackKey(t, $index)) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [label]=\"t.label\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n />\n }\n </span>\n }\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n\n @if (fields.length) {\n <span class=\"ius-fileitem__fields\">\n @for (f of fields; track trackKey(f, $index)) {\n <span class=\"ius-fileitem__field\" [attr.data-align]=\"f.align || null\" [style.width]=\"widthOf(f)\">\n @if (f.label) {\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-fileitem__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n <span>{{ f.value }}</span>\n </span>\n </span>\n }\n </span>\n }\n\n <span class=\"ius-fileitem__trail\">\n @if (owner) {\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\n </span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n @if (actions.length) {\n <span class=\"ius-fileitem__actions\">\n @for (a of actions; track trackKey(a, $index)) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"disabled\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </span>\n }\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;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]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}\n"] }]
|
|
16571
|
+
}], propDecorators: { kind: [{
|
|
16572
|
+
type: Input
|
|
16573
|
+
}], name: [{
|
|
16574
|
+
type: Input
|
|
16575
|
+
}], thumbnail: [{
|
|
16576
|
+
type: Input
|
|
16577
|
+
}], layout: [{
|
|
16578
|
+
type: Input
|
|
16579
|
+
}], size: [{
|
|
16580
|
+
type: Input
|
|
16581
|
+
}], href: [{
|
|
16582
|
+
type: Input
|
|
16583
|
+
}], activateOn: [{
|
|
16584
|
+
type: Input
|
|
16585
|
+
}], selectable: [{
|
|
16586
|
+
type: Input,
|
|
16587
|
+
args: [{ transform: booleanAttribute }]
|
|
16588
|
+
}], selected: [{
|
|
16589
|
+
type: Input,
|
|
16590
|
+
args: [{ transform: booleanAttribute }]
|
|
16591
|
+
}], unread: [{
|
|
16592
|
+
type: Input,
|
|
16593
|
+
args: [{ transform: booleanAttribute }]
|
|
16594
|
+
}], shared: [{
|
|
16595
|
+
type: Input,
|
|
16596
|
+
args: [{ transform: booleanAttribute }]
|
|
16597
|
+
}], starred: [{
|
|
16598
|
+
type: Input
|
|
16599
|
+
}], tags: [{
|
|
16600
|
+
type: Input
|
|
16601
|
+
}], fields: [{
|
|
16602
|
+
type: Input
|
|
16603
|
+
}], caption: [{
|
|
16604
|
+
type: Input
|
|
16605
|
+
}], owner: [{
|
|
16606
|
+
type: Input
|
|
16607
|
+
}], actions: [{
|
|
16608
|
+
type: Input
|
|
16609
|
+
}], menu: [{
|
|
16610
|
+
type: Input
|
|
16611
|
+
}], disabled: [{
|
|
16612
|
+
type: Input,
|
|
16613
|
+
args: [{ transform: booleanAttribute }]
|
|
16614
|
+
}], ariaLabel: [{
|
|
16615
|
+
type: Input
|
|
16616
|
+
}], opened: [{
|
|
16617
|
+
type: Output
|
|
16618
|
+
}], clicked: [{
|
|
16619
|
+
type: Output
|
|
16620
|
+
}], selectChange: [{
|
|
16621
|
+
type: Output
|
|
16622
|
+
}], starChange: [{
|
|
16623
|
+
type: Output
|
|
16624
|
+
}], contextMenu: [{
|
|
16625
|
+
type: Output
|
|
16626
|
+
}], actionClick: [{
|
|
16627
|
+
type: Output
|
|
16628
|
+
}] } });
|
|
16629
|
+
|
|
16630
|
+
let nextUploadId = 0;
|
|
16631
|
+
/** «1,5 MB» / «320 KB» — port verbatim de `formatBytes` del golden. */
|
|
16632
|
+
function formatBytes(b) {
|
|
16633
|
+
if (b == null || isNaN(b))
|
|
16634
|
+
return '';
|
|
16635
|
+
if (b < 1024)
|
|
16636
|
+
return `${b} B`;
|
|
16637
|
+
const kb = b / 1024;
|
|
16638
|
+
if (kb < 1024)
|
|
16639
|
+
return `${kb.toFixed(kb < 10 ? 1 : 0)} KB`;
|
|
16640
|
+
const mb = kb / 1024;
|
|
16641
|
+
if (mb < 1024)
|
|
16642
|
+
return `${mb.toFixed(mb < 10 ? 1 : 0)} MB`;
|
|
16643
|
+
return `${(mb / 1024).toFixed(2)} GB`;
|
|
16644
|
+
}
|
|
16645
|
+
function uid() {
|
|
16646
|
+
return 'f-' + Math.random().toString(36).slice(2, 9);
|
|
16647
|
+
}
|
|
16648
|
+
/** Valida un archivo contra accept/maxSize (mismas reglas que el golden). */
|
|
16649
|
+
function validateFile(file, accept, maxSize) {
|
|
16650
|
+
if (maxSize && file.size > maxSize) {
|
|
16651
|
+
return `Excede el tamaño máximo (${formatBytes(maxSize)})`;
|
|
16652
|
+
}
|
|
16653
|
+
if (accept) {
|
|
16654
|
+
const acc = accept.split(',').map((s) => s.trim().toLowerCase());
|
|
16655
|
+
const name = (file.name || '').toLowerCase();
|
|
16656
|
+
const type = (file.type || '').toLowerCase();
|
|
16657
|
+
const ok = acc.some((rule) => {
|
|
16658
|
+
if (!rule)
|
|
16659
|
+
return false;
|
|
16660
|
+
if (rule.startsWith('.'))
|
|
16661
|
+
return name.endsWith(rule);
|
|
16662
|
+
if (rule.endsWith('/*'))
|
|
16663
|
+
return type.startsWith(rule.slice(0, -1));
|
|
16664
|
+
return type === rule;
|
|
16665
|
+
});
|
|
16666
|
+
if (!ok)
|
|
16667
|
+
return 'Tipo de archivo no admitido';
|
|
16668
|
+
}
|
|
16669
|
+
return null;
|
|
16670
|
+
}
|
|
16671
|
+
/**
|
|
16672
|
+
* FileUpload — Ius Design v2 (familia inputs). `ControlValueAccessor` de
|
|
16673
|
+
* `IusUploadFile[]`.
|
|
16674
|
+
*
|
|
16675
|
+
* Subir uno o varios archivos: selección nativa (clic → file picker), **drag &
|
|
16676
|
+
* drop** sobre la zona y **progreso por archivo** (pending · uploading · success ·
|
|
16677
|
+
* error) con acción de remover (aborta el upload en curso vía `AbortSignal`).
|
|
16678
|
+
*
|
|
16679
|
+
* Con `uploader`, el componente ejecuta la carga por cada archivo nuevo y
|
|
16680
|
+
* actualiza progreso/estado solo; sin él, los archivos quedan `pending` y el
|
|
16681
|
+
* consumidor controla el ciclo desde fuera (`value`/`valueChange` o el form).
|
|
16682
|
+
* `accept`/`maxSize`/`maxFiles`: los rechazados entran como `error` con su mensaje
|
|
16683
|
+
* y permanecen visibles.
|
|
16684
|
+
*
|
|
16685
|
+
* Compone `ius-linear-progress-bar` (progreso), `ius-icon-button` (quitar),
|
|
16686
|
+
* `ius-popover` (ayuda del label) y `ius-file-type-icon` como medallón de tipo de
|
|
16687
|
+
* cada archivo (dependencia fijada por el frente; el golden usaba un mapa MIME
|
|
16688
|
+
* propio). El host es la raíz `.ius-fu` del golden. Fuente de verdad:
|
|
16689
|
+
* `FileUpload.jsx` + `FileUpload.d.ts` + `FileUpload.ng-spec.md`.
|
|
16690
|
+
*/
|
|
16691
|
+
class FileUploadComponent {
|
|
16692
|
+
constructor() {
|
|
16693
|
+
this.multiple = false;
|
|
16694
|
+
this.variant = 'dropzone';
|
|
16695
|
+
/** Texto del botón de selección. */
|
|
16696
|
+
this.browseLabel = 'Examinar';
|
|
16697
|
+
this.error = false;
|
|
16698
|
+
this.required = false;
|
|
16699
|
+
/** Pastilla «?» junto al label con popover de ayuda (como los demás inputs). */
|
|
16700
|
+
this.showIconHelp = false;
|
|
16701
|
+
this.id = `ius-fu-${nextUploadId++}`;
|
|
16702
|
+
/** Cambia al agregar, remover o cambiar estado/progreso (original `onChange`). */
|
|
16703
|
+
this.valueChange = new EventEmitter();
|
|
16704
|
+
/** Archivos nuevos seleccionados/arrastrados, antes del upload (original `onAdd`). */
|
|
16705
|
+
this.added = new EventEmitter();
|
|
16706
|
+
/** Archivo quitado (original `onRemove`). */
|
|
16707
|
+
this.removed = new EventEmitter();
|
|
16708
|
+
this.files = signal([], /* @ts-ignore */
|
|
16709
|
+
...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
|
|
16710
|
+
this.drag = signal(false, /* @ts-ignore */
|
|
16711
|
+
...(ngDevMode ? [{ debugName: "drag" }] : /* istanbul ignore next */ []));
|
|
16712
|
+
this.disabledInput = false;
|
|
16713
|
+
this.disabledByForm = false;
|
|
16714
|
+
this.dragCounter = 0;
|
|
16715
|
+
this.controllers = new Map();
|
|
16716
|
+
this.onChangeFn = () => { };
|
|
16717
|
+
this.onTouchedFn = () => { };
|
|
16718
|
+
this.formatBytes = formatBytes;
|
|
16719
|
+
}
|
|
16720
|
+
/** Lista controlada de archivos (alternativa al form). */
|
|
16721
|
+
set value(v) {
|
|
16722
|
+
this.files.set(v ? [...v] : []);
|
|
16723
|
+
}
|
|
16724
|
+
get value() {
|
|
16725
|
+
return this.files();
|
|
16726
|
+
}
|
|
16727
|
+
/** Lista inicial (no controlado). */
|
|
16728
|
+
set defaultValue(v) {
|
|
16729
|
+
if (v)
|
|
16730
|
+
this.files.set([...v]);
|
|
16731
|
+
}
|
|
16732
|
+
set disabled(v) {
|
|
16733
|
+
this.disabledInput = v;
|
|
16734
|
+
}
|
|
16735
|
+
get disabled() {
|
|
16736
|
+
return this.disabledInput;
|
|
16737
|
+
}
|
|
16738
|
+
get isDisabled() {
|
|
16739
|
+
return this.disabledInput || this.disabledByForm;
|
|
16740
|
+
}
|
|
16741
|
+
get defaultHeading() {
|
|
16742
|
+
return this.multiple
|
|
16743
|
+
? 'Arrastra archivos o selecciona del sistema'
|
|
16744
|
+
: 'Arrastra un archivo o selecciona del sistema';
|
|
16745
|
+
}
|
|
16746
|
+
get effHeading() {
|
|
16747
|
+
return this.heading || this.defaultHeading;
|
|
16748
|
+
}
|
|
16749
|
+
get effDescription() {
|
|
16750
|
+
if (this.description)
|
|
16751
|
+
return this.description;
|
|
16752
|
+
const parts = [];
|
|
16753
|
+
if (this.accept)
|
|
16754
|
+
parts.push(`Tipos: ${this.accept}`);
|
|
16755
|
+
if (this.maxSize)
|
|
16756
|
+
parts.push(`Máx. por archivo: ${formatBytes(this.maxSize)}`);
|
|
16757
|
+
if (this.maxFiles && this.multiple)
|
|
16758
|
+
parts.push(`Hasta ${this.maxFiles} archivos`);
|
|
16759
|
+
return parts.join(' · ');
|
|
16760
|
+
}
|
|
16761
|
+
get hint() {
|
|
16762
|
+
if (this.error && this.errorText)
|
|
16763
|
+
return this.errorText;
|
|
16764
|
+
return this.helperText || null;
|
|
16765
|
+
}
|
|
16766
|
+
get iconHelpEmpty() {
|
|
16767
|
+
return !this.iconHelpTitle && !this.iconHelpContent;
|
|
16768
|
+
}
|
|
16769
|
+
// ── CVA ──
|
|
16770
|
+
writeValue(v) {
|
|
16771
|
+
this.files.set(v ? [...v] : []);
|
|
16772
|
+
}
|
|
16773
|
+
registerOnChange(fn) {
|
|
16774
|
+
this.onChangeFn = fn;
|
|
16775
|
+
}
|
|
16776
|
+
registerOnTouched(fn) {
|
|
16777
|
+
this.onTouchedFn = fn;
|
|
16778
|
+
}
|
|
16779
|
+
setDisabledState(isDisabled) {
|
|
16780
|
+
this.disabledByForm = isDisabled;
|
|
16781
|
+
}
|
|
16782
|
+
ngOnDestroy() {
|
|
16783
|
+
for (const c of this.controllers.values())
|
|
16784
|
+
c.abort();
|
|
16785
|
+
this.controllers.clear();
|
|
16786
|
+
}
|
|
16787
|
+
// ── Estado ──
|
|
16788
|
+
setFiles(next) {
|
|
16789
|
+
this.files.set(next);
|
|
16790
|
+
this.onChangeFn(next);
|
|
16791
|
+
this.valueChange.emit(next);
|
|
16792
|
+
}
|
|
16793
|
+
patchFile(id, patch) {
|
|
16794
|
+
this.setFiles(this.files().map((f) => (f.id === id ? { ...f, ...patch } : f)));
|
|
16795
|
+
}
|
|
16796
|
+
openPicker() {
|
|
16797
|
+
if (this.isDisabled)
|
|
16798
|
+
return;
|
|
16799
|
+
this.fileInput.nativeElement.click();
|
|
16800
|
+
}
|
|
16801
|
+
onInputChange(event) {
|
|
16802
|
+
const input = event.target;
|
|
16803
|
+
this.addFiles(input.files);
|
|
16804
|
+
input.value = '';
|
|
16805
|
+
this.onTouchedFn();
|
|
16806
|
+
}
|
|
16807
|
+
addFiles(list) {
|
|
16808
|
+
if (this.isDisabled || !list || !list.length)
|
|
16809
|
+
return;
|
|
16810
|
+
const incoming = Array.from(list);
|
|
16811
|
+
const remaining = !this.multiple
|
|
16812
|
+
? 1
|
|
16813
|
+
: this.maxFiles == null
|
|
16814
|
+
? Infinity
|
|
16815
|
+
: Math.max(0, this.maxFiles - this.files().length);
|
|
16816
|
+
if (!remaining)
|
|
16817
|
+
return;
|
|
16818
|
+
const newItems = incoming.slice(0, remaining).map((f) => {
|
|
16819
|
+
const err = validateFile(f, this.accept, this.maxSize);
|
|
16820
|
+
return {
|
|
16821
|
+
id: uid(),
|
|
16822
|
+
name: f.name,
|
|
16823
|
+
size: f.size,
|
|
16824
|
+
type: f.type,
|
|
16825
|
+
progress: 0,
|
|
16826
|
+
status: err ? 'error' : 'pending',
|
|
16827
|
+
error: err || undefined,
|
|
16828
|
+
file: f,
|
|
16829
|
+
};
|
|
16830
|
+
});
|
|
16831
|
+
this.setFiles(this.multiple ? [...this.files(), ...newItems] : newItems);
|
|
16832
|
+
this.added.emit(newItems);
|
|
16833
|
+
if (this.uploader)
|
|
16834
|
+
newItems.forEach((it) => it.status !== 'error' && this.runUpload(it));
|
|
16835
|
+
}
|
|
16836
|
+
runUpload(item) {
|
|
16837
|
+
const uploader = this.uploader;
|
|
16838
|
+
if (!uploader || !item.file)
|
|
16839
|
+
return;
|
|
16840
|
+
const controller = new AbortController();
|
|
16841
|
+
this.controllers.set(item.id, controller);
|
|
16842
|
+
this.patchFile(item.id, { status: 'uploading', progress: 0 });
|
|
16843
|
+
Promise.resolve(uploader(item.file, {
|
|
16844
|
+
onProgress: (pct) => this.patchFile(item.id, { progress: Math.max(0, Math.min(100, Math.round(pct))) }),
|
|
16845
|
+
signal: controller.signal,
|
|
16846
|
+
}))
|
|
16847
|
+
.then((res) => {
|
|
16848
|
+
this.patchFile(item.id, { status: 'success', progress: 100, url: res?.url });
|
|
16849
|
+
})
|
|
16850
|
+
.catch((err) => {
|
|
16851
|
+
if (controller.signal.aborted)
|
|
16852
|
+
return;
|
|
16853
|
+
const message = err instanceof Error ? err.message : undefined;
|
|
16854
|
+
this.patchFile(item.id, { status: 'error', error: message || 'Error de carga' });
|
|
16855
|
+
})
|
|
16856
|
+
.finally(() => this.controllers.delete(item.id));
|
|
16857
|
+
}
|
|
16858
|
+
removeFile(item) {
|
|
16859
|
+
const ctrl = this.controllers.get(item.id);
|
|
16860
|
+
if (ctrl) {
|
|
16861
|
+
ctrl.abort();
|
|
16862
|
+
this.controllers.delete(item.id);
|
|
16863
|
+
}
|
|
16864
|
+
this.setFiles(this.files().filter((f) => f.id !== item.id));
|
|
16865
|
+
this.removed.emit(item);
|
|
16866
|
+
this.onTouchedFn();
|
|
16867
|
+
}
|
|
16868
|
+
// ── Drag & drop ──
|
|
16869
|
+
onDragEnter(e) {
|
|
16870
|
+
if (this.isDisabled)
|
|
16871
|
+
return;
|
|
16872
|
+
e.preventDefault();
|
|
16873
|
+
e.stopPropagation();
|
|
16874
|
+
this.dragCounter++;
|
|
16875
|
+
if (e.dataTransfer && Array.from(e.dataTransfer.types || []).includes('Files'))
|
|
16876
|
+
this.drag.set(true);
|
|
16877
|
+
}
|
|
16878
|
+
onDragLeave(e) {
|
|
16879
|
+
if (this.isDisabled)
|
|
16880
|
+
return;
|
|
16881
|
+
e.preventDefault();
|
|
16882
|
+
e.stopPropagation();
|
|
16883
|
+
this.dragCounter--;
|
|
16884
|
+
if (this.dragCounter <= 0) {
|
|
16885
|
+
this.drag.set(false);
|
|
16886
|
+
this.dragCounter = 0;
|
|
16887
|
+
}
|
|
16888
|
+
}
|
|
16889
|
+
onDragOver(e) {
|
|
16890
|
+
if (this.isDisabled)
|
|
16891
|
+
return;
|
|
16892
|
+
e.preventDefault();
|
|
16893
|
+
e.stopPropagation();
|
|
16894
|
+
if (e.dataTransfer)
|
|
16895
|
+
e.dataTransfer.dropEffect = 'copy';
|
|
16896
|
+
}
|
|
16897
|
+
onDrop(e) {
|
|
16898
|
+
if (this.isDisabled)
|
|
16899
|
+
return;
|
|
16900
|
+
e.preventDefault();
|
|
16901
|
+
e.stopPropagation();
|
|
16902
|
+
this.drag.set(false);
|
|
16903
|
+
this.dragCounter = 0;
|
|
16904
|
+
if (e.dataTransfer?.files)
|
|
16905
|
+
this.addFiles(e.dataTransfer.files);
|
|
16906
|
+
}
|
|
16907
|
+
onZoneKeydown(e) {
|
|
16908
|
+
if (this.isDisabled)
|
|
16909
|
+
return;
|
|
16910
|
+
if (e.key === 'Enter' || e.key === ' ') {
|
|
16911
|
+
e.preventDefault();
|
|
16912
|
+
this.openPicker();
|
|
16913
|
+
}
|
|
16914
|
+
}
|
|
16915
|
+
onBrowseClick(e) {
|
|
16916
|
+
e.stopPropagation();
|
|
16917
|
+
this.openPicker();
|
|
16918
|
+
}
|
|
16919
|
+
statusIcon(f) {
|
|
16920
|
+
switch (f.status) {
|
|
16921
|
+
case 'uploading':
|
|
16922
|
+
return 'upload';
|
|
16923
|
+
case 'success':
|
|
16924
|
+
return 'check_circle';
|
|
16925
|
+
case 'error':
|
|
16926
|
+
return 'error';
|
|
16927
|
+
default:
|
|
16928
|
+
return 'schedule';
|
|
16929
|
+
}
|
|
16930
|
+
}
|
|
16931
|
+
statusText(f) {
|
|
16932
|
+
switch (f.status) {
|
|
16933
|
+
case 'uploading':
|
|
16934
|
+
return `${f.progress}%`;
|
|
16935
|
+
case 'success':
|
|
16936
|
+
return 'Listo';
|
|
16937
|
+
case 'error':
|
|
16938
|
+
return f.error || 'Error';
|
|
16939
|
+
default:
|
|
16940
|
+
return 'En cola';
|
|
16941
|
+
}
|
|
16942
|
+
}
|
|
16943
|
+
showProgress(f) {
|
|
16944
|
+
return f.status === 'uploading' || (f.status === 'success' && f.progress < 100);
|
|
16945
|
+
}
|
|
16946
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16947
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileUploadComponent, isStandalone: true, selector: "ius-file-upload", inputs: { value: "value", defaultValue: "defaultValue", uploader: "uploader", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", maxSize: ["maxSize", "maxSize", numberAttribute], maxFiles: ["maxFiles", "maxFiles", numberAttribute], variant: "variant", heading: "heading", description: "description", browseLabel: "browseLabel", label: "label", helperText: "helperText", error: ["error", "error", booleanAttribute], errorText: "errorText", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", name: "name", id: "id" }, outputs: { valueChange: "valueChange", added: "added", removed: "removed" }, host: { properties: { "attr.data-disabled": "isDisabled ? 'true' : null", "attr.data-error": "error ? 'true' : null", "attr.data-drag": "drag() ? 'true' : null" }, classAttribute: "ius-fu" }, providers: [
|
|
16948
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true },
|
|
16949
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "@if (label) {\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </label>\n}\n\n@if (variant === 'dropzone') {\n <div\n class=\"ius-fu__zone\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\n [attr.aria-label]=\"effHeading\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\n @if (effDescription) {\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\n }\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\n {{ browseLabel }}\n </button>\n </div>\n} @else {\n <button\n type=\"button\"\n class=\"ius-fu__compact\"\n [disabled]=\"isDisabled\"\n (click)=\"openPicker()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\n {{ heading || 'Adjuntar archivo' }}\n </button>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"ius-fu__input\"\n [id]=\"id\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (change)=\"onInputChange($event)\"\n/>\n\n@if (files().length) {\n <ul class=\"ius-fu__list\">\n @for (f of files(); track f.id) {\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\n <span class=\"ius-fu__file-icon\">\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\n </span>\n <div class=\"ius-fu__file-body\">\n <div class=\"ius-fu__file-head\">\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\n </div>\n <div class=\"ius-fu__file-meta\">\n <span class=\"ius-fu__file-status\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\n {{ statusText(f) }}\n </span>\n </div>\n @if (showProgress(f)) {\n <div class=\"ius-fu__progress-wrap\">\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\n </div>\n }\n </div>\n <div class=\"ius-fu__file-actions\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n ariaLabel=\"Quitar archivo\"\n [disabled]=\"isDisabled\"\n (clicked)=\"removeFile(f)\"\n />\n </div>\n </li>\n }\n </ul>\n}\n\n@if (hint) {\n <div class=\"ius-fu__hint\">{{ hint }}</div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{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-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }, { 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 }); }
|
|
16950
|
+
}
|
|
16951
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
16952
|
+
type: Component,
|
|
16953
|
+
args: [{ selector: 'ius-file-upload', standalone: true, imports: [FileTypeIconComponent, IconButtonComponent, LinearProgressBarComponent, PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
16954
|
+
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true },
|
|
16955
|
+
], host: {
|
|
16956
|
+
class: 'ius-fu',
|
|
16957
|
+
'[attr.data-disabled]': "isDisabled ? 'true' : null",
|
|
16958
|
+
'[attr.data-error]': "error ? 'true' : null",
|
|
16959
|
+
'[attr.data-drag]': "drag() ? 'true' : null",
|
|
16960
|
+
}, template: "@if (label) {\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </label>\n}\n\n@if (variant === 'dropzone') {\n <div\n class=\"ius-fu__zone\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\n [attr.aria-label]=\"effHeading\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\n @if (effDescription) {\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\n }\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\n {{ browseLabel }}\n </button>\n </div>\n} @else {\n <button\n type=\"button\"\n class=\"ius-fu__compact\"\n [disabled]=\"isDisabled\"\n (click)=\"openPicker()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\n {{ heading || 'Adjuntar archivo' }}\n </button>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"ius-fu__input\"\n [id]=\"id\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (change)=\"onInputChange($event)\"\n/>\n\n@if (files().length) {\n <ul class=\"ius-fu__list\">\n @for (f of files(); track f.id) {\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\n <span class=\"ius-fu__file-icon\">\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\n </span>\n <div class=\"ius-fu__file-body\">\n <div class=\"ius-fu__file-head\">\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\n </div>\n <div class=\"ius-fu__file-meta\">\n <span class=\"ius-fu__file-status\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\n {{ statusText(f) }}\n </span>\n </div>\n @if (showProgress(f)) {\n <div class=\"ius-fu__progress-wrap\">\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\n </div>\n }\n </div>\n <div class=\"ius-fu__file-actions\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n ariaLabel=\"Quitar archivo\"\n [disabled]=\"isDisabled\"\n (clicked)=\"removeFile(f)\"\n />\n </div>\n </li>\n }\n </ul>\n}\n\n@if (hint) {\n <div class=\"ius-fu__hint\">{{ hint }}</div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{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-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"] }]
|
|
16961
|
+
}], propDecorators: { fileInput: [{
|
|
16962
|
+
type: ViewChild,
|
|
16963
|
+
args: ['fileInput', { static: true }]
|
|
16964
|
+
}], value: [{
|
|
16965
|
+
type: Input
|
|
16966
|
+
}], defaultValue: [{
|
|
16967
|
+
type: Input
|
|
16968
|
+
}], uploader: [{
|
|
16969
|
+
type: Input
|
|
16970
|
+
}], multiple: [{
|
|
16971
|
+
type: Input,
|
|
16972
|
+
args: [{ transform: booleanAttribute }]
|
|
16973
|
+
}], accept: [{
|
|
16974
|
+
type: Input
|
|
16975
|
+
}], maxSize: [{
|
|
16976
|
+
type: Input,
|
|
16977
|
+
args: [{ transform: numberAttribute }]
|
|
16978
|
+
}], maxFiles: [{
|
|
16979
|
+
type: Input,
|
|
16980
|
+
args: [{ transform: numberAttribute }]
|
|
16981
|
+
}], variant: [{
|
|
16982
|
+
type: Input
|
|
16983
|
+
}], heading: [{
|
|
16984
|
+
type: Input
|
|
16985
|
+
}], description: [{
|
|
16986
|
+
type: Input
|
|
16987
|
+
}], browseLabel: [{
|
|
16988
|
+
type: Input
|
|
16989
|
+
}], label: [{
|
|
16990
|
+
type: Input
|
|
16991
|
+
}], helperText: [{
|
|
16992
|
+
type: Input
|
|
16993
|
+
}], error: [{
|
|
16994
|
+
type: Input,
|
|
16995
|
+
args: [{ transform: booleanAttribute }]
|
|
16996
|
+
}], errorText: [{
|
|
16997
|
+
type: Input
|
|
16998
|
+
}], required: [{
|
|
16999
|
+
type: Input,
|
|
17000
|
+
args: [{ transform: booleanAttribute }]
|
|
17001
|
+
}], disabled: [{
|
|
17002
|
+
type: Input,
|
|
17003
|
+
args: [{ transform: booleanAttribute }]
|
|
17004
|
+
}], showIconHelp: [{
|
|
17005
|
+
type: Input,
|
|
17006
|
+
args: [{ transform: booleanAttribute }]
|
|
17007
|
+
}], iconHelpTitle: [{
|
|
17008
|
+
type: Input
|
|
17009
|
+
}], iconHelpContent: [{
|
|
17010
|
+
type: Input
|
|
17011
|
+
}], name: [{
|
|
17012
|
+
type: Input
|
|
17013
|
+
}], id: [{
|
|
17014
|
+
type: Input
|
|
17015
|
+
}], valueChange: [{
|
|
17016
|
+
type: Output
|
|
17017
|
+
}], added: [{
|
|
17018
|
+
type: Output
|
|
17019
|
+
}], removed: [{
|
|
17020
|
+
type: Output
|
|
17021
|
+
}] } });
|
|
17022
|
+
|
|
17023
|
+
/** Riel colapsado — único px estructural (paridad con EntityNavigator). */
|
|
17024
|
+
const RAIL_WIDTH = '52px';
|
|
17025
|
+
/**
|
|
17026
|
+
* DetailSidePanel — Ius Design v2 (familia layout).
|
|
17027
|
+
*
|
|
17028
|
+
* Ficha lateral de una vista de detalle: columna aparte del contenido principal
|
|
17029
|
+
* (hermana del `main` en un contenedor flex), con `border-left`, fondo de tarjeta,
|
|
17030
|
+
* padding lg y **scroll propio** (`.ius-scroll`, `overscroll-behavior: contain`).
|
|
17031
|
+
* Colapsa opcionalmente a un **riel angosto** (52px) con un botón para reabrir —
|
|
17032
|
+
* mismo patrón y tokens que EntityNavigator. El cuerpo se compone de `sections`
|
|
17033
|
+
* (planas, o plegables vía `ius-accordion` `variant="divided"`) o de contenido
|
|
17034
|
+
* proyectado. Se reusa en todas las vistas de detalle del árbol (cliente,
|
|
17035
|
+
* expediente, proceso).
|
|
17036
|
+
*
|
|
17037
|
+
* Colapso controlado (`collapsed` + `(collapsedChange)`) o interno
|
|
17038
|
+
* (`defaultCollapsed`); el estado lo maneja la vista, el componente no lo
|
|
17039
|
+
* persiste. El host es el `<aside class="ius-detailside">` del golden
|
|
17040
|
+
* (`role="complementary"`). Fuente de verdad: `DetailSidePanel.jsx` + `.d.ts` +
|
|
17041
|
+
* `DetailSidePanel.ng-spec.md`.
|
|
17042
|
+
*/
|
|
17043
|
+
class DetailSidePanelComponent {
|
|
17044
|
+
constructor() {
|
|
17045
|
+
/** Ancho de la columna expandida (px o CSS) → `--_ds-w`. */
|
|
17046
|
+
this.width = 340;
|
|
17047
|
+
/** Habilita el colapso a riel. */
|
|
17048
|
+
this.collapsible = false;
|
|
17049
|
+
/** aria/tooltip del toggle contraer. */
|
|
17050
|
+
this.collapseLabel = 'Contraer ficha';
|
|
17051
|
+
/** aria/tooltip del toggle expandir (riel). */
|
|
17052
|
+
this.expandLabel = 'Expandir ficha';
|
|
17053
|
+
/** Ícono del botón de reabrir en el riel. */
|
|
17054
|
+
this.expandIcon = 'left_panel_open';
|
|
17055
|
+
/** Monta las `sections` como Accordion plegable (`variant divided`). */
|
|
17056
|
+
this.accordion = false;
|
|
17057
|
+
/** Varias secciones abiertas a la vez (solo con `accordion`). */
|
|
17058
|
+
this.accordionMultiple = false;
|
|
17059
|
+
/** Al alternar el colapso (two-way con `collapsed`). Original `onCollapsedChange`. */
|
|
17060
|
+
this.collapsedChange = new EventEmitter();
|
|
17061
|
+
this.internal = signal(false, /* @ts-ignore */
|
|
17062
|
+
...(ngDevMode ? [{ debugName: "internal" }] : /* istanbul ignore next */ []));
|
|
17063
|
+
this.railWidth = RAIL_WIDTH;
|
|
17064
|
+
}
|
|
17065
|
+
/** Colapso inicial no controlado. */
|
|
17066
|
+
set defaultCollapsed(v) {
|
|
17067
|
+
this.internal.set(v);
|
|
17068
|
+
}
|
|
17069
|
+
get isCollapsed() {
|
|
17070
|
+
const collapsed = this.collapsed !== undefined ? this.collapsed : this.internal();
|
|
17071
|
+
return this.collapsible && collapsed;
|
|
17072
|
+
}
|
|
17073
|
+
get widthCss() {
|
|
17074
|
+
return typeof this.width === 'number' ? `${this.width}px` : this.width;
|
|
17075
|
+
}
|
|
17076
|
+
get hasSections() {
|
|
17077
|
+
return Array.isArray(this.sections) && this.sections.length > 0;
|
|
17078
|
+
}
|
|
17079
|
+
get useAccordion() {
|
|
17080
|
+
return this.accordion && this.hasSections;
|
|
17081
|
+
}
|
|
17082
|
+
get showHead() {
|
|
17083
|
+
return this.title != null || !!this.titleTemplate || this.collapsible;
|
|
17084
|
+
}
|
|
17085
|
+
get hasTitle() {
|
|
17086
|
+
return this.title != null || !!this.titleTemplate;
|
|
17087
|
+
}
|
|
17088
|
+
sectionId(s, i) {
|
|
17089
|
+
return String(s.id != null ? s.id : 'sec-' + i);
|
|
17090
|
+
}
|
|
17091
|
+
/** Las `sections` como items de `ius-accordion`. */
|
|
17092
|
+
get accordionItems() {
|
|
17093
|
+
return (this.sections ?? []).map((s, i) => ({
|
|
17094
|
+
id: this.sectionId(s, i),
|
|
17095
|
+
title: s.title ?? '',
|
|
17096
|
+
icon: s.icon,
|
|
17097
|
+
content: s.content,
|
|
17098
|
+
}));
|
|
17099
|
+
}
|
|
17100
|
+
/** `defaultOpen` del Accordion derivado de las secciones que traen `defaultOpen`. */
|
|
17101
|
+
get accordionDefaultOpen() {
|
|
17102
|
+
const sections = this.sections ?? [];
|
|
17103
|
+
if (this.accordionMultiple) {
|
|
17104
|
+
return sections.map((s, i) => (s.defaultOpen ? this.sectionId(s, i) : null)).filter((x) => !!x);
|
|
17105
|
+
}
|
|
17106
|
+
const i = sections.findIndex((s) => s.defaultOpen);
|
|
17107
|
+
return i >= 0 ? this.sectionId(sections[i], i) : undefined;
|
|
17108
|
+
}
|
|
17109
|
+
toggle() {
|
|
17110
|
+
const next = !this.isCollapsed;
|
|
17111
|
+
if (this.collapsed === undefined)
|
|
17112
|
+
this.internal.set(next);
|
|
17113
|
+
this.collapsedChange.emit(next);
|
|
17114
|
+
}
|
|
17115
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DetailSidePanelComponent, isStandalone: true, selector: "ius-detail-side-panel", inputs: { width: "width", title: "title", titleTemplate: "titleTemplate", titleIcon: "titleIcon", collapsible: ["collapsible", "collapsible", booleanAttribute], collapsed: "collapsed", defaultCollapsed: ["defaultCollapsed", "defaultCollapsed", booleanAttribute], collapseLabel: "collapseLabel", expandLabel: "expandLabel", expandIcon: "expandIcon", sections: "sections", accordion: ["accordion", "accordion", booleanAttribute], accordionMultiple: ["accordionMultiple", "accordionMultiple", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { attributes: { "role": "complementary" }, properties: { "attr.data-collapsed": "isCollapsed ? 'true' : null", "attr.aria-label": "ariaLabel || title || null", "style.--_ds-w": "widthCss" }, classAttribute: "ius-detailside" }, ngImport: i0, template: "@if (isCollapsed) {\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\n <div class=\"ius-detailside__rail\">\n <ius-icon-button\n [icon]=\"expandIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"expandLabel\"\n [ariaLabel]=\"expandLabel\"\n (clicked)=\"toggle()\"\n />\n @if (title != null) {\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\n }\n </div>\n} @else {\n @if (showHead) {\n <div class=\"ius-detailside__head\">\n @if (hasTitle) {\n <div class=\"ius-detailside__title\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n }\n @if (titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else {\n {{ title }}\n }\n </div>\n } @else {\n <span></span>\n }\n @if (collapsible) {\n <span class=\"ius-detailside__collapse\">\n <ius-icon-button\n icon=\"left_panel_close\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"collapseLabel\"\n [ariaLabel]=\"collapseLabel\"\n (clicked)=\"toggle()\"\n />\n </span>\n }\n </div>\n }\n\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\n @if (useAccordion) {\n <ius-accordion\n variant=\"divided\"\n [multiple]=\"accordionMultiple\"\n [items]=\"accordionItems\"\n [defaultOpen]=\"accordionDefaultOpen\"\n />\n } @else if (hasSections) {\n @for (s of sections; track sectionId(s, $index); let i = $index) {\n <section class=\"ius-detailside__section\">\n @if (s.title != null) {\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\n }\n <ng-container [ngTemplateOutlet]=\"s.content\" />\n </section>\n }\n } @else {\n <ng-content />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon"], outputs: ["openChange"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17117
|
+
}
|
|
17118
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
|
|
17119
|
+
type: Component,
|
|
17120
|
+
args: [{ selector: 'ius-detail-side-panel', standalone: true, imports: [NgTemplateOutlet, AccordionComponent, IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
17121
|
+
class: 'ius-detailside',
|
|
17122
|
+
role: 'complementary',
|
|
17123
|
+
'[attr.data-collapsed]': "isCollapsed ? 'true' : null",
|
|
17124
|
+
'[attr.aria-label]': 'ariaLabel || title || null',
|
|
17125
|
+
'[style.--_ds-w]': 'widthCss',
|
|
17126
|
+
}, template: "@if (isCollapsed) {\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\n <div class=\"ius-detailside__rail\">\n <ius-icon-button\n [icon]=\"expandIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"expandLabel\"\n [ariaLabel]=\"expandLabel\"\n (clicked)=\"toggle()\"\n />\n @if (title != null) {\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\n }\n </div>\n} @else {\n @if (showHead) {\n <div class=\"ius-detailside__head\">\n @if (hasTitle) {\n <div class=\"ius-detailside__title\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n }\n @if (titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else {\n {{ title }}\n }\n </div>\n } @else {\n <span></span>\n }\n @if (collapsible) {\n <span class=\"ius-detailside__collapse\">\n <ius-icon-button\n icon=\"left_panel_close\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"collapseLabel\"\n [ariaLabel]=\"collapseLabel\"\n (clicked)=\"toggle()\"\n />\n </span>\n }\n </div>\n }\n\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\n @if (useAccordion) {\n <ius-accordion\n variant=\"divided\"\n [multiple]=\"accordionMultiple\"\n [items]=\"accordionItems\"\n [defaultOpen]=\"accordionDefaultOpen\"\n />\n } @else if (hasSections) {\n @for (s of sections; track sectionId(s, $index); let i = $index) {\n <section class=\"ius-detailside__section\">\n @if (s.title != null) {\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\n }\n <ng-container [ngTemplateOutlet]=\"s.content\" />\n </section>\n }\n } @else {\n <ng-content />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"] }]
|
|
17127
|
+
}], propDecorators: { width: [{
|
|
17128
|
+
type: Input
|
|
17129
|
+
}], title: [{
|
|
17130
|
+
type: Input
|
|
17131
|
+
}], titleTemplate: [{
|
|
17132
|
+
type: Input
|
|
17133
|
+
}], titleIcon: [{
|
|
17134
|
+
type: Input
|
|
17135
|
+
}], collapsible: [{
|
|
17136
|
+
type: Input,
|
|
17137
|
+
args: [{ transform: booleanAttribute }]
|
|
17138
|
+
}], collapsed: [{
|
|
17139
|
+
type: Input
|
|
17140
|
+
}], defaultCollapsed: [{
|
|
17141
|
+
type: Input,
|
|
17142
|
+
args: [{ transform: booleanAttribute }]
|
|
17143
|
+
}], collapseLabel: [{
|
|
17144
|
+
type: Input
|
|
17145
|
+
}], expandLabel: [{
|
|
17146
|
+
type: Input
|
|
17147
|
+
}], expandIcon: [{
|
|
17148
|
+
type: Input
|
|
17149
|
+
}], sections: [{
|
|
17150
|
+
type: Input
|
|
17151
|
+
}], accordion: [{
|
|
17152
|
+
type: Input,
|
|
17153
|
+
args: [{ transform: booleanAttribute }]
|
|
17154
|
+
}], accordionMultiple: [{
|
|
17155
|
+
type: Input,
|
|
17156
|
+
args: [{ transform: booleanAttribute }]
|
|
17157
|
+
}], ariaLabel: [{
|
|
17158
|
+
type: Input
|
|
17159
|
+
}], collapsedChange: [{
|
|
17160
|
+
type: Output
|
|
17161
|
+
}] } });
|
|
17162
|
+
|
|
17163
|
+
const STATE_META$1 = {
|
|
17164
|
+
done: { icon: 'check', label: 'Hecho' },
|
|
17165
|
+
current: { icon: 'bolt', label: 'Actual' },
|
|
17166
|
+
pending: { icon: 'circle', label: 'Pendiente' },
|
|
17167
|
+
risk: { icon: 'priority_high', label: 'En riesgo' },
|
|
17168
|
+
};
|
|
17169
|
+
/** Etiqueta de estado para resumen (tooltip/popover). */
|
|
17170
|
+
const SUMMARY_STATE = {
|
|
17171
|
+
done: 'Completada',
|
|
17172
|
+
current: 'En curso',
|
|
17173
|
+
pending: 'Pendiente',
|
|
17174
|
+
risk: 'En riesgo',
|
|
17175
|
+
};
|
|
17176
|
+
/* Glifos del centro del anillo: px ESTRUCTURAL (escalan con el anillo, no con la UI). */
|
|
17177
|
+
const CENTER_FS = { small: 12, medium: 15, large: 21 };
|
|
17178
|
+
const DONE_FS = { small: 16, medium: 22, large: 30 };
|
|
17179
|
+
function stateOf(s) {
|
|
17180
|
+
return s.state || 'pending';
|
|
17181
|
+
}
|
|
17182
|
+
/** Date → «DD/MM/AAAA» (es-CO); string ya formateado pasa tal cual. */
|
|
17183
|
+
function fmt$1(d) {
|
|
17184
|
+
if (d == null)
|
|
17185
|
+
return '';
|
|
17186
|
+
if (d instanceof Date) {
|
|
17187
|
+
return d.toLocaleDateString('es-CO', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
17188
|
+
}
|
|
17189
|
+
return String(d);
|
|
17190
|
+
}
|
|
17191
|
+
/** Avance del anillo 0–100. done=100 · pending=0 · current/risk=% subetapas hechas. */
|
|
17192
|
+
function ringValue(stage) {
|
|
17193
|
+
const state = stateOf(stage);
|
|
17194
|
+
if (state === 'done')
|
|
17195
|
+
return 100;
|
|
17196
|
+
if (state === 'pending')
|
|
17197
|
+
return 0;
|
|
17198
|
+
const subs = stage.substages || [];
|
|
17199
|
+
if (!subs.length)
|
|
17200
|
+
return state === 'risk' ? 100 : 0;
|
|
17201
|
+
return Math.round((subs.filter((s) => s.state === 'done').length / subs.length) * 100);
|
|
17202
|
+
}
|
|
17203
|
+
/** ¿La etapa tiene algo que mostrar en el detalle? */
|
|
17204
|
+
function hasStageDetail(stage) {
|
|
17205
|
+
const subs = stage.substages || [];
|
|
17206
|
+
return !!(subs.length || stage.date || stage.assignee || stage.ai);
|
|
17207
|
+
}
|
|
17208
|
+
/** Índice de la subetapa vigente (current → primera pending → última). */
|
|
17209
|
+
function currentSubIndex(subs) {
|
|
17210
|
+
let ci = subs.findIndex((s) => s.state === 'current');
|
|
17211
|
+
if (ci < 0)
|
|
17212
|
+
ci = subs.findIndex((s) => s.state === 'pending');
|
|
17213
|
+
if (ci < 0)
|
|
17214
|
+
ci = subs.length - 1;
|
|
17215
|
+
return ci;
|
|
17216
|
+
}
|
|
17217
|
+
/** Progreso «N de M» de la etapa. done=M/M · pending=hechas/M · current/risk=posición vigente/M. */
|
|
17218
|
+
function progressNM(stage) {
|
|
17219
|
+
const subs = stage.substages || [];
|
|
17220
|
+
const m = subs.length;
|
|
17221
|
+
if (!m)
|
|
17222
|
+
return null;
|
|
17223
|
+
const state = stateOf(stage);
|
|
17224
|
+
if (state === 'done')
|
|
17225
|
+
return { n: m, m };
|
|
17226
|
+
if (state === 'pending')
|
|
17227
|
+
return { n: subs.filter((s) => s.state === 'done').length, m };
|
|
17228
|
+
return { n: currentSubIndex(subs) + 1, m };
|
|
17229
|
+
}
|
|
17230
|
+
/** Texto/contador del detalle de una etapa (reusado inline y collapsed). */
|
|
17231
|
+
function getDetail(stage) {
|
|
17232
|
+
const subs = stage.substages || [];
|
|
17233
|
+
let text = null;
|
|
17234
|
+
let count = null;
|
|
17235
|
+
if (subs.length) {
|
|
17236
|
+
const done = subs.filter((s) => s.state === 'done').length;
|
|
17237
|
+
if (stateOf(stage) === 'current') {
|
|
17238
|
+
const ci = currentSubIndex(subs);
|
|
17239
|
+
text = subs[ci].label;
|
|
17240
|
+
count = `${ci + 1}/${subs.length}`;
|
|
17241
|
+
}
|
|
17242
|
+
else {
|
|
17243
|
+
count = `${done}/${subs.length}`;
|
|
17244
|
+
}
|
|
17245
|
+
}
|
|
17246
|
+
else if (stage.date) {
|
|
17247
|
+
text = fmt$1(stage.date);
|
|
17248
|
+
}
|
|
17249
|
+
return { text, count };
|
|
17250
|
+
}
|
|
17251
|
+
/** Resumen de una línea para el Tooltip: «Nombre · Estado · N de M». */
|
|
17252
|
+
function summaryLabel(stage) {
|
|
17253
|
+
const est = SUMMARY_STATE[stateOf(stage)];
|
|
17254
|
+
const nm = progressNM(stage);
|
|
17255
|
+
return stage.label + ' · ' + est + (nm ? ` · ${nm.n} de ${nm.m}` : '');
|
|
17256
|
+
}
|
|
17257
|
+
/**
|
|
17258
|
+
* Ventana de índices para la tira de segmentos: primera + última + vigente y
|
|
17259
|
+
* vecinas hasta llenar `max`; `null` marca un recorte («…»).
|
|
17260
|
+
*/
|
|
17261
|
+
function windowIdx(total, cur, max) {
|
|
17262
|
+
if (total <= max)
|
|
17263
|
+
return Array.from({ length: total }, (_, i) => i);
|
|
17264
|
+
const set = new Set([0, total - 1, cur]);
|
|
17265
|
+
let k = 1;
|
|
17266
|
+
while (set.size < max && k < total) {
|
|
17267
|
+
if (cur - k >= 0)
|
|
17268
|
+
set.add(cur - k);
|
|
17269
|
+
if (set.size < max && cur + k <= total - 1)
|
|
17270
|
+
set.add(cur + k);
|
|
17271
|
+
k++;
|
|
17272
|
+
}
|
|
17273
|
+
const sorted = [...set].sort((a, b) => a - b).slice(0, max);
|
|
17274
|
+
const out = [];
|
|
17275
|
+
for (let i = 0; i < sorted.length; i++) {
|
|
17276
|
+
if (i > 0 && sorted[i] !== sorted[i - 1] + 1)
|
|
17277
|
+
out.push(null);
|
|
17278
|
+
out.push(sorted[i]);
|
|
17279
|
+
}
|
|
17280
|
+
return out;
|
|
17281
|
+
}
|
|
17282
|
+
/**
|
|
17283
|
+
* Filas de contexto del popover: ≤ 3 subetapas se muestran todas; con más, solo
|
|
17284
|
+
* anterior · vigente · siguiente (con «…» donde se recorta).
|
|
17285
|
+
*/
|
|
17286
|
+
function buildContextRows(stage) {
|
|
17287
|
+
const subs = stage.substages || [];
|
|
17288
|
+
if (!subs.length) {
|
|
17289
|
+
const { text } = getDetail(stage);
|
|
17290
|
+
return text ? [{ kind: 'text', label: text }] : [];
|
|
17291
|
+
}
|
|
17292
|
+
let list = subs;
|
|
17293
|
+
let start = 0;
|
|
17294
|
+
let cutTop = false;
|
|
17295
|
+
let cutBot = false;
|
|
17296
|
+
if (subs.length > 3) {
|
|
17297
|
+
const ci = currentSubIndex(subs);
|
|
17298
|
+
start = Math.max(0, Math.min(ci - 1, subs.length - 3));
|
|
17299
|
+
list = subs.slice(start, start + 3);
|
|
17300
|
+
cutTop = start > 0;
|
|
17301
|
+
cutBot = start + 3 < subs.length;
|
|
17302
|
+
}
|
|
17303
|
+
const rows = [];
|
|
17304
|
+
if (cutTop)
|
|
17305
|
+
rows.push({ kind: 'ellipsis' });
|
|
17306
|
+
for (const s of list) {
|
|
17307
|
+
rows.push({ kind: 'sub', label: s.label, date: s.date ? fmt$1(s.date) : undefined, state: stateOf(s) });
|
|
17308
|
+
}
|
|
17309
|
+
if (cutBot)
|
|
17310
|
+
rows.push({ kind: 'ellipsis' });
|
|
17311
|
+
return rows;
|
|
17312
|
+
}
|
|
17313
|
+
/**
|
|
17314
|
+
* Stepper — Ius Design v2 (familia data-display).
|
|
17315
|
+
*
|
|
17316
|
+
* Indicador **display-only** del avance de un proceso por etapas y subetapas.
|
|
17317
|
+
* Modela la estructura (qué fases hay y en cuál se está) — no es editor ni
|
|
17318
|
+
* historial (eso es Timeline), y no navega (eso es Wizard). El detalle se
|
|
17319
|
+
* delega a un overlay externo (típicamente StageDetailDrawer) vía
|
|
17320
|
+
* `(detailClick)`: el Stepper **no** monta overlays propios salvo el popover de
|
|
17321
|
+
* vistazo rápido de `detailDisplay="popover"`.
|
|
17322
|
+
*
|
|
17323
|
+
* Nodos = `ius-circular-progress` (avance por subetapas) con glifo por estado;
|
|
17324
|
+
* `accent` tematiza anillo, check, conector y etiqueta actual (`risk`/`pending`
|
|
17325
|
+
* son semánticos fijos). `collapsed` = una línea con la etapa vigente + «Etapa X
|
|
17326
|
+
* de N» + segmentos numerados con windowing (`maxSegments`, chip «…» → `expand`)
|
|
17327
|
+
* o botón «Ver etapas» (`collapsedControl="expander"`). El host es la raíz
|
|
17328
|
+
* `.ius-stepper` del golden. Fuente de verdad: `Stepper.jsx` + `Stepper.d.ts` +
|
|
17329
|
+
* `Stepper.ng-spec.md`.
|
|
17330
|
+
*/
|
|
17331
|
+
class StepperComponent {
|
|
17332
|
+
constructor() {
|
|
17333
|
+
/** Etapas a mostrar. */
|
|
17334
|
+
this.stages = [];
|
|
17335
|
+
this.orientation = 'horizontal';
|
|
17336
|
+
this.size = 'medium';
|
|
17337
|
+
/** Tono de identidad (anillo/check/conector/actual). */
|
|
17338
|
+
this.accent = 'primary';
|
|
17339
|
+
/** Subtítulo de detalle (subetapas/fecha/responsable/ai). Off para steppers simples. */
|
|
17340
|
+
this.showDetail = true;
|
|
17341
|
+
/** `popover` elimina el subtítulo: la etiqueta abre un popover de solo lectura. Requiere `showDetail`. */
|
|
17342
|
+
this.detailDisplay = 'inline';
|
|
17343
|
+
/** Una sola línea: etapa vigente + «Etapa X de N» + acceso según `collapsedControl`. */
|
|
17344
|
+
this.collapsed = false;
|
|
17345
|
+
this.collapsedControl = 'segments';
|
|
17346
|
+
/** Tope de segmentos antes del windowing (impar para centrar la vigente). */
|
|
17347
|
+
this.maxSegments = 7;
|
|
17348
|
+
/** Click sobre el nodo (o segmento) de una etapa. */
|
|
17349
|
+
this.stageClick = new EventEmitter();
|
|
17350
|
+
/** Click sobre el subtítulo / «Ver detalle completo» → abrir overlay externo. Sin enlazar = texto inerte. */
|
|
17351
|
+
this.detailClick = new EventEmitter();
|
|
17352
|
+
/** Botón «Ver etapas» de `expander` o chip «…» de `segments` → el consumidor abre su Drawer. */
|
|
17353
|
+
this.expand = new EventEmitter();
|
|
17354
|
+
/** Índice de la etapa cuyo popover está abierto (uno a la vez). */
|
|
17355
|
+
this.openIdx = signal(null, /* @ts-ignore */
|
|
17356
|
+
...(ngDevMode ? [{ debugName: "openIdx" }] : /* istanbul ignore next */ []));
|
|
17357
|
+
}
|
|
17358
|
+
get stageClickable() {
|
|
17359
|
+
return this.stageClick.observed;
|
|
17360
|
+
}
|
|
17361
|
+
get detailClickable() {
|
|
17362
|
+
return this.detailClick.observed;
|
|
17363
|
+
}
|
|
17364
|
+
get expandable() {
|
|
17365
|
+
return this.expand.observed;
|
|
17366
|
+
}
|
|
17367
|
+
trackStage(vm) {
|
|
17368
|
+
return vm.stage.id ?? vm.index;
|
|
17369
|
+
}
|
|
17370
|
+
get vms() {
|
|
17371
|
+
return this.stages.map((stage, i) => this.vmOf(stage, i));
|
|
17372
|
+
}
|
|
17373
|
+
vmOf(stage, i) {
|
|
17374
|
+
const state = stateOf(stage);
|
|
17375
|
+
const prev = i > 0 ? this.stages[i - 1] : undefined;
|
|
17376
|
+
const meta = STATE_META$1[state];
|
|
17377
|
+
const arc = state === 'done' || state === 'current'
|
|
17378
|
+
? 'var(--_accent-strong)'
|
|
17379
|
+
: state === 'risk'
|
|
17380
|
+
? 'var(--ius-danger-500)'
|
|
17381
|
+
: 'var(--ius-neutral-5)';
|
|
17382
|
+
const centerIcon = state === 'done' ? 'check' : state === 'risk' ? 'priority_high' : state === 'current' ? 'bolt' : null;
|
|
17383
|
+
const centerColor = state === 'risk' ? 'var(--ius-danger-600)' : 'var(--_accent-strong)';
|
|
17384
|
+
const { text, count } = getDetail(stage);
|
|
17385
|
+
const hasDetail = hasStageDetail(stage);
|
|
17386
|
+
const displayText = text || (!count ? 'Ver detalle' : null);
|
|
17387
|
+
const single = typeof displayText === 'string' && !!displayText.trim() && !displayText.trim().includes(' ');
|
|
17388
|
+
return {
|
|
17389
|
+
stage,
|
|
17390
|
+
index: i,
|
|
17391
|
+
state,
|
|
17392
|
+
prevDone: !!prev && stateOf(prev) === 'done',
|
|
17393
|
+
ringValue: ringValue(stage),
|
|
17394
|
+
arc,
|
|
17395
|
+
centerIcon,
|
|
17396
|
+
centerFs: state === 'done' ? DONE_FS[this.size] : CENTER_FS[this.size],
|
|
17397
|
+
centerColor,
|
|
17398
|
+
ariaLabel: `${stage.label} — ${meta.label}`,
|
|
17399
|
+
hasDetail,
|
|
17400
|
+
usePopover: this.showDetail && this.detailDisplay === 'popover' && hasDetail,
|
|
17401
|
+
subtitleText: displayText,
|
|
17402
|
+
subtitleSingle: single,
|
|
17403
|
+
count,
|
|
17404
|
+
summary: summaryLabel(stage),
|
|
17405
|
+
stateLabel: SUMMARY_STATE[state],
|
|
17406
|
+
nm: progressNM(stage),
|
|
17407
|
+
rows: buildContextRows(stage),
|
|
17408
|
+
actions: this.resolveActions(stage, i),
|
|
17409
|
+
};
|
|
17410
|
+
}
|
|
17411
|
+
/** Acciones del footer del popover (o el default «Ver detalle completo»); cada una cierra el popover antes de accionar. */
|
|
17412
|
+
resolveActions(stage, i) {
|
|
17413
|
+
const close = () => this.openIdx.set(null);
|
|
17414
|
+
if (this.popoverActions?.length) {
|
|
17415
|
+
return this.popoverActions.map((a) => ({
|
|
17416
|
+
key: a.key,
|
|
17417
|
+
label: a.label,
|
|
17418
|
+
icon: a.icon,
|
|
17419
|
+
variant: a.variant || 'primary',
|
|
17420
|
+
run: () => {
|
|
17421
|
+
close();
|
|
17422
|
+
a.onClick?.(stage, i);
|
|
17423
|
+
},
|
|
17424
|
+
}));
|
|
17425
|
+
}
|
|
17426
|
+
if (this.detailClickable) {
|
|
17427
|
+
return [
|
|
17428
|
+
{
|
|
17429
|
+
key: 'detail',
|
|
17430
|
+
label: 'Ver detalle completo',
|
|
17431
|
+
icon: 'arrow_forward',
|
|
17432
|
+
variant: 'secondary',
|
|
17433
|
+
run: () => {
|
|
17434
|
+
close();
|
|
17435
|
+
this.detailClick.emit({ stage, index: i });
|
|
17436
|
+
},
|
|
17437
|
+
},
|
|
17438
|
+
];
|
|
17439
|
+
}
|
|
17440
|
+
return [];
|
|
17441
|
+
}
|
|
17442
|
+
// ── Colapsado ──
|
|
17443
|
+
get curIdx() {
|
|
17444
|
+
let idx = this.stages.findIndex((s) => s.state === 'current');
|
|
17445
|
+
if (idx < 0)
|
|
17446
|
+
idx = this.stages.findIndex((s) => s.state !== 'done');
|
|
17447
|
+
if (idx < 0)
|
|
17448
|
+
idx = this.stages.length - 1;
|
|
17449
|
+
return idx;
|
|
17450
|
+
}
|
|
17451
|
+
get curVm() {
|
|
17452
|
+
const i = this.curIdx;
|
|
17453
|
+
return i >= 0 ? this.vmOf(this.stages[i], i) : null;
|
|
17454
|
+
}
|
|
17455
|
+
get progressText() {
|
|
17456
|
+
return `Etapa ${this.curIdx + 1} de ${this.stages.length}`;
|
|
17457
|
+
}
|
|
17458
|
+
get effExpandLabel() {
|
|
17459
|
+
return this.expandLabel || `Ver etapas (${this.curIdx + 1}/${this.stages.length})`;
|
|
17460
|
+
}
|
|
17461
|
+
get segments() {
|
|
17462
|
+
const vms = this.vms;
|
|
17463
|
+
return windowIdx(this.stages.length, this.curIdx, this.maxSegments).map((i) => i === null ? { more: true } : { more: false, vm: vms[i] });
|
|
17464
|
+
}
|
|
17465
|
+
// ── Handlers ──
|
|
17466
|
+
onStageClick(vm) {
|
|
17467
|
+
this.stageClick.emit({ stage: vm.stage, index: vm.index });
|
|
17468
|
+
}
|
|
17469
|
+
onDetailClick(vm) {
|
|
17470
|
+
this.detailClick.emit({ stage: vm.stage, index: vm.index });
|
|
17471
|
+
}
|
|
17472
|
+
onExpand() {
|
|
17473
|
+
this.expand.emit();
|
|
17474
|
+
}
|
|
17475
|
+
onPopOpen(index, open) {
|
|
17476
|
+
this.openIdx.set(open ? index : this.openIdx() === index ? null : this.openIdx());
|
|
17477
|
+
}
|
|
17478
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17479
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StepperComponent, isStandalone: true, selector: "ius-stepper", inputs: { stages: "stages", orientation: "orientation", size: "size", accent: "accent", showDetail: ["showDetail", "showDetail", booleanAttribute], detailDisplay: "detailDisplay", collapsed: ["collapsed", "collapsed", booleanAttribute], collapsedControl: "collapsedControl", maxSegments: ["maxSegments", "maxSegments", numberAttribute], label: "label", expandLabel: "expandLabel", popoverActions: "popoverActions" }, outputs: { stageClick: "stageClick", detailClick: "detailClick", expand: "expand" }, host: { properties: { "attr.data-orientation": "orientation", "attr.data-size": "size", "attr.data-collapsed": "collapsed ? 'true' : null", "style.--_accent-strong": "'var(--ius-' + accent + '-600)'", "style.--_accent-soft": "'var(--ius-' + accent + '-200)'", "style.--_accent-c1": "'var(--ius-' + accent + '-300)'", "style.--_accent-c2": "'var(--ius-' + accent + '-400)'", "style.--_accent-c3": "'var(--ius-' + accent + '-500)'" }, classAttribute: "ius-stepper" }, ngImport: i0, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\n<ng-template #nodeTpl let-vm>\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__node\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </button>\n } @else {\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </span>\n }\n</ng-template>\n\n<ng-template #ringTpl let-vm>\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\n @if (vm.centerIcon) {\n <span\n translate=\"no\"\n class=\"ius-icon ius-stepper__center\"\n aria-hidden=\"true\"\n [style.font-size.px]=\"vm.centerFs\"\n [style.color]=\"vm.centerColor\"\n >{{ vm.centerIcon }}</span>\n }\n </ius-circular-progress>\n</ng-template>\n\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\n<ng-template #popTpl let-vm>\n <div class=\"ius-stepper__pop-head\">\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\n @if (vm.nm; as nm) {\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\n }\n </div>\n @if (vm.rows.length) {\n <div class=\"ius-stepper__pop-list\">\n @for (r of vm.rows; track $index) {\n @if (r.kind === 'ellipsis') {\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\n } @else if (r.kind === 'text') {\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\n } @else {\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\n <span class=\"ius-stepper__pop-dot\"></span>\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\n @if (r.date) {\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\n }\n </div>\n }\n }\n </div>\n }\n @if (vm.actions.length) {\n <div class=\"ius-stepper__pop-actions\">\n @for (a of vm.actions; track a.key) {\n @if (a.variant === 'text') {\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\n } @else {\n <ius-button\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\n size=\"small\"\n [fullWidth]=\"true\"\n [prefixIcon]=\"a.icon\"\n [label]=\"a.label\"\n (clicked)=\"a.run()\"\n />\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\n<ng-template #labelPopTpl let-vm>\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__label ius-stepper__label-trigger\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n [attr.title]=\"vm.stage.label\"\n >\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n</ng-template>\n\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\n<ng-template #subtitleTpl let-vm>\n @if (showDetail && vm.hasDetail) {\n @if (detailClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__subtitle\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n (click)=\"onDetailClick(vm)\"\n >\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n } @else {\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n </span>\n }\n }\n</ng-template>\n\n<ng-template #bodyTpl let-vm>\n <div class=\"ius-stepper__body\">\n @if (vm.usePopover) {\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\n } @else {\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\n }\n </div>\n</ng-template>\n\n@if (collapsed) {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (label) {\n <span class=\"ius-stepper__overline\">{{ label }}</span>\n }\n @if (curVm; as cur) {\n <div class=\"ius-stepper__collapsed\">\n <div class=\"ius-stepper__collapsed-lead\">\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\n <div class=\"ius-stepper__collapsed-main\">\n <div class=\"ius-stepper__collapsed-title\">\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\n @if (cur.count) {\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\n }\n </div>\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\n }\n </div>\n </div>\n\n @if (collapsedControl === 'expander') {\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\n @for (vm of vms; track trackStage(vm)) {\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\n }\n </div>\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <ius-button\n variant=\"outline\"\n size=\"small\"\n prefixIcon=\"list\"\n sufixIcon=\"expand_more\"\n [label]=\"effExpandLabel\"\n (clicked)=\"onExpand()\"\n />\n </span>\n } @else {\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\n @for (seg of segments; track $index) {\n @if (seg.more) {\n @if (expandable) {\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\n } @else {\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\n }\n } @else if (seg.vm; as vm) {\n @if (vm.usePopover) {\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n } @else {\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n } @else {\n <span\n class=\"ius-stepper__seg\"\n tabindex=\"0\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </span>\n }\n </ius-tooltip>\n }\n }\n }\n </div>\n </span>\n }\n </div>\n }\n} @else {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <ul class=\"ius-stepper__list\" role=\"list\">\n @for (vm of vms; track trackStage(vm)) {\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\n @if (orientation === 'vertical') {\n <div class=\"ius-stepper__rail\">\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line--v\"></span>\n </div>\n } @else {\n <div class=\"ius-stepper__rail\">\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\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: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { 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"] }, { kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17480
|
+
}
|
|
17481
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StepperComponent, decorators: [{
|
|
17482
|
+
type: Component,
|
|
17483
|
+
args: [{ selector: 'ius-stepper', standalone: true, imports: [
|
|
17484
|
+
NgTemplateOutlet,
|
|
17485
|
+
ButtonComponent,
|
|
17486
|
+
CircularProgressComponent,
|
|
17487
|
+
PopoverComponent,
|
|
17488
|
+
TextButtonComponent,
|
|
17489
|
+
TooltipComponent,
|
|
17490
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
17491
|
+
class: 'ius-stepper',
|
|
17492
|
+
'[attr.data-orientation]': 'orientation',
|
|
17493
|
+
'[attr.data-size]': 'size',
|
|
17494
|
+
'[attr.data-collapsed]': "collapsed ? 'true' : null",
|
|
17495
|
+
'[style.--_accent-strong]': "'var(--ius-' + accent + '-600)'",
|
|
17496
|
+
'[style.--_accent-soft]': "'var(--ius-' + accent + '-200)'",
|
|
17497
|
+
'[style.--_accent-c1]': "'var(--ius-' + accent + '-300)'",
|
|
17498
|
+
'[style.--_accent-c2]': "'var(--ius-' + accent + '-400)'",
|
|
17499
|
+
'[style.--_accent-c3]': "'var(--ius-' + accent + '-500)'",
|
|
17500
|
+
}, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\n<ng-template #nodeTpl let-vm>\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__node\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </button>\n } @else {\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </span>\n }\n</ng-template>\n\n<ng-template #ringTpl let-vm>\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\n @if (vm.centerIcon) {\n <span\n translate=\"no\"\n class=\"ius-icon ius-stepper__center\"\n aria-hidden=\"true\"\n [style.font-size.px]=\"vm.centerFs\"\n [style.color]=\"vm.centerColor\"\n >{{ vm.centerIcon }}</span>\n }\n </ius-circular-progress>\n</ng-template>\n\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\n<ng-template #popTpl let-vm>\n <div class=\"ius-stepper__pop-head\">\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\n @if (vm.nm; as nm) {\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\n }\n </div>\n @if (vm.rows.length) {\n <div class=\"ius-stepper__pop-list\">\n @for (r of vm.rows; track $index) {\n @if (r.kind === 'ellipsis') {\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\n } @else if (r.kind === 'text') {\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\n } @else {\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\n <span class=\"ius-stepper__pop-dot\"></span>\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\n @if (r.date) {\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\n }\n </div>\n }\n }\n </div>\n }\n @if (vm.actions.length) {\n <div class=\"ius-stepper__pop-actions\">\n @for (a of vm.actions; track a.key) {\n @if (a.variant === 'text') {\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\n } @else {\n <ius-button\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\n size=\"small\"\n [fullWidth]=\"true\"\n [prefixIcon]=\"a.icon\"\n [label]=\"a.label\"\n (clicked)=\"a.run()\"\n />\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\n<ng-template #labelPopTpl let-vm>\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__label ius-stepper__label-trigger\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n [attr.title]=\"vm.stage.label\"\n >\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n</ng-template>\n\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\n<ng-template #subtitleTpl let-vm>\n @if (showDetail && vm.hasDetail) {\n @if (detailClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__subtitle\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n (click)=\"onDetailClick(vm)\"\n >\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n } @else {\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n </span>\n }\n }\n</ng-template>\n\n<ng-template #bodyTpl let-vm>\n <div class=\"ius-stepper__body\">\n @if (vm.usePopover) {\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\n } @else {\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\n }\n </div>\n</ng-template>\n\n@if (collapsed) {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (label) {\n <span class=\"ius-stepper__overline\">{{ label }}</span>\n }\n @if (curVm; as cur) {\n <div class=\"ius-stepper__collapsed\">\n <div class=\"ius-stepper__collapsed-lead\">\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\n <div class=\"ius-stepper__collapsed-main\">\n <div class=\"ius-stepper__collapsed-title\">\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\n @if (cur.count) {\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\n }\n </div>\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\n }\n </div>\n </div>\n\n @if (collapsedControl === 'expander') {\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\n @for (vm of vms; track trackStage(vm)) {\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\n }\n </div>\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <ius-button\n variant=\"outline\"\n size=\"small\"\n prefixIcon=\"list\"\n sufixIcon=\"expand_more\"\n [label]=\"effExpandLabel\"\n (clicked)=\"onExpand()\"\n />\n </span>\n } @else {\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\n @for (seg of segments; track $index) {\n @if (seg.more) {\n @if (expandable) {\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\n } @else {\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\n }\n } @else if (seg.vm; as vm) {\n @if (vm.usePopover) {\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n } @else {\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n } @else {\n <span\n class=\"ius-stepper__seg\"\n tabindex=\"0\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </span>\n }\n </ius-tooltip>\n }\n }\n }\n </div>\n </span>\n }\n </div>\n }\n} @else {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <ul class=\"ius-stepper__list\" role=\"list\">\n @for (vm of vms; track trackStage(vm)) {\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\n @if (orientation === 'vertical') {\n <div class=\"ius-stepper__rail\">\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line--v\"></span>\n </div>\n } @else {\n <div class=\"ius-stepper__rail\">\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\n"] }]
|
|
17501
|
+
}], propDecorators: { stages: [{
|
|
17502
|
+
type: Input
|
|
17503
|
+
}], orientation: [{
|
|
17504
|
+
type: Input
|
|
17505
|
+
}], size: [{
|
|
17506
|
+
type: Input
|
|
17507
|
+
}], accent: [{
|
|
17508
|
+
type: Input
|
|
17509
|
+
}], showDetail: [{
|
|
17510
|
+
type: Input,
|
|
17511
|
+
args: [{ transform: booleanAttribute }]
|
|
17512
|
+
}], detailDisplay: [{
|
|
17513
|
+
type: Input
|
|
17514
|
+
}], collapsed: [{
|
|
17515
|
+
type: Input,
|
|
17516
|
+
args: [{ transform: booleanAttribute }]
|
|
17517
|
+
}], collapsedControl: [{
|
|
17518
|
+
type: Input
|
|
17519
|
+
}], maxSegments: [{
|
|
17520
|
+
type: Input,
|
|
17521
|
+
args: [{ transform: numberAttribute }]
|
|
17522
|
+
}], label: [{
|
|
17523
|
+
type: Input
|
|
17524
|
+
}], expandLabel: [{
|
|
17525
|
+
type: Input
|
|
17526
|
+
}], popoverActions: [{
|
|
17527
|
+
type: Input
|
|
17528
|
+
}], stageClick: [{
|
|
17529
|
+
type: Output
|
|
17530
|
+
}], detailClick: [{
|
|
17531
|
+
type: Output
|
|
17532
|
+
}], expand: [{
|
|
17533
|
+
type: Output
|
|
17534
|
+
}] } });
|
|
17535
|
+
|
|
17536
|
+
/** Nodos extra para la franja de meta (chips, contadores…). */
|
|
17537
|
+
class IusStageDetailMetaDirective {
|
|
17538
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailMetaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
17539
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusStageDetailMetaDirective, isStandalone: true, selector: "[iusStageDetailMeta]", ngImport: i0 }); }
|
|
17540
|
+
}
|
|
17541
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailMetaDirective, decorators: [{
|
|
17542
|
+
type: Directive,
|
|
17543
|
+
args: [{ selector: '[iusStageDetailMeta]', standalone: true }]
|
|
17544
|
+
}] });
|
|
17545
|
+
/** Acciones del header del Drawer (editar, agregar rápido…). */
|
|
17546
|
+
class IusStageDetailHeaderActionsDirective {
|
|
17547
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
17548
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusStageDetailHeaderActionsDirective, isStandalone: true, selector: "[iusStageDetailHeaderActions]", ngImport: i0 }); }
|
|
17549
|
+
}
|
|
17550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailHeaderActionsDirective, decorators: [{
|
|
17551
|
+
type: Directive,
|
|
17552
|
+
args: [{ selector: '[iusStageDetailHeaderActions]', standalone: true }]
|
|
17553
|
+
}] });
|
|
17554
|
+
/** Footer sticky (típicamente Button primario + secundario). */
|
|
17555
|
+
class IusStageDetailFooterDirective {
|
|
17556
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
17557
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusStageDetailFooterDirective, isStandalone: true, selector: "[iusStageDetailFooter]", ngImport: i0 }); }
|
|
17558
|
+
}
|
|
17559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStageDetailFooterDirective, decorators: [{
|
|
17560
|
+
type: Directive,
|
|
17561
|
+
args: [{ selector: '[iusStageDetailFooter]', standalone: true }]
|
|
17562
|
+
}] });
|
|
17563
|
+
const STATE_META = {
|
|
17564
|
+
done: { icon: 'check', label: 'Hecho' },
|
|
17565
|
+
current: { icon: 'bolt', label: 'Actual' },
|
|
17566
|
+
pending: { icon: 'circle', label: 'Pendiente' },
|
|
17567
|
+
risk: { icon: 'priority_high', label: 'En riesgo' },
|
|
17568
|
+
};
|
|
17569
|
+
/** Date → «DD/MM/AAAA» (es-CO); string ya formateado pasa tal cual. */
|
|
17570
|
+
function fmt(d) {
|
|
17571
|
+
if (d == null)
|
|
17572
|
+
return '';
|
|
17573
|
+
if (d instanceof Date) {
|
|
17574
|
+
return d.toLocaleDateString('es-CO', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
|
17575
|
+
}
|
|
17576
|
+
return String(d);
|
|
17577
|
+
}
|
|
17578
|
+
/**
|
|
17579
|
+
* StageDetailDrawer — Ius Design v2 (familia overlays).
|
|
17580
|
+
*
|
|
17581
|
+
* Overlay lateral genérico para mostrar el **detalle de un paso o entidad**
|
|
17582
|
+
* (etapa procesal, paso de un flujo de correo, ítem de una lista…) sobre un
|
|
17583
|
+
* `ius-drawer` del sistema. Aporta la franja de meta estándar (badge de estado,
|
|
17584
|
+
* fecha, responsable, ElenIA) tematizada con el acento del módulo, y deja el body
|
|
17585
|
+
* abierto para cualquier contenido: el Timeline de subetapas, un formulario, una
|
|
17586
|
+
* descripción. Lo abre el subtítulo de cada etapa del Stepper, pero sirve en
|
|
17587
|
+
* cualquier «abrir detalle». Creación/edición con muchos campos → Drawer directo.
|
|
17588
|
+
*
|
|
17589
|
+
* Slots: contenido por defecto = cuerpo; `[iusStageDetailMeta]` = chips extra en la
|
|
17590
|
+
* franja; `[iusStageDetailHeaderActions]` y `[iusStageDetailFooter]` se reproyectan
|
|
17591
|
+
* al Drawer. `side`/`size`/`showClose` se delegan. Portalea a `document.body` vía el
|
|
17592
|
+
* Drawer (CDK Overlay). Fuente de verdad: `StageDetailDrawer.jsx` + `.d.ts` +
|
|
17593
|
+
* `StageDetailDrawer.ng-spec.md`.
|
|
17594
|
+
*/
|
|
17595
|
+
class StageDetailDrawerComponent {
|
|
17596
|
+
constructor() {
|
|
17597
|
+
/** Marca «sugerido por ElenIA». */
|
|
17598
|
+
this.ai = false;
|
|
17599
|
+
/** Tematiza el badge de estado (y el Timeline interno cuando se usa). */
|
|
17600
|
+
this.accent = 'primary';
|
|
17601
|
+
/** Lado desde el que entra (pasado a Drawer). */
|
|
17602
|
+
this.side = 'right';
|
|
17603
|
+
/** Ancho del panel (pasado a Drawer): sm 400 · md 440 · lg 560 · xl 720. */
|
|
17604
|
+
this.size = 'md';
|
|
17605
|
+
/** Botón × del header (pasado a Drawer). */
|
|
17606
|
+
this.showClose = true;
|
|
17607
|
+
/** Scrim detrás del panel (pasado a Drawer; la card golden lo apaga para mostrarlo embebido). */
|
|
17608
|
+
this.showScrim = true;
|
|
17609
|
+
this.closeOnScrim = true;
|
|
17610
|
+
this.closeOnEsc = true;
|
|
17611
|
+
/** Cierre solicitado: scrim, Esc, volver o × (original `onClose`). */
|
|
17612
|
+
this.closed = new EventEmitter();
|
|
17613
|
+
/** Espejo de `onOpenChange`. */
|
|
17614
|
+
this.openChange = new EventEmitter();
|
|
17615
|
+
/** Flecha de volver del Drawer (si no se enlaza, la flecha cierra). */
|
|
17616
|
+
this.back = new EventEmitter();
|
|
17617
|
+
}
|
|
17618
|
+
get showBackBtn() {
|
|
17619
|
+
return this.showBack !== undefined ? this.showBack : this.back.observed || undefined;
|
|
17620
|
+
}
|
|
17621
|
+
onBack() {
|
|
17622
|
+
if (this.back.observed)
|
|
17623
|
+
this.back.emit();
|
|
17624
|
+
else
|
|
17625
|
+
this.closed.emit();
|
|
17626
|
+
}
|
|
17627
|
+
get stateMeta() {
|
|
17628
|
+
return this.state ? STATE_META[this.state] : null;
|
|
17629
|
+
}
|
|
17630
|
+
get dateText() {
|
|
17631
|
+
return fmt(this.date);
|
|
17632
|
+
}
|
|
17633
|
+
get hasMeta() {
|
|
17634
|
+
return !!(this.state || this.date || this.assignee || this.ai || this.meta || this.metaSlot);
|
|
17635
|
+
}
|
|
17636
|
+
get accentStrong() {
|
|
17637
|
+
return `var(--ius-${this.accent}-600)`;
|
|
17638
|
+
}
|
|
17639
|
+
get accentSoft() {
|
|
17640
|
+
return `var(--ius-${this.accent}-100)`;
|
|
17641
|
+
}
|
|
17642
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StageDetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
17643
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StageDetailDrawerComponent, isStandalone: true, selector: "ius-stage-detail-drawer", inputs: { open: "open", title: "title", state: "state", date: "date", assignee: "assignee", ai: ["ai", "ai", booleanAttribute], accent: "accent", meta: "meta", side: "side", size: "size", showClose: ["showClose", "showClose", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showBack: "showBack", ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "metaSlot", first: true, predicate: IusStageDetailMetaDirective, descendants: true }, { propertyName: "headerActionsSlot", first: true, predicate: IusStageDetailHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusStageDetailFooterDirective, descendants: true }], ngImport: i0, template: "<ius-drawer\n [open]=\"open\"\n [side]=\"side\"\n [size]=\"size\"\n [showClose]=\"showClose\"\n [showScrim]=\"showScrim\"\n [closeOnScrim]=\"closeOnScrim\"\n [closeOnEsc]=\"closeOnEsc\"\n [showBack]=\"showBackBtn\"\n [title]=\"title\"\n [ariaLabel]=\"ariaLabel\"\n (closed)=\"closed.emit()\"\n (openChange)=\"openChange.emit($event)\"\n (back)=\"onBack()\"\n>\n @if (headerActionsSlot) {\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\n </span>\n }\n\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\n @if (hasMeta) {\n <div class=\"ius-stagedetail__meta\">\n @if (stateMeta; as sm) {\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\n {{ sm.label }}\n </span>\n }\n @if (date) {\n <span class=\"ius-stagedetail__chip\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\n {{ dateText }}\n </span>\n }\n @if (assignee; as who) {\n <span class=\"ius-stagedetail__chip\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n {{ who.name }}\n </span>\n }\n @if (ai) {\n <span class=\"ius-stagedetail__ai\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\n ElenIA\n </span>\n }\n @if (meta) {\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\n }\n <ng-content select=\"[iusStageDetailMeta]\" />\n </div>\n }\n <ng-content />\n </div>\n\n @if (footerSlot) {\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\n <ng-content select=\"[iusStageDetailFooter]\" />\n </div>\n }\n</ius-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DrawerComponent, selector: "ius-drawer", inputs: ["open", "defaultOpen", "side", "size", "title", "centerTitle", "showBack", "showClose", "closeOnScrim", "closeOnEsc", "showScrim", "ariaLabel"], outputs: ["closed", "openChange", "back"] }, { kind: "directive", type: IusDrawerFooterDirective, selector: "[iusDrawerFooter]" }, { kind: "directive", type: IusDrawerHeaderActionsDirective, selector: "[iusDrawerHeaderActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
17644
|
+
}
|
|
17645
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StageDetailDrawerComponent, decorators: [{
|
|
17646
|
+
type: Component,
|
|
17647
|
+
args: [{ selector: 'ius-stage-detail-drawer', standalone: true, imports: [AvatarComponent, DrawerComponent, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-drawer\n [open]=\"open\"\n [side]=\"side\"\n [size]=\"size\"\n [showClose]=\"showClose\"\n [showScrim]=\"showScrim\"\n [closeOnScrim]=\"closeOnScrim\"\n [closeOnEsc]=\"closeOnEsc\"\n [showBack]=\"showBackBtn\"\n [title]=\"title\"\n [ariaLabel]=\"ariaLabel\"\n (closed)=\"closed.emit()\"\n (openChange)=\"openChange.emit($event)\"\n (back)=\"onBack()\"\n>\n @if (headerActionsSlot) {\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\n </span>\n }\n\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\n @if (hasMeta) {\n <div class=\"ius-stagedetail__meta\">\n @if (stateMeta; as sm) {\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\n {{ sm.label }}\n </span>\n }\n @if (date) {\n <span class=\"ius-stagedetail__chip\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\n {{ dateText }}\n </span>\n }\n @if (assignee; as who) {\n <span class=\"ius-stagedetail__chip\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n {{ who.name }}\n </span>\n }\n @if (ai) {\n <span class=\"ius-stagedetail__ai\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\n ElenIA\n </span>\n }\n @if (meta) {\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\n }\n <ng-content select=\"[iusStageDetailMeta]\" />\n </div>\n }\n <ng-content />\n </div>\n\n @if (footerSlot) {\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\n <ng-content select=\"[iusStageDetailFooter]\" />\n </div>\n }\n</ius-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"] }]
|
|
17648
|
+
}], propDecorators: { metaSlot: [{
|
|
17649
|
+
type: ContentChild,
|
|
17650
|
+
args: [IusStageDetailMetaDirective]
|
|
17651
|
+
}], headerActionsSlot: [{
|
|
17652
|
+
type: ContentChild,
|
|
17653
|
+
args: [IusStageDetailHeaderActionsDirective]
|
|
17654
|
+
}], footerSlot: [{
|
|
17655
|
+
type: ContentChild,
|
|
17656
|
+
args: [IusStageDetailFooterDirective]
|
|
17657
|
+
}], open: [{
|
|
17658
|
+
type: Input
|
|
17659
|
+
}], title: [{
|
|
17660
|
+
type: Input
|
|
17661
|
+
}], state: [{
|
|
17662
|
+
type: Input
|
|
17663
|
+
}], date: [{
|
|
17664
|
+
type: Input
|
|
17665
|
+
}], assignee: [{
|
|
17666
|
+
type: Input
|
|
17667
|
+
}], ai: [{
|
|
17668
|
+
type: Input,
|
|
17669
|
+
args: [{ transform: booleanAttribute }]
|
|
17670
|
+
}], accent: [{
|
|
17671
|
+
type: Input
|
|
17672
|
+
}], meta: [{
|
|
17673
|
+
type: Input
|
|
17674
|
+
}], side: [{
|
|
17675
|
+
type: Input
|
|
17676
|
+
}], size: [{
|
|
17677
|
+
type: Input
|
|
17678
|
+
}], showClose: [{
|
|
17679
|
+
type: Input,
|
|
17680
|
+
args: [{ transform: booleanAttribute }]
|
|
17681
|
+
}], showScrim: [{
|
|
17682
|
+
type: Input,
|
|
17683
|
+
args: [{ transform: booleanAttribute }]
|
|
17684
|
+
}], closeOnScrim: [{
|
|
17685
|
+
type: Input,
|
|
17686
|
+
args: [{ transform: booleanAttribute }]
|
|
17687
|
+
}], closeOnEsc: [{
|
|
17688
|
+
type: Input,
|
|
17689
|
+
args: [{ transform: booleanAttribute }]
|
|
17690
|
+
}], showBack: [{
|
|
17691
|
+
type: Input
|
|
17692
|
+
}], ariaLabel: [{
|
|
17693
|
+
type: Input
|
|
17694
|
+
}], closed: [{
|
|
17695
|
+
type: Output
|
|
17696
|
+
}], openChange: [{
|
|
17697
|
+
type: Output
|
|
17698
|
+
}], back: [{
|
|
17699
|
+
type: Output
|
|
17700
|
+
}] } });
|
|
17701
|
+
|
|
15643
17702
|
/*
|
|
15644
17703
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
15645
17704
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -15651,5 +17710,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15651
17710
|
* Generated bundle index. Do not edit.
|
|
15652
17711
|
*/
|
|
15653
17712
|
|
|
15654
|
-
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, BreadcrumbComponent, ButtonComponent, CHART_CATEGORICAL_TONES, CHART_SEMANTIC_TONES, CHART_TONES, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusFormFooterDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LineChartComponent, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SparklineComponent, SplitterComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, chartAxisTicks, chartFormatValue, chartLinearPath, chartNiceNum, chartPath, chartPrefersReducedMotion, chartSmoothPath, chartToneAt, chartToneVar, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
17713
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, AvatarStackComponent, BreadcrumbComponent, ButtonComponent, CATEGORIES, CATEGORY_DEF, CATEGORY_HUE, CHART_CATEGORICAL_TONES, CHART_SEMANTIC_TONES, CHART_TONES, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DetailSidePanelComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EXT_KIND, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, EventPillComponent, FileItemComponent, FileTypeIconComponent, FileUploadComponent, FlexComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusFormFooterDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderOverlineDirective, IusPageHeaderSubtitleDirective, IusPageHeaderTitleDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStageDetailFooterDirective, IusStageDetailHeaderActionsDirective, IusStageDetailMetaDirective, IusStatCaptionDirective, IusStatDeltaDirective, IusStatDeltaLabelDirective, IusStatLabelDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, KINDS, KIND_DEF, KIND_FALLBACK, LineChartComponent, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PartyListComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SparklineComponent, SplitterComponent, StageDetailDrawerComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, StepperComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, categoryColors, categoryOptions, chartAxisTicks, chartFormatValue, chartLinearPath, chartNiceNum, chartPath, chartPrefersReducedMotion, chartSmoothPath, chartToneAt, chartToneVar, createWizard, eventKindOptions, extOf, formatBytes, iusSegColor, kindHue, kindIcon, kindLabel, kindMeta, kindOptions, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveCategoryHue, resolveEventIcon, resolveIllustration, resolveKind, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
15655
17714
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|