@litigiovirtual/ius-design-components 2.1.15 → 2.1.17
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { EventEmitter, signal, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, inject, NgZone, ElementRef, numberAttribute, ViewChild, ViewContainerRef, forwardRef, computed, viewChildren, input, output, effect, DestroyRef, Directive, contentChild, isDevMode, TemplateRef, ContentChild, linkedSignal, PLATFORM_ID, viewChild, HostListener, afterRenderEffect, Injectable, untracked } from '@angular/core';
|
|
2
|
+
import { EventEmitter, signal, booleanAttribute, Output, Input, ChangeDetectionStrategy, Component, inject, NgZone, ElementRef, numberAttribute, ViewChild, ViewContainerRef, forwardRef, computed, viewChildren, input, output, effect, DestroyRef, Directive, contentChild, isDevMode, TemplateRef, ContentChild, linkedSignal, PLATFORM_ID, viewChild, HostListener, afterRenderEffect, Injectable, untracked, contentChildren } from '@angular/core';
|
|
3
3
|
import { Overlay } from '@angular/cdk/overlay';
|
|
4
4
|
import { TemplatePortal } from '@angular/cdk/portal';
|
|
5
5
|
import { Subscription } from 'rxjs';
|
|
@@ -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: [{
|
|
@@ -2940,11 +2940,11 @@ class NavUserComponent {
|
|
|
2940
2940
|
this.clicked.emit(event);
|
|
2941
2941
|
}
|
|
2942
2942
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2943
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NavUserComponent, isStandalone: true, selector: "ius-nav-user", inputs: { user: "user", account: "account", layout: "layout", open: ["open", "open", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-navuser-host" }, ngImport: i0, template: "<button\n class=\"ius-navuser\"\n type=\"button\"\n [attr.data-open]=\"open ? 'true' : null\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n [attr.aria-label]=\"hostAriaLabel\"\n (click)=\"onClick($event)\"\n>\n <span class=\"ius-navuser__label\">\n @if (layout === 'stacked' && account?.name) {\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\n }\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\n </span>\n\n <span class=\"ius-navuser__photo\">\n <ius-avatar\n size=\"small\"\n shape=\"circle\"\n [src]=\"user?.avatar\"\n [name]=\"user?.name\"\n [icon]=\"avatarIcon\"\n [ariaLabel]=\"user?.name || 'Usuario'\"\n />\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2943
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NavUserComponent, isStandalone: true, selector: "ius-nav-user", inputs: { user: "user", account: "account", layout: "layout", open: ["open", "open", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { classAttribute: "ius-navuser-host" }, ngImport: i0, template: "<button\r\n class=\"ius-navuser\"\r\n type=\"button\"\r\n [attr.data-open]=\"open ? 'true' : null\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\r\n [attr.aria-label]=\"hostAriaLabel\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <span class=\"ius-navuser__label\">\r\n @if (layout === 'stacked' && account?.name) {\r\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\r\n }\r\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\r\n </span>\r\n\r\n <span class=\"ius-navuser__photo\">\r\n <ius-avatar\r\n size=\"small\"\r\n shape=\"circle\"\r\n [src]=\"user?.avatar\"\r\n [name]=\"user?.name\"\r\n [icon]=\"avatarIcon\"\r\n [ariaLabel]=\"user?.name || 'Usuario'\"\r\n />\r\n </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2944
2944
|
}
|
|
2945
2945
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, decorators: [{
|
|
2946
2946
|
type: Component,
|
|
2947
|
-
args: [{ selector: 'ius-nav-user', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-navuser-host' }, template: "<button\n class=\"ius-navuser\"\n type=\"button\"\n [attr.data-open]=\"open ? 'true' : null\"\n aria-haspopup=\"menu\"\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\n [attr.aria-label]=\"hostAriaLabel\"\n (click)=\"onClick($event)\"\n>\n <span class=\"ius-navuser__label\">\n @if (layout === 'stacked' && account?.name) {\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\n }\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\n </span>\n\n <span class=\"ius-navuser__photo\">\n <ius-avatar\n size=\"small\"\n shape=\"circle\"\n [src]=\"user?.avatar\"\n [name]=\"user?.name\"\n [icon]=\"avatarIcon\"\n [ariaLabel]=\"user?.name || 'Usuario'\"\n />\n </span>\n</button>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"] }]
|
|
2947
|
+
args: [{ selector: 'ius-nav-user', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-navuser-host' }, template: "<button\r\n class=\"ius-navuser\"\r\n type=\"button\"\r\n [attr.data-open]=\"open ? 'true' : null\"\r\n aria-haspopup=\"menu\"\r\n [attr.aria-expanded]=\"open ? 'true' : 'false'\"\r\n [attr.aria-label]=\"hostAriaLabel\"\r\n (click)=\"onClick($event)\"\r\n>\r\n <span class=\"ius-navuser__label\">\r\n @if (layout === 'stacked' && account?.name) {\r\n <span class=\"ius-navuser__account\">{{ account!.name }}</span>\r\n }\r\n <span class=\"ius-navuser__name\">{{ user?.name }}</span>\r\n </span>\r\n\r\n <span class=\"ius-navuser__photo\">\r\n <ius-avatar\r\n size=\"small\"\r\n shape=\"circle\"\r\n [src]=\"user?.avatar\"\r\n [name]=\"user?.name\"\r\n [icon]=\"avatarIcon\"\r\n [ariaLabel]=\"user?.name || 'Usuario'\"\r\n />\r\n </span>\r\n</button>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex}.ius-navuser{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;gap:var(--ius-space-sm);max-width:260px;padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xxs) var(--ius-space-xs);background:transparent;border:0;border-radius:var(--ius-radius-md);cursor:pointer;font-family:var(--ius-font-body);color:inherit;text-align:left;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-navuser:hover,:host([data-state=hover]) .ius-navuser{background:var(--ius-neutral-2)}.ius-navuser:active,:host([data-state=pressed]) .ius-navuser,.ius-navuser[data-open=true]{background:var(--ius-neutral-3)}.ius-navuser:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-navuser__label{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:0;line-height:1.15}.ius-navuser__account{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-regular, 400);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__name{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-navuser__photo{flex:0 0 auto}\n"] }]
|
|
2948
2948
|
}], propDecorators: { user: [{
|
|
2949
2949
|
type: Input
|
|
2950
2950
|
}], account: [{
|
|
@@ -3170,7 +3170,7 @@ class InsigniaComponent {
|
|
|
3170
3170
|
...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
|
|
3171
3171
|
}
|
|
3172
3172
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InsigniaComponent, isStandalone: true, selector: "ius-insignia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() !== 'dot' ? variant() : null", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-ring": "showRing() || null", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-insignia" }, ngImport: i0, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\n@if (isCount()) {\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\n} @else {\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\n@if (label() != null) {\n <span class=\"ius-insignia__label\">{{ label() }}</span>\n} @else {\n <span class=\"ius-insignia__label\"><ng-content /></span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3173
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: InsigniaComponent, isStandalone: true, selector: "ius-insignia", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, ring: { classPropertyName: "ring", publicName: "ring", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-variant": "variant() !== 'dot' ? variant() : null", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-ring": "showRing() || null", "attr.role": "ariaLabel() ? 'img' : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-insignia" }, ngImport: i0, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3174
3174
|
}
|
|
3175
3175
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, decorators: [{
|
|
3176
3176
|
type: Component,
|
|
@@ -3182,7 +3182,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3182
3182
|
'[attr.data-ring]': 'showRing() || null',
|
|
3183
3183
|
'[attr.role]': "ariaLabel() ? 'img' : null",
|
|
3184
3184
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
3185
|
-
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\n@if (isCount()) {\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\n} @else {\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\n}\n\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\n@if (label() != null) {\n <span class=\"ius-insignia__label\">{{ label() }}</span>\n} @else {\n <span class=\"ius-insignia__label\"><ng-content /></span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"] }]
|
|
3185
|
+
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\r\n@if (isCount()) {\r\n <span class=\"ius-insignia__count\">{{ displayCount() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__dot\" aria-hidden=\"true\"></span>\r\n}\r\n\r\n<!-- Etiqueta opcional: input `label` \u203A contenido proyectado -->\r\n@if (label() != null) {\r\n <span class=\"ius-insignia__label\">{{ label() }}</span>\r\n} @else {\r\n <span class=\"ius-insignia__label\"><ng-content /></span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ins-dot: 10px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xs);--_ins-accent: var(--ius-neutral-7);--_ins-solid: var(--ius-neutral-7);display:inline-flex;align-items:center;gap:var(--_ins-gap);font-family:var(--ius-font-body);font-size:var(--_ins-fs);line-height:1;color:var(--ius-text-secondary);vertical-align:middle}:host([data-size=small]){--_ins-dot: 8px;--_ins-fs: var(--ius-fs-sm);--_ins-gap: var(--ius-space-xxs)}:host([data-size=large]){--_ins-dot: 12px;--_ins-fs: var(--ius-fs-base);--_ins-gap: var(--ius-space-xs)}:host([data-tone=primary]){--_ins-accent: var(--ius-primary-500);--_ins-solid: var(--ius-primary-900)}:host([data-tone=info]){--_ins-accent: var(--ius-info-500);--_ins-solid: var(--ius-info-600)}:host([data-tone=success]){--_ins-accent: var(--ius-success-500);--_ins-solid: var(--ius-success-600)}:host([data-tone=warning]){--_ins-accent: var(--ius-warning-500);--_ins-solid: var(--ius-warning-600)}:host([data-tone=danger]){--_ins-accent: var(--ius-danger-500);--_ins-solid: var(--ius-danger-600)}:host([data-tone=neutral]){--_ins-accent: var(--ius-neutral-6);--_ins-solid: var(--ius-neutral-7)}:host([data-tone=durazno]){--_ins-accent: var(--ius-durazno-500);--_ins-solid: var(--ius-durazno-600)}:host([data-tone=banano]){--_ins-accent: var(--ius-banano-500);--_ins-solid: var(--ius-banano-700)}:host([data-tone=sandia]){--_ins-accent: var(--ius-sandia-500);--_ins-solid: var(--ius-sandia-600)}:host([data-tone=arandano]){--_ins-accent: var(--ius-arandano-500);--_ins-solid: var(--ius-arandano-600)}:host([data-tone=uva]){--_ins-accent: var(--ius-uva-500);--_ins-solid: var(--ius-uva-600)}:host([data-tone=aguacate]){--_ins-accent: var(--ius-aguacate-500);--_ins-solid: var(--ius-aguacate-600)}.ius-insignia__dot{flex:0 0 auto;width:var(--_ins-dot);height:var(--_ins-dot);border-radius:var(--ius-radius-pill);background:var(--_ins-accent)}:host([data-ring=true]) .ius-insignia__dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--_ins-accent) 22%,transparent)}.ius-insignia__count{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:calc(var(--_ins-fs) + 6px);height:calc(var(--_ins-fs) + 6px);padding:0 var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--_ins-solid);color:var(--ius-neutral-white);font-family:var(--ius-font-display);font-size:calc(var(--_ins-fs) - 1px);font-weight:var(--ius-fw-semibold);line-height:1;font-variant-numeric:tabular-nums}:host([data-variant=count-soft]) .ius-insignia__count{background:color-mix(in srgb,var(--_ins-accent) 18%,white);color:var(--_ins-solid)}.ius-insignia__label{color:inherit}.ius-insignia__label:empty{display:none}\n"] }]
|
|
3186
3186
|
}], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], ring: [{ type: i0.Input, args: [{ isSignal: true, alias: "ring", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
3187
3187
|
|
|
3188
3188
|
/**
|
|
@@ -4846,7 +4846,7 @@ class LoadingComponent {
|
|
|
4846
4846
|
return this.showLabel && this.label != null && this.label !== '';
|
|
4847
4847
|
}
|
|
4848
4848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoadingComponent, isStandalone: true, selector: "ius-loading", inputs: { variant: "variant", label: "label", showLabel: ["showLabel", "showLabel", booleanAttribute], tone: "tone", brand: ["brand", "brand", booleanAttribute], size: "size", active: ["active", "active", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "attr.data-variant": "variant", "attr.data-brand": "brand ? 'true' : null", "attr.role": "variant !== 'overlay' ? 'status' : null", "attr.aria-live": "variant !== 'overlay' ? 'polite' : null", "attr.aria-busy": "variant === 'overlay' && active ? 'true' : null" }, classAttribute: "ius-loading" }, ngImport: i0, template: "@if (variant === 'overlay') {\n <ng-content />\n @if (active) {\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n </div>\n }\n} @else {\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"], dependencies: [{ kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: LoadingMarkComponent, selector: "ius-loading-mark", inputs: ["size", "surface", "paused", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: LoadingComponent, isStandalone: true, selector: "ius-loading", inputs: { variant: "variant", label: "label", showLabel: ["showLabel", "showLabel", booleanAttribute], tone: "tone", brand: ["brand", "brand", booleanAttribute], size: "size", active: ["active", "active", booleanAttribute], ariaLabel: "ariaLabel" }, host: { properties: { "attr.data-variant": "variant", "attr.data-brand": "brand ? 'true' : null", "attr.role": "variant !== 'overlay' ? 'status' : null", "attr.aria-live": "variant !== 'overlay' ? 'polite' : null", "attr.aria-busy": "variant === 'overlay' && active ? 'true' : null" }, classAttribute: "ius-loading" }, ngImport: i0, template: "@if (variant === 'overlay') {\r\n <ng-content />\r\n @if (active) {\r\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\r\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\r\n <span class=\"ius-loading__spinner\">\r\n @if (brand) {\r\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\r\n } @else {\r\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\r\n }\r\n </span>\r\n @if (showLabelNode) {\r\n <span class=\"ius-loading__label\">{{ label }}</span>\r\n }\r\n </div>\r\n }\r\n} @else {\r\n <span class=\"ius-loading__spinner\">\r\n @if (brand) {\r\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\r\n } @else {\r\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\r\n }\r\n </span>\r\n @if (showLabelNode) {\r\n <span class=\"ius-loading__label\">{{ label }}</span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"], dependencies: [{ kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: LoadingMarkComponent, selector: "ius-loading-mark", inputs: ["size", "surface", "paused", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4850
4850
|
}
|
|
4851
4851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
4852
4852
|
type: Component,
|
|
@@ -4857,7 +4857,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4857
4857
|
'[attr.role]': "variant !== 'overlay' ? 'status' : null",
|
|
4858
4858
|
'[attr.aria-live]': "variant !== 'overlay' ? 'polite' : null",
|
|
4859
4859
|
'[attr.aria-busy]': "variant === 'overlay' && active ? 'true' : null",
|
|
4860
|
-
}, template: "@if (variant === 'overlay') {\n <ng-content />\n @if (active) {\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n </div>\n }\n} @else {\n <span class=\"ius-loading__spinner\">\n @if (brand) {\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\n } @else {\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\n }\n </span>\n @if (showLabelNode) {\n <span class=\"ius-loading__label\">{{ label }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"] }]
|
|
4860
|
+
}, template: "@if (variant === 'overlay') {\r\n <ng-content />\r\n @if (active) {\r\n <div class=\"ius-loading__overlay\" role=\"status\" aria-live=\"polite\">\r\n <span class=\"ius-loading__scrim\" aria-hidden=\"true\"></span>\r\n <span class=\"ius-loading__spinner\">\r\n @if (brand) {\r\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\r\n } @else {\r\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\r\n }\r\n </span>\r\n @if (showLabelNode) {\r\n <span class=\"ius-loading__label\">{{ label }}</span>\r\n }\r\n </div>\r\n }\r\n} @else {\r\n <span class=\"ius-loading__spinner\">\r\n @if (brand) {\r\n <ius-loading-mark [size]=\"markPx\" [surface]=\"markSurface\" [ariaLabel]=\"spinnerAria\" />\r\n } @else {\r\n <ius-circular-progress [indeterminate]=\"true\" [size]=\"sz\" [tone]=\"tone\" [ariaLabel]=\"spinnerAria\" />\r\n }\r\n </span>\r\n @if (showLabelNode) {\r\n <span class=\"ius-loading__label\">{{ label }}</span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{font-family:var(--ius-font-body);color:var(--ius-text-secondary)}.ius-loading__label{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm, 1.5);color:var(--ius-text-secondary)}:host([data-variant=inline]){display:inline-flex;align-items:center;gap:var(--ius-space-sm)}:host([data-variant=section]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm);width:100%;padding:var(--ius-space-3xl) var(--ius-space-lg);text-align:center}:host([data-variant=page]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-md);min-height:100vh;width:100%;background:var(--ius-surface-page);text-align:center}:host([data-variant=overlay]){display:block;position:relative}:host([data-brand=true][data-variant=page]){background:var(--ius-gradient-brand-deep);color:var(--ius-neutral-white)}:host([data-brand=true][data-variant=page]) .ius-loading__label{color:var(--ius-neutral-2)}.ius-loading__overlay{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-sm)}.ius-loading__scrim{position:absolute;inset:0;background:var(--ius-surface-card);opacity:.72}.ius-loading__overlay .ius-loading__spinner,.ius-loading__overlay .ius-loading__label{position:relative}@media(prefers-reduced-motion:reduce){.ius-loading__scrim{opacity:.85}}\n"] }]
|
|
4861
4861
|
}], propDecorators: { variant: [{
|
|
4862
4862
|
type: Input
|
|
4863
4863
|
}], label: [{
|
|
@@ -11530,7 +11530,7 @@ class SegmentGroupComponent {
|
|
|
11530
11530
|
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
11531
11531
|
}
|
|
11532
11532
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11533
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SegmentGroupComponent, isStandalone: true, selector: "ius-segment-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() ?? null" }, classAttribute: "ius-segmentgroup" }, ngImport: i0, template: "<!--\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\n siguen coincidiendo con los hosts reales de cada control).\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\n-->\n<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11533
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: SegmentGroupComponent, isStandalone: true, selector: "ius-segment-group", inputs: { ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.aria-label": "ariaLabel() ?? null" }, classAttribute: "ius-segmentgroup" }, ngImport: i0, template: "<!--\r\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\r\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\r\n siguen coincidiendo con los hosts reales de cada control).\r\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\r\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\r\n-->\r\n<ng-content />\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11534
11534
|
}
|
|
11535
11535
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, decorators: [{
|
|
11536
11536
|
type: Component,
|
|
@@ -11539,7 +11539,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11539
11539
|
class: 'ius-segmentgroup',
|
|
11540
11540
|
role: 'group',
|
|
11541
11541
|
'[attr.aria-label]': 'ariaLabel() ?? null',
|
|
11542
|
-
}, template: "<!--\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\n siguen coincidiendo con los hosts reales de cada control).\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\n-->\n<ng-content />\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"] }]
|
|
11542
|
+
}, template: "<!--\r\n El grupo es puramente estructural: solo proyecta los controles tal cual, sin\r\n envolverlos en ning\u00FAn nodo extra (as\u00ED `:first-child` / `:last-child` / `+`\r\n siguen coincidiendo con los hosts reales de cada control).\r\n Todo el trabajo visual \u2014shell, divisores y esquinas exteriores\u2014 lo hace\r\n `segment-group.component.scss` sobre el host y sobre el contenido proyectado.\r\n-->\r\n<ng-content />\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:stretch;border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-neutral-white)}:host ::ng-deep>*{display:inline-flex!important;align-items:stretch!important}:host ::ng-deep ius-popover{align-items:stretch}:host ::ng-deep>*+*{border-left:1px solid var(--ius-stroke)}:host ::ng-deep [class*=__trigger],:host ::ng-deep button{border:0!important;border-radius:0!important;background:transparent!important}:host ::ng-deep>:first-child [class*=__trigger],:host ::ng-deep>:first-child button{border-top-left-radius:var(--ius-radius-md)!important;border-bottom-left-radius:var(--ius-radius-md)!important}:host ::ng-deep>:last-child [class*=__trigger],:host ::ng-deep>:last-child button{border-top-right-radius:var(--ius-radius-md)!important;border-bottom-right-radius:var(--ius-radius-md)!important}:host ::ng-deep>*:hover [class*=__trigger],:host ::ng-deep>*:hover button{background:var(--ius-neutral-1)!important}:host ::ng-deep>*:focus-within{position:relative;z-index:1}\n"] }]
|
|
11543
11543
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
11544
11544
|
|
|
11545
11545
|
/** Acota `n` al rango `[a, b]` (espejo del `clamp` del golden). */
|
|
@@ -13199,7 +13199,7 @@ class TimelineComponent {
|
|
|
13199
13199
|
return String(d);
|
|
13200
13200
|
}
|
|
13201
13201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13202
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TimelineComponent, isStandalone: true, selector: "ius-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kindIcons: { classPropertyName: "kindIcons", publicName: "kindIcons", isSignal: true, isRequired: false, transformFunction: null }, subItemsHeading: { classPropertyName: "subItemsHeading", publicName: "subItemsHeading", isSignal: true, isRequired: false, transformFunction: null }, subItemsCollapseAfter: { classPropertyName: "subItemsCollapseAfter", publicName: "subItemsCollapseAfter", isSignal: true, isRequired: false, transformFunction: null }, showAttachmentsOpenAll: { classPropertyName: "showAttachmentsOpenAll", publicName: "showAttachmentsOpenAll", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsOpenAll: "attachmentsOpenAll", attachmentClick: "attachmentClick" }, host: { attributes: { "role": "list" }, properties: { "attr.data-size": "size() !== 'medium' ? size() : null", "style.--_accent-strong": "'var(--ius-' + accent() + '-600)'", "style.--_accent-soft": "'var(--ius-' + accent() + '-100)'", "style.--_accent-c2": "'var(--ius-' + accent() + '-400)'" }, classAttribute: "ius-timeline" }, ngImport: i0, template: "<!-- Timeline \u2014 riel continuo + card por evento. Espejo de Timeline.jsx. -->\n@for (it of itemsNorm(); track it.key) {\n <div\n class=\"ius-timeline__item\"\n role=\"listitem\"\n [attr.data-state]=\"it.state\"\n [attr.data-fill]=\"it.fill\"\n >\n <div class=\"ius-timeline__rail\">\n <span class=\"ius-timeline__dot\" [attr.aria-label]=\"it.stateLabel\">\n @if (it.dotIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ it.dotIcon }}</span>\n }\n </span>\n <span class=\"ius-timeline__line\"></span>\n </div>\n\n <div class=\"ius-timeline__content\">\n <div class=\"ius-timeline__card\">\n <div class=\"ius-timeline__head\">\n <span class=\"ius-timeline__title-group\">\n @if (it.titleIcon) {\n <span translate=\"no\" class=\"ius-icon ius-timeline__title-icon\">{{ it.titleIcon }}</span>\n }\n <span class=\"ius-timeline__title\">{{ it.original.title }}</span>\n </span>\n @if (it.date) {\n <span class=\"ius-timeline__date\">{{ it.date }}</span>\n }\n </div>\n\n @if (it.original.description) {\n <p class=\"ius-timeline__desc\">{{ it.original.description }}</p>\n }\n\n @if (it.tags.length) {\n <div class=\"ius-timeline__tags\">\n @for (t of it.tags; track $index) {\n <span class=\"ius-timeline__tag\" [attr.data-tone]=\"t.tone || null\">\n @if (t.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ t.icon }}</span>\n }\n {{ t.label }}\n </span>\n }\n </div>\n }\n\n @if (it.hasFooter) {\n <div class=\"ius-timeline__footer\">\n @if (it.original.assignee; as who) {\n <span class=\"ius-timeline__who\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n <span class=\"ius-timeline__who-name\">{{ who.name }}</span>\n </span>\n }\n\n @if (it.attachments.length) {\n <ius-popover trigger=\"click\" placement=\"bottom-start\" [showArrow]=\"false\">\n <button\n type=\"button\"\n class=\"ius-timeline__att-badge\"\n [attr.aria-label]=\"it.attachments.length + ' documentos adjuntos'\"\n >\n <span translate=\"no\" class=\"ius-icon\">attach_file</span>\n {{ it.attachments.length }}\n {{ it.attachments.length === 1 ? 'documento' : 'documentos' }}\n </button>\n\n<!-- El panel se portalea al overlay (fuera del host): las vars de acento se\n re-declaran aqu\u00ED para que el pie \u00ABVer en documentos\u00BB conserve su tinte. -->\n <div\n iusPopoverContent\n class=\"ius-timeline__att-pop\"\n [style.--_accent-strong]=\"'var(--ius-' + accent() + '-600)'\"\n [style.--_accent-soft]=\"'var(--ius-' + accent() + '-100)'\"\n >\n <div class=\"ius-timeline__att-pop-head\">Documentos \u00B7 {{ it.attachments.length }}</div>\n @for (a of it.attachments; track $index) {\n @if (a.href) {\n <a\n class=\"ius-timeline__att-link\"\n [href]=\"a.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [title]=\"a.name\"\n (click)=\"onAdjunto(it.original, a)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-timeline__att-link\"\n [title]=\"a.name\"\n (click)=\"onAdjunto(it.original, a)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\n </button>\n }\n }\n @if (showAttachmentsOpenAll()) {\n <div class=\"ius-timeline__att-pop-foot\">\n <button type=\"button\" (click)=\"onAbrirTodos(it.original)\">\n <span translate=\"no\" class=\"ius-icon\">folder_open</span>\n Ver en documentos\n </button>\n </div>\n }\n </div>\n </ius-popover>\n }\n\n @if (it.ai) {\n <span class=\"ius-timeline__ai\">\n <span translate=\"no\" class=\"ius-icon\">auto_awesome</span>\n ElenIA\n </span>\n }\n\n @if (it.original.footer) {\n <span class=\"ius-timeline__footer-extra\">{{ it.original.footer }}</span>\n }\n @if (footerTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: it.original }\" />\n }\n </div>\n }\n\n @if (it.subItems.length) {\n <div class=\"ius-timeline__subitems\">\n <div class=\"ius-timeline__subitems-head\">\n <span>{{ subItemsHeading() }} \u00B7 {{ it.subItems.length }}</span>\n </div>\n <ul class=\"ius-timeline__subitems-list\" role=\"list\">\n @for (\n s of estaAbierto(it.key) ? it.subItems : it.subItems.slice(0, subItemsCollapseAfter());\n track s.key\n ) {\n <li class=\"ius-timeline__subitem\" [attr.data-state]=\"s.state\">\n <span class=\"ius-timeline__subitem-icon\">\n @if (s.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ s.icon }}</span>\n }\n </span>\n <div class=\"ius-timeline__subitem-body\">\n <span class=\"ius-timeline__subitem-title\">{{ s.title }}</span>\n @if (s.description) {\n <span class=\"ius-timeline__subitem-caption\">{{ s.description }}</span>\n }\n </div>\n @if (s.date) {\n <span class=\"ius-timeline__subitem-date\">{{ s.date }}</span>\n }\n </li>\n }\n </ul>\n @if (it.subItems.length > subItemsCollapseAfter()) {\n <ius-show-more\n class=\"ius-timeline__subitems-more\"\n size=\"small\"\n [expanded]=\"estaAbierto(it.key)\"\n [remaining]=\"it.subItems.length - subItemsCollapseAfter()\"\n [moreLabel]=\"'Ver ' + (it.subItems.length - subItemsCollapseAfter()) + ' m\u00E1s'\"\n lessLabel=\"Ver menos\"\n (toggle)=\"alternar(it.key)\"\n />\n }\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_dot: 26px;--_dot-ico: 16px;--_gap: 14px;--_pb: 20px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;margin:0;padding:0;list-style:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}@container style(--ius-density: small){:host(:not([data-size])){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}}.ius-timeline__dot,.ius-timeline__line,.ius-timeline__title-icon,.ius-timeline__tag,.ius-timeline__ai,.ius-timeline__att-badge,.ius-timeline__subitems-head,.ius-timeline__subitem-icon,.ius-timeline__subitems-more{user-select:none;-webkit-user-select:none}.ius-timeline__item{position:relative;display:grid;grid-template-columns:var(--_dot) minmax(0,1fr);column-gap:var(--_gap);padding-bottom:var(--_pb)}.ius-timeline__item:last-child{padding-bottom:0}.ius-timeline__rail{position:relative;display:flex;flex-direction:column;align-items:center}.ius-timeline__dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-surface-card);border:2px solid var(--ius-neutral-4);color:var(--ius-text-tertiary);z-index:1}.ius-timeline__dot .ius-icon{font-size:var(--_dot-ico);line-height:1}.ius-timeline__line{flex:1 1 auto;width:2px;min-height:8px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}.ius-timeline__item:last-child .ius-timeline__line{display:none}.ius-timeline__item[data-state=done] .ius-timeline__dot{background:var(--_accent-strong);border-color:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-timeline__item[data-state=current] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--_accent-strong);color:var(--_accent-strong)}.ius-timeline__item[data-state=pending] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--ius-neutral-4);border-style:dashed}.ius-timeline__item[data-state=risk] .ius-timeline__dot{background:var(--ius-danger-500);border-color:var(--ius-danger-600);color:var(--ius-neutral-white)}.ius-timeline__item[data-fill=done] .ius-timeline__line{background:var(--_accent-c2)}.ius-timeline__content{min-width:0}.ius-timeline__card{background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md);padding:var(--ius-space-sm) var(--ius-space-md)}.ius-timeline__item[data-state=pending] .ius-timeline__card{background:var(--ius-neutral-1)}.ius-timeline__head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-timeline__title-group{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-timeline__title-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__item[data-state=done] .ius-timeline__title-icon,.ius-timeline__item[data-state=current] .ius-timeline__title-icon{color:var(--_accent-strong)}.ius-timeline__title{font-size:var(--ius-fs-sm);line-height:1.35;font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__item[data-state=pending] .ius-timeline__title{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-medium, 500)}.ius-timeline__item[data-state=current] .ius-timeline__title{color:var(--_accent-strong)}.ius-timeline__date{flex:0 0 auto;font-size:11.5px;line-height:1.4;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-timeline__desc{margin:var(--ius-space-xs) 0 0;font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);text-wrap:pretty}.ius-timeline__tags{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);margin-top:var(--ius-space-xs)}.ius-timeline__tags:empty{display:none}.ius-timeline__tag{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto;font-size:var(--ius-fs-sm);line-height:1;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-2);color:var(--ius-text-secondary);border:1px solid var(--ius-stroke)}.ius-timeline__tag .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__tag[data-tone=success]{background:var(--ius-success-100);color:var(--ius-success-700);border-color:var(--ius-success-200)}.ius-timeline__tag[data-tone=warning]{background:var(--ius-warning-100);color:var(--ius-warning-700);border-color:var(--ius-warning-200)}.ius-timeline__tag[data-tone=danger]{background:var(--ius-danger-100);color:var(--ius-danger-700);border-color:var(--ius-danger-200)}.ius-timeline__tag[data-tone=info]{background:var(--ius-info-100);color:var(--ius-info-700);border-color:var(--ius-info-200)}.ius-timeline__tag[data-tone=accent]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:transparent}.ius-timeline__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-md);margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__footer:empty{display:none}.ius-timeline__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary);min-width:0;max-width:100%}.ius-timeline__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__footer-extra{font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary)}.ius-timeline__att-badge{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:11.5px;line-height:1;color:var(--ius-text-secondary);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-timeline__att-badge .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-timeline__att-badge:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-timeline__att-badge:hover .ius-icon{color:var(--_accent-strong)}.ius-timeline__att-badge:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__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);border:1px solid var(--ius-uva-200)}.ius-timeline__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__subitems{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__subitems-head{display:flex;align-items:baseline;justify-content:space-between;font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.4 var(--ius-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);margin:0 0 var(--ius-space-xs)}.ius-timeline__subitems-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-timeline__subitem{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:var(--ius-space-xs);align-items:start;min-width:0;padding:var(--ius-space-xs) var(--ius-space-xs);margin:0 -6px;border-radius:var(--ius-radius-sm);font-size:var(--ius-fs-sm);line-height:1.4}.ius-timeline__subitem-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px}.ius-timeline__subitem-icon .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-neutral-5)}.ius-timeline__subitem-body{min-width:0;display:flex;flex-direction:column;gap:1px}.ius-timeline__subitem-title{color:var(--ius-text-primary);min-width:0;word-break:normal;overflow-wrap:anywhere}.ius-timeline__subitem[data-state=pending] .ius-timeline__subitem-title{color:var(--ius-text-tertiary)}.ius-timeline__subitem-caption{font-size:var(--ius-fs-sm);line-height:1.4;color:var(--ius-text-tertiary);text-wrap:pretty}.ius-timeline__subitem-date{color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;margin-top:1px}.ius-timeline__subitems-more{display:inline-flex;margin:var(--ius-space-xxs) 0 0 -6px}.ius-timeline__att-pop{display:flex;flex-direction:column;min-width:240px;max-width:320px}.ius-timeline__att-pop-head{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);color:var(--ius-text-tertiary);letter-spacing:.04em;text-transform:uppercase;padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-xs)}.ius-timeline__att-link{appearance:none;border:0;background:transparent;text-decoration:none;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;font-size:12.5px;line-height:1.3;color:var(--ius-text-primary);text-align:left;width:100%}.ius-timeline__att-link:hover{background:var(--ius-neutral-1)}.ius-timeline__att-link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__att-link .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__att-link-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}.ius-timeline__att-pop-foot{margin-top:var(--ius-space-xs);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__att-pop-foot button{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-semibold) 11.5px/1 var(--ius-font-body);color:var(--_accent-strong);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-timeline__att-pop-foot button:hover{background:var(--_accent-soft)}.ius-timeline__att-pop-foot .ius-icon{font-size:var(--ius-icon-sm)}\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: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TimelineComponent, isStandalone: true, selector: "ius-timeline", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, kindIcons: { classPropertyName: "kindIcons", publicName: "kindIcons", isSignal: true, isRequired: false, transformFunction: null }, subItemsHeading: { classPropertyName: "subItemsHeading", publicName: "subItemsHeading", isSignal: true, isRequired: false, transformFunction: null }, subItemsCollapseAfter: { classPropertyName: "subItemsCollapseAfter", publicName: "subItemsCollapseAfter", isSignal: true, isRequired: false, transformFunction: null }, showAttachmentsOpenAll: { classPropertyName: "showAttachmentsOpenAll", publicName: "showAttachmentsOpenAll", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { attachmentsOpenAll: "attachmentsOpenAll", attachmentClick: "attachmentClick" }, host: { attributes: { "role": "list" }, properties: { "attr.data-size": "size() !== 'medium' ? size() : null", "style.--_accent-strong": "'var(--ius-' + accent() + '-600)'", "style.--_accent-soft": "'var(--ius-' + accent() + '-100)'", "style.--_accent-c2": "'var(--ius-' + accent() + '-400)'" }, classAttribute: "ius-timeline" }, ngImport: i0, template: "<!-- Timeline \u2014 riel continuo + card por evento. Espejo de Timeline.jsx. -->\r\n@for (it of itemsNorm(); track it.key) {\r\n <div\r\n class=\"ius-timeline__item\"\r\n role=\"listitem\"\r\n [attr.data-state]=\"it.state\"\r\n [attr.data-fill]=\"it.fill\"\r\n >\r\n <div class=\"ius-timeline__rail\">\r\n <span class=\"ius-timeline__dot\" [attr.aria-label]=\"it.stateLabel\">\r\n @if (it.dotIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ it.dotIcon }}</span>\r\n }\r\n </span>\r\n <span class=\"ius-timeline__line\"></span>\r\n </div>\r\n\r\n <div class=\"ius-timeline__content\">\r\n <div class=\"ius-timeline__card\">\r\n <div class=\"ius-timeline__head\">\r\n <span class=\"ius-timeline__title-group\">\r\n @if (it.titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-timeline__title-icon\">{{ it.titleIcon }}</span>\r\n }\r\n <span class=\"ius-timeline__title\">{{ it.original.title }}</span>\r\n </span>\r\n @if (it.date) {\r\n <span class=\"ius-timeline__date\">{{ it.date }}</span>\r\n }\r\n </div>\r\n\r\n @if (it.original.description) {\r\n <p class=\"ius-timeline__desc\">{{ it.original.description }}</p>\r\n }\r\n\r\n @if (it.tags.length) {\r\n <div class=\"ius-timeline__tags\">\r\n @for (t of it.tags; track $index) {\r\n <span class=\"ius-timeline__tag\" [attr.data-tone]=\"t.tone || null\">\r\n @if (t.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ t.icon }}</span>\r\n }\r\n {{ t.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (it.hasFooter) {\r\n <div class=\"ius-timeline__footer\">\r\n @if (it.original.assignee; as who) {\r\n <span class=\"ius-timeline__who\">\r\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\r\n <span class=\"ius-timeline__who-name\">{{ who.name }}</span>\r\n </span>\r\n }\r\n\r\n @if (it.attachments.length) {\r\n <ius-popover trigger=\"click\" placement=\"bottom-start\" [showArrow]=\"false\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-timeline__att-badge\"\r\n [attr.aria-label]=\"it.attachments.length + ' documentos adjuntos'\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">attach_file</span>\r\n {{ it.attachments.length }}\r\n {{ it.attachments.length === 1 ? 'documento' : 'documentos' }}\r\n </button>\r\n\r\n<!-- El panel se portalea al overlay (fuera del host): las vars de acento se\r\n re-declaran aqu\u00ED para que el pie \u00ABVer en documentos\u00BB conserve su tinte. -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-timeline__att-pop\"\r\n [style.--_accent-strong]=\"'var(--ius-' + accent() + '-600)'\"\r\n [style.--_accent-soft]=\"'var(--ius-' + accent() + '-100)'\"\r\n >\r\n <div class=\"ius-timeline__att-pop-head\">Documentos \u00B7 {{ it.attachments.length }}</div>\r\n @for (a of it.attachments; track $index) {\r\n @if (a.href) {\r\n <a\r\n class=\"ius-timeline__att-link\"\r\n [href]=\"a.href\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n [title]=\"a.name\"\r\n (click)=\"onAdjunto(it.original, a)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\r\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-timeline__att-link\"\r\n [title]=\"a.name\"\r\n (click)=\"onAdjunto(it.original, a)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\r\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\r\n </button>\r\n }\r\n }\r\n @if (showAttachmentsOpenAll()) {\r\n <div class=\"ius-timeline__att-pop-foot\">\r\n <button type=\"button\" (click)=\"onAbrirTodos(it.original)\">\r\n <span translate=\"no\" class=\"ius-icon\">folder_open</span>\r\n Ver en documentos\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n @if (it.ai) {\r\n <span class=\"ius-timeline__ai\">\r\n <span translate=\"no\" class=\"ius-icon\">auto_awesome</span>\r\n ElenIA\r\n </span>\r\n }\r\n\r\n @if (it.original.footer) {\r\n <span class=\"ius-timeline__footer-extra\">{{ it.original.footer }}</span>\r\n }\r\n @if (footerTemplate(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: it.original }\" />\r\n }\r\n </div>\r\n }\r\n\r\n @if (it.subItems.length) {\r\n <div class=\"ius-timeline__subitems\">\r\n <div class=\"ius-timeline__subitems-head\">\r\n <span>{{ subItemsHeading() }} \u00B7 {{ it.subItems.length }}</span>\r\n </div>\r\n <ul class=\"ius-timeline__subitems-list\" role=\"list\">\r\n @for (\r\n s of estaAbierto(it.key) ? it.subItems : it.subItems.slice(0, subItemsCollapseAfter());\r\n track s.key\r\n ) {\r\n <li class=\"ius-timeline__subitem\" [attr.data-state]=\"s.state\">\r\n <span class=\"ius-timeline__subitem-icon\">\r\n @if (s.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ s.icon }}</span>\r\n }\r\n </span>\r\n <div class=\"ius-timeline__subitem-body\">\r\n <span class=\"ius-timeline__subitem-title\">{{ s.title }}</span>\r\n @if (s.description) {\r\n <span class=\"ius-timeline__subitem-caption\">{{ s.description }}</span>\r\n }\r\n </div>\r\n @if (s.date) {\r\n <span class=\"ius-timeline__subitem-date\">{{ s.date }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n @if (it.subItems.length > subItemsCollapseAfter()) {\r\n <ius-show-more\r\n class=\"ius-timeline__subitems-more\"\r\n size=\"small\"\r\n [expanded]=\"estaAbierto(it.key)\"\r\n [remaining]=\"it.subItems.length - subItemsCollapseAfter()\"\r\n [moreLabel]=\"'Ver ' + (it.subItems.length - subItemsCollapseAfter()) + ' m\u00E1s'\"\r\n lessLabel=\"Ver menos\"\r\n (toggle)=\"alternar(it.key)\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_dot: 26px;--_dot-ico: 16px;--_gap: 14px;--_pb: 20px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;margin:0;padding:0;list-style:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}@container style(--ius-density: small){:host(:not([data-size])){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}}.ius-timeline__dot,.ius-timeline__line,.ius-timeline__title-icon,.ius-timeline__tag,.ius-timeline__ai,.ius-timeline__att-badge,.ius-timeline__subitems-head,.ius-timeline__subitem-icon,.ius-timeline__subitems-more{user-select:none;-webkit-user-select:none}.ius-timeline__item{position:relative;display:grid;grid-template-columns:var(--_dot) minmax(0,1fr);column-gap:var(--_gap);padding-bottom:var(--_pb)}.ius-timeline__item:last-child{padding-bottom:0}.ius-timeline__rail{position:relative;display:flex;flex-direction:column;align-items:center}.ius-timeline__dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-surface-card);border:2px solid var(--ius-neutral-4);color:var(--ius-text-tertiary);z-index:1}.ius-timeline__dot .ius-icon{font-size:var(--_dot-ico);line-height:1}.ius-timeline__line{flex:1 1 auto;width:2px;min-height:8px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}.ius-timeline__item:last-child .ius-timeline__line{display:none}.ius-timeline__item[data-state=done] .ius-timeline__dot{background:var(--_accent-strong);border-color:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-timeline__item[data-state=current] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--_accent-strong);color:var(--_accent-strong)}.ius-timeline__item[data-state=pending] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--ius-neutral-4);border-style:dashed}.ius-timeline__item[data-state=risk] .ius-timeline__dot{background:var(--ius-danger-500);border-color:var(--ius-danger-600);color:var(--ius-neutral-white)}.ius-timeline__item[data-fill=done] .ius-timeline__line{background:var(--_accent-c2)}.ius-timeline__content{min-width:0}.ius-timeline__card{background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md);padding:var(--ius-space-sm) var(--ius-space-md)}.ius-timeline__item[data-state=pending] .ius-timeline__card{background:var(--ius-neutral-1)}.ius-timeline__head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-timeline__title-group{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-timeline__title-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__item[data-state=done] .ius-timeline__title-icon,.ius-timeline__item[data-state=current] .ius-timeline__title-icon{color:var(--_accent-strong)}.ius-timeline__title{font-size:var(--ius-fs-sm);line-height:1.35;font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__item[data-state=pending] .ius-timeline__title{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-medium, 500)}.ius-timeline__item[data-state=current] .ius-timeline__title{color:var(--_accent-strong)}.ius-timeline__date{flex:0 0 auto;font-size:11.5px;line-height:1.4;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-timeline__desc{margin:var(--ius-space-xs) 0 0;font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);text-wrap:pretty}.ius-timeline__tags{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);margin-top:var(--ius-space-xs)}.ius-timeline__tags:empty{display:none}.ius-timeline__tag{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto;font-size:var(--ius-fs-sm);line-height:1;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-2);color:var(--ius-text-secondary);border:1px solid var(--ius-stroke)}.ius-timeline__tag .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__tag[data-tone=success]{background:var(--ius-success-100);color:var(--ius-success-700);border-color:var(--ius-success-200)}.ius-timeline__tag[data-tone=warning]{background:var(--ius-warning-100);color:var(--ius-warning-700);border-color:var(--ius-warning-200)}.ius-timeline__tag[data-tone=danger]{background:var(--ius-danger-100);color:var(--ius-danger-700);border-color:var(--ius-danger-200)}.ius-timeline__tag[data-tone=info]{background:var(--ius-info-100);color:var(--ius-info-700);border-color:var(--ius-info-200)}.ius-timeline__tag[data-tone=accent]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:transparent}.ius-timeline__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-md);margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__footer:empty{display:none}.ius-timeline__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary);min-width:0;max-width:100%}.ius-timeline__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__footer-extra{font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary)}.ius-timeline__att-badge{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:11.5px;line-height:1;color:var(--ius-text-secondary);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-timeline__att-badge .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-timeline__att-badge:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-timeline__att-badge:hover .ius-icon{color:var(--_accent-strong)}.ius-timeline__att-badge:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__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);border:1px solid var(--ius-uva-200)}.ius-timeline__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__subitems{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__subitems-head{display:flex;align-items:baseline;justify-content:space-between;font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.4 var(--ius-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);margin:0 0 var(--ius-space-xs)}.ius-timeline__subitems-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-timeline__subitem{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:var(--ius-space-xs);align-items:start;min-width:0;padding:var(--ius-space-xs) var(--ius-space-xs);margin:0 -6px;border-radius:var(--ius-radius-sm);font-size:var(--ius-fs-sm);line-height:1.4}.ius-timeline__subitem-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px}.ius-timeline__subitem-icon .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-neutral-5)}.ius-timeline__subitem-body{min-width:0;display:flex;flex-direction:column;gap:1px}.ius-timeline__subitem-title{color:var(--ius-text-primary);min-width:0;word-break:normal;overflow-wrap:anywhere}.ius-timeline__subitem[data-state=pending] .ius-timeline__subitem-title{color:var(--ius-text-tertiary)}.ius-timeline__subitem-caption{font-size:var(--ius-fs-sm);line-height:1.4;color:var(--ius-text-tertiary);text-wrap:pretty}.ius-timeline__subitem-date{color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;margin-top:1px}.ius-timeline__subitems-more{display:inline-flex;margin:var(--ius-space-xxs) 0 0 -6px}.ius-timeline__att-pop{display:flex;flex-direction:column;min-width:240px;max-width:320px}.ius-timeline__att-pop-head{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);color:var(--ius-text-tertiary);letter-spacing:.04em;text-transform:uppercase;padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-xs)}.ius-timeline__att-link{appearance:none;border:0;background:transparent;text-decoration:none;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;font-size:12.5px;line-height:1.3;color:var(--ius-text-primary);text-align:left;width:100%}.ius-timeline__att-link:hover{background:var(--ius-neutral-1)}.ius-timeline__att-link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__att-link .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__att-link-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}.ius-timeline__att-pop-foot{margin-top:var(--ius-space-xs);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__att-pop-foot button{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-semibold) 11.5px/1 var(--ius-font-body);color:var(--_accent-strong);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-timeline__att-pop-foot button:hover{background:var(--_accent-soft)}.ius-timeline__att-pop-foot .ius-icon{font-size:var(--ius-icon-sm)}\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: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: ShowMoreComponent, selector: "ius-show-more", inputs: ["expanded", "remaining", "moreLabel", "lessLabel", "collapsible", "size", "align", "ariaControls"], outputs: ["toggle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13203
13203
|
}
|
|
13204
13204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
13205
13205
|
type: Component,
|
|
@@ -13210,7 +13210,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13210
13210
|
'[style.--_accent-strong]': "'var(--ius-' + accent() + '-600)'",
|
|
13211
13211
|
'[style.--_accent-soft]': "'var(--ius-' + accent() + '-100)'",
|
|
13212
13212
|
'[style.--_accent-c2]': "'var(--ius-' + accent() + '-400)'",
|
|
13213
|
-
}, template: "<!-- Timeline \u2014 riel continuo + card por evento. Espejo de Timeline.jsx. -->\n@for (it of itemsNorm(); track it.key) {\n <div\n class=\"ius-timeline__item\"\n role=\"listitem\"\n [attr.data-state]=\"it.state\"\n [attr.data-fill]=\"it.fill\"\n >\n <div class=\"ius-timeline__rail\">\n <span class=\"ius-timeline__dot\" [attr.aria-label]=\"it.stateLabel\">\n @if (it.dotIcon) {\n <span translate=\"no\" class=\"ius-icon\">{{ it.dotIcon }}</span>\n }\n </span>\n <span class=\"ius-timeline__line\"></span>\n </div>\n\n <div class=\"ius-timeline__content\">\n <div class=\"ius-timeline__card\">\n <div class=\"ius-timeline__head\">\n <span class=\"ius-timeline__title-group\">\n @if (it.titleIcon) {\n <span translate=\"no\" class=\"ius-icon ius-timeline__title-icon\">{{ it.titleIcon }}</span>\n }\n <span class=\"ius-timeline__title\">{{ it.original.title }}</span>\n </span>\n @if (it.date) {\n <span class=\"ius-timeline__date\">{{ it.date }}</span>\n }\n </div>\n\n @if (it.original.description) {\n <p class=\"ius-timeline__desc\">{{ it.original.description }}</p>\n }\n\n @if (it.tags.length) {\n <div class=\"ius-timeline__tags\">\n @for (t of it.tags; track $index) {\n <span class=\"ius-timeline__tag\" [attr.data-tone]=\"t.tone || null\">\n @if (t.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ t.icon }}</span>\n }\n {{ t.label }}\n </span>\n }\n </div>\n }\n\n @if (it.hasFooter) {\n <div class=\"ius-timeline__footer\">\n @if (it.original.assignee; as who) {\n <span class=\"ius-timeline__who\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n <span class=\"ius-timeline__who-name\">{{ who.name }}</span>\n </span>\n }\n\n @if (it.attachments.length) {\n <ius-popover trigger=\"click\" placement=\"bottom-start\" [showArrow]=\"false\">\n <button\n type=\"button\"\n class=\"ius-timeline__att-badge\"\n [attr.aria-label]=\"it.attachments.length + ' documentos adjuntos'\"\n >\n <span translate=\"no\" class=\"ius-icon\">attach_file</span>\n {{ it.attachments.length }}\n {{ it.attachments.length === 1 ? 'documento' : 'documentos' }}\n </button>\n\n<!-- El panel se portalea al overlay (fuera del host): las vars de acento se\n re-declaran aqu\u00ED para que el pie \u00ABVer en documentos\u00BB conserve su tinte. -->\n <div\n iusPopoverContent\n class=\"ius-timeline__att-pop\"\n [style.--_accent-strong]=\"'var(--ius-' + accent() + '-600)'\"\n [style.--_accent-soft]=\"'var(--ius-' + accent() + '-100)'\"\n >\n <div class=\"ius-timeline__att-pop-head\">Documentos \u00B7 {{ it.attachments.length }}</div>\n @for (a of it.attachments; track $index) {\n @if (a.href) {\n <a\n class=\"ius-timeline__att-link\"\n [href]=\"a.href\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n [title]=\"a.name\"\n (click)=\"onAdjunto(it.original, a)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\n </a>\n } @else {\n <button\n type=\"button\"\n class=\"ius-timeline__att-link\"\n [title]=\"a.name\"\n (click)=\"onAdjunto(it.original, a)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\n </button>\n }\n }\n @if (showAttachmentsOpenAll()) {\n <div class=\"ius-timeline__att-pop-foot\">\n <button type=\"button\" (click)=\"onAbrirTodos(it.original)\">\n <span translate=\"no\" class=\"ius-icon\">folder_open</span>\n Ver en documentos\n </button>\n </div>\n }\n </div>\n </ius-popover>\n }\n\n @if (it.ai) {\n <span class=\"ius-timeline__ai\">\n <span translate=\"no\" class=\"ius-icon\">auto_awesome</span>\n ElenIA\n </span>\n }\n\n @if (it.original.footer) {\n <span class=\"ius-timeline__footer-extra\">{{ it.original.footer }}</span>\n }\n @if (footerTemplate(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: it.original }\" />\n }\n </div>\n }\n\n @if (it.subItems.length) {\n <div class=\"ius-timeline__subitems\">\n <div class=\"ius-timeline__subitems-head\">\n <span>{{ subItemsHeading() }} \u00B7 {{ it.subItems.length }}</span>\n </div>\n <ul class=\"ius-timeline__subitems-list\" role=\"list\">\n @for (\n s of estaAbierto(it.key) ? it.subItems : it.subItems.slice(0, subItemsCollapseAfter());\n track s.key\n ) {\n <li class=\"ius-timeline__subitem\" [attr.data-state]=\"s.state\">\n <span class=\"ius-timeline__subitem-icon\">\n @if (s.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ s.icon }}</span>\n }\n </span>\n <div class=\"ius-timeline__subitem-body\">\n <span class=\"ius-timeline__subitem-title\">{{ s.title }}</span>\n @if (s.description) {\n <span class=\"ius-timeline__subitem-caption\">{{ s.description }}</span>\n }\n </div>\n @if (s.date) {\n <span class=\"ius-timeline__subitem-date\">{{ s.date }}</span>\n }\n </li>\n }\n </ul>\n @if (it.subItems.length > subItemsCollapseAfter()) {\n <ius-show-more\n class=\"ius-timeline__subitems-more\"\n size=\"small\"\n [expanded]=\"estaAbierto(it.key)\"\n [remaining]=\"it.subItems.length - subItemsCollapseAfter()\"\n [moreLabel]=\"'Ver ' + (it.subItems.length - subItemsCollapseAfter()) + ' m\u00E1s'\"\n lessLabel=\"Ver menos\"\n (toggle)=\"alternar(it.key)\"\n />\n }\n </div>\n }\n </div>\n </div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{--_dot: 26px;--_dot-ico: 16px;--_gap: 14px;--_pb: 20px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;margin:0;padding:0;list-style:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}@container style(--ius-density: small){:host(:not([data-size])){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}}.ius-timeline__dot,.ius-timeline__line,.ius-timeline__title-icon,.ius-timeline__tag,.ius-timeline__ai,.ius-timeline__att-badge,.ius-timeline__subitems-head,.ius-timeline__subitem-icon,.ius-timeline__subitems-more{user-select:none;-webkit-user-select:none}.ius-timeline__item{position:relative;display:grid;grid-template-columns:var(--_dot) minmax(0,1fr);column-gap:var(--_gap);padding-bottom:var(--_pb)}.ius-timeline__item:last-child{padding-bottom:0}.ius-timeline__rail{position:relative;display:flex;flex-direction:column;align-items:center}.ius-timeline__dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-surface-card);border:2px solid var(--ius-neutral-4);color:var(--ius-text-tertiary);z-index:1}.ius-timeline__dot .ius-icon{font-size:var(--_dot-ico);line-height:1}.ius-timeline__line{flex:1 1 auto;width:2px;min-height:8px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}.ius-timeline__item:last-child .ius-timeline__line{display:none}.ius-timeline__item[data-state=done] .ius-timeline__dot{background:var(--_accent-strong);border-color:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-timeline__item[data-state=current] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--_accent-strong);color:var(--_accent-strong)}.ius-timeline__item[data-state=pending] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--ius-neutral-4);border-style:dashed}.ius-timeline__item[data-state=risk] .ius-timeline__dot{background:var(--ius-danger-500);border-color:var(--ius-danger-600);color:var(--ius-neutral-white)}.ius-timeline__item[data-fill=done] .ius-timeline__line{background:var(--_accent-c2)}.ius-timeline__content{min-width:0}.ius-timeline__card{background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md);padding:var(--ius-space-sm) var(--ius-space-md)}.ius-timeline__item[data-state=pending] .ius-timeline__card{background:var(--ius-neutral-1)}.ius-timeline__head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-timeline__title-group{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-timeline__title-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__item[data-state=done] .ius-timeline__title-icon,.ius-timeline__item[data-state=current] .ius-timeline__title-icon{color:var(--_accent-strong)}.ius-timeline__title{font-size:var(--ius-fs-sm);line-height:1.35;font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__item[data-state=pending] .ius-timeline__title{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-medium, 500)}.ius-timeline__item[data-state=current] .ius-timeline__title{color:var(--_accent-strong)}.ius-timeline__date{flex:0 0 auto;font-size:11.5px;line-height:1.4;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-timeline__desc{margin:var(--ius-space-xs) 0 0;font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);text-wrap:pretty}.ius-timeline__tags{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);margin-top:var(--ius-space-xs)}.ius-timeline__tags:empty{display:none}.ius-timeline__tag{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto;font-size:var(--ius-fs-sm);line-height:1;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-2);color:var(--ius-text-secondary);border:1px solid var(--ius-stroke)}.ius-timeline__tag .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__tag[data-tone=success]{background:var(--ius-success-100);color:var(--ius-success-700);border-color:var(--ius-success-200)}.ius-timeline__tag[data-tone=warning]{background:var(--ius-warning-100);color:var(--ius-warning-700);border-color:var(--ius-warning-200)}.ius-timeline__tag[data-tone=danger]{background:var(--ius-danger-100);color:var(--ius-danger-700);border-color:var(--ius-danger-200)}.ius-timeline__tag[data-tone=info]{background:var(--ius-info-100);color:var(--ius-info-700);border-color:var(--ius-info-200)}.ius-timeline__tag[data-tone=accent]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:transparent}.ius-timeline__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-md);margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__footer:empty{display:none}.ius-timeline__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary);min-width:0;max-width:100%}.ius-timeline__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__footer-extra{font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary)}.ius-timeline__att-badge{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:11.5px;line-height:1;color:var(--ius-text-secondary);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-timeline__att-badge .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-timeline__att-badge:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-timeline__att-badge:hover .ius-icon{color:var(--_accent-strong)}.ius-timeline__att-badge:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__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);border:1px solid var(--ius-uva-200)}.ius-timeline__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__subitems{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__subitems-head{display:flex;align-items:baseline;justify-content:space-between;font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.4 var(--ius-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);margin:0 0 var(--ius-space-xs)}.ius-timeline__subitems-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-timeline__subitem{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:var(--ius-space-xs);align-items:start;min-width:0;padding:var(--ius-space-xs) var(--ius-space-xs);margin:0 -6px;border-radius:var(--ius-radius-sm);font-size:var(--ius-fs-sm);line-height:1.4}.ius-timeline__subitem-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px}.ius-timeline__subitem-icon .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-neutral-5)}.ius-timeline__subitem-body{min-width:0;display:flex;flex-direction:column;gap:1px}.ius-timeline__subitem-title{color:var(--ius-text-primary);min-width:0;word-break:normal;overflow-wrap:anywhere}.ius-timeline__subitem[data-state=pending] .ius-timeline__subitem-title{color:var(--ius-text-tertiary)}.ius-timeline__subitem-caption{font-size:var(--ius-fs-sm);line-height:1.4;color:var(--ius-text-tertiary);text-wrap:pretty}.ius-timeline__subitem-date{color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;margin-top:1px}.ius-timeline__subitems-more{display:inline-flex;margin:var(--ius-space-xxs) 0 0 -6px}.ius-timeline__att-pop{display:flex;flex-direction:column;min-width:240px;max-width:320px}.ius-timeline__att-pop-head{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);color:var(--ius-text-tertiary);letter-spacing:.04em;text-transform:uppercase;padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-xs)}.ius-timeline__att-link{appearance:none;border:0;background:transparent;text-decoration:none;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;font-size:12.5px;line-height:1.3;color:var(--ius-text-primary);text-align:left;width:100%}.ius-timeline__att-link:hover{background:var(--ius-neutral-1)}.ius-timeline__att-link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__att-link .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__att-link-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}.ius-timeline__att-pop-foot{margin-top:var(--ius-space-xs);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__att-pop-foot button{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-semibold) 11.5px/1 var(--ius-font-body);color:var(--_accent-strong);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-timeline__att-pop-foot button:hover{background:var(--_accent-soft)}.ius-timeline__att-pop-foot .ius-icon{font-size:var(--ius-icon-sm)}\n"] }]
|
|
13213
|
+
}, template: "<!-- Timeline \u2014 riel continuo + card por evento. Espejo de Timeline.jsx. -->\r\n@for (it of itemsNorm(); track it.key) {\r\n <div\r\n class=\"ius-timeline__item\"\r\n role=\"listitem\"\r\n [attr.data-state]=\"it.state\"\r\n [attr.data-fill]=\"it.fill\"\r\n >\r\n <div class=\"ius-timeline__rail\">\r\n <span class=\"ius-timeline__dot\" [attr.aria-label]=\"it.stateLabel\">\r\n @if (it.dotIcon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ it.dotIcon }}</span>\r\n }\r\n </span>\r\n <span class=\"ius-timeline__line\"></span>\r\n </div>\r\n\r\n <div class=\"ius-timeline__content\">\r\n <div class=\"ius-timeline__card\">\r\n <div class=\"ius-timeline__head\">\r\n <span class=\"ius-timeline__title-group\">\r\n @if (it.titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-timeline__title-icon\">{{ it.titleIcon }}</span>\r\n }\r\n <span class=\"ius-timeline__title\">{{ it.original.title }}</span>\r\n </span>\r\n @if (it.date) {\r\n <span class=\"ius-timeline__date\">{{ it.date }}</span>\r\n }\r\n </div>\r\n\r\n @if (it.original.description) {\r\n <p class=\"ius-timeline__desc\">{{ it.original.description }}</p>\r\n }\r\n\r\n @if (it.tags.length) {\r\n <div class=\"ius-timeline__tags\">\r\n @for (t of it.tags; track $index) {\r\n <span class=\"ius-timeline__tag\" [attr.data-tone]=\"t.tone || null\">\r\n @if (t.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ t.icon }}</span>\r\n }\r\n {{ t.label }}\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n @if (it.hasFooter) {\r\n <div class=\"ius-timeline__footer\">\r\n @if (it.original.assignee; as who) {\r\n <span class=\"ius-timeline__who\">\r\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\r\n <span class=\"ius-timeline__who-name\">{{ who.name }}</span>\r\n </span>\r\n }\r\n\r\n @if (it.attachments.length) {\r\n <ius-popover trigger=\"click\" placement=\"bottom-start\" [showArrow]=\"false\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-timeline__att-badge\"\r\n [attr.aria-label]=\"it.attachments.length + ' documentos adjuntos'\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">attach_file</span>\r\n {{ it.attachments.length }}\r\n {{ it.attachments.length === 1 ? 'documento' : 'documentos' }}\r\n </button>\r\n\r\n<!-- El panel se portalea al overlay (fuera del host): las vars de acento se\r\n re-declaran aqu\u00ED para que el pie \u00ABVer en documentos\u00BB conserve su tinte. -->\r\n <div\r\n iusPopoverContent\r\n class=\"ius-timeline__att-pop\"\r\n [style.--_accent-strong]=\"'var(--ius-' + accent() + '-600)'\"\r\n [style.--_accent-soft]=\"'var(--ius-' + accent() + '-100)'\"\r\n >\r\n <div class=\"ius-timeline__att-pop-head\">Documentos \u00B7 {{ it.attachments.length }}</div>\r\n @for (a of it.attachments; track $index) {\r\n @if (a.href) {\r\n <a\r\n class=\"ius-timeline__att-link\"\r\n [href]=\"a.href\"\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n [title]=\"a.name\"\r\n (click)=\"onAdjunto(it.original, a)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\r\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\r\n </a>\r\n } @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-timeline__att-link\"\r\n [title]=\"a.name\"\r\n (click)=\"onAdjunto(it.original, a)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ a.icon || 'attach_file' }}</span>\r\n <span class=\"ius-timeline__att-link-name\">{{ a.name }}</span>\r\n </button>\r\n }\r\n }\r\n @if (showAttachmentsOpenAll()) {\r\n <div class=\"ius-timeline__att-pop-foot\">\r\n <button type=\"button\" (click)=\"onAbrirTodos(it.original)\">\r\n <span translate=\"no\" class=\"ius-icon\">folder_open</span>\r\n Ver en documentos\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n\r\n @if (it.ai) {\r\n <span class=\"ius-timeline__ai\">\r\n <span translate=\"no\" class=\"ius-icon\">auto_awesome</span>\r\n ElenIA\r\n </span>\r\n }\r\n\r\n @if (it.original.footer) {\r\n <span class=\"ius-timeline__footer-extra\">{{ it.original.footer }}</span>\r\n }\r\n @if (footerTemplate(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"{ $implicit: it.original }\" />\r\n }\r\n </div>\r\n }\r\n\r\n @if (it.subItems.length) {\r\n <div class=\"ius-timeline__subitems\">\r\n <div class=\"ius-timeline__subitems-head\">\r\n <span>{{ subItemsHeading() }} \u00B7 {{ it.subItems.length }}</span>\r\n </div>\r\n <ul class=\"ius-timeline__subitems-list\" role=\"list\">\r\n @for (\r\n s of estaAbierto(it.key) ? it.subItems : it.subItems.slice(0, subItemsCollapseAfter());\r\n track s.key\r\n ) {\r\n <li class=\"ius-timeline__subitem\" [attr.data-state]=\"s.state\">\r\n <span class=\"ius-timeline__subitem-icon\">\r\n @if (s.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ s.icon }}</span>\r\n }\r\n </span>\r\n <div class=\"ius-timeline__subitem-body\">\r\n <span class=\"ius-timeline__subitem-title\">{{ s.title }}</span>\r\n @if (s.description) {\r\n <span class=\"ius-timeline__subitem-caption\">{{ s.description }}</span>\r\n }\r\n </div>\r\n @if (s.date) {\r\n <span class=\"ius-timeline__subitem-date\">{{ s.date }}</span>\r\n }\r\n </li>\r\n }\r\n </ul>\r\n @if (it.subItems.length > subItemsCollapseAfter()) {\r\n <ius-show-more\r\n class=\"ius-timeline__subitems-more\"\r\n size=\"small\"\r\n [expanded]=\"estaAbierto(it.key)\"\r\n [remaining]=\"it.subItems.length - subItemsCollapseAfter()\"\r\n [moreLabel]=\"'Ver ' + (it.subItems.length - subItemsCollapseAfter()) + ' m\u00E1s'\"\r\n lessLabel=\"Ver menos\"\r\n (toggle)=\"alternar(it.key)\"\r\n />\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_dot: 26px;--_dot-ico: 16px;--_gap: 14px;--_pb: 20px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;margin:0;padding:0;list-style:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}@container style(--ius-density: small){:host(:not([data-size])){--_dot: 22px;--_dot-ico: 14px;--_gap: 12px;--_pb: 16px}}.ius-timeline__dot,.ius-timeline__line,.ius-timeline__title-icon,.ius-timeline__tag,.ius-timeline__ai,.ius-timeline__att-badge,.ius-timeline__subitems-head,.ius-timeline__subitem-icon,.ius-timeline__subitems-more{user-select:none;-webkit-user-select:none}.ius-timeline__item{position:relative;display:grid;grid-template-columns:var(--_dot) minmax(0,1fr);column-gap:var(--_gap);padding-bottom:var(--_pb)}.ius-timeline__item:last-child{padding-bottom:0}.ius-timeline__rail{position:relative;display:flex;flex-direction:column;align-items:center}.ius-timeline__dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-surface-card);border:2px solid var(--ius-neutral-4);color:var(--ius-text-tertiary);z-index:1}.ius-timeline__dot .ius-icon{font-size:var(--_dot-ico);line-height:1}.ius-timeline__line{flex:1 1 auto;width:2px;min-height:8px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}.ius-timeline__item:last-child .ius-timeline__line{display:none}.ius-timeline__item[data-state=done] .ius-timeline__dot{background:var(--_accent-strong);border-color:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-timeline__item[data-state=current] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--_accent-strong);color:var(--_accent-strong)}.ius-timeline__item[data-state=pending] .ius-timeline__dot{background:var(--ius-surface-card);border-color:var(--ius-neutral-4);border-style:dashed}.ius-timeline__item[data-state=risk] .ius-timeline__dot{background:var(--ius-danger-500);border-color:var(--ius-danger-600);color:var(--ius-neutral-white)}.ius-timeline__item[data-fill=done] .ius-timeline__line{background:var(--_accent-c2)}.ius-timeline__content{min-width:0}.ius-timeline__card{background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md);padding:var(--ius-space-sm) var(--ius-space-md)}.ius-timeline__item[data-state=pending] .ius-timeline__card{background:var(--ius-neutral-1)}.ius-timeline__head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-timeline__title-group{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-timeline__title-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__item[data-state=done] .ius-timeline__title-icon,.ius-timeline__item[data-state=current] .ius-timeline__title-icon{color:var(--_accent-strong)}.ius-timeline__title{font-size:var(--ius-fs-sm);line-height:1.35;font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__item[data-state=pending] .ius-timeline__title{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-medium, 500)}.ius-timeline__item[data-state=current] .ius-timeline__title{color:var(--_accent-strong)}.ius-timeline__date{flex:0 0 auto;font-size:11.5px;line-height:1.4;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-timeline__desc{margin:var(--ius-space-xs) 0 0;font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);text-wrap:pretty}.ius-timeline__tags{display:flex;flex-wrap:wrap;gap:var(--ius-space-xs);margin-top:var(--ius-space-xs)}.ius-timeline__tags:empty{display:none}.ius-timeline__tag{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto;font-size:var(--ius-fs-sm);line-height:1;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-2);color:var(--ius-text-secondary);border:1px solid var(--ius-stroke)}.ius-timeline__tag .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__tag[data-tone=success]{background:var(--ius-success-100);color:var(--ius-success-700);border-color:var(--ius-success-200)}.ius-timeline__tag[data-tone=warning]{background:var(--ius-warning-100);color:var(--ius-warning-700);border-color:var(--ius-warning-200)}.ius-timeline__tag[data-tone=danger]{background:var(--ius-danger-100);color:var(--ius-danger-700);border-color:var(--ius-danger-200)}.ius-timeline__tag[data-tone=info]{background:var(--ius-info-100);color:var(--ius-info-700);border-color:var(--ius-info-200)}.ius-timeline__tag[data-tone=accent]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:transparent}.ius-timeline__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-md);margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__footer:empty{display:none}.ius-timeline__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary);min-width:0;max-width:100%}.ius-timeline__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-timeline__footer-extra{font-size:11.5px;line-height:1.2;color:var(--ius-text-secondary)}.ius-timeline__att-badge{appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:11.5px;line-height:1;color:var(--ius-text-secondary);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-timeline__att-badge .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-timeline__att-badge:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-timeline__att-badge:hover .ius-icon{color:var(--_accent-strong)}.ius-timeline__att-badge:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__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);border:1px solid var(--ius-uva-200)}.ius-timeline__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-timeline__subitems{margin-top:var(--ius-space-sm);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__subitems-head{display:flex;align-items:baseline;justify-content:space-between;font:var(--ius-fw-semibold) var(--ius-fs-sm)/1.4 var(--ius-font-display);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);margin:0 0 var(--ius-space-xs)}.ius-timeline__subitems-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-timeline__subitem{display:grid;grid-template-columns:18px minmax(0,1fr) auto;column-gap:var(--ius-space-xs);align-items:start;min-width:0;padding:var(--ius-space-xs) var(--ius-space-xs);margin:0 -6px;border-radius:var(--ius-radius-sm);font-size:var(--ius-fs-sm);line-height:1.4}.ius-timeline__subitem-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;margin-top:1px}.ius-timeline__subitem-icon .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-neutral-5)}.ius-timeline__subitem-body{min-width:0;display:flex;flex-direction:column;gap:1px}.ius-timeline__subitem-title{color:var(--ius-text-primary);min-width:0;word-break:normal;overflow-wrap:anywhere}.ius-timeline__subitem[data-state=pending] .ius-timeline__subitem-title{color:var(--ius-text-tertiary)}.ius-timeline__subitem-caption{font-size:var(--ius-fs-sm);line-height:1.4;color:var(--ius-text-tertiary);text-wrap:pretty}.ius-timeline__subitem-date{color:var(--ius-text-tertiary);font-size:var(--ius-fs-sm);font-variant-numeric:tabular-nums;white-space:nowrap;flex:0 0 auto;margin-top:1px}.ius-timeline__subitems-more{display:inline-flex;margin:var(--ius-space-xxs) 0 0 -6px}.ius-timeline__att-pop{display:flex;flex-direction:column;min-width:240px;max-width:320px}.ius-timeline__att-pop-head{font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);color:var(--ius-text-tertiary);letter-spacing:.04em;text-transform:uppercase;padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-xs)}.ius-timeline__att-link{appearance:none;border:0;background:transparent;text-decoration:none;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);cursor:pointer;font-size:12.5px;line-height:1.3;color:var(--ius-text-primary);text-align:left;width:100%}.ius-timeline__att-link:hover{background:var(--ius-neutral-1)}.ius-timeline__att-link:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-timeline__att-link .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary);flex:0 0 auto}.ius-timeline__att-link-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto}.ius-timeline__att-pop-foot{margin-top:var(--ius-space-xs);padding-top:var(--ius-space-xs);border-top:1px solid var(--ius-neutral-2)}.ius-timeline__att-pop-foot button{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-semibold) 11.5px/1 var(--ius-font-body);color:var(--_accent-strong);padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-timeline__att-pop-foot button:hover{background:var(--_accent-soft)}.ius-timeline__att-pop-foot .ius-icon{font-size:var(--ius-icon-sm)}\n"] }]
|
|
13214
13214
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], kindIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "kindIcons", required: false }] }], subItemsHeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsHeading", required: false }] }], subItemsCollapseAfter: [{ type: i0.Input, args: [{ isSignal: true, alias: "subItemsCollapseAfter", required: false }] }], showAttachmentsOpenAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "showAttachmentsOpenAll", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], attachmentsOpenAll: [{ type: i0.Output, args: ["attachmentsOpenAll"] }], attachmentClick: [{ type: i0.Output, args: ["attachmentClick"] }] } });
|
|
13215
13215
|
|
|
13216
13216
|
/** Acento → color, calcado del mapa ACCENTS del golden. */
|
|
@@ -13272,7 +13272,7 @@ class SectionHeaderComponent {
|
|
|
13272
13272
|
...(ngDevMode ? [{ debugName: "insigniaTone" }] : /* istanbul ignore next */ []));
|
|
13273
13273
|
}
|
|
13274
13274
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13275
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SectionHeaderComponent, isStandalone: true, selector: "ius-section-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, host: { properties: { "attr.data-variant": "variant()", "attr.data-sticky": "sticky() ? 'true' : null", "attr.data-collapsed": "collapsed() ? 'true' : null", "attr.aria-label": "(!collapsible() && ariaLabel()) || null", "style.--_sech-accent": "accentColor()" }, classAttribute: "ius-sech" }, ngImport: i0, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\n un <button> interno para que el slot de acci\u00F3n no anide botones. -->\n@if (collapsible()) {\n <button\n type=\"button\"\n class=\"ius-sech__toggle\"\n [attr.aria-expanded]=\"collapsed() ? 'false' : 'true'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"toggle.emit($event)\"\n >\n <span class=\"ius-sech__twisty\">\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\n </span>\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\n}\n\n<span class=\"ius-sech__action\">\n <ng-content select=\"[iusSectionHeaderAction]\" />\n</span>\n\n<ng-template #cuerpo>\n @if (icon()) {\n <span class=\"ius-sech__ic\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n </span>\n }\n <span class=\"ius-sech__label\"><ng-content /></span>\n @if (count() != null) {\n <span class=\"ius-sech__count\">\n <ius-insignia variant=\"count-soft\" [tone]=\"insigniaTone()\" [count]=\"count()\" />\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);width:100%;border:0;background:transparent;font-family:var(--ius-font-display);text-align:left;color:var(--ius-text-tertiary)}:host([data-sticky=true]){position:sticky;top:0;z-index:var(--ius-z-sticky);background:var(--ius-surface-card)}:host([data-variant=group]){padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-sm);letter-spacing:.05em;text-transform:uppercase}:host([data-variant=letter]){padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);color:var(--_sech-accent, var(--ius-info-600))}.ius-sech__twisty{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sech__twisty .ius-icon{font-size:var(--ius-icon-sm)}:host([data-collapsed=true]) .ius-sech__twisty{transform:rotate(-90deg)}.ius-sech__ic{flex:0 0 auto;display:inline-flex;color:var(--_sech-accent, currentColor)}.ius-sech__ic .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-sech__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-sech__count{flex:0 0 auto}.ius-sech__action{flex:0 0 auto;display:inline-flex;align-items:center}.ius-sech__action:empty{display:none}.ius-sech__toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs);border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-sech__toggle:hover .ius-sech__label{color:var(--ius-text-secondary)}.ius-sech__toggle: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: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SectionHeaderComponent, isStandalone: true, selector: "ius-section-header", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, host: { properties: { "attr.data-variant": "variant()", "attr.data-sticky": "sticky() ? 'true' : null", "attr.data-collapsed": "collapsed() ? 'true' : null", "attr.aria-label": "(!collapsible() && ariaLabel()) || null", "style.--_sech-accent": "accentColor()" }, classAttribute: "ius-sech" }, ngImport: i0, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\r\n un <button> interno para que el slot de acci\u00F3n no anide botones. -->\r\n@if (collapsible()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-sech__toggle\"\r\n [attr.aria-expanded]=\"collapsed() ? 'false' : 'true'\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"toggle.emit($event)\"\r\n >\r\n <span class=\"ius-sech__twisty\">\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </span>\r\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\r\n </button>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\r\n}\r\n\r\n<span class=\"ius-sech__action\">\r\n <ng-content select=\"[iusSectionHeaderAction]\" />\r\n</span>\r\n\r\n<ng-template #cuerpo>\r\n @if (icon()) {\r\n <span class=\"ius-sech__ic\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n <span class=\"ius-sech__label\"><ng-content /></span>\r\n @if (count() != null) {\r\n <span class=\"ius-sech__count\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"insigniaTone()\" [count]=\"count()\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);width:100%;border:0;background:transparent;font-family:var(--ius-font-display);text-align:left;color:var(--ius-text-tertiary)}:host([data-sticky=true]){position:sticky;top:0;z-index:var(--ius-z-sticky);background:var(--ius-surface-card)}:host([data-variant=group]){padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-sm);letter-spacing:.05em;text-transform:uppercase}:host([data-variant=letter]){padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);color:var(--_sech-accent, var(--ius-info-600))}.ius-sech__twisty{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sech__twisty .ius-icon{font-size:var(--ius-icon-sm)}:host([data-collapsed=true]) .ius-sech__twisty{transform:rotate(-90deg)}.ius-sech__ic{flex:0 0 auto;display:inline-flex;color:var(--_sech-accent, currentColor)}.ius-sech__ic .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-sech__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-sech__count{flex:0 0 auto}.ius-sech__action{flex:0 0 auto;display:inline-flex;align-items:center}.ius-sech__action:empty{display:none}.ius-sech__toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs);border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-sech__toggle:hover .ius-sech__label{color:var(--ius-text-secondary)}.ius-sech__toggle: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: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13276
13276
|
}
|
|
13277
13277
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
13278
13278
|
type: Component,
|
|
@@ -13283,7 +13283,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13283
13283
|
'[attr.data-collapsed]': "collapsed() ? 'true' : null",
|
|
13284
13284
|
'[attr.aria-label]': '(!collapsible() && ariaLabel()) || null',
|
|
13285
13285
|
'[style.--_sech-accent]': 'accentColor()',
|
|
13286
|
-
}, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\n un <button> interno para que el slot de acci\u00F3n no anide botones. -->\n@if (collapsible()) {\n <button\n type=\"button\"\n class=\"ius-sech__toggle\"\n [attr.aria-expanded]=\"collapsed() ? 'false' : 'true'\"\n [attr.aria-label]=\"ariaLabel() || null\"\n (click)=\"toggle.emit($event)\"\n >\n <span class=\"ius-sech__twisty\">\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\n </span>\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\n </button>\n} @else {\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\n}\n\n<span class=\"ius-sech__action\">\n <ng-content select=\"[iusSectionHeaderAction]\" />\n</span>\n\n<ng-template #cuerpo>\n @if (icon()) {\n <span class=\"ius-sech__ic\">\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n </span>\n }\n <span class=\"ius-sech__label\"><ng-content /></span>\n @if (count() != null) {\n <span class=\"ius-sech__count\">\n <ius-insignia variant=\"count-soft\" [tone]=\"insigniaTone()\" [count]=\"count()\" />\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);width:100%;border:0;background:transparent;font-family:var(--ius-font-display);text-align:left;color:var(--ius-text-tertiary)}:host([data-sticky=true]){position:sticky;top:0;z-index:var(--ius-z-sticky);background:var(--ius-surface-card)}:host([data-variant=group]){padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-sm);letter-spacing:.05em;text-transform:uppercase}:host([data-variant=letter]){padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);color:var(--_sech-accent, var(--ius-info-600))}.ius-sech__twisty{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sech__twisty .ius-icon{font-size:var(--ius-icon-sm)}:host([data-collapsed=true]) .ius-sech__twisty{transform:rotate(-90deg)}.ius-sech__ic{flex:0 0 auto;display:inline-flex;color:var(--_sech-accent, currentColor)}.ius-sech__ic .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-sech__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-sech__count{flex:0 0 auto}.ius-sech__action{flex:0 0 auto;display:inline-flex;align-items:center}.ius-sech__action:empty{display:none}.ius-sech__toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs);border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-sech__toggle:hover .ius-sech__label{color:var(--ius-text-secondary)}.ius-sech__toggle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
13286
|
+
}, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\r\n un <button> interno para que el slot de acci\u00F3n no anide botones. -->\r\n@if (collapsible()) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-sech__toggle\"\r\n [attr.aria-expanded]=\"collapsed() ? 'false' : 'true'\"\r\n [attr.aria-label]=\"ariaLabel() || null\"\r\n (click)=\"toggle.emit($event)\"\r\n >\r\n <span class=\"ius-sech__twisty\">\r\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\r\n </span>\r\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\r\n </button>\r\n} @else {\r\n <ng-container [ngTemplateOutlet]=\"cuerpo\" />\r\n}\r\n\r\n<span class=\"ius-sech__action\">\r\n <ng-content select=\"[iusSectionHeaderAction]\" />\r\n</span>\r\n\r\n<ng-template #cuerpo>\r\n @if (icon()) {\r\n <span class=\"ius-sech__ic\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\r\n </span>\r\n }\r\n <span class=\"ius-sech__label\"><ng-content /></span>\r\n @if (count() != null) {\r\n <span class=\"ius-sech__count\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"insigniaTone()\" [count]=\"count()\" />\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-xs);width:100%;border:0;background:transparent;font-family:var(--ius-font-display);text-align:left;color:var(--ius-text-tertiary)}:host([data-sticky=true]){position:sticky;top:0;z-index:var(--ius-z-sticky);background:var(--ius-surface-card)}:host([data-variant=group]){padding:var(--ius-space-sm) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-bold, 700);font-size:var(--ius-fs-sm);letter-spacing:.05em;text-transform:uppercase}:host([data-variant=letter]){padding:var(--ius-space-xs) var(--ius-space-xs) var(--ius-space-xxs);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);color:var(--_sech-accent, var(--ius-info-600))}.ius-sech__twisty{flex:0 0 auto;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-sech__twisty .ius-icon{font-size:var(--ius-icon-sm)}:host([data-collapsed=true]) .ius-sech__twisty{transform:rotate(-90deg)}.ius-sech__ic{flex:0 0 auto;display:inline-flex;color:var(--_sech-accent, currentColor)}.ius-sech__ic .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-sech__label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-sech__count{flex:0 0 auto}.ius-sech__action{flex:0 0 auto;display:inline-flex;align-items:center}.ius-sech__action:empty{display:none}.ius-sech__toggle{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs);border:0;background:transparent;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-align:left;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-sech__toggle:hover .ius-sech__label{color:var(--ius-text-secondary)}.ius-sech__toggle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
13287
13287
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], toggle: [{ type: i0.Output, args: ["toggle"] }] } });
|
|
13288
13288
|
|
|
13289
13289
|
/** Pseudo-columna de selección (misma clave que el golden). */
|
|
@@ -13739,7 +13739,7 @@ class TableComponent {
|
|
|
13739
13739
|
body.style.userSelect = 'none';
|
|
13740
13740
|
}
|
|
13741
13741
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13742
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TableComponent, isStandalone: true, selector: "ius-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectAriaLabel: { classPropertyName: "selectAriaLabel", publicName: "selectAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, isRowDisabled: { classPropertyName: "isRowDisabled", publicName: "isRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, getRowAccent: { classPropertyName: "getRowAccent", publicName: "getRowAccent", isSignal: true, isRequired: false, transformFunction: null }, rowClassName: { classPropertyName: "rowClassName", publicName: "rowClassName", isSignal: true, isRequired: false, transformFunction: null }, rowStyle: { classPropertyName: "rowStyle", publicName: "rowStyle", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnDividers: { classPropertyName: "columnDividers", publicName: "columnDividers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, host: { properties: { "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-bordered": "bordered() ? 'true' : 'false'", "attr.data-striped": "striped() ? 'true' : 'false'", "attr.data-hover": "hover() ? 'true' : 'false'", "attr.data-col-dividers": "columnDividers() ? 'true' : 'false'", "attr.data-sticky-header": "stickyHeader() ? 'true' : 'false'", "attr.data-clickable": "rowClickable() ? 'true' : 'false'", "attr.data-scrolled-x": "scrolledX() ? 'true' : 'false'", "attr.data-resizing": "resizing() ? 'true' : 'false'" }, classAttribute: "ius-table-wrap" }, viewQueries: [{ propertyName: "scrollRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "tableRef", first: true, predicate: ["tabla"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Encabezado de columna: \u00EDcono + label + control de orden (unfold_more siempre visible). -->\n<ng-template #hcell let-c>\n <span class=\"ius-table__hcell\">\n @if (c.headerIcon) {\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" style=\"opacity: 1\">{{ c.headerIcon }}</span>\n }\n <span class=\"ius-table__hlabel\">\n @if (c.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"c.headerTemplate; context: headerContext(c)\" />\n } @else {\n {{ c.header }}\n }\n </span>\n @if (c.sortable) {\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" aria-hidden=\"true\">{{ sortIcon(c.key) }}</span>\n }\n </span>\n</ng-template>\n\n<div\n #scroller\n class=\"ius-table-scroll ius-scroll\"\n [style.height]=\"px(height())\"\n [style.max-height]=\"px(maxHeight())\"\n (scroll)=\"onScroll()\"\n>\n <table\n #tabla\n class=\"ius-table\"\n role=\"table\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-empty]=\"isEmpty() ? 'true' : null\"\n [style.table-layout]=\"tableLayout()\"\n >\n <!-- \u2500\u2500 colgroup (anchos efectivos) \u2500\u2500 -->\n <colgroup>\n @if (selectable()) {\n <col [style.width]=\"selColWidth()\" />\n }\n @for (c of cols(); track c.key) {\n <col [style.width]=\"colWidth(c.key, c.width)\" />\n }\n </colgroup>\n\n <!-- \u2500\u2500 head \u2500\u2500 -->\n <thead>\n <tr>\n @if (selectable()) {\n <th\n class=\"ius-table__selcell\"\n [attr.data-pinned]=\"pinSide(selKey)\"\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\n [style.left]=\"pinLeft(selKey)\"\n [style.right]=\"pinRight(selKey)\"\n >\n <ius-checkbox\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll($event)\"\n size=\"small\"\n ariaLabel=\"Seleccionar todo\"\n />\n </th>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <th\n [attr.data-key]=\"c.key\"\n [attr.data-align]=\"alignOf(c)\"\n [attr.data-sorted]=\"dirOf(c.key) ? 'true' : null\"\n [attr.aria-sort]=\"ariaSort(c.key)\"\n [attr.title]=\"c.headerTitle ?? null\"\n [attr.data-pinned]=\"pinSide(c.key)\"\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\n [style.left]=\"pinLeft(c.key)\"\n [style.right]=\"pinRight(c.key)\"\n >\n @if (c.sortable) {\n <button type=\"button\" class=\"ius-table__sortbtn\" (click)=\"onHeaderSort(c)\">\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\n </button>\n } @else {\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\n }\n @if (canResize(c, ci)) {\n <span\n class=\"ius-table__resizer\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"'Ajustar ancho de ' + (c.header || 'columna')\"\n (mousedown)=\"startResize($event, c)\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <!-- \u2500\u2500 body \u2500\u2500 -->\n @if (loading()) {\n <tbody>\n @for (ri of skeletonIdx(); track ri) {\n <tr class=\"ius-table__skel-row\">\n @if (selectable()) {\n <td class=\"ius-table__selcell\">\n <span class=\"ius-table__skel\" style=\"width: 16px; margin: 0 auto\"></span>\n </td>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <td [attr.data-align]=\"alignOf(c)\">\n <span\n class=\"ius-table__skel\"\n [style.width]=\"skelWidth(c, ci)\"\n [style.margin-left]=\"alignOf(c) === 'end' ? 'auto' : '0'\"\n ></span>\n </td>\n }\n </tr>\n }\n </tbody>\n } @else if (!data().length) {\n <tbody>\n <tr>\n <td [attr.colspan]=\"colCount()\" style=\"border-bottom: 0\">\n <div class=\"ius-table__block\">\n @if (emptyTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n <ius-empty-state\n variant=\"no-results\"\n size=\"compact\"\n [title]=\"emptyTitle()\"\n [description]=\"emptyDescription()\"\n />\n }\n </div>\n </td>\n </tr>\n </tbody>\n } @else {\n <tbody>\n @for (row of data(); track rowKeyOf(row, $index); let ri = $index) {\n <tr\n [class]=\"rowClass(row, ri)\"\n [attr.data-selected]=\"isSelected(row, ri) ? 'true' : null\"\n [attr.tabindex]=\"isClickable(row, ri) ? 0 : null\"\n [style]=\"rowStyles(row, ri)\"\n (click)=\"onRowClick(row, ri, $event)\"\n (keydown)=\"onRowKeydown(row, ri, $event)\"\n >\n @if (selectable()) {\n <td\n class=\"ius-table__selcell\"\n [attr.data-pinned]=\"pinSide(selKey)\"\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\n [style.left]=\"pinLeft(selKey)\"\n [style.right]=\"pinRight(selKey)\"\n [style.box-shadow]=\"accentShadow(row, ri)\"\n (click)=\"$event.stopPropagation()\"\n >\n <ius-checkbox\n [checked]=\"isSelected(row, ri)\"\n (checkedChange)=\"toggleRow(rowKeyOf(row, ri), $event)\"\n size=\"small\"\n [disabled]=\"isDisabled(row, ri)\"\n [ariaLabel]=\"selectAriaLabel()\"\n />\n </td>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <td\n [attr.data-align]=\"alignOf(c)\"\n [attr.data-numeric]=\"c.numeric ? 'true' : null\"\n [attr.title]=\"cellTitle(row, c)\"\n [attr.data-pinned]=\"pinSide(c.key)\"\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\n [style.left]=\"pinLeft(c.key)\"\n [style.right]=\"pinRight(c.key)\"\n [style.box-shadow]=\"!selectable() && ci === 0 ? accentShadow(row, ri) : null\"\n >\n @if (c.render) {\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(row, ri, c)\" />\n } @else if (isBlank(cellValue(row, c))) {\n <span class=\"ius-table__muted\">\u2014</span>\n } @else {\n {{ cellValue(row, c) }}\n }\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- \u2500\u2500 footer resumen \u2500\u2500 -->\n @if (showSummary()) {\n <tfoot>\n <tr>\n @if (selectable()) {\n <td class=\"ius-table__selcell\"></td>\n }\n @for (c of cols(); track c.key) {\n <td [attr.data-align]=\"alignOf(c)\">\n @if (summaryCell(c.key); as cell) {\n @if (cell.template) {\n <ng-container *ngTemplateOutlet=\"cell.template; context: { $implicit: cell }\" />\n } @else {\n {{ cell.value }}\n }\n }\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;font-family:var(--ius-font-body);box-sizing:border-box;--_t-py: var(--ius-space-sm);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base);--_t-head-fs: var(--ius-fs-sm);--_t-head-lh: var(--ius-lh-sm);--_t-icon: var(--ius-icon-sm)}:host([data-size=small]){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}@container style(--ius-density: small){:host(:not([data-size])){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}}:host([data-size=large]){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-table-scroll{flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:auto}:host([data-bordered=true]) .ius-table-scroll{--_sb-track-margin: var(--ius-radius-lg);--_sb-track-margin-x: var(--ius-radius-lg)}.ius-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}.ius-table thead th{position:sticky;top:0;z-index:2;background:var(--ius-surface-card);color:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--_t-head-fs);line-height:var(--_t-head-lh);letter-spacing:.01em;text-align:left;vertical-align:middle;white-space:nowrap;padding:var(--_t-py) var(--_t-px);border-bottom:1px solid var(--ius-stroke-strong);box-sizing:border-box}:host([data-sticky-header=false]) thead th{position:relative}.ius-table thead th[data-align=end]{text-align:right}.ius-table thead th[data-align=center]{text-align:center}.ius-table__hcell{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%}.ius-table th[data-align=end] .ius-table__hcell{flex-direction:row-reverse}.ius-table th[data-align=center] .ius-table__hcell{justify-content:center}.ius-table__hlabel{overflow:hidden;text-overflow:ellipsis}.ius-table__sortbtn{appearance:none;border:0;background:transparent;margin:0;padding:0;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:inherit;color:inherit;cursor:pointer;max-width:100%;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-table__sortbtn:hover{color:var(--ius-text-primary)}.ius-table__sortbtn:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-table th[data-sorted=true] .ius-table__sortbtn{color:var(--ius-text-primary);font-weight:var(--ius-fw-bold)}.ius-table__sorticon{font-size:var(--_t-icon);line-height:1;flex:0 0 auto;opacity:1;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table__sortbtn .ius-table__sorticon{color:var(--ius-text-tertiary);opacity:.75}.ius-table__sortbtn:hover .ius-table__sorticon{opacity:1;color:var(--ius-text-secondary)}.ius-table th[data-sorted=true] .ius-table__sorticon{opacity:1;color:var(--ius-text-primary)}.ius-table__resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.ius-table__resizer:after{content:\"\";position:absolute;top:18%;bottom:18%;right:4px;width:2px;border-radius:var(--ius-radius-pill);background:transparent;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table thead th:hover .ius-table__resizer:after{background:var(--ius-stroke-strong)}.ius-table__resizer:hover:after{background:var(--ius-primary-500)}:host([data-resizing=true]) .ius-table__resizer:after{background:var(--ius-primary-500)}.ius-table tbody td{padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);color:var(--ius-text-primary);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);box-sizing:border-box}.ius-table tbody tr:last-child td{border-bottom:0}.ius-table td[data-align=end]{text-align:right}.ius-table td[data-align=center]{text-align:center}.ius-table td[data-numeric=true]{font-variant-numeric:tabular-nums}.ius-table__muted{color:var(--ius-text-tertiary)}:host([data-col-dividers=true]) thead th:not(:last-child),:host([data-col-dividers=true]) tbody td:not(:last-child),:host([data-col-dividers=true]) tfoot td:not(:last-child){border-right:1px solid var(--ius-neutral-3)}:host([data-striped=true]) tbody tr:nth-child(2n) td{background:var(--ius-neutral-1)}:host([data-hover=true]) tbody tr:hover td{box-shadow:inset 0 1px 0 0 var(--ius-info-200),inset 0 -1px 0 0 var(--ius-info-200)}:host([data-clickable=true]) tbody tr{cursor:pointer}:host([data-clickable=true]) tbody tr:active td{background:var(--ius-info-100)}.ius-table tbody tr:focus-visible{outline:none}.ius-table tbody tr:focus-visible td{box-shadow:inset 0 0 0 2px var(--ius-stroke-focus)}.ius-table thead th.ius-table__selcell,.ius-table tbody td.ius-table__selcell,.ius-table tfoot td.ius-table__selcell{text-align:center;overflow:visible;text-overflow:clip}.ius-table__selcell>*{vertical-align:middle}.ius-table th[data-pinned],.ius-table td[data-pinned]{position:sticky;z-index:1}.ius-table thead th[data-pinned]{z-index:3}.ius-table th[data-pinned=end],.ius-table td[data-pinned=end]{box-shadow:-1px 0 0 0 var(--ius-stroke)}:host([data-scrolled-x=true]) th[data-pinned=start][data-pinned-edge=true],:host([data-scrolled-x=true]) td[data-pinned=start][data-pinned-edge=true]{box-shadow:1px 0 0 0 var(--ius-stroke),5px 0 7px -5px var(--ius-stroke-strong)}.ius-table tfoot td{position:sticky;bottom:0;z-index:2;padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);background:var(--ius-neutral-1);border-top:1px solid var(--ius-stroke-strong);font-variant-numeric:tabular-nums;box-sizing:border-box;white-space:nowrap}.ius-table tfoot td[data-align=end]{text-align:right}.ius-table tfoot td[data-align=center]{text-align:center}.ius-table__block{padding:var(--ius-space-2xl) var(--ius-space-lg);display:grid;place-items:center;box-sizing:border-box}.ius-table[data-empty=true]{height:100%}.ius-table[data-empty=true]>tbody{height:100%}.ius-table[data-empty=true]>tbody>tr>td{height:100%}.ius-table[data-empty=true] .ius-table__block{min-height:100%}.ius-table__skel-row td{border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card)}.ius-table__skel{display:block;height:var(--_t-fs);border-radius:var(--ius-radius-sm);background:linear-gradient(90deg,var(--ius-neutral-2) 25%,var(--ius-neutral-3) 37%,var(--ius-neutral-2) 63%);background-size:400% 100%;animation:ius-table-shimmer 1.4s ease infinite}@keyframes ius-table-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ius-table__skel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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 }); }
|
|
13742
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TableComponent, isStandalone: true, selector: "ius-table", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, rowKey: { classPropertyName: "rowKey", publicName: "rowKey", isSignal: true, isRequired: false, transformFunction: null }, sortColumn: { classPropertyName: "sortColumn", publicName: "sortColumn", isSignal: true, isRequired: false, transformFunction: null }, sortDirection: { classPropertyName: "sortDirection", publicName: "sortDirection", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectedKeys: { classPropertyName: "selectedKeys", publicName: "selectedKeys", isSignal: true, isRequired: false, transformFunction: null }, selectAriaLabel: { classPropertyName: "selectAriaLabel", publicName: "selectAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, rowClickable: { classPropertyName: "rowClickable", publicName: "rowClickable", isSignal: true, isRequired: false, transformFunction: null }, isRowDisabled: { classPropertyName: "isRowDisabled", publicName: "isRowDisabled", isSignal: true, isRequired: false, transformFunction: null }, getRowAccent: { classPropertyName: "getRowAccent", publicName: "getRowAccent", isSignal: true, isRequired: false, transformFunction: null }, rowClassName: { classPropertyName: "rowClassName", publicName: "rowClassName", isSignal: true, isRequired: false, transformFunction: null }, rowStyle: { classPropertyName: "rowStyle", publicName: "rowStyle", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, columnDividers: { classPropertyName: "columnDividers", publicName: "columnDividers", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, skeletonRows: { classPropertyName: "skeletonRows", publicName: "skeletonRows", 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 }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, striped: { classPropertyName: "striped", publicName: "striped", isSignal: true, isRequired: false, transformFunction: null }, hover: { classPropertyName: "hover", publicName: "hover", isSignal: true, isRequired: false, transformFunction: null }, stickyHeader: { classPropertyName: "stickyHeader", publicName: "stickyHeader", isSignal: true, isRequired: false, transformFunction: null }, summary: { classPropertyName: "summary", publicName: "summary", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortChange: "sortChange", selectionChange: "selectionChange", rowClick: "rowClick" }, host: { properties: { "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-bordered": "bordered() ? 'true' : 'false'", "attr.data-striped": "striped() ? 'true' : 'false'", "attr.data-hover": "hover() ? 'true' : 'false'", "attr.data-col-dividers": "columnDividers() ? 'true' : 'false'", "attr.data-sticky-header": "stickyHeader() ? 'true' : 'false'", "attr.data-clickable": "rowClickable() ? 'true' : 'false'", "attr.data-scrolled-x": "scrolledX() ? 'true' : 'false'", "attr.data-resizing": "resizing() ? 'true' : 'false'" }, classAttribute: "ius-table-wrap" }, viewQueries: [{ propertyName: "scrollRef", first: true, predicate: ["scroller"], descendants: true, isSignal: true }, { propertyName: "tableRef", first: true, predicate: ["tabla"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Encabezado de columna: \u00EDcono + label + control de orden (unfold_more siempre visible). -->\r\n<ng-template #hcell let-c>\r\n <span class=\"ius-table__hcell\">\r\n @if (c.headerIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" style=\"opacity: 1\">{{ c.headerIcon }}</span>\r\n }\r\n <span class=\"ius-table__hlabel\">\r\n @if (c.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"c.headerTemplate; context: headerContext(c)\" />\r\n } @else {\r\n {{ c.header }}\r\n }\r\n </span>\r\n @if (c.sortable) {\r\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" aria-hidden=\"true\">{{ sortIcon(c.key) }}</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<div\r\n #scroller\r\n class=\"ius-table-scroll ius-scroll\"\r\n [style.height]=\"px(height())\"\r\n [style.max-height]=\"px(maxHeight())\"\r\n (scroll)=\"onScroll()\"\r\n>\r\n <table\r\n #tabla\r\n class=\"ius-table\"\r\n role=\"table\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.data-empty]=\"isEmpty() ? 'true' : null\"\r\n [style.table-layout]=\"tableLayout()\"\r\n >\r\n <!-- \u2500\u2500 colgroup (anchos efectivos) \u2500\u2500 -->\r\n <colgroup>\r\n @if (selectable()) {\r\n <col [style.width]=\"selColWidth()\" />\r\n }\r\n @for (c of cols(); track c.key) {\r\n <col [style.width]=\"colWidth(c.key, c.width)\" />\r\n }\r\n </colgroup>\r\n\r\n <!-- \u2500\u2500 head \u2500\u2500 -->\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th\r\n class=\"ius-table__selcell\"\r\n [attr.data-pinned]=\"pinSide(selKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\r\n [style.left]=\"pinLeft(selKey)\"\r\n [style.right]=\"pinRight(selKey)\"\r\n >\r\n <ius-checkbox\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (checkedChange)=\"toggleAll($event)\"\r\n size=\"small\"\r\n ariaLabel=\"Seleccionar todo\"\r\n />\r\n </th>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <th\r\n [attr.data-key]=\"c.key\"\r\n [attr.data-align]=\"alignOf(c)\"\r\n [attr.data-sorted]=\"dirOf(c.key) ? 'true' : null\"\r\n [attr.aria-sort]=\"ariaSort(c.key)\"\r\n [attr.title]=\"c.headerTitle ?? null\"\r\n [attr.data-pinned]=\"pinSide(c.key)\"\r\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\r\n [style.left]=\"pinLeft(c.key)\"\r\n [style.right]=\"pinRight(c.key)\"\r\n >\r\n @if (c.sortable) {\r\n <button type=\"button\" class=\"ius-table__sortbtn\" (click)=\"onHeaderSort(c)\">\r\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\r\n </button>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\r\n }\r\n @if (canResize(c, ci)) {\r\n <span\r\n class=\"ius-table__resizer\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n [attr.aria-label]=\"'Ajustar ancho de ' + (c.header || 'columna')\"\r\n (mousedown)=\"startResize($event, c)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 body \u2500\u2500 -->\r\n @if (loading()) {\r\n <tbody>\r\n @for (ri of skeletonIdx(); track ri) {\r\n <tr class=\"ius-table__skel-row\">\r\n @if (selectable()) {\r\n <td class=\"ius-table__selcell\">\r\n <span class=\"ius-table__skel\" style=\"width: 16px; margin: 0 auto\"></span>\r\n </td>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <td [attr.data-align]=\"alignOf(c)\">\r\n <span\r\n class=\"ius-table__skel\"\r\n [style.width]=\"skelWidth(c, ci)\"\r\n [style.margin-left]=\"alignOf(c) === 'end' ? 'auto' : '0'\"\r\n ></span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n } @else if (!data().length) {\r\n <tbody>\r\n <tr>\r\n <td [attr.colspan]=\"colCount()\" style=\"border-bottom: 0\">\r\n <div class=\"ius-table__block\">\r\n @if (emptyTemplate(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else {\r\n <ius-empty-state\r\n variant=\"no-results\"\r\n size=\"compact\"\r\n [title]=\"emptyTitle()\"\r\n [description]=\"emptyDescription()\"\r\n />\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n } @else {\r\n <tbody>\r\n @for (row of data(); track rowKeyOf(row, $index); let ri = $index) {\r\n <tr\r\n [class]=\"rowClass(row, ri)\"\r\n [attr.data-selected]=\"isSelected(row, ri) ? 'true' : null\"\r\n [attr.tabindex]=\"isClickable(row, ri) ? 0 : null\"\r\n [style]=\"rowStyles(row, ri)\"\r\n (click)=\"onRowClick(row, ri, $event)\"\r\n (keydown)=\"onRowKeydown(row, ri, $event)\"\r\n >\r\n @if (selectable()) {\r\n <td\r\n class=\"ius-table__selcell\"\r\n [attr.data-pinned]=\"pinSide(selKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\r\n [style.left]=\"pinLeft(selKey)\"\r\n [style.right]=\"pinRight(selKey)\"\r\n [style.box-shadow]=\"accentShadow(row, ri)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ius-checkbox\r\n [checked]=\"isSelected(row, ri)\"\r\n (checkedChange)=\"toggleRow(rowKeyOf(row, ri), $event)\"\r\n size=\"small\"\r\n [disabled]=\"isDisabled(row, ri)\"\r\n [ariaLabel]=\"selectAriaLabel()\"\r\n />\r\n </td>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <td\r\n [attr.data-align]=\"alignOf(c)\"\r\n [attr.data-numeric]=\"c.numeric ? 'true' : null\"\r\n [attr.title]=\"cellTitle(row, c)\"\r\n [attr.data-pinned]=\"pinSide(c.key)\"\r\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\r\n [style.left]=\"pinLeft(c.key)\"\r\n [style.right]=\"pinRight(c.key)\"\r\n [style.box-shadow]=\"!selectable() && ci === 0 ? accentShadow(row, ri) : null\"\r\n >\r\n @if (c.render) {\r\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(row, ri, c)\" />\r\n } @else if (isBlank(cellValue(row, c))) {\r\n <span class=\"ius-table__muted\">\u2014</span>\r\n } @else {\r\n {{ cellValue(row, c) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n\r\n <!-- \u2500\u2500 footer resumen \u2500\u2500 -->\r\n @if (showSummary()) {\r\n <tfoot>\r\n <tr>\r\n @if (selectable()) {\r\n <td class=\"ius-table__selcell\"></td>\r\n }\r\n @for (c of cols(); track c.key) {\r\n <td [attr.data-align]=\"alignOf(c)\">\r\n @if (summaryCell(c.key); as cell) {\r\n @if (cell.template) {\r\n <ng-container *ngTemplateOutlet=\"cell.template; context: { $implicit: cell }\" />\r\n } @else {\r\n {{ cell.value }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;font-family:var(--ius-font-body);box-sizing:border-box;--_t-py: var(--ius-space-sm);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base);--_t-head-fs: var(--ius-fs-sm);--_t-head-lh: var(--ius-lh-sm);--_t-icon: var(--ius-icon-sm)}:host([data-size=small]){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}@container style(--ius-density: small){:host(:not([data-size])){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}}:host([data-size=large]){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-table-scroll{flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:auto}:host([data-bordered=true]) .ius-table-scroll{--_sb-track-margin: var(--ius-radius-lg);--_sb-track-margin-x: var(--ius-radius-lg)}.ius-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}.ius-table thead th{position:sticky;top:0;z-index:2;background:var(--ius-surface-card);color:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--_t-head-fs);line-height:var(--_t-head-lh);letter-spacing:.01em;text-align:left;vertical-align:middle;white-space:nowrap;padding:var(--_t-py) var(--_t-px);border-bottom:1px solid var(--ius-stroke-strong);box-sizing:border-box}:host([data-sticky-header=false]) thead th{position:relative}.ius-table thead th[data-align=end]{text-align:right}.ius-table thead th[data-align=center]{text-align:center}.ius-table__hcell{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%}.ius-table th[data-align=end] .ius-table__hcell{flex-direction:row-reverse}.ius-table th[data-align=center] .ius-table__hcell{justify-content:center}.ius-table__hlabel{overflow:hidden;text-overflow:ellipsis}.ius-table__sortbtn{appearance:none;border:0;background:transparent;margin:0;padding:0;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:inherit;color:inherit;cursor:pointer;max-width:100%;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-table__sortbtn:hover{color:var(--ius-text-primary)}.ius-table__sortbtn:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-table th[data-sorted=true] .ius-table__sortbtn{color:var(--ius-text-primary);font-weight:var(--ius-fw-bold)}.ius-table__sorticon{font-size:var(--_t-icon);line-height:1;flex:0 0 auto;opacity:1;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table__sortbtn .ius-table__sorticon{color:var(--ius-text-tertiary);opacity:.75}.ius-table__sortbtn:hover .ius-table__sorticon{opacity:1;color:var(--ius-text-secondary)}.ius-table th[data-sorted=true] .ius-table__sorticon{opacity:1;color:var(--ius-text-primary)}.ius-table__resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.ius-table__resizer:after{content:\"\";position:absolute;top:18%;bottom:18%;right:4px;width:2px;border-radius:var(--ius-radius-pill);background:transparent;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table thead th:hover .ius-table__resizer:after{background:var(--ius-stroke-strong)}.ius-table__resizer:hover:after{background:var(--ius-primary-500)}:host([data-resizing=true]) .ius-table__resizer:after{background:var(--ius-primary-500)}.ius-table tbody td{padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);color:var(--ius-text-primary);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);box-sizing:border-box}.ius-table tbody tr:last-child td{border-bottom:0}.ius-table td[data-align=end]{text-align:right}.ius-table td[data-align=center]{text-align:center}.ius-table td[data-numeric=true]{font-variant-numeric:tabular-nums}.ius-table__muted{color:var(--ius-text-tertiary)}:host([data-col-dividers=true]) thead th:not(:last-child),:host([data-col-dividers=true]) tbody td:not(:last-child),:host([data-col-dividers=true]) tfoot td:not(:last-child){border-right:1px solid var(--ius-neutral-3)}:host([data-striped=true]) tbody tr:nth-child(2n) td{background:var(--ius-neutral-1)}:host([data-hover=true]) tbody tr:hover td{box-shadow:inset 0 1px 0 0 var(--ius-info-200),inset 0 -1px 0 0 var(--ius-info-200)}:host([data-clickable=true]) tbody tr{cursor:pointer}:host([data-clickable=true]) tbody tr:active td{background:var(--ius-info-100)}.ius-table tbody tr:focus-visible{outline:none}.ius-table tbody tr:focus-visible td{box-shadow:inset 0 0 0 2px var(--ius-stroke-focus)}.ius-table thead th.ius-table__selcell,.ius-table tbody td.ius-table__selcell,.ius-table tfoot td.ius-table__selcell{text-align:center;overflow:visible;text-overflow:clip}.ius-table__selcell>*{vertical-align:middle}.ius-table th[data-pinned],.ius-table td[data-pinned]{position:sticky;z-index:1}.ius-table thead th[data-pinned]{z-index:3}.ius-table th[data-pinned=end],.ius-table td[data-pinned=end]{box-shadow:-1px 0 0 0 var(--ius-stroke)}:host([data-scrolled-x=true]) th[data-pinned=start][data-pinned-edge=true],:host([data-scrolled-x=true]) td[data-pinned=start][data-pinned-edge=true]{box-shadow:1px 0 0 0 var(--ius-stroke),5px 0 7px -5px var(--ius-stroke-strong)}.ius-table tfoot td{position:sticky;bottom:0;z-index:2;padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);background:var(--ius-neutral-1);border-top:1px solid var(--ius-stroke-strong);font-variant-numeric:tabular-nums;box-sizing:border-box;white-space:nowrap}.ius-table tfoot td[data-align=end]{text-align:right}.ius-table tfoot td[data-align=center]{text-align:center}.ius-table__block{padding:var(--ius-space-2xl) var(--ius-space-lg);display:grid;place-items:center;box-sizing:border-box}.ius-table[data-empty=true]{height:100%}.ius-table[data-empty=true]>tbody{height:100%}.ius-table[data-empty=true]>tbody>tr>td{height:100%}.ius-table[data-empty=true] .ius-table__block{min-height:100%}.ius-table__skel-row td{border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card)}.ius-table__skel{display:block;height:var(--_t-fs);border-radius:var(--ius-radius-sm);background:linear-gradient(90deg,var(--ius-neutral-2) 25%,var(--ius-neutral-3) 37%,var(--ius-neutral-2) 63%);background-size:400% 100%;animation:ius-table-shimmer 1.4s ease infinite}@keyframes ius-table-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ius-table__skel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: 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 }); }
|
|
13743
13743
|
}
|
|
13744
13744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableComponent, decorators: [{
|
|
13745
13745
|
type: Component,
|
|
@@ -13754,9 +13754,434 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13754
13754
|
'[attr.data-clickable]': "rowClickable() ? 'true' : 'false'",
|
|
13755
13755
|
'[attr.data-scrolled-x]': "scrolledX() ? 'true' : 'false'",
|
|
13756
13756
|
'[attr.data-resizing]': "resizing() ? 'true' : 'false'",
|
|
13757
|
-
}, template: "<!-- Encabezado de columna: \u00EDcono + label + control de orden (unfold_more siempre visible). -->\n<ng-template #hcell let-c>\n <span class=\"ius-table__hcell\">\n @if (c.headerIcon) {\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" style=\"opacity: 1\">{{ c.headerIcon }}</span>\n }\n <span class=\"ius-table__hlabel\">\n @if (c.headerTemplate) {\n <ng-container *ngTemplateOutlet=\"c.headerTemplate; context: headerContext(c)\" />\n } @else {\n {{ c.header }}\n }\n </span>\n @if (c.sortable) {\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" aria-hidden=\"true\">{{ sortIcon(c.key) }}</span>\n }\n </span>\n</ng-template>\n\n<div\n #scroller\n class=\"ius-table-scroll ius-scroll\"\n [style.height]=\"px(height())\"\n [style.max-height]=\"px(maxHeight())\"\n (scroll)=\"onScroll()\"\n>\n <table\n #tabla\n class=\"ius-table\"\n role=\"table\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.data-empty]=\"isEmpty() ? 'true' : null\"\n [style.table-layout]=\"tableLayout()\"\n >\n <!-- \u2500\u2500 colgroup (anchos efectivos) \u2500\u2500 -->\n <colgroup>\n @if (selectable()) {\n <col [style.width]=\"selColWidth()\" />\n }\n @for (c of cols(); track c.key) {\n <col [style.width]=\"colWidth(c.key, c.width)\" />\n }\n </colgroup>\n\n <!-- \u2500\u2500 head \u2500\u2500 -->\n <thead>\n <tr>\n @if (selectable()) {\n <th\n class=\"ius-table__selcell\"\n [attr.data-pinned]=\"pinSide(selKey)\"\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\n [style.left]=\"pinLeft(selKey)\"\n [style.right]=\"pinRight(selKey)\"\n >\n <ius-checkbox\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll($event)\"\n size=\"small\"\n ariaLabel=\"Seleccionar todo\"\n />\n </th>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <th\n [attr.data-key]=\"c.key\"\n [attr.data-align]=\"alignOf(c)\"\n [attr.data-sorted]=\"dirOf(c.key) ? 'true' : null\"\n [attr.aria-sort]=\"ariaSort(c.key)\"\n [attr.title]=\"c.headerTitle ?? null\"\n [attr.data-pinned]=\"pinSide(c.key)\"\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\n [style.left]=\"pinLeft(c.key)\"\n [style.right]=\"pinRight(c.key)\"\n >\n @if (c.sortable) {\n <button type=\"button\" class=\"ius-table__sortbtn\" (click)=\"onHeaderSort(c)\">\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\n </button>\n } @else {\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\n }\n @if (canResize(c, ci)) {\n <span\n class=\"ius-table__resizer\"\n role=\"separator\"\n aria-orientation=\"vertical\"\n [attr.aria-label]=\"'Ajustar ancho de ' + (c.header || 'columna')\"\n (mousedown)=\"startResize($event, c)\"\n (click)=\"$event.stopPropagation()\"\n ></span>\n }\n </th>\n }\n </tr>\n </thead>\n\n <!-- \u2500\u2500 body \u2500\u2500 -->\n @if (loading()) {\n <tbody>\n @for (ri of skeletonIdx(); track ri) {\n <tr class=\"ius-table__skel-row\">\n @if (selectable()) {\n <td class=\"ius-table__selcell\">\n <span class=\"ius-table__skel\" style=\"width: 16px; margin: 0 auto\"></span>\n </td>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <td [attr.data-align]=\"alignOf(c)\">\n <span\n class=\"ius-table__skel\"\n [style.width]=\"skelWidth(c, ci)\"\n [style.margin-left]=\"alignOf(c) === 'end' ? 'auto' : '0'\"\n ></span>\n </td>\n }\n </tr>\n }\n </tbody>\n } @else if (!data().length) {\n <tbody>\n <tr>\n <td [attr.colspan]=\"colCount()\" style=\"border-bottom: 0\">\n <div class=\"ius-table__block\">\n @if (emptyTemplate(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else {\n <ius-empty-state\n variant=\"no-results\"\n size=\"compact\"\n [title]=\"emptyTitle()\"\n [description]=\"emptyDescription()\"\n />\n }\n </div>\n </td>\n </tr>\n </tbody>\n } @else {\n <tbody>\n @for (row of data(); track rowKeyOf(row, $index); let ri = $index) {\n <tr\n [class]=\"rowClass(row, ri)\"\n [attr.data-selected]=\"isSelected(row, ri) ? 'true' : null\"\n [attr.tabindex]=\"isClickable(row, ri) ? 0 : null\"\n [style]=\"rowStyles(row, ri)\"\n (click)=\"onRowClick(row, ri, $event)\"\n (keydown)=\"onRowKeydown(row, ri, $event)\"\n >\n @if (selectable()) {\n <td\n class=\"ius-table__selcell\"\n [attr.data-pinned]=\"pinSide(selKey)\"\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\n [style.left]=\"pinLeft(selKey)\"\n [style.right]=\"pinRight(selKey)\"\n [style.box-shadow]=\"accentShadow(row, ri)\"\n (click)=\"$event.stopPropagation()\"\n >\n <ius-checkbox\n [checked]=\"isSelected(row, ri)\"\n (checkedChange)=\"toggleRow(rowKeyOf(row, ri), $event)\"\n size=\"small\"\n [disabled]=\"isDisabled(row, ri)\"\n [ariaLabel]=\"selectAriaLabel()\"\n />\n </td>\n }\n @for (c of cols(); track c.key; let ci = $index) {\n <td\n [attr.data-align]=\"alignOf(c)\"\n [attr.data-numeric]=\"c.numeric ? 'true' : null\"\n [attr.title]=\"cellTitle(row, c)\"\n [attr.data-pinned]=\"pinSide(c.key)\"\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\n [style.left]=\"pinLeft(c.key)\"\n [style.right]=\"pinRight(c.key)\"\n [style.box-shadow]=\"!selectable() && ci === 0 ? accentShadow(row, ri) : null\"\n >\n @if (c.render) {\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(row, ri, c)\" />\n } @else if (isBlank(cellValue(row, c))) {\n <span class=\"ius-table__muted\">\u2014</span>\n } @else {\n {{ cellValue(row, c) }}\n }\n </td>\n }\n </tr>\n }\n </tbody>\n }\n\n <!-- \u2500\u2500 footer resumen \u2500\u2500 -->\n @if (showSummary()) {\n <tfoot>\n <tr>\n @if (selectable()) {\n <td class=\"ius-table__selcell\"></td>\n }\n @for (c of cols(); track c.key) {\n <td [attr.data-align]=\"alignOf(c)\">\n @if (summaryCell(c.key); as cell) {\n @if (cell.template) {\n <ng-container *ngTemplateOutlet=\"cell.template; context: { $implicit: cell }\" />\n } @else {\n {{ cell.value }}\n }\n }\n </td>\n }\n </tr>\n </tfoot>\n }\n </table>\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;font-family:var(--ius-font-body);box-sizing:border-box;--_t-py: var(--ius-space-sm);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base);--_t-head-fs: var(--ius-fs-sm);--_t-head-lh: var(--ius-lh-sm);--_t-icon: var(--ius-icon-sm)}:host([data-size=small]){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}@container style(--ius-density: small){:host(:not([data-size])){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}}:host([data-size=large]){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-table-scroll{flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:auto}:host([data-bordered=true]) .ius-table-scroll{--_sb-track-margin: var(--ius-radius-lg);--_sb-track-margin-x: var(--ius-radius-lg)}.ius-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}.ius-table thead th{position:sticky;top:0;z-index:2;background:var(--ius-surface-card);color:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--_t-head-fs);line-height:var(--_t-head-lh);letter-spacing:.01em;text-align:left;vertical-align:middle;white-space:nowrap;padding:var(--_t-py) var(--_t-px);border-bottom:1px solid var(--ius-stroke-strong);box-sizing:border-box}:host([data-sticky-header=false]) thead th{position:relative}.ius-table thead th[data-align=end]{text-align:right}.ius-table thead th[data-align=center]{text-align:center}.ius-table__hcell{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%}.ius-table th[data-align=end] .ius-table__hcell{flex-direction:row-reverse}.ius-table th[data-align=center] .ius-table__hcell{justify-content:center}.ius-table__hlabel{overflow:hidden;text-overflow:ellipsis}.ius-table__sortbtn{appearance:none;border:0;background:transparent;margin:0;padding:0;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:inherit;color:inherit;cursor:pointer;max-width:100%;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-table__sortbtn:hover{color:var(--ius-text-primary)}.ius-table__sortbtn:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-table th[data-sorted=true] .ius-table__sortbtn{color:var(--ius-text-primary);font-weight:var(--ius-fw-bold)}.ius-table__sorticon{font-size:var(--_t-icon);line-height:1;flex:0 0 auto;opacity:1;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table__sortbtn .ius-table__sorticon{color:var(--ius-text-tertiary);opacity:.75}.ius-table__sortbtn:hover .ius-table__sorticon{opacity:1;color:var(--ius-text-secondary)}.ius-table th[data-sorted=true] .ius-table__sorticon{opacity:1;color:var(--ius-text-primary)}.ius-table__resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.ius-table__resizer:after{content:\"\";position:absolute;top:18%;bottom:18%;right:4px;width:2px;border-radius:var(--ius-radius-pill);background:transparent;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table thead th:hover .ius-table__resizer:after{background:var(--ius-stroke-strong)}.ius-table__resizer:hover:after{background:var(--ius-primary-500)}:host([data-resizing=true]) .ius-table__resizer:after{background:var(--ius-primary-500)}.ius-table tbody td{padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);color:var(--ius-text-primary);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);box-sizing:border-box}.ius-table tbody tr:last-child td{border-bottom:0}.ius-table td[data-align=end]{text-align:right}.ius-table td[data-align=center]{text-align:center}.ius-table td[data-numeric=true]{font-variant-numeric:tabular-nums}.ius-table__muted{color:var(--ius-text-tertiary)}:host([data-col-dividers=true]) thead th:not(:last-child),:host([data-col-dividers=true]) tbody td:not(:last-child),:host([data-col-dividers=true]) tfoot td:not(:last-child){border-right:1px solid var(--ius-neutral-3)}:host([data-striped=true]) tbody tr:nth-child(2n) td{background:var(--ius-neutral-1)}:host([data-hover=true]) tbody tr:hover td{box-shadow:inset 0 1px 0 0 var(--ius-info-200),inset 0 -1px 0 0 var(--ius-info-200)}:host([data-clickable=true]) tbody tr{cursor:pointer}:host([data-clickable=true]) tbody tr:active td{background:var(--ius-info-100)}.ius-table tbody tr:focus-visible{outline:none}.ius-table tbody tr:focus-visible td{box-shadow:inset 0 0 0 2px var(--ius-stroke-focus)}.ius-table thead th.ius-table__selcell,.ius-table tbody td.ius-table__selcell,.ius-table tfoot td.ius-table__selcell{text-align:center;overflow:visible;text-overflow:clip}.ius-table__selcell>*{vertical-align:middle}.ius-table th[data-pinned],.ius-table td[data-pinned]{position:sticky;z-index:1}.ius-table thead th[data-pinned]{z-index:3}.ius-table th[data-pinned=end],.ius-table td[data-pinned=end]{box-shadow:-1px 0 0 0 var(--ius-stroke)}:host([data-scrolled-x=true]) th[data-pinned=start][data-pinned-edge=true],:host([data-scrolled-x=true]) td[data-pinned=start][data-pinned-edge=true]{box-shadow:1px 0 0 0 var(--ius-stroke),5px 0 7px -5px var(--ius-stroke-strong)}.ius-table tfoot td{position:sticky;bottom:0;z-index:2;padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);background:var(--ius-neutral-1);border-top:1px solid var(--ius-stroke-strong);font-variant-numeric:tabular-nums;box-sizing:border-box;white-space:nowrap}.ius-table tfoot td[data-align=end]{text-align:right}.ius-table tfoot td[data-align=center]{text-align:center}.ius-table__block{padding:var(--ius-space-2xl) var(--ius-space-lg);display:grid;place-items:center;box-sizing:border-box}.ius-table[data-empty=true]{height:100%}.ius-table[data-empty=true]>tbody{height:100%}.ius-table[data-empty=true]>tbody>tr>td{height:100%}.ius-table[data-empty=true] .ius-table__block{min-height:100%}.ius-table__skel-row td{border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card)}.ius-table__skel{display:block;height:var(--_t-fs);border-radius:var(--ius-radius-sm);background:linear-gradient(90deg,var(--ius-neutral-2) 25%,var(--ius-neutral-3) 37%,var(--ius-neutral-2) 63%);background-size:400% 100%;animation:ius-table-shimmer 1.4s ease infinite}@keyframes ius-table-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ius-table__skel{animation:none}}\n"] }]
|
|
13757
|
+
}, template: "<!-- Encabezado de columna: \u00EDcono + label + control de orden (unfold_more siempre visible). -->\r\n<ng-template #hcell let-c>\r\n <span class=\"ius-table__hcell\">\r\n @if (c.headerIcon) {\r\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" style=\"opacity: 1\">{{ c.headerIcon }}</span>\r\n }\r\n <span class=\"ius-table__hlabel\">\r\n @if (c.headerTemplate) {\r\n <ng-container *ngTemplateOutlet=\"c.headerTemplate; context: headerContext(c)\" />\r\n } @else {\r\n {{ c.header }}\r\n }\r\n </span>\r\n @if (c.sortable) {\r\n <span translate=\"no\" class=\"ius-icon ius-table__sorticon\" aria-hidden=\"true\">{{ sortIcon(c.key) }}</span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<div\r\n #scroller\r\n class=\"ius-table-scroll ius-scroll\"\r\n [style.height]=\"px(height())\"\r\n [style.max-height]=\"px(maxHeight())\"\r\n (scroll)=\"onScroll()\"\r\n>\r\n <table\r\n #tabla\r\n class=\"ius-table\"\r\n role=\"table\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.data-empty]=\"isEmpty() ? 'true' : null\"\r\n [style.table-layout]=\"tableLayout()\"\r\n >\r\n <!-- \u2500\u2500 colgroup (anchos efectivos) \u2500\u2500 -->\r\n <colgroup>\r\n @if (selectable()) {\r\n <col [style.width]=\"selColWidth()\" />\r\n }\r\n @for (c of cols(); track c.key) {\r\n <col [style.width]=\"colWidth(c.key, c.width)\" />\r\n }\r\n </colgroup>\r\n\r\n <!-- \u2500\u2500 head \u2500\u2500 -->\r\n <thead>\r\n <tr>\r\n @if (selectable()) {\r\n <th\r\n class=\"ius-table__selcell\"\r\n [attr.data-pinned]=\"pinSide(selKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\r\n [style.left]=\"pinLeft(selKey)\"\r\n [style.right]=\"pinRight(selKey)\"\r\n >\r\n <ius-checkbox\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (checkedChange)=\"toggleAll($event)\"\r\n size=\"small\"\r\n ariaLabel=\"Seleccionar todo\"\r\n />\r\n </th>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <th\r\n [attr.data-key]=\"c.key\"\r\n [attr.data-align]=\"alignOf(c)\"\r\n [attr.data-sorted]=\"dirOf(c.key) ? 'true' : null\"\r\n [attr.aria-sort]=\"ariaSort(c.key)\"\r\n [attr.title]=\"c.headerTitle ?? null\"\r\n [attr.data-pinned]=\"pinSide(c.key)\"\r\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\r\n [style.left]=\"pinLeft(c.key)\"\r\n [style.right]=\"pinRight(c.key)\"\r\n >\r\n @if (c.sortable) {\r\n <button type=\"button\" class=\"ius-table__sortbtn\" (click)=\"onHeaderSort(c)\">\r\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\r\n </button>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"hcell; context: { $implicit: c }\" />\r\n }\r\n @if (canResize(c, ci)) {\r\n <span\r\n class=\"ius-table__resizer\"\r\n role=\"separator\"\r\n aria-orientation=\"vertical\"\r\n [attr.aria-label]=\"'Ajustar ancho de ' + (c.header || 'columna')\"\r\n (mousedown)=\"startResize($event, c)\"\r\n (click)=\"$event.stopPropagation()\"\r\n ></span>\r\n }\r\n </th>\r\n }\r\n </tr>\r\n </thead>\r\n\r\n <!-- \u2500\u2500 body \u2500\u2500 -->\r\n @if (loading()) {\r\n <tbody>\r\n @for (ri of skeletonIdx(); track ri) {\r\n <tr class=\"ius-table__skel-row\">\r\n @if (selectable()) {\r\n <td class=\"ius-table__selcell\">\r\n <span class=\"ius-table__skel\" style=\"width: 16px; margin: 0 auto\"></span>\r\n </td>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <td [attr.data-align]=\"alignOf(c)\">\r\n <span\r\n class=\"ius-table__skel\"\r\n [style.width]=\"skelWidth(c, ci)\"\r\n [style.margin-left]=\"alignOf(c) === 'end' ? 'auto' : '0'\"\r\n ></span>\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n } @else if (!data().length) {\r\n <tbody>\r\n <tr>\r\n <td [attr.colspan]=\"colCount()\" style=\"border-bottom: 0\">\r\n <div class=\"ius-table__block\">\r\n @if (emptyTemplate(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else {\r\n <ius-empty-state\r\n variant=\"no-results\"\r\n size=\"compact\"\r\n [title]=\"emptyTitle()\"\r\n [description]=\"emptyDescription()\"\r\n />\r\n }\r\n </div>\r\n </td>\r\n </tr>\r\n </tbody>\r\n } @else {\r\n <tbody>\r\n @for (row of data(); track rowKeyOf(row, $index); let ri = $index) {\r\n <tr\r\n [class]=\"rowClass(row, ri)\"\r\n [attr.data-selected]=\"isSelected(row, ri) ? 'true' : null\"\r\n [attr.tabindex]=\"isClickable(row, ri) ? 0 : null\"\r\n [style]=\"rowStyles(row, ri)\"\r\n (click)=\"onRowClick(row, ri, $event)\"\r\n (keydown)=\"onRowKeydown(row, ri, $event)\"\r\n >\r\n @if (selectable()) {\r\n <td\r\n class=\"ius-table__selcell\"\r\n [attr.data-pinned]=\"pinSide(selKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(selKey)\"\r\n [style.left]=\"pinLeft(selKey)\"\r\n [style.right]=\"pinRight(selKey)\"\r\n [style.box-shadow]=\"accentShadow(row, ri)\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ius-checkbox\r\n [checked]=\"isSelected(row, ri)\"\r\n (checkedChange)=\"toggleRow(rowKeyOf(row, ri), $event)\"\r\n size=\"small\"\r\n [disabled]=\"isDisabled(row, ri)\"\r\n [ariaLabel]=\"selectAriaLabel()\"\r\n />\r\n </td>\r\n }\r\n @for (c of cols(); track c.key; let ci = $index) {\r\n <td\r\n [attr.data-align]=\"alignOf(c)\"\r\n [attr.data-numeric]=\"c.numeric ? 'true' : null\"\r\n [attr.title]=\"cellTitle(row, c)\"\r\n [attr.data-pinned]=\"pinSide(c.key)\"\r\n [attr.data-pinned-edge]=\"pinEdge(c.key)\"\r\n [style.left]=\"pinLeft(c.key)\"\r\n [style.right]=\"pinRight(c.key)\"\r\n [style.box-shadow]=\"!selectable() && ci === 0 ? accentShadow(row, ri) : null\"\r\n >\r\n @if (c.render) {\r\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(row, ri, c)\" />\r\n } @else if (isBlank(cellValue(row, c))) {\r\n <span class=\"ius-table__muted\">\u2014</span>\r\n } @else {\r\n {{ cellValue(row, c) }}\r\n }\r\n </td>\r\n }\r\n </tr>\r\n }\r\n </tbody>\r\n }\r\n\r\n <!-- \u2500\u2500 footer resumen \u2500\u2500 -->\r\n @if (showSummary()) {\r\n <tfoot>\r\n <tr>\r\n @if (selectable()) {\r\n <td class=\"ius-table__selcell\"></td>\r\n }\r\n @for (c of cols(); track c.key) {\r\n <td [attr.data-align]=\"alignOf(c)\">\r\n @if (summaryCell(c.key); as cell) {\r\n @if (cell.template) {\r\n <ng-container *ngTemplateOutlet=\"cell.template; context: { $implicit: cell }\" />\r\n } @else {\r\n {{ cell.value }}\r\n }\r\n }\r\n </td>\r\n }\r\n </tr>\r\n </tfoot>\r\n }\r\n </table>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;font-family:var(--ius-font-body);box-sizing:border-box;--_t-py: var(--ius-space-sm);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base);--_t-head-fs: var(--ius-fs-sm);--_t-head-lh: var(--ius-lh-sm);--_t-icon: var(--ius-icon-sm)}:host([data-size=small]){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}@container style(--ius-density: small){:host(:not([data-size])){--_t-py: var(--ius-space-xs);--_t-px: var(--ius-space-sm);--_t-fs: var(--ius-fs-sm);--_t-lh: var(--ius-lh-sm)}}@container style(--ius-density: large){:host(:not([data-size])){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}}:host([data-size=large]){--_t-py: var(--ius-space-md);--_t-px: var(--ius-space-md);--_t-fs: var(--ius-fs-base);--_t-lh: var(--ius-lh-base)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}.ius-table-scroll{flex:1 1 auto;min-height:0;min-width:0;width:100%;overflow:auto}:host([data-bordered=true]) .ius-table-scroll{--_sb-track-margin: var(--ius-radius-lg);--_sb-track-margin-x: var(--ius-radius-lg)}.ius-table{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums}.ius-table thead th{position:sticky;top:0;z-index:2;background:var(--ius-surface-card);color:var(--ius-text-tertiary);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--_t-head-fs);line-height:var(--_t-head-lh);letter-spacing:.01em;text-align:left;vertical-align:middle;white-space:nowrap;padding:var(--_t-py) var(--_t-px);border-bottom:1px solid var(--ius-stroke-strong);box-sizing:border-box}:host([data-sticky-header=false]) thead th{position:relative}.ius-table thead th[data-align=end]{text-align:right}.ius-table thead th[data-align=center]{text-align:center}.ius-table__hcell{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%}.ius-table th[data-align=end] .ius-table__hcell{flex-direction:row-reverse}.ius-table th[data-align=center] .ius-table__hcell{justify-content:center}.ius-table__hlabel{overflow:hidden;text-overflow:ellipsis}.ius-table__sortbtn{appearance:none;border:0;background:transparent;margin:0;padding:0;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:inherit;color:inherit;cursor:pointer;max-width:100%;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none}.ius-table__sortbtn:hover{color:var(--ius-text-primary)}.ius-table__sortbtn:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-table th[data-sorted=true] .ius-table__sortbtn{color:var(--ius-text-primary);font-weight:var(--ius-fw-bold)}.ius-table__sorticon{font-size:var(--_t-icon);line-height:1;flex:0 0 auto;opacity:1;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table__sortbtn .ius-table__sorticon{color:var(--ius-text-tertiary);opacity:.75}.ius-table__sortbtn:hover .ius-table__sorticon{opacity:1;color:var(--ius-text-secondary)}.ius-table th[data-sorted=true] .ius-table__sorticon{opacity:1;color:var(--ius-text-primary)}.ius-table__resizer{position:absolute;top:0;right:-4px;width:9px;height:100%;cursor:col-resize;z-index:4;touch-action:none;-webkit-user-select:none;user-select:none}.ius-table__resizer:after{content:\"\";position:absolute;top:18%;bottom:18%;right:4px;width:2px;border-radius:var(--ius-radius-pill);background:transparent;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-table thead th:hover .ius-table__resizer:after{background:var(--ius-stroke-strong)}.ius-table__resizer:hover:after{background:var(--ius-primary-500)}:host([data-resizing=true]) .ius-table__resizer:after{background:var(--ius-primary-500)}.ius-table tbody td{padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);color:var(--ius-text-primary);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);box-sizing:border-box}.ius-table tbody tr:last-child td{border-bottom:0}.ius-table td[data-align=end]{text-align:right}.ius-table td[data-align=center]{text-align:center}.ius-table td[data-numeric=true]{font-variant-numeric:tabular-nums}.ius-table__muted{color:var(--ius-text-tertiary)}:host([data-col-dividers=true]) thead th:not(:last-child),:host([data-col-dividers=true]) tbody td:not(:last-child),:host([data-col-dividers=true]) tfoot td:not(:last-child){border-right:1px solid var(--ius-neutral-3)}:host([data-striped=true]) tbody tr:nth-child(2n) td{background:var(--ius-neutral-1)}:host([data-hover=true]) tbody tr:hover td{box-shadow:inset 0 1px 0 0 var(--ius-info-200),inset 0 -1px 0 0 var(--ius-info-200)}:host([data-clickable=true]) tbody tr{cursor:pointer}:host([data-clickable=true]) tbody tr:active td{background:var(--ius-info-100)}.ius-table tbody tr:focus-visible{outline:none}.ius-table tbody tr:focus-visible td{box-shadow:inset 0 0 0 2px var(--ius-stroke-focus)}.ius-table thead th.ius-table__selcell,.ius-table tbody td.ius-table__selcell,.ius-table tfoot td.ius-table__selcell{text-align:center;overflow:visible;text-overflow:clip}.ius-table__selcell>*{vertical-align:middle}.ius-table th[data-pinned],.ius-table td[data-pinned]{position:sticky;z-index:1}.ius-table thead th[data-pinned]{z-index:3}.ius-table th[data-pinned=end],.ius-table td[data-pinned=end]{box-shadow:-1px 0 0 0 var(--ius-stroke)}:host([data-scrolled-x=true]) th[data-pinned=start][data-pinned-edge=true],:host([data-scrolled-x=true]) td[data-pinned=start][data-pinned-edge=true]{box-shadow:1px 0 0 0 var(--ius-stroke),5px 0 7px -5px var(--ius-stroke-strong)}.ius-table tfoot td{position:sticky;bottom:0;z-index:2;padding:var(--_t-py) var(--_t-px);font-size:var(--_t-fs);line-height:var(--_t-lh);font-weight:var(--ius-fw-bold);color:var(--ius-text-primary);background:var(--ius-neutral-1);border-top:1px solid var(--ius-stroke-strong);font-variant-numeric:tabular-nums;box-sizing:border-box;white-space:nowrap}.ius-table tfoot td[data-align=end]{text-align:right}.ius-table tfoot td[data-align=center]{text-align:center}.ius-table__block{padding:var(--ius-space-2xl) var(--ius-space-lg);display:grid;place-items:center;box-sizing:border-box}.ius-table[data-empty=true]{height:100%}.ius-table[data-empty=true]>tbody{height:100%}.ius-table[data-empty=true]>tbody>tr>td{height:100%}.ius-table[data-empty=true] .ius-table__block{min-height:100%}.ius-table__skel-row td{border-bottom:1px solid var(--ius-neutral-3);background:var(--ius-surface-card)}.ius-table__skel{display:block;height:var(--_t-fs);border-radius:var(--ius-radius-sm);background:linear-gradient(90deg,var(--ius-neutral-2) 25%,var(--ius-neutral-3) 37%,var(--ius-neutral-2) 63%);background-size:400% 100%;animation:ius-table-shimmer 1.4s ease infinite}@keyframes ius-table-shimmer{0%{background-position:100% 50%}to{background-position:0 50%}}@media(prefers-reduced-motion:reduce){.ius-table__skel{animation:none}}\n"] }]
|
|
13758
13758
|
}], ctorParameters: () => [], propDecorators: { scrollRef: [{ type: i0.ViewChild, args: ['scroller', { isSignal: true }] }], tableRef: [{ type: i0.ViewChild, args: ['tabla', { isSignal: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], rowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowKey", required: false }] }], sortColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortColumn", required: false }] }], sortDirection: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDirection", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedKeys", required: false }] }], selectAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAriaLabel", required: false }] }], rowClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClickable", required: false }] }], isRowDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRowDisabled", required: false }] }], getRowAccent: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowAccent", required: false }] }], rowClassName: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowClassName", required: false }] }], rowStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowStyle", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], columnDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnDividers", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], skeletonRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "skeletonRows", 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 }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], hover: [{ type: i0.Input, args: [{ isSignal: true, alias: "hover", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], summary: [{ type: i0.Input, args: [{ isSignal: true, alias: "summary", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], sortChange: [{ type: i0.Output, args: ["sortChange"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }] } });
|
|
13759
13759
|
|
|
13760
|
+
/** Delta libre proyectado (anula el `delta` numérico): `<span iusStatDelta>…</span>`. */
|
|
13761
|
+
class IusStatDeltaDirective {
|
|
13762
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStatDeltaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13763
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusStatDeltaDirective, isStandalone: true, selector: "[iusStatDelta]", ngImport: i0 }); }
|
|
13764
|
+
}
|
|
13765
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStatDeltaDirective, decorators: [{
|
|
13766
|
+
type: Directive,
|
|
13767
|
+
args: [{ selector: '[iusStatDelta]', standalone: true }]
|
|
13768
|
+
}] });
|
|
13769
|
+
/** Sparkline / micrográfico proyectado bajo el valor: `<ius-sparkline iusStatSparkline />`. */
|
|
13770
|
+
class IusStatSparklineDirective {
|
|
13771
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStatSparklineDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
13772
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusStatSparklineDirective, isStandalone: true, selector: "[iusStatSparkline]", ngImport: i0 }); }
|
|
13773
|
+
}
|
|
13774
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusStatSparklineDirective, decorators: [{
|
|
13775
|
+
type: Directive,
|
|
13776
|
+
args: [{ selector: '[iusStatSparkline]', standalone: true }]
|
|
13777
|
+
}] });
|
|
13778
|
+
/**
|
|
13779
|
+
* Stat — Ius Design v2 (familia data-display).
|
|
13780
|
+
*
|
|
13781
|
+
* KPI / cifra destacada: eyebrow(+icon) · valor (tonal, numeración tabular) ·
|
|
13782
|
+
* delta (±flecha, `invertDelta`) · caption · sparkline. Es **solo contenido**
|
|
13783
|
+
* (sin caja): para tarjeta se envuelve en Card; para barra de varios →
|
|
13784
|
+
* `ius-stat-group`. Fuente de verdad: `Stat.jsx` + `Stat.d.ts` + `Stat.ng-spec.md`.
|
|
13785
|
+
*
|
|
13786
|
+
* No es para badge inline (Insignia), consumo de plan (PlanUsageItem) ni
|
|
13787
|
+
* estado (Tag).
|
|
13788
|
+
*
|
|
13789
|
+
* Interactivo: `interactive` (o `href`) vuelve el bloque navegable con el
|
|
13790
|
+
* patrón ARIA sobre el host (focusable, Enter/Espacio) y emite `clicked`;
|
|
13791
|
+
* con `href` la activación navega además a esa URL (el golden cambia la raíz
|
|
13792
|
+
* a `<a>`; aquí el host es único para no duplicar las proyecciones — mismo
|
|
13793
|
+
* criterio que Tag).
|
|
13794
|
+
*/
|
|
13795
|
+
class StatComponent {
|
|
13796
|
+
constructor() {
|
|
13797
|
+
/** Eyebrow en mayúsculas sobre la cifra. */
|
|
13798
|
+
this.label = input(/* @ts-ignore */
|
|
13799
|
+
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
13800
|
+
/** Ícono Material Symbols junto al rótulo. */
|
|
13801
|
+
this.labelIcon = input(/* @ts-ignore */
|
|
13802
|
+
...(ngDevMode ? [undefined, { debugName: "labelIcon" }] : /* istanbul ignore next */ []));
|
|
13803
|
+
/** Tono del ícono; si se omite hereda `valueTone` (o neutral). */
|
|
13804
|
+
this.iconTone = input(undefined, /* @ts-ignore */
|
|
13805
|
+
...(ngDevMode ? [{ debugName: "iconTone" }] : /* istanbul ignore next */ []));
|
|
13806
|
+
/** La cifra (alternativa a proyectar contenido). */
|
|
13807
|
+
this.value = input(/* @ts-ignore */
|
|
13808
|
+
...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
|
|
13809
|
+
/** Tono de la cifra: `default` = texto primario; otros tiñen (shade 700). */
|
|
13810
|
+
this.valueTone = input('default', /* @ts-ignore */
|
|
13811
|
+
...(ngDevMode ? [{ debugName: "valueTone" }] : /* istanbul ignore next */ []));
|
|
13812
|
+
/** Variación numérica: >0 flecha arriba, <0 abajo, 0 plano (`±N%`). */
|
|
13813
|
+
this.delta = input(undefined, /* @ts-ignore */
|
|
13814
|
+
...(ngDevMode ? [{ debugName: "delta" }] : /* istanbul ignore next */ []));
|
|
13815
|
+
/** Apoyo del delta («vs. mes anterior»). */
|
|
13816
|
+
this.deltaLabel = input(/* @ts-ignore */
|
|
13817
|
+
...(ngDevMode ? [undefined, { debugName: "deltaLabel" }] : /* istanbul ignore next */ []));
|
|
13818
|
+
/** Bajar es bueno: invierte el color (subir→danger, bajar→success). */
|
|
13819
|
+
this.invertDelta = input(false, { ...(ngDevMode ? { debugName: "invertDelta" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13820
|
+
/** Texto de apoyo bajo la cifra (multilínea). */
|
|
13821
|
+
this.caption = input(/* @ts-ignore */
|
|
13822
|
+
...(ngDevMode ? [undefined, { debugName: "caption" }] : /* istanbul ignore next */ []));
|
|
13823
|
+
/** Alineación del bloque. */
|
|
13824
|
+
this.align = input('start', /* @ts-ignore */
|
|
13825
|
+
...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
|
|
13826
|
+
/** Tamaño; sin fijar lo puede propagar `ius-stat-group`. */
|
|
13827
|
+
this.size = input(undefined, /* @ts-ignore */
|
|
13828
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13829
|
+
/** Navegable (cursor + foco + `clicked`). */
|
|
13830
|
+
this.interactive = input(false, { ...(ngDevMode ? { debugName: "interactive" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13831
|
+
/** URL destino; implica navegable (rol `link`). */
|
|
13832
|
+
this.href = input(/* @ts-ignore */
|
|
13833
|
+
...(ngDevMode ? [undefined, { debugName: "href" }] : /* istanbul ignore next */ []));
|
|
13834
|
+
/** Etiqueta accesible del bloque navegable. */
|
|
13835
|
+
this.ariaLabel = input(/* @ts-ignore */
|
|
13836
|
+
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
13837
|
+
/** Pulsación del bloque navegable (original `onClick`). */
|
|
13838
|
+
this.clicked = output();
|
|
13839
|
+
this.deltaSlot = contentChild(IusStatDeltaDirective, /* @ts-ignore */
|
|
13840
|
+
...(ngDevMode ? [{ debugName: "deltaSlot" }] : /* istanbul ignore next */ []));
|
|
13841
|
+
this.sparkSlot = contentChild(IusStatSparklineDirective, /* @ts-ignore */
|
|
13842
|
+
...(ngDevMode ? [{ debugName: "sparkSlot" }] : /* istanbul ignore next */ []));
|
|
13843
|
+
this.hasDeltaSlot = computed(() => !!this.deltaSlot(), /* @ts-ignore */
|
|
13844
|
+
...(ngDevMode ? [{ debugName: "hasDeltaSlot" }] : /* istanbul ignore next */ []));
|
|
13845
|
+
this.hasSparkline = computed(() => !!this.sparkSlot(), /* @ts-ignore */
|
|
13846
|
+
...(ngDevMode ? [{ debugName: "hasSparkline" }] : /* istanbul ignore next */ []));
|
|
13847
|
+
/** Tamaño propagado por el StatGroup contenedor (no pisa el explícito). */
|
|
13848
|
+
this.groupSize = signal(undefined, /* @ts-ignore */
|
|
13849
|
+
...(ngDevMode ? [{ debugName: "groupSize" }] : /* istanbul ignore next */ []));
|
|
13850
|
+
this.effSize = computed(() => this.size() ?? this.groupSize() ?? 'md', /* @ts-ignore */
|
|
13851
|
+
...(ngDevMode ? [{ debugName: "effSize" }] : /* istanbul ignore next */ []));
|
|
13852
|
+
this.navigable = computed(() => this.interactive() || !!this.href(), /* @ts-ignore */
|
|
13853
|
+
...(ngDevMode ? [{ debugName: "navigable" }] : /* istanbul ignore next */ []));
|
|
13854
|
+
/** Dirección del delta numérico. */
|
|
13855
|
+
this.deltaDir = computed(() => {
|
|
13856
|
+
const d = this.delta();
|
|
13857
|
+
if (d == null)
|
|
13858
|
+
return null;
|
|
13859
|
+
return d > 0 ? 'up' : d < 0 ? 'down' : 'flat';
|
|
13860
|
+
}, /* @ts-ignore */
|
|
13861
|
+
...(ngDevMode ? [{ debugName: "deltaDir" }] : /* istanbul ignore next */ []));
|
|
13862
|
+
this.deltaArrow = computed(() => {
|
|
13863
|
+
switch (this.deltaDir()) {
|
|
13864
|
+
case 'up': return 'arrow_upward';
|
|
13865
|
+
case 'down': return 'arrow_downward';
|
|
13866
|
+
default: return 'remove';
|
|
13867
|
+
}
|
|
13868
|
+
}, /* @ts-ignore */
|
|
13869
|
+
...(ngDevMode ? [{ debugName: "deltaArrow" }] : /* istanbul ignore next */ []));
|
|
13870
|
+
this.deltaText = computed(() => {
|
|
13871
|
+
const d = this.delta();
|
|
13872
|
+
if (d == null)
|
|
13873
|
+
return '';
|
|
13874
|
+
return (d > 0 ? '+' : '') + d + '%';
|
|
13875
|
+
}, /* @ts-ignore */
|
|
13876
|
+
...(ngDevMode ? [{ debugName: "deltaText" }] : /* istanbul ignore next */ []));
|
|
13877
|
+
/** Color de la cifra según el tono (mismo mapa que el golden). */
|
|
13878
|
+
this.valueColor = computed(() => toneColor(this.valueTone(), 'value'), /* @ts-ignore */
|
|
13879
|
+
...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
|
|
13880
|
+
/** Color del ícono del rótulo (hereda valueTone si no hay iconTone). */
|
|
13881
|
+
this.iconColor = computed(() => toneColor(this.iconTone() ?? this.valueTone(), 'icon'), /* @ts-ignore */
|
|
13882
|
+
...(ngDevMode ? [{ debugName: "iconColor" }] : /* istanbul ignore next */ []));
|
|
13883
|
+
}
|
|
13884
|
+
onClickHost(event) {
|
|
13885
|
+
if (!this.navigable())
|
|
13886
|
+
return;
|
|
13887
|
+
this.clicked.emit(event);
|
|
13888
|
+
const url = this.href();
|
|
13889
|
+
if (url && !event.defaultPrevented)
|
|
13890
|
+
window.location.assign(url);
|
|
13891
|
+
}
|
|
13892
|
+
/** Enter en keydown y Espacio en keyup (patrón WAI-ARIA button/link). */
|
|
13893
|
+
onKeyActivate(event) {
|
|
13894
|
+
if (!this.navigable())
|
|
13895
|
+
return;
|
|
13896
|
+
event.preventDefault();
|
|
13897
|
+
event.target.click();
|
|
13898
|
+
}
|
|
13899
|
+
/** Evita el scroll de la página al mantener Espacio. */
|
|
13900
|
+
onSpaceDown(event) {
|
|
13901
|
+
if (this.navigable())
|
|
13902
|
+
event.preventDefault();
|
|
13903
|
+
}
|
|
13904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13905
|
+
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 }], ngImport: i0, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas, con \u00EDcono opcional que toma el tono -->\n@if (label() != null) {\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 {{ label() }}\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 }\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 }\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) -->\n@if (caption() != null) {\n <span class=\"ius-stat__caption\">{{ caption() }}</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 }); }
|
|
13906
|
+
}
|
|
13907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, decorators: [{
|
|
13908
|
+
type: Component,
|
|
13909
|
+
args: [{ selector: 'ius-stat', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13910
|
+
class: 'ius-stat',
|
|
13911
|
+
'[attr.data-size]': 'effSize()',
|
|
13912
|
+
'[attr.data-align]': 'align()',
|
|
13913
|
+
'[attr.data-interactive]': 'navigable() || null',
|
|
13914
|
+
'[attr.role]': "navigable() ? (href() ? 'link' : 'button') : null",
|
|
13915
|
+
'[attr.tabindex]': 'navigable() ? 0 : null',
|
|
13916
|
+
'[attr.aria-label]': 'ariaLabel() || null',
|
|
13917
|
+
'(click)': 'onClickHost($event)',
|
|
13918
|
+
'(keydown.enter)': 'onKeyActivate($event)',
|
|
13919
|
+
'(keydown.space)': 'onSpaceDown($event)',
|
|
13920
|
+
'(keyup.space)': 'onKeyActivate($event)',
|
|
13921
|
+
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas, con \u00EDcono opcional que toma el tono -->\n@if (label() != null) {\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 {{ label() }}\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 }\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 }\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) -->\n@if (caption() != null) {\n <span class=\"ius-stat__caption\">{{ caption() }}</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"] }]
|
|
13922
|
+
}], 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 }] }] } });
|
|
13923
|
+
/** Mapa tono → color, idéntico a valueColor/iconColor del golden. */
|
|
13924
|
+
function toneColor(tone, kind) {
|
|
13925
|
+
if (!tone || tone === 'default') {
|
|
13926
|
+
return kind === 'value' ? 'var(--ius-text-primary)' : 'var(--ius-text-tertiary)';
|
|
13927
|
+
}
|
|
13928
|
+
if (tone === 'neutral') {
|
|
13929
|
+
return kind === 'value' ? 'var(--ius-neutral-8)' : 'var(--ius-neutral-7)';
|
|
13930
|
+
}
|
|
13931
|
+
if (tone === 'primary')
|
|
13932
|
+
return 'var(--ius-primary-900)';
|
|
13933
|
+
// semánticos + categóricos: 700 la cifra (legible sobre blanco), 600 el ícono
|
|
13934
|
+
return `var(--ius-${tone}-${kind === 'value' ? '700' : '600'})`;
|
|
13935
|
+
}
|
|
13936
|
+
|
|
13937
|
+
/**
|
|
13938
|
+
* StatGroup — Ius Design v2 (familia data-display).
|
|
13939
|
+
*
|
|
13940
|
+
* Barra de varios `ius-stat` en columnas iguales con divisores verticales y
|
|
13941
|
+
* superficie opcional (borde + radio). En ≤ bp sm (600) apila en columna y los
|
|
13942
|
+
* divisores pasan a horizontales. Propaga `size` a los Stat hijos que no lo
|
|
13943
|
+
* fijen. Fuente de verdad: `StatGroup.jsx` + `StatGroup.d.ts` +
|
|
13944
|
+
* `StatGroup.ng-spec.md`.
|
|
13945
|
+
*
|
|
13946
|
+
* Una sola métrica → `ius-stat` suelto; varias como tarjetas → varias Card con
|
|
13947
|
+
* Stat (no esto). Distinto de SegmentGroup (agrupa controles).
|
|
13948
|
+
*
|
|
13949
|
+
* El golden envuelve cada hijo en una celda; aquí los `ius-stat` proyectados
|
|
13950
|
+
* son las celdas del grid directamente (padding + divisor vía ng-deep acotado
|
|
13951
|
+
* al host — mismo criterio que SegmentGroup).
|
|
13952
|
+
*/
|
|
13953
|
+
class StatGroupComponent {
|
|
13954
|
+
constructor() {
|
|
13955
|
+
/** Columnas; sin fijar = nº de `ius-stat` proyectados. */
|
|
13956
|
+
this.columns = input(undefined, /* @ts-ignore */
|
|
13957
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
13958
|
+
/** Superficie + borde + radio (`false` = al ras). */
|
|
13959
|
+
this.bordered = input(true, { ...(ngDevMode ? { debugName: "bordered" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13960
|
+
/** Divisores entre columnas. */
|
|
13961
|
+
this.dividers = input(true, { ...(ngDevMode ? { debugName: "dividers" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
13962
|
+
/** Tamaño propagado a los Stat hijos sin `size` propio. */
|
|
13963
|
+
this.size = input('md', /* @ts-ignore */
|
|
13964
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
13965
|
+
this.stats = contentChildren(StatComponent, /* @ts-ignore */
|
|
13966
|
+
...(ngDevMode ? [{ debugName: "stats" }] : /* istanbul ignore next */ []));
|
|
13967
|
+
this.colsTemplate = computed(() => {
|
|
13968
|
+
const cols = this.columns() ?? (this.stats().length || 1);
|
|
13969
|
+
return `repeat(${cols}, minmax(0, 1fr))`;
|
|
13970
|
+
}, /* @ts-ignore */
|
|
13971
|
+
...(ngDevMode ? [{ debugName: "colsTemplate" }] : /* istanbul ignore next */ []));
|
|
13972
|
+
// Propaga el tamaño del grupo; el Stat lo usa solo si no tiene `size` explícito.
|
|
13973
|
+
effect(() => {
|
|
13974
|
+
const size = this.size();
|
|
13975
|
+
for (const stat of this.stats())
|
|
13976
|
+
stat.groupSize.set(size);
|
|
13977
|
+
});
|
|
13978
|
+
}
|
|
13979
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: StatGroupComponent, isStandalone: true, selector: "ius-stat-group", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, dividers: { classPropertyName: "dividers", publicName: "dividers", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, properties: { "attr.data-bordered": "bordered() ? 'true' : 'false'", "attr.data-dividers": "dividers() ? 'true' : 'false'", "style.--_sg-cols": "colsTemplate()" }, classAttribute: "ius-statgroup" }, queries: [{ propertyName: "stats", predicate: StatComponent, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:var(--_sg-cols, 1fr);min-width:0;box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg)}:host ::ng-deep ius-stat{padding:var(--ius-space-md) var(--ius-space-lg);min-width:0}:host([data-dividers=true]) ::ng-deep ius-stat:not(:first-child){border-left:1px solid var(--ius-neutral-3)}@media(max-width:600px){:host{grid-template-columns:1fr}:host([data-dividers=true]) ::ng-deep ius-stat:not(:first-child){border-left:0;border-top:1px solid var(--ius-neutral-3)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13981
|
+
}
|
|
13982
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatGroupComponent, decorators: [{
|
|
13983
|
+
type: Component,
|
|
13984
|
+
args: [{ selector: 'ius-stat-group', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
13985
|
+
class: 'ius-statgroup',
|
|
13986
|
+
role: 'group',
|
|
13987
|
+
'[attr.data-bordered]': "bordered() ? 'true' : 'false'",
|
|
13988
|
+
'[attr.data-dividers]': "dividers() ? 'true' : 'false'",
|
|
13989
|
+
'[style.--_sg-cols]': 'colsTemplate()',
|
|
13990
|
+
}, styles: ["@charset \"UTF-8\";:host{display:grid;grid-template-columns:var(--_sg-cols, 1fr);min-width:0;box-sizing:border-box;font-family:var(--ius-font-body)}:host([data-bordered=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg)}:host ::ng-deep ius-stat{padding:var(--ius-space-md) var(--ius-space-lg);min-width:0}:host([data-dividers=true]) ::ng-deep ius-stat:not(:first-child){border-left:1px solid var(--ius-neutral-3)}@media(max-width:600px){:host{grid-template-columns:1fr}:host([data-dividers=true]) ::ng-deep ius-stat:not(:first-child){border-left:0;border-top:1px solid var(--ius-neutral-3)}}\n"] }]
|
|
13991
|
+
}], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], dividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividers", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], stats: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => StatComponent), { isSignal: true }] }] } });
|
|
13992
|
+
|
|
13993
|
+
/** Alto por defecto de cada variante (px), como el golden. */
|
|
13994
|
+
const DEFAULT_H = {
|
|
13995
|
+
text: 14, rect: 120, circle: 40, button: 40, pill: 28, chart: 140,
|
|
13996
|
+
};
|
|
13997
|
+
/** Ancho por defecto de las variantes con ancho propio (px). */
|
|
13998
|
+
const DEFAULT_W = {
|
|
13999
|
+
circle: 40, button: 96, pill: 72,
|
|
14000
|
+
};
|
|
14001
|
+
/** Alturas relativas de las barras del chart (patrón estable, no aleatorio). */
|
|
14002
|
+
const CHART_BARS = ['52%', '78%', '40%', '96%', '64%', '84%', '48%'];
|
|
14003
|
+
const toCss = (v) => v == null ? undefined : typeof v === 'number' ? `${v}px` : v;
|
|
14004
|
+
/**
|
|
14005
|
+
* Skeleton — Ius Design v2 (familia feedback).
|
|
14006
|
+
*
|
|
14007
|
+
* Marcador de posición para la **primera carga** de un recurso (lista /
|
|
14008
|
+
* tarjeta / panel): reduce el salto de layout. 6 siluetas (`text` multilínea
|
|
14009
|
+
* con la última línea corta · `rect` · `circle` · `pill` · `button` · `chart`
|
|
14010
|
+
* de barras), animación shimmer/pulse/none con respeto a
|
|
14011
|
+
* `prefers-reduced-motion`, y modo envoltorio: `loading=false` renderiza el
|
|
14012
|
+
* contenido proyectado. Fuente de verdad: `Skeleton.jsx` + `Skeleton.d.ts` +
|
|
14013
|
+
* `Skeleton.ng-spec.md`.
|
|
14014
|
+
*
|
|
14015
|
+
* Patrón propio-vs-externo (Skeleton.prompt §Notas): loading PROPIO solo en
|
|
14016
|
+
* Table (`loading`+`skeletonRows`) y Charts; para todo lo demás se ENVUELVE
|
|
14017
|
+
* `<ius-skeleton [loading]>…</ius-skeleton>` — no dupliques skeletons dentro
|
|
14018
|
+
* de otros componentes.
|
|
14019
|
+
*
|
|
14020
|
+
* Espera puntual sin estructura → CircularProgress; progreso medible →
|
|
14021
|
+
* LinearProgressBar.
|
|
14022
|
+
*/
|
|
14023
|
+
class SkeletonComponent {
|
|
14024
|
+
constructor() {
|
|
14025
|
+
/** Silueta. */
|
|
14026
|
+
this.variant = input('text', /* @ts-ignore */
|
|
14027
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
14028
|
+
/** Ancho (px o CSS); circle/button/pill traen ancho propio. */
|
|
14029
|
+
this.width = input(undefined, /* @ts-ignore */
|
|
14030
|
+
...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
|
|
14031
|
+
/** Alto (px o CSS); por variante: text 14 · rect 120 · circle 40 · button 40. */
|
|
14032
|
+
this.height = input(undefined, /* @ts-ignore */
|
|
14033
|
+
...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
|
|
14034
|
+
/** Radio (px o CSS); por variante: text sm · rect md · button lg · circle/pill pill. */
|
|
14035
|
+
this.radius = input(undefined, /* @ts-ignore */
|
|
14036
|
+
...(ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []));
|
|
14037
|
+
/** Solo `text`: nº de líneas; con >1 la última es más corta. */
|
|
14038
|
+
this.lines = input(1, { ...(ngDevMode ? { debugName: "lines" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14039
|
+
/** Ancho de la última línea del `text` multilínea. */
|
|
14040
|
+
this.lastLineWidth = input('62%', /* @ts-ignore */
|
|
14041
|
+
...(ngDevMode ? [{ debugName: "lastLineWidth" }] : /* istanbul ignore next */ []));
|
|
14042
|
+
/** Solo `chart`: nº de barras. */
|
|
14043
|
+
this.bars = input(6, { ...(ngDevMode ? { debugName: "bars" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14044
|
+
/** Separación entre líneas/barras (px o CSS). */
|
|
14045
|
+
this.gap = input('var(--ius-space-xs)', /* @ts-ignore */
|
|
14046
|
+
...(ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []));
|
|
14047
|
+
/** Animación. */
|
|
14048
|
+
this.animation = input('shimmer', /* @ts-ignore */
|
|
14049
|
+
...(ngDevMode ? [{ debugName: "animation" }] : /* istanbul ignore next */ []));
|
|
14050
|
+
/** `true` = esqueleto; `false` = renderiza el contenido proyectado. */
|
|
14051
|
+
this.loading = input(true, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14052
|
+
/** Etiqueta accesible del estado de carga. */
|
|
14053
|
+
this.ariaLabel = input('Cargando', /* @ts-ignore */
|
|
14054
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
14055
|
+
this.anim = computed(() => this.animation() === 'none' ? null : this.animation(), /* @ts-ignore */
|
|
14056
|
+
...(ngDevMode ? [{ debugName: "anim" }] : /* istanbul ignore next */ []));
|
|
14057
|
+
this.gapCss = computed(() => toCss(this.gap()), /* @ts-ignore */
|
|
14058
|
+
...(ngDevMode ? [{ debugName: "gapCss" }] : /* istanbul ignore next */ []));
|
|
14059
|
+
this.radiusCss = computed(() => toCss(this.radius()), /* @ts-ignore */
|
|
14060
|
+
...(ngDevMode ? [{ debugName: "radiusCss" }] : /* istanbul ignore next */ []));
|
|
14061
|
+
this.widthCss = computed(() => toCss(this.width() ?? DEFAULT_W[this.variant()] ?? '100%'), /* @ts-ignore */
|
|
14062
|
+
...(ngDevMode ? [{ debugName: "widthCss" }] : /* istanbul ignore next */ []));
|
|
14063
|
+
this.heightCss = computed(() => toCss(this.height() ?? DEFAULT_H[this.variant()]), /* @ts-ignore */
|
|
14064
|
+
...(ngDevMode ? [{ debugName: "heightCss" }] : /* istanbul ignore next */ []));
|
|
14065
|
+
/** Líneas del `text` multilínea: ancho por línea (la última corta). */
|
|
14066
|
+
this.textLines = computed(() => {
|
|
14067
|
+
const n = Math.max(1, this.lines());
|
|
14068
|
+
return Array.from({ length: n }, (_, i) => i === n - 1 && n > 1 ? toCss(this.lastLineWidth()) : this.widthCss());
|
|
14069
|
+
}, /* @ts-ignore */
|
|
14070
|
+
...(ngDevMode ? [{ debugName: "textLines" }] : /* istanbul ignore next */ []));
|
|
14071
|
+
/** Barras del `chart`: altura relativa por barra (patrón estable). */
|
|
14072
|
+
this.chartBars = computed(() => {
|
|
14073
|
+
const n = Math.max(2, this.bars());
|
|
14074
|
+
return Array.from({ length: n }, (_, i) => CHART_BARS[i % CHART_BARS.length]);
|
|
14075
|
+
}, /* @ts-ignore */
|
|
14076
|
+
...(ngDevMode ? [{ debugName: "chartBars" }] : /* istanbul ignore next */ []));
|
|
14077
|
+
this.chartHeightCss = computed(() => toCss(this.height() ?? DEFAULT_H.chart), /* @ts-ignore */
|
|
14078
|
+
...(ngDevMode ? [{ debugName: "chartHeightCss" }] : /* istanbul ignore next */ []));
|
|
14079
|
+
this.chartWidthCss = computed(() => toCss(this.width() ?? '100%'), /* @ts-ignore */
|
|
14080
|
+
...(ngDevMode ? [{ debugName: "chartWidthCss" }] : /* istanbul ignore next */ []));
|
|
14081
|
+
}
|
|
14082
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14083
|
+
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 }); }
|
|
14084
|
+
}
|
|
14085
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
14086
|
+
type: Component,
|
|
14087
|
+
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"] }]
|
|
14088
|
+
}], 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 }] }] } });
|
|
14089
|
+
|
|
14090
|
+
/** Breadcrumb proyectado (solo detalle): `<ius-breadcrumb iusPageHeaderBreadcrumb />`. */
|
|
14091
|
+
class IusPageHeaderBreadcrumbDirective {
|
|
14092
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderBreadcrumbDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14093
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusPageHeaderBreadcrumbDirective, isStandalone: true, selector: "[iusPageHeaderBreadcrumb]", ngImport: i0 }); }
|
|
14094
|
+
}
|
|
14095
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderBreadcrumbDirective, decorators: [{
|
|
14096
|
+
type: Directive,
|
|
14097
|
+
args: [{ selector: '[iusPageHeaderBreadcrumb]', standalone: true }]
|
|
14098
|
+
}] });
|
|
14099
|
+
/** Acciones a la derecha (Button/Dropdown): `<div iusPageHeaderActions>…</div>`. */
|
|
14100
|
+
class IusPageHeaderActionsDirective {
|
|
14101
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderActionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14102
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusPageHeaderActionsDirective, isStandalone: true, selector: "[iusPageHeaderActions]", ngImport: i0 }); }
|
|
14103
|
+
}
|
|
14104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderActionsDirective, decorators: [{
|
|
14105
|
+
type: Directive,
|
|
14106
|
+
args: [{ selector: '[iusPageHeaderActions]', standalone: true }]
|
|
14107
|
+
}] });
|
|
14108
|
+
/** Fila de herramientas (SearchBar + QueryBuilder + SegmentedControl): `<div iusPageHeaderToolbar>…</div>`. */
|
|
14109
|
+
class IusPageHeaderToolbarDirective {
|
|
14110
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderToolbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14111
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusPageHeaderToolbarDirective, isStandalone: true, selector: "[iusPageHeaderToolbar]", ngImport: i0 }); }
|
|
14112
|
+
}
|
|
14113
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusPageHeaderToolbarDirective, decorators: [{
|
|
14114
|
+
type: Directive,
|
|
14115
|
+
args: [{ selector: '[iusPageHeaderToolbar]', standalone: true }]
|
|
14116
|
+
}] });
|
|
14117
|
+
/**
|
|
14118
|
+
* PageHeader — Ius Design v2 (familia navigation).
|
|
14119
|
+
*
|
|
14120
|
+
* Encabezado **de la vista** dentro del `main`: [breadcrumb/volver] ·
|
|
14121
|
+
* overline · título (h1/h2/h3) + subtítulo · acciones · [toolbar] ·
|
|
14122
|
+
* [divider/surface]. Cáscara por slots: no conoce datos. Fuente de verdad:
|
|
14123
|
+
* `PageHeader.jsx` + `PageHeader.d.ts` + `PageHeader.ng-spec.md`.
|
|
14124
|
+
*
|
|
14125
|
+
* No reemplaza al HeaderBar global (identidad de módulo) ni a la cabecera de
|
|
14126
|
+
* lista (ListView). El módulo va en HeaderBar; aquí solo el título de la vista.
|
|
14127
|
+
*
|
|
14128
|
+
* Volver: el golden lo activa con `onBack`; aquí es `showBack` + output
|
|
14129
|
+
* `back` (un output de Angular no delata suscripción). Es leading: con
|
|
14130
|
+
* breadcrumb encabeza esa fila; sin breadcrumb, encabeza el título.
|
|
14131
|
+
*/
|
|
14132
|
+
class PageHeaderComponent {
|
|
14133
|
+
constructor() {
|
|
14134
|
+
/** Título de la vista. */
|
|
14135
|
+
this.title = input(/* @ts-ignore */
|
|
14136
|
+
...(ngDevMode ? [undefined, { debugName: "title" }] : /* istanbul ignore next */ []));
|
|
14137
|
+
/** Contador / descripción bajo el título. */
|
|
14138
|
+
this.subtitle = input(/* @ts-ignore */
|
|
14139
|
+
...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
14140
|
+
/** Categoría / sección sobre el título (mayúsculas). */
|
|
14141
|
+
this.overline = input(/* @ts-ignore */
|
|
14142
|
+
...(ngDevMode ? [undefined, { debugName: "overline" }] : /* istanbul ignore next */ []));
|
|
14143
|
+
/** Nivel tipográfico del título. */
|
|
14144
|
+
this.titleLevel = input('h3', /* @ts-ignore */
|
|
14145
|
+
...(ngDevMode ? [{ debugName: "titleLevel" }] : /* istanbul ignore next */ []));
|
|
14146
|
+
/** Muestra la flecha de volver (leading). */
|
|
14147
|
+
this.showBack = input(false, { ...(ngDevMode ? { debugName: "showBack" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14148
|
+
/** Texto accesible de la flecha de volver. */
|
|
14149
|
+
this.backLabel = input('Volver', /* @ts-ignore */
|
|
14150
|
+
...(ngDevMode ? [{ debugName: "backLabel" }] : /* istanbul ignore next */ []));
|
|
14151
|
+
/** Separador inferior. */
|
|
14152
|
+
this.divider = input(false, { ...(ngDevMode ? { debugName: "divider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14153
|
+
/** Fondo blanco + borde + radio. */
|
|
14154
|
+
this.surface = input(false, { ...(ngDevMode ? { debugName: "surface" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14155
|
+
/** Flecha de volver pulsada (original `onBack`). */
|
|
14156
|
+
this.back = output();
|
|
14157
|
+
this.breadcrumbRef = contentChild(IusPageHeaderBreadcrumbDirective, /* @ts-ignore */
|
|
14158
|
+
...(ngDevMode ? [{ debugName: "breadcrumbRef" }] : /* istanbul ignore next */ []));
|
|
14159
|
+
this.actionsRef = contentChild(IusPageHeaderActionsDirective, /* @ts-ignore */
|
|
14160
|
+
...(ngDevMode ? [{ debugName: "actionsRef" }] : /* istanbul ignore next */ []));
|
|
14161
|
+
this.toolbarRef = contentChild(IusPageHeaderToolbarDirective, /* @ts-ignore */
|
|
14162
|
+
...(ngDevMode ? [{ debugName: "toolbarRef" }] : /* istanbul ignore next */ []));
|
|
14163
|
+
this.hasBreadcrumb = computed(() => !!this.breadcrumbRef(), /* @ts-ignore */
|
|
14164
|
+
...(ngDevMode ? [{ debugName: "hasBreadcrumb" }] : /* istanbul ignore next */ []));
|
|
14165
|
+
this.hasActions = computed(() => !!this.actionsRef(), /* @ts-ignore */
|
|
14166
|
+
...(ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []));
|
|
14167
|
+
this.hasToolbar = computed(() => !!this.toolbarRef(), /* @ts-ignore */
|
|
14168
|
+
...(ngDevMode ? [{ debugName: "hasToolbar" }] : /* istanbul ignore next */ []));
|
|
14169
|
+
/** Volver es leading: si hay breadcrumb, encabeza esa fila. */
|
|
14170
|
+
this.backInBreadcrumb = computed(() => this.showBack() && this.hasBreadcrumb(), /* @ts-ignore */
|
|
14171
|
+
...(ngDevMode ? [{ debugName: "backInBreadcrumb" }] : /* istanbul ignore next */ []));
|
|
14172
|
+
}
|
|
14173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14174
|
+
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 }], 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 @if (overline() != null) {\n <span class=\"ius-pageheader__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">{{ title() }}</h1>\n }\n @if (subtitle() != null) {\n <p class=\"ius-pageheader__subtitle\">{{ subtitle() }}</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 }); }
|
|
14175
|
+
}
|
|
14176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
14177
|
+
type: Component,
|
|
14178
|
+
args: [{ selector: 'ius-page-header', standalone: true, imports: [IconButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14179
|
+
class: 'ius-pageheader',
|
|
14180
|
+
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
14181
|
+
'[attr.data-surface]': "surface() ? 'true' : null",
|
|
14182
|
+
}, 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 @if (overline() != null) {\n <span class=\"ius-pageheader__overline\">{{ overline() }}</span>\n }\n @if (title() != null) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">{{ title() }}</h1>\n }\n @if (subtitle() != null) {\n <p class=\"ius-pageheader__subtitle\">{{ subtitle() }}</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"] }]
|
|
14183
|
+
}], 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 }] }] } });
|
|
14184
|
+
|
|
13760
14185
|
/*
|
|
13761
14186
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
13762
14187
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -13768,5 +14193,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13768
14193
|
* Generated bundle index. Do not edit.
|
|
13769
14194
|
*/
|
|
13770
14195
|
|
|
13771
|
-
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SplitterComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
14196
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStatDeltaDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SplitterComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
13772
14197
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|