@litigiovirtual/ius-design-components 2.1.17 → 2.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -531,7 +531,7 @@ class EleniaOrbComponent {
|
|
|
531
531
|
});
|
|
532
532
|
}
|
|
533
533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EleniaOrbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
534
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "22.0.5", type: EleniaOrbComponent, isStandalone: true, selector: "ius-elenia-orb", inputs: { size: ["size", "size", numberAttribute], mood: "mood", surface: "surface", paused: ["paused", "paused", booleanAttribute], ariaLabel: "ariaLabel" }, host: { attributes: { "role": "img" }, properties: { "attr.aria-label": "ariaLabel", "attr.data-state": "mood", "attr.data-surface": "surface", "attr.data-paused": "paused ? 'true' : null", "style.width.px": "size", "style.height.px": "size", "style.--_orb": "size + 'px'" } }, viewQueries: [{ propertyName: "cubeGroup", first: true, predicate: ["cubeGroup"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<span class=\"ius-orb__sphere\">\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 }); }
|
|
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\">\r\n <span class=\"ius-orb__flow\">\r\n <span class=\"ius-orb__blob b1\"></span>\r\n <span class=\"ius-orb__blob b2\"></span>\r\n <span class=\"ius-orb__blob b3\"></span>\r\n <span class=\"ius-orb__blob b4\"></span>\r\n </span>\r\n <span class=\"ius-orb__cube\">\r\n <svg viewBox=\"-1.6 -1.6 3.2 3.2\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\r\n <g class=\"cube-g\" #cubeGroup></g>\r\n </svg>\r\n </span>\r\n <span class=\"ius-orb__spec\"></span>\r\n</span>\r\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\">\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"] }]
|
|
547
|
+
}, template: "<span class=\"ius-orb__sphere\">\r\n <span class=\"ius-orb__flow\">\r\n <span class=\"ius-orb__blob b1\"></span>\r\n <span class=\"ius-orb__blob b2\"></span>\r\n <span class=\"ius-orb__blob b3\"></span>\r\n <span class=\"ius-orb__blob b4\"></span>\r\n </span>\r\n <span class=\"ius-orb__cube\">\r\n <svg viewBox=\"-1.6 -1.6 3.2 3.2\" preserveAspectRatio=\"xMidYMid meet\" aria-hidden=\"true\">\r\n <g class=\"cube-g\" #cubeGroup></g>\r\n </svg>\r\n </span>\r\n <span class=\"ius-orb__spec\"></span>\r\n</span>\r\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\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 }); }
|
|
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\r\n variant=\"secondary\"\r\n [size]=\"size\"\r\n [fullWidth]=\"fullWidth\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [ariaLabel]=\"effectiveAriaLabel\"\r\n (clicked)=\"clicked.emit($event)\"\r\n>\r\n <span class=\"ius-oauth__content\">\r\n <span class=\"ius-oauth__logo\" aria-hidden=\"true\">\r\n <!-- Logos de marca oficiales (multicolor) \u2014 excepci\u00F3n documentada:\r\n no tokenizar ni recolorear (ng-spec \u00A75). Paths verbatim del golden. -->\r\n @switch (provider) {\r\n @case ('microsoft') {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\n <path d=\"M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z\" fill=\"#F35325\" />\r\n <path d=\"M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z\" fill=\"#81BC06\" />\r\n <path d=\"M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z\" fill=\"#05A6F0\" />\r\n <path d=\"M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z\" fill=\"#FFBA08\" />\r\n </svg>\r\n }\r\n @case ('linkedin') {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\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\" />\r\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\" />\r\n </svg>\r\n }\r\n @default {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\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\" />\r\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\" />\r\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\" />\r\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\" />\r\n </svg>\r\n }\r\n }\r\n </span>\r\n <span class=\"ius-oauth__label\">{{ text }}</span>\r\n </span>\r\n</ius-button>\r\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\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"] }]
|
|
710
|
+
}, template: "<ius-button\r\n variant=\"secondary\"\r\n [size]=\"size\"\r\n [fullWidth]=\"fullWidth\"\r\n [disabled]=\"disabled\"\r\n [type]=\"type\"\r\n [ariaLabel]=\"effectiveAriaLabel\"\r\n (clicked)=\"clicked.emit($event)\"\r\n>\r\n <span class=\"ius-oauth__content\">\r\n <span class=\"ius-oauth__logo\" aria-hidden=\"true\">\r\n <!-- Logos de marca oficiales (multicolor) \u2014 excepci\u00F3n documentada:\r\n no tokenizar ni recolorear (ng-spec \u00A75). Paths verbatim del golden. -->\r\n @switch (provider) {\r\n @case ('microsoft') {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\n <path d=\"M0.869568 0.869507H9.56522V9.56516H0.869568V0.869507Z\" fill=\"#F35325\" />\r\n <path d=\"M10.4348 0.869507H19.1304V9.56516H10.4348V0.869507Z\" fill=\"#81BC06\" />\r\n <path d=\"M0.869568 10.4348H9.56522V19.1305H0.869568V10.4348Z\" fill=\"#05A6F0\" />\r\n <path d=\"M10.4348 10.4348H19.1304V19.1305H10.4348V10.4348Z\" fill=\"#FFBA08\" />\r\n </svg>\r\n }\r\n @case ('linkedin') {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\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\" />\r\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\" />\r\n </svg>\r\n }\r\n @default {\r\n <svg viewBox=\"0 0 20 20\" focusable=\"false\">\r\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\" />\r\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\" />\r\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\" />\r\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\" />\r\n </svg>\r\n }\r\n }\r\n </span>\r\n <span class=\"ius-oauth__label\">{{ text }}</span>\r\n </span>\r\n</ius-button>\r\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. -->\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 }); }
|
|
1030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PopoverComponent, isStandalone: true, selector: "ius-popover", inputs: { title: "title", content: "content", placement: "placement", trigger: "trigger", offset: ["offset", "offset", numberAttribute], open: "open", defaultOpen: ["defaultOpen", "defaultOpen", booleanAttribute], showArrow: ["showArrow", "showArrow", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], anchorRect: "anchorRect", padding: "padding", dismissable: ["dismissable", "dismissable", booleanAttribute], panelClass: "panelClass" }, outputs: { openChange: "openChange" }, host: { listeners: { "mouseenter": "onHostMouseEnter()", "mouseleave": "onHostMouseLeave()", "focusin": "onHostFocusIn()", "focusout": "onHostFocusOut()", "click": "onHostClick()" } }, viewQueries: [{ propertyName: "panelTpl", first: true, predicate: ["panelTpl"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}.ius-popover.ius-dropdown-pop{padding:var(--ius-space-xxs)}.ius-popover.ius-querybuilder-pop{max-width:none;width:min(720px,100vw - var(--ius-space-2xl));padding:var(--ius-space-md)}.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. -->\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"] }]
|
|
1040
|
+
}, template: "<!-- Trigger (children del golden). El host es el ancla .ius-popover-anchor. -->\r\n<ng-content />\r\n\r\n<!-- Panel flotante \u2014 se estampa en el overlay del CDK v\u00EDa TemplatePortal. -->\r\n<ng-template #panelTpl>\r\n <div\r\n class=\"ius-popover\"\r\n [class]=\"panelClass ?? ''\"\r\n role=\"tooltip\"\r\n [attr.data-side]=\"side()\"\r\n [attr.data-padding]=\"padding\"\r\n >\r\n @if (title != null) {\r\n <div class=\"ius-popover__title\">{{ title }}</div>\r\n }\r\n <div class=\"ius-popover__content\">\r\n @if (content != null) {\r\n {{ content }}\r\n } @else {\r\n <ng-content select=\"[iusPopoverContent]\" />\r\n }\r\n </div>\r\n @if (showArrow) {\r\n <span\r\n class=\"ius-popover__arrow\"\r\n [style.left]=\"arrowLeft()\"\r\n [style.top]=\"arrowTop()\"\r\n aria-hidden=\"true\"\r\n ></span>\r\n }\r\n </div>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-popover{width:max-content;max-width:280px;min-width:140px;position:relative;background:var(--ius-neutral-white);color:var(--ius-text-primary);border-radius:var(--ius-radius-lg);padding:var(--ius-space-sm) var(--ius-space-md);font-family:var(--ius-font-body);filter:drop-shadow(0 6px 18px rgba(0,0,0,.12)) drop-shadow(0 2px 6px rgba(0,0,0,.06));animation:ius-popover-in .12s var(--ius-ease-decelerate, cubic-bezier(0, 0, .2, 1));pointer-events:auto}@keyframes ius-popover-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}.ius-popover__title{font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);margin-bottom:var(--ius-space-xxs)}.ius-popover__content{font-weight:var(--ius-fw-regular);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:.02em;color:var(--ius-text-primary)}.ius-popover__arrow{position:absolute;width:12px;height:12px;background:var(--ius-neutral-white);transform:rotate(45deg)}.ius-popover[data-side=top] .ius-popover__arrow{bottom:-5px}.ius-popover[data-side=bottom] .ius-popover__arrow{top:-5px}.ius-popover[data-side=left] .ius-popover__arrow{right:-5px}.ius-popover[data-side=right] .ius-popover__arrow{left:-5px}.ius-popover[data-padding=compact]{padding:var(--ius-space-xs)}.ius-popover[data-padding=none]{padding:0}.ius-popover.ius-tooltip{min-width:0;max-width:240px;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__arrow{background:var(--ius-text-primary)}.ius-popover.ius-tooltip .ius-popover__content{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:normal;text-wrap:balance;color:var(--ius-neutral-white)}.ius-popover.ius-dropdown-pop{padding:var(--ius-space-xxs)}.ius-popover.ius-querybuilder-pop{max-width:none;width:min(720px,100vw - var(--ius-space-2xl));padding:var(--ius-space-md)}.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) {\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 }); }
|
|
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) {\r\n <ius-text-button\r\n [size]=\"size\"\r\n [label]=\"label\"\r\n [sufixIcon]=\"expanded ? 'expand_less' : 'expand_more'\"\r\n [ariaExpanded]=\"expanded\"\r\n [ariaControls]=\"ariaControls\"\r\n (clicked)=\"toggle.emit($event)\"\r\n />\r\n}\r\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) {\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"] }]
|
|
1205
|
+
}, template: "@if (!hidden) {\r\n <ius-text-button\r\n [size]=\"size\"\r\n [label]=\"label\"\r\n [sufixIcon]=\"expanded ? 'expand_less' : 'expand_more'\"\r\n [ariaExpanded]=\"expanded\"\r\n [ariaControls]=\"ariaControls\"\r\n (clicked)=\"toggle.emit($event)\"\r\n />\r\n}\r\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\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 }); }
|
|
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\r\n panelClass=\"ius-tooltip\"\r\n [content]=\"label\"\r\n [placement]=\"placement\"\r\n [trigger]=\"trigger\"\r\n [offset]=\"offset\"\r\n [showArrow]=\"showArrow\"\r\n [disabled]=\"effectiveDisabled\"\r\n [open]=\"open\"\r\n [defaultOpen]=\"defaultOpen\"\r\n (openChange)=\"openChange.emit($event)\"\r\n>\r\n <ng-content />\r\n</ius-popover>\r\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\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"] }]
|
|
1267
|
+
args: [{ selector: 'ius-tooltip', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-popover\r\n panelClass=\"ius-tooltip\"\r\n [content]=\"label\"\r\n [placement]=\"placement\"\r\n [trigger]=\"trigger\"\r\n [offset]=\"offset\"\r\n [showArrow]=\"showArrow\"\r\n [disabled]=\"effectiveDisabled\"\r\n [open]=\"open\"\r\n [defaultOpen]=\"defaultOpen\"\r\n (openChange)=\"openChange.emit($event)\"\r\n>\r\n <ng-content />\r\n</ius-popover>\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}\n"] }]
|
|
1268
1268
|
}], propDecorators: { label: [{
|
|
1269
1269
|
type: Input
|
|
1270
1270
|
}], placement: [{
|
|
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1289
1289
|
type: Output
|
|
1290
1290
|
}] } });
|
|
1291
1291
|
|
|
1292
|
-
let uid$
|
|
1292
|
+
let uid$f = 0;
|
|
1293
1293
|
/**
|
|
1294
1294
|
* TextField — Ius Design v2.
|
|
1295
1295
|
*
|
|
@@ -1328,7 +1328,7 @@ class TextFieldComponent {
|
|
|
1328
1328
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1329
1329
|
this.revealed = signal(false, /* @ts-ignore */
|
|
1330
1330
|
...(ngDevMode ? [{ debugName: "revealed" }] : /* istanbul ignore next */ []));
|
|
1331
|
-
this.inputId = `ius-tf-${uid$
|
|
1331
|
+
this.inputId = `ius-tf-${uid$f++}`;
|
|
1332
1332
|
this.helpId = `${this.inputId}-help`;
|
|
1333
1333
|
this.onChange = () => { };
|
|
1334
1334
|
this.onTouched = () => { };
|
|
@@ -1469,7 +1469,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1469
1469
|
type: Output
|
|
1470
1470
|
}] } });
|
|
1471
1471
|
|
|
1472
|
-
let uid$
|
|
1472
|
+
let uid$e = 0;
|
|
1473
1473
|
/** Reparte una cadena en `length` casillas (1 carácter por casilla). */
|
|
1474
1474
|
function toChars(str, length) {
|
|
1475
1475
|
const out = new Array(length).fill('');
|
|
@@ -1529,7 +1529,7 @@ class CodeFieldComponent {
|
|
|
1529
1529
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
1530
1530
|
this.indexes = computed(() => this.chars().map((_, i) => i), /* @ts-ignore */
|
|
1531
1531
|
...(ngDevMode ? [{ debugName: "indexes" }] : /* istanbul ignore next */ []));
|
|
1532
|
-
this.baseId = `ius-cf-${uid$
|
|
1532
|
+
this.baseId = `ius-cf-${uid$e++}`;
|
|
1533
1533
|
this.cellRefs = viewChildren('cell', /* @ts-ignore */
|
|
1534
1534
|
...(ngDevMode ? [{ debugName: "cellRefs" }] : /* istanbul ignore next */ []));
|
|
1535
1535
|
this.onChange = () => { };
|
|
@@ -2420,7 +2420,7 @@ const SIZE_MAP = {
|
|
|
2420
2420
|
medium: 96,
|
|
2421
2421
|
large: 140,
|
|
2422
2422
|
};
|
|
2423
|
-
let uid$
|
|
2423
|
+
let uid$d = 0;
|
|
2424
2424
|
/**
|
|
2425
2425
|
* Illustration — Ius Design v2 (familia feedback).
|
|
2426
2426
|
*
|
|
@@ -2445,7 +2445,7 @@ class IllustrationComponent {
|
|
|
2445
2445
|
constructor() {
|
|
2446
2446
|
this.sanitizer = inject(DomSanitizer);
|
|
2447
2447
|
/** ID único por instancia, para el sufijo de gradientes. */
|
|
2448
|
-
this.instanceId = `i${uid$
|
|
2448
|
+
this.instanceId = `i${uid$d++}`;
|
|
2449
2449
|
this._size = 'medium';
|
|
2450
2450
|
this.viewBox = '0 0 110 110';
|
|
2451
2451
|
this.safeInner = '';
|
|
@@ -2504,7 +2504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
2504
2504
|
type: Input
|
|
2505
2505
|
}] } });
|
|
2506
2506
|
|
|
2507
|
-
let uid$
|
|
2507
|
+
let uid$c = 0;
|
|
2508
2508
|
/**
|
|
2509
2509
|
* Checkbox — Ius Design v2.
|
|
2510
2510
|
*
|
|
@@ -2542,7 +2542,7 @@ class CheckboxComponent {
|
|
|
2542
2542
|
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
2543
2543
|
/** Callback con el nuevo booleano (original `onChange(checked)`; nunca `change`). */
|
|
2544
2544
|
this.checkedChange = new EventEmitter();
|
|
2545
|
-
this.inputId = `ius-cbx-${uid$
|
|
2545
|
+
this.inputId = `ius-cbx-${uid$c++}`;
|
|
2546
2546
|
this.onChange = () => { };
|
|
2547
2547
|
this.onTouched = () => { };
|
|
2548
2548
|
}
|
|
@@ -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\
|
|
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 }); }
|
|
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\
|
|
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"] }]
|
|
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) -->\
|
|
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 }); }
|
|
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) -->\
|
|
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"] }]
|
|
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
|
/**
|
|
@@ -4546,7 +4546,7 @@ function prefersReducedMotion() {
|
|
|
4546
4546
|
typeof window.matchMedia === 'function' &&
|
|
4547
4547
|
window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
|
4548
4548
|
}
|
|
4549
|
-
let uid$
|
|
4549
|
+
let uid$b = 0;
|
|
4550
4550
|
/**
|
|
4551
4551
|
* CircularProgress — Ius Design v2.
|
|
4552
4552
|
*
|
|
@@ -4567,7 +4567,7 @@ class CircularProgressComponent {
|
|
|
4567
4567
|
this.showValue = false;
|
|
4568
4568
|
/** Congela la cuenta regresiva conservando el tiempo restante (hover del Toast). */
|
|
4569
4569
|
this.paused = false;
|
|
4570
|
-
this.gid = `ius-cp-${uid$
|
|
4570
|
+
this.gid = `ius-cp-${uid$b++}`;
|
|
4571
4571
|
this.zone = inject(NgZone);
|
|
4572
4572
|
/** % restante de la cuenta regresiva (100 → 0). */
|
|
4573
4573
|
this.remaining = signal(100, /* @ts-ignore */
|
|
@@ -4729,7 +4729,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4729
4729
|
args: [{ transform: booleanAttribute }]
|
|
4730
4730
|
}] } });
|
|
4731
4731
|
|
|
4732
|
-
let uid$
|
|
4732
|
+
let uid$a = 0;
|
|
4733
4733
|
/**
|
|
4734
4734
|
*
|
|
4735
4735
|
* Cargador de **identidad** Litigiovirtual: tres fichas se deslizan por el
|
|
@@ -4751,7 +4751,7 @@ class LoadingMarkComponent {
|
|
|
4751
4751
|
/** Etiqueta accesible. */
|
|
4752
4752
|
this.ariaLabel = 'Cargando';
|
|
4753
4753
|
// IDs únicos por instancia para los <defs> del SVG (gradientes/filtro/máscara).
|
|
4754
|
-
this.id = `lm-${uid$
|
|
4754
|
+
this.id = `lm-${uid$a++}`;
|
|
4755
4755
|
this.baseId = `${this.id}-base`;
|
|
4756
4756
|
this.glowId = `${this.id}-glow`;
|
|
4757
4757
|
this.softId = `${this.id}-soft`;
|
|
@@ -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') {\
|
|
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 }); }
|
|
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') {\
|
|
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"] }]
|
|
4861
4861
|
}], propDecorators: { variant: [{
|
|
4862
4862
|
type: Input
|
|
4863
4863
|
}], label: [{
|
|
@@ -5580,7 +5580,7 @@ function placeholderContent(kind, providerLabel) {
|
|
|
5580
5580
|
};
|
|
5581
5581
|
}
|
|
5582
5582
|
}
|
|
5583
|
-
let uid$
|
|
5583
|
+
let uid$9 = 0;
|
|
5584
5584
|
/**
|
|
5585
5585
|
* CaptchaField — Ius Design v2.
|
|
5586
5586
|
*
|
|
@@ -5729,7 +5729,7 @@ class CaptchaFieldComponent {
|
|
|
5729
5729
|
this.phase = signal('loading', /* @ts-ignore */
|
|
5730
5730
|
...(ngDevMode ? [{ debugName: "phase" }] : /* istanbul ignore next */ []));
|
|
5731
5731
|
this.widgetId = null;
|
|
5732
|
-
this.baseId = `ius-cf-${uid$
|
|
5732
|
+
this.baseId = `ius-cf-${uid$9++}`;
|
|
5733
5733
|
this.hostRef = viewChild('host', /* @ts-ignore */
|
|
5734
5734
|
...(ngDevMode ? [{ debugName: "hostRef" }] : /* istanbul ignore next */ []));
|
|
5735
5735
|
this.onChange = () => { };
|
|
@@ -7017,7 +7017,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
7017
7017
|
type: Output
|
|
7018
7018
|
}] } });
|
|
7019
7019
|
|
|
7020
|
-
let uid$
|
|
7020
|
+
let uid$8 = 0;
|
|
7021
7021
|
/** ¿La lista viene agrupada (`{label, options}`) o plana? */
|
|
7022
7022
|
function isGrouped(options) {
|
|
7023
7023
|
return (Array.isArray(options) &&
|
|
@@ -7198,7 +7198,7 @@ class SelectComponent {
|
|
|
7198
7198
|
* corren en el constructor, antes de que Angular asigne los `@Input`, así que
|
|
7199
7199
|
* `this.id` valdría siempre `undefined` y el `id` del consumidor se perdería.
|
|
7200
7200
|
*/
|
|
7201
|
-
this.fallbackId = `ius-sel-${uid$
|
|
7201
|
+
this.fallbackId = `ius-sel-${uid$8++}`;
|
|
7202
7202
|
this.onChange = () => { };
|
|
7203
7203
|
this.onTouched = () => { };
|
|
7204
7204
|
this.overlay = inject(Overlay);
|
|
@@ -8829,7 +8829,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
8829
8829
|
* Ver `SearchBar.jsx` → `demoFilled`. Nunca toca el valor real del modelo.
|
|
8830
8830
|
*/
|
|
8831
8831
|
const IUS_SB_DEMO_VALUE = 'CriterioBusqueda';
|
|
8832
|
-
let uid$
|
|
8832
|
+
let uid$7 = 0;
|
|
8833
8833
|
/**
|
|
8834
8834
|
* SearchBar — Ius Design v2.
|
|
8835
8835
|
*
|
|
@@ -8913,7 +8913,7 @@ class SearchBarComponent {
|
|
|
8913
8913
|
this.cleared = new EventEmitter();
|
|
8914
8914
|
// ── Estado interno ────────────────────────────────────────────────────
|
|
8915
8915
|
this.inputRef = viewChild.required('input');
|
|
8916
|
-
this.autoId = `ius-sb-${uid$
|
|
8916
|
+
this.autoId = `ius-sb-${uid$7++}`;
|
|
8917
8917
|
/** Estado forzado que el golden considera "con criterio" (demos). */
|
|
8918
8918
|
this.demoFilled = computed(() => this.stateInput() === 'hover' || this.stateInput() === 'focused', /* @ts-ignore */
|
|
8919
8919
|
...(ngDevMode ? [{ debugName: "demoFilled" }] : /* istanbul ignore next */ []));
|
|
@@ -9383,7 +9383,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
9383
9383
|
args: ['triggerEl']
|
|
9384
9384
|
}] } });
|
|
9385
9385
|
|
|
9386
|
-
let uid$
|
|
9386
|
+
let uid$6 = 0;
|
|
9387
9387
|
/**
|
|
9388
9388
|
* MultiTextField — Ius Design v2 (familia inputs).
|
|
9389
9389
|
*
|
|
@@ -9439,7 +9439,7 @@ class MultiTextFieldComponent {
|
|
|
9439
9439
|
/** Último valor escrito por el CVA (por si llega antes que los slots). */
|
|
9440
9440
|
this.pendingValue = signal(null, /* @ts-ignore */
|
|
9441
9441
|
...(ngDevMode ? [{ debugName: "pendingValue" }] : /* istanbul ignore next */ []));
|
|
9442
|
-
this.baseIdState = `ius-mtf-${uid$
|
|
9442
|
+
this.baseIdState = `ius-mtf-${uid$6++}`;
|
|
9443
9443
|
this.slotInputs = viewChildren('slotInput', /* @ts-ignore */
|
|
9444
9444
|
...(ngDevMode ? [{ debugName: "slotInputs" }] : /* istanbul ignore next */ []));
|
|
9445
9445
|
this.onChange = () => { };
|
|
@@ -9722,7 +9722,7 @@ const ICON_TONES = {
|
|
|
9722
9722
|
neutral: { bg: 'var(--ius-neutral-2)', fg: 'var(--ius-neutral-7)' },
|
|
9723
9723
|
};
|
|
9724
9724
|
/** Contador para los ids del nombre accesible (equivalente del `useId` del golden). */
|
|
9725
|
-
let uid$
|
|
9725
|
+
let uid$5 = 0;
|
|
9726
9726
|
/**
|
|
9727
9727
|
* Modal — Ius Design v2.
|
|
9728
9728
|
*
|
|
@@ -9745,7 +9745,7 @@ class ModalComponent {
|
|
|
9745
9745
|
* `aria-label`, y `aria-describedby` apunta a la descripción cuando la hay
|
|
9746
9746
|
* (T11). `aria-label` queda solo para el caso sin `title`.
|
|
9747
9747
|
*/
|
|
9748
|
-
this.baseId = `ius-modal-${uid$
|
|
9748
|
+
this.baseId = `ius-modal-${uid$5++}`;
|
|
9749
9749
|
this.titleId = `${this.baseId}-title`;
|
|
9750
9750
|
this.descId = `${this.baseId}-desc`;
|
|
9751
9751
|
this.overlay = inject(Overlay);
|
|
@@ -10676,7 +10676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10676
10676
|
args: [{ transform: booleanAttribute }]
|
|
10677
10677
|
}] } });
|
|
10678
10678
|
|
|
10679
|
-
let uid$
|
|
10679
|
+
let uid$4 = 0;
|
|
10680
10680
|
/**
|
|
10681
10681
|
* TextArea — Ius Design v2 (familia inputs).
|
|
10682
10682
|
*
|
|
@@ -10856,7 +10856,7 @@ class TextAreaComponent {
|
|
|
10856
10856
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
10857
10857
|
this.focused = signal(false, /* @ts-ignore */
|
|
10858
10858
|
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
10859
|
-
this.areaId = `ius-ta-${uid$
|
|
10859
|
+
this.areaId = `ius-ta-${uid$4++}`;
|
|
10860
10860
|
this.helpId = `${this.areaId}-help`;
|
|
10861
10861
|
this.area = viewChild('area', /* @ts-ignore */
|
|
10862
10862
|
...(ngDevMode ? [{ debugName: "area" }] : /* istanbul ignore next */ []));
|
|
@@ -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: "<!--\
|
|
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 }); }
|
|
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: "<!--\
|
|
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"] }]
|
|
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). */
|
|
@@ -12691,6 +12691,11 @@ class ToastViewportComponent {
|
|
|
12691
12691
|
// creación, y este viewport se crea al arrancar: sin esto, cualquier
|
|
12692
12692
|
// Modal/Drawer abierto después quedaría encima de los toasts.
|
|
12693
12693
|
this.overlayRef.hostElement.style.zIndex = 'var(--ius-z-toast, 1700)';
|
|
12694
|
+
// El pane del CDK trae `pointer-events: auto`, así que un viewport SIN toasts
|
|
12695
|
+
// seguía comiéndose los clics de su rectángulo (el ancho de la columna más su
|
|
12696
|
+
// padding) sobre lo que hubiera debajo. Se apaga aquí y cada toast lo vuelve
|
|
12697
|
+
// a encender con su propio `pointer-events: auto`.
|
|
12698
|
+
this.overlayRef.overlayElement.style.pointerEvents = 'none';
|
|
12694
12699
|
this.applyPosition(this.position());
|
|
12695
12700
|
this.overlayRef.attach(new TemplatePortal(this.tpl(), this.viewContainerRef));
|
|
12696
12701
|
}
|
|
@@ -12844,7 +12849,7 @@ function normalizeOpen(value, multiple) {
|
|
|
12844
12849
|
const list = Array.isArray(value) ? [...value] : [value];
|
|
12845
12850
|
return multiple ? list : list.slice(0, 1);
|
|
12846
12851
|
}
|
|
12847
|
-
let uid = 0;
|
|
12852
|
+
let uid$3 = 0;
|
|
12848
12853
|
/**
|
|
12849
12854
|
* Accordion — Ius Design v2 (familia data-display).
|
|
12850
12855
|
*
|
|
@@ -12904,7 +12909,7 @@ class AccordionComponent {
|
|
|
12904
12909
|
/** Apertura propia del modo no controlado (`null` = aún sin tocar). */
|
|
12905
12910
|
this.picked = signal(null, /* @ts-ignore */
|
|
12906
12911
|
...(ngDevMode ? [{ debugName: "picked" }] : /* istanbul ignore next */ []));
|
|
12907
|
-
this.gid = `ius-acc-${uid++}`;
|
|
12912
|
+
this.gid = `ius-acc-${uid$3++}`;
|
|
12908
12913
|
this.openIds = computed(() => {
|
|
12909
12914
|
const controlled = this.open();
|
|
12910
12915
|
if (controlled !== undefined)
|
|
@@ -13199,7 +13204,7 @@ class TimelineComponent {
|
|
|
13199
13204
|
return String(d);
|
|
13200
13205
|
}
|
|
13201
13206
|
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. -->\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 }); }
|
|
13207
|
+
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 }); }
|
|
13203
13208
|
}
|
|
13204
13209
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
13205
13210
|
type: Component,
|
|
@@ -13210,7 +13215,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13210
13215
|
'[style.--_accent-strong]': "'var(--ius-' + accent() + '-600)'",
|
|
13211
13216
|
'[style.--_accent-soft]': "'var(--ius-' + accent() + '-100)'",
|
|
13212
13217
|
'[style.--_accent-c2]': "'var(--ius-' + accent() + '-400)'",
|
|
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"] }]
|
|
13218
|
+
}, 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"] }]
|
|
13214
13219
|
}], 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
13220
|
|
|
13216
13221
|
/** Acento → color, calcado del mapa ACCENTS del golden. */
|
|
@@ -13272,7 +13277,7 @@ class SectionHeaderComponent {
|
|
|
13272
13277
|
...(ngDevMode ? [{ debugName: "insigniaTone" }] : /* istanbul ignore next */ []));
|
|
13273
13278
|
}
|
|
13274
13279
|
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\
|
|
13280
|
+
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 }); }
|
|
13276
13281
|
}
|
|
13277
13282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
13278
13283
|
type: Component,
|
|
@@ -13283,7 +13288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13283
13288
|
'[attr.data-collapsed]': "collapsed() ? 'true' : null",
|
|
13284
13289
|
'[attr.aria-label]': '(!collapsible() && ariaLabel()) || null',
|
|
13285
13290
|
'[style.--_sech-accent]': 'accentColor()',
|
|
13286
|
-
}, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\
|
|
13291
|
+
}, 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"] }]
|
|
13287
13292
|
}], 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
13293
|
|
|
13289
13294
|
/** Pseudo-columna de selección (misma clave que el golden). */
|
|
@@ -13739,7 +13744,7 @@ class TableComponent {
|
|
|
13739
13744
|
body.style.userSelect = 'none';
|
|
13740
13745
|
}
|
|
13741
13746
|
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). -->\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 }); }
|
|
13747
|
+
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 }); }
|
|
13743
13748
|
}
|
|
13744
13749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableComponent, decorators: [{
|
|
13745
13750
|
type: Component,
|
|
@@ -13754,7 +13759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13754
13759
|
'[attr.data-clickable]': "rowClickable() ? 'true' : 'false'",
|
|
13755
13760
|
'[attr.data-scrolled-x]': "scrolledX() ? 'true' : 'false'",
|
|
13756
13761
|
'[attr.data-resizing]': "resizing() ? 'true' : 'false'",
|
|
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"] }]
|
|
13762
|
+
}, 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"] }]
|
|
13758
13763
|
}], 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
13764
|
|
|
13760
13765
|
/** Delta libre proyectado (anula el `delta` numérico): `<span iusStatDelta>…</span>`. */
|
|
@@ -13902,7 +13907,7 @@ class StatComponent {
|
|
|
13902
13907
|
event.preventDefault();
|
|
13903
13908
|
}
|
|
13904
13909
|
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 }); }
|
|
13910
|
+
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 -->\r\n@if (label() != null) {\r\n <span class=\"ius-stat__overline\">\r\n @if (labelIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\r\n }\r\n {{ label() }}\r\n </span>\r\n}\r\n\r\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\r\n<span class=\"ius-stat__row\">\r\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\r\n @if (value() != null) {\r\n {{ value() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n\r\n @if (delta() != null) {\r\n <span\r\n class=\"ius-stat__delta\"\r\n [attr.data-dir]=\"deltaDir()\"\r\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\r\n {{ deltaText() }}\r\n @if (deltaLabel() != null) {\r\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\r\n }\r\n </span>\r\n } @else if (hasDeltaSlot()) {\r\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\r\n <ng-content select=\"[iusStatDelta]\" />\r\n @if (deltaLabel() != null) {\r\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\r\n@if (hasSparkline()) {\r\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\r\n}\r\n\r\n<!-- Apoyo (multil\u00EDnea) -->\r\n@if (caption() != null) {\r\n <span class=\"ius-stat__caption\">{{ caption() }}</span>\r\n}\r\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
13911
|
}
|
|
13907
13912
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, decorators: [{
|
|
13908
13913
|
type: Component,
|
|
@@ -13918,7 +13923,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13918
13923
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
13919
13924
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
13920
13925
|
'(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"] }]
|
|
13926
|
+
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas, con \u00EDcono opcional que toma el tono -->\r\n@if (label() != null) {\r\n <span class=\"ius-stat__overline\">\r\n @if (labelIcon()) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\r\n }\r\n {{ label() }}\r\n </span>\r\n}\r\n\r\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\r\n<span class=\"ius-stat__row\">\r\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\r\n @if (value() != null) {\r\n {{ value() }}\r\n } @else {\r\n <ng-content />\r\n }\r\n </span>\r\n\r\n @if (delta() != null) {\r\n <span\r\n class=\"ius-stat__delta\"\r\n [attr.data-dir]=\"deltaDir()\"\r\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\r\n {{ deltaText() }}\r\n @if (deltaLabel() != null) {\r\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\r\n }\r\n </span>\r\n } @else if (hasDeltaSlot()) {\r\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\r\n <ng-content select=\"[iusStatDelta]\" />\r\n @if (deltaLabel() != null) {\r\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\r\n }\r\n </span>\r\n }\r\n</span>\r\n\r\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\r\n@if (hasSparkline()) {\r\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\r\n}\r\n\r\n<!-- Apoyo (multil\u00EDnea) -->\r\n@if (caption() != null) {\r\n <span class=\"ius-stat__caption\">{{ caption() }}</span>\r\n}\r\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
13927
|
}], 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
13928
|
/** Mapa tono → color, idéntico a valueColor/iconColor del golden. */
|
|
13924
13929
|
function toneColor(tone, kind) {
|
|
@@ -14080,11 +14085,11 @@ class SkeletonComponent {
|
|
|
14080
14085
|
...(ngDevMode ? [{ debugName: "chartWidthCss" }] : /* istanbul ignore next */ []));
|
|
14081
14086
|
}
|
|
14082
14087
|
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 }); }
|
|
14088
|
+
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()) {\r\n <!-- Cargado: el contenido real reemplaza al esqueleto (modo envoltorio). -->\r\n <ng-content />\r\n} @else if (variant() === 'chart') {\r\n <!-- Fila de barras verticales que insin\u00FAan una gr\u00E1fica. -->\r\n <span\r\n class=\"ius-skeleton-chart\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [style.gap]=\"gapCss()\"\r\n [style.height]=\"chartHeightCss()\"\r\n [style.width]=\"chartWidthCss()\"\r\n >\r\n @for (barHeight of chartBars(); track $index) {\r\n <span\r\n class=\"ius-skeleton\"\r\n data-variant=\"chart-bar\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.height]=\"barHeight\"\r\n ></span>\r\n }\r\n </span>\r\n} @else if (variant() === 'text' && lines() > 1) {\r\n <!-- Texto multil\u00EDnea: la \u00FAltima l\u00EDnea m\u00E1s corta. -->\r\n <span\r\n class=\"ius-skeleton-text\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [style.gap]=\"gapCss()\"\r\n >\r\n @for (lineWidth of textLines(); track $index) {\r\n <span\r\n class=\"ius-skeleton\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.width]=\"lineWidth\"\r\n [style.height]=\"heightCss()\"\r\n [style.border-radius]=\"radiusCss()\"\r\n ></span>\r\n }\r\n </span>\r\n} @else {\r\n <!-- Caso simple: una sola pieza. -->\r\n <span\r\n class=\"ius-skeleton\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.width]=\"widthCss()\"\r\n [style.height]=\"heightCss()\"\r\n [style.border-radius]=\"radiusCss()\"\r\n ></span>\r\n}\r\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
14089
|
}
|
|
14085
14090
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
14086
14091
|
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"] }]
|
|
14092
|
+
args: [{ selector: 'ius-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-skeleton-host' }, template: "@if (!loading()) {\r\n <!-- Cargado: el contenido real reemplaza al esqueleto (modo envoltorio). -->\r\n <ng-content />\r\n} @else if (variant() === 'chart') {\r\n <!-- Fila de barras verticales que insin\u00FAan una gr\u00E1fica. -->\r\n <span\r\n class=\"ius-skeleton-chart\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [style.gap]=\"gapCss()\"\r\n [style.height]=\"chartHeightCss()\"\r\n [style.width]=\"chartWidthCss()\"\r\n >\r\n @for (barHeight of chartBars(); track $index) {\r\n <span\r\n class=\"ius-skeleton\"\r\n data-variant=\"chart-bar\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.height]=\"barHeight\"\r\n ></span>\r\n }\r\n </span>\r\n} @else if (variant() === 'text' && lines() > 1) {\r\n <!-- Texto multil\u00EDnea: la \u00FAltima l\u00EDnea m\u00E1s corta. -->\r\n <span\r\n class=\"ius-skeleton-text\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [style.gap]=\"gapCss()\"\r\n >\r\n @for (lineWidth of textLines(); track $index) {\r\n <span\r\n class=\"ius-skeleton\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.width]=\"lineWidth\"\r\n [style.height]=\"heightCss()\"\r\n [style.border-radius]=\"radiusCss()\"\r\n ></span>\r\n }\r\n </span>\r\n} @else {\r\n <!-- Caso simple: una sola pieza. -->\r\n <span\r\n class=\"ius-skeleton\"\r\n role=\"status\"\r\n aria-busy=\"true\"\r\n aria-live=\"polite\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [attr.data-variant]=\"variant()\"\r\n [attr.data-anim]=\"anim()\"\r\n [style.width]=\"widthCss()\"\r\n [style.height]=\"heightCss()\"\r\n [style.border-radius]=\"radiusCss()\"\r\n ></span>\r\n}\r\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
14093
|
}], 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
14094
|
|
|
14090
14095
|
/** Breadcrumb proyectado (solo detalle): `<ius-breadcrumb iusPageHeaderBreadcrumb />`. */
|
|
@@ -14171,7 +14176,7 @@ class PageHeaderComponent {
|
|
|
14171
14176
|
...(ngDevMode ? [{ debugName: "backInBreadcrumb" }] : /* istanbul ignore next */ []));
|
|
14172
14177
|
}
|
|
14173
14178
|
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 }); }
|
|
14179
|
+
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 -->\r\n@if (hasBreadcrumb()) {\r\n <div class=\"ius-pageheader__bc\">\r\n @if (backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pageheader__top\">\r\n <div class=\"ius-pageheader__lead\">\r\n @if (showBack() && !backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <div class=\"ius-pageheader__titles\">\r\n @if (overline() != null) {\r\n <span class=\"ius-pageheader__overline\">{{ overline() }}</span>\r\n }\r\n @if (title() != null) {\r\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">{{ title() }}</h1>\r\n }\r\n @if (subtitle() != null) {\r\n <p class=\"ius-pageheader__subtitle\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n </div>\r\n @if (hasActions()) {\r\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\r\n }\r\n</div>\r\n\r\n@if (hasToolbar()) {\r\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\r\n}\r\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
14180
|
}
|
|
14176
14181
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
14177
14182
|
type: Component,
|
|
@@ -14179,9 +14184,684 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14179
14184
|
class: 'ius-pageheader',
|
|
14180
14185
|
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
14181
14186
|
'[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"] }]
|
|
14187
|
+
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\r\n@if (hasBreadcrumb()) {\r\n <div class=\"ius-pageheader__bc\">\r\n @if (backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pageheader__top\">\r\n <div class=\"ius-pageheader__lead\">\r\n @if (showBack() && !backInBreadcrumb()) {\r\n <span class=\"ius-pageheader__back\">\r\n <ius-icon-button\r\n icon=\"arrow_back\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"backLabel()\"\r\n (clicked)=\"back.emit($event)\"\r\n />\r\n </span>\r\n }\r\n <div class=\"ius-pageheader__titles\">\r\n @if (overline() != null) {\r\n <span class=\"ius-pageheader__overline\">{{ overline() }}</span>\r\n }\r\n @if (title() != null) {\r\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevel()\">{{ title() }}</h1>\r\n }\r\n @if (subtitle() != null) {\r\n <p class=\"ius-pageheader__subtitle\">{{ subtitle() }}</p>\r\n }\r\n </div>\r\n </div>\r\n @if (hasActions()) {\r\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\r\n }\r\n</div>\r\n\r\n@if (hasToolbar()) {\r\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\r\n}\r\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
14188
|
}], 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
14189
|
|
|
14190
|
+
let uid$2 = 0;
|
|
14191
|
+
/** `min`/`max`/`step` llegan como número o como atributo de texto; vacío = sin valor.
|
|
14192
|
+
* (Declaración de función: el compilador exige un transform analizable estáticamente.) */
|
|
14193
|
+
function numeroOpcional(v) {
|
|
14194
|
+
if (v == null || v === '')
|
|
14195
|
+
return undefined;
|
|
14196
|
+
const n = Number(v);
|
|
14197
|
+
return Number.isNaN(n) ? undefined : n;
|
|
14198
|
+
}
|
|
14199
|
+
/** Decimales significativos de `step` (para no arrastrar 0.30000000000000004). */
|
|
14200
|
+
function decimalesDe(step) {
|
|
14201
|
+
const s = String(step);
|
|
14202
|
+
const i = s.indexOf('.');
|
|
14203
|
+
return i < 0 ? 0 : s.length - i - 1;
|
|
14204
|
+
}
|
|
14205
|
+
/**
|
|
14206
|
+
* NumberField — Ius Design v2 (Contador).
|
|
14207
|
+
*
|
|
14208
|
+
* Campo numérico con stepper (±) a la derecha. Variación de **TextField**:
|
|
14209
|
+
* reusa su wrapper `.ius-tf` (label + required + iconHelp + 5 estados +
|
|
14210
|
+
* helpText/errorText + `size`) y añade los botones `expand_less`/`expand_more`
|
|
14211
|
+
* y las flechas ↑/↓ del teclado, acotado por `min`/`max` y en pasos de `step`.
|
|
14212
|
+
* Se ocultan los spinners nativos del navegador. Implementa
|
|
14213
|
+
* `ControlValueAccessor` con `number | null`.
|
|
14214
|
+
*
|
|
14215
|
+
* Decisiones del port (golden `NumberField.jsx` / `.d.ts`):
|
|
14216
|
+
* - El CSS de TextField se incorpora vía `@use` del SCSS hermano (en React el
|
|
14217
|
+
* golden importa TextField para heredar `.ius-tf`; con encapsulación
|
|
14218
|
+
* emulada cada componente lleva sus propias reglas).
|
|
14219
|
+
* - Vaciar el campo confirma `null` (el golden conserva el último número
|
|
14220
|
+
* mientras el input se ve vacío — con CVA eso desincroniza modelo y vista).
|
|
14221
|
+
* - Al perder el foco, además del recorte a `min`/`max`, el valor se
|
|
14222
|
+
* redondea a la precisión de `step` (step entero → sin decimales), que es lo
|
|
14223
|
+
* que un "Contador" espera. Con `step` decimal se conservan sus decimales.
|
|
14224
|
+
* - `ariaLabel` (passthrough al input) para casillas sin `label` visible, p. ej.
|
|
14225
|
+
* dentro de una celda de tabla.
|
|
14226
|
+
* - `state` (hover|focused|error|disabled) del golden es solo para demos → fuera
|
|
14227
|
+
* de la API; el playground lo congela con `data-force` como TextField.
|
|
14228
|
+
*/
|
|
14229
|
+
class NumberFieldComponent {
|
|
14230
|
+
constructor() {
|
|
14231
|
+
/** Placeholder dentro del input. Default `0`. */
|
|
14232
|
+
this.placeholder = '0';
|
|
14233
|
+
/** Punto rojo (•) a la izquierda del label. */
|
|
14234
|
+
this.required = false;
|
|
14235
|
+
this.minState = signal(undefined, /* @ts-ignore */
|
|
14236
|
+
...(ngDevMode ? [{ debugName: "minState" }] : /* istanbul ignore next */ []));
|
|
14237
|
+
this.maxState = signal(undefined, /* @ts-ignore */
|
|
14238
|
+
...(ngDevMode ? [{ debugName: "maxState" }] : /* istanbul ignore next */ []));
|
|
14239
|
+
this.stepState = signal(1, /* @ts-ignore */
|
|
14240
|
+
...(ngDevMode ? [{ debugName: "stepState" }] : /* istanbul ignore next */ []));
|
|
14241
|
+
/** Mostrar/ocultar la línea de ayuda. */
|
|
14242
|
+
this.showHelpText = true;
|
|
14243
|
+
/** Pastilla "?" junto al label. */
|
|
14244
|
+
this.showIconHelp = false;
|
|
14245
|
+
/** Estado de error (colores + errorText). */
|
|
14246
|
+
this.error = false;
|
|
14247
|
+
this.sizeState = signal('medium', /* @ts-ignore */
|
|
14248
|
+
...(ngDevMode ? [{ debugName: "sizeState" }] : /* istanbul ignore next */ []));
|
|
14249
|
+
this.disabledState = signal(false, /* @ts-ignore */
|
|
14250
|
+
...(ngDevMode ? [{ debugName: "disabledState" }] : /* istanbul ignore next */ []));
|
|
14251
|
+
/** Además del CVA: cada valor confirmado (`onChange(value)` del golden). `null` = campo vacío. */
|
|
14252
|
+
this.valueChange = new EventEmitter();
|
|
14253
|
+
/** Valor numérico confirmado. */
|
|
14254
|
+
this.value = signal(null, /* @ts-ignore */
|
|
14255
|
+
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
14256
|
+
/** Texto crudo que edita el usuario (permite vacío o parcial como "-"). */
|
|
14257
|
+
this.text = signal('', /* @ts-ignore */
|
|
14258
|
+
...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
|
|
14259
|
+
this.focused = signal(false, /* @ts-ignore */
|
|
14260
|
+
...(ngDevMode ? [{ debugName: "focused" }] : /* istanbul ignore next */ []));
|
|
14261
|
+
this.inputId = `ius-num-${uid$2++}`;
|
|
14262
|
+
this.helpId = `${this.inputId}-help`;
|
|
14263
|
+
this.atMax = computed(() => {
|
|
14264
|
+
const max = this.maxState();
|
|
14265
|
+
const v = this.value();
|
|
14266
|
+
return typeof max === 'number' && v != null && v >= max;
|
|
14267
|
+
}, /* @ts-ignore */
|
|
14268
|
+
...(ngDevMode ? [{ debugName: "atMax" }] : /* istanbul ignore next */ []));
|
|
14269
|
+
this.atMin = computed(() => {
|
|
14270
|
+
const min = this.minState();
|
|
14271
|
+
const v = this.value();
|
|
14272
|
+
return typeof min === 'number' && v != null && v <= min;
|
|
14273
|
+
}, /* @ts-ignore */
|
|
14274
|
+
...(ngDevMode ? [{ debugName: "atMin" }] : /* istanbul ignore next */ []));
|
|
14275
|
+
this.onChange = () => { };
|
|
14276
|
+
this.onTouched = () => { };
|
|
14277
|
+
}
|
|
14278
|
+
/** Valor mínimo. */
|
|
14279
|
+
set min(v) {
|
|
14280
|
+
this.minState.set(v);
|
|
14281
|
+
}
|
|
14282
|
+
get min() {
|
|
14283
|
+
return this.minState();
|
|
14284
|
+
}
|
|
14285
|
+
/** Valor máximo. */
|
|
14286
|
+
set max(v) {
|
|
14287
|
+
this.maxState.set(v);
|
|
14288
|
+
}
|
|
14289
|
+
get max() {
|
|
14290
|
+
return this.maxState();
|
|
14291
|
+
}
|
|
14292
|
+
/** Incremento de los controles y las flechas del teclado. Default `1`. */
|
|
14293
|
+
set step(v) {
|
|
14294
|
+
this.stepState.set(v && v > 0 ? v : 1);
|
|
14295
|
+
}
|
|
14296
|
+
get step() {
|
|
14297
|
+
return this.stepState();
|
|
14298
|
+
}
|
|
14299
|
+
set size(value) {
|
|
14300
|
+
this.sizeState.set(value ?? 'medium');
|
|
14301
|
+
}
|
|
14302
|
+
get size() {
|
|
14303
|
+
return this.sizeState();
|
|
14304
|
+
}
|
|
14305
|
+
set disabled(value) {
|
|
14306
|
+
this.disabledState.set(value);
|
|
14307
|
+
}
|
|
14308
|
+
get disabled() {
|
|
14309
|
+
return this.disabledState();
|
|
14310
|
+
}
|
|
14311
|
+
get hint() {
|
|
14312
|
+
return this.error ? this.errorText || this.helpText : this.helpText;
|
|
14313
|
+
}
|
|
14314
|
+
get showHint() {
|
|
14315
|
+
return this.showHelpText && !!this.hint;
|
|
14316
|
+
}
|
|
14317
|
+
// ── ControlValueAccessor ──────────────────────────────────────────────
|
|
14318
|
+
writeValue(value) {
|
|
14319
|
+
const v = typeof value === 'number' && !Number.isNaN(value) ? value : null;
|
|
14320
|
+
this.value.set(v);
|
|
14321
|
+
this.text.set(v != null ? String(v) : '');
|
|
14322
|
+
}
|
|
14323
|
+
registerOnChange(fn) {
|
|
14324
|
+
this.onChange = fn;
|
|
14325
|
+
}
|
|
14326
|
+
registerOnTouched(fn) {
|
|
14327
|
+
this.onTouched = fn;
|
|
14328
|
+
}
|
|
14329
|
+
setDisabledState(isDisabled) {
|
|
14330
|
+
this.disabledState.set(isDisabled);
|
|
14331
|
+
}
|
|
14332
|
+
// ── Lógica numérica ───────────────────────────────────────────────────
|
|
14333
|
+
clamp(n) {
|
|
14334
|
+
let v = n;
|
|
14335
|
+
const min = this.minState();
|
|
14336
|
+
const max = this.maxState();
|
|
14337
|
+
if (typeof min === 'number')
|
|
14338
|
+
v = Math.max(min, v);
|
|
14339
|
+
if (typeof max === 'number')
|
|
14340
|
+
v = Math.min(max, v);
|
|
14341
|
+
return v;
|
|
14342
|
+
}
|
|
14343
|
+
/** Redondea a la precisión de `step` (step entero → entero). */
|
|
14344
|
+
aPrecision(n) {
|
|
14345
|
+
const dec = decimalesDe(this.stepState());
|
|
14346
|
+
return Number(n.toFixed(dec));
|
|
14347
|
+
}
|
|
14348
|
+
commit(n) {
|
|
14349
|
+
this.value.set(n);
|
|
14350
|
+
this.onChange(n);
|
|
14351
|
+
this.valueChange.emit(n);
|
|
14352
|
+
}
|
|
14353
|
+
bump(dir) {
|
|
14354
|
+
if (this.disabled)
|
|
14355
|
+
return;
|
|
14356
|
+
const cur = this.value();
|
|
14357
|
+
const base = cur != null && !Number.isNaN(cur) ? cur : 0;
|
|
14358
|
+
const next = this.aPrecision(this.clamp(base + dir * this.stepState()));
|
|
14359
|
+
this.commit(next);
|
|
14360
|
+
this.text.set(String(next));
|
|
14361
|
+
}
|
|
14362
|
+
// ── Handlers ──────────────────────────────────────────────────────────
|
|
14363
|
+
onInput(event) {
|
|
14364
|
+
const raw = event.target.value;
|
|
14365
|
+
this.text.set(raw);
|
|
14366
|
+
if (raw === '') {
|
|
14367
|
+
this.commit(null);
|
|
14368
|
+
return;
|
|
14369
|
+
}
|
|
14370
|
+
if (raw === '-')
|
|
14371
|
+
return;
|
|
14372
|
+
const n = Number(raw);
|
|
14373
|
+
if (!Number.isNaN(n))
|
|
14374
|
+
this.commit(n);
|
|
14375
|
+
}
|
|
14376
|
+
onFocus() {
|
|
14377
|
+
this.focused.set(true);
|
|
14378
|
+
}
|
|
14379
|
+
onBlur() {
|
|
14380
|
+
this.focused.set(false);
|
|
14381
|
+
this.onTouched();
|
|
14382
|
+
const t = this.text();
|
|
14383
|
+
if (t === '')
|
|
14384
|
+
return;
|
|
14385
|
+
const n = Number(t);
|
|
14386
|
+
if (t === '-' || Number.isNaN(n)) {
|
|
14387
|
+
const v = this.value();
|
|
14388
|
+
this.text.set(v != null ? String(v) : '');
|
|
14389
|
+
return;
|
|
14390
|
+
}
|
|
14391
|
+
const c = this.aPrecision(this.clamp(n));
|
|
14392
|
+
if (c !== this.value())
|
|
14393
|
+
this.commit(c);
|
|
14394
|
+
this.text.set(String(c));
|
|
14395
|
+
}
|
|
14396
|
+
onKeyDown(event) {
|
|
14397
|
+
if (event.key === 'ArrowUp') {
|
|
14398
|
+
event.preventDefault();
|
|
14399
|
+
this.bump(1);
|
|
14400
|
+
}
|
|
14401
|
+
else if (event.key === 'ArrowDown') {
|
|
14402
|
+
event.preventDefault();
|
|
14403
|
+
this.bump(-1);
|
|
14404
|
+
}
|
|
14405
|
+
}
|
|
14406
|
+
aumentar() {
|
|
14407
|
+
this.bump(1);
|
|
14408
|
+
}
|
|
14409
|
+
disminuir() {
|
|
14410
|
+
this.bump(-1);
|
|
14411
|
+
}
|
|
14412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NumberFieldComponent, isStandalone: true, selector: "ius-number-field", inputs: { label: "label", placeholder: "placeholder", required: ["required", "required", booleanAttribute], min: ["min", "min", numeroOpcional], max: ["max", "max", numeroOpcional], step: ["step", "step", numeroOpcional], helpText: "helpText", errorText: "errorText", showHelpText: ["showHelpText", "showHelpText", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", error: ["error", "error", booleanAttribute], name: "name", ariaLabel: "ariaLabel", size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null", "attr.data-focused": "focused() || null", "attr.data-error": "error || null", "attr.data-disabled": "disabled || null" }, classAttribute: "ius-tf ius-tf--stepper" }, providers: [
|
|
14414
|
+
{
|
|
14415
|
+
provide: NG_VALUE_ACCESSOR,
|
|
14416
|
+
useExisting: forwardRef(() => NumberFieldComponent),
|
|
14417
|
+
multi: true,
|
|
14418
|
+
},
|
|
14419
|
+
], ngImport: i0, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n placement=\"top\"\n trigger=\"hover\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"text()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n <div class=\"ius-num__steppers\">\n <button\n type=\"button\"\n class=\"ius-num__step\"\n tabindex=\"-1\"\n aria-label=\"Aumentar\"\n [disabled]=\"disabled || atMax()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"aumentar()\"\n >\n <span translate=\"no\" class=\"ius-icon\">expand_less</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-num__step\"\n tabindex=\"-1\"\n aria-label=\"Disminuir\"\n [disabled]=\"disabled || atMin()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"disminuir()\"\n >\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\n </button>\n </div>\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host{max-width:240px}.ius-tf__input{-moz-appearance:textfield}.ius-tf__input::-webkit-outer-spin-button,.ius-tf__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ius-tf__field{padding-right:var(--ius-space-xs)}.ius-num__steppers{display:flex;flex-direction:column;flex:0 0 auto;align-self:center;justify-content:center}.ius-num__step{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 var(--ius-space-xxs);line-height:0;color:var(--_tf-icon);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-num__step:first-child{margin-bottom:-3px}.ius-num__step:last-child{margin-top:-3px}.ius-num__step:hover{color:var(--ius-primary-500)}.ius-num__step:active{color:var(--ius-primary-600)}.ius-num__step:disabled{color:var(--ius-text-disabled);cursor:not-allowed}.ius-num__step .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host([data-error=true]) .ius-num__step,:host([data-force=error]) .ius-num__step{color:var(--ius-danger-700)}:host([data-error=true]) .ius-num__step:hover,:host([data-force=error]) .ius-num__step:hover{color:var(--ius-danger-800)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14420
|
+
}
|
|
14421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
14422
|
+
type: Component,
|
|
14423
|
+
args: [{ selector: 'ius-number-field', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
14424
|
+
{
|
|
14425
|
+
provide: NG_VALUE_ACCESSOR,
|
|
14426
|
+
useExisting: forwardRef(() => NumberFieldComponent),
|
|
14427
|
+
multi: true,
|
|
14428
|
+
},
|
|
14429
|
+
], host: {
|
|
14430
|
+
class: 'ius-tf ius-tf--stepper',
|
|
14431
|
+
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
14432
|
+
'[attr.data-focused]': 'focused() || null',
|
|
14433
|
+
'[attr.data-error]': 'error || null',
|
|
14434
|
+
'[attr.data-disabled]': 'disabled || null',
|
|
14435
|
+
}, template: "@if (label) {\n <label [for]=\"inputId\" class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\n placement=\"top\"\n trigger=\"hover\"\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\n >\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n <span class=\"ius-tf__colon\">:</span>\n </label>\n}\n\n<div class=\"ius-tf__field\">\n <input\n [id]=\"inputId\"\n class=\"ius-tf__input\"\n type=\"text\"\n inputmode=\"numeric\"\n role=\"spinbutton\"\n [name]=\"name\"\n [placeholder]=\"placeholder\"\n [value]=\"text()\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"ariaLabel || null\"\n [attr.aria-invalid]=\"error || null\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-valuenow]=\"value()\"\n [attr.aria-valuemin]=\"min\"\n [attr.aria-valuemax]=\"max\"\n [attr.aria-describedby]=\"showHint ? helpId : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeyDown($event)\"\n (focus)=\"onFocus()\"\n (blur)=\"onBlur()\"\n />\n\n <div class=\"ius-num__steppers\">\n <button\n type=\"button\"\n class=\"ius-num__step\"\n tabindex=\"-1\"\n aria-label=\"Aumentar\"\n [disabled]=\"disabled || atMax()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"aumentar()\"\n >\n <span translate=\"no\" class=\"ius-icon\">expand_less</span>\n </button>\n <button\n type=\"button\"\n class=\"ius-num__step\"\n tabindex=\"-1\"\n aria-label=\"Disminuir\"\n [disabled]=\"disabled || atMin()\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"disminuir()\"\n >\n <span translate=\"no\" class=\"ius-icon\">expand_more</span>\n </button>\n </div>\n</div>\n\n@if (showHint) {\n <span [id]=\"helpId\" class=\"ius-tf__hint\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-primary);--_tf-placeholder: var(--ius-text-tertiary);--_tf-icon: var(--ius-text-secondary);--_tf-clear: var(--ius-neutral-7);--_tf-py: 9px;--_tf-px: 12px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-md);display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);min-width:200px;width:100%;max-width:360px}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__field{display:flex;align-items:center;gap:var(--ius-space-xxs);padding:var(--_tf-py) var(--_tf-px);background:var(--_tf-bg);border:1px solid var(--_tf-border);border-radius:var(--ius-radius-md);transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}.ius-tf__field:hover,:host([data-force=hover]) .ius-tf__field{--_tf-bg: var(--ius-info-100);--_tf-border: transparent;--_tf-clear: var(--ius-primary-900)}:host([data-focused=true]) .ius-tf__field,:host([data-force=focused]) .ius-tf__field,.ius-tf__field:focus-within{--_tf-bg: var(--ius-info-100);--_tf-border: var(--ius-primary-500);--_tf-clear: var(--ius-primary-900);box-shadow:var(--ius-focus-ring)}:host([data-error=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{--_tf-bg: var(--ius-danger-100);--_tf-border: var(--ius-danger-700);--_tf-clear: var(--ius-danger-700);box-shadow:none}:host([data-error=true][data-focused=true]) .ius-tf__field,:host([data-force=error]) .ius-tf__field{box-shadow:0 0 0 3px var(--ius-danger-200)}:host([data-disabled=true]) .ius-tf__field,:host([data-force=disabled]) .ius-tf__field{--_tf-bg: var(--ius-neutral-2);--_tf-border: transparent;--_tf-fg: var(--ius-text-disabled);--_tf-placeholder: var(--ius-text-disabled);--_tf-icon: var(--ius-text-disabled);box-shadow:none;cursor:not-allowed}:host([data-disabled=true]) .ius-tf__label,:host([data-force=disabled]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required,:host([data-force=disabled]) .ius-tf__required{background:var(--ius-neutral-5)}.ius-tf__prefix,.ius-tf__sufix{display:inline-flex;align-items:center;color:var(--_tf-icon);flex:0 0 auto}.ius-tf__prefix .ius-icon,.ius-tf__sufix .ius-icon{font-size:var(--_tf-icon-size);line-height:1}:host([data-size=small]){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}:host([data-size=large]){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}@container style(--ius-control-size: small){:host(:not([data-size])){--_tf-py: 6px;--_tf-px: 10px;--_tf-fs: var(--ius-fs-base);--_tf-lh: var(--ius-lh-base);--_tf-icon-size: var(--ius-icon-sm)}}@container style(--ius-control-size: large){:host(:not([data-size])){--_tf-py: 12px;--_tf-px: 14px;--_tf-fs: var(--ius-fs-lg);--_tf-lh: var(--ius-lh-lg);--_tf-icon-size: var(--ius-icon-lg)}}.ius-tf__input{flex:1 1 auto;appearance:none;border:0;outline:0;background:transparent;font:inherit;font-size:var(--_tf-fs);line-height:var(--_tf-lh);color:var(--_tf-fg);min-width:0;padding:0}.ius-tf__input::placeholder{color:var(--_tf-placeholder)}.ius-tf__input:disabled{cursor:not-allowed;color:var(--ius-text-disabled)}:host([data-error=true]) .ius-tf__input{color:var(--ius-text-primary)}.ius-tf__clear{appearance:none;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--_tf-clear);cursor:pointer;flex:0 0 auto}.ius-tf__clear:hover{color:var(--ius-neutral-9)}.ius-tf__clear .ius-icon{font-size:calc(var(--_tf-icon-size) + 2px);line-height:1}:host([data-error=true]) .ius-tf__clear{color:var(--ius-danger-700)}:host([data-error=true]) .ius-tf__clear:hover{color:var(--ius-danger-800)}.ius-tf__hint{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);font-style:italic;color:var(--ius-text-secondary);letter-spacing:.02em}:host([data-error=true]) .ius-tf__hint,:host([data-force=error]) .ius-tf__hint{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__hint,:host([data-force=disabled]) .ius-tf__hint{color:var(--ius-text-disabled)}:host{max-width:240px}.ius-tf__input{-moz-appearance:textfield}.ius-tf__input::-webkit-outer-spin-button,.ius-tf__input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.ius-tf__field{padding-right:var(--ius-space-xs)}.ius-num__steppers{display:flex;flex-direction:column;flex:0 0 auto;align-self:center;justify-content:center}.ius-num__step{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 var(--ius-space-xxs);line-height:0;color:var(--_tf-icon);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-num__step:first-child{margin-bottom:-3px}.ius-num__step:last-child{margin-top:-3px}.ius-num__step:hover{color:var(--ius-primary-500)}.ius-num__step:active{color:var(--ius-primary-600)}.ius-num__step:disabled{color:var(--ius-text-disabled);cursor:not-allowed}.ius-num__step .ius-icon{font-size:var(--ius-icon-sm);line-height:1}:host([data-error=true]) .ius-num__step,:host([data-force=error]) .ius-num__step{color:var(--ius-danger-700)}:host([data-error=true]) .ius-num__step:hover,:host([data-force=error]) .ius-num__step:hover{color:var(--ius-danger-800)}\n"] }]
|
|
14436
|
+
}], propDecorators: { label: [{
|
|
14437
|
+
type: Input
|
|
14438
|
+
}], placeholder: [{
|
|
14439
|
+
type: Input
|
|
14440
|
+
}], required: [{
|
|
14441
|
+
type: Input,
|
|
14442
|
+
args: [{ transform: booleanAttribute }]
|
|
14443
|
+
}], min: [{
|
|
14444
|
+
type: Input,
|
|
14445
|
+
args: [{ transform: numeroOpcional }]
|
|
14446
|
+
}], max: [{
|
|
14447
|
+
type: Input,
|
|
14448
|
+
args: [{ transform: numeroOpcional }]
|
|
14449
|
+
}], step: [{
|
|
14450
|
+
type: Input,
|
|
14451
|
+
args: [{ transform: numeroOpcional }]
|
|
14452
|
+
}], helpText: [{
|
|
14453
|
+
type: Input
|
|
14454
|
+
}], errorText: [{
|
|
14455
|
+
type: Input
|
|
14456
|
+
}], showHelpText: [{
|
|
14457
|
+
type: Input,
|
|
14458
|
+
args: [{ transform: booleanAttribute }]
|
|
14459
|
+
}], showIconHelp: [{
|
|
14460
|
+
type: Input,
|
|
14461
|
+
args: [{ transform: booleanAttribute }]
|
|
14462
|
+
}], iconHelpTitle: [{
|
|
14463
|
+
type: Input
|
|
14464
|
+
}], iconHelpContent: [{
|
|
14465
|
+
type: Input
|
|
14466
|
+
}], error: [{
|
|
14467
|
+
type: Input,
|
|
14468
|
+
args: [{ transform: booleanAttribute }]
|
|
14469
|
+
}], name: [{
|
|
14470
|
+
type: Input
|
|
14471
|
+
}], ariaLabel: [{
|
|
14472
|
+
type: Input
|
|
14473
|
+
}], size: [{
|
|
14474
|
+
type: Input
|
|
14475
|
+
}], disabled: [{
|
|
14476
|
+
type: Input,
|
|
14477
|
+
args: [{ transform: booleanAttribute }]
|
|
14478
|
+
}], valueChange: [{
|
|
14479
|
+
type: Output
|
|
14480
|
+
}] } });
|
|
14481
|
+
|
|
14482
|
+
/** Footer personalizado (reemplaza al footer por defecto Guardar/Cancelar). */
|
|
14483
|
+
class IusFormFooterDirective {
|
|
14484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusFormFooterDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14485
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusFormFooterDirective, isStandalone: true, selector: "[iusFormFooter]", ngImport: i0 }); }
|
|
14486
|
+
}
|
|
14487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusFormFooterDirective, decorators: [{
|
|
14488
|
+
type: Directive,
|
|
14489
|
+
args: [{ selector: '[iusFormFooter]', standalone: true }]
|
|
14490
|
+
}] });
|
|
14491
|
+
let uid$1 = 0;
|
|
14492
|
+
/**
|
|
14493
|
+
* Form — Ius Design v2 (familia layout).
|
|
14494
|
+
*
|
|
14495
|
+
* **Cáscara** de formulario: rejilla responsive por container-query (1→2
|
|
14496
|
+
* columnas), secciones (`ius-form-section`, opcionalmente colapsables vía
|
|
14497
|
+
* `ius-accordion`), resumen de validación (`ius-alert` danger con enlaces que
|
|
14498
|
+
* enfocan el campo) y footer de acciones sticky (`ius-button`). **No maneja
|
|
14499
|
+
* estado ni valida**: los inputs controlados del sistema resuelven label /
|
|
14500
|
+
* helpText / errorText / required y el consumidor pasa `errorSummary` ya
|
|
14501
|
+
* calculado. Vive en Drawer (default), Modal (≤ 4 campos) o página completa;
|
|
14502
|
+
* dentro de Drawer/Modal el footer lo pone el contenedor → `[footer]="false"`.
|
|
14503
|
+
*
|
|
14504
|
+
* Composición: `ius-form` › `ius-form-section` › `ius-form-field` › inputs.
|
|
14505
|
+
*
|
|
14506
|
+
* Decisiones del port (golden `Form.jsx` / `Form.d.ts`):
|
|
14507
|
+
* - El golden muestra el footer por defecto solo si recibe `onSubmit`/`onCancel`.
|
|
14508
|
+
* Un output no expone suscriptores: `footer` (default `true`) lo muestra con
|
|
14509
|
+
* el botón de envío; `showCancel` añade el de cancelar; `[iusFormFooter]`
|
|
14510
|
+
* proyecta uno propio.
|
|
14511
|
+
* - `submitted` reenvía el `SubmitEvent` nativo (ya con `preventDefault`).
|
|
14512
|
+
* - El host `ius-form` envuelve un `<form novalidate>` interno, que es el
|
|
14513
|
+
* contenedor de la container-query y quien recibe el submit del botón.
|
|
14514
|
+
*/
|
|
14515
|
+
class FormComponent {
|
|
14516
|
+
constructor() {
|
|
14517
|
+
this.document = inject(DOCUMENT);
|
|
14518
|
+
/** Columnas de la rejilla. Default `auto`. Las secciones lo heredan salvo que pasen el suyo. */
|
|
14519
|
+
this.columns = input('auto', /* @ts-ignore */
|
|
14520
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14521
|
+
/** Campos con error → Alert danger arriba. Vacío/omitido = sin resumen. */
|
|
14522
|
+
this.errorSummary = input(undefined, /* @ts-ignore */
|
|
14523
|
+
...(ngDevMode ? [{ debugName: "errorSummary" }] : /* istanbul ignore next */ []));
|
|
14524
|
+
/** Título del resumen de errores. */
|
|
14525
|
+
this.errorTitle = input('Revisa los siguientes campos', /* @ts-ignore */
|
|
14526
|
+
...(ngDevMode ? [{ debugName: "errorTitle" }] : /* istanbul ignore next */ []));
|
|
14527
|
+
/** Etiqueta del botón de envío. */
|
|
14528
|
+
this.submitLabel = input('Guardar', /* @ts-ignore */
|
|
14529
|
+
...(ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []));
|
|
14530
|
+
/** Etiqueta del botón de cancelar. */
|
|
14531
|
+
this.cancelLabel = input('Cancelar', /* @ts-ignore */
|
|
14532
|
+
...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
|
|
14533
|
+
/** Variante del botón de envío. */
|
|
14534
|
+
this.submitVariant = input('primary', /* @ts-ignore */
|
|
14535
|
+
...(ngDevMode ? [{ debugName: "submitVariant" }] : /* istanbul ignore next */ []));
|
|
14536
|
+
/** Variante del botón de cancelar. */
|
|
14537
|
+
this.cancelVariant = input('tertiary', /* @ts-ignore */
|
|
14538
|
+
...(ngDevMode ? [{ debugName: "cancelVariant" }] : /* istanbul ignore next */ []));
|
|
14539
|
+
/** Estado loading del botón de envío. */
|
|
14540
|
+
this.submitting = input(false, { ...(ngDevMode ? { debugName: "submitting" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14541
|
+
/** Deshabilita el botón de envío. */
|
|
14542
|
+
this.submitDisabled = input(false, { ...(ngDevMode ? { debugName: "submitDisabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14543
|
+
/** `false` = sin footer (dentro de Drawer/Modal, que ya ponen el suyo). */
|
|
14544
|
+
this.footer = input(true, { ...(ngDevMode ? { debugName: "footer" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14545
|
+
/** Añade el botón de cancelar al footer por defecto (equivale a pasar `onCancel`). */
|
|
14546
|
+
this.showCancel = input(false, { ...(ngDevMode ? { debugName: "showCancel" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14547
|
+
/** Footer fijo al fondo del scroll (solo el footer propio). Default `true`. */
|
|
14548
|
+
this.stickyFooter = input(true, { ...(ngDevMode ? { debugName: "stickyFooter" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14549
|
+
/** Modo acordeón: solo una sección colapsable abierta a la vez. */
|
|
14550
|
+
this.accordion = input(false, { ...(ngDevMode ? { debugName: "accordion" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14551
|
+
/** Tratamiento de las secciones colapsables. Default `contained`. */
|
|
14552
|
+
this.sectionVariant = input('contained', /* @ts-ignore */
|
|
14553
|
+
...(ngDevMode ? [{ debugName: "sectionVariant" }] : /* istanbul ignore next */ []));
|
|
14554
|
+
/** Envío (`onSubmit`): el `SubmitEvent` nativo, ya prevenido. */
|
|
14555
|
+
this.submitted = output();
|
|
14556
|
+
/** Cancelar (`onCancel`). */
|
|
14557
|
+
this.cancelled = output();
|
|
14558
|
+
this.footerSlot = contentChild(IusFormFooterDirective, /* @ts-ignore */
|
|
14559
|
+
...(ngDevMode ? [{ debugName: "footerSlot" }] : /* istanbul ignore next */ []));
|
|
14560
|
+
this.hasFooterSlot = computed(() => !!this.footerSlot(), /* @ts-ignore */
|
|
14561
|
+
...(ngDevMode ? [{ debugName: "hasFooterSlot" }] : /* istanbul ignore next */ []));
|
|
14562
|
+
this.errores = computed(() => this.errorSummary() ?? [], /* @ts-ignore */
|
|
14563
|
+
...(ngDevMode ? [{ debugName: "errores" }] : /* istanbul ignore next */ []));
|
|
14564
|
+
this.hasErrors = computed(() => this.errores().length > 0, /* @ts-ignore */
|
|
14565
|
+
...(ngDevMode ? [{ debugName: "hasErrors" }] : /* istanbul ignore next */ []));
|
|
14566
|
+
this.formId = `ius-form-${uid$1++}`;
|
|
14567
|
+
// ── Coordinación single-open de las secciones colapsables ──────────────
|
|
14568
|
+
/** Sección colapsable abierta en modo `accordion` (`null` = todas cerradas). */
|
|
14569
|
+
this.openSectionId = signal(null, /* @ts-ignore */
|
|
14570
|
+
...(ngDevMode ? [{ debugName: "openSectionId" }] : /* istanbul ignore next */ []));
|
|
14571
|
+
this.inicializado = false;
|
|
14572
|
+
}
|
|
14573
|
+
/** Una sección colapsable se registra al montarse; la primera con `defaultOpen` queda abierta. */
|
|
14574
|
+
register(sectionId, defaultOpen) {
|
|
14575
|
+
if (!this.inicializado && defaultOpen) {
|
|
14576
|
+
this.inicializado = true;
|
|
14577
|
+
this.openSectionId.set(sectionId);
|
|
14578
|
+
}
|
|
14579
|
+
}
|
|
14580
|
+
setOpen(sectionId) {
|
|
14581
|
+
this.openSectionId.set(sectionId);
|
|
14582
|
+
}
|
|
14583
|
+
// ── Handlers ──────────────────────────────────────────────────────────
|
|
14584
|
+
onSubmit(event) {
|
|
14585
|
+
event.preventDefault();
|
|
14586
|
+
this.submitted.emit(event);
|
|
14587
|
+
}
|
|
14588
|
+
onCancel() {
|
|
14589
|
+
this.cancelled.emit();
|
|
14590
|
+
}
|
|
14591
|
+
/** Enlace del resumen: enfoca el campo por `id` o `name`. */
|
|
14592
|
+
focusField(field, event) {
|
|
14593
|
+
event.preventDefault();
|
|
14594
|
+
const el = this.document.getElementById(field) ??
|
|
14595
|
+
this.document.querySelector(`[name="${field}"]`);
|
|
14596
|
+
el?.focus();
|
|
14597
|
+
}
|
|
14598
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14599
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormComponent, isStandalone: true, selector: "ius-form", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, errorSummary: { classPropertyName: "errorSummary", publicName: "errorSummary", isSignal: true, isRequired: false, transformFunction: null }, errorTitle: { classPropertyName: "errorTitle", publicName: "errorTitle", isSignal: true, isRequired: false, transformFunction: null }, submitLabel: { classPropertyName: "submitLabel", publicName: "submitLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, submitVariant: { classPropertyName: "submitVariant", publicName: "submitVariant", isSignal: true, isRequired: false, transformFunction: null }, cancelVariant: { classPropertyName: "cancelVariant", publicName: "cancelVariant", isSignal: true, isRequired: false, transformFunction: null }, submitting: { classPropertyName: "submitting", publicName: "submitting", isSignal: true, isRequired: false, transformFunction: null }, submitDisabled: { classPropertyName: "submitDisabled", publicName: "submitDisabled", isSignal: true, isRequired: false, transformFunction: null }, footer: { classPropertyName: "footer", publicName: "footer", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, stickyFooter: { classPropertyName: "stickyFooter", publicName: "stickyFooter", isSignal: true, isRequired: false, transformFunction: null }, accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null }, sectionVariant: { classPropertyName: "sectionVariant", publicName: "sectionVariant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitted: "submitted", cancelled: "cancelled" }, queries: [{ propertyName: "footerSlot", first: true, predicate: IusFormFooterDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\n @if (hasErrors()) {\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\n <ul class=\"ius-form__summary-list\">\n @for (e of errores(); track e.field ?? $index) {\n <li>\n @if (e.field; as field) {\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\n } @else {\n {{ e.label || '' }}\n }\n @if (e.message) {\n \u2014 {{ e.message }}\n }\n </li>\n }\n </ul>\n </ius-alert>\n }\n\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\n <ng-content />\n </div>\n\n @if (footer()) {\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\n @if (hasFooterSlot()) {\n <ng-content select=\"[iusFormFooter]\" />\n } @else {\n @if (showCancel()) {\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\n }\n <ius-button\n [variant]=\"submitVariant()\"\n type=\"submit\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled()\"\n [label]=\"submitLabel()\"\n />\n }\n </div>\n }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AlertComponent, selector: "ius-alert", inputs: ["tone", "variant", "size", "border", "title", "overline", "icon", "iconChip", "meta", "closable", "closeLabel", "actionsDivider", "align", "role"], outputs: ["closed"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14600
|
+
}
|
|
14601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, decorators: [{
|
|
14602
|
+
type: Component,
|
|
14603
|
+
args: [{ selector: 'ius-form', standalone: true, imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\n @if (hasErrors()) {\n <ius-alert tone=\"danger\" role=\"alert\" [title]=\"errorTitle()\">\n <ul class=\"ius-form__summary-list\">\n @for (e of errores(); track e.field ?? $index) {\n <li>\n @if (e.field; as field) {\n <a [href]=\"'#' + field\" (click)=\"focusField(field, $event)\">{{ e.label || field }}</a>\n } @else {\n {{ e.label || '' }}\n }\n @if (e.message) {\n \u2014 {{ e.message }}\n }\n </li>\n }\n </ul>\n </ius-alert>\n }\n\n <div class=\"ius-form__grid\" [attr.data-cols]=\"columns()\">\n <ng-content />\n </div>\n\n @if (footer()) {\n <div class=\"ius-form__footer\" [attr.data-sticky]=\"stickyFooter() ? 'true' : null\">\n @if (hasFooterSlot()) {\n <ng-content select=\"[iusFormFooter]\" />\n } @else {\n @if (showCancel()) {\n <ius-button [variant]=\"cancelVariant()\" type=\"button\" [label]=\"cancelLabel()\" (clicked)=\"onCancel()\" />\n }\n <ius-button\n [variant]=\"submitVariant()\"\n type=\"submit\"\n [loading]=\"submitting()\"\n [disabled]=\"submitDisabled()\"\n [label]=\"submitLabel()\"\n />\n }\n </div>\n }\n</form>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0}.ius-form{container-type:inline-size;display:flex;flex-direction:column;gap:var(--ius-space-lg);font-family:var(--ius-font-body);min-height:0;margin:0;flex:1 1 auto}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}.ius-form__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm)}.ius-form__footer[data-sticky=true]{position:sticky;bottom:0;background:var(--ius-surface-card);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-md)}.ius-form__summary-list{list-style:disc;margin:var(--ius-space-xs) 0 0;padding-left:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__summary-list li{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}.ius-form__summary-list a{color:inherit;text-decoration:underline;cursor:pointer}\n"] }]
|
|
14604
|
+
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], errorSummary: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorSummary", required: false }] }], errorTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorTitle", required: false }] }], submitLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], submitVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitVariant", required: false }] }], cancelVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelVariant", required: false }] }], submitting: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitting", required: false }] }], submitDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitDisabled", required: false }] }], footer: [{ type: i0.Input, args: [{ isSignal: true, alias: "footer", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], stickyFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFooter", required: false }] }], accordion: [{ type: i0.Input, args: [{ isSignal: true, alias: "accordion", required: false }] }], sectionVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionVariant", required: false }] }], submitted: [{ type: i0.Output, args: ["submitted"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], footerSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusFormFooterDirective), { isSignal: true }] }] } });
|
|
14605
|
+
|
|
14606
|
+
let uid = 0;
|
|
14607
|
+
/**
|
|
14608
|
+
* FormSection — agrupa campos bajo un título (opcionalmente colapsable).
|
|
14609
|
+
*
|
|
14610
|
+
* No colapsable: cabecera (ícono + título + descripción) y divisor superior
|
|
14611
|
+
* respecto a la sección anterior. Colapsable: reusa `ius-accordion` con el
|
|
14612
|
+
* `sectionVariant` del `ius-form` (`contained` card · `divided` hairline) y,
|
|
14613
|
+
* si el form está en modo `accordion`, solo una sección abierta a la vez.
|
|
14614
|
+
* Hereda `columns` del `ius-form` salvo que pase el suyo.
|
|
14615
|
+
*/
|
|
14616
|
+
class FormSectionComponent {
|
|
14617
|
+
constructor() {
|
|
14618
|
+
this.form = inject(FormComponent, { optional: true });
|
|
14619
|
+
/** Título de la sección. */
|
|
14620
|
+
this.title = input(undefined, /* @ts-ignore */
|
|
14621
|
+
...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
14622
|
+
/** Descripción breve bajo el título. */
|
|
14623
|
+
this.description = input(undefined, /* @ts-ignore */
|
|
14624
|
+
...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
14625
|
+
/** Ícono Material Symbols a la izquierda del título (solo no colapsable). */
|
|
14626
|
+
this.icon = input(undefined, /* @ts-ignore */
|
|
14627
|
+
...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
14628
|
+
/** Sección plegable (Accordion). Default `false`. */
|
|
14629
|
+
this.collapsible = input(false, { ...(ngDevMode ? { debugName: "collapsible" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14630
|
+
/** Sobreescribe el `sectionVariant` del Form para esta sección colapsable. */
|
|
14631
|
+
this.variant = input(undefined, /* @ts-ignore */
|
|
14632
|
+
...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
|
|
14633
|
+
/** Abierta por defecto cuando es colapsable. Default `true`. */
|
|
14634
|
+
this.defaultOpen = input(true, { ...(ngDevMode ? { debugName: "defaultOpen" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14635
|
+
/** Columnas de la rejilla interna. Si se omite, hereda el `columns` del Form; si tampoco, `auto`. */
|
|
14636
|
+
this.columns = input(undefined, /* @ts-ignore */
|
|
14637
|
+
...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
|
|
14638
|
+
this.cuerpo = viewChild.required('cuerpo');
|
|
14639
|
+
this.sectionId = `ius-form-sec-${uid++}`;
|
|
14640
|
+
this.colsEfectivas = computed(() => this.columns() ?? this.form?.columns() ?? 'auto', /* @ts-ignore */
|
|
14641
|
+
...(ngDevMode ? [{ debugName: "colsEfectivas" }] : /* istanbul ignore next */ []));
|
|
14642
|
+
this.variantEfectiva = computed(() => this.variant() ?? this.form?.sectionVariant() ?? 'contained', /* @ts-ignore */
|
|
14643
|
+
...(ngDevMode ? [{ debugName: "variantEfectiva" }] : /* istanbul ignore next */ []));
|
|
14644
|
+
/** Modo single-open coordinado por el Form. */
|
|
14645
|
+
this.single = computed(() => !!this.form?.accordion(), /* @ts-ignore */
|
|
14646
|
+
...(ngDevMode ? [{ debugName: "single" }] : /* istanbul ignore next */ []));
|
|
14647
|
+
/** Apertura controlada solo en modo `accordion`; `undefined` deja el control al Accordion. */
|
|
14648
|
+
this.accOpen = computed(() => {
|
|
14649
|
+
if (!this.single())
|
|
14650
|
+
return undefined;
|
|
14651
|
+
return this.form.openSectionId() === this.sectionId ? this.sectionId : null;
|
|
14652
|
+
}, /* @ts-ignore */
|
|
14653
|
+
...(ngDevMode ? [{ debugName: "accOpen" }] : /* istanbul ignore next */ []));
|
|
14654
|
+
this.accDefaultOpen = computed(() => this.single() ? undefined : this.defaultOpen() ? this.sectionId : undefined, /* @ts-ignore */
|
|
14655
|
+
...(ngDevMode ? [{ debugName: "accDefaultOpen" }] : /* istanbul ignore next */ []));
|
|
14656
|
+
this.items = computed(() => [
|
|
14657
|
+
{ id: this.sectionId, title: this.title() ?? '', icon: this.icon(), content: this.cuerpo() },
|
|
14658
|
+
], /* @ts-ignore */
|
|
14659
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
14660
|
+
// Registro en el Form cuando participa del modo single-open (useEffect del golden).
|
|
14661
|
+
effect(() => {
|
|
14662
|
+
if (this.single() && this.collapsible()) {
|
|
14663
|
+
const abierta = this.defaultOpen();
|
|
14664
|
+
untracked(() => this.form.register(this.sectionId, abierta));
|
|
14665
|
+
}
|
|
14666
|
+
});
|
|
14667
|
+
}
|
|
14668
|
+
onAccOpenChange(openId) {
|
|
14669
|
+
if (!this.single())
|
|
14670
|
+
return;
|
|
14671
|
+
this.form.setOpen(openId ? this.sectionId : null);
|
|
14672
|
+
}
|
|
14673
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FormSectionComponent, isStandalone: true, selector: "ius-form-section", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ius-form__section--plain": "!collapsible()", "class.ius-form__section--divided-acc": "collapsible() && variantEfectiva() === 'divided'", "attr.id": "sectionId" }, classAttribute: "ius-form__section" }, viewQueries: [{ propertyName: "cuerpo", first: true, predicate: ["cuerpo"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\n<ng-template #campos>\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\n <ng-content />\n </div>\n</ng-template>\n\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\n<ng-template #cuerpo>\n @if (description()) {\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n</ng-template>\n\n@if (collapsible()) {\n <ius-accordion\n [variant]=\"variantEfectiva()\"\n [items]=\"items()\"\n [open]=\"accOpen()\"\n [defaultOpen]=\"accDefaultOpen()\"\n (openChange)=\"onAccOpenChange($event)\"\n />\n} @else {\n @if (title() || description()) {\n <div class=\"ius-form__section-head\">\n @if (title()) {\n <div class=\"ius-form__section-title\">\n @if (icon()) {\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n }\n {{ title() }}\n </div>\n }\n @if (description()) {\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n}\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14675
|
+
}
|
|
14676
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
14677
|
+
type: Component,
|
|
14678
|
+
args: [{ selector: 'ius-form-section', standalone: true, imports: [NgTemplateOutlet, AccordionComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14679
|
+
class: 'ius-form__section',
|
|
14680
|
+
'[class.ius-form__section--plain]': '!collapsible()',
|
|
14681
|
+
'[class.ius-form__section--divided-acc]': "collapsible() && variantEfectiva() === 'divided'",
|
|
14682
|
+
'[attr.id]': 'sectionId',
|
|
14683
|
+
}, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\n<ng-template #campos>\n <div class=\"ius-form__grid\" [attr.data-cols]=\"colsEfectivas()\">\n <ng-content />\n </div>\n</ng-template>\n\n<!-- Contenido del panel del Accordion (descripci\u00F3n + rejilla). -->\n<ng-template #cuerpo>\n @if (description()) {\n <p class=\"ius-form__section-desc ius-form__section-desc--acc\">{{ description() }}</p>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n</ng-template>\n\n@if (collapsible()) {\n <ius-accordion\n [variant]=\"variantEfectiva()\"\n [items]=\"items()\"\n [open]=\"accOpen()\"\n [defaultOpen]=\"accDefaultOpen()\"\n (openChange)=\"onAccOpenChange($event)\"\n />\n} @else {\n @if (title() || description()) {\n <div class=\"ius-form__section-head\">\n @if (title()) {\n <div class=\"ius-form__section-title\">\n @if (icon()) {\n <span translate=\"no\" class=\"ius-icon\">{{ icon() }}</span>\n }\n {{ title() }}\n </div>\n }\n @if (description()) {\n <p class=\"ius-form__section-desc\">{{ description() }}</p>\n }\n </div>\n }\n <ng-container *ngTemplateOutlet=\"campos\" />\n}\n", styles: ["@charset \"UTF-8\";:host{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--ius-space-md)}:host(.ius-form__section--plain){padding-top:var(--ius-space-md);border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--plain:first-child){padding-top:0;border-top:0}:host(.ius-form__section--divided-acc){border-top:1px solid var(--ius-stroke)}:host(.ius-form__section--divided-acc:first-child){border-top:0}.ius-form__section-head{display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-form__section-title{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-form__section-title .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-secondary)}.ius-form__section-desc{margin:0;font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}.ius-form__section-desc--acc{margin-bottom:var(--ius-space-md)}.ius-form__grid{display:grid;gap:var(--ius-space-md) var(--ius-space-lg);grid-template-columns:1fr;align-content:start}.ius-form__grid[data-cols=\"1\"]{grid-template-columns:1fr}@container (min-width: 600px){.ius-form__grid[data-cols=\"2\"],.ius-form__grid[data-cols=auto]{grid-template-columns:1fr 1fr}}\n"] }]
|
|
14684
|
+
}], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], cuerpo: [{ type: i0.ViewChild, args: ['cuerpo', { isSignal: true }] }] } });
|
|
14685
|
+
|
|
14686
|
+
/**
|
|
14687
|
+
* FormField — envoltorio de un campo en la rejilla del `ius-form` /
|
|
14688
|
+
* `ius-form-section`; `span="full"` cruza ambas columnas. Port de
|
|
14689
|
+
* `FormField` del golden `Form.jsx` (`.ius-form__field[data-span]`).
|
|
14690
|
+
*/
|
|
14691
|
+
class FormFieldComponent {
|
|
14692
|
+
constructor() {
|
|
14693
|
+
/** `1` (default) una columna · `full` ambas. */
|
|
14694
|
+
this.span = input(1, /* @ts-ignore */
|
|
14695
|
+
...(ngDevMode ? [{ debugName: "span" }] : /* istanbul ignore next */ []));
|
|
14696
|
+
}
|
|
14697
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14698
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: FormFieldComponent, isStandalone: true, selector: "ius-form-field", inputs: { span: { classPropertyName: "span", publicName: "span", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-span": "span() === 'full' ? 'full' : null" }, classAttribute: "ius-form__field" }, ngImport: i0, template: '<ng-content />', isInline: true, styles: [":host{display:block;min-width:0}:host([data-span=\"full\"]){grid-column:1 / -1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14699
|
+
}
|
|
14700
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
14701
|
+
type: Component,
|
|
14702
|
+
args: [{ selector: 'ius-form-field', standalone: true, template: '<ng-content />', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14703
|
+
class: 'ius-form__field',
|
|
14704
|
+
'[attr.data-span]': "span() === 'full' ? 'full' : null",
|
|
14705
|
+
}, styles: [":host{display:block;min-width:0}:host([data-span=\"full\"]){grid-column:1 / -1}\n"] }]
|
|
14706
|
+
}], propDecorators: { span: [{ type: i0.Input, args: [{ isSignal: true, alias: "span", required: false }] }] } });
|
|
14707
|
+
|
|
14708
|
+
/** Slot de acción a la derecha del título (TextButton, IconButton, ShowMore…). */
|
|
14709
|
+
class IusSectionTitleActionDirective {
|
|
14710
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusSectionTitleActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
14711
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: IusSectionTitleActionDirective, isStandalone: true, selector: "[iusSectionTitleAction]", ngImport: i0 }); }
|
|
14712
|
+
}
|
|
14713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: IusSectionTitleActionDirective, decorators: [{
|
|
14714
|
+
type: Directive,
|
|
14715
|
+
args: [{ selector: '[iusSectionTitleAction]', standalone: true }]
|
|
14716
|
+
}] });
|
|
14717
|
+
/**
|
|
14718
|
+
* SectionTitle — Ius Design v2 (familia layout).
|
|
14719
|
+
*
|
|
14720
|
+
* **Título de una sección de contenido**: encabezado display/bold con hairline
|
|
14721
|
+
* inferior opcional, ícono de ayuda opcional (abre `ius-popover` con título +
|
|
14722
|
+
* contenido) y slot de acción a la derecha (`[iusSectionTitleAction]`). Titula
|
|
14723
|
+
* bloques dentro de un panel, tarjeta o pestaña, en Sentence case.
|
|
14724
|
+
*
|
|
14725
|
+
* No confundir con `ius-section-header` (grupos de lista/árbol) ni con
|
|
14726
|
+
* `ius-page-header` (encabezado de la vista completa).
|
|
14727
|
+
*
|
|
14728
|
+
* Decisión del port (golden `SectionTitle.jsx`): `as` cambia la etiqueta raíz
|
|
14729
|
+
* en React; aquí el host es fijo (`ius-section-title`), así que `h2`–`h5` se
|
|
14730
|
+
* expresan como `role="heading"` + `aria-level` (misma semántica para AT).
|
|
14731
|
+
*/
|
|
14732
|
+
class SectionTitleComponent {
|
|
14733
|
+
constructor() {
|
|
14734
|
+
/** Contenido de ayuda. Si se pasa, aparece el ícono que abre el Popover. */
|
|
14735
|
+
this.help = input(undefined, /* @ts-ignore */
|
|
14736
|
+
...(ngDevMode ? [{ debugName: "help" }] : /* istanbul ignore next */ []));
|
|
14737
|
+
/** Título (en negrita) del Popover de ayuda. */
|
|
14738
|
+
this.helpTitle = input(undefined, /* @ts-ignore */
|
|
14739
|
+
...(ngDevMode ? [{ debugName: "helpTitle" }] : /* istanbul ignore next */ []));
|
|
14740
|
+
/** Glifo Material Symbols del ícono de ayuda. Default `help`. */
|
|
14741
|
+
this.helpIcon = input('help', /* @ts-ignore */
|
|
14742
|
+
...(ngDevMode ? [{ debugName: "helpIcon" }] : /* istanbul ignore next */ []));
|
|
14743
|
+
/** Colocación del Popover de ayuda. Default `top`. */
|
|
14744
|
+
this.helpPlacement = input('top', /* @ts-ignore */
|
|
14745
|
+
...(ngDevMode ? [{ debugName: "helpPlacement" }] : /* istanbul ignore next */ []));
|
|
14746
|
+
/** Cómo se dispara el Popover de ayuda. Default `click`. */
|
|
14747
|
+
this.helpTrigger = input('click', /* @ts-ignore */
|
|
14748
|
+
...(ngDevMode ? [{ debugName: "helpTrigger" }] : /* istanbul ignore next */ []));
|
|
14749
|
+
/** Línea inferior (hairline) bajo el título. Default `true`. */
|
|
14750
|
+
this.divider = input(true, { ...(ngDevMode ? { debugName: "divider" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14751
|
+
/** Trunca el título con elipsis en una línea. Default `false`. */
|
|
14752
|
+
this.truncate = input(false, { ...(ngDevMode ? { debugName: "truncate" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
14753
|
+
/** Escala. `small` = fs-sm · `medium` (default) = fs-base. */
|
|
14754
|
+
this.size = input('medium', /* @ts-ignore */
|
|
14755
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14756
|
+
/** Semántica del raíz. `div` (default) · `h2`–`h5`. */
|
|
14757
|
+
this.as = input('div', /* @ts-ignore */
|
|
14758
|
+
...(ngDevMode ? [{ debugName: "as" }] : /* istanbul ignore next */ []));
|
|
14759
|
+
this.headingRole = computed(() => (this.as() !== 'div' ? 'heading' : null), /* @ts-ignore */
|
|
14760
|
+
...(ngDevMode ? [{ debugName: "headingRole" }] : /* istanbul ignore next */ []));
|
|
14761
|
+
this.headingLevel = computed(() => {
|
|
14762
|
+
const as = this.as();
|
|
14763
|
+
return as === 'div' ? null : Number(as.slice(1));
|
|
14764
|
+
}, /* @ts-ignore */
|
|
14765
|
+
...(ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []));
|
|
14766
|
+
this.helpAriaLabel = computed(() => this.helpTitle() ?? 'Ayuda', /* @ts-ignore */
|
|
14767
|
+
...(ngDevMode ? [{ debugName: "helpAriaLabel" }] : /* istanbul ignore next */ []));
|
|
14768
|
+
}
|
|
14769
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14770
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SectionTitleComponent, isStandalone: true, selector: "ius-section-title", inputs: { help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, helpTitle: { classPropertyName: "helpTitle", publicName: "helpTitle", isSignal: true, isRequired: false, transformFunction: null }, helpIcon: { classPropertyName: "helpIcon", publicName: "helpIcon", isSignal: true, isRequired: false, transformFunction: null }, helpPlacement: { classPropertyName: "helpPlacement", publicName: "helpPlacement", isSignal: true, isRequired: false, transformFunction: null }, helpTrigger: { classPropertyName: "helpTrigger", publicName: "helpTrigger", isSignal: true, isRequired: false, transformFunction: null }, divider: { classPropertyName: "divider", publicName: "divider", isSignal: true, isRequired: false, transformFunction: null }, truncate: { classPropertyName: "truncate", publicName: "truncate", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, as: { classPropertyName: "as", publicName: "as", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-size": "size()", "attr.data-divider": "divider() ? 'true' : null", "attr.data-truncate": "truncate() ? 'true' : null", "attr.role": "headingRole()", "attr.aria-level": "headingLevel()" }, classAttribute: "ius-section-title" }, ngImport: i0, template: "<span class=\"ius-section-title__label\"><ng-content /></span>\n\n@if (help() != null) {\n <ius-popover\n [title]=\"helpTitle()\"\n [content]=\"help()\"\n [placement]=\"helpPlacement()\"\n [trigger]=\"helpTrigger()\"\n >\n <span\n translate=\"no\"\n class=\"ius-icon ius-section-title__help\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"helpAriaLabel()\"\n >{{ helpIcon() }}</span\n >\n </ius-popover>\n}\n\n<span class=\"ius-section-title__action\"><ng-content select=\"[iusSectionTitleAction]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_st-fs: var(--ius-fs-base);--_st-lh: var(--ius-lh-base);display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin:0;box-sizing:border-box;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_st-fs);line-height:var(--_st-lh);color:var(--ius-text-primary)}:host([data-size=small]){--_st-fs: var(--ius-fs-sm);--_st-lh: var(--ius-lh-sm)}:host([data-divider=true]){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-section-title__label{min-width:0}:host([data-truncate=true]) .ius-section-title__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-section-title__action{margin-left:auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-section-title__action:empty{display:none}.ius-section-title__help{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-section-title__help:hover{color:var(--ius-text-secondary)}.ius-section-title__help:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14771
|
+
}
|
|
14772
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
14773
|
+
type: Component,
|
|
14774
|
+
args: [{ selector: 'ius-section-title', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
14775
|
+
class: 'ius-section-title',
|
|
14776
|
+
'[attr.data-size]': 'size()',
|
|
14777
|
+
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
14778
|
+
'[attr.data-truncate]': "truncate() ? 'true' : null",
|
|
14779
|
+
// `as` es palabra reservada en expresiones de plantilla → se lee vía computed.
|
|
14780
|
+
'[attr.role]': 'headingRole()',
|
|
14781
|
+
'[attr.aria-level]': 'headingLevel()',
|
|
14782
|
+
}, template: "<span class=\"ius-section-title__label\"><ng-content /></span>\n\n@if (help() != null) {\n <ius-popover\n [title]=\"helpTitle()\"\n [content]=\"help()\"\n [placement]=\"helpPlacement()\"\n [trigger]=\"helpTrigger()\"\n >\n <span\n translate=\"no\"\n class=\"ius-icon ius-section-title__help\"\n tabindex=\"0\"\n role=\"button\"\n [attr.aria-label]=\"helpAriaLabel()\"\n >{{ helpIcon() }}</span\n >\n </ius-popover>\n}\n\n<span class=\"ius-section-title__action\"><ng-content select=\"[iusSectionTitleAction]\" /></span>\n", styles: ["@charset \"UTF-8\";:host{--_st-fs: var(--ius-fs-base);--_st-lh: var(--ius-lh-base);display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin:0;box-sizing:border-box;font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_st-fs);line-height:var(--_st-lh);color:var(--ius-text-primary)}:host([data-size=small]){--_st-fs: var(--ius-fs-sm);--_st-lh: var(--ius-lh-sm)}:host([data-divider=true]){padding-bottom:var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}.ius-section-title__label{min-width:0}:host([data-truncate=true]) .ius-section-title__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-section-title__action{margin-left:auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs)}.ius-section-title__action:empty{display:none}.ius-section-title__help{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary);cursor:pointer;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-section-title__help:hover{color:var(--ius-text-secondary)}.ius-section-title__help:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
14783
|
+
}], propDecorators: { help: [{ type: i0.Input, args: [{ isSignal: true, alias: "help", required: false }] }], helpTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTitle", required: false }] }], helpIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpIcon", required: false }] }], helpPlacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpPlacement", required: false }] }], helpTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpTrigger", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], truncate: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncate", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], as: [{ type: i0.Input, args: [{ isSignal: true, alias: "as", required: false }] }] } });
|
|
14784
|
+
|
|
14785
|
+
/**
|
|
14786
|
+
* Breadcrumb — Ius Design v2 (familia navigation).
|
|
14787
|
+
*
|
|
14788
|
+
* Rastro de **navegación jerárquica** (Cliente › Expediente › Proceso ›
|
|
14789
|
+
* Actuación). Cada nivel es un enlace (o botón) salvo el último, que es la
|
|
14790
|
+
* página actual (`aria-current="page"`, navy `primary-900`, peso medio).
|
|
14791
|
+
* Separador chevron o slash; con `maxItems` los niveles intermedios se pliegan
|
|
14792
|
+
* en un menú "…" (`ius-popover` por clic). Para secciones paralelas → Tabs.
|
|
14793
|
+
*
|
|
14794
|
+
* Decisiones del port (golden `Breadcrumb.jsx` / `.d.ts`):
|
|
14795
|
+
* - `item.onClick` del golden no existe: toda navegación (crumbs y menú "…")
|
|
14796
|
+
* sale por el output `navigate` `{ item, index, event }`; el consumidor hace
|
|
14797
|
+
* `event.preventDefault()` si enruta por SPA.
|
|
14798
|
+
* - El menú "…" compone `ius-popover` (trigger click, controlado con `open`)
|
|
14799
|
+
* y se cierra al elegir un nivel.
|
|
14800
|
+
*/
|
|
14801
|
+
class BreadcrumbComponent {
|
|
14802
|
+
constructor() {
|
|
14803
|
+
/** Niveles, de la raíz (izquierda) a la página actual (derecha). */
|
|
14804
|
+
this.items = input([], /* @ts-ignore */
|
|
14805
|
+
...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
14806
|
+
/** Separador entre crumbs. Default `chevron`. */
|
|
14807
|
+
this.separator = input('chevron', /* @ts-ignore */
|
|
14808
|
+
...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
|
|
14809
|
+
/** Tamaño. `small` · `medium` (default). */
|
|
14810
|
+
this.size = input('medium', /* @ts-ignore */
|
|
14811
|
+
...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
|
|
14812
|
+
/** Si > 0 y hay más de `maxItems` crumbs, colapsa los del medio en un menú "…". */
|
|
14813
|
+
this.maxItems = input(0, { ...(ngDevMode ? { debugName: "maxItems" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14814
|
+
/** Crumbs visibles al inicio cuando se colapsa. Default 1. */
|
|
14815
|
+
this.itemsBeforeCollapse = input(1, { ...(ngDevMode ? { debugName: "itemsBeforeCollapse" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14816
|
+
/** Crumbs visibles al final cuando se colapsa. Default 2. */
|
|
14817
|
+
this.itemsAfterCollapse = input(2, { ...(ngDevMode ? { debugName: "itemsAfterCollapse" } : /* istanbul ignore next */ {}), transform: numberAttribute });
|
|
14818
|
+
/** Etiqueta accesible del `<nav>`. Default `Ruta de navegación`. */
|
|
14819
|
+
this.ariaLabel = input('Ruta de navegación', /* @ts-ignore */
|
|
14820
|
+
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
14821
|
+
/** Navegación de cualquier crumb, también desde el menú "…" (`onNavigate`). */
|
|
14822
|
+
this.navigate = output();
|
|
14823
|
+
/** Apertura del menú "…" (controlada para cerrarlo al elegir un nivel). */
|
|
14824
|
+
this.moreOpen = signal(false, /* @ts-ignore */
|
|
14825
|
+
...(ngDevMode ? [{ debugName: "moreOpen" }] : /* istanbul ignore next */ []));
|
|
14826
|
+
this.total = computed(() => this.items().length, /* @ts-ignore */
|
|
14827
|
+
...(ngDevMode ? [{ debugName: "total" }] : /* istanbul ignore next */ []));
|
|
14828
|
+
/** Todos los crumbs, o cabeza + "…" + cola cuando se colapsa. */
|
|
14829
|
+
this.rendered = computed(() => {
|
|
14830
|
+
const items = this.items();
|
|
14831
|
+
const total = items.length;
|
|
14832
|
+
const max = this.maxItems();
|
|
14833
|
+
const before = this.itemsBeforeCollapse();
|
|
14834
|
+
const after = this.itemsAfterCollapse();
|
|
14835
|
+
const collapse = max > 0 && total > max && total > before + after;
|
|
14836
|
+
if (!collapse)
|
|
14837
|
+
return items.map((item, index) => ({ kind: 'crumb', item, index }));
|
|
14838
|
+
const head = items.slice(0, before).map((item, index) => ({ kind: 'crumb', item, index }));
|
|
14839
|
+
const tail = items
|
|
14840
|
+
.slice(total - after)
|
|
14841
|
+
.map((item, i) => ({ kind: 'crumb', item, index: total - after + i }));
|
|
14842
|
+
const hidden = items.slice(before, total - after).map((item, i) => ({ item, index: before + i }));
|
|
14843
|
+
return [...head, { kind: 'more', hidden }, ...tail];
|
|
14844
|
+
}, /* @ts-ignore */
|
|
14845
|
+
...(ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []));
|
|
14846
|
+
}
|
|
14847
|
+
isCurrent(index) {
|
|
14848
|
+
return index === this.total() - 1;
|
|
14849
|
+
}
|
|
14850
|
+
onCrumb(item, index, event) {
|
|
14851
|
+
this.navigate.emit({ item, index, event });
|
|
14852
|
+
}
|
|
14853
|
+
onHidden(item, index, event) {
|
|
14854
|
+
this.navigate.emit({ item, index, event });
|
|
14855
|
+
this.moreOpen.set(false);
|
|
14856
|
+
}
|
|
14857
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14858
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BreadcrumbComponent, isStandalone: true, selector: "ius-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, itemsBeforeCollapse: { classPropertyName: "itemsBeforeCollapse", publicName: "itemsBeforeCollapse", isSignal: true, isRequired: false, transformFunction: null }, itemsAfterCollapse: { classPropertyName: "itemsAfterCollapse", publicName: "itemsAfterCollapse", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { navigate: "navigate" }, ngImport: i0, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <ol class=\"ius-bc\" [attr.data-size]=\"size() !== 'medium' ? size() : null\">\n @for (entry of rendered(); track $index; let i = $index) {\n @if (i > 0) {\n <li class=\"ius-bc__item\" aria-hidden=\"true\">\n @if (separator() === 'slash') {\n <span class=\"ius-bc__sep ius-bc__sep--slash\">/</span>\n } @else {\n <span class=\"ius-bc__sep\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\n }\n </li>\n }\n\n @if (entry.kind === 'more') {\n <li class=\"ius-bc__item\">\n <ius-popover\n placement=\"bottom\"\n trigger=\"click\"\n [showArrow]=\"true\"\n padding=\"compact\"\n [open]=\"moreOpen()\"\n (openChange)=\"moreOpen.set($event)\"\n >\n <button type=\"button\" class=\"ius-bc__more\" aria-label=\"Mostrar ruta oculta\">\n <span translate=\"no\" class=\"ius-icon\">more_horiz</span>\n </button>\n <div iusPopoverContent class=\"ius-bc__menu\">\n @for (h of entry.hidden; track h.index) {\n <button type=\"button\" class=\"ius-bc__menu-item\" (click)=\"onHidden(h.item, h.index, $event)\">\n @if (h.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ h.item.icon }}</span>\n }\n <span>{{ h.item.label }}</span>\n </button>\n }\n </div>\n </ius-popover>\n </li>\n } @else {\n <li class=\"ius-bc__item\">\n @if (isCurrent(entry.index)) {\n <span class=\"ius-bc__crumb\" aria-current=\"page\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </span>\n } @else if (entry.item.href) {\n <a class=\"ius-bc__crumb\" [href]=\"entry.item.href\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </a>\n } @else {\n <button type=\"button\" class=\"ius-bc__crumb\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </button>\n }\n </li>\n }\n }\n </ol>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-bc{-webkit-user-select:none;user-select:none;--_bc-fs: var(--ius-fs-base);--_bc-lh: var(--ius-lh-base);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xs);display:flex;align-items:center;flex-wrap:wrap;font-family:var(--ius-font-body);margin:0;padding:0;list-style:none}.ius-bc[data-size=small]{--_bc-fs: var(--ius-fs-sm);--_bc-lh: var(--ius-lh-sm);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xxs)}.ius-bc__item{display:inline-flex;align-items:center}.ius-bc__crumb{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);margin:0;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;gap:var(--_bc-gap);font-family:inherit;font-size:var(--_bc-fs);line-height:var(--_bc-lh);font-weight:var(--ius-fw-regular);color:var(--ius-text-secondary);text-decoration:none;cursor:pointer;max-width:220px;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__crumb .ius-bc__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-bc__crumb .ius-icon{font-size:var(--_bc-icon);line-height:1;flex:0 0 auto}a.ius-bc__crumb:hover,button.ius-bc__crumb:hover{color:var(--ius-primary-500)}a.ius-bc__crumb:focus-visible,button.ius-bc__crumb:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__crumb[aria-current=page]{color:var(--ius-primary-900);font-weight:var(--ius-fw-medium);cursor:default}.ius-bc__sep{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-6);margin:0 var(--ius-space-xxs);-webkit-user-select:none;user-select:none}.ius-bc__sep .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__sep--slash{font-size:var(--_bc-fs);line-height:var(--_bc-lh)}.ius-bc__more{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;color:var(--ius-text-secondary);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__more:hover{color:var(--ius-primary-500);background:var(--ius-neutral-2)}.ius-bc__more:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__more .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:160px}.ius-bc__menu-item{appearance:none;border:0;background:transparent;text-align:left;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);cursor:pointer;white-space:nowrap}.ius-bc__menu-item:hover{background:var(--ius-info-100);color:var(--ius-primary-900)}.ius-bc__menu-item .ius-icon{font-size:var(--ius-icon-md);line-height:1;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-bc__menu-item:hover .ius-icon{color:var(--ius-primary-700)}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14859
|
+
}
|
|
14860
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
14861
|
+
type: Component,
|
|
14862
|
+
args: [{ selector: 'ius-breadcrumb', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel()\">\n <ol class=\"ius-bc\" [attr.data-size]=\"size() !== 'medium' ? size() : null\">\n @for (entry of rendered(); track $index; let i = $index) {\n @if (i > 0) {\n <li class=\"ius-bc__item\" aria-hidden=\"true\">\n @if (separator() === 'slash') {\n <span class=\"ius-bc__sep ius-bc__sep--slash\">/</span>\n } @else {\n <span class=\"ius-bc__sep\"><span translate=\"no\" class=\"ius-icon\">chevron_right</span></span>\n }\n </li>\n }\n\n @if (entry.kind === 'more') {\n <li class=\"ius-bc__item\">\n <ius-popover\n placement=\"bottom\"\n trigger=\"click\"\n [showArrow]=\"true\"\n padding=\"compact\"\n [open]=\"moreOpen()\"\n (openChange)=\"moreOpen.set($event)\"\n >\n <button type=\"button\" class=\"ius-bc__more\" aria-label=\"Mostrar ruta oculta\">\n <span translate=\"no\" class=\"ius-icon\">more_horiz</span>\n </button>\n <div iusPopoverContent class=\"ius-bc__menu\">\n @for (h of entry.hidden; track h.index) {\n <button type=\"button\" class=\"ius-bc__menu-item\" (click)=\"onHidden(h.item, h.index, $event)\">\n @if (h.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ h.item.icon }}</span>\n }\n <span>{{ h.item.label }}</span>\n </button>\n }\n </div>\n </ius-popover>\n </li>\n } @else {\n <li class=\"ius-bc__item\">\n @if (isCurrent(entry.index)) {\n <span class=\"ius-bc__crumb\" aria-current=\"page\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </span>\n } @else if (entry.item.href) {\n <a class=\"ius-bc__crumb\" [href]=\"entry.item.href\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </a>\n } @else {\n <button type=\"button\" class=\"ius-bc__crumb\" (click)=\"onCrumb(entry.item, entry.index, $event)\">\n @if (entry.item.icon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ entry.item.icon }}</span>\n }\n <span class=\"ius-bc__label\">{{ entry.item.label }}</span>\n </button>\n }\n </li>\n }\n }\n </ol>\n</nav>\n", styles: ["@charset \"UTF-8\";:host{display:block}.ius-bc{-webkit-user-select:none;user-select:none;--_bc-fs: var(--ius-fs-base);--_bc-lh: var(--ius-lh-base);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xs);display:flex;align-items:center;flex-wrap:wrap;font-family:var(--ius-font-body);margin:0;padding:0;list-style:none}.ius-bc[data-size=small]{--_bc-fs: var(--ius-fs-sm);--_bc-lh: var(--ius-lh-sm);--_bc-icon: var(--ius-icon-sm);--_bc-gap: var(--ius-space-xxs)}.ius-bc__item{display:inline-flex;align-items:center}.ius-bc__crumb{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);margin:0;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;gap:var(--_bc-gap);font-family:inherit;font-size:var(--_bc-fs);line-height:var(--_bc-lh);font-weight:var(--ius-fw-regular);color:var(--ius-text-secondary);text-decoration:none;cursor:pointer;max-width:220px;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__crumb .ius-bc__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-bc__crumb .ius-icon{font-size:var(--_bc-icon);line-height:1;flex:0 0 auto}a.ius-bc__crumb:hover,button.ius-bc__crumb:hover{color:var(--ius-primary-500)}a.ius-bc__crumb:focus-visible,button.ius-bc__crumb:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__crumb[aria-current=page]{color:var(--ius-primary-900);font-weight:var(--ius-fw-medium);cursor:default}.ius-bc__sep{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-6);margin:0 var(--ius-space-xxs);-webkit-user-select:none;user-select:none}.ius-bc__sep .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__sep--slash{font-size:var(--_bc-fs);line-height:var(--_bc-lh)}.ius-bc__more{appearance:none;border:0;background:transparent;padding:var(--ius-space-xxs) var(--ius-space-xxs);border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;color:var(--ius-text-secondary);cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-bc__more:hover{color:var(--ius-primary-500);background:var(--ius-neutral-2)}.ius-bc__more:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-bc__more .ius-icon{font-size:var(--_bc-icon);line-height:1}.ius-bc__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:160px}.ius-bc__menu-item{appearance:none;border:0;background:transparent;text-align:left;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);display:flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary);cursor:pointer;white-space:nowrap}.ius-bc__menu-item:hover{background:var(--ius-info-100);color:var(--ius-primary-900)}.ius-bc__menu-item .ius-icon{font-size:var(--ius-icon-md);line-height:1;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-bc__menu-item:hover .ius-icon{color:var(--ius-primary-700)}\n"] }]
|
|
14863
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], itemsBeforeCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsBeforeCollapse", required: false }] }], itemsAfterCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsAfterCollapse", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], navigate: [{ type: i0.Output, args: ["navigate"] }] } });
|
|
14864
|
+
|
|
14185
14865
|
/*
|
|
14186
14866
|
* Public API de @litigiovirtual/ius-design-components v2.
|
|
14187
14867
|
* La librería se está reconstruyendo componente a componente desde las
|
|
@@ -14193,5 +14873,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14193
14873
|
* Generated bundle index. Do not edit.
|
|
14194
14874
|
*/
|
|
14195
14875
|
|
|
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 };
|
|
14876
|
+
export { AccordionComponent, AccountItemComponent, AlertComponent, AppLayoutComponent, AvatarComponent, BreadcrumbComponent, ButtonComponent, CaptchaFieldComponent, CardComponent, CarouselComponent, CheckboxComponent, ChipComponent, CircularProgressComponent, CodeFieldComponent, CountdownComponent, CountdownRingComponent, DescriptionListComponent, DividerComponent, DrawerComponent, DropdownComponent, EVENT_KINDS, EVENT_KIND_ICON, EleniaBubbleComponent, EleniaOrbComponent, EmptyStateComponent, FlexComponent, FormComponent, FormFieldComponent, FormSectionComponent, HeaderBarComponent, ILLUSTRATIONS, ILLUSTRATION_ALIAS, ILLUSTRATION_NAMES, IUS_FILTER_OPERATORS, IUS_TOAST_DEFAULT_DURATION, IUS_TOAST_DEFAULT_ICON, IconButtonComponent, IllustrationComponent, InsigniaComponent, IusAccountItemNameDirective, IusAccountItemSubtitleDirective, IusAccountItemTrailingDirective, IusAlertActionsDirective, IusAlertTrailingDirective, IusCardFooterDirective, IusCardHeaderDirective, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective, IusDrawerTitleDirective, IusDropdownTriggerDirective, IusFormFooterDirective, IusListCardLeadingDirective, IusListCardOverlineDirective, IusListCardParagraphDirective, IusListCardSubtitleDirective, IusListCardTitleDirective, IusListViewFiltersDirective, IusListViewFooterEndDirective, IusListViewFooterStartDirective, IusListViewHeaderEndDirective, IusListViewHeaderStartDirective, IusListViewToolbarDirective, IusMenuItemTrailingDirective, IusModalFooterDirective, IusPageHeaderActionsDirective, IusPageHeaderBreadcrumbDirective, IusPageHeaderToolbarDirective, IusPersonItemNameDirective, IusPersonItemTrailingDirective, IusSectionTitleActionDirective, IusSettingsNavFooterDirective, IusSettingsNavHeaderDirective, IusStatDeltaDirective, IusStatSparklineDirective, IusTagPrefixDirective, IusTagSuffixDirective, IusToastActionDirective, IusUserMenuFooterDirective, LinearProgressBarComponent, ListCardComponent, ListViewComponent, LoadingComponent, LoadingMarkComponent, MenuComponent, MenuItemComponent, ModalComponent, MultiTextFieldComponent, NavUserComponent, NumberFieldComponent, ORB_PERIODS, OauthButtonComponent, OptionItemComponent, PageHeaderComponent, PersonItemComponent, PersonPickerComponent, PlanUsageItemComponent, PopoverComponent, QueryBuilderComponent, STATUS_TONES, STATUS_VOCAB, STATUS_VOCABS, STATUS_VOCABS_PENDING, ScrollAreaComponent, SearchBarComponent, SectionHeaderComponent, SectionTitleComponent, SegmentGroupComponent, SegmentedControlComponent, SelectComponent, SettingsNavComponent, ShowMoreComponent, SkeletonComponent, SplitterComponent, StatComponent, StatGroupComponent, StatusChipComponent, StatusStateComponent, TableComponent, TabsComponent, TagComponent, TextAreaComponent, TextButtonComponent, TextComponent, TextFieldComponent, TimelineComponent, ToastComponent, ToastService, ToastViewportComponent, TooltipComponent, UserMenuComponent, WizardComponent, WizardController, WizardNavComponent, createWizard, eventKindOptions, iusSegColor, pose, poseIso, poseSpeaking, poseThinking, renderCubeSvg, resolveEventIcon, resolveIllustration, resolveStatus, statusOptions, statusOrder, statusToneVars, statusVocab, voiceEnv };
|
|
14197
14877
|
//# sourceMappingURL=litigiovirtual-ius-design-components.mjs.map
|