@litigiovirtual/ius-design-components 2.2.9 → 2.2.10
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.
|
@@ -536,7 +536,7 @@ class EleniaOrbComponent {
|
|
|
536
536
|
});
|
|
537
537
|
}
|
|
538
538
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EleniaOrbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
539
|
-
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 }); }
|
|
539
|
+
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 }); }
|
|
540
540
|
}
|
|
541
541
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EleniaOrbComponent, decorators: [{
|
|
542
542
|
type: Component,
|
|
@@ -549,7 +549,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
549
549
|
'[style.width.px]': 'size',
|
|
550
550
|
'[style.height.px]': 'size',
|
|
551
551
|
'[style.--_orb]': "size + 'px'",
|
|
552
|
-
}, 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"] }]
|
|
552
|
+
}, 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"] }]
|
|
553
553
|
}], propDecorators: { size: [{
|
|
554
554
|
type: Input,
|
|
555
555
|
args: [{ transform: numberAttribute }]
|
|
@@ -704,7 +704,7 @@ class OauthButtonComponent {
|
|
|
704
704
|
return this.ariaLabel ?? `Continuar con ${this.text}`;
|
|
705
705
|
}
|
|
706
706
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OauthButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
707
|
-
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", "ariaCurrent", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
707
|
+
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", "ariaCurrent", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
708
708
|
}
|
|
709
709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OauthButtonComponent, decorators: [{
|
|
710
710
|
type: Component,
|
|
@@ -712,7 +712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
712
712
|
'[attr.data-provider]': 'provider',
|
|
713
713
|
'[attr.data-size]': 'size',
|
|
714
714
|
'[attr.data-disabled]': 'disabled || null',
|
|
715
|
-
}, 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"] }]
|
|
715
|
+
}, 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"] }]
|
|
716
716
|
}], propDecorators: { provider: [{
|
|
717
717
|
type: Input,
|
|
718
718
|
args: [{ required: true }]
|
|
@@ -1032,7 +1032,7 @@ class PopoverComponent {
|
|
|
1032
1032
|
}
|
|
1033
1033
|
}
|
|
1034
1034
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1035
|
-
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-datefilter-pop{max-width:none;padding:var(--ius-space-md)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}.ius-popover.ius-datepicker-pop{min-width:0;max-width:none;padding:0;box-sizing:border-box}.ius-popover.ius-autocomplete-pop{min-width:0;max-width:none;box-sizing:border-box;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1035
|
+
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-datefilter-pop{max-width:none;padding:var(--ius-space-md)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}.ius-popover.ius-datepicker-pop{min-width:0;max-width:none;padding:0;box-sizing:border-box}.ius-popover.ius-autocomplete-pop{min-width:0;max-width:none;box-sizing:border-box;overflow:hidden}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1036
1036
|
}
|
|
1037
1037
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
1038
1038
|
type: Component,
|
|
@@ -1042,7 +1042,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1042
1042
|
'(focusin)': 'onHostFocusIn()',
|
|
1043
1043
|
'(focusout)': 'onHostFocusOut()',
|
|
1044
1044
|
'(click)': 'onHostClick()',
|
|
1045
|
-
}, 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-datefilter-pop{max-width:none;padding:var(--ius-space-md)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}.ius-popover.ius-datepicker-pop{min-width:0;max-width:none;padding:0;box-sizing:border-box}.ius-popover.ius-autocomplete-pop{min-width:0;max-width:none;box-sizing:border-box;overflow:hidden}\n"] }]
|
|
1045
|
+
}, 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-datefilter-pop{max-width:none;padding:var(--ius-space-md)}.ius-popover.ius-personpicker-pop{min-width:0;max-width:none;box-sizing:border-box}.ius-popover.ius-datepicker-pop{min-width:0;max-width:none;padding:0;box-sizing:border-box}.ius-popover.ius-autocomplete-pop{min-width:0;max-width:none;box-sizing:border-box;overflow:hidden}\n"] }]
|
|
1046
1046
|
}], propDecorators: { title: [{
|
|
1047
1047
|
type: Input
|
|
1048
1048
|
}], content: [{
|
|
@@ -1199,7 +1199,7 @@ class ShowMoreComponent {
|
|
|
1199
1199
|
return this.expanded && !this.collapsible;
|
|
1200
1200
|
}
|
|
1201
1201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShowMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1202
|
-
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 }); }
|
|
1202
|
+
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 }); }
|
|
1203
1203
|
}
|
|
1204
1204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ShowMoreComponent, decorators: [{
|
|
1205
1205
|
type: Component,
|
|
@@ -1207,7 +1207,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
1207
1207
|
'[attr.data-align]': "align !== 'center' ? align : null",
|
|
1208
1208
|
'[style.display]': "hidden ? 'none' : ''",
|
|
1209
1209
|
'[attr.aria-hidden]': 'hidden || null',
|
|
1210
|
-
}, 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"] }]
|
|
1210
|
+
}, 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"] }]
|
|
1211
1211
|
}], propDecorators: { expanded: [{
|
|
1212
1212
|
type: Input,
|
|
1213
1213
|
args: [{ transform: booleanAttribute }]
|
|
@@ -1265,11 +1265,11 @@ class TooltipComponent {
|
|
|
1265
1265
|
return this.disabled || !this.label;
|
|
1266
1266
|
}
|
|
1267
1267
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1268
|
-
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 }); }
|
|
1268
|
+
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 }); }
|
|
1269
1269
|
}
|
|
1270
1270
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
1271
1271
|
type: Component,
|
|
1272
|
-
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"] }]
|
|
1272
|
+
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"] }]
|
|
1273
1273
|
}], propDecorators: { label: [{
|
|
1274
1274
|
type: Input
|
|
1275
1275
|
}], placement: [{
|
|
@@ -2970,11 +2970,11 @@ class NavUserComponent {
|
|
|
2970
2970
|
this.clicked.emit(event);
|
|
2971
2971
|
}
|
|
2972
2972
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2973
|
-
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\
|
|
2973
|
+
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 }); }
|
|
2974
2974
|
}
|
|
2975
2975
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NavUserComponent, decorators: [{
|
|
2976
2976
|
type: Component,
|
|
2977
|
-
args: [{ selector: 'ius-nav-user', standalone: true, imports: [AvatarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-navuser-host' }, template: "<button\
|
|
2977
|
+
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"] }]
|
|
2978
2978
|
}], propDecorators: { user: [{
|
|
2979
2979
|
type: Input
|
|
2980
2980
|
}], account: [{
|
|
@@ -3200,7 +3200,7 @@ class InsigniaComponent {
|
|
|
3200
3200
|
...(ngDevMode ? [{ debugName: "displayCount" }] : /* istanbul ignore next */ []));
|
|
3201
3201
|
}
|
|
3202
3202
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3203
|
-
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) -->\
|
|
3203
|
+
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 }); }
|
|
3204
3204
|
}
|
|
3205
3205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: InsigniaComponent, decorators: [{
|
|
3206
3206
|
type: Component,
|
|
@@ -3212,7 +3212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
3212
3212
|
'[attr.data-ring]': 'showRing() || null',
|
|
3213
3213
|
'[attr.role]': "ariaLabel() ? 'img' : null",
|
|
3214
3214
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
3215
|
-
}, template: "<!-- Cuerpo: p\u00EDldora de contador (count / count-soft) \u203A punto (dot) -->\
|
|
3215
|
+
}, 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"] }]
|
|
3216
3216
|
}], 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 }] }] } });
|
|
3217
3217
|
|
|
3218
3218
|
/**
|
|
@@ -4882,7 +4882,7 @@ class LoadingComponent {
|
|
|
4882
4882
|
return this.showLabel && this.label != null && this.label !== '';
|
|
4883
4883
|
}
|
|
4884
4884
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4885
|
-
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') {\
|
|
4885
|
+
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 }); }
|
|
4886
4886
|
}
|
|
4887
4887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: LoadingComponent, decorators: [{
|
|
4888
4888
|
type: Component,
|
|
@@ -4893,7 +4893,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
4893
4893
|
'[attr.role]': "variant !== 'overlay' ? 'status' : null",
|
|
4894
4894
|
'[attr.aria-live]': "variant !== 'overlay' ? 'polite' : null",
|
|
4895
4895
|
'[attr.aria-busy]': "variant === 'overlay' && active ? 'true' : null",
|
|
4896
|
-
}, template: "@if (variant === 'overlay') {\
|
|
4896
|
+
}, 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"] }]
|
|
4897
4897
|
}], propDecorators: { variant: [{
|
|
4898
4898
|
type: Input
|
|
4899
4899
|
}], label: [{
|
|
@@ -7069,7 +7069,8 @@ function isGrouped(options) {
|
|
|
7069
7069
|
/** Aplana + filtra por `query`, conservando grupos con al menos una coincidencia. */
|
|
7070
7070
|
function buildVisible(options, query) {
|
|
7071
7071
|
const q = (query || '').trim().toLowerCase();
|
|
7072
|
-
|
|
7072
|
+
// El overline (p. ej. el cliente de un expediente) también se busca; la description no.
|
|
7073
|
+
const match = (opt) => !q || String(opt.label).toLowerCase().includes(q) || (opt.overline ?? '').toLowerCase().includes(q);
|
|
7073
7074
|
const flat = [];
|
|
7074
7075
|
const groups = [];
|
|
7075
7076
|
const src = isGrouped(options)
|
|
@@ -10382,7 +10383,7 @@ class AccordionComponent {
|
|
|
10382
10383
|
medirAcciones();
|
|
10383
10384
|
}
|
|
10384
10385
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10385
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AccordionComponent, isStandalone: true, selector: "ius-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, chevronIcon: { classPropertyName: "chevronIcon", publicName: "chevronIcon", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fillMinHeight: { classPropertyName: "fillMinHeight", publicName: "fillMinHeight", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", actionClick: "actionClick" }, host: { properties: { "class.ius-scroll": "esFill()", "attr.data-variant": "variant()", "attr.data-size": "size() === 'small' ? 'small' : null", "attr.data-fill": "esFill() ? 'true' : null", "attr.data-scrollable": "esFill() && !raizOcupada() && raizDesborda() ? 'true' : null", "attr.data-animating": "esFill() && raizOcupada() ? 'true' : null", "style.--_acc-fill-min": "esFill() ? minimoFill() : null" }, classAttribute: "ius-acc" }, ngImport: i0, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\r\n <div\r\n class=\"ius-acc__item\"\r\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\r\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\r\n [attr.data-actions]=\"tieneAcciones(item) ? 'true' : null\"\r\n >\r\n @if (tieneAcciones(item)) {\r\n <!-- Con acciones la cabecera es una rejilla de una celda: el bot\u00F3n de plegar ocupa toda la\r\n fila y las acciones se superponen, HERMANAS del bot\u00F3n (nunca anidadas), antes del chevron. -->\r\n <div class=\"ius-acc__head\">\r\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\r\n\r\n <span\r\n class=\"ius-acc__actions\"\r\n [attr.data-acc-item]=\"idOf(item, i)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"detenerTeclas($event)\"\r\n >\r\n @for (accion of acciones()[i].visibles; track accion.key) {\r\n <ius-icon-button\r\n [icon]=\"accion.icon\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"squared\"\r\n [tooltip]=\"accion.label\"\r\n [ariaLabel]=\"accion.label\"\r\n [disabled]=\"!!item.disabled || !!accion.disabled\"\r\n (clicked)=\"emitirAccion(item, i, accion, $event)\"\r\n />\r\n }\r\n\r\n @if (acciones()[i].desborde.length) {\r\n <ius-dropdown placement=\"bottom-end\" ariaLabel=\"M\u00E1s acciones\" [items]=\"acciones()[i].desborde\">\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"squared\"\r\n tooltip=\"M\u00E1s acciones\"\r\n ariaLabel=\"M\u00E1s acciones\"\r\n [disabled]=\"!!item.disabled\"\r\n />\r\n </ius-dropdown>\r\n }\r\n </span>\r\n </div>\r\n } @else {\r\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\r\n }\r\n\r\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\r\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\r\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\r\n <div\r\n class=\"ius-acc__panel\"\r\n role=\"region\"\r\n [id]=\"panelId(i)\"\r\n [attr.aria-labelledby]=\"headerId(i)\"\r\n [attr.data-settled]=\"estaAsentada(item, i) ? 'true' : null\"\r\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\r\n (transitionend)=\"alTerminarTransicion($event, item, i)\"\r\n >\r\n <div\r\n class=\"ius-acc__panel-inner\"\r\n [class.ius-scroll]=\"conScroll()\"\r\n [attr.data-scroll]=\"conScroll() ? 'true' : null\"\r\n [attr.data-scrollable]=\"desbordaCuerpo(item, i) ? 'true' : null\"\r\n [attr.data-capped]=\"topado() ? 'true' : null\"\r\n [style.--_acc-panel-max]=\"topado() ? tope() : null\"\r\n >\r\n <div class=\"ius-acc__content\">\r\n @if (item.content) {\r\n <ng-container [ngTemplateOutlet]=\"item.content\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n\r\n<!-- El bot\u00F3n de plegar cubre \u00EDcono, t\u00EDtulo y chevron. Con acciones reserva su ancho medido\r\n (`__slot`), as\u00ED el t\u00EDtulo se corta con elipsis antes de quedar debajo de ellas. -->\r\n<ng-template #boton let-item let-i=\"i\">\r\n <button\r\n type=\"button\"\r\n class=\"ius-acc__header\"\r\n [id]=\"headerId(i)\"\r\n [attr.aria-expanded]=\"isOpen(item, i)\"\r\n [attr.aria-controls]=\"panelId(i)\"\r\n [disabled]=\"!!item.disabled\"\r\n (click)=\"toggle(item, i)\"\r\n >\r\n @if (item.icon) {\r\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\r\n </span>\r\n }\r\n\r\n <span class=\"ius-acc__title\">\r\n @if (tituloPlantilla(item); as plantilla) {\r\n <ng-container [ngTemplateOutlet]=\"plantilla\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\r\n } @else {\r\n {{ item.title }}\r\n }\r\n </span>\r\n\r\n @if (tieneAcciones(item)) {\r\n <span class=\"ius-acc__slot\" aria-hidden=\"true\" [style.--_acc-actions-w]=\"anchoAcciones(item, i)\"></span>\r\n }\r\n\r\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\r\n </span>\r\n </button>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;font-family:var(--ius-font-body);width:100%}.ius-acc__item{display:flex;flex-direction:column}:host([data-variant=divided]) .ius-acc__item{border-top:1px solid var(--ius-stroke)}:host([data-variant=divided]) .ius-acc__item:first-child{border-top:0}:host([data-variant=contained]){gap:var(--ius-space-xs)}:host([data-variant=contained]) .ius-acc__item{border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-surface-card);overflow:hidden}.ius-acc__header{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-xxs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);text-align:left;cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-variant=contained]) .ius-acc__header{padding:var(--ius-space-md) var(--ius-space-md)}.ius-acc__header:hover{color:var(--ius-primary-500)}.ius-acc__header:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-acc__lead{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-acc__lead .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acc__header:hover .ius-acc__lead{color:var(--ius-primary-500)}.ius-acc__title{flex:1 1 auto;min-width:0}.ius-acc__chev{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto;transition:transform var(--ius-duration-base) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-acc__chev .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-acc__item[data-open=true] .ius-acc__chev{transform:rotate(180deg)}.ius-acc__header:hover .ius-acc__chev{color:var(--ius-primary-500)}.ius-acc__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;--_acc-px: var(--ius-space-xxs)}:host([data-variant=contained]) .ius-acc__head{--_acc-px: var(--ius-space-md)}.ius-acc__head>.ius-acc__header{grid-area:1/1;min-width:0}.ius-acc__actions{grid-area:1/1;justify-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-lg) + var(--ius-space-xs))}.ius-acc__slot{flex:0 0 auto;width:var(--_acc-actions-w, 0)}.ius-acc__item[data-actions=true] .ius-acc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ius-duration-base) var(--ius-ease-standard)}.ius-acc__item[data-open=true] .ius-acc__panel{grid-template-rows:1fr}@media(prefers-reduced-motion:reduce){.ius-acc__panel{transition:none}}.ius-acc__panel-inner{overflow:hidden}.ius-acc__content{padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-md)}:host([data-variant=contained]) .ius-acc__content{padding:0 var(--ius-space-md) var(--ius-space-md)}:host([data-size=small]) .ius-acc__header{padding-top:var(--ius-space-sm);padding-bottom:var(--ius-space-sm);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-size=small]) .ius-acc__lead .ius-icon{font-size:var(--ius-icon-sm)}:host([data-size=small]) .ius-acc__chev .ius-icon{font-size:var(--ius-icon-md)}:host([data-size=small]) .ius-acc__actions{margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-md) + var(--ius-space-xs))}:host([data-size=small]) .ius-acc__content{padding-bottom:var(--ius-space-sm)}:host([data-fill=true]){flex:1 1 auto;min-height:0;height:100%;overflow-y:hidden;overflow-x:hidden}:host([data-fill=true][data-scrollable=true]){overflow-y:auto}:host([data-fill=true]) .ius-acc__item{flex:0 0 auto;min-height:0}:host([data-fill=true]) .ius-acc__item[data-open=true]{flex:1 1 auto;min-height:var(--_acc-fill-min, 160px)}:host([data-fill=true]) .ius-acc__head,:host([data-fill=true]) .ius-acc__item>.ius-acc__header{flex:0 0 auto}:host([data-fill=true]) .ius-acc__item[data-open=true] .ius-acc__panel{flex:1 1 auto;min-height:0}.ius-acc__panel-inner[data-scroll=true]{min-height:0;overflow-y:hidden;overflow-x:hidden}.ius-acc__panel-inner[data-scroll=true][data-scrollable=true]{overflow-y:auto}.ius-acc__panel-inner[data-capped=true]{max-height:var(--_acc-panel-max)}.ius-acc__item[data-disabled=true] .ius-acc__header{color:var(--ius-text-disabled);cursor:not-allowed}.ius-acc__item[data-disabled=true] .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__chev,.ius-acc__item[data-disabled=true] .ius-acc__header:hover,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__chev{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AccordionComponent, isStandalone: true, selector: "ius-accordion", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, chevronIcon: { classPropertyName: "chevronIcon", publicName: "chevronIcon", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleActions: { classPropertyName: "maxVisibleActions", publicName: "maxVisibleActions", isSignal: true, isRequired: false, transformFunction: null }, fill: { classPropertyName: "fill", publicName: "fill", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, fillMinHeight: { classPropertyName: "fillMinHeight", publicName: "fillMinHeight", isSignal: true, isRequired: false, transformFunction: null }, panelMaxHeight: { classPropertyName: "panelMaxHeight", publicName: "panelMaxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { openChange: "openChange", actionClick: "actionClick" }, host: { properties: { "class.ius-scroll": "esFill()", "attr.data-variant": "variant()", "attr.data-size": "size() === 'small' ? 'small' : null", "attr.data-fill": "esFill() ? 'true' : null", "attr.data-scrollable": "esFill() && !raizOcupada() && raizDesborda() ? 'true' : null", "attr.data-animating": "esFill() && raizOcupada() ? 'true' : null", "style.--_acc-fill-min": "esFill() ? minimoFill() : null" }, classAttribute: "ius-acc" }, ngImport: i0, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\n <div\n class=\"ius-acc__item\"\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.data-actions]=\"tieneAcciones(item) ? 'true' : null\"\n >\n @if (tieneAcciones(item)) {\n <!-- Con acciones la cabecera es una rejilla de una celda: el bot\u00F3n de plegar ocupa toda la\n fila y las acciones se superponen, HERMANAS del bot\u00F3n (nunca anidadas), antes del chevron. -->\n <div class=\"ius-acc__head\">\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n\n <span\n class=\"ius-acc__actions\"\n [attr.data-acc-item]=\"idOf(item, i)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"detenerTeclas($event)\"\n >\n @for (accion of acciones()[i].visibles; track accion.key) {\n <ius-icon-button\n [icon]=\"accion.icon\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"accion.label\"\n [ariaLabel]=\"accion.label\"\n [disabled]=\"!!item.disabled || !!accion.disabled\"\n (clicked)=\"emitirAccion(item, i, accion, $event)\"\n />\n }\n\n @if (acciones()[i].desborde.length) {\n <ius-dropdown placement=\"bottom-end\" ariaLabel=\"M\u00E1s acciones\" [items]=\"acciones()[i].desborde\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n tooltip=\"M\u00E1s acciones\"\n ariaLabel=\"M\u00E1s acciones\"\n [disabled]=\"!!item.disabled\"\n />\n </ius-dropdown>\n }\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n }\n\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\n <div\n class=\"ius-acc__panel\"\n role=\"region\"\n [id]=\"panelId(i)\"\n [attr.aria-labelledby]=\"headerId(i)\"\n [attr.data-settled]=\"estaAsentada(item, i) ? 'true' : null\"\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\n (transitionend)=\"alTerminarTransicion($event, item, i)\"\n >\n <div\n class=\"ius-acc__panel-inner\"\n [class.ius-scroll]=\"conScroll()\"\n [attr.data-scroll]=\"conScroll() ? 'true' : null\"\n [attr.data-scrollable]=\"desbordaCuerpo(item, i) ? 'true' : null\"\n [attr.data-capped]=\"topado() ? 'true' : null\"\n [style.--_acc-panel-max]=\"topado() ? tope() : null\"\n >\n <div class=\"ius-acc__content\">\n @if (item.content) {\n <ng-container [ngTemplateOutlet]=\"item.content\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n }\n </div>\n </div>\n </div>\n </div>\n}\n\n<!-- El bot\u00F3n de plegar cubre \u00EDcono, t\u00EDtulo y chevron. Con acciones reserva su ancho medido\n (`__slot`), as\u00ED el t\u00EDtulo se corta con elipsis antes de quedar debajo de ellas. -->\n<ng-template #boton let-item let-i=\"i\">\n <button\n type=\"button\"\n class=\"ius-acc__header\"\n [id]=\"headerId(i)\"\n [attr.aria-expanded]=\"isOpen(item, i)\"\n [attr.aria-controls]=\"panelId(i)\"\n [disabled]=\"!!item.disabled\"\n (click)=\"toggle(item, i)\"\n >\n @if (item.icon) {\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\n </span>\n }\n\n <span class=\"ius-acc__title\">\n @if (tituloPlantilla(item); as plantilla) {\n <ng-container [ngTemplateOutlet]=\"plantilla\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (tieneAcciones(item)) {\n <span class=\"ius-acc__slot\" aria-hidden=\"true\" [style.--_acc-actions-w]=\"anchoAcciones(item, i)\"></span>\n }\n\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\n </span>\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;font-family:var(--ius-font-body);width:100%}.ius-acc__item{display:flex;flex-direction:column}:host([data-variant=divided]) .ius-acc__item{border-top:1px solid var(--ius-stroke)}:host([data-variant=divided]) .ius-acc__item:first-child{border-top:0}:host([data-variant=contained]){gap:var(--ius-space-xs)}:host([data-variant=contained]) .ius-acc__item{border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-surface-card);overflow:hidden}.ius-acc__header{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-xxs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);text-align:left;cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-variant=contained]) .ius-acc__header{padding:var(--ius-space-md) var(--ius-space-md)}.ius-acc__header:hover{color:var(--ius-primary-500)}.ius-acc__header:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-acc__lead{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-acc__lead .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acc__header:hover .ius-acc__lead{color:var(--ius-primary-500)}.ius-acc__title{flex:1 1 auto;min-width:0}.ius-acc__chev{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto;transition:transform var(--ius-duration-base) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-acc__chev .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-acc__item[data-open=true] .ius-acc__chev{transform:rotate(180deg)}.ius-acc__header:hover .ius-acc__chev{color:var(--ius-primary-500)}.ius-acc__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;--_acc-px: var(--ius-space-xxs)}:host([data-variant=contained]) .ius-acc__head{--_acc-px: var(--ius-space-md)}.ius-acc__head>.ius-acc__header{grid-area:1/1;min-width:0}.ius-acc__actions{grid-area:1/1;justify-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-lg) + var(--ius-space-xs))}.ius-acc__slot{flex:0 0 auto;width:var(--_acc-actions-w, 0)}.ius-acc__item[data-actions=true] .ius-acc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ius-duration-base) var(--ius-ease-standard)}.ius-acc__item[data-open=true] .ius-acc__panel{grid-template-rows:1fr}@media(prefers-reduced-motion:reduce){.ius-acc__panel{transition:none}}.ius-acc__panel-inner{overflow:hidden}.ius-acc__content{padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-md)}:host([data-variant=contained]) .ius-acc__content{padding:0 var(--ius-space-md) var(--ius-space-md)}:host([data-size=small]) .ius-acc__header{padding-top:var(--ius-space-sm);padding-bottom:var(--ius-space-sm);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-size=small]) .ius-acc__lead .ius-icon{font-size:var(--ius-icon-sm)}:host([data-size=small]) .ius-acc__chev .ius-icon{font-size:var(--ius-icon-md)}:host([data-size=small]) .ius-acc__actions{margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-md) + var(--ius-space-xs))}:host([data-size=small]) .ius-acc__content{padding-bottom:var(--ius-space-sm)}:host([data-fill=true]){flex:1 1 auto;min-height:0;height:100%;overflow-y:hidden;overflow-x:hidden}:host([data-fill=true][data-scrollable=true]){overflow-y:auto}:host([data-fill=true]) .ius-acc__item{flex:0 0 auto;min-height:0}:host([data-fill=true]) .ius-acc__item[data-open=true]{flex:1 1 auto;min-height:var(--_acc-fill-min, 160px)}:host([data-fill=true]) .ius-acc__head,:host([data-fill=true]) .ius-acc__item>.ius-acc__header{flex:0 0 auto}:host([data-fill=true]) .ius-acc__item[data-open=true] .ius-acc__panel{flex:1 1 auto;min-height:0}.ius-acc__panel-inner[data-scroll=true]{min-height:0;overflow-y:hidden;overflow-x:hidden}.ius-acc__panel-inner[data-scroll=true][data-scrollable=true]{overflow-y:auto}.ius-acc__panel-inner[data-capped=true]{max-height:var(--_acc-panel-max)}.ius-acc__item[data-disabled=true] .ius-acc__header{color:var(--ius-text-disabled);cursor:not-allowed}.ius-acc__item[data-disabled=true] .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__chev,.ius-acc__item[data-disabled=true] .ius-acc__header:hover,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__chev{color:var(--ius-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10386
10387
|
}
|
|
10387
10388
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
10388
10389
|
type: Component,
|
|
@@ -10395,7 +10396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10395
10396
|
'[attr.data-scrollable]': "esFill() && !raizOcupada() && raizDesborda() ? 'true' : null",
|
|
10396
10397
|
'[attr.data-animating]': "esFill() && raizOcupada() ? 'true' : null",
|
|
10397
10398
|
'[style.--_acc-fill-min]': 'esFill() ? minimoFill() : null',
|
|
10398
|
-
}, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\
|
|
10399
|
+
}, template: "@for (item of items(); track idOf(item, $index); let i = $index) {\n <div\n class=\"ius-acc__item\"\n [attr.data-open]=\"isOpen(item, i) ? 'true' : null\"\n [attr.data-disabled]=\"item.disabled ? 'true' : null\"\n [attr.data-actions]=\"tieneAcciones(item) ? 'true' : null\"\n >\n @if (tieneAcciones(item)) {\n <!-- Con acciones la cabecera es una rejilla de una celda: el bot\u00F3n de plegar ocupa toda la\n fila y las acciones se superponen, HERMANAS del bot\u00F3n (nunca anidadas), antes del chevron. -->\n <div class=\"ius-acc__head\">\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n\n <span\n class=\"ius-acc__actions\"\n [attr.data-acc-item]=\"idOf(item, i)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"detenerTeclas($event)\"\n >\n @for (accion of acciones()[i].visibles; track accion.key) {\n <ius-icon-button\n [icon]=\"accion.icon\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"accion.label\"\n [ariaLabel]=\"accion.label\"\n [disabled]=\"!!item.disabled || !!accion.disabled\"\n (clicked)=\"emitirAccion(item, i, accion, $event)\"\n />\n }\n\n @if (acciones()[i].desborde.length) {\n <ius-dropdown placement=\"bottom-end\" ariaLabel=\"M\u00E1s acciones\" [items]=\"acciones()[i].desborde\">\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n tooltip=\"M\u00E1s acciones\"\n ariaLabel=\"M\u00E1s acciones\"\n [disabled]=\"!!item.disabled\"\n />\n </ius-dropdown>\n }\n </span>\n </div>\n } @else {\n <ng-container [ngTemplateOutlet]=\"boton\" [ngTemplateOutletContext]=\"{ $implicit: item, i: i }\" />\n }\n\n <!-- El panel se queda SIEMPRE en el DOM: la altura la anima\n `grid-template-rows` de 0fr a 1fr. Cerrado va `inert` para que su\n contenido no quede en el orden de tabulaci\u00F3n (ver nota en el .ts). -->\n <div\n class=\"ius-acc__panel\"\n role=\"region\"\n [id]=\"panelId(i)\"\n [attr.aria-labelledby]=\"headerId(i)\"\n [attr.data-settled]=\"estaAsentada(item, i) ? 'true' : null\"\n [attr.inert]=\"isOpen(item, i) ? null : ''\"\n (transitionend)=\"alTerminarTransicion($event, item, i)\"\n >\n <div\n class=\"ius-acc__panel-inner\"\n [class.ius-scroll]=\"conScroll()\"\n [attr.data-scroll]=\"conScroll() ? 'true' : null\"\n [attr.data-scrollable]=\"desbordaCuerpo(item, i) ? 'true' : null\"\n [attr.data-capped]=\"topado() ? 'true' : null\"\n [style.--_acc-panel-max]=\"topado() ? tope() : null\"\n >\n <div class=\"ius-acc__content\">\n @if (item.content) {\n <ng-container [ngTemplateOutlet]=\"item.content\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n }\n </div>\n </div>\n </div>\n </div>\n}\n\n<!-- El bot\u00F3n de plegar cubre \u00EDcono, t\u00EDtulo y chevron. Con acciones reserva su ancho medido\n (`__slot`), as\u00ED el t\u00EDtulo se corta con elipsis antes de quedar debajo de ellas. -->\n<ng-template #boton let-item let-i=\"i\">\n <button\n type=\"button\"\n class=\"ius-acc__header\"\n [id]=\"headerId(i)\"\n [attr.aria-expanded]=\"isOpen(item, i)\"\n [attr.aria-controls]=\"panelId(i)\"\n [disabled]=\"!!item.disabled\"\n (click)=\"toggle(item, i)\"\n >\n @if (item.icon) {\n <span class=\"ius-acc__lead\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ item.icon }}</span>\n </span>\n }\n\n <span class=\"ius-acc__title\">\n @if (tituloPlantilla(item); as plantilla) {\n <ng-container [ngTemplateOutlet]=\"plantilla\" [ngTemplateOutletContext]=\"contexto(item, i)\" />\n } @else {\n {{ item.title }}\n }\n </span>\n\n @if (tieneAcciones(item)) {\n <span class=\"ius-acc__slot\" aria-hidden=\"true\" [style.--_acc-actions-w]=\"anchoAcciones(item, i)\"></span>\n }\n\n <span class=\"ius-acc__chev\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ chevronIcon() }}</span>\n </span>\n </button>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;font-family:var(--ius-font-body);width:100%}.ius-acc__item{display:flex;flex-direction:column}:host([data-variant=divided]) .ius-acc__item{border-top:1px solid var(--ius-stroke)}:host([data-variant=divided]) .ius-acc__item:first-child{border-top:0}:host([data-variant=contained]){gap:var(--ius-space-xs)}:host([data-variant=contained]) .ius-acc__item{border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);background:var(--ius-surface-card);overflow:hidden}.ius-acc__header{appearance:none;border:0;background:transparent;width:100%;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-xxs);font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-lg);line-height:var(--ius-lh-lg);color:var(--ius-text-primary);text-align:left;cursor:pointer;transition:color var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-variant=contained]) .ius-acc__header{padding:var(--ius-space-md) var(--ius-space-md)}.ius-acc__header:hover{color:var(--ius-primary-500)}.ius-acc__header:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-acc__lead{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto}.ius-acc__lead .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-acc__header:hover .ius-acc__lead{color:var(--ius-primary-500)}.ius-acc__title{flex:1 1 auto;min-width:0}.ius-acc__chev{display:inline-flex;align-items:center;color:var(--ius-text-tertiary);flex:0 0 auto;transition:transform var(--ius-duration-base) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-acc__chev .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-acc__item[data-open=true] .ius-acc__chev{transform:rotate(180deg)}.ius-acc__header:hover .ius-acc__chev{color:var(--ius-primary-500)}.ius-acc__head{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;--_acc-px: var(--ius-space-xxs)}:host([data-variant=contained]) .ius-acc__head{--_acc-px: var(--ius-space-md)}.ius-acc__head>.ius-acc__header{grid-area:1/1;min-width:0}.ius-acc__actions{grid-area:1/1;justify-self:end;position:relative;z-index:1;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-lg) + var(--ius-space-xs))}.ius-acc__slot{flex:0 0 auto;width:var(--_acc-actions-w, 0)}.ius-acc__item[data-actions=true] .ius-acc__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--ius-duration-base) var(--ius-ease-standard)}.ius-acc__item[data-open=true] .ius-acc__panel{grid-template-rows:1fr}@media(prefers-reduced-motion:reduce){.ius-acc__panel{transition:none}}.ius-acc__panel-inner{overflow:hidden}.ius-acc__content{padding:var(--ius-space-xxs) var(--ius-space-xxs) var(--ius-space-md)}:host([data-variant=contained]) .ius-acc__content{padding:0 var(--ius-space-md) var(--ius-space-md)}:host([data-size=small]) .ius-acc__header{padding-top:var(--ius-space-sm);padding-bottom:var(--ius-space-sm);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base)}:host([data-size=small]) .ius-acc__lead .ius-icon{font-size:var(--ius-icon-sm)}:host([data-size=small]) .ius-acc__chev .ius-icon{font-size:var(--ius-icon-md)}:host([data-size=small]) .ius-acc__actions{margin-inline-end:calc(var(--_acc-px) + var(--ius-icon-md) + var(--ius-space-xs))}:host([data-size=small]) .ius-acc__content{padding-bottom:var(--ius-space-sm)}:host([data-fill=true]){flex:1 1 auto;min-height:0;height:100%;overflow-y:hidden;overflow-x:hidden}:host([data-fill=true][data-scrollable=true]){overflow-y:auto}:host([data-fill=true]) .ius-acc__item{flex:0 0 auto;min-height:0}:host([data-fill=true]) .ius-acc__item[data-open=true]{flex:1 1 auto;min-height:var(--_acc-fill-min, 160px)}:host([data-fill=true]) .ius-acc__head,:host([data-fill=true]) .ius-acc__item>.ius-acc__header{flex:0 0 auto}:host([data-fill=true]) .ius-acc__item[data-open=true] .ius-acc__panel{flex:1 1 auto;min-height:0}.ius-acc__panel-inner[data-scroll=true]{min-height:0;overflow-y:hidden;overflow-x:hidden}.ius-acc__panel-inner[data-scroll=true][data-scrollable=true]{overflow-y:auto}.ius-acc__panel-inner[data-capped=true]{max-height:var(--_acc-panel-max)}.ius-acc__item[data-disabled=true] .ius-acc__header{color:var(--ius-text-disabled);cursor:not-allowed}.ius-acc__item[data-disabled=true] .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__chev,.ius-acc__item[data-disabled=true] .ius-acc__header:hover,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__lead,.ius-acc__item[data-disabled=true] .ius-acc__header:hover .ius-acc__chev{color:var(--ius-text-disabled)}\n"] }]
|
|
10399
10400
|
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], defaultOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultOpen", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], chevronIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "chevronIcon", required: false }] }], maxVisibleActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleActions", required: false }] }], fill: [{ type: i0.Input, args: [{ isSignal: true, alias: "fill", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], fillMinHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillMinHeight", required: false }] }], panelMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelMaxHeight", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }] } });
|
|
10400
10401
|
function mismoConjunto(a, b) {
|
|
10401
10402
|
return a.size === b.size && [...a].every((x) => b.has(x));
|
|
@@ -10517,7 +10518,7 @@ class DetailSidePanelComponent {
|
|
|
10517
10518
|
this.collapsedChange.emit(next);
|
|
10518
10519
|
}
|
|
10519
10520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DetailSidePanelComponent, isStandalone: true, selector: "ius-detail-side-panel", inputs: { width: "width", title: "title", titleTemplate: "titleTemplate", titleIcon: "titleIcon", collapsible: ["collapsible", "collapsible", booleanAttribute], collapsed: "collapsed", defaultCollapsed: ["defaultCollapsed", "defaultCollapsed", booleanAttribute], collapseLabel: "collapseLabel", expandLabel: "expandLabel", expandIcon: "expandIcon", side: "side", height: "height", sections: "sections", accordion: ["accordion", "accordion", booleanAttribute], accordionMultiple: ["accordionMultiple", "accordionMultiple", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { attributes: { "role": "complementary" }, properties: { "attr.data-collapsed": "isCollapsed ? 'true' : null", "attr.data-side": "side === 'end' ? null : side", "attr.aria-label": "ariaLabel || title || null", "style.--_ds-w": "widthCss", "style.--_ds-h": "heightCss" }, classAttribute: "ius-detailside" }, ngImport: i0, template: "@if (isCollapsed) {\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\n <div class=\"ius-detailside__rail\">\n <ius-icon-button\n [icon]=\"openIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"expandLabel\"\n [ariaLabel]=\"expandLabel\"\n (clicked)=\"toggle()\"\n />\n @if (title != null) {\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\n }\n </div>\n} @else {\n @if (showHead) {\n <div class=\"ius-detailside__head\">\n @if (isStart && collapsible) {\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\n }\n @if (hasTitle) {\n <div class=\"ius-detailside__title\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n }\n @if (titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else {\n {{ title }}\n }\n </div>\n } @else if (!isStart) {\n <span></span>\n }\n @if (!isStart && collapsible) {\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\n }\n </div>\n }\n\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\n @if (useAccordion) {\n <ius-accordion\n variant=\"divided\"\n [multiple]=\"accordionMultiple\"\n [items]=\"accordionItems\"\n [defaultOpen]=\"accordionDefaultOpen\"\n />\n } @else if (hasSections) {\n @for (s of sections; track sectionId(s, $index); let i = $index) {\n <section class=\"ius-detailside__section\">\n @if (s.title != null) {\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\n }\n <ng-container [ngTemplateOutlet]=\"s.content\" />\n </section>\n }\n } @else {\n <ng-content />\n }\n </div>\n}\n\n<ng-template #collapseBtn>\n <span class=\"ius-detailside__collapse\">\n <ius-icon-button\n [icon]=\"collapseIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"collapseLabel\"\n [ariaLabel]=\"collapseLabel\"\n (clicked)=\"toggle()\"\n />\n </span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-side=start]){border-left:0;border-right:1px solid var(--ius-stroke)}:host([data-side=start]) .ius-detailside__head{justify-content:flex-start}:host([data-side=start]) .ius-detailside__collapse{margin:-4px 0 -4px -4px}:host([data-side=bottom]){width:auto;height:var(--_ds-h, 40%);max-height:100%;border-left:0;border-top:1px solid var(--ius-stroke)}:host([data-side=bottom][data-collapsed=true]){width:auto;height:auto}:host([data-side=bottom]) .ius-detailside__rail{flex-direction:row;padding:var(--ius-space-xs) var(--ius-space-lg)}:host([data-side=bottom]) .ius-detailside__railtitle{writing-mode:horizontal-tb;transform:none}:host([data-side=bottom]) .ius-detailside__head{padding-top:var(--ius-space-sm)}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon", "maxVisibleActions", "fill", "size", "fillMinHeight", "panelMaxHeight"], outputs: ["openChange", "actionClick"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DetailSidePanelComponent, isStandalone: true, selector: "ius-detail-side-panel", inputs: { width: "width", title: "title", titleTemplate: "titleTemplate", titleIcon: "titleIcon", collapsible: ["collapsible", "collapsible", booleanAttribute], collapsed: "collapsed", defaultCollapsed: ["defaultCollapsed", "defaultCollapsed", booleanAttribute], collapseLabel: "collapseLabel", expandLabel: "expandLabel", expandIcon: "expandIcon", side: "side", height: "height", sections: "sections", accordion: ["accordion", "accordion", booleanAttribute], accordionMultiple: ["accordionMultiple", "accordionMultiple", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { collapsedChange: "collapsedChange" }, host: { attributes: { "role": "complementary" }, properties: { "attr.data-collapsed": "isCollapsed ? 'true' : null", "attr.data-side": "side === 'end' ? null : side", "attr.aria-label": "ariaLabel || title || null", "style.--_ds-w": "widthCss", "style.--_ds-h": "heightCss" }, classAttribute: "ius-detailside" }, ngImport: i0, template: "@if (isCollapsed) {\r\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\r\n <div class=\"ius-detailside__rail\">\r\n <ius-icon-button\r\n [icon]=\"openIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"expandLabel\"\r\n [ariaLabel]=\"expandLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n @if (title != null) {\r\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\r\n }\r\n </div>\r\n} @else {\r\n @if (showHead) {\r\n <div class=\"ius-detailside__head\">\r\n @if (isStart && collapsible) {\r\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\r\n }\r\n @if (hasTitle) {\r\n <div class=\"ius-detailside__title\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\r\n }\r\n @if (titleTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\r\n } @else {\r\n {{ title }}\r\n }\r\n </div>\r\n } @else if (!isStart) {\r\n <span></span>\r\n }\r\n @if (!isStart && collapsible) {\r\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\r\n @if (useAccordion) {\r\n <ius-accordion\r\n variant=\"divided\"\r\n [multiple]=\"accordionMultiple\"\r\n [items]=\"accordionItems\"\r\n [defaultOpen]=\"accordionDefaultOpen\"\r\n />\r\n } @else if (hasSections) {\r\n @for (s of sections; track sectionId(s, $index); let i = $index) {\r\n <section class=\"ius-detailside__section\">\r\n @if (s.title != null) {\r\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"s.content\" />\r\n </section>\r\n }\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #collapseBtn>\r\n <span class=\"ius-detailside__collapse\">\r\n <ius-icon-button\r\n [icon]=\"collapseIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"collapseLabel\"\r\n [ariaLabel]=\"collapseLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-side=start]){border-left:0;border-right:1px solid var(--ius-stroke)}:host([data-side=start]) .ius-detailside__head{justify-content:flex-start}:host([data-side=start]) .ius-detailside__collapse{margin:-4px 0 -4px -4px}:host([data-side=bottom]){width:auto;height:var(--_ds-h, 40%);max-height:100%;border-left:0;border-top:1px solid var(--ius-stroke)}:host([data-side=bottom][data-collapsed=true]){width:auto;height:auto}:host([data-side=bottom]) .ius-detailside__rail{flex-direction:row;padding:var(--ius-space-xs) var(--ius-space-lg)}:host([data-side=bottom]) .ius-detailside__railtitle{writing-mode:horizontal-tb;transform:none}:host([data-side=bottom]) .ius-detailside__head{padding-top:var(--ius-space-sm)}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AccordionComponent, selector: "ius-accordion", inputs: ["items", "multiple", "open", "defaultOpen", "variant", "chevronIcon", "maxVisibleActions", "fill", "size", "fillMinHeight", "panelMaxHeight"], outputs: ["openChange", "actionClick"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10521
10522
|
}
|
|
10522
10523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DetailSidePanelComponent, decorators: [{
|
|
10523
10524
|
type: Component,
|
|
@@ -10529,7 +10530,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10529
10530
|
'[attr.aria-label]': 'ariaLabel || title || null',
|
|
10530
10531
|
'[style.--_ds-w]': 'widthCss',
|
|
10531
10532
|
'[style.--_ds-h]': 'heightCss',
|
|
10532
|
-
}, template: "@if (isCollapsed) {\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\n <div class=\"ius-detailside__rail\">\n <ius-icon-button\n [icon]=\"openIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"expandLabel\"\n [ariaLabel]=\"expandLabel\"\n (clicked)=\"toggle()\"\n />\n @if (title != null) {\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\n }\n </div>\n} @else {\n @if (showHead) {\n <div class=\"ius-detailside__head\">\n @if (isStart && collapsible) {\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\n }\n @if (hasTitle) {\n <div class=\"ius-detailside__title\">\n @if (titleIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\n }\n @if (titleTemplate) {\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\n } @else {\n {{ title }}\n }\n </div>\n } @else if (!isStart) {\n <span></span>\n }\n @if (!isStart && collapsible) {\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\n }\n </div>\n }\n\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\n @if (useAccordion) {\n <ius-accordion\n variant=\"divided\"\n [multiple]=\"accordionMultiple\"\n [items]=\"accordionItems\"\n [defaultOpen]=\"accordionDefaultOpen\"\n />\n } @else if (hasSections) {\n @for (s of sections; track sectionId(s, $index); let i = $index) {\n <section class=\"ius-detailside__section\">\n @if (s.title != null) {\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\n }\n <ng-container [ngTemplateOutlet]=\"s.content\" />\n </section>\n }\n } @else {\n <ng-content />\n }\n </div>\n}\n\n<ng-template #collapseBtn>\n <span class=\"ius-detailside__collapse\">\n <ius-icon-button\n [icon]=\"collapseIcon\"\n variant=\"tertiary\"\n shape=\"circle\"\n size=\"small\"\n [tooltip]=\"collapseLabel\"\n [ariaLabel]=\"collapseLabel\"\n (clicked)=\"toggle()\"\n />\n </span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-side=start]){border-left:0;border-right:1px solid var(--ius-stroke)}:host([data-side=start]) .ius-detailside__head{justify-content:flex-start}:host([data-side=start]) .ius-detailside__collapse{margin:-4px 0 -4px -4px}:host([data-side=bottom]){width:auto;height:var(--_ds-h, 40%);max-height:100%;border-left:0;border-top:1px solid var(--ius-stroke)}:host([data-side=bottom][data-collapsed=true]){width:auto;height:auto}:host([data-side=bottom]) .ius-detailside__rail{flex-direction:row;padding:var(--ius-space-xs) var(--ius-space-lg)}:host([data-side=bottom]) .ius-detailside__railtitle{writing-mode:horizontal-tb;transform:none}:host([data-side=bottom]) .ius-detailside__head{padding-top:var(--ius-space-sm)}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"] }]
|
|
10533
|
+
}, template: "@if (isCollapsed) {\r\n <!-- Riel colapsado (mismo patr\u00F3n que EntityNavigator): bot\u00F3n para reabrir + t\u00EDtulo vertical. -->\r\n <div class=\"ius-detailside__rail\">\r\n <ius-icon-button\r\n [icon]=\"openIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"expandLabel\"\r\n [ariaLabel]=\"expandLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n @if (title != null) {\r\n <span class=\"ius-detailside__railtitle\" aria-hidden=\"true\">{{ title }}</span>\r\n }\r\n </div>\r\n} @else {\r\n @if (showHead) {\r\n <div class=\"ius-detailside__head\">\r\n @if (isStart && collapsible) {\r\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\r\n }\r\n @if (hasTitle) {\r\n <div class=\"ius-detailside__title\">\r\n @if (titleIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ titleIcon }}</span>\r\n }\r\n @if (titleTemplate) {\r\n <ng-container [ngTemplateOutlet]=\"titleTemplate\" />\r\n } @else {\r\n {{ title }}\r\n }\r\n </div>\r\n } @else if (!isStart) {\r\n <span></span>\r\n }\r\n @if (!isStart && collapsible) {\r\n <ng-container [ngTemplateOutlet]=\"collapseBtn\" />\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-detailside__body ius-scroll\" [attr.data-accordion]=\"useAccordion ? 'true' : null\">\r\n @if (useAccordion) {\r\n <ius-accordion\r\n variant=\"divided\"\r\n [multiple]=\"accordionMultiple\"\r\n [items]=\"accordionItems\"\r\n [defaultOpen]=\"accordionDefaultOpen\"\r\n />\r\n } @else if (hasSections) {\r\n @for (s of sections; track sectionId(s, $index); let i = $index) {\r\n <section class=\"ius-detailside__section\">\r\n @if (s.title != null) {\r\n <h3 class=\"ius-detailside__section-title\">{{ s.title }}</h3>\r\n }\r\n <ng-container [ngTemplateOutlet]=\"s.content\" />\r\n </section>\r\n }\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n}\r\n\r\n<ng-template #collapseBtn>\r\n <span class=\"ius-detailside__collapse\">\r\n <ius-icon-button\r\n [icon]=\"collapseIcon\"\r\n variant=\"tertiary\"\r\n shape=\"circle\"\r\n size=\"small\"\r\n [tooltip]=\"collapseLabel\"\r\n [ariaLabel]=\"collapseLabel\"\r\n (clicked)=\"toggle()\"\r\n />\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{box-sizing:border-box;display:flex;flex-direction:column;width:var(--_ds-w, 340px);flex:0 0 auto;height:100%;min-height:0;background:var(--ius-surface-card);border-left:1px solid var(--ius-stroke);font-family:var(--ius-font-body)}:host([data-collapsed=true]){width:52px}:host([data-side=start]){border-left:0;border-right:1px solid var(--ius-stroke)}:host([data-side=start]) .ius-detailside__head{justify-content:flex-start}:host([data-side=start]) .ius-detailside__collapse{margin:-4px 0 -4px -4px}:host([data-side=bottom]){width:auto;height:var(--_ds-h, 40%);max-height:100%;border-left:0;border-top:1px solid var(--ius-stroke)}:host([data-side=bottom][data-collapsed=true]){width:auto;height:auto}:host([data-side=bottom]) .ius-detailside__rail{flex-direction:row;padding:var(--ius-space-xs) var(--ius-space-lg)}:host([data-side=bottom]) .ius-detailside__railtitle{writing-mode:horizontal-tb;transform:none}:host([data-side=bottom]) .ius-detailside__head{padding-top:var(--ius-space-sm)}.ius-detailside__rail{display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-xs)}.ius-detailside__railtitle{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);white-space:nowrap}.ius-detailside__head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:var(--ius-space-xs);padding:var(--ius-space-md) var(--ius-space-lg) var(--ius-space-sm);border-bottom:1px solid var(--ius-stroke)}.ius-detailside__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-sm);letter-spacing:.06em;text-transform:uppercase;color:var(--ius-text-tertiary);display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-detailside__title .ius-icon{font-size:var(--ius-icon-sm)}.ius-detailside__collapse{margin:-4px -4px -4px 0}.ius-detailside__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--ius-space-lg);display:flex;flex-direction:column;gap:var(--ius-space-lg);--_sb-track-margin: var(--ius-space-sm)}.ius-detailside__body[data-accordion=true]{padding:0 var(--ius-space-lg);gap:0}.ius-detailside__section{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-detailside__section-title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);color:var(--ius-text-primary);margin:0}\n"] }]
|
|
10533
10534
|
}], propDecorators: { width: [{
|
|
10534
10535
|
type: Input
|
|
10535
10536
|
}], title: [{
|
|
@@ -10722,7 +10723,7 @@ class FileTypeIconComponent {
|
|
|
10722
10723
|
return this.title != null ? this.title : this.meta.label;
|
|
10723
10724
|
}
|
|
10724
10725
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileTypeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileTypeIconComponent, isStandalone: true, selector: "ius-file-type-icon", inputs: { kind: "kind", name: "name", hue: "hue", icon: "icon", thumbnail: "thumbnail", variant: "variant", size: "size", title: "title", decorative: ["decorative", "decorative", booleanAttribute] }, host: { properties: { "attr.data-hue": "effHue", "attr.data-variant": "variant !== 'glyph' ? variant : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.role": "decorative ? null : 'img'", "attr.aria-hidden": "decorative ? 'true' : null", "attr.aria-label": "decorative ? null : label", "attr.title": "title || null" }, classAttribute: "ius-ftype" }, ngImport: i0, template: "@if (thumbnail) {\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n} @else {\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10726
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileTypeIconComponent, isStandalone: true, selector: "ius-file-type-icon", inputs: { kind: "kind", name: "name", hue: "hue", icon: "icon", thumbnail: "thumbnail", variant: "variant", size: "size", title: "title", decorative: ["decorative", "decorative", booleanAttribute] }, host: { properties: { "attr.data-hue": "effHue", "attr.data-variant": "variant !== 'glyph' ? variant : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.role": "decorative ? null : 'img'", "attr.aria-hidden": "decorative ? 'true' : null", "attr.aria-label": "decorative ? null : label", "attr.title": "title || null" }, classAttribute: "ius-ftype" }, ngImport: i0, template: "@if (thumbnail) {\r\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\r\n} @else {\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10726
10727
|
}
|
|
10727
10728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileTypeIconComponent, decorators: [{
|
|
10728
10729
|
type: Component,
|
|
@@ -10735,7 +10736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10735
10736
|
'[attr.aria-hidden]': "decorative ? 'true' : null",
|
|
10736
10737
|
'[attr.aria-label]': 'decorative ? null : label',
|
|
10737
10738
|
'[attr.title]': 'title || null',
|
|
10738
|
-
}, template: "@if (thumbnail) {\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n} @else {\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"] }]
|
|
10739
|
+
}, template: "@if (thumbnail) {\r\n <img class=\"ius-ftype__thumb\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\r\n} @else {\r\n <span translate=\"no\" class=\"ius-icon\">{{ effIcon }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ft-glyph: 26px;--_ft-pad: 0px;--_ft-radius: var(--ius-radius-md);--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6);-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-sizing:border-box;padding:var(--_ft-pad);border:1px solid transparent;background:transparent;color:var(--_c-accent)}:host .ius-icon{font-size:var(--_ft-glyph);line-height:1}.ius-ftype__thumb{width:var(--_ft-glyph);height:var(--_ft-glyph);object-fit:cover;display:block;border-radius:var(--ius-radius-sm);border:1px solid var(--ius-stroke)}:host([data-size=small]){--_ft-glyph: 20px}:host([data-size=large]){--_ft-glyph: 34px}:host([data-size=xlarge]){--_ft-glyph: 48px}:host([data-variant=tile]){--_ft-pad: 6px;background:var(--_c-fill);border-color:var(--_c-border);border-radius:var(--_ft-radius)}:host([data-variant=solid]){--_ft-pad: 6px;background:var(--_c-solid);border-color:transparent;color:var(--ius-neutral-white);border-radius:var(--_ft-radius)}:host([data-variant=tile][data-size=small]),:host([data-variant=solid][data-size=small]){--_ft-pad: 4px;--_ft-radius: var(--ius-radius-sm)}:host([data-variant=tile][data-size=xlarge]),:host([data-variant=solid][data-size=xlarge]){--_ft-pad: 9px;--_ft-radius: var(--ius-radius-lg)}:host([data-variant=tile]) .ius-ftype__thumb,:host([data-variant=solid]) .ius-ftype__thumb{border:none}:host([data-hue=primary]){--_c-fill: var(--ius-primary-100);--_c-border: var(--ius-primary-200);--_c-accent: var(--ius-primary-700);--_c-solid: var(--ius-primary-900)}:host([data-hue=neutral]){--_c-fill: var(--ius-neutral-2);--_c-border: var(--ius-neutral-3);--_c-accent: var(--ius-neutral-7);--_c-solid: var(--ius-neutral-6)}:host([data-hue=durazno]){--_c-fill: var(--ius-durazno-100);--_c-border: var(--ius-durazno-200);--_c-accent: var(--ius-durazno-600);--_c-solid: var(--ius-durazno-500)}:host([data-hue=banano]){--_c-fill: var(--ius-banano-100);--_c-border: var(--ius-banano-200);--_c-accent: var(--ius-banano-700);--_c-solid: var(--ius-banano-600)}:host([data-hue=sandia]){--_c-fill: var(--ius-sandia-100);--_c-border: var(--ius-sandia-200);--_c-accent: var(--ius-sandia-600);--_c-solid: var(--ius-sandia-500)}:host([data-hue=arandano]){--_c-fill: var(--ius-arandano-100);--_c-border: var(--ius-arandano-200);--_c-accent: var(--ius-arandano-600);--_c-solid: var(--ius-arandano-500)}:host([data-hue=uva]){--_c-fill: var(--ius-uva-100);--_c-border: var(--ius-uva-200);--_c-accent: var(--ius-uva-600);--_c-solid: var(--ius-uva-500)}:host([data-hue=aguacate]){--_c-fill: var(--ius-aguacate-100);--_c-border: var(--ius-aguacate-200);--_c-accent: var(--ius-aguacate-700);--_c-solid: var(--ius-aguacate-600)}\n"] }]
|
|
10739
10740
|
}], propDecorators: { kind: [{
|
|
10740
10741
|
type: Input
|
|
10741
10742
|
}], name: [{
|
|
@@ -10885,7 +10886,7 @@ class SelectNumberComponent {
|
|
|
10885
10886
|
useExisting: forwardRef(() => SelectNumberComponent),
|
|
10886
10887
|
multi: true,
|
|
10887
10888
|
},
|
|
10888
|
-
], ngImport: i0, template: "<ius-select\n class=\"ius-tf--num\"\n compact\n placeholder=\"\"\n [searchable]=\"false\"\n [multiple]=\"false\"\n [showHelpText]=\"false\"\n [options]=\"selectOptions()\"\n [value]=\"current()\"\n [showClear]=\"showClear\"\n [maxVisible]=\"maxVisible\"\n [error]=\"error\"\n [disabled]=\"isDisabled()\"\n [state]=\"state\"\n [size]=\"size\"\n [id]=\"id\"\n (valueChange)=\"onSelect($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host ::ng-deep .ius-tf--select.ius-tf--num{min-width:0;width:auto}:host ::ng-deep .ius-tf--num .ius-tf__field{padding:var(--_tf-py) var(--ius-space-xs) var(--_tf-py) var(--ius-space-sm);gap:var(--ius-space-xxs)}:host ::ng-deep .ius-tf--num .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}:host ::ng-deep .ius-tf--select.ius-tf--num .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10889
|
+
], ngImport: i0, template: "<ius-select\r\n class=\"ius-tf--num\"\r\n compact\r\n placeholder=\"\"\r\n [searchable]=\"false\"\r\n [multiple]=\"false\"\r\n [showHelpText]=\"false\"\r\n [options]=\"selectOptions()\"\r\n [value]=\"current()\"\r\n [showClear]=\"showClear\"\r\n [maxVisible]=\"maxVisible\"\r\n [error]=\"error\"\r\n [disabled]=\"isDisabled()\"\r\n [state]=\"state\"\r\n [size]=\"size\"\r\n [id]=\"id\"\r\n (valueChange)=\"onSelect($event)\"\r\n/>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host ::ng-deep .ius-tf--select.ius-tf--num{min-width:0;width:auto}:host ::ng-deep .ius-tf--num .ius-tf__field{padding:var(--_tf-py) var(--ius-space-xs) var(--_tf-py) var(--ius-space-sm);gap:var(--ius-space-xxs)}:host ::ng-deep .ius-tf--num .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}:host ::ng-deep .ius-tf--select.ius-tf--num .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"], dependencies: [{ kind: "component", type: SelectComponent, selector: "ius-select", inputs: ["options", "multiple", "size", "disabled", "error", "state", "open", "value", "label", "required", "placeholder", "prefixIcon", "searchable", "searchPlaceholder", "emptyText", "creatable", "createPlaceholder", "createLabel", "createFactory", "maxVisible", "helpText", "errorText", "showHelpText", "showIconHelp", "iconHelpTitle", "iconHelpContent", "showClear", "defaultOpen", "compact", "defaultValue", "id", "name"], outputs: ["valueChange", "cleared", "openChange", "created"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
10889
10890
|
}
|
|
10890
10891
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectNumberComponent, decorators: [{
|
|
10891
10892
|
type: Component,
|
|
@@ -10895,7 +10896,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
10895
10896
|
useExisting: forwardRef(() => SelectNumberComponent),
|
|
10896
10897
|
multi: true,
|
|
10897
10898
|
},
|
|
10898
|
-
], template: "<ius-select\n class=\"ius-tf--num\"\n compact\n placeholder=\"\"\n [searchable]=\"false\"\n [multiple]=\"false\"\n [showHelpText]=\"false\"\n [options]=\"selectOptions()\"\n [value]=\"current()\"\n [showClear]=\"showClear\"\n [maxVisible]=\"maxVisible\"\n [error]=\"error\"\n [disabled]=\"isDisabled()\"\n [state]=\"state\"\n [size]=\"size\"\n [id]=\"id\"\n (valueChange)=\"onSelect($event)\"\n/>\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host ::ng-deep .ius-tf--select.ius-tf--num{min-width:0;width:auto}:host ::ng-deep .ius-tf--num .ius-tf__field{padding:var(--_tf-py) var(--ius-space-xs) var(--_tf-py) var(--ius-space-sm);gap:var(--ius-space-xxs)}:host ::ng-deep .ius-tf--num .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}:host ::ng-deep .ius-tf--select.ius-tf--num .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
10899
|
+
], template: "<ius-select\r\n class=\"ius-tf--num\"\r\n compact\r\n placeholder=\"\"\r\n [searchable]=\"false\"\r\n [multiple]=\"false\"\r\n [showHelpText]=\"false\"\r\n [options]=\"selectOptions()\"\r\n [value]=\"current()\"\r\n [showClear]=\"showClear\"\r\n [maxVisible]=\"maxVisible\"\r\n [error]=\"error\"\r\n [disabled]=\"isDisabled()\"\r\n [state]=\"state\"\r\n [size]=\"size\"\r\n [id]=\"id\"\r\n (valueChange)=\"onSelect($event)\"\r\n/>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}:host ::ng-deep .ius-tf--select.ius-tf--num{min-width:0;width:auto}:host ::ng-deep .ius-tf--num .ius-tf__field{padding:var(--_tf-py) var(--ius-space-xs) var(--_tf-py) var(--ius-space-sm);gap:var(--ius-space-xxs)}:host ::ng-deep .ius-tf--num .ius-select__value{font-variant-numeric:tabular-nums;min-width:16px}:host ::ng-deep .ius-tf--select.ius-tf--num .ius-select__chevron .ius-icon{font-size:var(--ius-icon-md)}\n"] }]
|
|
10899
10900
|
}], propDecorators: { min: [{
|
|
10900
10901
|
type: Input,
|
|
10901
10902
|
args: [{ transform: numberAttribute }]
|
|
@@ -11072,7 +11073,7 @@ class PaginationComponent {
|
|
|
11072
11073
|
this.pageSizeChange.emit(value);
|
|
11073
11074
|
}
|
|
11074
11075
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11075
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PaginationComponent, isStandalone: true, selector: "ius-pagination", inputs: { variant: "variant", page: "page", defaultPage: ["defaultPage", "defaultPage", numberAttribute], totalPages: "totalPages", total: "total", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", showCount: ["showCount", "showCount", booleanAttribute], countNoun: "countNoun", siblingCount: ["siblingCount", "siblingCount", numberAttribute], boundaryCount: ["boundaryCount", "boundaryCount", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, properties: { "attr.data-variant": "variant", "attr.data-block": "showCountBlock ? 'true' : null", "style.--_pg-h": "preset.h + 'px'", "style.--_pg-icon": "preset.icon", "style.--_pg-fs": "preset.fs", "style.--_pg-gap": "preset.gap + 'px'" }, classAttribute: "ius-pagination" }, ngImport: i0, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\n@if (showCountBlock) {\n <div class=\"ius-pagination__count\">\n @if (countRanged) {\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\n } @else {\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\n }\n </div>\n}\n\n<div class=\"ius-pagination__main\">\n @if (hasPageSizeOptions) {\n <div class=\"ius-pagination__sizer\">\n <span>Filas</span>\n <ius-select-number\n [options]=\"pageSizeOptions\"\n [value]=\"pageSize\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n (valueChange)=\"onSelectPageSize($event)\"\n />\n </div>\n }\n\n @if (variant === 'compact') {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"first_page\"\n variant=\"tertiary\"\n ariaLabel=\"Primera p\u00E1gina\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(1)\"\n />\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <span class=\"ius-pagination__compact\">\n P\u00E1gina \n <ius-select-number\n [min]=\"1\"\n [max]=\"effTotalPages\"\n [value]=\"currentPage\"\n [disabled]=\"disabled || effTotalPages <= 1\"\n [size]=\"size\"\n (valueChange)=\"onSelectPage($event)\"\n />\n <span> de </span>\n <b>{{ fmt(effTotalPages) }}</b>\n </span>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n <ius-icon-button\n icon=\"last_page\"\n variant=\"tertiary\"\n ariaLabel=\"\u00DAltima p\u00E1gina\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(effTotalPages)\"\n />\n </div>\n } @else {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <div class=\"ius-pagination__pages\">\n @for (row of pageRows; track $index) {\n @if (row.ellipsis) {\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ius-button\n class=\"ius-pagination__num\"\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\n [size]=\"size\"\n [label]=\"fmt(row.value!)\"\n [disabled]=\"disabled\"\n [ariaCurrent]=\"row.value === currentPage ? 'page' : undefined\"\n (clicked)=\"goTo(row.value!)\"\n />\n }\n }\n </div>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: SelectNumberComponent, selector: "ius-select-number", inputs: ["min", "max", "options", "value", "defaultValue", "maxVisible", "error", "disabled", "size", "state", "showClear", "id"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11076
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PaginationComponent, isStandalone: true, selector: "ius-pagination", inputs: { variant: "variant", page: "page", defaultPage: ["defaultPage", "defaultPage", numberAttribute], totalPages: "totalPages", total: "total", pageSize: ["pageSize", "pageSize", numberAttribute], pageSizeOptions: "pageSizeOptions", showCount: ["showCount", "showCount", booleanAttribute], countNoun: "countNoun", siblingCount: ["siblingCount", "siblingCount", numberAttribute], boundaryCount: ["boundaryCount", "boundaryCount", numberAttribute], size: "size", disabled: ["disabled", "disabled", booleanAttribute] }, outputs: { pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { attributes: { "role": "navigation", "aria-label": "Paginaci\u00F3n" }, properties: { "attr.data-variant": "variant", "attr.data-block": "showCountBlock ? 'true' : null", "style.--_pg-h": "preset.h + 'px'", "style.--_pg-icon": "preset.icon", "style.--_pg-fs": "preset.fs", "style.--_pg-gap": "preset.gap + 'px'" }, classAttribute: "ius-pagination" }, ngImport: i0, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\r\n@if (showCountBlock) {\r\n <div class=\"ius-pagination__count\">\r\n @if (countRanged) {\r\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n } @else {\r\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n }\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pagination__main\">\r\n @if (hasPageSizeOptions) {\r\n <div class=\"ius-pagination__sizer\">\r\n <span>Filas</span>\r\n <ius-select-number\r\n [options]=\"pageSizeOptions\"\r\n [value]=\"pageSize\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"onSelectPageSize($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (variant === 'compact') {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"first_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"Primera p\u00E1gina\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <span class=\"ius-pagination__compact\">\r\n P\u00E1gina \r\n <ius-select-number\r\n [min]=\"1\"\r\n [max]=\"effTotalPages\"\r\n [value]=\"currentPage\"\r\n [disabled]=\"disabled || effTotalPages <= 1\"\r\n [size]=\"size\"\r\n (valueChange)=\"onSelectPage($event)\"\r\n />\r\n <span> de </span>\r\n <b>{{ fmt(effTotalPages) }}</b>\r\n </span>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"last_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"\u00DAltima p\u00E1gina\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(effTotalPages)\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <div class=\"ius-pagination__pages\">\r\n @for (row of pageRows; track $index) {\r\n @if (row.ellipsis) {\r\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n } @else {\r\n <ius-button\r\n class=\"ius-pagination__num\"\r\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\r\n [size]=\"size\"\r\n [label]=\"fmt(row.value!)\"\r\n [disabled]=\"disabled\"\r\n [ariaCurrent]=\"row.value === currentPage ? 'page' : undefined\"\r\n (clicked)=\"goTo(row.value!)\"\r\n />\r\n }\r\n }\r\n </div>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: SelectNumberComponent, selector: "ius-select-number", inputs: ["min", "max", "options", "value", "defaultValue", "maxVisible", "error", "disabled", "size", "state", "showClear", "id"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11076
11077
|
}
|
|
11077
11078
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
11078
11079
|
type: Component,
|
|
@@ -11086,7 +11087,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
11086
11087
|
'[style.--_pg-icon]': 'preset.icon',
|
|
11087
11088
|
'[style.--_pg-fs]': 'preset.fs',
|
|
11088
11089
|
'[style.--_pg-gap]': "preset.gap + 'px'",
|
|
11089
|
-
}, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\n@if (showCountBlock) {\n <div class=\"ius-pagination__count\">\n @if (countRanged) {\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\n } @else {\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\n }\n </div>\n}\n\n<div class=\"ius-pagination__main\">\n @if (hasPageSizeOptions) {\n <div class=\"ius-pagination__sizer\">\n <span>Filas</span>\n <ius-select-number\n [options]=\"pageSizeOptions\"\n [value]=\"pageSize\"\n [disabled]=\"disabled\"\n [size]=\"size\"\n (valueChange)=\"onSelectPageSize($event)\"\n />\n </div>\n }\n\n @if (variant === 'compact') {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"first_page\"\n variant=\"tertiary\"\n ariaLabel=\"Primera p\u00E1gina\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(1)\"\n />\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <span class=\"ius-pagination__compact\">\n P\u00E1gina \n <ius-select-number\n [min]=\"1\"\n [max]=\"effTotalPages\"\n [value]=\"currentPage\"\n [disabled]=\"disabled || effTotalPages <= 1\"\n [size]=\"size\"\n (valueChange)=\"onSelectPage($event)\"\n />\n <span> de </span>\n <b>{{ fmt(effTotalPages) }}</b>\n </span>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n <ius-icon-button\n icon=\"last_page\"\n variant=\"tertiary\"\n ariaLabel=\"\u00DAltima p\u00E1gina\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(effTotalPages)\"\n />\n </div>\n } @else {\n <div class=\"ius-pagination__nav\">\n <ius-icon-button\n icon=\"chevron_left\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina anterior\"\n [disabled]=\"disabled || atStart\"\n (clicked)=\"goTo(currentPage - 1)\"\n />\n <div class=\"ius-pagination__pages\">\n @for (row of pageRows; track $index) {\n @if (row.ellipsis) {\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\n } @else {\n <ius-button\n class=\"ius-pagination__num\"\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\n [size]=\"size\"\n [label]=\"fmt(row.value!)\"\n [disabled]=\"disabled\"\n [ariaCurrent]=\"row.value === currentPage ? 'page' : undefined\"\n (clicked)=\"goTo(row.value!)\"\n />\n }\n }\n </div>\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n ariaLabel=\"P\u00E1gina siguiente\"\n [disabled]=\"disabled || atEnd\"\n (clicked)=\"goTo(currentPage + 1)\"\n />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}\n"] }]
|
|
11090
|
+
}, template: "<!-- Conteo X\u2013Y de Z (opcional, empuja el resto a la derecha v\u00EDa data-block) -->\r\n@if (showCountBlock) {\r\n <div class=\"ius-pagination__count\">\r\n @if (countRanged) {\r\n <b>{{ countFrom }}</b>\u2013<b>{{ countTo }}</b> de <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n } @else {\r\n <b>{{ fmt(total!) }}</b> {{ countNoun }}\r\n }\r\n </div>\r\n}\r\n\r\n<div class=\"ius-pagination__main\">\r\n @if (hasPageSizeOptions) {\r\n <div class=\"ius-pagination__sizer\">\r\n <span>Filas</span>\r\n <ius-select-number\r\n [options]=\"pageSizeOptions\"\r\n [value]=\"pageSize\"\r\n [disabled]=\"disabled\"\r\n [size]=\"size\"\r\n (valueChange)=\"onSelectPageSize($event)\"\r\n />\r\n </div>\r\n }\r\n\r\n @if (variant === 'compact') {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"first_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"Primera p\u00E1gina\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <span class=\"ius-pagination__compact\">\r\n P\u00E1gina \r\n <ius-select-number\r\n [min]=\"1\"\r\n [max]=\"effTotalPages\"\r\n [value]=\"currentPage\"\r\n [disabled]=\"disabled || effTotalPages <= 1\"\r\n [size]=\"size\"\r\n (valueChange)=\"onSelectPage($event)\"\r\n />\r\n <span> de </span>\r\n <b>{{ fmt(effTotalPages) }}</b>\r\n </span>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n <ius-icon-button\r\n icon=\"last_page\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"\u00DAltima p\u00E1gina\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(effTotalPages)\"\r\n />\r\n </div>\r\n } @else {\r\n <div class=\"ius-pagination__nav\">\r\n <ius-icon-button\r\n icon=\"chevron_left\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina anterior\"\r\n [disabled]=\"disabled || atStart\"\r\n (clicked)=\"goTo(currentPage - 1)\"\r\n />\r\n <div class=\"ius-pagination__pages\">\r\n @for (row of pageRows; track $index) {\r\n @if (row.ellipsis) {\r\n <span class=\"ius-pagination__ellipsis\" aria-hidden=\"true\">\u2026</span>\r\n } @else {\r\n <ius-button\r\n class=\"ius-pagination__num\"\r\n [variant]=\"row.value === currentPage ? 'primary' : 'tertiary'\"\r\n [size]=\"size\"\r\n [label]=\"fmt(row.value!)\"\r\n [disabled]=\"disabled\"\r\n [ariaCurrent]=\"row.value === currentPage ? 'page' : undefined\"\r\n (clicked)=\"goTo(row.value!)\"\r\n />\r\n }\r\n }\r\n </div>\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n ariaLabel=\"P\u00E1gina siguiente\"\r\n [disabled]=\"disabled || atEnd\"\r\n (clicked)=\"goTo(currentPage + 1)\"\r\n />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:var(--ius-space-lg);font-family:var(--ius-font-body);color:var(--ius-text-secondary)}:host([data-block=true]){width:100%;justify-content:space-between}.ius-pagination__count{font-size:var(--_pg-fs, 14px);line-height:1.4;color:var(--ius-text-secondary);white-space:nowrap}.ius-pagination__count b{font-weight:var(--ius-fw-medium);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-pagination__main{display:flex;align-items:center;gap:var(--ius-space-lg)}.ius-pagination__nav,.ius-pagination__pages{display:flex;align-items:center;gap:var(--_pg-gap, var(--ius-space-xs))}.ius-pagination__nav ::ng-deep .ius-iconbtn{--_ib-size: var(--_pg-h, 40px);--_ib-icon: var(--_pg-icon, var(--ius-icon-md))}.ius-pagination__num ::ng-deep .ius-btn{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);padding-left:var(--ius-space-xs);padding-right:var(--ius-space-xs);font-variant-numeric:tabular-nums}.ius-pagination__ellipsis{min-width:var(--_pg-h, 40px);height:var(--_pg-h, 40px);display:inline-flex;align-items:flex-end;justify-content:center;padding-bottom:var(--ius-space-xs);color:var(--ius-text-tertiary);font-size:var(--_pg-fs, 14px);line-height:1}.ius-pagination__compact{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary)}.ius-pagination__compact b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums}.ius-pagination__sizer{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--_pg-fs, 14px);color:var(--ius-text-secondary);white-space:nowrap}\n"] }]
|
|
11090
11091
|
}], propDecorators: { variant: [{
|
|
11091
11092
|
type: Input
|
|
11092
11093
|
}], page: [{
|
|
@@ -11937,11 +11938,11 @@ class WizardComponent {
|
|
|
11937
11938
|
this.ofWord = 'de';
|
|
11938
11939
|
}
|
|
11939
11940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11940
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WizardComponent, isStandalone: true, selector: "ius-wizard", inputs: { api: "api", showIndicator: ["showIndicator", "showIndicator", booleanAttribute], indicator: "indicator", showStepLabel: ["showStepLabel", "showStepLabel", booleanAttribute], stepWord: "stepWord", ofWord: "ofWord" }, host: { classAttribute: "ius-wizard" }, ngImport: i0, template: "@if (api) {\n @if (showIndicator || showStepLabel) {\n <div class=\"ius-wizard__head\">\n @if (showIndicator) {\n @if (indicator) {\n <ng-container [ngTemplateOutlet]=\"indicator\" />\n } @else {\n <ius-linear-progress-bar [steps]=\"api.total\" [step]=\"api.step\" />\n }\n }\n @if (showStepLabel) {\n <span class=\"ius-wizard__label\">\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\n @if (api.current?.label) {\n <span> \u00B7 {{ api.current?.label }}</span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"ius-wizard__step\">\n @if (api.current?.content) {\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: WizardComponent, isStandalone: true, selector: "ius-wizard", inputs: { api: "api", showIndicator: ["showIndicator", "showIndicator", booleanAttribute], indicator: "indicator", showStepLabel: ["showStepLabel", "showStepLabel", booleanAttribute], stepWord: "stepWord", ofWord: "ofWord" }, host: { classAttribute: "ius-wizard" }, ngImport: i0, template: "@if (api) {\r\n @if (showIndicator || showStepLabel) {\r\n <div class=\"ius-wizard__head\">\r\n @if (showIndicator) {\r\n @if (indicator) {\r\n <ng-container [ngTemplateOutlet]=\"indicator\" />\r\n } @else {\r\n <ius-linear-progress-bar [steps]=\"api.total\" [step]=\"api.step\" />\r\n }\r\n }\r\n @if (showStepLabel) {\r\n <span class=\"ius-wizard__label\">\r\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\r\n @if (api.current?.label) {\r\n <span> \u00B7 {{ api.current?.label }}</span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-wizard__step\">\r\n @if (api.current?.content) {\r\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
11941
11942
|
}
|
|
11942
11943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: WizardComponent, decorators: [{
|
|
11943
11944
|
type: Component,
|
|
11944
|
-
args: [{ selector: 'ius-wizard', standalone: true, imports: [NgTemplateOutlet, LinearProgressBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard' }, template: "@if (api) {\n @if (showIndicator || showStepLabel) {\n <div class=\"ius-wizard__head\">\n @if (showIndicator) {\n @if (indicator) {\n <ng-container [ngTemplateOutlet]=\"indicator\" />\n } @else {\n <ius-linear-progress-bar [steps]=\"api.total\" [step]=\"api.step\" />\n }\n }\n @if (showStepLabel) {\n <span class=\"ius-wizard__label\">\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\n @if (api.current?.label) {\n <span> \u00B7 {{ api.current?.label }}</span>\n }\n </span>\n }\n </div>\n }\n\n <div class=\"ius-wizard__step\">\n @if (api.current?.content) {\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\n }\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}\n"] }]
|
|
11945
|
+
args: [{ selector: 'ius-wizard', standalone: true, imports: [NgTemplateOutlet, LinearProgressBarComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'ius-wizard' }, template: "@if (api) {\r\n @if (showIndicator || showStepLabel) {\r\n <div class=\"ius-wizard__head\">\r\n @if (showIndicator) {\r\n @if (indicator) {\r\n <ng-container [ngTemplateOutlet]=\"indicator\" />\r\n } @else {\r\n <ius-linear-progress-bar [steps]=\"api.total\" [step]=\"api.step\" />\r\n }\r\n }\r\n @if (showStepLabel) {\r\n <span class=\"ius-wizard__label\">\r\n {{ stepWord }} <b>{{ api.step }}</b> {{ ofWord }} {{ api.total }}\r\n @if (api.current?.label) {\r\n <span> \u00B7 {{ api.current?.label }}</span>\r\n }\r\n </span>\r\n }\r\n </div>\r\n }\r\n\r\n <div class=\"ius-wizard__step\">\r\n @if (api.current?.content) {\r\n <ng-container [ngTemplateOutlet]=\"api.current!.content!\" />\r\n }\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-md);font-family:var(--ius-font-body);min-width:0}.ius-wizard__head{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-wizard__label{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}.ius-wizard__label b{color:var(--ius-text-primary);font-weight:var(--ius-fw-medium)}.ius-wizard__step{min-width:0}\n"] }]
|
|
11945
11946
|
}], propDecorators: { api: [{
|
|
11946
11947
|
type: Input,
|
|
11947
11948
|
args: [{ required: true }]
|
|
@@ -13088,7 +13089,7 @@ class SegmentGroupComponent {
|
|
|
13088
13089
|
...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
13089
13090
|
}
|
|
13090
13091
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13091
|
-
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: "<!--\
|
|
13092
|
+
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 }); }
|
|
13092
13093
|
}
|
|
13093
13094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SegmentGroupComponent, decorators: [{
|
|
13094
13095
|
type: Component,
|
|
@@ -13097,7 +13098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13097
13098
|
class: 'ius-segmentgroup',
|
|
13098
13099
|
role: 'group',
|
|
13099
13100
|
'[attr.aria-label]': 'ariaLabel() ?? null',
|
|
13100
|
-
}, template: "<!--\
|
|
13101
|
+
}, 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"] }]
|
|
13101
13102
|
}], propDecorators: { ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
13102
13103
|
|
|
13103
13104
|
/** Acota `n` al rango `[a, b]` (espejo del `clamp` del golden). */
|
|
@@ -13977,7 +13978,7 @@ class ToastComponent {
|
|
|
13977
13978
|
...(ngDevMode ? [{ debugName: "showRing" }] : /* istanbul ignore next */ []));
|
|
13978
13979
|
}
|
|
13979
13980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13980
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ToastComponent, isStandalone: true, selector: "ius-toast", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "tone() === 'danger' ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-paused": "paused() ? 'true' : null" }, classAttribute: "ius-toast" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusToastActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-toast__main\">\n @if (title() != null) {\n <div class=\"ius-toast__title\">{{ title() }}</div>\n }\n @if (message() != null) {\n <div class=\"ius-toast__msg\">{{ message() }}</div>\n }\n @if (hasAction()) {\n <div class=\"ius-toast__action\">\n @if (action(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"actionOutletContext()\" />\n }\n <ng-content select=\"[iusToastAction]\" />\n </div>\n }\n</div>\n\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\n@if (showRing()) {\n <div class=\"ius-toast__timer\">\n <ius-circular-progress\n [duration]=\"duration()\"\n [paused]=\"paused()\"\n [tone]=\"tone()\"\n size=\"medium\"\n ariaLabel=\"Cierre autom\u00E1tico\"\n >\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\n </ius-circular-progress>\n </div>\n} @else if (closable()) {\n <div class=\"ius-toast__timer\" data-ring=\"false\">\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\n </div>\n}\n\n<ng-template #closeTpl>\n @if (closable()) {\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close: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: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ToastComponent, isStandalone: true, selector: "ius-toast", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, actionContext: { classPropertyName: "actionContext", publicName: "actionContext", isSignal: true, isRequired: false, transformFunction: null }, closable: { classPropertyName: "closable", publicName: "closable", isSignal: true, isRequired: false, transformFunction: null }, duration: { classPropertyName: "duration", publicName: "duration", isSignal: true, isRequired: false, transformFunction: null }, paused: { classPropertyName: "paused", publicName: "paused", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "tone() === 'danger' ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-paused": "paused() ? 'true' : null" }, classAttribute: "ius-toast" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusToastActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"actionOutletContext()\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close: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: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
13981
13982
|
}
|
|
13982
13983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastComponent, decorators: [{
|
|
13983
13984
|
type: Component,
|
|
@@ -13988,7 +13989,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
13988
13989
|
'[attr.role]': "tone() === 'danger' ? 'alert' : 'status'",
|
|
13989
13990
|
'[attr.data-tone]': 'tone()',
|
|
13990
13991
|
'[attr.data-paused]': "paused() ? 'true' : null",
|
|
13991
|
-
}, template: "@if (iconName()) {\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\n </span>\n}\n\n<div class=\"ius-toast__main\">\n @if (title() != null) {\n <div class=\"ius-toast__title\">{{ title() }}</div>\n }\n @if (message() != null) {\n <div class=\"ius-toast__msg\">{{ message() }}</div>\n }\n @if (hasAction()) {\n <div class=\"ius-toast__action\">\n @if (action(); as tpl) {\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"actionOutletContext()\" />\n }\n <ng-content select=\"[iusToastAction]\" />\n </div>\n }\n</div>\n\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\n@if (showRing()) {\n <div class=\"ius-toast__timer\">\n <ius-circular-progress\n [duration]=\"duration()\"\n [paused]=\"paused()\"\n [tone]=\"tone()\"\n size=\"medium\"\n ariaLabel=\"Cierre autom\u00E1tico\"\n >\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\n </ius-circular-progress>\n </div>\n} @else if (closable()) {\n <div class=\"ius-toast__timer\" data-ring=\"false\">\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\n </div>\n}\n\n<ng-template #closeTpl>\n @if (closable()) {\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\n <span translate=\"no\" class=\"ius-icon\">close</span>\n </button>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
13992
|
+
}, template: "@if (iconName()) {\r\n <span class=\"ius-toast__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ iconName() }}</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-toast__main\">\r\n @if (title() != null) {\r\n <div class=\"ius-toast__title\">{{ title() }}</div>\r\n }\r\n @if (message() != null) {\r\n <div class=\"ius-toast__msg\">{{ message() }}</div>\r\n }\r\n @if (hasAction()) {\r\n <div class=\"ius-toast__action\">\r\n @if (action(); as tpl) {\r\n <ng-container [ngTemplateOutlet]=\"tpl\" [ngTemplateOutletContext]=\"actionOutletContext()\" />\r\n }\r\n <ng-content select=\"[iusToastAction]\" />\r\n </div>\r\n }\r\n</div>\r\n\r\n<!-- Cluster del temporizador: el \u00D7 va DENTRO del aro de cuenta regresiva\r\n (contenido central de CircularProgress). Sin aro, el cluster conserva el\r\n di\u00E1metro del anillo para que el \u00D7 no cambie de sitio. -->\r\n@if (showRing()) {\r\n <div class=\"ius-toast__timer\">\r\n <ius-circular-progress\r\n [duration]=\"duration()\"\r\n [paused]=\"paused()\"\r\n [tone]=\"tone()\"\r\n size=\"medium\"\r\n ariaLabel=\"Cierre autom\u00E1tico\"\r\n >\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </ius-circular-progress>\r\n </div>\r\n} @else if (closable()) {\r\n <div class=\"ius-toast__timer\" data-ring=\"false\">\r\n <ng-container [ngTemplateOutlet]=\"closeTpl\" />\r\n </div>\r\n}\r\n\r\n<ng-template #closeTpl>\r\n @if (closable()) {\r\n <button type=\"button\" class=\"ius-toast__close\" aria-label=\"Cerrar\" (click)=\"closed.emit()\">\r\n <span translate=\"no\" class=\"ius-icon\">close</span>\r\n </button>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_to-accent: var(--ius-info-600);pointer-events:auto;box-sizing:border-box;width:100%;display:flex;align-items:flex-start;gap:var(--ius-space-sm);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border-radius:var(--ius-radius-lg);box-shadow:inset 2px 0 0 0 var(--_to-accent),var(--ius-elevation-300);font-family:var(--ius-font-body);position:relative}:host([data-tone=info]){--_to-accent: var(--ius-info-600)}:host([data-tone=success]){--_to-accent: var(--ius-success-600)}:host([data-tone=warning]){--_to-accent: var(--ius-warning-600)}:host([data-tone=danger]){--_to-accent: var(--ius-danger-600)}:host([data-tone=neutral]){--_to-accent: var(--ius-neutral-7)}.ius-toast__icon{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;color:var(--_to-accent);margin-top:1px}.ius-toast__icon .ius-icon{font-size:var(--ius-icon-lg);line-height:1}.ius-toast__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-toast__title{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-toast__msg{font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-toast__action{margin-top:var(--ius-space-xs);display:flex;justify-content:flex-end;gap:var(--ius-space-sm);align-items:center}.ius-toast__timer{flex:0 0 auto;margin:-3px -4px 0 0}.ius-toast__timer[data-ring=false]{width:30px;height:30px}.ius-toast__close{width:100%;height:100%;appearance:none;border:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);cursor:pointer;border-radius:50%;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-toast__close .ius-icon{font-size:var(--ius-icon-sm);line-height:1}.ius-toast__close:hover{color:var(--ius-text-primary);background:#0000000f}.ius-toast__close:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
13992
13993
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], actionContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionContext", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], duration: [{ type: i0.Input, args: [{ isSignal: true, alias: "duration", required: false }] }], paused: [{ type: i0.Input, args: [{ isSignal: true, alias: "paused", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], actionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusToastActionDirective), { isSignal: true }] }] } });
|
|
13993
13994
|
|
|
13994
13995
|
/**
|
|
@@ -14077,19 +14078,19 @@ class ToastItemComponent {
|
|
|
14077
14078
|
this.timer = null;
|
|
14078
14079
|
}
|
|
14079
14080
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14080
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ToastItemComponent, isStandalone: true, selector: "ius-toast-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "attr.data-enter": "entered() ? 'true' : 'false'", "attr.data-leaving": "leaving() ? 'true' : null" }, classAttribute: "ius-toast-item" }, ngImport: i0, template: `
|
|
14081
|
-
<ius-toast
|
|
14082
|
-
[tone]="item().tone"
|
|
14083
|
-
[title]="item().title"
|
|
14084
|
-
[message]="item().message"
|
|
14085
|
-
[icon]="item().icon"
|
|
14086
|
-
[action]="item().action"
|
|
14087
|
-
[actionContext]="item().actionContext"
|
|
14088
|
-
[closable]="item().closable"
|
|
14089
|
-
[duration]="item().duration"
|
|
14090
|
-
[paused]="paused()"
|
|
14091
|
-
(closed)="beginLeave()"
|
|
14092
|
-
/>
|
|
14081
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.5", type: ToastItemComponent, isStandalone: true, selector: "ius-toast-item", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { dismissed: "dismissed" }, host: { listeners: { "mouseenter": "pause()", "mouseleave": "resume()" }, properties: { "attr.data-enter": "entered() ? 'true' : 'false'", "attr.data-leaving": "leaving() ? 'true' : null" }, classAttribute: "ius-toast-item" }, ngImport: i0, template: `
|
|
14082
|
+
<ius-toast
|
|
14083
|
+
[tone]="item().tone"
|
|
14084
|
+
[title]="item().title"
|
|
14085
|
+
[message]="item().message"
|
|
14086
|
+
[icon]="item().icon"
|
|
14087
|
+
[action]="item().action"
|
|
14088
|
+
[actionContext]="item().actionContext"
|
|
14089
|
+
[closable]="item().closable"
|
|
14090
|
+
[duration]="item().duration"
|
|
14091
|
+
[paused]="paused()"
|
|
14092
|
+
(closed)="beginLeave()"
|
|
14093
|
+
/>
|
|
14093
14094
|
`, isInline: true, dependencies: [{ kind: "component", type: ToastComponent, selector: "ius-toast", inputs: ["tone", "title", "message", "icon", "action", "actionContext", "closable", "duration", "paused"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
14094
14095
|
}
|
|
14095
14096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ToastItemComponent, decorators: [{
|
|
@@ -14098,19 +14099,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14098
14099
|
selector: 'ius-toast-item',
|
|
14099
14100
|
standalone: true,
|
|
14100
14101
|
imports: [ToastComponent],
|
|
14101
|
-
template: `
|
|
14102
|
-
<ius-toast
|
|
14103
|
-
[tone]="item().tone"
|
|
14104
|
-
[title]="item().title"
|
|
14105
|
-
[message]="item().message"
|
|
14106
|
-
[icon]="item().icon"
|
|
14107
|
-
[action]="item().action"
|
|
14108
|
-
[actionContext]="item().actionContext"
|
|
14109
|
-
[closable]="item().closable"
|
|
14110
|
-
[duration]="item().duration"
|
|
14111
|
-
[paused]="paused()"
|
|
14112
|
-
(closed)="beginLeave()"
|
|
14113
|
-
/>
|
|
14102
|
+
template: `
|
|
14103
|
+
<ius-toast
|
|
14104
|
+
[tone]="item().tone"
|
|
14105
|
+
[title]="item().title"
|
|
14106
|
+
[message]="item().message"
|
|
14107
|
+
[icon]="item().icon"
|
|
14108
|
+
[action]="item().action"
|
|
14109
|
+
[actionContext]="item().actionContext"
|
|
14110
|
+
[closable]="item().closable"
|
|
14111
|
+
[duration]="item().duration"
|
|
14112
|
+
[paused]="paused()"
|
|
14113
|
+
(closed)="beginLeave()"
|
|
14114
|
+
/>
|
|
14114
14115
|
`,
|
|
14115
14116
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
14116
14117
|
host: {
|
|
@@ -14654,7 +14655,7 @@ class TimelineComponent {
|
|
|
14654
14655
|
return String(d);
|
|
14655
14656
|
}
|
|
14656
14657
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14657
|
-
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 }); }
|
|
14658
|
+
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 }); }
|
|
14658
14659
|
}
|
|
14659
14660
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TimelineComponent, decorators: [{
|
|
14660
14661
|
type: Component,
|
|
@@ -14665,7 +14666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14665
14666
|
'[style.--_accent-strong]': "'var(--ius-' + accent() + '-600)'",
|
|
14666
14667
|
'[style.--_accent-soft]': "'var(--ius-' + accent() + '-100)'",
|
|
14667
14668
|
'[style.--_accent-c2]': "'var(--ius-' + accent() + '-400)'",
|
|
14668
|
-
}, 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"] }]
|
|
14669
|
+
}, 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"] }]
|
|
14669
14670
|
}], 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"] }] } });
|
|
14670
14671
|
|
|
14671
14672
|
/** Acento → color, calcado del mapa ACCENTS del golden. */
|
|
@@ -14727,7 +14728,7 @@ class SectionHeaderComponent {
|
|
|
14727
14728
|
...(ngDevMode ? [{ debugName: "insigniaTone" }] : /* istanbul ignore next */ []));
|
|
14728
14729
|
}
|
|
14729
14730
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
14730
|
-
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\
|
|
14731
|
+
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 }); }
|
|
14731
14732
|
}
|
|
14732
14733
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionHeaderComponent, decorators: [{
|
|
14733
14734
|
type: Component,
|
|
@@ -14738,7 +14739,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
14738
14739
|
'[attr.data-collapsed]': "collapsed() ? 'true' : null",
|
|
14739
14740
|
'[attr.aria-label]': '(!collapsible() && ariaLabel()) || null',
|
|
14740
14741
|
'[style.--_sech-accent]': 'accentColor()',
|
|
14741
|
-
}, template: "<!-- SectionHeader \u2014 espejo de SectionHeader.jsx. Con collapsible, el cuerpo es\
|
|
14742
|
+
}, 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"] }]
|
|
14742
14743
|
}], 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"] }] } });
|
|
14743
14744
|
|
|
14744
14745
|
/** Pseudo-columnas de selección y de disparador de detalle (mismas claves que el golden). */
|
|
@@ -15581,7 +15582,7 @@ class TableComponent {
|
|
|
15581
15582
|
body.style.userSelect = 'none';
|
|
15582
15583
|
}
|
|
15583
15584
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15584
|
-
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 }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, renderExpanded: { classPropertyName: "renderExpanded", publicName: "renderExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedKeys: { classPropertyName: "defaultExpandedKeys", publicName: "defaultExpandedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandMode: { classPropertyName: "expandMode", publicName: "expandMode", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, getChildren: { classPropertyName: "getChildren", publicName: "getChildren", isSignal: true, isRequired: false, transformFunction: null }, childRowKey: { classPropertyName: "childRowKey", publicName: "childRowKey", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedGroups: { classPropertyName: "defaultExpandedGroups", publicName: "defaultExpandedGroups", isSignal: true, isRequired: false, transformFunction: null }, childSelection: { classPropertyName: "childSelection", publicName: "childSelection", isSignal: true, isRequired: false, transformFunction: null }, groupToggleAriaLabel: { classPropertyName: "groupToggleAriaLabel", publicName: "groupToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, childRowTone: { classPropertyName: "childRowTone", publicName: "childRowTone", isSignal: true, isRequired: false, transformFunction: null }, emptyCell: { classPropertyName: "emptyCell", publicName: "emptyCell", 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", expandedChange: "expandedChange", expandedGroupsChange: "expandedGroupsChange" }, 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'", "attr.data-bar-drag": "barDrag() ? 'true' : null", "attr.data-fills": "fills() ? 'true' : 'false'", "attr.data-has-summary": "summary()?.length ? 'true' : null", "attr.data-child-tone": "hasGroups() && childRowTone() === 'none' ? 'none' : null", "style.height": "px(height())", "style.--_t-headh": "headH()", "style.--_t-footh": "footH()" }, 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<!-- Contenido de celda: render (TemplateRef) \u00B7 valor \u00B7 marca de celda vac\u00EDa. -->\n<ng-template #celda let-b let-c=\"col\">\n @if (c.render) {\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(b, c)\" />\n } @else if (isBlank(cellValue(b.row, c))) {\n @if (emptyMarkOf(c); as mark) {\n <span class=\"ius-table__muted\">{{ mark }}</span>\n }\n } @else {\n {{ cellValue(b.row, c) }}\n }\n</ng-template>\n\n<div\n #scroller\n class=\"ius-table-scroll\"\n [style.max-height]=\"px(maxHeight())\"\n (scroll)=\"onScroll()\"\n>\n <table\n #tabla\n class=\"ius-table\"\n [attr.role]=\"hasGroups() ? 'treegrid' : '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 @if (hasExpand()) {\n <col [style.width]=\"px(selWidth())\" />\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 #allCbx\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll($event, allCbx)\"\n size=\"small\"\n ariaLabel=\"Seleccionar todo\"\n />\n </th>\n }\n @if (hasExpand()) {\n <th\n class=\"ius-table__expcell\"\n [attr.data-pinned]=\"pinSide(expKey)\"\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\n [style.left]=\"pinLeft(expKey)\"\n >\n <span class=\"ius-sr-only\">Detalle</span>\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 @if (hasExpand()) {\n <td class=\"ius-table__expcell\"></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 (b of bodyRows(); track b.track) {\n @if (b.kind === 'row') {\n <tr\n [class]=\"b.cls\"\n [attr.id]=\"b.meta.isChild ? childId(b.key) : null\"\n [attr.data-row-key]=\"hasGroups() ? b.key : null\"\n [attr.data-selected]=\"b.checked ? 'true' : null\"\n [attr.aria-level]=\"hasGroups() ? b.meta.depth + 1 : null\"\n [attr.aria-expanded]=\"b.meta.isGroup ? (b.meta.expanded ? 'true' : 'false') : null\"\n [attr.tabindex]=\"b.clickable || hasGroups() ? 0 : null\"\n [style]=\"b.style\"\n (click)=\"onRowClick(b, $event)\"\n (keydown)=\"onRowKeydown(b, $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]=\"b.accent\"\n (click)=\"$event.stopPropagation()\"\n >\n <ius-checkbox\n #rowCbx\n [checked]=\"b.checked\"\n [indeterminate]=\"b.indeterminate\"\n (checkedChange)=\"toggleRow(b, $event, rowCbx)\"\n size=\"small\"\n [disabled]=\"b.disabled\"\n [ariaLabel]=\"selectAriaLabel()\"\n />\n </td>\n }\n @if (hasExpand()) {\n <td\n class=\"ius-table__expcell\"\n [attr.data-open]=\"b.open ? 'true' : null\"\n [attr.data-pinned]=\"pinSide(expKey)\"\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\n [style.left]=\"pinLeft(expKey)\"\n [style.box-shadow]=\"!selectable() ? b.accent : null\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"b.expOk && $event.stopPropagation()\"\n >\n @if (b.expOk) {\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"labelOf(expandAriaLabel(), b.row, b.index)\"\n [ariaExpanded]=\"b.open\"\n [ariaControls]=\"b.open ? detailId(b.key) : undefined\"\n (clicked)=\"toggleExpand(b.key)\"\n />\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(b.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() && !hasExpand() && ci === 0 ? b.accent : null\"\n >\n @if (hasGroups() && ci === 0) {\n <span class=\"ius-table__gcell\" [attr.data-depth]=\"b.meta.depth\">\n <span\n class=\"ius-table__gtoggle\"\n [attr.data-open]=\"b.meta.expanded ? 'true' : null\"\n [attr.data-ghost]=\"b.meta.isGroup ? null : 'true'\"\n [attr.aria-hidden]=\"b.meta.isGroup ? null : 'true'\"\n (click)=\"b.meta.isGroup && $event.stopPropagation()\"\n (keydown)=\"b.meta.isGroup && onGroupToggleKeydown($event)\"\n >\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"labelOf(groupToggleAriaLabel(), b.row, b.index)\"\n [ariaExpanded]=\"b.meta.isGroup ? b.meta.expanded : undefined\"\n [ariaControls]=\"b.meta.isGroup && b.meta.expanded ? childIds(b.group) : undefined\"\n (clicked)=\"b.meta.isGroup && toggleGroup(b.key)\"\n />\n </span>\n <span class=\"ius-table__gtext\">\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\n </span>\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\n }\n </td>\n }\n </tr>\n } @else {\n <tr\n class=\"ius-table__detail\"\n [attr.id]=\"detailId(b.key)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <td [attr.colspan]=\"colCount()\">\n <div class=\"ius-table__detail-anim\">\n <div class=\"ius-table__detail-clip\">\n <div class=\"ius-table__detail-body\">\n @if (renderExpanded(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: expandedContext(b)\" />\n }\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\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 @if (hasExpand()) {\n <td class=\"ius-table__expcell\"></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\n<!-- Barra superpuesta: thumb sobre el cuerpo, acotado entre cabecera fija y resumen. -->\n@if (vThumb(); as v) {\n <div\n class=\"ius-table__sbar\"\n data-axis=\"y\"\n aria-hidden=\"true\"\n [style.top]=\"headH()\"\n [style.bottom]=\"footH()\"\n >\n <div\n class=\"ius-table__sthumb\"\n [style.top.px]=\"v.pos\"\n [style.height.px]=\"v.size\"\n (pointerdown)=\"startThumbDrag('y', $event)\"\n ></div>\n </div>\n}\n@if (hThumb(); as h) {\n <div\n class=\"ius-table__sbar\"\n data-axis=\"x\"\n aria-hidden=\"true\"\n [style.bottom]=\"footH()\"\n [style.right]=\"vThumb() ? 'var(--_t-bar)' : '0'\"\n >\n <div\n class=\"ius-table__sthumb\"\n [style.left.px]=\"h.pos\"\n [style.width.px]=\"h.size\"\n (pointerdown)=\"startThumbDrag('x', $event)\"\n ></div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;position:relative;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);--_t-headh: 0px;--_t-footh: 0px;--_t-bar: 12px;--_t-gtoggle-h: 28px}.ius-table__sbar{position:absolute;z-index:4;pointer-events:none}.ius-table__sbar[data-axis=y]{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x]{left:0;height:var(--_t-bar)}.ius-table__sthumb{position:absolute;pointer-events:auto;background:var(--ius-neutral-4);border-radius:var(--ius-radius-pill);border:2px solid transparent;background-clip:padding-box;transition:background var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;touch-action:none}.ius-table__sbar[data-axis=y] .ius-table__sthumb{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x] .ius-table__sthumb{bottom:0;height:var(--_t-bar)}.ius-table__sthumb:hover,:host([data-bar-drag=true]) .ius-table__sthumb{background:var(--ius-neutral-5);background-clip:padding-box}: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;scrollbar-width:none;-ms-overflow-style:none}.ius-table-scroll::-webkit-scrollbar{width:0;height:0}.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}:host([data-fills=true]) tbody tr:last-child td,:host([data-has-summary=true]) 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:not(.ius-table__detail):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:not(.ius-table__detail){cursor:pointer}:host([data-clickable=true]) tbody tr:not(.ius-table__detail):active td{background:var(--ius-info-100)}.ius-table thead th.ius-table__expcell,.ius-table tbody td.ius-table__expcell,.ius-table tfoot td.ius-table__expcell{text-align:center;overflow:visible;text-overflow:clip;padding-left:var(--ius-space-xxs);padding-right:var(--ius-space-xxs)}.ius-table__expcell>*{vertical-align:middle}.ius-table__expcell ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__expcell[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__expcell .ius-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ius-table tbody tr.ius-table__detail>td{padding:0;white-space:normal;overflow:visible;text-overflow:clip;background:var(--ius-surface-sunken);border-right:0;cursor:auto}.ius-table__detail-anim{display:grid;grid-template-rows:1fr;animation:ius-table-expand var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__detail-clip{min-height:0;overflow:hidden}.ius-table__detail-body{padding:var(--_t-py) var(--_t-px)}@keyframes ius-table-expand{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table__detail-anim{animation:none}.ius-table__expcell ::ng-deep .ius-icon{transition:none}}.ius-table__gcell{display:flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-table__gcell[data-depth=\"1\"]{padding-left:var(--ius-space-lg)}.ius-table__gtoggle{flex:0 0 auto;display:inline-flex;margin-block:calc((var(--_t-lh) - var(--_t-gtoggle-h)) / 2)}.ius-table__gtoggle[data-ghost=true]{visibility:hidden}.ius-table__gtoggle ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__gtoggle[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__gtext{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-table tbody tr.ius-table__child td{animation:ius-table-child-in var(--ius-duration-base) var(--ius-ease-standard)}:host(:not([data-child-tone=none])) tbody tr.ius-table__child td{background:var(--ius-surface-sunken)}@keyframes ius-table-child-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table tbody tr.ius-table__child td{animation:none}.ius-table__gtoggle ::ng-deep .ius-icon{transition:none}}.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"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15585
|
+
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 }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, renderExpanded: { classPropertyName: "renderExpanded", publicName: "renderExpanded", isSignal: true, isRequired: false, transformFunction: null }, expandedKeys: { classPropertyName: "expandedKeys", publicName: "expandedKeys", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedKeys: { classPropertyName: "defaultExpandedKeys", publicName: "defaultExpandedKeys", isSignal: true, isRequired: false, transformFunction: null }, expandMode: { classPropertyName: "expandMode", publicName: "expandMode", isSignal: true, isRequired: false, transformFunction: null }, expandAriaLabel: { classPropertyName: "expandAriaLabel", publicName: "expandAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, getChildren: { classPropertyName: "getChildren", publicName: "getChildren", isSignal: true, isRequired: false, transformFunction: null }, childRowKey: { classPropertyName: "childRowKey", publicName: "childRowKey", isSignal: true, isRequired: false, transformFunction: null }, expandedGroups: { classPropertyName: "expandedGroups", publicName: "expandedGroups", isSignal: true, isRequired: false, transformFunction: null }, defaultExpandedGroups: { classPropertyName: "defaultExpandedGroups", publicName: "defaultExpandedGroups", isSignal: true, isRequired: false, transformFunction: null }, childSelection: { classPropertyName: "childSelection", publicName: "childSelection", isSignal: true, isRequired: false, transformFunction: null }, groupToggleAriaLabel: { classPropertyName: "groupToggleAriaLabel", publicName: "groupToggleAriaLabel", isSignal: true, isRequired: false, transformFunction: null }, childRowTone: { classPropertyName: "childRowTone", publicName: "childRowTone", isSignal: true, isRequired: false, transformFunction: null }, emptyCell: { classPropertyName: "emptyCell", publicName: "emptyCell", 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", expandedChange: "expandedChange", expandedGroupsChange: "expandedGroupsChange" }, 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'", "attr.data-bar-drag": "barDrag() ? 'true' : null", "attr.data-fills": "fills() ? 'true' : 'false'", "attr.data-has-summary": "summary()?.length ? 'true' : null", "attr.data-child-tone": "hasGroups() && childRowTone() === 'none' ? 'none' : null", "style.height": "px(height())", "style.--_t-headh": "headH()", "style.--_t-footh": "footH()" }, 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<!-- Contenido de celda: render (TemplateRef) \u00B7 valor \u00B7 marca de celda vac\u00EDa. -->\r\n<ng-template #celda let-b let-c=\"col\">\r\n @if (c.render) {\r\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(b, c)\" />\r\n } @else if (isBlank(cellValue(b.row, c))) {\r\n @if (emptyMarkOf(c); as mark) {\r\n <span class=\"ius-table__muted\">{{ mark }}</span>\r\n }\r\n } @else {\r\n {{ cellValue(b.row, c) }}\r\n }\r\n</ng-template>\r\n\r\n<div\r\n #scroller\r\n class=\"ius-table-scroll\"\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 [attr.role]=\"hasGroups() ? 'treegrid' : '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 @if (hasExpand()) {\r\n <col [style.width]=\"px(selWidth())\" />\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 #allCbx\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (checkedChange)=\"toggleAll($event, allCbx)\"\r\n size=\"small\"\r\n ariaLabel=\"Seleccionar todo\"\r\n />\r\n </th>\r\n }\r\n @if (hasExpand()) {\r\n <th\r\n class=\"ius-table__expcell\"\r\n [attr.data-pinned]=\"pinSide(expKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\r\n [style.left]=\"pinLeft(expKey)\"\r\n >\r\n <span class=\"ius-sr-only\">Detalle</span>\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 @if (hasExpand()) {\r\n <td class=\"ius-table__expcell\"></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 (b of bodyRows(); track b.track) {\r\n @if (b.kind === 'row') {\r\n <tr\r\n [class]=\"b.cls\"\r\n [attr.id]=\"b.meta.isChild ? childId(b.key) : null\"\r\n [attr.data-row-key]=\"hasGroups() ? b.key : null\"\r\n [attr.data-selected]=\"b.checked ? 'true' : null\"\r\n [attr.aria-level]=\"hasGroups() ? b.meta.depth + 1 : null\"\r\n [attr.aria-expanded]=\"b.meta.isGroup ? (b.meta.expanded ? 'true' : 'false') : null\"\r\n [attr.tabindex]=\"b.clickable || hasGroups() ? 0 : null\"\r\n [style]=\"b.style\"\r\n (click)=\"onRowClick(b, $event)\"\r\n (keydown)=\"onRowKeydown(b, $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]=\"b.accent\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ius-checkbox\r\n #rowCbx\r\n [checked]=\"b.checked\"\r\n [indeterminate]=\"b.indeterminate\"\r\n (checkedChange)=\"toggleRow(b, $event, rowCbx)\"\r\n size=\"small\"\r\n [disabled]=\"b.disabled\"\r\n [ariaLabel]=\"selectAriaLabel()\"\r\n />\r\n </td>\r\n }\r\n @if (hasExpand()) {\r\n <td\r\n class=\"ius-table__expcell\"\r\n [attr.data-open]=\"b.open ? 'true' : null\"\r\n [attr.data-pinned]=\"pinSide(expKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\r\n [style.left]=\"pinLeft(expKey)\"\r\n [style.box-shadow]=\"!selectable() ? b.accent : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"b.expOk && $event.stopPropagation()\"\r\n >\r\n @if (b.expOk) {\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"labelOf(expandAriaLabel(), b.row, b.index)\"\r\n [ariaExpanded]=\"b.open\"\r\n [ariaControls]=\"b.open ? detailId(b.key) : undefined\"\r\n (clicked)=\"toggleExpand(b.key)\"\r\n />\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(b.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() && !hasExpand() && ci === 0 ? b.accent : null\"\r\n >\r\n @if (hasGroups() && ci === 0) {\r\n <span class=\"ius-table__gcell\" [attr.data-depth]=\"b.meta.depth\">\r\n <span\r\n class=\"ius-table__gtoggle\"\r\n [attr.data-open]=\"b.meta.expanded ? 'true' : null\"\r\n [attr.data-ghost]=\"b.meta.isGroup ? null : 'true'\"\r\n [attr.aria-hidden]=\"b.meta.isGroup ? null : 'true'\"\r\n (click)=\"b.meta.isGroup && $event.stopPropagation()\"\r\n (keydown)=\"b.meta.isGroup && onGroupToggleKeydown($event)\"\r\n >\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"labelOf(groupToggleAriaLabel(), b.row, b.index)\"\r\n [ariaExpanded]=\"b.meta.isGroup ? b.meta.expanded : undefined\"\r\n [ariaControls]=\"b.meta.isGroup && b.meta.expanded ? childIds(b.group) : undefined\"\r\n (clicked)=\"b.meta.isGroup && toggleGroup(b.key)\"\r\n />\r\n </span>\r\n <span class=\"ius-table__gtext\">\r\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\r\n </span>\r\n </span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"ius-table__detail\"\r\n [attr.id]=\"detailId(b.key)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n >\r\n <td [attr.colspan]=\"colCount()\">\r\n <div class=\"ius-table__detail-anim\">\r\n <div class=\"ius-table__detail-clip\">\r\n <div class=\"ius-table__detail-body\">\r\n @if (renderExpanded(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: expandedContext(b)\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n }\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 @if (hasExpand()) {\r\n <td class=\"ius-table__expcell\"></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\r\n<!-- Barra superpuesta: thumb sobre el cuerpo, acotado entre cabecera fija y resumen. -->\r\n@if (vThumb(); as v) {\r\n <div\r\n class=\"ius-table__sbar\"\r\n data-axis=\"y\"\r\n aria-hidden=\"true\"\r\n [style.top]=\"headH()\"\r\n [style.bottom]=\"footH()\"\r\n >\r\n <div\r\n class=\"ius-table__sthumb\"\r\n [style.top.px]=\"v.pos\"\r\n [style.height.px]=\"v.size\"\r\n (pointerdown)=\"startThumbDrag('y', $event)\"\r\n ></div>\r\n </div>\r\n}\r\n@if (hThumb(); as h) {\r\n <div\r\n class=\"ius-table__sbar\"\r\n data-axis=\"x\"\r\n aria-hidden=\"true\"\r\n [style.bottom]=\"footH()\"\r\n [style.right]=\"vThumb() ? 'var(--_t-bar)' : '0'\"\r\n >\r\n <div\r\n class=\"ius-table__sthumb\"\r\n [style.left.px]=\"h.pos\"\r\n [style.width.px]=\"h.size\"\r\n (pointerdown)=\"startThumbDrag('x', $event)\"\r\n ></div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;position:relative;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);--_t-headh: 0px;--_t-footh: 0px;--_t-bar: 12px;--_t-gtoggle-h: 28px}.ius-table__sbar{position:absolute;z-index:4;pointer-events:none}.ius-table__sbar[data-axis=y]{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x]{left:0;height:var(--_t-bar)}.ius-table__sthumb{position:absolute;pointer-events:auto;background:var(--ius-neutral-4);border-radius:var(--ius-radius-pill);border:2px solid transparent;background-clip:padding-box;transition:background var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;touch-action:none}.ius-table__sbar[data-axis=y] .ius-table__sthumb{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x] .ius-table__sthumb{bottom:0;height:var(--_t-bar)}.ius-table__sthumb:hover,:host([data-bar-drag=true]) .ius-table__sthumb{background:var(--ius-neutral-5);background-clip:padding-box}: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;scrollbar-width:none;-ms-overflow-style:none}.ius-table-scroll::-webkit-scrollbar{width:0;height:0}.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}:host([data-fills=true]) tbody tr:last-child td,:host([data-has-summary=true]) 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:not(.ius-table__detail):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:not(.ius-table__detail){cursor:pointer}:host([data-clickable=true]) tbody tr:not(.ius-table__detail):active td{background:var(--ius-info-100)}.ius-table thead th.ius-table__expcell,.ius-table tbody td.ius-table__expcell,.ius-table tfoot td.ius-table__expcell{text-align:center;overflow:visible;text-overflow:clip;padding-left:var(--ius-space-xxs);padding-right:var(--ius-space-xxs)}.ius-table__expcell>*{vertical-align:middle}.ius-table__expcell ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__expcell[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__expcell .ius-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ius-table tbody tr.ius-table__detail>td{padding:0;white-space:normal;overflow:visible;text-overflow:clip;background:var(--ius-surface-sunken);border-right:0;cursor:auto}.ius-table__detail-anim{display:grid;grid-template-rows:1fr;animation:ius-table-expand var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__detail-clip{min-height:0;overflow:hidden}.ius-table__detail-body{padding:var(--_t-py) var(--_t-px)}@keyframes ius-table-expand{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table__detail-anim{animation:none}.ius-table__expcell ::ng-deep .ius-icon{transition:none}}.ius-table__gcell{display:flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-table__gcell[data-depth=\"1\"]{padding-left:var(--ius-space-lg)}.ius-table__gtoggle{flex:0 0 auto;display:inline-flex;margin-block:calc((var(--_t-lh) - var(--_t-gtoggle-h)) / 2)}.ius-table__gtoggle[data-ghost=true]{visibility:hidden}.ius-table__gtoggle ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__gtoggle[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__gtext{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-table tbody tr.ius-table__child td{animation:ius-table-child-in var(--ius-duration-base) var(--ius-ease-standard)}:host(:not([data-child-tone=none])) tbody tr.ius-table__child td{background:var(--ius-surface-sunken)}@keyframes ius-table-child-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table tbody tr.ius-table__child td{animation:none}.ius-table__gtoggle ::ng-deep .ius-icon{transition:none}}.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"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15585
15586
|
}
|
|
15586
15587
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TableComponent, decorators: [{
|
|
15587
15588
|
type: Component,
|
|
@@ -15603,7 +15604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15603
15604
|
'[style.height]': 'px(height())',
|
|
15604
15605
|
'[style.--_t-headh]': 'headH()',
|
|
15605
15606
|
'[style.--_t-footh]': 'footH()',
|
|
15606
|
-
}, 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<!-- Contenido de celda: render (TemplateRef) \u00B7 valor \u00B7 marca de celda vac\u00EDa. -->\n<ng-template #celda let-b let-c=\"col\">\n @if (c.render) {\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(b, c)\" />\n } @else if (isBlank(cellValue(b.row, c))) {\n @if (emptyMarkOf(c); as mark) {\n <span class=\"ius-table__muted\">{{ mark }}</span>\n }\n } @else {\n {{ cellValue(b.row, c) }}\n }\n</ng-template>\n\n<div\n #scroller\n class=\"ius-table-scroll\"\n [style.max-height]=\"px(maxHeight())\"\n (scroll)=\"onScroll()\"\n>\n <table\n #tabla\n class=\"ius-table\"\n [attr.role]=\"hasGroups() ? 'treegrid' : '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 @if (hasExpand()) {\n <col [style.width]=\"px(selWidth())\" />\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 #allCbx\n [checked]=\"allSelected()\"\n [indeterminate]=\"someSelected()\"\n (checkedChange)=\"toggleAll($event, allCbx)\"\n size=\"small\"\n ariaLabel=\"Seleccionar todo\"\n />\n </th>\n }\n @if (hasExpand()) {\n <th\n class=\"ius-table__expcell\"\n [attr.data-pinned]=\"pinSide(expKey)\"\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\n [style.left]=\"pinLeft(expKey)\"\n >\n <span class=\"ius-sr-only\">Detalle</span>\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 @if (hasExpand()) {\n <td class=\"ius-table__expcell\"></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 (b of bodyRows(); track b.track) {\n @if (b.kind === 'row') {\n <tr\n [class]=\"b.cls\"\n [attr.id]=\"b.meta.isChild ? childId(b.key) : null\"\n [attr.data-row-key]=\"hasGroups() ? b.key : null\"\n [attr.data-selected]=\"b.checked ? 'true' : null\"\n [attr.aria-level]=\"hasGroups() ? b.meta.depth + 1 : null\"\n [attr.aria-expanded]=\"b.meta.isGroup ? (b.meta.expanded ? 'true' : 'false') : null\"\n [attr.tabindex]=\"b.clickable || hasGroups() ? 0 : null\"\n [style]=\"b.style\"\n (click)=\"onRowClick(b, $event)\"\n (keydown)=\"onRowKeydown(b, $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]=\"b.accent\"\n (click)=\"$event.stopPropagation()\"\n >\n <ius-checkbox\n #rowCbx\n [checked]=\"b.checked\"\n [indeterminate]=\"b.indeterminate\"\n (checkedChange)=\"toggleRow(b, $event, rowCbx)\"\n size=\"small\"\n [disabled]=\"b.disabled\"\n [ariaLabel]=\"selectAriaLabel()\"\n />\n </td>\n }\n @if (hasExpand()) {\n <td\n class=\"ius-table__expcell\"\n [attr.data-open]=\"b.open ? 'true' : null\"\n [attr.data-pinned]=\"pinSide(expKey)\"\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\n [style.left]=\"pinLeft(expKey)\"\n [style.box-shadow]=\"!selectable() ? b.accent : null\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"b.expOk && $event.stopPropagation()\"\n >\n @if (b.expOk) {\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"labelOf(expandAriaLabel(), b.row, b.index)\"\n [ariaExpanded]=\"b.open\"\n [ariaControls]=\"b.open ? detailId(b.key) : undefined\"\n (clicked)=\"toggleExpand(b.key)\"\n />\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(b.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() && !hasExpand() && ci === 0 ? b.accent : null\"\n >\n @if (hasGroups() && ci === 0) {\n <span class=\"ius-table__gcell\" [attr.data-depth]=\"b.meta.depth\">\n <span\n class=\"ius-table__gtoggle\"\n [attr.data-open]=\"b.meta.expanded ? 'true' : null\"\n [attr.data-ghost]=\"b.meta.isGroup ? null : 'true'\"\n [attr.aria-hidden]=\"b.meta.isGroup ? null : 'true'\"\n (click)=\"b.meta.isGroup && $event.stopPropagation()\"\n (keydown)=\"b.meta.isGroup && onGroupToggleKeydown($event)\"\n >\n <ius-icon-button\n icon=\"chevron_right\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"labelOf(groupToggleAriaLabel(), b.row, b.index)\"\n [ariaExpanded]=\"b.meta.isGroup ? b.meta.expanded : undefined\"\n [ariaControls]=\"b.meta.isGroup && b.meta.expanded ? childIds(b.group) : undefined\"\n (clicked)=\"b.meta.isGroup && toggleGroup(b.key)\"\n />\n </span>\n <span class=\"ius-table__gtext\">\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\n </span>\n </span>\n } @else {\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\n }\n </td>\n }\n </tr>\n } @else {\n <tr\n class=\"ius-table__detail\"\n [attr.id]=\"detailId(b.key)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"$event.stopPropagation()\"\n >\n <td [attr.colspan]=\"colCount()\">\n <div class=\"ius-table__detail-anim\">\n <div class=\"ius-table__detail-clip\">\n <div class=\"ius-table__detail-body\">\n @if (renderExpanded(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: expandedContext(b)\" />\n }\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\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 @if (hasExpand()) {\n <td class=\"ius-table__expcell\"></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\n<!-- Barra superpuesta: thumb sobre el cuerpo, acotado entre cabecera fija y resumen. -->\n@if (vThumb(); as v) {\n <div\n class=\"ius-table__sbar\"\n data-axis=\"y\"\n aria-hidden=\"true\"\n [style.top]=\"headH()\"\n [style.bottom]=\"footH()\"\n >\n <div\n class=\"ius-table__sthumb\"\n [style.top.px]=\"v.pos\"\n [style.height.px]=\"v.size\"\n (pointerdown)=\"startThumbDrag('y', $event)\"\n ></div>\n </div>\n}\n@if (hThumb(); as h) {\n <div\n class=\"ius-table__sbar\"\n data-axis=\"x\"\n aria-hidden=\"true\"\n [style.bottom]=\"footH()\"\n [style.right]=\"vThumb() ? 'var(--_t-bar)' : '0'\"\n >\n <div\n class=\"ius-table__sthumb\"\n [style.left.px]=\"h.pos\"\n [style.width.px]=\"h.size\"\n (pointerdown)=\"startThumbDrag('x', $event)\"\n ></div>\n </div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;position:relative;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);--_t-headh: 0px;--_t-footh: 0px;--_t-bar: 12px;--_t-gtoggle-h: 28px}.ius-table__sbar{position:absolute;z-index:4;pointer-events:none}.ius-table__sbar[data-axis=y]{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x]{left:0;height:var(--_t-bar)}.ius-table__sthumb{position:absolute;pointer-events:auto;background:var(--ius-neutral-4);border-radius:var(--ius-radius-pill);border:2px solid transparent;background-clip:padding-box;transition:background var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;touch-action:none}.ius-table__sbar[data-axis=y] .ius-table__sthumb{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x] .ius-table__sthumb{bottom:0;height:var(--_t-bar)}.ius-table__sthumb:hover,:host([data-bar-drag=true]) .ius-table__sthumb{background:var(--ius-neutral-5);background-clip:padding-box}: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;scrollbar-width:none;-ms-overflow-style:none}.ius-table-scroll::-webkit-scrollbar{width:0;height:0}.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}:host([data-fills=true]) tbody tr:last-child td,:host([data-has-summary=true]) 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:not(.ius-table__detail):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:not(.ius-table__detail){cursor:pointer}:host([data-clickable=true]) tbody tr:not(.ius-table__detail):active td{background:var(--ius-info-100)}.ius-table thead th.ius-table__expcell,.ius-table tbody td.ius-table__expcell,.ius-table tfoot td.ius-table__expcell{text-align:center;overflow:visible;text-overflow:clip;padding-left:var(--ius-space-xxs);padding-right:var(--ius-space-xxs)}.ius-table__expcell>*{vertical-align:middle}.ius-table__expcell ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__expcell[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__expcell .ius-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ius-table tbody tr.ius-table__detail>td{padding:0;white-space:normal;overflow:visible;text-overflow:clip;background:var(--ius-surface-sunken);border-right:0;cursor:auto}.ius-table__detail-anim{display:grid;grid-template-rows:1fr;animation:ius-table-expand var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__detail-clip{min-height:0;overflow:hidden}.ius-table__detail-body{padding:var(--_t-py) var(--_t-px)}@keyframes ius-table-expand{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table__detail-anim{animation:none}.ius-table__expcell ::ng-deep .ius-icon{transition:none}}.ius-table__gcell{display:flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-table__gcell[data-depth=\"1\"]{padding-left:var(--ius-space-lg)}.ius-table__gtoggle{flex:0 0 auto;display:inline-flex;margin-block:calc((var(--_t-lh) - var(--_t-gtoggle-h)) / 2)}.ius-table__gtoggle[data-ghost=true]{visibility:hidden}.ius-table__gtoggle ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__gtoggle[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__gtext{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-table tbody tr.ius-table__child td{animation:ius-table-child-in var(--ius-duration-base) var(--ius-ease-standard)}:host(:not([data-child-tone=none])) tbody tr.ius-table__child td{background:var(--ius-surface-sunken)}@keyframes ius-table-child-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table tbody tr.ius-table__child td{animation:none}.ius-table__gtoggle ::ng-deep .ius-icon{transition:none}}.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"] }]
|
|
15607
|
+
}, 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<!-- Contenido de celda: render (TemplateRef) \u00B7 valor \u00B7 marca de celda vac\u00EDa. -->\r\n<ng-template #celda let-b let-c=\"col\">\r\n @if (c.render) {\r\n <ng-container *ngTemplateOutlet=\"c.render; context: cellContext(b, c)\" />\r\n } @else if (isBlank(cellValue(b.row, c))) {\r\n @if (emptyMarkOf(c); as mark) {\r\n <span class=\"ius-table__muted\">{{ mark }}</span>\r\n }\r\n } @else {\r\n {{ cellValue(b.row, c) }}\r\n }\r\n</ng-template>\r\n\r\n<div\r\n #scroller\r\n class=\"ius-table-scroll\"\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 [attr.role]=\"hasGroups() ? 'treegrid' : '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 @if (hasExpand()) {\r\n <col [style.width]=\"px(selWidth())\" />\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 #allCbx\r\n [checked]=\"allSelected()\"\r\n [indeterminate]=\"someSelected()\"\r\n (checkedChange)=\"toggleAll($event, allCbx)\"\r\n size=\"small\"\r\n ariaLabel=\"Seleccionar todo\"\r\n />\r\n </th>\r\n }\r\n @if (hasExpand()) {\r\n <th\r\n class=\"ius-table__expcell\"\r\n [attr.data-pinned]=\"pinSide(expKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\r\n [style.left]=\"pinLeft(expKey)\"\r\n >\r\n <span class=\"ius-sr-only\">Detalle</span>\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 @if (hasExpand()) {\r\n <td class=\"ius-table__expcell\"></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 (b of bodyRows(); track b.track) {\r\n @if (b.kind === 'row') {\r\n <tr\r\n [class]=\"b.cls\"\r\n [attr.id]=\"b.meta.isChild ? childId(b.key) : null\"\r\n [attr.data-row-key]=\"hasGroups() ? b.key : null\"\r\n [attr.data-selected]=\"b.checked ? 'true' : null\"\r\n [attr.aria-level]=\"hasGroups() ? b.meta.depth + 1 : null\"\r\n [attr.aria-expanded]=\"b.meta.isGroup ? (b.meta.expanded ? 'true' : 'false') : null\"\r\n [attr.tabindex]=\"b.clickable || hasGroups() ? 0 : null\"\r\n [style]=\"b.style\"\r\n (click)=\"onRowClick(b, $event)\"\r\n (keydown)=\"onRowKeydown(b, $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]=\"b.accent\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <ius-checkbox\r\n #rowCbx\r\n [checked]=\"b.checked\"\r\n [indeterminate]=\"b.indeterminate\"\r\n (checkedChange)=\"toggleRow(b, $event, rowCbx)\"\r\n size=\"small\"\r\n [disabled]=\"b.disabled\"\r\n [ariaLabel]=\"selectAriaLabel()\"\r\n />\r\n </td>\r\n }\r\n @if (hasExpand()) {\r\n <td\r\n class=\"ius-table__expcell\"\r\n [attr.data-open]=\"b.open ? 'true' : null\"\r\n [attr.data-pinned]=\"pinSide(expKey)\"\r\n [attr.data-pinned-edge]=\"pinEdge(expKey)\"\r\n [style.left]=\"pinLeft(expKey)\"\r\n [style.box-shadow]=\"!selectable() ? b.accent : null\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"b.expOk && $event.stopPropagation()\"\r\n >\r\n @if (b.expOk) {\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"labelOf(expandAriaLabel(), b.row, b.index)\"\r\n [ariaExpanded]=\"b.open\"\r\n [ariaControls]=\"b.open ? detailId(b.key) : undefined\"\r\n (clicked)=\"toggleExpand(b.key)\"\r\n />\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(b.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() && !hasExpand() && ci === 0 ? b.accent : null\"\r\n >\r\n @if (hasGroups() && ci === 0) {\r\n <span class=\"ius-table__gcell\" [attr.data-depth]=\"b.meta.depth\">\r\n <span\r\n class=\"ius-table__gtoggle\"\r\n [attr.data-open]=\"b.meta.expanded ? 'true' : null\"\r\n [attr.data-ghost]=\"b.meta.isGroup ? null : 'true'\"\r\n [attr.aria-hidden]=\"b.meta.isGroup ? null : 'true'\"\r\n (click)=\"b.meta.isGroup && $event.stopPropagation()\"\r\n (keydown)=\"b.meta.isGroup && onGroupToggleKeydown($event)\"\r\n >\r\n <ius-icon-button\r\n icon=\"chevron_right\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n [ariaLabel]=\"labelOf(groupToggleAriaLabel(), b.row, b.index)\"\r\n [ariaExpanded]=\"b.meta.isGroup ? b.meta.expanded : undefined\"\r\n [ariaControls]=\"b.meta.isGroup && b.meta.expanded ? childIds(b.group) : undefined\"\r\n (clicked)=\"b.meta.isGroup && toggleGroup(b.key)\"\r\n />\r\n </span>\r\n <span class=\"ius-table__gtext\">\r\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\r\n </span>\r\n </span>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"celda; context: { $implicit: b, col: c }\" />\r\n }\r\n </td>\r\n }\r\n </tr>\r\n } @else {\r\n <tr\r\n class=\"ius-table__detail\"\r\n [attr.id]=\"detailId(b.key)\"\r\n (click)=\"$event.stopPropagation()\"\r\n (keydown)=\"$event.stopPropagation()\"\r\n >\r\n <td [attr.colspan]=\"colCount()\">\r\n <div class=\"ius-table__detail-anim\">\r\n <div class=\"ius-table__detail-clip\">\r\n <div class=\"ius-table__detail-body\">\r\n @if (renderExpanded(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: expandedContext(b)\" />\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n }\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 @if (hasExpand()) {\r\n <td class=\"ius-table__expcell\"></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\r\n<!-- Barra superpuesta: thumb sobre el cuerpo, acotado entre cabecera fija y resumen. -->\r\n@if (vThumb(); as v) {\r\n <div\r\n class=\"ius-table__sbar\"\r\n data-axis=\"y\"\r\n aria-hidden=\"true\"\r\n [style.top]=\"headH()\"\r\n [style.bottom]=\"footH()\"\r\n >\r\n <div\r\n class=\"ius-table__sthumb\"\r\n [style.top.px]=\"v.pos\"\r\n [style.height.px]=\"v.size\"\r\n (pointerdown)=\"startThumbDrag('y', $event)\"\r\n ></div>\r\n </div>\r\n}\r\n@if (hThumb(); as h) {\r\n <div\r\n class=\"ius-table__sbar\"\r\n data-axis=\"x\"\r\n aria-hidden=\"true\"\r\n [style.bottom]=\"footH()\"\r\n [style.right]=\"vThumb() ? 'var(--_t-bar)' : '0'\"\r\n >\r\n <div\r\n class=\"ius-table__sthumb\"\r\n [style.left.px]=\"h.pos\"\r\n [style.width.px]=\"h.size\"\r\n (pointerdown)=\"startThumbDrag('x', $event)\"\r\n ></div>\r\n </div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;width:100%;position:relative;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);--_t-headh: 0px;--_t-footh: 0px;--_t-bar: 12px;--_t-gtoggle-h: 28px}.ius-table__sbar{position:absolute;z-index:4;pointer-events:none}.ius-table__sbar[data-axis=y]{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x]{left:0;height:var(--_t-bar)}.ius-table__sthumb{position:absolute;pointer-events:auto;background:var(--ius-neutral-4);border-radius:var(--ius-radius-pill);border:2px solid transparent;background-clip:padding-box;transition:background var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;touch-action:none}.ius-table__sbar[data-axis=y] .ius-table__sthumb{right:0;width:var(--_t-bar)}.ius-table__sbar[data-axis=x] .ius-table__sthumb{bottom:0;height:var(--_t-bar)}.ius-table__sthumb:hover,:host([data-bar-drag=true]) .ius-table__sthumb{background:var(--ius-neutral-5);background-clip:padding-box}: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;scrollbar-width:none;-ms-overflow-style:none}.ius-table-scroll::-webkit-scrollbar{width:0;height:0}.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}:host([data-fills=true]) tbody tr:last-child td,:host([data-has-summary=true]) 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:not(.ius-table__detail):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:not(.ius-table__detail){cursor:pointer}:host([data-clickable=true]) tbody tr:not(.ius-table__detail):active td{background:var(--ius-info-100)}.ius-table thead th.ius-table__expcell,.ius-table tbody td.ius-table__expcell,.ius-table tfoot td.ius-table__expcell{text-align:center;overflow:visible;text-overflow:clip;padding-left:var(--ius-space-xxs);padding-right:var(--ius-space-xxs)}.ius-table__expcell>*{vertical-align:middle}.ius-table__expcell ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__expcell[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__expcell .ius-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.ius-table tbody tr.ius-table__detail>td{padding:0;white-space:normal;overflow:visible;text-overflow:clip;background:var(--ius-surface-sunken);border-right:0;cursor:auto}.ius-table__detail-anim{display:grid;grid-template-rows:1fr;animation:ius-table-expand var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__detail-clip{min-height:0;overflow:hidden}.ius-table__detail-body{padding:var(--_t-py) var(--_t-px)}@keyframes ius-table-expand{0%{grid-template-rows:0fr;opacity:0}to{grid-template-rows:1fr;opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table__detail-anim{animation:none}.ius-table__expcell ::ng-deep .ius-icon{transition:none}}.ius-table__gcell{display:flex;align-items:center;gap:var(--ius-space-xxs);min-width:0}.ius-table__gcell[data-depth=\"1\"]{padding-left:var(--ius-space-lg)}.ius-table__gtoggle{flex:0 0 auto;display:inline-flex;margin-block:calc((var(--_t-lh) - var(--_t-gtoggle-h)) / 2)}.ius-table__gtoggle[data-ghost=true]{visibility:hidden}.ius-table__gtoggle ::ng-deep .ius-icon{transition:transform var(--ius-duration-base) var(--ius-ease-standard)}.ius-table__gtoggle[data-open=true] ::ng-deep .ius-icon{transform:rotate(90deg)}.ius-table__gtext{min-width:0;overflow:hidden;text-overflow:ellipsis}.ius-table tbody tr.ius-table__child td{animation:ius-table-child-in var(--ius-duration-base) var(--ius-ease-standard)}:host(:not([data-child-tone=none])) tbody tr.ius-table__child td{background:var(--ius-surface-sunken)}@keyframes ius-table-child-in{0%{opacity:0}to{opacity:1}}@media(prefers-reduced-motion:reduce){.ius-table tbody tr.ius-table__child td{animation:none}.ius-table__gtoggle ::ng-deep .ius-icon{transition:none}}.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"] }]
|
|
15607
15608
|
}], 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 }] }], expandable: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandable", required: false }] }], renderExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderExpanded", required: false }] }], expandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedKeys", required: false }] }], defaultExpandedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandedKeys", required: false }] }], expandMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandMode", required: false }] }], expandAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandAriaLabel", required: false }] }], getChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "getChildren", required: false }] }], childRowKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childRowKey", required: false }] }], expandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedGroups", required: false }] }], defaultExpandedGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultExpandedGroups", required: false }] }], childSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "childSelection", required: false }] }], groupToggleAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupToggleAriaLabel", required: false }] }], childRowTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "childRowTone", required: false }] }], emptyCell: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyCell", 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"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }], expandedGroupsChange: [{ type: i0.Output, args: ["expandedGroupsChange"] }] } });
|
|
15608
15609
|
|
|
15609
15610
|
/** Delta libre proyectado (anula el `delta` numérico): `<span iusStatDelta>…</span>`. */
|
|
@@ -15790,7 +15791,7 @@ class StatComponent {
|
|
|
15790
15791
|
event.preventDefault();
|
|
15791
15792
|
}
|
|
15792
15793
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15793
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatComponent, isStandalone: true, selector: "ius-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueTone: { classPropertyName: "valueTone", publicName: "valueTone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "effSize()", "attr.data-align": "align()", "attr.data-interactive": "navigable() || null", "attr.role": "navigable() ? (href() ? 'link' : 'button') : null", "attr.tabindex": "navigable() ? 0 : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-stat" }, queries: [{ propertyName: "deltaSlot", first: true, predicate: IusStatDeltaDirective, descendants: true, isSignal: true }, { propertyName: "sparkSlot", first: true, predicate: IusStatSparklineDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: IusStatLabelDirective, descendants: true, isSignal: true }, { propertyName: "deltaLabelSlot", first: true, predicate: IusStatDeltaLabelDirective, descendants: true, isSignal: true }, { propertyName: "captionSlot", first: true, predicate: IusStatCaptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\n@if (label() != null || hasLabelSlot()) {\n <span class=\"ius-stat__overline\">\n @if (labelIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\n }\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content select=\"[iusStatLabel]\" />\n }\n </span>\n}\n\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\n<span class=\"ius-stat__row\">\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\n @if (value() != null) {\n {{ value() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (delta() != null) {\n <span\n class=\"ius-stat__delta\"\n [attr.data-dir]=\"deltaDir()\"\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\n {{ deltaText() }}\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n } @else if (hasDeltaSlot()) {\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\n <ng-content select=\"[iusStatDelta]\" />\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n }\n</span>\n\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\n@if (hasSparkline()) {\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\n}\n\n<!-- Apoyo (multil\u00EDnea; input de texto \u203A proyecci\u00F3n) -->\n@if (caption() != null || hasCaptionSlot()) {\n <span class=\"ius-stat__caption\">\n @if (caption() != null) {\n {{ caption() }}\n } @else {\n <ng-content select=\"[iusStatCaption]\" />\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_stat-value-fs: var(--ius-fs-h2);--_stat-value-lh: var(--ius-lh-h2);display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;box-sizing:border-box}:host([data-size=sm]){--_stat-value-fs: var(--ius-fs-h3);--_stat-value-lh: var(--ius-lh-h3)}:host([data-size=lg]){--_stat-value-fs: var(--ius-fs-h1);--_stat-value-lh: var(--ius-lh-h1)}:host([data-align=center]){text-align:center;align-items:center}:host([data-interactive=true]){cursor:pointer;border-radius:var(--ius-radius-sm)}:host([data-interactive=true]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-stat__overline{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-stat__overline .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__row{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}:host([data-align=center]) .ius-stat__row{justify-content:center}.ius-stat__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_stat-value-fs);line-height:var(--_stat-value-lh);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-stat__delta{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1;font-weight:var(--ius-fw-bold);font-variant-numeric:tabular-nums}.ius-stat__delta .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__delta[data-dir=up]{color:var(--ius-success-700)}.ius-stat__delta[data-dir=down],.ius-stat__delta[data-dir=up][data-invert=true]{color:var(--ius-danger-600)}.ius-stat__delta[data-dir=down][data-invert=true]{color:var(--ius-success-700)}.ius-stat__delta-label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}.ius-stat__spark{margin-top:var(--ius-space-xxs);line-height:0}.ius-stat__caption{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
15794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StatComponent, isStandalone: true, selector: "ius-stat", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelIcon: { classPropertyName: "labelIcon", publicName: "labelIcon", isSignal: true, isRequired: false, transformFunction: null }, iconTone: { classPropertyName: "iconTone", publicName: "iconTone", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, valueTone: { classPropertyName: "valueTone", publicName: "valueTone", isSignal: true, isRequired: false, transformFunction: null }, delta: { classPropertyName: "delta", publicName: "delta", isSignal: true, isRequired: false, transformFunction: null }, deltaLabel: { classPropertyName: "deltaLabel", publicName: "deltaLabel", isSignal: true, isRequired: false, transformFunction: null }, invertDelta: { classPropertyName: "invertDelta", publicName: "invertDelta", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClickHost($event)", "keydown.enter": "onKeyActivate($event)", "keydown.space": "onSpaceDown($event)", "keyup.space": "onKeyActivate($event)" }, properties: { "attr.data-size": "effSize()", "attr.data-align": "align()", "attr.data-interactive": "navigable() || null", "attr.role": "navigable() ? (href() ? 'link' : 'button') : null", "attr.tabindex": "navigable() ? 0 : null", "attr.aria-label": "ariaLabel() || null" }, classAttribute: "ius-stat" }, queries: [{ propertyName: "deltaSlot", first: true, predicate: IusStatDeltaDirective, descendants: true, isSignal: true }, { propertyName: "sparkSlot", first: true, predicate: IusStatSparklineDirective, descendants: true, isSignal: true }, { propertyName: "labelSlot", first: true, predicate: IusStatLabelDirective, descendants: true, isSignal: true }, { propertyName: "deltaLabelSlot", first: true, predicate: IusStatDeltaLabelDirective, descendants: true, isSignal: true }, { propertyName: "captionSlot", first: true, predicate: IusStatCaptionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\r\n@if (label() != null || hasLabelSlot()) {\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 @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content select=\"[iusStatLabel]\" />\r\n }\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 } @else if (hasDeltaLabelSlot()) {\r\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></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 } @else if (hasDeltaLabelSlot()) {\r\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></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; input de texto \u203A proyecci\u00F3n) -->\r\n@if (caption() != null || hasCaptionSlot()) {\r\n <span class=\"ius-stat__caption\">\r\n @if (caption() != null) {\r\n {{ caption() }}\r\n } @else {\r\n <ng-content select=\"[iusStatCaption]\" />\r\n }\r\n </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 }); }
|
|
15794
15795
|
}
|
|
15795
15796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StatComponent, decorators: [{
|
|
15796
15797
|
type: Component,
|
|
@@ -15806,7 +15807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
15806
15807
|
'(keydown.enter)': 'onKeyActivate($event)',
|
|
15807
15808
|
'(keydown.space)': 'onSpaceDown($event)',
|
|
15808
15809
|
'(keyup.space)': 'onKeyActivate($event)',
|
|
15809
|
-
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\n@if (label() != null || hasLabelSlot()) {\n <span class=\"ius-stat__overline\">\n @if (labelIcon()) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\" [style.color]=\"iconColor()\">{{ labelIcon() }}</span>\n }\n @if (label() != null) {\n {{ label() }}\n } @else {\n <ng-content select=\"[iusStatLabel]\" />\n }\n </span>\n}\n\n<!-- Fila de la cifra: valor tonal + delta (num\u00E9rico o proyectado) -->\n<span class=\"ius-stat__row\">\n <span class=\"ius-stat__value\" [style.color]=\"valueColor()\">\n @if (value() != null) {\n {{ value() }}\n } @else {\n <ng-content />\n }\n </span>\n\n @if (delta() != null) {\n <span\n class=\"ius-stat__delta\"\n [attr.data-dir]=\"deltaDir()\"\n [attr.data-invert]=\"invertDelta() ? 'true' : null\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ deltaArrow() }}</span>\n {{ deltaText() }}\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n } @else if (hasDeltaSlot()) {\n <span class=\"ius-stat__delta\" data-dir=\"flat\">\n <ng-content select=\"[iusStatDelta]\" />\n @if (deltaLabel() != null) {\n <span class=\"ius-stat__delta-label\">{{ deltaLabel() }}</span>\n } @else if (hasDeltaLabelSlot()) {\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></span>\n }\n </span>\n }\n</span>\n\n<!-- Sparkline / microgr\u00E1fico bajo el valor -->\n@if (hasSparkline()) {\n <span class=\"ius-stat__spark\"><ng-content select=\"[iusStatSparkline]\" /></span>\n}\n\n<!-- Apoyo (multil\u00EDnea; input de texto \u203A proyecci\u00F3n) -->\n@if (caption() != null || hasCaptionSlot()) {\n <span class=\"ius-stat__caption\">\n @if (caption() != null) {\n {{ caption() }}\n } @else {\n <ng-content select=\"[iusStatCaption]\" />\n }\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_stat-value-fs: var(--ius-fs-h2);--_stat-value-lh: var(--ius-lh-h2);display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);color:var(--ius-text-primary);text-align:left;text-decoration:none;box-sizing:border-box}:host([data-size=sm]){--_stat-value-fs: var(--ius-fs-h3);--_stat-value-lh: var(--ius-lh-h3)}:host([data-size=lg]){--_stat-value-fs: var(--ius-fs-h1);--_stat-value-lh: var(--ius-lh-h1)}:host([data-align=center]){text-align:center;align-items:center}:host([data-interactive=true]){cursor:pointer;border-radius:var(--ius-radius-sm)}:host([data-interactive=true]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}.ius-stat__overline{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);font-weight:var(--ius-fw-medium);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-stat__overline .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__row{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}:host([data-align=center]) .ius-stat__row{justify-content:center}.ius-stat__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-bold);font-size:var(--_stat-value-fs);line-height:var(--_stat-value-lh);color:var(--ius-text-primary);font-variant-numeric:tabular-nums}.ius-stat__delta{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:1;font-weight:var(--ius-fw-bold);font-variant-numeric:tabular-nums}.ius-stat__delta .ius-icon{font-size:var(--ius-icon-sm)}.ius-stat__delta[data-dir=up]{color:var(--ius-success-700)}.ius-stat__delta[data-dir=down],.ius-stat__delta[data-dir=up][data-invert=true]{color:var(--ius-danger-600)}.ius-stat__delta[data-dir=down][data-invert=true]{color:var(--ius-success-700)}.ius-stat__delta-label{color:var(--ius-text-tertiary);font-weight:var(--ius-fw-regular)}.ius-stat__spark{margin-top:var(--ius-space-xxs);line-height:0}.ius-stat__caption{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary)}\n"] }]
|
|
15810
|
+
}, template: "<!-- Eyebrow: r\u00F3tulo en may\u00FAsculas (input de texto \u203A proyecci\u00F3n), con \u00EDcono opcional que toma el tono -->\r\n@if (label() != null || hasLabelSlot()) {\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 @if (label() != null) {\r\n {{ label() }}\r\n } @else {\r\n <ng-content select=\"[iusStatLabel]\" />\r\n }\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 } @else if (hasDeltaLabelSlot()) {\r\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></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 } @else if (hasDeltaLabelSlot()) {\r\n <span class=\"ius-stat__delta-label\"><ng-content select=\"[iusStatDeltaLabel]\" /></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; input de texto \u203A proyecci\u00F3n) -->\r\n@if (caption() != null || hasCaptionSlot()) {\r\n <span class=\"ius-stat__caption\">\r\n @if (caption() != null) {\r\n {{ caption() }}\r\n } @else {\r\n <ng-content select=\"[iusStatCaption]\" />\r\n }\r\n </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"] }]
|
|
15810
15811
|
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelIcon", required: false }] }], iconTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTone", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueTone", required: false }] }], delta: [{ type: i0.Input, args: [{ isSignal: true, alias: "delta", required: false }] }], deltaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "deltaLabel", required: false }] }], invertDelta: [{ type: i0.Input, args: [{ isSignal: true, alias: "invertDelta", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clicked: [{ type: i0.Output, args: ["clicked"] }], deltaSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatDeltaDirective), { isSignal: true }] }], sparkSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatSparklineDirective), { isSignal: true }] }], labelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatLabelDirective), { isSignal: true }] }], deltaLabelSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatDeltaLabelDirective), { isSignal: true }] }], captionSlot: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusStatCaptionDirective), { isSignal: true }] }] } });
|
|
15811
15812
|
/** Mapa tono → color, idéntico a valueColor/iconColor del golden. */
|
|
15812
15813
|
function toneColor(tone, kind) {
|
|
@@ -15968,11 +15969,11 @@ class SkeletonComponent {
|
|
|
15968
15969
|
...(ngDevMode ? [{ debugName: "chartWidthCss" }] : /* istanbul ignore next */ []));
|
|
15969
15970
|
}
|
|
15970
15971
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
15971
|
-
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 }); }
|
|
15972
|
+
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 }); }
|
|
15972
15973
|
}
|
|
15973
15974
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SkeletonComponent, decorators: [{
|
|
15974
15975
|
type: Component,
|
|
15975
|
-
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"] }]
|
|
15976
|
+
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"] }]
|
|
15976
15977
|
}], 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 }] }] } });
|
|
15977
15978
|
|
|
15978
15979
|
/** Breadcrumb proyectado (solo detalle): `<ius-breadcrumb iusPageHeaderBreadcrumb />`. */
|
|
@@ -16115,7 +16116,7 @@ class PageHeaderComponent {
|
|
|
16115
16116
|
...(ngDevMode ? [{ debugName: "backInBreadcrumb" }] : /* istanbul ignore next */ []));
|
|
16116
16117
|
}
|
|
16117
16118
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16118
|
-
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 }, density: { classPropertyName: "density", publicName: "density", 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", "attr.data-density": "density() === 'compact' ? 'compact' : null" }, classAttribute: "ius-pageheader" }, queries: [{ propertyName: "breadcrumbRef", first: true, predicate: IusPageHeaderBreadcrumbDirective, descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: IusPageHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusPageHeaderToolbarDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusPageHeaderOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusPageHeaderTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusPageHeaderSubtitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\n@if (hasBreadcrumb()) {\n <div class=\"ius-pageheader__bc\">\n @if (backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\n </div>\n}\n\n<div class=\"ius-pageheader__top\">\n <div class=\"ius-pageheader__lead\">\n @if (showBack() && !backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <div class=\"ius-pageheader__titles\">\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\n @if (overline() != null || hasOverlineSlot()) {\n <span class=\"ius-pageheader__overline\">\n @if (overline() != null) {\n {{ overline() }}\n } @else {\n <ng-content select=\"[iusPageHeaderOverline]\" />\n }\n </span>\n }\n @if (title() != null || hasTitleSlot()) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevelEfectivo()\">\n @if (title() != null) {\n {{ title() }}\n } @else {\n <ng-content select=\"[iusPageHeaderTitle]\" />\n }\n </h1>\n }\n @if (subtitle() != null || hasSubtitleSlot()) {\n <p class=\"ius-pageheader__subtitle\">\n @if (subtitle() != null) {\n {{ subtitle() }}\n } @else {\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\n }\n </p>\n }\n </div>\n </div>\n @if (hasActions()) {\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\n }\n</div>\n\n@if (hasToolbar()) {\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}:host([data-density=compact]){--ius-control-size: small;gap:0}:host([data-density=compact]) .ius-pageheader__bc{line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__top{align-items:center;gap:var(--ius-space-sm)}:host([data-density=compact]) .ius-pageheader__lead{align-items:center;gap:var(--ius-space-xs)}:host([data-density=compact]) .ius-pageheader__titles{gap:0}:host([data-density=compact]) .ius-pageheader__overline{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__subtitle{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}:host([data-density=compact][data-surface=true]){padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-density=compact][data-divider=true]){padding-bottom:var(--ius-space-xs)}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16119
|
+
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 }, density: { classPropertyName: "density", publicName: "density", 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", "attr.data-density": "density() === 'compact' ? 'compact' : null" }, classAttribute: "ius-pageheader" }, queries: [{ propertyName: "breadcrumbRef", first: true, predicate: IusPageHeaderBreadcrumbDirective, descendants: true, isSignal: true }, { propertyName: "actionsRef", first: true, predicate: IusPageHeaderActionsDirective, descendants: true, isSignal: true }, { propertyName: "toolbarRef", first: true, predicate: IusPageHeaderToolbarDirective, descendants: true, isSignal: true }, { propertyName: "overlineRef", first: true, predicate: IusPageHeaderOverlineDirective, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: IusPageHeaderTitleDirective, descendants: true, isSignal: true }, { propertyName: "subtitleRef", first: true, predicate: IusPageHeaderSubtitleDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\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 <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\r\n @if (overline() != null || hasOverlineSlot()) {\r\n <span class=\"ius-pageheader__overline\">\r\n @if (overline() != null) {\r\n {{ overline() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderOverline]\" />\r\n }\r\n </span>\r\n }\r\n @if (title() != null || hasTitleSlot()) {\r\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevelEfectivo()\">\r\n @if (title() != null) {\r\n {{ title() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderTitle]\" />\r\n }\r\n </h1>\r\n }\r\n @if (subtitle() != null || hasSubtitleSlot()) {\r\n <p class=\"ius-pageheader__subtitle\">\r\n @if (subtitle() != null) {\r\n {{ subtitle() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\r\n }\r\n </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}:host([data-density=compact]){--ius-control-size: small;gap:0}:host([data-density=compact]) .ius-pageheader__bc{line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__top{align-items:center;gap:var(--ius-space-sm)}:host([data-density=compact]) .ius-pageheader__lead{align-items:center;gap:var(--ius-space-xs)}:host([data-density=compact]) .ius-pageheader__titles{gap:0}:host([data-density=compact]) .ius-pageheader__overline{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__subtitle{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}:host([data-density=compact][data-surface=true]){padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-density=compact][data-divider=true]){padding-bottom:var(--ius-space-xs)}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16119
16120
|
}
|
|
16120
16121
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageHeaderComponent, decorators: [{
|
|
16121
16122
|
type: Component,
|
|
@@ -16124,7 +16125,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16124
16125
|
'[attr.data-divider]': "divider() ? 'true' : null",
|
|
16125
16126
|
'[attr.data-surface]': "surface() ? 'true' : null",
|
|
16126
16127
|
'[attr.data-density]': "density() === 'compact' ? 'compact' : null",
|
|
16127
|
-
}, template: "<!-- Fila de breadcrumb (solo detalle); volver la encabeza si existe -->\n@if (hasBreadcrumb()) {\n <div class=\"ius-pageheader__bc\">\n @if (backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <ng-content select=\"[iusPageHeaderBreadcrumb]\" />\n </div>\n}\n\n<div class=\"ius-pageheader__top\">\n <div class=\"ius-pageheader__lead\">\n @if (showBack() && !backInBreadcrumb()) {\n <span class=\"ius-pageheader__back\">\n <ius-icon-button\n icon=\"arrow_back\"\n variant=\"tertiary\"\n size=\"small\"\n [ariaLabel]=\"backLabel()\"\n (clicked)=\"back.emit($event)\"\n />\n </span>\n }\n <div class=\"ius-pageheader__titles\">\n <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\n @if (overline() != null || hasOverlineSlot()) {\n <span class=\"ius-pageheader__overline\">\n @if (overline() != null) {\n {{ overline() }}\n } @else {\n <ng-content select=\"[iusPageHeaderOverline]\" />\n }\n </span>\n }\n @if (title() != null || hasTitleSlot()) {\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevelEfectivo()\">\n @if (title() != null) {\n {{ title() }}\n } @else {\n <ng-content select=\"[iusPageHeaderTitle]\" />\n }\n </h1>\n }\n @if (subtitle() != null || hasSubtitleSlot()) {\n <p class=\"ius-pageheader__subtitle\">\n @if (subtitle() != null) {\n {{ subtitle() }}\n } @else {\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\n }\n </p>\n }\n </div>\n </div>\n @if (hasActions()) {\n <div class=\"ius-pageheader__actions\"><ng-content select=\"[iusPageHeaderActions]\" /></div>\n }\n</div>\n\n@if (hasToolbar()) {\n <div class=\"ius-pageheader__toolbar\"><ng-content select=\"[iusPageHeaderToolbar]\" /></div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs)}:host([data-surface=true]){background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);padding:var(--ius-space-md) var(--ius-space-lg)}:host([data-divider=true]){border-bottom:1px solid var(--ius-stroke);padding-bottom:var(--ius-space-sm)}.ius-pageheader__bc{min-width:0;display:flex;align-items:center;gap:var(--ius-space-xs)}.ius-pageheader__bc .ius-pageheader__back{margin-top:0}.ius-pageheader__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ius-space-lg)}.ius-pageheader__lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-pageheader__back{flex:0 0 auto}.ius-pageheader__titles{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-pageheader__overline{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary)}.ius-pageheader__title{margin:0}.ius-pageheader__subtitle{margin:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-secondary)}.ius-pageheader__actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-sm)}.ius-pageheader__toolbar{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap}:host([data-density=compact]){--ius-control-size: small;gap:0}:host([data-density=compact]) .ius-pageheader__bc{line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__top{align-items:center;gap:var(--ius-space-sm)}:host([data-density=compact]) .ius-pageheader__lead{align-items:center;gap:var(--ius-space-xs)}:host([data-density=compact]) .ius-pageheader__titles{gap:0}:host([data-density=compact]) .ius-pageheader__overline{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__subtitle{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}:host([data-density=compact][data-surface=true]){padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-density=compact][data-divider=true]){padding-bottom:var(--ius-space-xs)}\n"] }]
|
|
16128
|
+
}, 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 <!-- Cada pieza: input de texto \u203A contenido proyectado con su directiva -->\r\n @if (overline() != null || hasOverlineSlot()) {\r\n <span class=\"ius-pageheader__overline\">\r\n @if (overline() != null) {\r\n {{ overline() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderOverline]\" />\r\n }\r\n </span>\r\n }\r\n @if (title() != null || hasTitleSlot()) {\r\n <h1 class=\"ius-pageheader__title\" [class]=\"'ius-' + titleLevelEfectivo()\">\r\n @if (title() != null) {\r\n {{ title() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderTitle]\" />\r\n }\r\n </h1>\r\n }\r\n @if (subtitle() != null || hasSubtitleSlot()) {\r\n <p class=\"ius-pageheader__subtitle\">\r\n @if (subtitle() != null) {\r\n {{ subtitle() }}\r\n } @else {\r\n <ng-content select=\"[iusPageHeaderSubtitle]\" />\r\n }\r\n </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}:host([data-density=compact]){--ius-control-size: small;gap:0}:host([data-density=compact]) .ius-pageheader__bc{line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__top{align-items:center;gap:var(--ius-space-sm)}:host([data-density=compact]) .ius-pageheader__lead{align-items:center;gap:var(--ius-space-xs)}:host([data-density=compact]) .ius-pageheader__titles{gap:0}:host([data-density=compact]) .ius-pageheader__overline{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm)}:host([data-density=compact]) .ius-pageheader__subtitle{font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-tertiary)}:host([data-density=compact][data-surface=true]){padding:var(--ius-space-xs) var(--ius-space-md)}:host([data-density=compact][data-divider=true]){padding-bottom:var(--ius-space-xs)}\n"] }]
|
|
16128
16129
|
}], 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 }] }], density: [{ type: i0.Input, args: [{ isSignal: true, alias: "density", required: false }] }], showBack: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBack", required: false }] }], backLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "backLabel", required: false }] }], divider: [{ type: i0.Input, args: [{ isSignal: true, alias: "divider", required: false }] }], surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], breadcrumbRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderBreadcrumbDirective), { isSignal: true }] }], actionsRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderActionsDirective), { isSignal: true }] }], toolbarRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderToolbarDirective), { isSignal: true }] }], overlineRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderOverlineDirective), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderTitleDirective), { isSignal: true }] }], subtitleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusPageHeaderSubtitleDirective), { isSignal: true }] }] } });
|
|
16129
16130
|
|
|
16130
16131
|
let uid$a = 0;
|
|
@@ -16356,7 +16357,7 @@ class NumberFieldComponent {
|
|
|
16356
16357
|
useExisting: forwardRef(() => NumberFieldComponent),
|
|
16357
16358
|
multi: true,
|
|
16358
16359
|
},
|
|
16359
|
-
], ngImport: i0, template: "@if (label) {\
|
|
16360
|
+
], 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--hidden{visibility:hidden;pointer-events:none}.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 }); }
|
|
16360
16361
|
}
|
|
16361
16362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NumberFieldComponent, decorators: [{
|
|
16362
16363
|
type: Component,
|
|
@@ -16372,7 +16373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16372
16373
|
'[attr.data-focused]': 'focused() || null',
|
|
16373
16374
|
'[attr.data-error]': 'error || null',
|
|
16374
16375
|
'[attr.data-disabled]': 'disabled || null',
|
|
16375
|
-
}, template: "@if (label) {\
|
|
16376
|
+
}, 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--hidden{visibility:hidden;pointer-events:none}.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"] }]
|
|
16376
16377
|
}], propDecorators: { label: [{
|
|
16377
16378
|
type: Input
|
|
16378
16379
|
}], placeholder: [{
|
|
@@ -16536,11 +16537,11 @@ class FormComponent {
|
|
|
16536
16537
|
el?.focus();
|
|
16537
16538
|
}
|
|
16538
16539
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16539
|
-
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)\">\
|
|
16540
|
+
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", "ariaCurrent", "action", "size"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16540
16541
|
}
|
|
16541
16542
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormComponent, decorators: [{
|
|
16542
16543
|
type: Component,
|
|
16543
|
-
args: [{ selector: 'ius-form', standalone: true, imports: [AlertComponent, ButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<form class=\"ius-form\" [id]=\"formId\" novalidate (submit)=\"onSubmit($event)\">\
|
|
16544
|
+
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"] }]
|
|
16544
16545
|
}], 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 }] }] } });
|
|
16545
16546
|
|
|
16546
16547
|
let uid$8 = 0;
|
|
@@ -16611,7 +16612,7 @@ class FormSectionComponent {
|
|
|
16611
16612
|
this.form.setOpen(openId ? this.sectionId : null);
|
|
16612
16613
|
}
|
|
16613
16614
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16614
|
-
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. -->\
|
|
16615
|
+
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", "maxVisibleActions", "fill", "size", "fillMinHeight", "panelMaxHeight"], outputs: ["openChange", "actionClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
16615
16616
|
}
|
|
16616
16617
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
16617
16618
|
type: Component,
|
|
@@ -16620,7 +16621,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16620
16621
|
'[class.ius-form__section--plain]': '!collapsible()',
|
|
16621
16622
|
'[class.ius-form__section--divided-acc]': "collapsible() && variantEfectiva() === 'divided'",
|
|
16622
16623
|
'[attr.id]': 'sectionId',
|
|
16623
|
-
}, template: "<!-- Rejilla de la secci\u00F3n: un \u00FAnico <ng-content>, estampado en la rama activa. -->\
|
|
16624
|
+
}, 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"] }]
|
|
16624
16625
|
}], 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 }] }] } });
|
|
16625
16626
|
|
|
16626
16627
|
/**
|
|
@@ -16707,7 +16708,7 @@ class SectionTitleComponent {
|
|
|
16707
16708
|
...(ngDevMode ? [{ debugName: "helpAriaLabel" }] : /* istanbul ignore next */ []));
|
|
16708
16709
|
}
|
|
16709
16710
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16710
|
-
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>\
|
|
16711
|
+
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 }); }
|
|
16711
16712
|
}
|
|
16712
16713
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SectionTitleComponent, decorators: [{
|
|
16713
16714
|
type: Component,
|
|
@@ -16719,7 +16720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
16719
16720
|
// `as` es palabra reservada en expresiones de plantilla → se lee vía computed.
|
|
16720
16721
|
'[attr.role]': 'headingRole()',
|
|
16721
16722
|
'[attr.aria-level]': 'headingLevel()',
|
|
16722
|
-
}, template: "<span class=\"ius-section-title__label\"><ng-content /></span>\
|
|
16723
|
+
}, 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"] }]
|
|
16723
16724
|
}], 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 }] }] } });
|
|
16724
16725
|
|
|
16725
16726
|
/**
|
|
@@ -16795,11 +16796,11 @@ class BreadcrumbComponent {
|
|
|
16795
16796
|
this.moreOpen.set(false);
|
|
16796
16797
|
}
|
|
16797
16798
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
16798
|
-
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()\">\
|
|
16799
|
+
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 }); }
|
|
16799
16800
|
}
|
|
16800
16801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BreadcrumbComponent, decorators: [{
|
|
16801
16802
|
type: Component,
|
|
16802
|
-
args: [{ selector: 'ius-breadcrumb', standalone: true, imports: [PopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav [attr.aria-label]=\"ariaLabel()\">\
|
|
16803
|
+
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"] }]
|
|
16803
16804
|
}], 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"] }] } });
|
|
16804
16805
|
|
|
16805
16806
|
/*
|
|
@@ -18205,7 +18206,7 @@ class RadioComponent {
|
|
|
18205
18206
|
useExisting: forwardRef(() => RadioComponent),
|
|
18206
18207
|
multi: true,
|
|
18207
18208
|
},
|
|
18208
|
-
], ngImport: i0, template: "<label class=\"ius-rad__inner\" [attr.data-label-position]=\"labelPosition\">\n <input\n [id]=\"inputId\"\n class=\"ius-rad__input\"\n type=\"radio\"\n [attr.name]=\"name ?? null\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onSelect()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-rad__ctrl\" aria-hidden=\"true\">\n <span class=\"ius-rad__ring\">\n <span class=\"ius-rad__dot\"></span>\n </span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-rad__label\">\n <span>{{ label }}</span>\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_rad-size: 20px;--_rad-halo: 38px;--_rad-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_rad-size: 16px;--_rad-halo: 32px;--_rad-fs: var(--ius-fs-base)}:host([data-size=large]){--_rad-size: 24px;--_rad-halo: var(--ius-hit-target-min);--_rad-fs: var(--ius-fs-lg)}.ius-rad__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_rad-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-rad__inner[data-label-position=left] .ius-rad__label{order:-1}:host([data-disabled=true]) .ius-rad__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-rad__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-rad__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-rad__ctrl:before{content:\"\";position:absolute;width:var(--_rad-halo);height:var(--_rad-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__ring{position:relative;z-index:1;box-sizing:border-box;width:var(--_rad-size);height:var(--_rad-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);border:2px solid var(--ius-neutral-5);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__dot{position:absolute;top:50%;left:50%;width:calc(var(--_rad-size) * .4);height:calc(var(--_rad-size) * .4);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);transform:translate(-50%,-50%) scale(0);transition:transform var(--ius-duration-fast) var(--ius-ease-decelerate)}:host(:hover) .ius-rad__ctrl:before,:host([data-force=hover]) .ius-rad__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-rad__ctrl:before,:host([data-force=pressed]) .ius-rad__ctrl:before,:host([data-force=focused]) .ius-rad__ctrl:before,.ius-rad__input:focus-visible+.ius-rad__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-disabled=true]):hover) .ius-rad__ring,:host(:not([data-checked=true])[data-force=hover]) .ius-rad__ring,:host(:not([data-checked=true])[data-force=focused]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__dot{transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .ius-rad__ring{border-color:var(--ius-stroke);background:var(--ius-neutral-2)}:host([data-disabled=true][data-checked=true]) .ius-rad__ring{border-color:var(--ius-neutral-5)}:host([data-disabled=true][data-checked=true]) .ius-rad__dot{background:var(--ius-neutral-5)}:host([data-disabled=true]) .ius-rad__ctrl:before{background:transparent!important}.ius-rad__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18209
|
+
], ngImport: i0, template: "<label class=\"ius-rad__inner\" [attr.data-label-position]=\"labelPosition\">\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-rad__input\"\r\n type=\"radio\"\r\n [attr.name]=\"name ?? null\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onSelect()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"ius-rad__ctrl\" aria-hidden=\"true\">\r\n <span class=\"ius-rad__ring\">\r\n <span class=\"ius-rad__dot\"></span>\r\n </span>\r\n </span>\r\n\r\n @if (label != null) {\r\n <span class=\"ius-rad__label\">\r\n <span>{{ label }}</span>\r\n </span>\r\n }\r\n</label>\r\n", styles: ["@charset \"UTF-8\";:host{--_rad-size: 20px;--_rad-halo: 38px;--_rad-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_rad-size: 16px;--_rad-halo: 32px;--_rad-fs: var(--ius-fs-base)}:host([data-size=large]){--_rad-size: 24px;--_rad-halo: var(--ius-hit-target-min);--_rad-fs: var(--ius-fs-lg)}.ius-rad__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_rad-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-rad__inner[data-label-position=left] .ius-rad__label{order:-1}:host([data-disabled=true]) .ius-rad__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-rad__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-rad__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-rad__ctrl:before{content:\"\";position:absolute;width:var(--_rad-halo);height:var(--_rad-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__ring{position:relative;z-index:1;box-sizing:border-box;width:var(--_rad-size);height:var(--_rad-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);border:2px solid var(--ius-neutral-5);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__dot{position:absolute;top:50%;left:50%;width:calc(var(--_rad-size) * .4);height:calc(var(--_rad-size) * .4);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);transform:translate(-50%,-50%) scale(0);transition:transform var(--ius-duration-fast) var(--ius-ease-decelerate)}:host(:hover) .ius-rad__ctrl:before,:host([data-force=hover]) .ius-rad__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-rad__ctrl:before,:host([data-force=pressed]) .ius-rad__ctrl:before,:host([data-force=focused]) .ius-rad__ctrl:before,.ius-rad__input:focus-visible+.ius-rad__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-disabled=true]):hover) .ius-rad__ring,:host(:not([data-checked=true])[data-force=hover]) .ius-rad__ring,:host(:not([data-checked=true])[data-force=focused]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__dot{transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .ius-rad__ring{border-color:var(--ius-stroke);background:var(--ius-neutral-2)}:host([data-disabled=true][data-checked=true]) .ius-rad__ring{border-color:var(--ius-neutral-5)}:host([data-disabled=true][data-checked=true]) .ius-rad__dot{background:var(--ius-neutral-5)}:host([data-disabled=true]) .ius-rad__ctrl:before{background:transparent!important}.ius-rad__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
18209
18210
|
}
|
|
18210
18211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RadioComponent, decorators: [{
|
|
18211
18212
|
type: Component,
|
|
@@ -18220,7 +18221,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
18220
18221
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
18221
18222
|
'[attr.data-checked]': "checked ? 'true' : null",
|
|
18222
18223
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
18223
|
-
}, template: "<label class=\"ius-rad__inner\" [attr.data-label-position]=\"labelPosition\">\n <input\n [id]=\"inputId\"\n class=\"ius-rad__input\"\n type=\"radio\"\n [attr.name]=\"name ?? null\"\n [attr.value]=\"value\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n (change)=\"onSelect()\"\n (blur)=\"onBlur()\"\n />\n\n <span class=\"ius-rad__ctrl\" aria-hidden=\"true\">\n <span class=\"ius-rad__ring\">\n <span class=\"ius-rad__dot\"></span>\n </span>\n </span>\n\n @if (label != null) {\n <span class=\"ius-rad__label\">\n <span>{{ label }}</span>\n </span>\n }\n</label>\n", styles: ["@charset \"UTF-8\";:host{--_rad-size: 20px;--_rad-halo: 38px;--_rad-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_rad-size: 16px;--_rad-halo: 32px;--_rad-fs: var(--ius-fs-base)}:host([data-size=large]){--_rad-size: 24px;--_rad-halo: var(--ius-hit-target-min);--_rad-fs: var(--ius-fs-lg)}.ius-rad__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_rad-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-rad__inner[data-label-position=left] .ius-rad__label{order:-1}:host([data-disabled=true]) .ius-rad__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-rad__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-rad__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-rad__ctrl:before{content:\"\";position:absolute;width:var(--_rad-halo);height:var(--_rad-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__ring{position:relative;z-index:1;box-sizing:border-box;width:var(--_rad-size);height:var(--_rad-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);border:2px solid var(--ius-neutral-5);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__dot{position:absolute;top:50%;left:50%;width:calc(var(--_rad-size) * .4);height:calc(var(--_rad-size) * .4);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);transform:translate(-50%,-50%) scale(0);transition:transform var(--ius-duration-fast) var(--ius-ease-decelerate)}:host(:hover) .ius-rad__ctrl:before,:host([data-force=hover]) .ius-rad__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-rad__ctrl:before,:host([data-force=pressed]) .ius-rad__ctrl:before,:host([data-force=focused]) .ius-rad__ctrl:before,.ius-rad__input:focus-visible+.ius-rad__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-disabled=true]):hover) .ius-rad__ring,:host(:not([data-checked=true])[data-force=hover]) .ius-rad__ring,:host(:not([data-checked=true])[data-force=focused]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__dot{transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .ius-rad__ring{border-color:var(--ius-stroke);background:var(--ius-neutral-2)}:host([data-disabled=true][data-checked=true]) .ius-rad__ring{border-color:var(--ius-neutral-5)}:host([data-disabled=true][data-checked=true]) .ius-rad__dot{background:var(--ius-neutral-5)}:host([data-disabled=true]) .ius-rad__ctrl:before{background:transparent!important}.ius-rad__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}\n"] }]
|
|
18224
|
+
}, template: "<label class=\"ius-rad__inner\" [attr.data-label-position]=\"labelPosition\">\r\n <input\r\n [id]=\"inputId\"\r\n class=\"ius-rad__input\"\r\n type=\"radio\"\r\n [attr.name]=\"name ?? null\"\r\n [attr.value]=\"value\"\r\n [checked]=\"checked\"\r\n [disabled]=\"disabled\"\r\n (change)=\"onSelect()\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n <span class=\"ius-rad__ctrl\" aria-hidden=\"true\">\r\n <span class=\"ius-rad__ring\">\r\n <span class=\"ius-rad__dot\"></span>\r\n </span>\r\n </span>\r\n\r\n @if (label != null) {\r\n <span class=\"ius-rad__label\">\r\n <span>{{ label }}</span>\r\n </span>\r\n }\r\n</label>\r\n", styles: ["@charset \"UTF-8\";:host{--_rad-size: 20px;--_rad-halo: 38px;--_rad-fs: var(--ius-fs-base);display:inline-block;vertical-align:middle}:host([data-size=small]){--_rad-size: 16px;--_rad-halo: 32px;--_rad-fs: var(--ius-fs-base)}:host([data-size=large]){--_rad-size: 24px;--_rad-halo: var(--ius-hit-target-min);--_rad-fs: var(--ius-fs-lg)}.ius-rad__inner{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--_rad-fs);color:var(--ius-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.ius-rad__inner[data-label-position=left] .ius-rad__label{order:-1}:host([data-disabled=true]) .ius-rad__inner{cursor:not-allowed;color:var(--ius-text-disabled)}.ius-rad__input{position:absolute;opacity:0;width:0;height:0;margin:0}.ius-rad__ctrl{position:relative;flex:0 0 auto;display:grid;place-items:center}.ius-rad__ctrl:before{content:\"\";position:absolute;width:var(--_rad-halo);height:var(--_rad-halo);border-radius:var(--ius-radius-pill);background:transparent;z-index:0;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__ring{position:relative;z-index:1;box-sizing:border-box;width:var(--_rad-size);height:var(--_rad-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-white);border:2px solid var(--ius-neutral-5);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-rad__dot{position:absolute;top:50%;left:50%;width:calc(var(--_rad-size) * .4);height:calc(var(--_rad-size) * .4);border-radius:var(--ius-radius-pill);background:var(--ius-primary-900);transform:translate(-50%,-50%) scale(0);transition:transform var(--ius-duration-fast) var(--ius-ease-decelerate)}:host(:hover) .ius-rad__ctrl:before,:host([data-force=hover]) .ius-rad__ctrl:before{background:var(--ius-neutral-3)}:host(:active) .ius-rad__ctrl:before,:host([data-force=pressed]) .ius-rad__ctrl:before,:host([data-force=focused]) .ius-rad__ctrl:before,.ius-rad__input:focus-visible+.ius-rad__ctrl:before{background:var(--ius-info-200)}:host(:not([data-checked=true]):not([data-disabled=true]):hover) .ius-rad__ring,:host(:not([data-checked=true])[data-force=hover]) .ius-rad__ring,:host(:not([data-checked=true])[data-force=focused]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__ring{border-color:var(--ius-primary-900)}:host([data-checked=true]) .ius-rad__dot{transform:translate(-50%,-50%) scale(1)}:host([data-disabled=true]) .ius-rad__ring{border-color:var(--ius-stroke);background:var(--ius-neutral-2)}:host([data-disabled=true][data-checked=true]) .ius-rad__ring{border-color:var(--ius-neutral-5)}:host([data-disabled=true][data-checked=true]) .ius-rad__dot{background:var(--ius-neutral-5)}:host([data-disabled=true]) .ius-rad__ctrl:before{background:transparent!important}.ius-rad__label{display:inline-flex;align-items:center;gap:var(--ius-space-xs)}\n"] }]
|
|
18224
18225
|
}], propDecorators: { label: [{
|
|
18225
18226
|
type: Input
|
|
18226
18227
|
}], labelPosition: [{
|
|
@@ -18374,7 +18375,7 @@ class SelectionFieldComponent {
|
|
|
18374
18375
|
useExisting: forwardRef(() => SelectionFieldComponent),
|
|
18375
18376
|
multi: true,
|
|
18376
18377
|
},
|
|
18377
|
-
], ngImport: i0, template: "@if (label != null) {\n <span class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span [id]=\"labelId\">{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\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 </span>\n}\n\n<div class=\"ius-self__group\" [attr.data-direction]=\"direction\">\n @for (opt of options; track opt.value) {\n @switch (type) {\n @case ('radio') {\n <ius-radio\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [name]=\"groupName\"\n [value]=\"'' + opt.value\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n @case ('switch') {\n <ius-switch\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [value]=\"'' + opt.value\"\n [showIconHelp]=\"!!opt.showIconHelp\"\n [iconHelpTitle]=\"opt.iconHelpTitle\"\n [iconHelpContent]=\"opt.iconHelpContent\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n @default {\n <ius-checkbox\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [value]=\"'' + opt.value\"\n [showIconHelp]=\"!!opt.showIconHelp\"\n [iconHelpTitle]=\"opt.iconHelpTitle\"\n [iconHelpContent]=\"opt.iconHelpContent\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n }\n }\n</div>\n\n@if (showHint) {\n <span class=\"ius-tf__hint\" [id]=\"hintId\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-self__group{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-self__group[data-direction=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--ius-space-sm) var(--ius-space-lg)}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__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{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required{background:var(--ius-neutral-5)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "ius-radio", inputs: ["label", "labelPosition", "name", "value", "size", "checked", "defaultChecked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SwitchComponent, selector: "ius-switch", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "disabled"], outputs: ["checkedChange"] }, { 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 }); }
|
|
18378
|
+
], ngImport: i0, template: "@if (label != null) {\r\n <span class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span [id]=\"labelId\">{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-self__group\" [attr.data-direction]=\"direction\">\r\n @for (opt of options; track opt.value) {\r\n @switch (type) {\r\n @case ('radio') {\r\n <ius-radio\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [name]=\"groupName\"\r\n [value]=\"'' + opt.value\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n @case ('switch') {\r\n <ius-switch\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [value]=\"'' + opt.value\"\r\n [showIconHelp]=\"!!opt.showIconHelp\"\r\n [iconHelpTitle]=\"opt.iconHelpTitle\"\r\n [iconHelpContent]=\"opt.iconHelpContent\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n @default {\r\n <ius-checkbox\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [value]=\"'' + opt.value\"\r\n [showIconHelp]=\"!!opt.showIconHelp\"\r\n [iconHelpTitle]=\"opt.iconHelpTitle\"\r\n [iconHelpContent]=\"opt.iconHelpContent\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n }\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span class=\"ius-tf__hint\" [id]=\"hintId\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-self__group{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-self__group[data-direction=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--ius-space-sm) var(--ius-space-lg)}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__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{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required{background:var(--ius-neutral-5)}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: RadioComponent, selector: "ius-radio", inputs: ["label", "labelPosition", "name", "value", "size", "checked", "defaultChecked", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: SwitchComponent, selector: "ius-switch", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "disabled"], outputs: ["checkedChange"] }, { 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 }); }
|
|
18378
18379
|
}
|
|
18379
18380
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectionFieldComponent, decorators: [{
|
|
18380
18381
|
type: Component,
|
|
@@ -18394,7 +18395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
18394
18395
|
'[attr.data-error]': "error ? 'true' : null",
|
|
18395
18396
|
'[attr.data-disabled]': "disabled ? 'true' : null",
|
|
18396
18397
|
'(focusout)': 'onTouched()',
|
|
18397
|
-
}, template: "@if (label != null) {\n <span class=\"ius-tf__label\">\n @if (required) {\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\n }\n <span [id]=\"labelId\">{{ label }}</span>\n @if (showIconHelp) {\n <ius-popover\n [title]=\"iconHelpTitle\"\n [content]=\"iconHelpContent\"\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 </span>\n}\n\n<div class=\"ius-self__group\" [attr.data-direction]=\"direction\">\n @for (opt of options; track opt.value) {\n @switch (type) {\n @case ('radio') {\n <ius-radio\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [name]=\"groupName\"\n [value]=\"'' + opt.value\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n @case ('switch') {\n <ius-switch\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [value]=\"'' + opt.value\"\n [showIconHelp]=\"!!opt.showIconHelp\"\n [iconHelpTitle]=\"opt.iconHelpTitle\"\n [iconHelpContent]=\"opt.iconHelpContent\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n @default {\n <ius-checkbox\n [label]=\"opt.label\"\n [labelPosition]=\"optionLabelPosition\"\n [checked]=\"isChecked(opt.value)\"\n [disabled]=\"disabled || !!opt.disabled\"\n [size]=\"size\"\n [value]=\"'' + opt.value\"\n [showIconHelp]=\"!!opt.showIconHelp\"\n [iconHelpTitle]=\"opt.iconHelpTitle\"\n [iconHelpContent]=\"opt.iconHelpContent\"\n (checkedChange)=\"toggle(opt.value)\"\n />\n }\n }\n }\n</div>\n\n@if (showHint) {\n <span class=\"ius-tf__hint\" [id]=\"hintId\">{{ hint }}</span>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-self__group{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-self__group[data-direction=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--ius-space-sm) var(--ius-space-lg)}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__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{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required{background:var(--ius-neutral-5)}\n"] }]
|
|
18398
|
+
}, template: "@if (label != null) {\r\n <span class=\"ius-tf__label\">\r\n @if (required) {\r\n <span class=\"ius-tf__required\" aria-hidden=\"true\"></span>\r\n }\r\n <span [id]=\"labelId\">{{ label }}</span>\r\n @if (showIconHelp) {\r\n <ius-popover\r\n [title]=\"iconHelpTitle\"\r\n [content]=\"iconHelpContent\"\r\n [disabled]=\"!iconHelpTitle && !iconHelpContent\"\r\n >\r\n <span class=\"ius-tf__help-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Ayuda\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n <span class=\"ius-tf__colon\">:</span>\r\n </span>\r\n}\r\n\r\n<div class=\"ius-self__group\" [attr.data-direction]=\"direction\">\r\n @for (opt of options; track opt.value) {\r\n @switch (type) {\r\n @case ('radio') {\r\n <ius-radio\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [name]=\"groupName\"\r\n [value]=\"'' + opt.value\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n @case ('switch') {\r\n <ius-switch\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [value]=\"'' + opt.value\"\r\n [showIconHelp]=\"!!opt.showIconHelp\"\r\n [iconHelpTitle]=\"opt.iconHelpTitle\"\r\n [iconHelpContent]=\"opt.iconHelpContent\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n @default {\r\n <ius-checkbox\r\n [label]=\"opt.label\"\r\n [labelPosition]=\"optionLabelPosition\"\r\n [checked]=\"isChecked(opt.value)\"\r\n [disabled]=\"disabled || !!opt.disabled\"\r\n [size]=\"size\"\r\n [value]=\"'' + opt.value\"\r\n [showIconHelp]=\"!!opt.showIconHelp\"\r\n [iconHelpTitle]=\"opt.iconHelpTitle\"\r\n [iconHelpContent]=\"opt.iconHelpContent\"\r\n (checkedChange)=\"toggle(opt.value)\"\r\n />\r\n }\r\n }\r\n }\r\n</div>\r\n\r\n@if (showHint) {\r\n <span class=\"ius-tf__hint\" [id]=\"hintId\">{{ hint }}</span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body)}.ius-self__group{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-self__group[data-direction=horizontal]{flex-direction:row;flex-wrap:wrap;gap:var(--ius-space-sm) var(--ius-space-lg)}.ius-tf__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-tf__required{width:5px;height:5px;border-radius:50%;background:var(--ius-danger-500);display:inline-block;margin-right:var(--ius-space-xxs)}.ius-tf__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-tf__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-tf__colon{color:var(--ius-text-secondary)}.ius-tf__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{color:var(--ius-danger-700)}:host([data-disabled=true]) .ius-tf__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-tf__required{background:var(--ius-neutral-5)}\n"] }]
|
|
18398
18399
|
}], propDecorators: { type: [{
|
|
18399
18400
|
type: Input
|
|
18400
18401
|
}], label: [{
|
|
@@ -22960,7 +22961,7 @@ class DateFilterComponent {
|
|
|
22960
22961
|
this.isOpen.set(false);
|
|
22961
22962
|
}
|
|
22962
22963
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22963
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DateFilterComponent, isStandalone: true, selector: "ius-date-filter", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "attr.data-size": "size() ?? null" }, classAttribute: "ius-datefilter" }, ngImport: i0, template: "<!--\
|
|
22964
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: DateFilterComponent, isStandalone: true, selector: "ius-date-filter", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, defaultValue: { classPropertyName: "defaultValue", publicName: "defaultValue", isSignal: true, isRequired: false, transformFunction: null }, presets: { classPropertyName: "presets", publicName: "presets", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, applyLabel: { classPropertyName: "applyLabel", publicName: "applyLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply" }, host: { properties: { "attr.data-size": "size() ?? null" }, classAttribute: "ius-datefilter" }, ngImport: i0, template: "<!--\n DateFilter \u2014 el Popover es el motor de anclaje; el disparador se proyecta\n como children y el panel como `[iusPopoverContent]`. Modo controlado\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\n Sin `dismissable`, como el golden: ver el TSDoc de cabecera.\n-->\n<ius-popover\n trigger=\"click\"\n [placement]=\"placement()\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [open]=\"isOpen()\"\n panelClass=\"ius-datefilter-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- \u2500\u2500 Disparador: p\u00EDldora outline con el valor aplicado \u2500\u2500 -->\n <button\n type=\"button\"\n class=\"ius-datefilter__trigger\"\n aria-haspopup=\"dialog\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-active]=\"active() ? 'true' : null\"\n [attr.aria-expanded]=\"isOpen()\"\n >\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon() }}</span>\n <span>{{ label() }}</span>\n </button>\n\n <!-- \u2500\u2500 Panel: presets + Calendar + pie (se estampa en el overlay) \u2500\u2500 -->\n <div iusPopoverContent class=\"ius-datefilter__panel\">\n <!--\n `@if (isOpen())`: la proyecci\u00F3n se reutiliza entre aperturas; sin \u00E9l el\n Calendar recordar\u00EDa el mes y el nivel navegados la vez anterior.\n -->\n @if (isOpen()) {\n <div class=\"ius-datefilter__body\">\n <div class=\"ius-datefilter__presets\">\n @for (preset of presetList(); track $index; let i = $index) {\n <button\n type=\"button\"\n class=\"ius-datefilter__preset\"\n [attr.data-active]=\"presetFlags()[i] ? 'true' : null\"\n [attr.aria-pressed]=\"presetFlags()[i]\"\n (click)=\"choosePreset(preset)\"\n >{{ preset.label }}</button>\n }\n </div>\n\n <ius-calendar\n [mode]=\"mode()\"\n [value]=\"draft()\"\n (valueChange)=\"onCalendarChange($event)\"\n />\n </div>\n\n <!-- \u2500\u2500 Pie: limpiar \u00B7 cancelar \u00B7 aplicar (staged) \u2500\u2500 -->\n <div class=\"ius-datefilter__foot\">\n <span class=\"ius-datefilter__foot-l\">\n <ius-text-button\n [label]=\"clearLabel()\"\n [size]=\"textButtonSize()\"\n (clicked)=\"clearDraft()\"\n />\n </span>\n <ius-text-button\n [label]=\"cancelLabel()\"\n [size]=\"textButtonSize()\"\n (clicked)=\"cancel()\"\n />\n <ius-button\n variant=\"primary\"\n [size]=\"buttonSize()\"\n [label]=\"applyLabel()\"\n (clicked)=\"applyDraft()\"\n />\n </div>\n }\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-datefilter__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;white-space:nowrap}.ius-datefilter__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-datefilter__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-datefilter__trigger[data-open=true],.ius-datefilter__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-datefilter__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-datefilter__panel{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-datefilter__body{display:flex;gap:var(--ius-space-md)}.ius-datefilter__presets{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:132px;border-right:1px solid var(--ius-stroke);padding-right:var(--ius-space-sm)}.ius-datefilter__preset{appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-sm)}.ius-datefilter__preset:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-datefilter__preset[data-active=true]{background:var(--ius-info-100);color:var(--ius-primary-900);font-weight:var(--ius-fw-semibold)}.ius-datefilter__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-sm)}.ius-datefilter__foot-l{margin-right:auto}\n"], dependencies: [{ kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: CalendarComponent, selector: "ius-calendar", inputs: ["mode", "defaultValue", "value", "viewDate", "minDate", "maxDate", "isDateDisabled", "showToday", "todayLabel", "weekStartsOn"], outputs: ["valueChange", "viewDateChange", "todayClick"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
22964
22965
|
}
|
|
22965
22966
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DateFilterComponent, decorators: [{
|
|
22966
22967
|
type: Component,
|
|
@@ -22968,7 +22969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
22968
22969
|
// Clase raíz del golden (`className: 'ius-datefilter'`).
|
|
22969
22970
|
class: 'ius-datefilter',
|
|
22970
22971
|
'[attr.data-size]': 'size() ?? null',
|
|
22971
|
-
}, template: "<!--\
|
|
22972
|
+
}, template: "<!--\n DateFilter \u2014 el Popover es el motor de anclaje; el disparador se proyecta\n como children y el panel como `[iusPopoverContent]`. Modo controlado\n (`[open]` + `(openChange)`) porque el borrador se re-siembra al abrir.\n Sin `dismissable`, como el golden: ver el TSDoc de cabecera.\n-->\n<ius-popover\n trigger=\"click\"\n [placement]=\"placement()\"\n [showArrow]=\"false\"\n [offset]=\"8\"\n [open]=\"isOpen()\"\n panelClass=\"ius-datefilter-pop\"\n (openChange)=\"onOpenChange($event)\"\n>\n <!-- \u2500\u2500 Disparador: p\u00EDldora outline con el valor aplicado \u2500\u2500 -->\n <button\n type=\"button\"\n class=\"ius-datefilter__trigger\"\n aria-haspopup=\"dialog\"\n [attr.data-open]=\"isOpen() ? 'true' : null\"\n [attr.data-active]=\"active() ? 'true' : null\"\n [attr.aria-expanded]=\"isOpen()\"\n >\n <!-- Ligadura Material Symbols: el texto va pegado, sin espacios sueltos. -->\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ icon() }}</span>\n <span>{{ label() }}</span>\n </button>\n\n <!-- \u2500\u2500 Panel: presets + Calendar + pie (se estampa en el overlay) \u2500\u2500 -->\n <div iusPopoverContent class=\"ius-datefilter__panel\">\n <!--\n `@if (isOpen())`: la proyecci\u00F3n se reutiliza entre aperturas; sin \u00E9l el\n Calendar recordar\u00EDa el mes y el nivel navegados la vez anterior.\n -->\n @if (isOpen()) {\n <div class=\"ius-datefilter__body\">\n <div class=\"ius-datefilter__presets\">\n @for (preset of presetList(); track $index; let i = $index) {\n <button\n type=\"button\"\n class=\"ius-datefilter__preset\"\n [attr.data-active]=\"presetFlags()[i] ? 'true' : null\"\n [attr.aria-pressed]=\"presetFlags()[i]\"\n (click)=\"choosePreset(preset)\"\n >{{ preset.label }}</button>\n }\n </div>\n\n <ius-calendar\n [mode]=\"mode()\"\n [value]=\"draft()\"\n (valueChange)=\"onCalendarChange($event)\"\n />\n </div>\n\n <!-- \u2500\u2500 Pie: limpiar \u00B7 cancelar \u00B7 aplicar (staged) \u2500\u2500 -->\n <div class=\"ius-datefilter__foot\">\n <span class=\"ius-datefilter__foot-l\">\n <ius-text-button\n [label]=\"clearLabel()\"\n [size]=\"textButtonSize()\"\n (clicked)=\"clearDraft()\"\n />\n </span>\n <ius-text-button\n [label]=\"cancelLabel()\"\n [size]=\"textButtonSize()\"\n (clicked)=\"cancel()\"\n />\n <ius-button\n variant=\"primary\"\n [size]=\"buttonSize()\"\n [label]=\"applyLabel()\"\n (clicked)=\"applyDraft()\"\n />\n </div>\n }\n </div>\n</ius-popover>\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:center}.ius-datefilter__trigger{appearance:none;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-family:var(--ius-font-body);font-size:var(--ius-fs-base);line-height:1;color:var(--ius-text-primary);background:var(--ius-neutral-white);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);padding:var(--ius-space-xs) var(--ius-space-sm);cursor:pointer;transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard);-webkit-user-select:none;user-select:none;white-space:nowrap}.ius-datefilter__trigger:hover{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-datefilter__trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-datefilter__trigger[data-open=true],.ius-datefilter__trigger[data-active=true]{border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-datefilter__trigger .ius-icon{font-size:var(--ius-icon-md)}.ius-datefilter__panel{display:flex;flex-direction:column;gap:var(--ius-space-sm)}.ius-datefilter__body{display:flex;gap:var(--ius-space-md)}.ius-datefilter__presets{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:132px;border-right:1px solid var(--ius-stroke);padding-right:var(--ius-space-sm)}.ius-datefilter__preset{appearance:none;border:0;background:transparent;text-align:left;cursor:pointer;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-sm)}.ius-datefilter__preset:hover{background:var(--ius-neutral-2);color:var(--ius-text-primary)}.ius-datefilter__preset[data-active=true]{background:var(--ius-info-100);color:var(--ius-primary-900);font-weight:var(--ius-fw-semibold)}.ius-datefilter__foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--ius-space-sm);border-top:1px solid var(--ius-stroke);padding-top:var(--ius-space-sm)}.ius-datefilter__foot-l{margin-right:auto}\n"] }]
|
|
22972
22973
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], defaultValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultValue", required: false }] }], presets: [{ type: i0.Input, args: [{ isSignal: true, alias: "presets", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], applyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "applyLabel", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }], apply: [{ type: i0.Output, args: ["apply"] }] } });
|
|
22973
22974
|
|
|
22974
22975
|
function esPromesa(v) {
|
|
@@ -23951,7 +23952,7 @@ class AvatarStackComponent {
|
|
|
23951
23952
|
this.moreClick.emit(event);
|
|
23952
23953
|
}
|
|
23953
23954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarStackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarStackComponent, isStandalone: true, selector: "ius-avatar-stack", inputs: { items: "items", max: ["max", "max", numberAttribute], total: ["total", "total", numberAttribute], size: "size", shape: "shape", ring: "ring", ringWidth: "ringWidth", overlap: "overlap", itemStyle: "itemStyle", moreStyle: "moreStyle", moreLabel: "moreLabel", ariaLabel: "ariaLabel" }, outputs: { itemClick: "itemClick", moreClick: "moreClick" }, host: { attributes: { "role": "group" }, properties: { "attr.data-size": "size", "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.aria-label": "ariaLabel || null", "style.--_as-ring": "ring", "style.--_as-ring-w": "ringWidthCss", "style.--_as-overlap": "overlapCss" }, classAttribute: "ius-as" }, ngImport: i0, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\n <ius-avatar\n [size]=\"size\"\n [shape]=\"shape\"\n [src]=\"it.src\"\n [name]=\"it.name\"\n [monogram]=\"it.monogram\"\n [icon]=\"iconFor(it)\"\n [color]=\"it.color ?? 'auto'\"\n [alt]=\"it.name\"\n [ariaLabel]=\"it.ariaLabel\"\n [style]=\"itemStyle ?? null\"\n />\n </span>\n}\n\n@if (extra > 0) {\n @if (moreClickable) {\n <button\n type=\"button\"\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n (click)=\"onMoreClick($event)\"\n >+{{ extra }}</button>\n } @else {\n <span\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n >+{{ extra }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: AvatarStackComponent, isStandalone: true, selector: "ius-avatar-stack", inputs: { items: "items", max: ["max", "max", numberAttribute], total: ["total", "total", numberAttribute], size: "size", shape: "shape", ring: "ring", ringWidth: "ringWidth", overlap: "overlap", itemStyle: "itemStyle", moreStyle: "moreStyle", moreLabel: "moreLabel", ariaLabel: "ariaLabel" }, outputs: { itemClick: "itemClick", moreClick: "moreClick" }, host: { attributes: { "role": "group" }, properties: { "attr.data-size": "size", "attr.data-shape": "shape !== 'circle' ? shape : null", "attr.aria-label": "ariaLabel || null", "style.--_as-ring": "ring", "style.--_as-ring-w": "ringWidthCss", "style.--_as-overlap": "overlapCss" }, classAttribute: "ius-as" }, ngImport: i0, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\r\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\r\n <ius-avatar\r\n [size]=\"size\"\r\n [shape]=\"shape\"\r\n [src]=\"it.src\"\r\n [name]=\"it.name\"\r\n [monogram]=\"it.monogram\"\r\n [icon]=\"iconFor(it)\"\r\n [color]=\"it.color ?? 'auto'\"\r\n [alt]=\"it.name\"\r\n [ariaLabel]=\"it.ariaLabel\"\r\n [style]=\"itemStyle ?? null\"\r\n />\r\n </span>\r\n}\r\n\r\n@if (extra > 0) {\r\n @if (moreClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-as__more\"\r\n [style]=\"moreStyle ?? null\"\r\n [attr.title]=\"moreTitle\"\r\n [attr.aria-label]=\"moreAria\"\r\n (click)=\"onMoreClick($event)\"\r\n >+{{ extra }}</button>\r\n } @else {\r\n <span\r\n class=\"ius-as__more\"\r\n [style]=\"moreStyle ?? null\"\r\n [attr.title]=\"moreTitle\"\r\n [attr.aria-label]=\"moreAria\"\r\n >+{{ extra }}</span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
23955
23956
|
}
|
|
23956
23957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AvatarStackComponent, decorators: [{
|
|
23957
23958
|
type: Component,
|
|
@@ -23964,7 +23965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
23964
23965
|
'[style.--_as-ring]': 'ring',
|
|
23965
23966
|
'[style.--_as-ring-w]': 'ringWidthCss',
|
|
23966
23967
|
'[style.--_as-overlap]': 'overlapCss',
|
|
23967
|
-
}, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\n <ius-avatar\n [size]=\"size\"\n [shape]=\"shape\"\n [src]=\"it.src\"\n [name]=\"it.name\"\n [monogram]=\"it.monogram\"\n [icon]=\"iconFor(it)\"\n [color]=\"it.color ?? 'auto'\"\n [alt]=\"it.name\"\n [ariaLabel]=\"it.ariaLabel\"\n [style]=\"itemStyle ?? null\"\n />\n </span>\n}\n\n@if (extra > 0) {\n @if (moreClickable) {\n <button\n type=\"button\"\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n (click)=\"onMoreClick($event)\"\n >+{{ extra }}</button>\n } @else {\n <span\n class=\"ius-as__more\"\n [style]=\"moreStyle ?? null\"\n [attr.title]=\"moreTitle\"\n [attr.aria-label]=\"moreAria\"\n >+{{ extra }}</span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\n"] }]
|
|
23968
|
+
}, template: "@for (it of visible; track trackItem(it, $index); let i = $index) {\r\n <span class=\"ius-as__item\" [style.z-index]=\"visible.length - i\" (click)=\"onItemClick(it, i, $event)\">\r\n <ius-avatar\r\n [size]=\"size\"\r\n [shape]=\"shape\"\r\n [src]=\"it.src\"\r\n [name]=\"it.name\"\r\n [monogram]=\"it.monogram\"\r\n [icon]=\"iconFor(it)\"\r\n [color]=\"it.color ?? 'auto'\"\r\n [alt]=\"it.name\"\r\n [ariaLabel]=\"it.ariaLabel\"\r\n [style]=\"itemStyle ?? null\"\r\n />\r\n </span>\r\n}\r\n\r\n@if (extra > 0) {\r\n @if (moreClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-as__more\"\r\n [style]=\"moreStyle ?? null\"\r\n [attr.title]=\"moreTitle\"\r\n [attr.aria-label]=\"moreAria\"\r\n (click)=\"onMoreClick($event)\"\r\n >+{{ extra }}</button>\r\n } @else {\r\n <span\r\n class=\"ius-as__more\"\r\n [style]=\"moreStyle ?? null\"\r\n [attr.title]=\"moreTitle\"\r\n [attr.aria-label]=\"moreAria\"\r\n >+{{ extra }}</span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_as-overlap: 11px;--_as-ring-w: 2px;--_as-ring: var(--ius-surface-card);--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm);display:inline-flex;align-items:center;flex:0 0 auto;vertical-align:middle;-webkit-user-select:none;user-select:none;isolation:isolate}:host([data-size=xsmall]){--_as-overlap: 7px;--_as-more-size: 24px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=small]){--_as-overlap: 10px;--_as-more-size: 32px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=medium]){--_as-overlap: 13px;--_as-more-size: 40px;--_as-more-fs: var(--ius-fs-sm)}:host([data-size=large]){--_as-overlap: 20px;--_as-more-size: 64px;--_as-more-fs: var(--ius-fs-h5)}.ius-as__item{display:inline-flex;border-radius:var(--ius-radius-pill)}:host([data-shape=square]) .ius-as__item,:host([data-shape=square]) .ius-as__more{border-radius:var(--ius-radius-lg)}.ius-as__item:not(:first-child),.ius-as__more{margin-left:calc(-1 * var(--_as-overlap))}.ius-as__item>.ius-avt,.ius-as__more{box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring)}.ius-as__more{box-sizing:border-box;position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;width:var(--_as-more-size);height:var(--_as-more-size);border-radius:var(--ius-radius-pill);background:var(--ius-neutral-3);color:var(--ius-neutral-9);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_as-more-fs);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}button.ius-as__more{appearance:none;border:0;padding:0;cursor:pointer}button.ius-as__more:hover{background:var(--ius-neutral-4)}button.ius-as__more:focus-visible{outline:none;box-shadow:0 0 0 var(--_as-ring-w) var(--_as-ring),var(--ius-focus-ring)}\n"] }]
|
|
23968
23969
|
}], propDecorators: { items: [{
|
|
23969
23970
|
type: Input
|
|
23970
23971
|
}], max: [{
|
|
@@ -24126,7 +24127,7 @@ class EventPillComponent {
|
|
|
24126
24127
|
}
|
|
24127
24128
|
}
|
|
24128
24129
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EventPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24129
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EventPillComponent, isStandalone: true, selector: "ius-event-pill", inputs: { title: "title", time: "time", endTime: "endTime", category: "category", hue: "hue", kind: "kind", icon: "icon", customHues: "customHues", customIcons: "customIcons", variant: "variant", fill: "fill", size: "size", location: "location", meta: "meta", assignee: "assignee", showAssignee: ["showAssignee", "showAssignee", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], showDot: ["showDot", "showDot", booleanAttribute], titleLines: ["titleLines", "titleLines", numberAttribute], selected: ["selected", "selected", booleanAttribute], past: ["past", "past", booleanAttribute], hoverable: ["hoverable", "hoverable", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-variant": "variant", "attr.data-fill": "fill", "attr.data-size": "size", "attr.data-past": "past ? 'true' : 'false'", "attr.data-selected": "selected ? 'true' : 'false'", "attr.data-hoverable": "hoverable ? 'true' : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel || null", "attr.aria-pressed": "clickable && selected ? 'true' : null", "style.--_ep-accent": "colors.accent", "style.--_ep-fill": "colors.fill", "style.--_ep-border": "colors.border", "style.--_ep-text": "colors.text", "style.--_ep-solid": "colors.solid", "style.--_ep-on-solid": "colors.onSolid" }, classAttribute: "ius-ep" }, ngImport: i0, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\n<ng-template #lead>\n @if (resolvedIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\n } @else if (showDot) {\n <span class=\"ius-ep__dot\"></span>\n }\n</ng-template>\n\n<ng-template #timeTpl>\n @if (timeText) {\n <span class=\"ius-ep__time\">{{ timeText }}</span>\n }\n</ng-template>\n\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\n line-clamp deja de funcionar. -->\n<ng-template #titleTpl>\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\n @if (clampTitle) {\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\n } @else {\n {{ title }}<ng-content />\n }\n </span>\n</ng-template>\n\n<ng-template #metaTpl>\n @if (meta) {\n <span class=\"ius-ep__meta\">{{ meta }}</span>\n }\n</ng-template>\n\n@if (variant === 'block') {\n <span class=\"ius-ep__head\">\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n </span>\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n\n @if (location) {\n <span class=\"ius-ep__loc\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\n <span>{{ location }}</span>\n </span>\n }\n\n @if (showAssignees) {\n <span class=\"ius-ep__assignee\">\n @if (who; as w) {\n <ius-avatar\n size=\"xsmall\"\n [src]=\"w.src\"\n [name]=\"w.name\"\n [monogram]=\"w.monogram\"\n [icon]=\"whoIcon\"\n [alt]=\"w.name\"\n [style]=\"whoStyle\"\n />\n @if (w.name) {\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\n }\n } @else {\n <ius-avatar-stack\n [items]=\"stackItems\"\n size=\"xsmall\"\n [max]=\"3\"\n [ring]=\"stackRing\"\n [itemStyle]=\"stackItemStyle\"\n [moreStyle]=\"stackMoreStyle\"\n ariaLabel=\"Responsables\"\n />\n }\n </span>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: AvatarStackComponent, selector: "ius-avatar-stack", inputs: ["items", "max", "total", "size", "shape", "ring", "ringWidth", "overlap", "itemStyle", "moreStyle", "moreLabel", "ariaLabel"], outputs: ["itemClick", "moreClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24130
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EventPillComponent, isStandalone: true, selector: "ius-event-pill", inputs: { title: "title", time: "time", endTime: "endTime", category: "category", hue: "hue", kind: "kind", icon: "icon", customHues: "customHues", customIcons: "customIcons", variant: "variant", fill: "fill", size: "size", location: "location", meta: "meta", assignee: "assignee", showAssignee: ["showAssignee", "showAssignee", booleanAttribute], showIcon: ["showIcon", "showIcon", booleanAttribute], showDot: ["showDot", "showDot", booleanAttribute], titleLines: ["titleLines", "titleLines", numberAttribute], selected: ["selected", "selected", booleanAttribute], past: ["past", "past", booleanAttribute], hoverable: ["hoverable", "hoverable", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onHostClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-variant": "variant", "attr.data-fill": "fill", "attr.data-size": "size", "attr.data-past": "past ? 'true' : 'false'", "attr.data-selected": "selected ? 'true' : 'false'", "attr.data-hoverable": "hoverable ? 'true' : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.role": "clickable ? 'button' : null", "attr.tabindex": "clickable ? 0 : null", "attr.aria-label": "ariaLabel || null", "attr.aria-pressed": "clickable && selected ? 'true' : null", "style.--_ep-accent": "colors.accent", "style.--_ep-fill": "colors.fill", "style.--_ep-border": "colors.border", "style.--_ep-text": "colors.text", "style.--_ep-solid": "colors.solid", "style.--_ep-on-solid": "colors.onSolid" }, classAttribute: "ius-ep" }, ngImport: i0, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\r\n<ng-template #lead>\r\n @if (resolvedIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\r\n } @else if (showDot) {\r\n <span class=\"ius-ep__dot\"></span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #timeTpl>\r\n @if (timeText) {\r\n <span class=\"ius-ep__time\">{{ timeText }}</span>\r\n }\r\n</ng-template>\r\n\r\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\r\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\r\n line-clamp deja de funcionar. -->\r\n<ng-template #titleTpl>\r\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\r\n @if (clampTitle) {\r\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\r\n } @else {\r\n {{ title }}<ng-content />\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #metaTpl>\r\n @if (meta) {\r\n <span class=\"ius-ep__meta\">{{ meta }}</span>\r\n }\r\n</ng-template>\r\n\r\n@if (variant === 'block') {\r\n <span class=\"ius-ep__head\">\r\n <ng-container *ngTemplateOutlet=\"lead\" />\r\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\r\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\r\n </span>\r\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\r\n\r\n @if (location) {\r\n <span class=\"ius-ep__loc\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\r\n <span>{{ location }}</span>\r\n </span>\r\n }\r\n\r\n @if (showAssignees) {\r\n <span class=\"ius-ep__assignee\">\r\n @if (who; as w) {\r\n <ius-avatar\r\n size=\"xsmall\"\r\n [src]=\"w.src\"\r\n [name]=\"w.name\"\r\n [monogram]=\"w.monogram\"\r\n [icon]=\"whoIcon\"\r\n [alt]=\"w.name\"\r\n [style]=\"whoStyle\"\r\n />\r\n @if (w.name) {\r\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\r\n }\r\n } @else {\r\n <ius-avatar-stack\r\n [items]=\"stackItems\"\r\n size=\"xsmall\"\r\n [max]=\"3\"\r\n [ring]=\"stackRing\"\r\n [itemStyle]=\"stackItemStyle\"\r\n [moreStyle]=\"stackMoreStyle\"\r\n ariaLabel=\"Responsables\"\r\n />\r\n }\r\n </span>\r\n }\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"lead\" />\r\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\r\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\r\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: AvatarStackComponent, selector: "ius-avatar-stack", inputs: ["items", "max", "total", "size", "shape", "ring", "ringWidth", "overlap", "itemStyle", "moreStyle", "moreLabel", "ariaLabel"], outputs: ["itemClick", "moreClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24130
24131
|
}
|
|
24131
24132
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EventPillComponent, decorators: [{
|
|
24132
24133
|
type: Component,
|
|
@@ -24151,7 +24152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
24151
24152
|
'[style.--_ep-on-solid]': 'colors.onSolid',
|
|
24152
24153
|
'(click)': 'onHostClick($event)',
|
|
24153
24154
|
'(keydown)': 'onKeydown($event)',
|
|
24154
|
-
}, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\n<ng-template #lead>\n @if (resolvedIcon) {\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\n } @else if (showDot) {\n <span class=\"ius-ep__dot\"></span>\n }\n</ng-template>\n\n<ng-template #timeTpl>\n @if (timeText) {\n <span class=\"ius-ep__time\">{{ timeText }}</span>\n }\n</ng-template>\n\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\n line-clamp deja de funcionar. -->\n<ng-template #titleTpl>\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\n @if (clampTitle) {\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\n } @else {\n {{ title }}<ng-content />\n }\n </span>\n</ng-template>\n\n<ng-template #metaTpl>\n @if (meta) {\n <span class=\"ius-ep__meta\">{{ meta }}</span>\n }\n</ng-template>\n\n@if (variant === 'block') {\n <span class=\"ius-ep__head\">\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n </span>\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n\n @if (location) {\n <span class=\"ius-ep__loc\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\n <span>{{ location }}</span>\n </span>\n }\n\n @if (showAssignees) {\n <span class=\"ius-ep__assignee\">\n @if (who; as w) {\n <ius-avatar\n size=\"xsmall\"\n [src]=\"w.src\"\n [name]=\"w.name\"\n [monogram]=\"w.monogram\"\n [icon]=\"whoIcon\"\n [alt]=\"w.name\"\n [style]=\"whoStyle\"\n />\n @if (w.name) {\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\n }\n } @else {\n <ius-avatar-stack\n [items]=\"stackItems\"\n size=\"xsmall\"\n [max]=\"3\"\n [ring]=\"stackRing\"\n [itemStyle]=\"stackItemStyle\"\n [moreStyle]=\"stackMoreStyle\"\n ariaLabel=\"Responsables\"\n />\n }\n </span>\n }\n} @else {\n <ng-container *ngTemplateOutlet=\"lead\" />\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\n}\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
24155
|
+
}, template: "<!-- lead: \u00EDcono del kind (EventCatalog) o punto de acento -->\r\n<ng-template #lead>\r\n @if (resolvedIcon) {\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ resolvedIcon }}</span>\r\n } @else if (showDot) {\r\n <span class=\"ius-ep__dot\"></span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #timeTpl>\r\n @if (timeText) {\r\n <span class=\"ius-ep__time\">{{ timeText }}</span>\r\n }\r\n</ng-template>\r\n\r\n<!-- titleLines: el clamp multil\u00EDnea va en un span INTERNO. Si se aplicara al propio\r\n .ius-ep__title (flex item), el navegador blockifica su display:-webkit-box y el\r\n line-clamp deja de funcionar. -->\r\n<ng-template #titleTpl>\r\n <span class=\"ius-ep__title\" [attr.title]=\"title || null\">\r\n @if (clampTitle) {\r\n <span class=\"ius-ep__clamp\" [style.-webkit-line-clamp]=\"titleLines\">{{ title }}<ng-content /></span>\r\n } @else {\r\n {{ title }}<ng-content />\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #metaTpl>\r\n @if (meta) {\r\n <span class=\"ius-ep__meta\">{{ meta }}</span>\r\n }\r\n</ng-template>\r\n\r\n@if (variant === 'block') {\r\n <span class=\"ius-ep__head\">\r\n <ng-container *ngTemplateOutlet=\"lead\" />\r\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\r\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\r\n </span>\r\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\r\n\r\n @if (location) {\r\n <span class=\"ius-ep__loc\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">location_on</span>\r\n <span>{{ location }}</span>\r\n </span>\r\n }\r\n\r\n @if (showAssignees) {\r\n <span class=\"ius-ep__assignee\">\r\n @if (who; as w) {\r\n <ius-avatar\r\n size=\"xsmall\"\r\n [src]=\"w.src\"\r\n [name]=\"w.name\"\r\n [monogram]=\"w.monogram\"\r\n [icon]=\"whoIcon\"\r\n [alt]=\"w.name\"\r\n [style]=\"whoStyle\"\r\n />\r\n @if (w.name) {\r\n <span class=\"ius-ep__assignee-name\">{{ w.name }}</span>\r\n }\r\n } @else {\r\n <ius-avatar-stack\r\n [items]=\"stackItems\"\r\n size=\"xsmall\"\r\n [max]=\"3\"\r\n [ring]=\"stackRing\"\r\n [itemStyle]=\"stackItemStyle\"\r\n [moreStyle]=\"stackMoreStyle\"\r\n ariaLabel=\"Responsables\"\r\n />\r\n }\r\n </span>\r\n }\r\n} @else {\r\n <ng-container *ngTemplateOutlet=\"lead\" />\r\n <ng-container *ngTemplateOutlet=\"timeTpl\" />\r\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\r\n <ng-container *ngTemplateOutlet=\"metaTpl\" />\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_ep-fs: var(--ius-fs-sm);--_ep-py: 3px;--_ep-px: 7px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 7px;--_ep-icon: var(--ius-icon-sm);--_ep-accent: var(--ius-neutral-7);--_ep-fill: var(--ius-neutral-2);--_ep-border: var(--ius-neutral-4);--_ep-text: var(--ius-neutral-9);--_ep-solid: var(--ius-neutral-6);--_ep-on-solid: var(--ius-neutral-white);--_ep-tint: 20%;--_ep-tint-hover: 32%;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0;overflow:hidden;padding:var(--_ep-py) var(--_ep-px);font-family:var(--ius-font-body);font-size:var(--_ep-fs);line-height:1.35;border-radius:var(--ius-radius-sm);text-align:left;border:1px solid transparent;color:var(--_ep-text);transition:background .12s ease,box-shadow .12s ease,border-color .12s ease,opacity .12s ease,filter .12s ease}:host([data-clickable]){cursor:pointer}:host([data-size=small]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 2px;--_ep-px: 6px;--_ep-gap: var(--ius-space-xxs);--_ep-dot: 6px;--_ep-icon: var(--ius-icon-sm)}:host([data-size=large]){--_ep-fs: var(--ius-fs-sm);--_ep-py: 5px;--_ep-px: 9px;--_ep-gap: var(--ius-space-xs);--_ep-dot: 8px;--_ep-icon: var(--ius-icon-sm)}:host([data-fill=soft]){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent);border-color:transparent;color:var(--_ep-text)}:host([data-fill=soft]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=soft][data-clickable]:hover),:host([data-fill=soft][data-hoverable=true]:hover){background:color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent)}:host([data-fill=gradient]){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint),transparent),color-mix(in srgb,var(--_ep-accent) 8%,transparent));border-color:transparent;color:var(--_ep-text)}:host([data-fill=gradient]) .ius-ep__time{color:var(--_ep-text);opacity:.8}:host([data-fill=gradient][data-clickable]:hover),:host([data-fill=gradient][data-hoverable=true]:hover){background:linear-gradient(135deg,color-mix(in srgb,var(--_ep-accent) var(--_ep-tint-hover),transparent),color-mix(in srgb,var(--_ep-accent) 14%,transparent))}:host([data-fill=plain]){background:transparent;color:var(--ius-text-primary)}:host([data-fill=plain]) .ius-ep__time{color:var(--ius-text-tertiary)}:host([data-fill=plain][data-clickable]:hover),:host([data-fill=plain][data-hoverable=true]:hover){background:var(--_ep-fill)}:host([data-fill=solid]){background:var(--_ep-solid);color:var(--_ep-on-solid);border-color:transparent}:host([data-fill=solid]) .ius-ep__time{color:var(--_ep-on-solid);opacity:.85}:host([data-fill=solid]) .ius-ep__dot{background:var(--_ep-on-solid)}:host([data-fill=solid])>.ius-icon,:host([data-fill=solid]) .ius-ep__head>.ius-icon,:host([data-fill=solid]) .ius-ep__loc>.ius-icon{color:var(--_ep-on-solid)}:host([data-fill=solid][data-clickable]:hover),:host([data-fill=solid][data-hoverable=true]:hover){filter:brightness(.96)}:host([data-variant=block]){align-items:flex-start;flex-direction:column;gap:var(--ius-space-xxs);height:100%;padding:var(--_ep-px);border-radius:var(--ius-radius-md);overflow:hidden}.ius-ep__head{display:flex;align-items:center;gap:var(--_ep-gap);width:100%;min-width:0}:host([data-variant=block]) .ius-ep__title{white-space:normal}.ius-ep__dot{flex:0 0 auto;width:var(--_ep-dot);height:var(--_ep-dot);border-radius:50%;background:var(--_ep-accent)}:host>.ius-icon,.ius-ep__head>.ius-icon{flex:0 0 auto;font-size:var(--_ep-icon);line-height:1;color:var(--_ep-accent)}.ius-ep__time{flex:0 0 auto;font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums}.ius-ep__title{flex:1 1 auto;min-width:0;font-weight:var(--ius-fw-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__clamp{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}.ius-ep__meta{flex:0 0 auto;font-size:.85em;opacity:.7;white-space:nowrap}.ius-ep__loc{display:flex;align-items:center;gap:var(--ius-space-xxs);font-size:.9em;opacity:.8;min-width:0}.ius-ep__loc>.ius-icon{flex:0 0 auto;line-height:1;color:var(--_ep-accent);font-size:calc(var(--_ep-icon) - 2px)}.ius-ep__loc span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-ep__assignee{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;margin-top:1px}.ius-ep__assignee-name{font-size:.9em;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-fill=solid]) .ius-ep__assignee-name{opacity:.92}:host([data-fill]) .ius-ep__assignee ::ng-deep .ius-avt .ius-icon{color:var(--_avt-fg)}:host([data-past=true]){opacity:.5}:host([data-selected=true]){box-shadow:var(--ius-focus-ring);border-color:var(--_ep-accent)}:host([data-clickable]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}\n"] }]
|
|
24155
24156
|
}], propDecorators: { title: [{
|
|
24156
24157
|
type: Input
|
|
24157
24158
|
}], time: [{
|
|
@@ -24280,14 +24281,14 @@ class PartyListComponent {
|
|
|
24280
24281
|
this.overflowClick.emit(event);
|
|
24281
24282
|
}
|
|
24282
24283
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PartyListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PartyListComponent, isStandalone: true, selector: "ius-party-list", inputs: { sides: "sides", demandantes: "demandantes", demandados: "demandados", connector: "connector", max: ["max", "max", numberAttribute], size: "size", emptyLabel: "emptyLabel", completeLabel: "completeLabel" }, outputs: { complete: "complete", overflowClick: "overflowClick" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null" }, classAttribute: "ius-partylist" }, ngImport: i0, template: "@if (isEmpty) {\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\n <span class=\"ius-partylist__empty\">\n <span class=\"ius-partylist__emptylabel\">\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\n <span>{{ emptyLabel }}</span>\n </span>\n @if (showComplete) {\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\n }\n </span>\n} @else {\n @for (side of partySides; track $index; let i = $index) {\n @if (i > 0) {\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\n }\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\n {{ side.shown }}\n @if (side.extra > 0) {\n @if (overflowClickable) {\n <button\n type=\"button\"\n class=\"ius-partylist__extra\"\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\n (click)=\"onOverflow($event)\"\n >+{{ side.extra }}</button>\n } @else {\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\n }\n }\n </span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"], dependencies: [{ kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24284
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PartyListComponent, isStandalone: true, selector: "ius-party-list", inputs: { sides: "sides", demandantes: "demandantes", demandados: "demandados", connector: "connector", max: ["max", "max", numberAttribute], size: "size", emptyLabel: "emptyLabel", completeLabel: "completeLabel" }, outputs: { complete: "complete", overflowClick: "overflowClick" }, host: { properties: { "attr.data-size": "size !== 'medium' ? size : null" }, classAttribute: "ius-partylist" }, ngImport: i0, template: "@if (isEmpty) {\r\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\r\n <span class=\"ius-partylist__empty\">\r\n <span class=\"ius-partylist__emptylabel\">\r\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\r\n <span>{{ emptyLabel }}</span>\r\n </span>\r\n @if (showComplete) {\r\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\r\n }\r\n </span>\r\n} @else {\r\n @for (side of partySides; track $index; let i = $index) {\r\n @if (i > 0) {\r\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\r\n }\r\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\r\n {{ side.shown }}\r\n @if (side.extra > 0) {\r\n @if (overflowClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-partylist__extra\"\r\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\r\n (click)=\"onOverflow($event)\"\r\n >+{{ side.extra }}</button>\r\n } @else {\r\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\r\n }\r\n }\r\n </span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"], dependencies: [{ kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24284
24285
|
}
|
|
24285
24286
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PartyListComponent, decorators: [{
|
|
24286
24287
|
type: Component,
|
|
24287
24288
|
args: [{ selector: 'ius-party-list', standalone: true, imports: [TextButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
24288
24289
|
class: 'ius-partylist',
|
|
24289
24290
|
'[attr.data-size]': "size !== 'medium' ? size : null",
|
|
24290
|
-
}, template: "@if (isEmpty) {\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\n <span class=\"ius-partylist__empty\">\n <span class=\"ius-partylist__emptylabel\">\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\n <span>{{ emptyLabel }}</span>\n </span>\n @if (showComplete) {\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\n }\n </span>\n} @else {\n @for (side of partySides; track $index; let i = $index) {\n @if (i > 0) {\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\n }\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\n {{ side.shown }}\n @if (side.extra > 0) {\n @if (overflowClickable) {\n <button\n type=\"button\"\n class=\"ius-partylist__extra\"\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\n (click)=\"onOverflow($event)\"\n >+{{ side.extra }}</button>\n } @else {\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\n }\n }\n </span>\n }\n}\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"] }]
|
|
24291
|
+
}, template: "@if (isEmpty) {\r\n <!-- Estado vac\u00EDo: ninguna parte registrada \u2192 invitar a completar. -->\r\n <span class=\"ius-partylist__empty\">\r\n <span class=\"ius-partylist__emptylabel\">\r\n <span translate=\"no\" class=\"ius-icon ius-icon--outline\" aria-hidden=\"true\">person_off</span>\r\n <span>{{ emptyLabel }}</span>\r\n </span>\r\n @if (showComplete) {\r\n <ius-text-button [label]=\"completeLabel\" prefixIcon=\"add\" size=\"small\" (clicked)=\"onComplete($event)\" />\r\n }\r\n </span>\r\n} @else {\r\n @for (side of partySides; track $index; let i = $index) {\r\n @if (i > 0) {\r\n <span class=\"ius-partylist__connector\">{{ connector }}</span>\r\n }\r\n <span class=\"ius-partylist__side\" [class.ius-partylist__missing]=\"side.missing\">\r\n {{ side.shown }}\r\n @if (side.extra > 0) {\r\n @if (overflowClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-partylist__extra\"\r\n [attr.aria-label]=\"'Ver ' + side.extra + ' parte(s) m\u00E1s'\"\r\n (click)=\"onOverflow($event)\"\r\n >+{{ side.extra }}</button>\r\n } @else {\r\n <span class=\"ius-partylist__extra\">+{{ side.extra }}</span>\r\n }\r\n }\r\n </span>\r\n }\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:0 var(--ius-space-xxs);font-family:var(--ius-font-body);color:var(--ius-text-secondary);font-size:var(--ius-fs-base);line-height:1.35;min-width:0}:host([data-size=small]){font-size:var(--ius-fs-sm)}:host([data-size=large]){font-size:var(--ius-fs-lg)}.ius-partylist__side{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.ius-partylist__extra{margin-left:var(--ius-space-xxs);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}button.ius-partylist__extra{appearance:none;border:0;background:transparent;cursor:pointer;padding:0;font:inherit}button.ius-partylist__extra:hover{color:var(--ius-text-link);text-decoration:underline}button.ius-partylist__extra:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-sm)}.ius-partylist__connector{color:var(--ius-text-tertiary);font-style:italic;flex:0 0 auto}.ius-partylist__missing{color:var(--ius-text-tertiary)}.ius-partylist__empty{display:inline-flex;align-items:center;gap:var(--ius-space-xs);color:var(--ius-text-tertiary)}.ius-partylist__emptylabel{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-partylist__empty .ius-icon{font-size:var(--ius-icon-sm)}\n"] }]
|
|
24291
24292
|
}], propDecorators: { sides: [{
|
|
24292
24293
|
type: Input
|
|
24293
24294
|
}], demandantes: [{
|
|
@@ -24522,7 +24523,7 @@ class FileItemComponent {
|
|
|
24522
24523
|
this.menuOpen.set(open);
|
|
24523
24524
|
}
|
|
24524
24525
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24525
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileItemComponent, isStandalone: true, selector: "ius-file-item", inputs: { kind: "kind", name: "name", thumbnail: "thumbnail", layout: "layout", size: "size", href: "href", activateOn: "activateOn", selectable: ["selectable", "selectable", booleanAttribute], selected: ["selected", "selected", booleanAttribute], unread: ["unread", "unread", booleanAttribute], shared: ["shared", "shared", booleanAttribute], starred: "starred", tags: "tags", fields: "fields", caption: "caption", owner: "owner", responsive: ["responsive", "responsive", booleanAttribute], status: "status", progress: "progress", statusLabel: "statusLabel", actions: "actions", menu: "menu", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { opened: "opened", clicked: "clicked", selectChange: "selectChange", starChange: "starChange", contextMenu: "contextMenu", actionClick: "actionClick", retry: "retry", cancel: "cancel" }, host: { listeners: { "click": "onHostClick($event)", "dblclick": "onHostDblClick($event)", "keydown": "onKeydown($event)", "contextmenu": "onContextMenu($event)" }, properties: { "attr.data-layout": "layout", "attr.data-responsive": "!isCard && !responsive ? 'false' : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-selected": "selected ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-status": "status || null", "attr.aria-busy": "busy ? 'true' : null", "attr.role": "selectable ? 'option' : activatable ? 'button' : null", "attr.aria-selected": "selectable ? (selected ? 'true' : 'false') : null", "attr.tabindex": "clickable && !disabled ? 0 : null", "attr.aria-label": "ariaLabel || name || null", "attr.aria-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-fileitem" }, ngImport: i0, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\n<ng-template #checkTpl>\n @if (selectable && !blocked) {\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\n <ius-checkbox\n size=\"small\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n ariaLabel=\"Seleccionar\"\n (checkedChange)=\"onSelect($event)\"\n />\n </span>\n }\n</ng-template>\n\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\n<ng-template #starTpl>\n @if (hasStar && !blocked) {\n <button\n type=\"button\"\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\n [attr.data-on]=\"starred ? 'true' : 'false'\"\n [attr.aria-label]=\"starLabel\"\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\n [disabled]=\"disabled\"\n (click)=\"onStar($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\n </button>\n }\n</ng-template>\n\n<ng-template #sharedTpl>\n @if (shared) {\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\n <span translate=\"no\" class=\"ius-icon\">group</span>\n </span>\n }\n</ng-template>\n\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\n<ng-template #menuTpl>\n @if (menu.length && !blocked) {\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpen($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n</ng-template>\n\n<!-- Cancelar (uploading/processing) \u00B7 Reintentar (error): solo si el output est\u00E1 enlazado. -->\n<ng-template #statusActionTpl>\n @if (showCancel) {\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Cancelar\"\n ariaLabel=\"Cancelar\"\n (clicked)=\"onCancel($event)\"\n />\n }\n @if (showRetry) {\n <ius-icon-button\n icon=\"refresh\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Reintentar\"\n ariaLabel=\"Reintentar\"\n (clicked)=\"onRetry($event)\"\n />\n }\n</ng-template>\n\n<!-- Indicador de estado: row lo pone en lugar de los fields; card, en el pie en lugar del caption. -->\n<ng-template #statusTpl let-cls>\n <span [class]=\"cls\" [attr.data-inline]=\"status !== 'uploading' ? 'true' : null\">\n @if (status === 'processing') {\n <ius-circular-progress size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Generando ' + name\" />\n }\n @if (statusText != null) {\n <span class=\"ius-fileitem__stext\" [attr.data-tone]=\"failed ? 'danger' : null\" [attr.role]=\"failed ? 'alert' : 'status'\">\n @if (failed) {\n <span translate=\"no\" class=\"ius-icon\">error</span>\n }\n <span>{{ statusText }}</span>\n </span>\n }\n @if (status === 'uploading') {\n <span class=\"ius-fileitem__sbar\">\n @if (pct != null) {\n <ius-linear-progress-bar size=\"small\" [value]=\"pct\" [animate]=\"false\" [ariaLabel]=\"'Subiendo ' + name\" />\n } @else {\n <ius-linear-progress-bar size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Subiendo ' + name\" />\n }\n </span>\n }\n </span>\n</ng-template>\n\n@if (isCard) {\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\n <span class=\"ius-fileitem__thumb\">\n @if (thumbnail) {\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n } @else {\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\n }\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n @if (menu.length && !blocked) {\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\n }\n @if (showCancel || showRetry) {\n <span class=\"ius-fileitem__cardstatus\"><ng-container *ngTemplateOutlet=\"statusActionTpl\" /></span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n </span>\n <span class=\"ius-fileitem__foot\">\n <span class=\"ius-fileitem__footmain\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n </span>\n @if (status) {\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__footstatus' }\" />\n } @else if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n </span>\n} @else {\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas o estado \u00B7 due\u00F1o/cancelar-reintentar/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n <span class=\"ius-fileitem__lead\">\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\n </span>\n <span class=\"ius-fileitem__main\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n @if (tags.length) {\n <span class=\"ius-fileitem__tags\">\n @for (t of tags; track trackKey(t, $index)) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [label]=\"t.label\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n />\n }\n </span>\n }\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n\n @if (status) {\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__status' }\" />\n } @else if (fields.length) {\n @let drops = dropRanks();\n <span class=\"ius-fileitem__fields\">\n @for (f of fields; track trackKey(f, $index)) {\n <span\n class=\"ius-fileitem__field\"\n [attr.data-drop]=\"drops[$index]\"\n [attr.data-align]=\"f.align || null\"\n [style.width]=\"widthOf(f)\"\n >\n @if (f.label) {\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-fileitem__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n <span>{{ f.value }}</span>\n </span>\n </span>\n }\n </span>\n }\n\n <span class=\"ius-fileitem__trail\">\n @if (owner && !blocked) {\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\n </span>\n }\n <ng-container *ngTemplateOutlet=\"statusActionTpl\" />\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n @if (actions.length) {\n <span class=\"ius-fileitem__actions\">\n @for (a of actions; track trackKey(a, $index)) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"disabled\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </span>\n }\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row]:not([data-responsive=false])){container:fileitem/inline-size}@container fileitem (max-width: 640px){.ius-fileitem__owner{display:none}}@container fileitem (max-width: 580px){.ius-fileitem__field[data-drop=\"1\"]{display:none}}@container fileitem (max-width: 500px){.ius-fileitem__field[data-drop=\"2\"]{display:none}}@container fileitem (max-width: 420px){.ius-fileitem__fields{display:none}}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__foot .ius-fileitem__lead{align-self:flex-start;margin-top:1px}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}:host([data-status=uploading]) .ius-fileitem__name,:host([data-status=processing]) .ius-fileitem__name{color:var(--ius-text-secondary)}.ius-fileitem__status{flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__status[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__stext{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__stext>.ius-icon{font-size:var(--ius-icon-sm);flex:none}.ius-fileitem__stext[data-tone=danger]{color:var(--ius-text-error)}.ius-fileitem__footstatus{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-fileitem__footstatus[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__cardstatus{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}@container fileitem (max-width: 420px){.ius-fileitem__status{flex-basis:auto}.ius-fileitem__sbar{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24526
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileItemComponent, isStandalone: true, selector: "ius-file-item", inputs: { kind: "kind", name: "name", thumbnail: "thumbnail", layout: "layout", size: "size", href: "href", activateOn: "activateOn", selectable: ["selectable", "selectable", booleanAttribute], selected: ["selected", "selected", booleanAttribute], unread: ["unread", "unread", booleanAttribute], shared: ["shared", "shared", booleanAttribute], starred: "starred", tags: "tags", fields: "fields", caption: "caption", owner: "owner", responsive: ["responsive", "responsive", booleanAttribute], status: "status", progress: "progress", statusLabel: "statusLabel", actions: "actions", menu: "menu", disabled: ["disabled", "disabled", booleanAttribute], ariaLabel: "ariaLabel" }, outputs: { opened: "opened", clicked: "clicked", selectChange: "selectChange", starChange: "starChange", contextMenu: "contextMenu", actionClick: "actionClick", retry: "retry", cancel: "cancel" }, host: { listeners: { "click": "onHostClick($event)", "dblclick": "onHostDblClick($event)", "keydown": "onKeydown($event)", "contextmenu": "onContextMenu($event)" }, properties: { "attr.data-layout": "layout", "attr.data-responsive": "!isCard && !responsive ? 'false' : null", "attr.data-size": "size !== 'medium' ? size : null", "attr.data-clickable": "clickable ? 'true' : null", "attr.data-selected": "selected ? 'true' : null", "attr.data-unread": "unread ? 'true' : null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-disabled": "disabled ? 'true' : null", "attr.data-status": "status || null", "attr.aria-busy": "busy ? 'true' : null", "attr.role": "selectable ? 'option' : activatable ? 'button' : null", "attr.aria-selected": "selectable ? (selected ? 'true' : 'false') : null", "attr.tabindex": "clickable && !disabled ? 0 : null", "attr.aria-label": "ariaLabel || name || null", "attr.aria-disabled": "disabled ? 'true' : null" }, classAttribute: "ius-fileitem" }, ngImport: i0, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\r\n<ng-template #checkTpl>\r\n @if (selectable && !blocked) {\r\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\r\n <ius-checkbox\r\n size=\"small\"\r\n [checked]=\"selected\"\r\n [disabled]=\"disabled\"\r\n ariaLabel=\"Seleccionar\"\r\n (checkedChange)=\"onSelect($event)\"\r\n />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\r\n<ng-template #starTpl>\r\n @if (hasStar && !blocked) {\r\n <button\r\n type=\"button\"\r\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\r\n [attr.data-on]=\"starred ? 'true' : 'false'\"\r\n [attr.aria-label]=\"starLabel\"\r\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onStar($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #sharedTpl>\r\n @if (shared) {\r\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\r\n <span translate=\"no\" class=\"ius-icon\">group</span>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\r\n<ng-template #menuTpl>\r\n @if (menu.length && !blocked) {\r\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpen($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Cancelar (uploading/processing) \u00B7 Reintentar (error): solo si el output est\u00E1 enlazado. -->\r\n<ng-template #statusActionTpl>\r\n @if (showCancel) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Cancelar\"\r\n ariaLabel=\"Cancelar\"\r\n (clicked)=\"onCancel($event)\"\r\n />\r\n }\r\n @if (showRetry) {\r\n <ius-icon-button\r\n icon=\"refresh\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Reintentar\"\r\n ariaLabel=\"Reintentar\"\r\n (clicked)=\"onRetry($event)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<!-- Indicador de estado: row lo pone en lugar de los fields; card, en el pie en lugar del caption. -->\r\n<ng-template #statusTpl let-cls>\r\n <span [class]=\"cls\" [attr.data-inline]=\"status !== 'uploading' ? 'true' : null\">\r\n @if (status === 'processing') {\r\n <ius-circular-progress size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Generando ' + name\" />\r\n }\r\n @if (statusText != null) {\r\n <span class=\"ius-fileitem__stext\" [attr.data-tone]=\"failed ? 'danger' : null\" [attr.role]=\"failed ? 'alert' : 'status'\">\r\n @if (failed) {\r\n <span translate=\"no\" class=\"ius-icon\">error</span>\r\n }\r\n <span>{{ statusText }}</span>\r\n </span>\r\n }\r\n @if (status === 'uploading') {\r\n <span class=\"ius-fileitem__sbar\">\r\n @if (pct != null) {\r\n <ius-linear-progress-bar size=\"small\" [value]=\"pct\" [animate]=\"false\" [ariaLabel]=\"'Subiendo ' + name\" />\r\n } @else {\r\n <ius-linear-progress-bar size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Subiendo ' + name\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n@if (isCard) {\r\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\r\n <span class=\"ius-fileitem__thumb\">\r\n @if (thumbnail) {\r\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\r\n } @else {\r\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\r\n }\r\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\r\n @if (menu.length && !blocked) {\r\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\r\n }\r\n @if (showCancel || showRetry) {\r\n <span class=\"ius-fileitem__cardstatus\"><ng-container *ngTemplateOutlet=\"statusActionTpl\" /></span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"starTpl\" />\r\n </span>\r\n <span class=\"ius-fileitem__foot\">\r\n <span class=\"ius-fileitem__footmain\">\r\n <span class=\"ius-fileitem__namerow\">\r\n @if (unread) {\r\n <span class=\"ius-fileitem__dot\"></span>\r\n }\r\n <span class=\"ius-fileitem__name\">{{ name }}</span>\r\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\r\n </span>\r\n @if (status) {\r\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__footstatus' }\" />\r\n } @else if (caption != null) {\r\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\r\n }\r\n </span>\r\n </span>\r\n} @else {\r\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas o estado \u00B7 due\u00F1o/cancelar-reintentar/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\r\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\r\n <span class=\"ius-fileitem__lead\">\r\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\r\n </span>\r\n <span class=\"ius-fileitem__main\">\r\n <span class=\"ius-fileitem__namerow\">\r\n @if (unread) {\r\n <span class=\"ius-fileitem__dot\"></span>\r\n }\r\n <span class=\"ius-fileitem__name\">{{ name }}</span>\r\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\r\n @if (tags.length) {\r\n <span class=\"ius-fileitem__tags\">\r\n @for (t of tags; track trackKey(t, $index)) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [label]=\"t.label\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n @if (caption != null) {\r\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\r\n }\r\n </span>\r\n\r\n @if (status) {\r\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__status' }\" />\r\n } @else if (fields.length) {\r\n @let drops = dropRanks();\r\n <span class=\"ius-fileitem__fields\">\r\n @for (f of fields; track trackKey(f, $index)) {\r\n <span\r\n class=\"ius-fileitem__field\"\r\n [attr.data-drop]=\"drops[$index]\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"widthOf(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-fileitem__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n\r\n <span class=\"ius-fileitem__trail\">\r\n @if (owner && !blocked) {\r\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\r\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\r\n </span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"statusActionTpl\" />\r\n <ng-container *ngTemplateOutlet=\"starTpl\" />\r\n @if (actions.length) {\r\n <span class=\"ius-fileitem__actions\">\r\n @for (a of actions; track trackKey(a, $index)) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"disabled\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row]:not([data-responsive=false])){container:fileitem/inline-size}@container fileitem (max-width: 640px){.ius-fileitem__owner{display:none}}@container fileitem (max-width: 580px){.ius-fileitem__field[data-drop=\"1\"]{display:none}}@container fileitem (max-width: 500px){.ius-fileitem__field[data-drop=\"2\"]{display:none}}@container fileitem (max-width: 420px){.ius-fileitem__fields{display:none}}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__foot .ius-fileitem__lead{align-self:flex-start;margin-top:1px}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}:host([data-status=uploading]) .ius-fileitem__name,:host([data-status=processing]) .ius-fileitem__name{color:var(--ius-text-secondary)}.ius-fileitem__status{flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__status[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__stext{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__stext>.ius-icon{font-size:var(--ius-icon-sm);flex:none}.ius-fileitem__stext[data-tone=danger]{color:var(--ius-text-error)}.ius-fileitem__footstatus{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-fileitem__footstatus[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__cardstatus{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}@container fileitem (max-width: 420px){.ius-fileitem__status{flex-basis:auto}.ius-fileitem__sbar{display:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: CheckboxComponent, selector: "ius-checkbox", inputs: ["label", "labelPosition", "showIconHelp", "iconHelpTitle", "iconHelpContent", "name", "value", "ariaLabel", "size", "checked", "defaultChecked", "indeterminate", "disabled"], outputs: ["checkedChange"] }, { kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: DropdownComponent, selector: "ius-dropdown", inputs: ["items", "selectable", "value", "label", "triggerLabel", "triggerIcon", "tone", "variant", "placement", "open", "defaultOpen", "ariaLabel"], outputs: ["valueChange", "openChange"] }, { kind: "directive", type: IusDropdownTriggerDirective, selector: "[iusDropdownTrigger]" }, { kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }, { kind: "component", type: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24526
24527
|
}
|
|
24527
24528
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileItemComponent, decorators: [{
|
|
24528
24529
|
type: Component,
|
|
@@ -24558,7 +24559,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
24558
24559
|
'(dblclick)': 'onHostDblClick($event)',
|
|
24559
24560
|
'(keydown)': 'onKeydown($event)',
|
|
24560
24561
|
'(contextmenu)': 'onContextMenu($event)',
|
|
24561
|
-
}, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\n<ng-template #checkTpl>\n @if (selectable && !blocked) {\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\n <ius-checkbox\n size=\"small\"\n [checked]=\"selected\"\n [disabled]=\"disabled\"\n ariaLabel=\"Seleccionar\"\n (checkedChange)=\"onSelect($event)\"\n />\n </span>\n }\n</ng-template>\n\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\n<ng-template #starTpl>\n @if (hasStar && !blocked) {\n <button\n type=\"button\"\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\n [attr.data-on]=\"starred ? 'true' : 'false'\"\n [attr.aria-label]=\"starLabel\"\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\n [disabled]=\"disabled\"\n (click)=\"onStar($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\n </button>\n }\n</ng-template>\n\n<ng-template #sharedTpl>\n @if (shared) {\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\n <span translate=\"no\" class=\"ius-icon\">group</span>\n </span>\n }\n</ng-template>\n\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\n<ng-template #menuTpl>\n @if (menu.length && !blocked) {\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\n <ius-dropdown\n [items]=\"menu\"\n placement=\"bottom-end\"\n ariaLabel=\"M\u00E1s opciones\"\n (openChange)=\"onMenuOpen($event)\"\n >\n <ius-icon-button\n iusDropdownTrigger\n icon=\"more_vert\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"M\u00E1s opciones\"\n ariaLabel=\"M\u00E1s opciones\"\n [disabled]=\"disabled\"\n />\n </ius-dropdown>\n </span>\n }\n</ng-template>\n\n<!-- Cancelar (uploading/processing) \u00B7 Reintentar (error): solo si el output est\u00E1 enlazado. -->\n<ng-template #statusActionTpl>\n @if (showCancel) {\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Cancelar\"\n ariaLabel=\"Cancelar\"\n (clicked)=\"onCancel($event)\"\n />\n }\n @if (showRetry) {\n <ius-icon-button\n icon=\"refresh\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n tooltip=\"Reintentar\"\n ariaLabel=\"Reintentar\"\n (clicked)=\"onRetry($event)\"\n />\n }\n</ng-template>\n\n<!-- Indicador de estado: row lo pone en lugar de los fields; card, en el pie en lugar del caption. -->\n<ng-template #statusTpl let-cls>\n <span [class]=\"cls\" [attr.data-inline]=\"status !== 'uploading' ? 'true' : null\">\n @if (status === 'processing') {\n <ius-circular-progress size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Generando ' + name\" />\n }\n @if (statusText != null) {\n <span class=\"ius-fileitem__stext\" [attr.data-tone]=\"failed ? 'danger' : null\" [attr.role]=\"failed ? 'alert' : 'status'\">\n @if (failed) {\n <span translate=\"no\" class=\"ius-icon\">error</span>\n }\n <span>{{ statusText }}</span>\n </span>\n }\n @if (status === 'uploading') {\n <span class=\"ius-fileitem__sbar\">\n @if (pct != null) {\n <ius-linear-progress-bar size=\"small\" [value]=\"pct\" [animate]=\"false\" [ariaLabel]=\"'Subiendo ' + name\" />\n } @else {\n <ius-linear-progress-bar size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Subiendo ' + name\" />\n }\n </span>\n }\n </span>\n</ng-template>\n\n@if (isCard) {\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\n <span class=\"ius-fileitem__thumb\">\n @if (thumbnail) {\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\n } @else {\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\n }\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n @if (menu.length && !blocked) {\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\n }\n @if (showCancel || showRetry) {\n <span class=\"ius-fileitem__cardstatus\"><ng-container *ngTemplateOutlet=\"statusActionTpl\" /></span>\n }\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n </span>\n <span class=\"ius-fileitem__foot\">\n <span class=\"ius-fileitem__footmain\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n </span>\n @if (status) {\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__footstatus' }\" />\n } @else if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n </span>\n} @else {\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas o estado \u00B7 due\u00F1o/cancelar-reintentar/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\n <span class=\"ius-fileitem__lead\">\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\n </span>\n <span class=\"ius-fileitem__main\">\n <span class=\"ius-fileitem__namerow\">\n @if (unread) {\n <span class=\"ius-fileitem__dot\"></span>\n }\n <span class=\"ius-fileitem__name\">{{ name }}</span>\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\n @if (tags.length) {\n <span class=\"ius-fileitem__tags\">\n @for (t of tags; track trackKey(t, $index)) {\n <ius-tag\n size=\"small\"\n role=\"status\"\n [label]=\"t.label\"\n [tone]=\"t.tone ?? 'neutral'\"\n [variant]=\"t.variant\"\n [icon]=\"t.icon\"\n [dot]=\"t.dot\"\n />\n }\n </span>\n }\n </span>\n @if (caption != null) {\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\n }\n </span>\n\n @if (status) {\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__status' }\" />\n } @else if (fields.length) {\n @let drops = dropRanks();\n <span class=\"ius-fileitem__fields\">\n @for (f of fields; track trackKey(f, $index)) {\n <span\n class=\"ius-fileitem__field\"\n [attr.data-drop]=\"drops[$index]\"\n [attr.data-align]=\"f.align || null\"\n [style.width]=\"widthOf(f)\"\n >\n @if (f.label) {\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\n }\n <span class=\"ius-fileitem__fvalue\">\n @if (f.icon) {\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\n }\n <span>{{ f.value }}</span>\n </span>\n </span>\n }\n </span>\n }\n\n <span class=\"ius-fileitem__trail\">\n @if (owner && !blocked) {\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\n </span>\n }\n <ng-container *ngTemplateOutlet=\"statusActionTpl\" />\n <ng-container *ngTemplateOutlet=\"starTpl\" />\n @if (actions.length) {\n <span class=\"ius-fileitem__actions\">\n @for (a of actions; track trackKey(a, $index)) {\n <ius-icon-button\n [icon]=\"a.icon\"\n variant=\"tertiary\"\n shape=\"squared\"\n size=\"small\"\n [tooltip]=\"a.tooltip || a.label\"\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\n [disabled]=\"disabled\"\n (clicked)=\"onAction(a, $event)\"\n />\n }\n </span>\n }\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row]:not([data-responsive=false])){container:fileitem/inline-size}@container fileitem (max-width: 640px){.ius-fileitem__owner{display:none}}@container fileitem (max-width: 580px){.ius-fileitem__field[data-drop=\"1\"]{display:none}}@container fileitem (max-width: 500px){.ius-fileitem__field[data-drop=\"2\"]{display:none}}@container fileitem (max-width: 420px){.ius-fileitem__fields{display:none}}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__foot .ius-fileitem__lead{align-self:flex-start;margin-top:1px}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}:host([data-status=uploading]) .ius-fileitem__name,:host([data-status=processing]) .ius-fileitem__name{color:var(--ius-text-secondary)}.ius-fileitem__status{flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__status[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__stext{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__stext>.ius-icon{font-size:var(--ius-icon-sm);flex:none}.ius-fileitem__stext[data-tone=danger]{color:var(--ius-text-error)}.ius-fileitem__footstatus{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-fileitem__footstatus[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__cardstatus{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}@container fileitem (max-width: 420px){.ius-fileitem__status{flex-basis:auto}.ius-fileitem__sbar{display:none}}\n"] }]
|
|
24562
|
+
}, template: "<!-- Casilla de selecci\u00F3n: reservada; oculta salvo hover/selecci\u00F3n/foco. Detiene la propagaci\u00F3n. -->\r\n<ng-template #checkTpl>\r\n @if (selectable && !blocked) {\r\n <span [class]=\"isCard ? 'ius-fileitem__cardcheck' : 'ius-fileitem__check'\" (click)=\"stop($event)\">\r\n <ius-checkbox\r\n size=\"small\"\r\n [checked]=\"selected\"\r\n [disabled]=\"disabled\"\r\n ariaLabel=\"Seleccionar\"\r\n (checkedChange)=\"onSelect($event)\"\r\n />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Estrella (destacado): `starred` undefined = sin estrella. -->\r\n<ng-template #starTpl>\r\n @if (hasStar && !blocked) {\r\n <button\r\n type=\"button\"\r\n [class]=\"(isCard ? 'ius-fileitem__cardstar ' : '') + 'ius-fileitem__star'\"\r\n [attr.data-on]=\"starred ? 'true' : 'false'\"\r\n [attr.aria-label]=\"starLabel\"\r\n [attr.aria-pressed]=\"starred ? 'true' : 'false'\"\r\n [disabled]=\"disabled\"\r\n (click)=\"onStar($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">{{ starred ? 'star' : 'star_outline' }}</span>\r\n </button>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #sharedTpl>\r\n @if (shared) {\r\n <span class=\"ius-fileitem__shared\" title=\"Compartido\">\r\n <span translate=\"no\" class=\"ius-icon\">group</span>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Men\u00FA \u22EE (Dropdown con IconButton como disparador). Detiene la propagaci\u00F3n. -->\r\n<ng-template #menuTpl>\r\n @if (menu.length && !blocked) {\r\n <span class=\"ius-fileitem__menu\" (click)=\"stop($event)\" (dblclick)=\"stop($event)\">\r\n <ius-dropdown\r\n [items]=\"menu\"\r\n placement=\"bottom-end\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n (openChange)=\"onMenuOpen($event)\"\r\n >\r\n <ius-icon-button\r\n iusDropdownTrigger\r\n icon=\"more_vert\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"M\u00E1s opciones\"\r\n ariaLabel=\"M\u00E1s opciones\"\r\n [disabled]=\"disabled\"\r\n />\r\n </ius-dropdown>\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<!-- Cancelar (uploading/processing) \u00B7 Reintentar (error): solo si el output est\u00E1 enlazado. -->\r\n<ng-template #statusActionTpl>\r\n @if (showCancel) {\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Cancelar\"\r\n ariaLabel=\"Cancelar\"\r\n (clicked)=\"onCancel($event)\"\r\n />\r\n }\r\n @if (showRetry) {\r\n <ius-icon-button\r\n icon=\"refresh\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n tooltip=\"Reintentar\"\r\n ariaLabel=\"Reintentar\"\r\n (clicked)=\"onRetry($event)\"\r\n />\r\n }\r\n</ng-template>\r\n\r\n<!-- Indicador de estado: row lo pone en lugar de los fields; card, en el pie en lugar del caption. -->\r\n<ng-template #statusTpl let-cls>\r\n <span [class]=\"cls\" [attr.data-inline]=\"status !== 'uploading' ? 'true' : null\">\r\n @if (status === 'processing') {\r\n <ius-circular-progress size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Generando ' + name\" />\r\n }\r\n @if (statusText != null) {\r\n <span class=\"ius-fileitem__stext\" [attr.data-tone]=\"failed ? 'danger' : null\" [attr.role]=\"failed ? 'alert' : 'status'\">\r\n @if (failed) {\r\n <span translate=\"no\" class=\"ius-icon\">error</span>\r\n }\r\n <span>{{ statusText }}</span>\r\n </span>\r\n }\r\n @if (status === 'uploading') {\r\n <span class=\"ius-fileitem__sbar\">\r\n @if (pct != null) {\r\n <ius-linear-progress-bar size=\"small\" [value]=\"pct\" [animate]=\"false\" [ariaLabel]=\"'Subiendo ' + name\" />\r\n } @else {\r\n <ius-linear-progress-bar size=\"small\" [indeterminate]=\"true\" [ariaLabel]=\"'Subiendo ' + name\" />\r\n }\r\n </span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n@if (isCard) {\r\n <!-- \u2550\u2550\u2550 CARD (grid tile): vista previa a sangre o glifo xlarge + pie con nombre y caption \u2550\u2550\u2550 -->\r\n <span class=\"ius-fileitem__thumb\">\r\n @if (thumbnail) {\r\n <img class=\"ius-fileitem__thumbimg\" [src]=\"thumbnail\" alt=\"\" draggable=\"false\" />\r\n } @else {\r\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" size=\"xlarge\" />\r\n }\r\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\r\n @if (menu.length && !blocked) {\r\n <span class=\"ius-fileitem__cardmenu\"><ng-container *ngTemplateOutlet=\"menuTpl\" /></span>\r\n }\r\n @if (showCancel || showRetry) {\r\n <span class=\"ius-fileitem__cardstatus\"><ng-container *ngTemplateOutlet=\"statusActionTpl\" /></span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"starTpl\" />\r\n </span>\r\n <span class=\"ius-fileitem__foot\">\r\n <span class=\"ius-fileitem__footmain\">\r\n <span class=\"ius-fileitem__namerow\">\r\n @if (unread) {\r\n <span class=\"ius-fileitem__dot\"></span>\r\n }\r\n <span class=\"ius-fileitem__name\">{{ name }}</span>\r\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\r\n </span>\r\n @if (status) {\r\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__footstatus' }\" />\r\n } @else if (caption != null) {\r\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\r\n }\r\n </span>\r\n </span>\r\n} @else {\r\n <!-- \u2550\u2550\u2550 ROW: casilla \u00B7 \u00EDcono \u00B7 nombre+tags+caption \u00B7 columnas o estado \u00B7 due\u00F1o/cancelar-reintentar/estrella/acciones/men\u00FA \u2550\u2550\u2550 -->\r\n <ng-container *ngTemplateOutlet=\"checkTpl\" />\r\n <span class=\"ius-fileitem__lead\">\r\n <ius-file-type-icon [kind]=\"kind\" [name]=\"name\" [thumbnail]=\"thumbnail\" [size]=\"size\" />\r\n </span>\r\n <span class=\"ius-fileitem__main\">\r\n <span class=\"ius-fileitem__namerow\">\r\n @if (unread) {\r\n <span class=\"ius-fileitem__dot\"></span>\r\n }\r\n <span class=\"ius-fileitem__name\">{{ name }}</span>\r\n <ng-container *ngTemplateOutlet=\"sharedTpl\" />\r\n @if (tags.length) {\r\n <span class=\"ius-fileitem__tags\">\r\n @for (t of tags; track trackKey(t, $index)) {\r\n <ius-tag\r\n size=\"small\"\r\n role=\"status\"\r\n [label]=\"t.label\"\r\n [tone]=\"t.tone ?? 'neutral'\"\r\n [variant]=\"t.variant\"\r\n [icon]=\"t.icon\"\r\n [dot]=\"t.dot\"\r\n />\r\n }\r\n </span>\r\n }\r\n </span>\r\n @if (caption != null) {\r\n <span class=\"ius-fileitem__line\">{{ caption }}</span>\r\n }\r\n </span>\r\n\r\n @if (status) {\r\n <ng-container *ngTemplateOutlet=\"statusTpl; context: { $implicit: 'ius-fileitem__status' }\" />\r\n } @else if (fields.length) {\r\n @let drops = dropRanks();\r\n <span class=\"ius-fileitem__fields\">\r\n @for (f of fields; track trackKey(f, $index)) {\r\n <span\r\n class=\"ius-fileitem__field\"\r\n [attr.data-drop]=\"drops[$index]\"\r\n [attr.data-align]=\"f.align || null\"\r\n [style.width]=\"widthOf(f)\"\r\n >\r\n @if (f.label) {\r\n <span class=\"ius-fileitem__flabel\">{{ f.label }}</span>\r\n }\r\n <span class=\"ius-fileitem__fvalue\">\r\n @if (f.icon) {\r\n <span translate=\"no\" class=\"ius-icon\">{{ f.icon }}</span>\r\n }\r\n <span>{{ f.value }}</span>\r\n </span>\r\n </span>\r\n }\r\n </span>\r\n }\r\n\r\n <span class=\"ius-fileitem__trail\">\r\n @if (owner && !blocked) {\r\n <span class=\"ius-fileitem__owner\" [attr.title]=\"owner.name || null\">\r\n <ius-avatar size=\"small\" [src]=\"owner.avatar\" [name]=\"owner.name\" shape=\"circle\" color=\"auto\" [ariaLabel]=\"owner.name\" />\r\n </span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"statusActionTpl\" />\r\n <ng-container *ngTemplateOutlet=\"starTpl\" />\r\n @if (actions.length) {\r\n <span class=\"ius-fileitem__actions\">\r\n @for (a of actions; track trackKey(a, $index)) {\r\n <ius-icon-button\r\n [icon]=\"a.icon\"\r\n variant=\"tertiary\"\r\n shape=\"squared\"\r\n size=\"small\"\r\n [tooltip]=\"a.tooltip || a.label\"\r\n [ariaLabel]=\"a.ariaLabel || a.label || a.icon\"\r\n [disabled]=\"disabled\"\r\n (clicked)=\"onAction(a, $event)\"\r\n />\r\n }\r\n </span>\r\n }\r\n <ng-container *ngTemplateOutlet=\"menuTpl\" />\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_fi-py: 10px;--_fi-px: 12px;--_fi-gap: var(--ius-space-sm);--_fi-name-fs: var(--ius-fs-lg);--_fi-name-lh: var(--ius-lh-lg);--_fi-line-fs: var(--ius-fs-sm);--_fi-line-lh: var(--ius-lh-sm);--_fi-fieldgap: 28px;--_fi-thumb-h: 120px;position:relative;box-sizing:border-box;font-family:var(--ius-font-body);text-align:left;-webkit-user-select:none;user-select:none;transition:background-color var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-size=small]){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px;--_fi-thumb-h: 96px}:host([data-size=large]){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px;--_fi-thumb-h: 148px}@container style(--ius-density: small){:host(:not([data-size])){--_fi-py: 8px;--_fi-px: 10px;--_fi-gap: var(--ius-space-xs);--_fi-name-fs: var(--ius-fs-base);--_fi-name-lh: var(--ius-lh-base);--_fi-fieldgap: 22px}}@container style(--ius-density: large){:host(:not([data-size])){--_fi-py: 14px;--_fi-px: 16px;--_fi-gap: var(--ius-space-md);--_fi-name-fs: var(--ius-fs-h5);--_fi-name-lh: var(--ius-lh-h5);--_fi-fieldgap: 34px}}.ius-fileitem__name{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--_fi-name-fs);line-height:var(--_fi-name-lh);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}:host([data-unread=true]) .ius-fileitem__name{font-weight:var(--ius-fw-bold)}.ius-fileitem__line{font-family:var(--ius-font-body);font-size:var(--_fi-line-fs);line-height:var(--_fi-line-lh);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fileitem__dot{flex:0 0 auto;width:7px;height:7px;border-radius:var(--ius-radius-pill);background:var(--ius-primary-900)}.ius-fileitem__tags{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);flex-wrap:nowrap}.ius-fileitem__star{flex:0 0 auto;display:inline-flex;appearance:none;border:0;background:transparent;padding:0;cursor:pointer;border-radius:var(--ius-radius-sm)}.ius-fileitem__star .ius-icon{font-size:var(--ius-icon-sm)}.ius-fileitem__star[data-on=true]{color:var(--ius-warning-500)}.ius-fileitem__star[data-on=false]{color:var(--ius-text-tertiary)}.ius-fileitem__star:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fileitem__shared{flex:0 0 auto;display:inline-flex;color:var(--ius-text-tertiary)}.ius-fileitem__shared .ius-icon{font-size:var(--ius-icon-sm)}:host([data-disabled=true]){opacity:.5;pointer-events:none}:host([data-layout=row]){display:flex;align-items:center;gap:var(--_fi-gap);width:100%;padding:var(--_fi-py) var(--_fi-px);border:1px solid transparent;border-radius:var(--ius-radius-md)}:host([data-layout=row]:not([data-responsive=false])){container:fileitem/inline-size}@container fileitem (max-width: 640px){.ius-fileitem__owner{display:none}}@container fileitem (max-width: 580px){.ius-fileitem__field[data-drop=\"1\"]{display:none}}@container fileitem (max-width: 500px){.ius-fileitem__field[data-drop=\"2\"]{display:none}}@container fileitem (max-width: 420px){.ius-fileitem__fields{display:none}}:host([data-layout=row][data-clickable=true]){cursor:pointer}:host([data-layout=row][data-clickable=true]:hover){background:var(--ius-neutral-1)}:host([data-layout=row]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=row][data-selected=true]){background:var(--ius-info-100);border-color:var(--ius-info-300)}:host([data-layout=row][data-menu-open=true]){background:var(--ius-neutral-1)}.ius-fileitem__check{flex:0 0 auto;display:inline-flex;align-items:center}:host([data-layout=row]) .ius-fileitem__check{visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__check,:host([data-layout=row][data-selected=true]) .ius-fileitem__check,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__check{visibility:visible}.ius-fileitem__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__namerow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-fileitem__fields{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ius-space-xxs) var(--_fi-fieldgap);flex:0 0 auto}.ius-fileitem__field{display:flex;flex-direction:column;gap:1px;flex:0 0 auto;min-width:0}.ius-fileitem__field[data-align=end]{text-align:right}.ius-fileitem__field:nth-child(1){width:var(--_fi-col-1, auto)}.ius-fileitem__field:nth-child(2){width:var(--_fi-col-2, auto)}.ius-fileitem__field:nth-child(3){width:var(--_fi-col-3, auto)}.ius-fileitem__field:nth-child(4){width:var(--_fi-col-4, auto)}.ius-fileitem__flabel{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.3 var(--ius-font-body);color:var(--ius-text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__fvalue{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font:var(--ius-fw-regular) var(--ius-fs-base)/1.3 var(--ius-font-body);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fileitem__fvalue>.ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-fileitem__trail{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-fileitem__owner{flex:0 0 auto;display:inline-flex;align-items:center}.ius-fileitem__actions{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);visibility:hidden}:host([data-layout=row]:hover) .ius-fileitem__actions,:host([data-layout=row][data-menu-open=true]) .ius-fileitem__actions,:host([data-layout=row]:has(:focus-visible)) .ius-fileitem__actions{visibility:visible}.ius-fileitem__menu{display:inline-flex}:host([data-layout=card]){display:flex;flex-direction:column;width:100%;background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);overflow:hidden}:host([data-layout=card][data-clickable=true]){cursor:pointer}:host([data-layout=card][data-clickable=true]:hover){border-color:var(--ius-neutral-4);box-shadow:var(--ius-elevation-100)}:host([data-layout=card]:focus-visible){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-layout=card][data-selected=true]){border-color:var(--ius-info-300);box-shadow:0 0 0 1px var(--ius-info-300);background:var(--ius-info-100)}.ius-fileitem__thumb{position:relative;height:var(--_fi-thumb-h);flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--ius-neutral-1);border-bottom:1px solid var(--ius-stroke)}:host([data-layout=card][data-selected=true]) .ius-fileitem__thumb{background:color-mix(in srgb,var(--ius-info-100) 60%,var(--ius-surface-card))}.ius-fileitem__thumbimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ius-fileitem__cardcheck{position:absolute;top:var(--ius-space-xs);left:var(--ius-space-xs)}:host([data-layout=card]) .ius-fileitem__cardcheck{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardcheck,:host([data-layout=card][data-selected=true]) .ius-fileitem__cardcheck{visibility:visible}.ius-fileitem__cardmenu{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}:host([data-layout=card]) .ius-fileitem__cardmenu{visibility:hidden}:host([data-layout=card]:hover) .ius-fileitem__cardmenu,:host([data-layout=card][data-menu-open=true]) .ius-fileitem__cardmenu{visibility:visible}.ius-fileitem__cardstar{position:absolute;bottom:var(--ius-space-xs);right:var(--ius-space-xs)}.ius-fileitem__foot{display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--_fi-py) var(--_fi-px);min-width:0}.ius-fileitem__foot .ius-fileitem__lead{align-self:flex-start;margin-top:1px}.ius-fileitem__footmain{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}:host([data-status=uploading]) .ius-fileitem__name,:host([data-status=processing]) .ius-fileitem__name{color:var(--ius-text-secondary)}.ius-fileitem__status{flex:0 1 220px;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fileitem__status[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__stext{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);min-width:0;font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ius-fileitem__stext>.ius-icon{font-size:var(--ius-icon-sm);flex:none}.ius-fileitem__stext[data-tone=danger]{color:var(--ius-text-error)}.ius-fileitem__footstatus{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:0}.ius-fileitem__footstatus[data-inline=true]{flex-direction:row;align-items:center;gap:var(--ius-space-xs)}.ius-fileitem__cardstatus{position:absolute;top:calc(var(--ius-space-xs) - 2px);right:calc(var(--ius-space-xs) - 2px)}@container fileitem (max-width: 420px){.ius-fileitem__status{flex-basis:auto}.ius-fileitem__sbar{display:none}}\n"] }]
|
|
24562
24563
|
}], propDecorators: { kind: [{
|
|
24563
24564
|
type: Input
|
|
24564
24565
|
}], name: [{
|
|
@@ -24950,7 +24951,7 @@ class FileUploadComponent {
|
|
|
24950
24951
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24951
24952
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FileUploadComponent, isStandalone: true, selector: "ius-file-upload", inputs: { value: "value", defaultValue: "defaultValue", uploader: "uploader", multiple: ["multiple", "multiple", booleanAttribute], accept: "accept", maxSize: ["maxSize", "maxSize", numberAttribute], maxFiles: ["maxFiles", "maxFiles", numberAttribute], variant: "variant", heading: "heading", description: "description", browseLabel: "browseLabel", label: "label", helperText: "helperText", error: ["error", "error", booleanAttribute], errorText: "errorText", required: ["required", "required", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], showIconHelp: ["showIconHelp", "showIconHelp", booleanAttribute], iconHelpTitle: "iconHelpTitle", iconHelpContent: "iconHelpContent", name: "name", id: "id" }, outputs: { valueChange: "valueChange", added: "added", removed: "removed" }, host: { properties: { "attr.data-disabled": "isDisabled ? 'true' : null", "attr.data-error": "error ? 'true' : null", "attr.data-drag": "drag() ? 'true' : null" }, classAttribute: "ius-fu" }, providers: [
|
|
24952
24953
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => FileUploadComponent), multi: true },
|
|
24953
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "@if (label) {\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </label>\n}\n\n@if (variant === 'dropzone') {\n <div\n class=\"ius-fu__zone\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\n [attr.aria-label]=\"effHeading\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\n @if (effDescription) {\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\n }\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\n {{ browseLabel }}\n </button>\n </div>\n} @else {\n <button\n type=\"button\"\n class=\"ius-fu__compact\"\n [disabled]=\"isDisabled\"\n (click)=\"openPicker()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\n {{ heading || 'Adjuntar archivo' }}\n </button>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"ius-fu__input\"\n [id]=\"id\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (change)=\"onInputChange($event)\"\n/>\n\n@if (files().length) {\n <ul class=\"ius-fu__list\">\n @for (f of files(); track f.id) {\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\n <span class=\"ius-fu__file-icon\">\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\n </span>\n <div class=\"ius-fu__file-body\">\n <div class=\"ius-fu__file-head\">\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\n </div>\n <div class=\"ius-fu__file-meta\">\n <span class=\"ius-fu__file-status\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\n {{ statusText(f) }}\n </span>\n </div>\n @if (showProgress(f)) {\n <div class=\"ius-fu__progress-wrap\">\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\n </div>\n }\n </div>\n <div class=\"ius-fu__file-actions\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n ariaLabel=\"Quitar archivo\"\n [disabled]=\"isDisabled\"\n (clicked)=\"removeFile(f)\"\n />\n </div>\n </li>\n }\n </ul>\n}\n\n@if (hint) {\n <div class=\"ius-fu__hint\">{{ hint }}</div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24954
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], ngImport: i0, template: "@if (label) {\r\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\r\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\r\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n </label>\r\n}\r\n\r\n@if (variant === 'dropzone') {\r\n <div\r\n class=\"ius-fu__zone\"\r\n role=\"button\"\r\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n [attr.aria-label]=\"effHeading\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n (click)=\"openPicker()\"\r\n (keydown)=\"onZoneKeydown($event)\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\r\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\r\n @if (effDescription) {\r\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\r\n }\r\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\r\n {{ browseLabel }}\r\n </button>\r\n </div>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-fu__compact\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"openPicker()\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\r\n {{ heading || 'Adjuntar archivo' }}\r\n </button>\r\n}\r\n\r\n<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"ius-fu__input\"\r\n [id]=\"id\"\r\n [attr.name]=\"name || null\"\r\n [attr.accept]=\"accept || null\"\r\n [multiple]=\"multiple\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n (change)=\"onInputChange($event)\"\r\n/>\r\n\r\n@if (files().length) {\r\n <ul class=\"ius-fu__list\">\r\n @for (f of files(); track f.id) {\r\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\r\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\r\n <span class=\"ius-fu__file-icon\">\r\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\r\n </span>\r\n <div class=\"ius-fu__file-body\">\r\n <div class=\"ius-fu__file-head\">\r\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\r\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\r\n </div>\r\n <div class=\"ius-fu__file-meta\">\r\n <span class=\"ius-fu__file-status\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\r\n {{ statusText(f) }}\r\n </span>\r\n </div>\r\n @if (showProgress(f)) {\r\n <div class=\"ius-fu__progress-wrap\">\r\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ius-fu__file-actions\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n ariaLabel=\"Quitar archivo\"\r\n [disabled]=\"isDisabled\"\r\n (clicked)=\"removeFile(f)\"\r\n />\r\n </div>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n\r\n@if (hint) {\r\n <div class=\"ius-fu__hint\">{{ hint }}</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"], dependencies: [{ kind: "component", type: FileTypeIconComponent, selector: "ius-file-type-icon", inputs: ["kind", "name", "hue", "icon", "thumbnail", "variant", "size", "title", "decorative"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
24954
24955
|
}
|
|
24955
24956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FileUploadComponent, decorators: [{
|
|
24956
24957
|
type: Component,
|
|
@@ -24961,7 +24962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
24961
24962
|
'[attr.data-disabled]': "isDisabled ? 'true' : null",
|
|
24962
24963
|
'[attr.data-error]': "error ? 'true' : null",
|
|
24963
24964
|
'[attr.data-drag]': "drag() ? 'true' : null",
|
|
24964
|
-
}, template: "@if (label) {\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\n <span>{{ label }}</span>\n @if (showIconHelp) {\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\n <span translate=\"no\" class=\"ius-icon\">help</span>\n </span>\n </ius-popover>\n }\n </label>\n}\n\n@if (variant === 'dropzone') {\n <div\n class=\"ius-fu__zone\"\n role=\"button\"\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\n [attr.aria-label]=\"effHeading\"\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\n (click)=\"openPicker()\"\n (keydown)=\"onZoneKeydown($event)\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\n @if (effDescription) {\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\n }\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\n {{ browseLabel }}\n </button>\n </div>\n} @else {\n <button\n type=\"button\"\n class=\"ius-fu__compact\"\n [disabled]=\"isDisabled\"\n (click)=\"openPicker()\"\n (dragenter)=\"onDragEnter($event)\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\n (drop)=\"onDrop($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\n {{ heading || 'Adjuntar archivo' }}\n </button>\n}\n\n<input\n #fileInput\n type=\"file\"\n class=\"ius-fu__input\"\n [id]=\"id\"\n [attr.name]=\"name || null\"\n [attr.accept]=\"accept || null\"\n [multiple]=\"multiple\"\n [disabled]=\"isDisabled\"\n tabindex=\"-1\"\n (change)=\"onInputChange($event)\"\n/>\n\n@if (files().length) {\n <ul class=\"ius-fu__list\">\n @for (f of files(); track f.id) {\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\n <span class=\"ius-fu__file-icon\">\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\n </span>\n <div class=\"ius-fu__file-body\">\n <div class=\"ius-fu__file-head\">\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\n </div>\n <div class=\"ius-fu__file-meta\">\n <span class=\"ius-fu__file-status\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\n {{ statusText(f) }}\n </span>\n </div>\n @if (showProgress(f)) {\n <div class=\"ius-fu__progress-wrap\">\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\n </div>\n }\n </div>\n <div class=\"ius-fu__file-actions\">\n <ius-icon-button\n icon=\"close\"\n variant=\"tertiary\"\n size=\"small\"\n ariaLabel=\"Quitar archivo\"\n [disabled]=\"isDisabled\"\n (clicked)=\"removeFile(f)\"\n />\n </div>\n </li>\n }\n </ul>\n}\n\n@if (hint) {\n <div class=\"ius-fu__hint\">{{ hint }}</div>\n}\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"] }]
|
|
24965
|
+
}, template: "@if (label) {\r\n <label class=\"ius-fu__label\" [attr.data-required]=\"required ? 'true' : null\" [for]=\"id\">\r\n <span>{{ label }}</span>\r\n @if (showIconHelp) {\r\n <!-- Golden: <Popover placement=\"top\" trigger=\"hover\"> (defaults de ius-popover). -->\r\n <ius-popover [title]=\"iconHelpTitle\" [content]=\"iconHelpContent\" [disabled]=\"iconHelpEmpty\">\r\n <span class=\"ius-fu__help-icon\" aria-label=\"Ayuda\" tabindex=\"0\">\r\n <span translate=\"no\" class=\"ius-icon\">help</span>\r\n </span>\r\n </ius-popover>\r\n }\r\n </label>\r\n}\r\n\r\n@if (variant === 'dropzone') {\r\n <div\r\n class=\"ius-fu__zone\"\r\n role=\"button\"\r\n [attr.tabindex]=\"isDisabled ? -1 : 0\"\r\n [attr.aria-label]=\"effHeading\"\r\n [attr.aria-disabled]=\"isDisabled ? 'true' : null\"\r\n (click)=\"openPicker()\"\r\n (keydown)=\"onZoneKeydown($event)\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon ius-fu__icon\" aria-hidden=\"true\">cloud_upload</span>\r\n <div class=\"ius-fu__heading\">{{ effHeading }}</div>\r\n @if (effDescription) {\r\n <div class=\"ius-fu__description\">{{ effDescription }}</div>\r\n }\r\n <button type=\"button\" class=\"ius-fu__zone-button\" [disabled]=\"isDisabled\" tabindex=\"-1\" (click)=\"onBrowseClick($event)\">\r\n {{ browseLabel }}\r\n </button>\r\n </div>\r\n} @else {\r\n <button\r\n type=\"button\"\r\n class=\"ius-fu__compact\"\r\n [disabled]=\"isDisabled\"\r\n (click)=\"openPicker()\"\r\n (dragenter)=\"onDragEnter($event)\"\r\n (dragover)=\"onDragOver($event)\"\r\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">attach_file</span>\r\n {{ heading || 'Adjuntar archivo' }}\r\n </button>\r\n}\r\n\r\n<input\r\n #fileInput\r\n type=\"file\"\r\n class=\"ius-fu__input\"\r\n [id]=\"id\"\r\n [attr.name]=\"name || null\"\r\n [attr.accept]=\"accept || null\"\r\n [multiple]=\"multiple\"\r\n [disabled]=\"isDisabled\"\r\n tabindex=\"-1\"\r\n (change)=\"onInputChange($event)\"\r\n/>\r\n\r\n@if (files().length) {\r\n <ul class=\"ius-fu__list\">\r\n @for (f of files(); track f.id) {\r\n <li class=\"ius-fu__item\" [attr.data-status]=\"f.status\">\r\n <!-- Medall\u00F3n de tipo: el glifo del kind (por extensi\u00F3n/nombre) dentro del cuadro neutro del golden. -->\r\n <span class=\"ius-fu__file-icon\">\r\n <ius-file-type-icon [name]=\"f.name\" size=\"small\" />\r\n </span>\r\n <div class=\"ius-fu__file-body\">\r\n <div class=\"ius-fu__file-head\">\r\n <span class=\"ius-fu__file-name\" [attr.title]=\"f.name\">{{ f.name }}</span>\r\n <span class=\"ius-fu__file-size\">{{ formatBytes(f.size) }}</span>\r\n </div>\r\n <div class=\"ius-fu__file-meta\">\r\n <span class=\"ius-fu__file-status\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ statusIcon(f) }}</span>\r\n {{ statusText(f) }}\r\n </span>\r\n </div>\r\n @if (showProgress(f)) {\r\n <div class=\"ius-fu__progress-wrap\">\r\n <ius-linear-progress-bar [value]=\"f.progress\" size=\"small\" [ariaLabel]=\"'Progreso de ' + f.name\" />\r\n </div>\r\n }\r\n </div>\r\n <div class=\"ius-fu__file-actions\">\r\n <ius-icon-button\r\n icon=\"close\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n ariaLabel=\"Quitar archivo\"\r\n [disabled]=\"isDisabled\"\r\n (clicked)=\"removeFile(f)\"\r\n />\r\n </div>\r\n </li>\r\n }\r\n </ul>\r\n}\r\n\r\n@if (hint) {\r\n <div class=\"ius-fu__hint\">{{ hint }}</div>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{display:flex;flex-direction:column;gap:var(--ius-space-xs);font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%}:host *,:host *:before,:host *:after{box-sizing:border-box}.ius-fu__label{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-family:var(--ius-font-body);font-weight:var(--ius-fw-medium);font-size:var(--ius-fs-base);line-height:var(--ius-lh-base);color:var(--ius-text-primary)}.ius-fu__label[data-required=true]:before{content:\"\";display:inline-block;width:5px;height:5px;background:var(--ius-danger-500);border-radius:50%;margin-right:var(--ius-space-xxs);vertical-align:middle}.ius-fu__help-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-7);cursor:help}.ius-fu__help-icon .ius-icon{font-size:var(--ius-icon-md);line-height:1}.ius-fu__help-icon:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:50%}:host([data-disabled=true]) .ius-fu__label{color:var(--ius-text-disabled)}:host([data-disabled=true]) .ius-fu__help-icon{color:var(--ius-text-disabled);cursor:not-allowed}.ius-fu__zone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--ius-space-xs);text-align:center;background:var(--ius-neutral-2);border:2px dashed var(--ius-neutral-4);border-radius:var(--ius-radius-lg);padding:var(--ius-space-lg) var(--ius-space-lg);transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard);cursor:pointer;outline:none}.ius-fu__zone:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500)}.ius-fu__zone:focus-visible{box-shadow:var(--ius-focus-ring)}:host([data-drag=true]) .ius-fu__zone{background:var(--ius-info-100);border-color:var(--ius-primary-500);border-style:solid}:host([data-disabled=true]) .ius-fu__zone{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);cursor:not-allowed;opacity:.7}:host([data-error=true]) .ius-fu__zone{background:var(--ius-danger-100);border-color:var(--ius-danger-500)}.ius-fu__icon{font-size:var(--ius-icon-xl);color:var(--ius-primary-700);line-height:1;margin-bottom:var(--ius-space-xxs)}:host([data-error=true]) .ius-fu__icon{color:var(--ius-danger-700)}.ius-fu__heading{font-size:var(--ius-fs-base);font-weight:var(--ius-fw-semibold);color:var(--ius-text-primary);line-height:1.4}.ius-fu__description{font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);line-height:1.4;max-width:360px}.ius-fu__zone-button{appearance:none;border:0;cursor:pointer;margin-top:var(--ius-space-xs);font:var(--ius-fw-semibold) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-primary-900);background:transparent;padding:var(--ius-space-xs) var(--ius-space-xs);border-radius:var(--ius-radius-sm)}.ius-fu__zone-button:hover{background:var(--ius-info-200)}.ius-fu__zone-button:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact{appearance:none;border:1px solid var(--ius-neutral-3);background:var(--ius-surface-card);cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xs);font:var(--ius-fw-medium) var(--ius-fs-sm)/1 var(--ius-font-body);color:var(--ius-text-primary);padding:var(--ius-space-xs) var(--ius-space-sm);border-radius:var(--ius-radius-md);align-self:flex-start;transition:background var(--ius-duration-fast) var(--ius-ease-standard),border-color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-fu__compact:hover{background:var(--ius-info-100);border-color:var(--ius-primary-500);color:var(--ius-primary-900)}.ius-fu__compact:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-fu__compact .ius-icon{font-size:var(--ius-icon-md);color:var(--ius-text-tertiary)}.ius-fu__compact:hover .ius-icon{color:var(--ius-primary-700)}:host([data-disabled=true]) .ius-fu__compact,:host([data-disabled=true]) .ius-fu__compact:hover{background:var(--ius-neutral-2);border-color:var(--ius-neutral-3);color:var(--ius-text-disabled);cursor:not-allowed}:host([data-disabled=true]) .ius-fu__compact .ius-icon,:host([data-disabled=true]) .ius-fu__compact:hover .ius-icon{color:var(--ius-text-disabled)}.ius-fu__list{display:flex;flex-direction:column;gap:var(--ius-space-xs);margin:0;padding:0;list-style:none}.ius-fu__item{display:grid;grid-template-columns:36px minmax(0,1fr) auto;column-gap:var(--ius-space-sm);align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm);background:var(--ius-surface-card);border:1px solid var(--ius-neutral-2);border-radius:var(--ius-radius-md)}.ius-fu__item[data-status=error]{background:var(--ius-danger-100);border-color:var(--ius-danger-200)}.ius-fu__file-icon{width:36px;height:36px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;background:var(--ius-neutral-2);color:var(--ius-text-secondary);flex:0 0 auto}.ius-fu__file-body{min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}.ius-fu__file-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);justify-content:space-between}.ius-fu__file-name{font:var(--ius-fw-medium) var(--ius-fs-sm)/1.35 var(--ius-font-body);color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-fu__file-size{font:var(--ius-fw-regular) 11.5px/1.35 var(--ius-font-body);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-fu__file-meta{display:flex;align-items:center;gap:var(--ius-space-xs);font-size:11.5px;color:var(--ius-text-tertiary)}.ius-fu__file-status{display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-fu__file-status .ius-icon{font-size:var(--ius-icon-sm)}.ius-fu__item[data-status=success] .ius-fu__file-status{color:var(--ius-success-700)}.ius-fu__item[data-status=error] .ius-fu__file-status{color:var(--ius-danger-700)}.ius-fu__item[data-status=uploading] .ius-fu__file-status{color:var(--ius-info-700)}.ius-fu__file-actions{flex:0 0 auto}.ius-fu__progress-wrap{margin-top:var(--ius-space-xxs)}.ius-fu__hint{font:var(--ius-fw-regular) var(--ius-fs-sm)/1.4 var(--ius-font-body);color:var(--ius-text-tertiary)}:host([data-error=true]) .ius-fu__hint{color:var(--ius-danger-700)}.ius-fu__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}\n"] }]
|
|
24965
24966
|
}], propDecorators: { fileInput: [{
|
|
24966
24967
|
type: ViewChild,
|
|
24967
24968
|
args: ['fileInput', { static: true }]
|
|
@@ -25340,7 +25341,7 @@ class StepperComponent {
|
|
|
25340
25341
|
this.openIdx.set(open ? index : this.openIdx() === index ? null : this.openIdx());
|
|
25341
25342
|
}
|
|
25342
25343
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25343
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StepperComponent, isStandalone: true, selector: "ius-stepper", inputs: { stages: "stages", orientation: "orientation", size: "size", accent: "accent", showDetail: ["showDetail", "showDetail", booleanAttribute], detailDisplay: "detailDisplay", collapsed: ["collapsed", "collapsed", booleanAttribute], collapsedControl: "collapsedControl", maxSegments: ["maxSegments", "maxSegments", numberAttribute], label: "label", expandLabel: "expandLabel", popoverActions: "popoverActions" }, outputs: { stageClick: "stageClick", detailClick: "detailClick", expand: "expand" }, host: { properties: { "attr.data-orientation": "orientation", "attr.data-size": "size", "attr.data-collapsed": "collapsed ? 'true' : null", "style.--_accent-strong": "'var(--ius-' + accent + '-600)'", "style.--_accent-soft": "'var(--ius-' + accent + '-200)'", "style.--_accent-c1": "'var(--ius-' + accent + '-300)'", "style.--_accent-c2": "'var(--ius-' + accent + '-400)'", "style.--_accent-c3": "'var(--ius-' + accent + '-500)'" }, classAttribute: "ius-stepper" }, ngImport: i0, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\n<ng-template #nodeTpl let-vm>\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__node\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </button>\n } @else {\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </span>\n }\n</ng-template>\n\n<ng-template #ringTpl let-vm>\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\n @if (vm.centerIcon) {\n <span\n translate=\"no\"\n class=\"ius-icon ius-stepper__center\"\n aria-hidden=\"true\"\n [style.font-size.px]=\"vm.centerFs\"\n [style.color]=\"vm.centerColor\"\n >{{ vm.centerIcon }}</span>\n }\n </ius-circular-progress>\n</ng-template>\n\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\n<ng-template #popTpl let-vm>\n <div class=\"ius-stepper__pop-head\">\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\n @if (vm.nm; as nm) {\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\n }\n </div>\n @if (vm.rows.length) {\n <div class=\"ius-stepper__pop-list\">\n @for (r of vm.rows; track $index) {\n @if (r.kind === 'ellipsis') {\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\n } @else if (r.kind === 'text') {\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\n } @else {\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\n <span class=\"ius-stepper__pop-dot\"></span>\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\n @if (r.date) {\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\n }\n </div>\n }\n }\n </div>\n }\n @if (vm.actions.length) {\n <div class=\"ius-stepper__pop-actions\">\n @for (a of vm.actions; track a.key) {\n @if (a.variant === 'text') {\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\n } @else {\n <ius-button\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\n size=\"small\"\n [fullWidth]=\"true\"\n [prefixIcon]=\"a.icon\"\n [label]=\"a.label\"\n (clicked)=\"a.run()\"\n />\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\n<ng-template #labelPopTpl let-vm>\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__label ius-stepper__label-trigger\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n [attr.title]=\"vm.stage.label\"\n >\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n</ng-template>\n\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\n<ng-template #subtitleTpl let-vm>\n @if (showDetail && vm.hasDetail) {\n @if (detailClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__subtitle\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n (click)=\"onDetailClick(vm)\"\n >\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n } @else {\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n </span>\n }\n }\n</ng-template>\n\n<ng-template #bodyTpl let-vm>\n <div class=\"ius-stepper__body\">\n @if (vm.usePopover) {\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\n } @else {\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\n }\n </div>\n</ng-template>\n\n@if (collapsed) {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (label) {\n <span class=\"ius-stepper__overline\">{{ label }}</span>\n }\n @if (curVm; as cur) {\n <div class=\"ius-stepper__collapsed\">\n <div class=\"ius-stepper__collapsed-lead\">\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\n <div class=\"ius-stepper__collapsed-main\">\n <div class=\"ius-stepper__collapsed-title\">\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\n @if (cur.count) {\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\n }\n </div>\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\n }\n </div>\n </div>\n\n @if (collapsedControl === 'expander') {\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\n @for (vm of vms; track trackStage(vm)) {\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\n }\n </div>\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <ius-button\n variant=\"outline\"\n size=\"small\"\n prefixIcon=\"list\"\n sufixIcon=\"expand_more\"\n [label]=\"effExpandLabel\"\n (clicked)=\"onExpand()\"\n />\n </span>\n } @else {\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\n @for (seg of segments; track $index) {\n @if (seg.more) {\n @if (expandable) {\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\n } @else {\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\n }\n } @else if (seg.vm; as vm) {\n @if (vm.usePopover) {\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n } @else {\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n } @else {\n <span\n class=\"ius-stepper__seg\"\n tabindex=\"0\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </span>\n }\n </ius-tooltip>\n }\n }\n }\n </div>\n </span>\n }\n </div>\n }\n} @else {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <ul class=\"ius-stepper__list\" role=\"list\">\n @for (vm of vms; track trackStage(vm)) {\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\n @if (orientation === 'vertical') {\n <div class=\"ius-stepper__rail\">\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line--v\"></span>\n </div>\n } @else {\n <div class=\"ius-stepper__rail\">\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25344
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StepperComponent, isStandalone: true, selector: "ius-stepper", inputs: { stages: "stages", orientation: "orientation", size: "size", accent: "accent", showDetail: ["showDetail", "showDetail", booleanAttribute], detailDisplay: "detailDisplay", collapsed: ["collapsed", "collapsed", booleanAttribute], collapsedControl: "collapsedControl", maxSegments: ["maxSegments", "maxSegments", numberAttribute], label: "label", expandLabel: "expandLabel", popoverActions: "popoverActions" }, outputs: { stageClick: "stageClick", detailClick: "detailClick", expand: "expand" }, host: { properties: { "attr.data-orientation": "orientation", "attr.data-size": "size", "attr.data-collapsed": "collapsed ? 'true' : null", "style.--_accent-strong": "'var(--ius-' + accent + '-600)'", "style.--_accent-soft": "'var(--ius-' + accent + '-200)'", "style.--_accent-c1": "'var(--ius-' + accent + '-300)'", "style.--_accent-c2": "'var(--ius-' + accent + '-400)'", "style.--_accent-c3": "'var(--ius-' + accent + '-500)'" }, classAttribute: "ius-stepper" }, ngImport: i0, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\r\n<ng-template #nodeTpl let-vm>\r\n @if (stageClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__node\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n (click)=\"onStageClick(vm)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\r\n </button>\r\n } @else {\r\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\r\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #ringTpl let-vm>\r\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\r\n @if (vm.centerIcon) {\r\n <span\r\n translate=\"no\"\r\n class=\"ius-icon ius-stepper__center\"\r\n aria-hidden=\"true\"\r\n [style.font-size.px]=\"vm.centerFs\"\r\n [style.color]=\"vm.centerColor\"\r\n >{{ vm.centerIcon }}</span>\r\n }\r\n </ius-circular-progress>\r\n</ng-template>\r\n\r\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\r\n<ng-template #popTpl let-vm>\r\n <div class=\"ius-stepper__pop-head\">\r\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\r\n @if (vm.nm; as nm) {\r\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\r\n }\r\n </div>\r\n @if (vm.rows.length) {\r\n <div class=\"ius-stepper__pop-list\">\r\n @for (r of vm.rows; track $index) {\r\n @if (r.kind === 'ellipsis') {\r\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\r\n } @else if (r.kind === 'text') {\r\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\r\n } @else {\r\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\r\n <span class=\"ius-stepper__pop-dot\"></span>\r\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\r\n @if (r.date) {\r\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (vm.actions.length) {\r\n <div class=\"ius-stepper__pop-actions\">\r\n @for (a of vm.actions; track a.key) {\r\n @if (a.variant === 'text') {\r\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\r\n } @else {\r\n <ius-button\r\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\r\n size=\"small\"\r\n [fullWidth]=\"true\"\r\n [prefixIcon]=\"a.icon\"\r\n [label]=\"a.label\"\r\n (clicked)=\"a.run()\"\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\r\n<ng-template #labelPopTpl let-vm>\r\n <ius-popover\r\n trigger=\"click\"\r\n placement=\"bottom\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n [title]=\"vm.stage.label\"\r\n [open]=\"openIdx() === vm.index\"\r\n (openChange)=\"onPopOpen(vm.index, $event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__label ius-stepper__label-trigger\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n [attr.title]=\"vm.stage.label\"\r\n >\r\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n <div iusPopoverContent class=\"ius-stepper__pop\">\r\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\r\n </div>\r\n </ius-popover>\r\n</ng-template>\r\n\r\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\r\n<ng-template #subtitleTpl let-vm>\r\n @if (showDetail && vm.hasDetail) {\r\n @if (detailClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__subtitle\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n (click)=\"onDetailClick(vm)\"\r\n >\r\n @if (vm.subtitleText) {\r\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\r\n }\r\n @if (vm.count) {\r\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\r\n }\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\r\n </button>\r\n } @else {\r\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\r\n @if (vm.subtitleText) {\r\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\r\n }\r\n @if (vm.count) {\r\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\r\n }\r\n </span>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl let-vm>\r\n <div class=\"ius-stepper__body\">\r\n @if (vm.usePopover) {\r\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\r\n } @else {\r\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\r\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (collapsed) {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (label) {\r\n <span class=\"ius-stepper__overline\">{{ label }}</span>\r\n }\r\n @if (curVm; as cur) {\r\n <div class=\"ius-stepper__collapsed\">\r\n <div class=\"ius-stepper__collapsed-lead\">\r\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\r\n <div class=\"ius-stepper__collapsed-main\">\r\n <div class=\"ius-stepper__collapsed-title\">\r\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\r\n @if (cur.count) {\r\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\r\n }\r\n </div>\r\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\r\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (collapsedControl === 'expander') {\r\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\r\n @for (vm of vms; track trackStage(vm)) {\r\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\r\n }\r\n </div>\r\n <span class=\"ius-stepper__collapsed-right\">\r\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\r\n <ius-button\r\n variant=\"outline\"\r\n size=\"small\"\r\n prefixIcon=\"list\"\r\n sufixIcon=\"expand_more\"\r\n [label]=\"effExpandLabel\"\r\n (clicked)=\"onExpand()\"\r\n />\r\n </span>\r\n } @else {\r\n <span class=\"ius-stepper__collapsed-right\">\r\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\r\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\r\n @for (seg of segments; track $index) {\r\n @if (seg.more) {\r\n @if (expandable) {\r\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\r\n } @else {\r\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\r\n }\r\n } @else if (seg.vm; as vm) {\r\n @if (vm.usePopover) {\r\n <ius-popover\r\n trigger=\"click\"\r\n placement=\"bottom\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n [title]=\"vm.stage.label\"\r\n [open]=\"openIdx() === vm.index\"\r\n (openChange)=\"onPopOpen(vm.index, $event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__seg\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </button>\r\n <div iusPopoverContent class=\"ius-stepper__pop\">\r\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\r\n </div>\r\n </ius-popover>\r\n } @else {\r\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\r\n @if (stageClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__seg\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n (click)=\"onStageClick(vm)\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </button>\r\n } @else {\r\n <span\r\n class=\"ius-stepper__seg\"\r\n tabindex=\"0\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </span>\r\n }\r\n </ius-tooltip>\r\n }\r\n }\r\n }\r\n </div>\r\n </span>\r\n }\r\n </div>\r\n }\r\n} @else {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <ul class=\"ius-stepper__list\" role=\"list\">\r\n @for (vm of vms; track trackStage(vm)) {\r\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\r\n @if (orientation === 'vertical') {\r\n <div class=\"ius-stepper__rail\">\r\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\r\n <span class=\"ius-stepper__line--v\"></span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-stepper__rail\">\r\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\r\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\r\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\r\n </div>\r\n }\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\r\n </li>\r\n }\r\n </ul>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "ius-button", inputs: ["variant", "label", "prefixIcon", "sufixIcon", "dynamic", "loading", "status", "disabled", "pressed", "fullWidth", "type", "ariaLabel", "ariaCurrent", "action", "size"], outputs: ["clicked"] }, { kind: "component", type: CircularProgressComponent, selector: "ius-circular-progress", inputs: ["value", "max", "indeterminate", "tone", "size", "showValue", "ariaLabel", "duration", "paused"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "component", type: TooltipComponent, selector: "ius-tooltip", inputs: ["label", "placement", "trigger", "offset", "showArrow", "disabled", "open", "defaultOpen"], outputs: ["openChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25344
25345
|
}
|
|
25345
25346
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StepperComponent, decorators: [{
|
|
25346
25347
|
type: Component,
|
|
@@ -25361,7 +25362,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
25361
25362
|
'[style.--_accent-c1]': "'var(--ius-' + accent + '-300)'",
|
|
25362
25363
|
'[style.--_accent-c2]': "'var(--ius-' + accent + '-400)'",
|
|
25363
25364
|
'[style.--_accent-c3]': "'var(--ius-' + accent + '-500)'",
|
|
25364
|
-
}, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\n<ng-template #nodeTpl let-vm>\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__node\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </button>\n } @else {\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\n </span>\n }\n</ng-template>\n\n<ng-template #ringTpl let-vm>\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\n @if (vm.centerIcon) {\n <span\n translate=\"no\"\n class=\"ius-icon ius-stepper__center\"\n aria-hidden=\"true\"\n [style.font-size.px]=\"vm.centerFs\"\n [style.color]=\"vm.centerColor\"\n >{{ vm.centerIcon }}</span>\n }\n </ius-circular-progress>\n</ng-template>\n\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\n<ng-template #popTpl let-vm>\n <div class=\"ius-stepper__pop-head\">\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\n @if (vm.nm; as nm) {\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\n }\n </div>\n @if (vm.rows.length) {\n <div class=\"ius-stepper__pop-list\">\n @for (r of vm.rows; track $index) {\n @if (r.kind === 'ellipsis') {\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\n } @else if (r.kind === 'text') {\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\n } @else {\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\n <span class=\"ius-stepper__pop-dot\"></span>\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\n @if (r.date) {\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\n }\n </div>\n }\n }\n </div>\n }\n @if (vm.actions.length) {\n <div class=\"ius-stepper__pop-actions\">\n @for (a of vm.actions; track a.key) {\n @if (a.variant === 'text') {\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\n } @else {\n <ius-button\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\n size=\"small\"\n [fullWidth]=\"true\"\n [prefixIcon]=\"a.icon\"\n [label]=\"a.label\"\n (clicked)=\"a.run()\"\n />\n }\n }\n </div>\n }\n</ng-template>\n\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\n<ng-template #labelPopTpl let-vm>\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__label ius-stepper__label-trigger\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n [attr.title]=\"vm.stage.label\"\n >\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n</ng-template>\n\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\n<ng-template #subtitleTpl let-vm>\n @if (showDetail && vm.hasDetail) {\n @if (detailClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__subtitle\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n (click)=\"onDetailClick(vm)\"\n >\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\n </button>\n } @else {\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\n @if (vm.subtitleText) {\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\n }\n @if (vm.count) {\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\n }\n </span>\n }\n }\n</ng-template>\n\n<ng-template #bodyTpl let-vm>\n <div class=\"ius-stepper__body\">\n @if (vm.usePopover) {\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\n } @else {\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\n }\n </div>\n</ng-template>\n\n@if (collapsed) {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (label) {\n <span class=\"ius-stepper__overline\">{{ label }}</span>\n }\n @if (curVm; as cur) {\n <div class=\"ius-stepper__collapsed\">\n <div class=\"ius-stepper__collapsed-lead\">\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\n <div class=\"ius-stepper__collapsed-main\">\n <div class=\"ius-stepper__collapsed-title\">\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\n @if (cur.count) {\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\n }\n </div>\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\n }\n </div>\n </div>\n\n @if (collapsedControl === 'expander') {\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\n @for (vm of vms; track trackStage(vm)) {\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\n }\n </div>\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <ius-button\n variant=\"outline\"\n size=\"small\"\n prefixIcon=\"list\"\n sufixIcon=\"expand_more\"\n [label]=\"effExpandLabel\"\n (clicked)=\"onExpand()\"\n />\n </span>\n } @else {\n <span class=\"ius-stepper__collapsed-right\">\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\n @for (seg of segments; track $index) {\n @if (seg.more) {\n @if (expandable) {\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\n } @else {\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\n }\n } @else if (seg.vm; as vm) {\n @if (vm.usePopover) {\n <ius-popover\n trigger=\"click\"\n placement=\"bottom\"\n [offset]=\"8\"\n [dismissable]=\"true\"\n [title]=\"vm.stage.label\"\n [open]=\"openIdx() === vm.index\"\n (openChange)=\"onPopOpen(vm.index, $event)\"\n >\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n <div iusPopoverContent class=\"ius-stepper__pop\">\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\n </div>\n </ius-popover>\n } @else {\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\n @if (stageClickable) {\n <button\n type=\"button\"\n class=\"ius-stepper__seg\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n (click)=\"onStageClick(vm)\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </button>\n } @else {\n <span\n class=\"ius-stepper__seg\"\n tabindex=\"0\"\n [attr.data-state]=\"vm.state\"\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\n [attr.aria-label]=\"vm.ariaLabel\"\n >\n @if (vm.state === 'done') {\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\n } @else {\n {{ vm.index + 1 }}\n }\n </span>\n }\n </ius-tooltip>\n }\n }\n }\n </div>\n </span>\n }\n </div>\n }\n} @else {\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n <ul class=\"ius-stepper__list\" role=\"list\">\n @for (vm of vms; track trackStage(vm)) {\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\n @if (orientation === 'vertical') {\n <div class=\"ius-stepper__rail\">\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line--v\"></span>\n </div>\n } @else {\n <div class=\"ius-stepper__rail\">\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\n </div>\n }\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\n </li>\n }\n </ul>\n}\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\n"] }]
|
|
25365
|
+
}, template: "<!-- Nodo: anillo CircularProgress (avance por subetapas) con glifo por estado. -->\r\n<ng-template #nodeTpl let-vm>\r\n @if (stageClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__node\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n (click)=\"onStageClick(vm)\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\r\n </button>\r\n } @else {\r\n <span class=\"ius-stepper__node\" [attr.data-state]=\"vm.state\" [attr.aria-label]=\"vm.ariaLabel\">\r\n <ng-container *ngTemplateOutlet=\"ringTpl; context: { $implicit: vm }\" />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #ringTpl let-vm>\r\n <ius-circular-progress [value]=\"vm.ringValue\" [size]=\"size\" [ariaLabel]=\"vm.ariaLabel\" [style.--_cp-ind]=\"vm.arc\">\r\n @if (vm.centerIcon) {\r\n <span\r\n translate=\"no\"\r\n class=\"ius-icon ius-stepper__center\"\r\n aria-hidden=\"true\"\r\n [style.font-size.px]=\"vm.centerFs\"\r\n [style.color]=\"vm.centerColor\"\r\n >{{ vm.centerIcon }}</span>\r\n }\r\n </ius-circular-progress>\r\n</ng-template>\r\n\r\n<!-- Contenido del popover de detalle (solo lectura): estado + \u00ABN de M\u00BB, contexto, footer que cierra antes de accionar. -->\r\n<ng-template #popTpl let-vm>\r\n <div class=\"ius-stepper__pop-head\">\r\n <span class=\"ius-stepper__pop-state\" [attr.data-state]=\"vm.state\">{{ vm.stateLabel }}</span>\r\n @if (vm.nm; as nm) {\r\n <span class=\"ius-stepper__pop-nm\">{{ nm.n }} de {{ nm.m }}</span>\r\n }\r\n </div>\r\n @if (vm.rows.length) {\r\n <div class=\"ius-stepper__pop-list\">\r\n @for (r of vm.rows; track $index) {\r\n @if (r.kind === 'ellipsis') {\r\n <div class=\"ius-stepper__pop-ellipsis\" aria-hidden=\"true\">\u2026</div>\r\n } @else if (r.kind === 'text') {\r\n <div class=\"ius-stepper__pop-sub\">{{ r.label }}</div>\r\n } @else {\r\n <div class=\"ius-stepper__pop-sub\" [attr.data-state]=\"r.state\">\r\n <span class=\"ius-stepper__pop-dot\"></span>\r\n <span class=\"ius-stepper__pop-sub-label\">{{ r.label }}</span>\r\n @if (r.date) {\r\n <span class=\"ius-stepper__pop-sub-date\">{{ r.date }}</span>\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n @if (vm.actions.length) {\r\n <div class=\"ius-stepper__pop-actions\">\r\n @for (a of vm.actions; track a.key) {\r\n @if (a.variant === 'text') {\r\n <ius-text-button [label]=\"a.label\" [sufixIcon]=\"a.icon\" (clicked)=\"a.run()\" />\r\n } @else {\r\n <ius-button\r\n [variant]=\"a.variant === 'secondary' ? 'secondary' : 'primary'\"\r\n size=\"small\"\r\n [fullWidth]=\"true\"\r\n [prefixIcon]=\"a.icon\"\r\n [label]=\"a.label\"\r\n (clicked)=\"a.run()\"\r\n />\r\n }\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<!-- Etiqueta como disparador del popover (una sola fila: nodo + etiqueta). -->\r\n<ng-template #labelPopTpl let-vm>\r\n <ius-popover\r\n trigger=\"click\"\r\n placement=\"bottom\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n [title]=\"vm.stage.label\"\r\n [open]=\"openIdx() === vm.index\"\r\n (openChange)=\"onPopOpen(vm.index, $event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__label ius-stepper__label-trigger\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n [attr.title]=\"vm.stage.label\"\r\n >\r\n <span class=\"ius-stepper__label-text\">{{ vm.stage.label }}</span>\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__label-caret\" aria-hidden=\"true\">expand_more</span>\r\n </button>\r\n <div iusPopoverContent class=\"ius-stepper__pop\">\r\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\r\n </div>\r\n </ius-popover>\r\n</ng-template>\r\n\r\n<!-- Subt\u00EDtulo inline de detalle \u2192 detailClick (texto inerte sin handler). -->\r\n<ng-template #subtitleTpl let-vm>\r\n @if (showDetail && vm.hasDetail) {\r\n @if (detailClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__subtitle\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n (click)=\"onDetailClick(vm)\"\r\n >\r\n @if (vm.subtitleText) {\r\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\r\n }\r\n @if (vm.count) {\r\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\r\n }\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">chevron_right</span>\r\n </button>\r\n } @else {\r\n <span class=\"ius-stepper__subtitle ius-stepper__subtitle--inert\">\r\n @if (vm.subtitleText) {\r\n <span class=\"ius-stepper__subtitle-text\" [attr.data-single]=\"vm.subtitleSingle ? 'true' : null\">{{ vm.subtitleText }}</span>\r\n }\r\n @if (vm.count) {\r\n <span class=\"ius-stepper__subtitle-count\">{{ vm.count }}</span>\r\n }\r\n </span>\r\n }\r\n }\r\n</ng-template>\r\n\r\n<ng-template #bodyTpl let-vm>\r\n <div class=\"ius-stepper__body\">\r\n @if (vm.usePopover) {\r\n <ng-container *ngTemplateOutlet=\"labelPopTpl; context: { $implicit: vm }\" />\r\n } @else {\r\n <div class=\"ius-stepper__label\" [attr.title]=\"vm.stage.label\">{{ vm.stage.label }}</div>\r\n <ng-container *ngTemplateOutlet=\"subtitleTpl; context: { $implicit: vm }\" />\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n@if (collapsed) {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 COLAPSADO: etapa vigente + \u00ABEtapa X de N\u00BB + acceso a las etapas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n @if (label) {\r\n <span class=\"ius-stepper__overline\">{{ label }}</span>\r\n }\r\n @if (curVm; as cur) {\r\n <div class=\"ius-stepper__collapsed\">\r\n <div class=\"ius-stepper__collapsed-lead\">\r\n <span class=\"ius-stepper__collapsed-dot\" [attr.data-state]=\"cur.state\" aria-hidden=\"true\"></span>\r\n <div class=\"ius-stepper__collapsed-main\">\r\n <div class=\"ius-stepper__collapsed-title\">\r\n <span class=\"ius-stepper__collapsed-label\">{{ cur.stage.label }}</span>\r\n @if (cur.count) {\r\n <span class=\"ius-stepper__collapsed-count\">{{ cur.count }}</span>\r\n }\r\n </div>\r\n @if (cur.subtitleText && cur.subtitleText !== 'Ver detalle') {\r\n <span class=\"ius-stepper__collapsed-sub\">{{ cur.subtitleText }}</span>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (collapsedControl === 'expander') {\r\n <div class=\"ius-stepper__dots\" aria-hidden=\"true\">\r\n @for (vm of vms; track trackStage(vm)) {\r\n <span class=\"ius-stepper__dot\" [attr.data-state]=\"vm.state\"></span>\r\n }\r\n </div>\r\n <span class=\"ius-stepper__collapsed-right\">\r\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\r\n <ius-button\r\n variant=\"outline\"\r\n size=\"small\"\r\n prefixIcon=\"list\"\r\n sufixIcon=\"expand_more\"\r\n [label]=\"effExpandLabel\"\r\n (clicked)=\"onExpand()\"\r\n />\r\n </span>\r\n } @else {\r\n <span class=\"ius-stepper__collapsed-right\">\r\n <span class=\"ius-stepper__collapsed-progress\">{{ progressText }}</span>\r\n <div class=\"ius-stepper__segs ius-scroll\" role=\"list\" aria-label=\"Avance por etapas\">\r\n @for (seg of segments; track $index) {\r\n @if (seg.more) {\r\n @if (expandable) {\r\n <button type=\"button\" class=\"ius-stepper__seg ius-stepper__seg--more\" aria-label=\"Ver todas las etapas\" (click)=\"onExpand()\">\u2026</button>\r\n } @else {\r\n <span class=\"ius-stepper__seg ius-stepper__seg--more\" aria-hidden=\"true\">\u2026</span>\r\n }\r\n } @else if (seg.vm; as vm) {\r\n @if (vm.usePopover) {\r\n <ius-popover\r\n trigger=\"click\"\r\n placement=\"bottom\"\r\n [offset]=\"8\"\r\n [dismissable]=\"true\"\r\n [title]=\"vm.stage.label\"\r\n [open]=\"openIdx() === vm.index\"\r\n (openChange)=\"onPopOpen(vm.index, $event)\"\r\n >\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__seg\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"'Ver detalle de ' + vm.stage.label\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </button>\r\n <div iusPopoverContent class=\"ius-stepper__pop\">\r\n <ng-container *ngTemplateOutlet=\"popTpl; context: { $implicit: vm }\" />\r\n </div>\r\n </ius-popover>\r\n } @else {\r\n <ius-tooltip [label]=\"vm.summary\" placement=\"top\">\r\n @if (stageClickable) {\r\n <button\r\n type=\"button\"\r\n class=\"ius-stepper__seg\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n (click)=\"onStageClick(vm)\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </button>\r\n } @else {\r\n <span\r\n class=\"ius-stepper__seg\"\r\n tabindex=\"0\"\r\n [attr.data-state]=\"vm.state\"\r\n [attr.aria-current]=\"vm.state === 'current' ? 'step' : null\"\r\n [attr.aria-label]=\"vm.ariaLabel\"\r\n >\r\n @if (vm.state === 'done') {\r\n <span translate=\"no\" class=\"ius-icon ius-stepper__seg-check\" aria-hidden=\"true\">check</span>\r\n } @else {\r\n {{ vm.index + 1 }}\r\n }\r\n </span>\r\n }\r\n </ius-tooltip>\r\n }\r\n }\r\n }\r\n </div>\r\n </span>\r\n }\r\n </div>\r\n }\r\n} @else {\r\n <!-- \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 EXPANDIDO: track de nodos horizontal/vertical \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n <ul class=\"ius-stepper__list\" role=\"list\">\r\n @for (vm of vms; track trackStage(vm)) {\r\n <li class=\"ius-stepper__stage\" role=\"listitem\" [attr.data-state]=\"vm.state\">\r\n @if (orientation === 'vertical') {\r\n <div class=\"ius-stepper__rail\">\r\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\r\n <span class=\"ius-stepper__line--v\"></span>\r\n </div>\r\n } @else {\r\n <div class=\"ius-stepper__rail\">\r\n <span class=\"ius-stepper__line ius-stepper__line--in\" [attr.data-fill]=\"vm.prevDone ? 'done' : null\"></span>\r\n <ng-container *ngTemplateOutlet=\"nodeTpl; context: { $implicit: vm }\" />\r\n <span class=\"ius-stepper__line ius-stepper__line--out\" [attr.data-fill]=\"vm.state === 'done' ? 'done' : null\"></span>\r\n </div>\r\n }\r\n <ng-container *ngTemplateOutlet=\"bodyTpl; context: { $implicit: vm }\" />\r\n </li>\r\n }\r\n </ul>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_node: 30px;--_dot: 12px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm);--_line: 2px;display:block;font-family:var(--ius-font-body);color:var(--ius-text-primary);box-sizing:border-box;width:100%;user-select:none;-webkit-user-select:none}:host *,:host *:before,:host *:after{box-sizing:border-box}:host([data-size=small]){--_node: 22px;--_dot: 10px;--_fs: var(--ius-fs-sm);--_subfs: var(--ius-fs-sm)}:host([data-size=large]){--_node: 44px;--_dot: 14px;--_fs: var(--ius-fs-base);--_subfs: var(--ius-fs-sm)}.ius-stepper__list{list-style:none;margin:0;padding:0}.ius-stepper__stage{min-width:0}.ius-stepper__node{position:relative;flex:0 0 auto;line-height:0;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;color:inherit;appearance:none;padding:0;margin:0;border-radius:var(--ius-radius-pill);transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}button.ius-stepper__node{cursor:pointer}button.ius-stepper__node:hover{transform:translateY(-1px)}.ius-stepper__node:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__center{display:inline-flex;align-items:center;justify-content:center;line-height:1}.ius-stepper__label{font-size:var(--_fs);line-height:1.3;color:var(--ius-text-secondary);font-weight:var(--ius-fw-medium);max-width:100%;min-width:0}.ius-stepper__label-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-stepper__stage[data-state=current] .ius-stepper__label{color:var(--_accent-strong);font-weight:var(--ius-fw-semibold)}.ius-stepper__stage[data-state=risk] .ius-stepper__label{color:var(--ius-danger-600)}.ius-stepper__stage[data-state=done] .ius-stepper__label{color:var(--ius-text-primary)}.ius-stepper__subtitle{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;margin-top:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font:inherit;font-size:var(--_subfs);line-height:1.35;color:var(--ius-text-tertiary);text-align:left;transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__subtitle--inert{cursor:default}button.ius-stepper__subtitle:hover{color:var(--_accent-strong);background:var(--ius-surface-sunken)}.ius-stepper__subtitle:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__subtitle-text{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;overflow:hidden;min-width:0;word-break:normal;overflow-wrap:normal}.ius-stepper__subtitle-text[data-single=true]{display:block;white-space:nowrap;overflow:visible;text-overflow:clip}.ius-stepper__subtitle-count{flex:0 0 auto;font-variant-numeric:tabular-nums}.ius-stepper__subtitle .ius-icon{flex:0 0 auto;font-size:var(--ius-fs-lg)}.ius-stepper__stage[data-state=current] .ius-stepper__subtitle-text{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__label-trigger{appearance:none;border:0;background:transparent;cursor:pointer;display:inline-flex;align-items:center;gap:var(--ius-space-xxs);max-width:100%;padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-sm);font-family:inherit;transition:background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__label-trigger:hover{background:var(--ius-surface-sunken)}.ius-stepper__label-trigger:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__label-caret{flex:0 0 auto;font-size:var(--ius-fs-lg);color:var(--ius-text-tertiary)}.ius-stepper__pop{display:flex;flex-direction:column;gap:var(--ius-space-xs);min-width:200px;max-width:300px}.ius-stepper__pop-head{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm)}.ius-stepper__pop-state{font-weight:var(--ius-fw-semibold);color:var(--ius-text-secondary)}.ius-stepper__pop-state[data-state=current],.ius-stepper__pop-state[data-state=done]{color:var(--_accent-strong)}.ius-stepper__pop-state[data-state=risk]{color:var(--ius-danger-600)}.ius-stepper__pop-nm{margin-left:auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-list{display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-stepper__pop-sub{display:flex;align-items:baseline;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-stepper__pop-dot{flex:0 0 auto;width:8px;height:8px;border-radius:var(--ius-radius-pill);background:var(--ius-neutral-4);align-self:center}.ius-stepper__pop-sub[data-state=done] .ius-stepper__pop-dot{background:var(--_accent-strong)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-dot{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__pop-sub[data-state=risk] .ius-stepper__pop-dot{background:var(--ius-danger-500)}.ius-stepper__pop-sub[data-state=current] .ius-stepper__pop-sub-label{color:var(--_accent-strong);font-weight:var(--ius-fw-medium)}.ius-stepper__pop-sub-label{flex:1 1 auto;min-width:0}.ius-stepper__pop-sub-date{flex:0 0 auto;color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-stepper__pop-ellipsis{color:var(--ius-text-tertiary);line-height:1;padding-left:var(--ius-space-md)}.ius-stepper__pop-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--ius-space-xs);margin-top:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__list{display:flex;align-items:flex-start}:host([data-orientation=horizontal]) .ius-stepper__stage{flex:1 1 0;display:flex;flex-direction:column;align-items:center;text-align:center}:host([data-orientation=horizontal]) .ius-stepper__stage:has(.ius-stepper__subtitle-text[data-single=true]){min-width:max-content}:host([data-orientation=horizontal]) .ius-stepper__rail{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:var(--_node)}:host([data-orientation=horizontal]) .ius-stepper__line{flex:1 1 auto;height:var(--_line);background:var(--ius-neutral-3)}:host([data-orientation=horizontal]) .ius-stepper__line--out[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c1),var(--_accent-c2))}:host([data-orientation=horizontal]) .ius-stepper__line--in[data-fill=done]{background:linear-gradient(90deg,var(--_accent-c2),var(--_accent-c3))}:host([data-orientation=horizontal]) .ius-stepper__node{margin:0 var(--ius-space-xs)}:host([data-orientation=horizontal]) .ius-stepper__stage:first-child .ius-stepper__line--in{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__stage:last-child .ius-stepper__line--out{visibility:hidden}:host([data-orientation=horizontal]) .ius-stepper__body{margin-top:var(--ius-space-xs);width:100%;min-width:0;padding:0 var(--ius-space-xs);display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xxs)}:host([data-orientation=horizontal]) .ius-stepper__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-orientation=vertical]) .ius-stepper__list{display:flex;flex-direction:column}:host([data-orientation=vertical]) .ius-stepper__stage{display:grid;grid-template-columns:var(--_node) minmax(0,1fr);column-gap:var(--ius-space-sm)}:host([data-orientation=vertical]) .ius-stepper__rail{display:flex;flex-direction:column;align-items:center}:host([data-orientation=vertical]) .ius-stepper__line--v{width:var(--_line);flex:1 1 auto;min-height:16px;margin:var(--ius-space-xxs) 0;background:var(--ius-neutral-3);border-radius:var(--ius-radius-pill)}:host([data-orientation=vertical]) .ius-stepper__stage[data-state=done] .ius-stepper__line--v{background:linear-gradient(180deg,var(--_accent-c1),var(--_accent-c3))}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__line--v{display:none}:host([data-orientation=vertical]) .ius-stepper__body{padding-bottom:var(--ius-space-md);min-width:0}:host([data-orientation=vertical]) .ius-stepper__stage:last-child .ius-stepper__body{padding-bottom:0}.ius-stepper__overline{display:block;font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);line-height:var(--ius-lh-sm);letter-spacing:var(--ius-ls-emphasis);text-transform:uppercase;color:var(--ius-text-tertiary);margin-bottom:var(--ius-space-xxs)}.ius-stepper__collapsed{display:flex;align-items:center;gap:var(--ius-space-sm);flex-wrap:wrap;min-height:0}.ius-stepper__collapsed-lead{display:flex;align-items:flex-start;gap:var(--ius-space-sm);min-width:0}.ius-stepper__collapsed-main{display:flex;flex-direction:column;min-width:0}.ius-stepper__collapsed-title{display:inline-flex;align-items:baseline;gap:var(--ius-space-xs);flex-wrap:wrap}.ius-stepper__collapsed-count{color:var(--ius-text-tertiary);font-size:var(--_subfs);font-variant-numeric:tabular-nums}.ius-stepper__collapsed-dot{flex:0 0 auto;width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill);background:var(--_accent-strong);margin-top:var(--ius-space-xxs)}.ius-stepper__collapsed-dot[data-state=risk]{background:var(--ius-danger-500)}.ius-stepper__collapsed-dot[data-state=pending]{background:var(--ius-neutral-4)}.ius-stepper__collapsed-label{font-size:var(--_fs);font-weight:var(--ius-fw-semibold);color:var(--_accent-strong)}.ius-stepper__collapsed-sub{font-size:var(--_subfs);color:var(--ius-text-secondary)}.ius-stepper__collapsed-progress{margin-left:auto;font-size:var(--_subfs);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}.ius-stepper__collapsed-right{display:inline-flex;align-items:center;gap:var(--ius-space-sm);margin-left:auto}.ius-stepper__collapsed-right .ius-stepper__collapsed-progress{margin-left:0}.ius-stepper__dots{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 0 auto}.ius-stepper__segs{display:flex;align-items:center;gap:var(--ius-space-xxs);flex:0 1 auto;min-width:0;overflow-x:auto;padding-block:2px}.ius-stepper__seg{appearance:none;border:1px solid transparent;padding:0 var(--ius-space-xs);min-width:26px;height:26px;border-radius:var(--ius-radius-sm);background:var(--ius-neutral-2);color:var(--ius-text-secondary);font-family:var(--ius-font-body);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform var(--ius-duration-fast) var(--ius-ease-standard)}.ius-stepper__seg-check{font-size:var(--ius-fs-base)}button.ius-stepper__seg{cursor:pointer}button.ius-stepper__seg:hover{transform:translateY(-1px)}.ius-stepper__seg:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-stepper__seg[data-state=done]{background:var(--_accent-strong);color:var(--ius-neutral-white)}.ius-stepper__seg[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong);border-color:var(--_accent-strong)}.ius-stepper__seg[data-state=risk]{background:var(--ius-danger-500);color:var(--ius-neutral-white)}.ius-stepper__seg--more{background:transparent;color:var(--ius-text-tertiary);border-color:transparent}.ius-stepper__seg--more:hover{background:var(--ius-surface-sunken)}.ius-stepper__dot{appearance:none;border:0;padding:0;margin:0;background:var(--ius-neutral-3);width:var(--_dot);height:var(--_dot);border-radius:var(--ius-radius-pill)}.ius-stepper__dot[data-state=done]{background:var(--_accent-strong)}.ius-stepper__dot[data-state=current]{background:var(--_accent-strong);box-shadow:0 0 0 2px var(--_accent-soft)}.ius-stepper__dot[data-state=risk]{background:var(--ius-danger-500)}@media(prefers-reduced-motion:reduce){.ius-stepper__node,.ius-stepper__dot,.ius-stepper__subtitle,.ius-stepper__label-trigger,.ius-stepper__seg{transition:none}button.ius-stepper__node:hover,button.ius-stepper__seg:hover{transform:none}}\n"] }]
|
|
25365
25366
|
}], propDecorators: { stages: [{
|
|
25366
25367
|
type: Input
|
|
25367
25368
|
}], orientation: [{
|
|
@@ -25504,11 +25505,11 @@ class StageDetailDrawerComponent {
|
|
|
25504
25505
|
return `var(--ius-${this.accent}-100)`;
|
|
25505
25506
|
}
|
|
25506
25507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StageDetailDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25507
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StageDetailDrawerComponent, isStandalone: true, selector: "ius-stage-detail-drawer", inputs: { open: "open", title: "title", state: "state", date: "date", assignee: "assignee", ai: ["ai", "ai", booleanAttribute], accent: "accent", meta: "meta", side: "side", size: "size", showClose: ["showClose", "showClose", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showBack: "showBack", ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "metaSlot", first: true, predicate: IusStageDetailMetaDirective, descendants: true }, { propertyName: "headerActionsSlot", first: true, predicate: IusStageDetailHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusStageDetailFooterDirective, descendants: true }], ngImport: i0, template: "<ius-drawer\n [open]=\"open\"\n [side]=\"side\"\n [size]=\"size\"\n [showClose]=\"showClose\"\n [showScrim]=\"showScrim\"\n [closeOnScrim]=\"closeOnScrim\"\n [closeOnEsc]=\"closeOnEsc\"\n [showBack]=\"showBackBtn\"\n [title]=\"title\"\n [ariaLabel]=\"ariaLabel\"\n (closed)=\"closed.emit()\"\n (openChange)=\"openChange.emit($event)\"\n (back)=\"onBack()\"\n>\n @if (headerActionsSlot) {\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\n </span>\n }\n\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\n @if (hasMeta) {\n <div class=\"ius-stagedetail__meta\">\n @if (stateMeta; as sm) {\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\n {{ sm.label }}\n </span>\n }\n @if (date) {\n <span class=\"ius-stagedetail__chip\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\n {{ dateText }}\n </span>\n }\n @if (assignee; as who) {\n <span class=\"ius-stagedetail__chip\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n {{ who.name }}\n </span>\n }\n @if (ai) {\n <span class=\"ius-stagedetail__ai\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\n ElenIA\n </span>\n }\n @if (meta) {\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\n }\n <ng-content select=\"[iusStageDetailMeta]\" />\n </div>\n }\n <ng-content />\n </div>\n\n @if (footerSlot) {\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\n <ng-content select=\"[iusStageDetailFooter]\" />\n </div>\n }\n</ius-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DrawerComponent, selector: "ius-drawer", inputs: ["open", "defaultOpen", "side", "size", "title", "centerTitle", "showBack", "showClose", "closeOnScrim", "closeOnEsc", "showScrim", "ariaLabel"], outputs: ["closed", "openChange", "back"] }, { kind: "directive", type: IusDrawerFooterDirective, selector: "[iusDrawerFooter]" }, { kind: "directive", type: IusDrawerHeaderActionsDirective, selector: "[iusDrawerHeaderActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: StageDetailDrawerComponent, isStandalone: true, selector: "ius-stage-detail-drawer", inputs: { open: "open", title: "title", state: "state", date: "date", assignee: "assignee", ai: ["ai", "ai", booleanAttribute], accent: "accent", meta: "meta", side: "side", size: "size", showClose: ["showClose", "showClose", booleanAttribute], showScrim: ["showScrim", "showScrim", booleanAttribute], closeOnScrim: ["closeOnScrim", "closeOnScrim", booleanAttribute], closeOnEsc: ["closeOnEsc", "closeOnEsc", booleanAttribute], showBack: "showBack", ariaLabel: "ariaLabel" }, outputs: { closed: "closed", openChange: "openChange", back: "back" }, queries: [{ propertyName: "metaSlot", first: true, predicate: IusStageDetailMetaDirective, descendants: true }, { propertyName: "headerActionsSlot", first: true, predicate: IusStageDetailHeaderActionsDirective, descendants: true }, { propertyName: "footerSlot", first: true, predicate: IusStageDetailFooterDirective, descendants: true }], ngImport: i0, template: "<ius-drawer\r\n [open]=\"open\"\r\n [side]=\"side\"\r\n [size]=\"size\"\r\n [showClose]=\"showClose\"\r\n [showScrim]=\"showScrim\"\r\n [closeOnScrim]=\"closeOnScrim\"\r\n [closeOnEsc]=\"closeOnEsc\"\r\n [showBack]=\"showBackBtn\"\r\n [title]=\"title\"\r\n [ariaLabel]=\"ariaLabel\"\r\n (closed)=\"closed.emit()\"\r\n (openChange)=\"openChange.emit($event)\"\r\n (back)=\"onBack()\"\r\n>\r\n @if (headerActionsSlot) {\r\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\r\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\r\n </span>\r\n }\r\n\r\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\r\n @if (hasMeta) {\r\n <div class=\"ius-stagedetail__meta\">\r\n @if (stateMeta; as sm) {\r\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\r\n {{ sm.label }}\r\n </span>\r\n }\r\n @if (date) {\r\n <span class=\"ius-stagedetail__chip\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\r\n {{ dateText }}\r\n </span>\r\n }\r\n @if (assignee; as who) {\r\n <span class=\"ius-stagedetail__chip\">\r\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\r\n {{ who.name }}\r\n </span>\r\n }\r\n @if (ai) {\r\n <span class=\"ius-stagedetail__ai\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\r\n ElenIA\r\n </span>\r\n }\r\n @if (meta) {\r\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\r\n }\r\n <ng-content select=\"[iusStageDetailMeta]\" />\r\n </div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (footerSlot) {\r\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\r\n <ng-content select=\"[iusStageDetailFooter]\" />\r\n </div>\r\n }\r\n</ius-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: DrawerComponent, selector: "ius-drawer", inputs: ["open", "defaultOpen", "side", "size", "title", "centerTitle", "showBack", "showClose", "closeOnScrim", "closeOnEsc", "showScrim", "ariaLabel"], outputs: ["closed", "openChange", "back"] }, { kind: "directive", type: IusDrawerFooterDirective, selector: "[iusDrawerFooter]" }, { kind: "directive", type: IusDrawerHeaderActionsDirective, selector: "[iusDrawerHeaderActions]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25508
25509
|
}
|
|
25509
25510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: StageDetailDrawerComponent, decorators: [{
|
|
25510
25511
|
type: Component,
|
|
25511
|
-
args: [{ selector: 'ius-stage-detail-drawer', standalone: true, imports: [AvatarComponent, DrawerComponent, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-drawer\n [open]=\"open\"\n [side]=\"side\"\n [size]=\"size\"\n [showClose]=\"showClose\"\n [showScrim]=\"showScrim\"\n [closeOnScrim]=\"closeOnScrim\"\n [closeOnEsc]=\"closeOnEsc\"\n [showBack]=\"showBackBtn\"\n [title]=\"title\"\n [ariaLabel]=\"ariaLabel\"\n (closed)=\"closed.emit()\"\n (openChange)=\"openChange.emit($event)\"\n (back)=\"onBack()\"\n>\n @if (headerActionsSlot) {\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\n </span>\n }\n\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\n @if (hasMeta) {\n <div class=\"ius-stagedetail__meta\">\n @if (stateMeta; as sm) {\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\n {{ sm.label }}\n </span>\n }\n @if (date) {\n <span class=\"ius-stagedetail__chip\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\n {{ dateText }}\n </span>\n }\n @if (assignee; as who) {\n <span class=\"ius-stagedetail__chip\">\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\n {{ who.name }}\n </span>\n }\n @if (ai) {\n <span class=\"ius-stagedetail__ai\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\n ElenIA\n </span>\n }\n @if (meta) {\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\n }\n <ng-content select=\"[iusStageDetailMeta]\" />\n </div>\n }\n <ng-content />\n </div>\n\n @if (footerSlot) {\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\n <ng-content select=\"[iusStageDetailFooter]\" />\n </div>\n }\n</ius-drawer>\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"] }]
|
|
25512
|
+
args: [{ selector: 'ius-stage-detail-drawer', standalone: true, imports: [AvatarComponent, DrawerComponent, IusDrawerFooterDirective, IusDrawerHeaderActionsDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ius-drawer\r\n [open]=\"open\"\r\n [side]=\"side\"\r\n [size]=\"size\"\r\n [showClose]=\"showClose\"\r\n [showScrim]=\"showScrim\"\r\n [closeOnScrim]=\"closeOnScrim\"\r\n [closeOnEsc]=\"closeOnEsc\"\r\n [showBack]=\"showBackBtn\"\r\n [title]=\"title\"\r\n [ariaLabel]=\"ariaLabel\"\r\n (closed)=\"closed.emit()\"\r\n (openChange)=\"openChange.emit($event)\"\r\n (back)=\"onBack()\"\r\n>\r\n @if (headerActionsSlot) {\r\n <span iusDrawerHeaderActions class=\"ius-stagedetail__actions\">\r\n <ng-content select=\"[iusStageDetailHeaderActions]\" />\r\n </span>\r\n }\r\n\r\n <div class=\"ius-stagedetail\" [style.--_accent-strong]=\"accentStrong\" [style.--_accent-soft]=\"accentSoft\">\r\n @if (hasMeta) {\r\n <div class=\"ius-stagedetail__meta\">\r\n @if (stateMeta; as sm) {\r\n <span class=\"ius-stagedetail__badge\" [attr.data-state]=\"state\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ sm.icon }}</span>\r\n {{ sm.label }}\r\n </span>\r\n }\r\n @if (date) {\r\n <span class=\"ius-stagedetail__chip\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">event</span>\r\n {{ dateText }}\r\n </span>\r\n }\r\n @if (assignee; as who) {\r\n <span class=\"ius-stagedetail__chip\">\r\n <ius-avatar size=\"xsmall\" [name]=\"who.name\" [src]=\"who.src\" />\r\n {{ who.name }}\r\n </span>\r\n }\r\n @if (ai) {\r\n <span class=\"ius-stagedetail__ai\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">auto_awesome</span>\r\n ElenIA\r\n </span>\r\n }\r\n @if (meta) {\r\n <span class=\"ius-stagedetail__metatext\">{{ meta }}</span>\r\n }\r\n <ng-content select=\"[iusStageDetailMeta]\" />\r\n </div>\r\n }\r\n <ng-content />\r\n </div>\r\n\r\n @if (footerSlot) {\r\n <div iusDrawerFooter class=\"ius-stagedetail__footer\">\r\n <ng-content select=\"[iusStageDetailFooter]\" />\r\n </div>\r\n }\r\n</ius-drawer>\r\n", styles: ["@charset \"UTF-8\";:host{display:contents}.ius-stagedetail{font-family:var(--ius-font-body);color:var(--ius-text-primary)}.ius-stagedetail__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs) var(--ius-space-xs);padding-bottom:var(--ius-space-md);margin-bottom:var(--ius-space-md);border-bottom:1px solid var(--ius-stroke)}.ius-stagedetail__badge{display:inline-flex;align-items:center;gap:var(--ius-space-xs);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-medium);padding:var(--ius-space-xxs) var(--ius-space-sm);border-radius:var(--ius-radius-pill)}.ius-stagedetail__badge .ius-icon{font-size:var(--ius-icon-sm)}.ius-stagedetail__badge[data-state=done],.ius-stagedetail__badge[data-state=current]{background:var(--_accent-soft);color:var(--_accent-strong)}.ius-stagedetail__badge[data-state=pending]{background:var(--ius-neutral-2);color:var(--ius-text-tertiary)}.ius-stagedetail__badge[data-state=risk]{background:var(--ius-danger-100);color:var(--ius-danger-700)}.ius-stagedetail__chip{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);color:var(--ius-text-secondary);font-variant-numeric:tabular-nums}.ius-stagedetail__chip .ius-icon{font-size:var(--ius-icon-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__ai{display:inline-flex;align-items:center;gap:var(--ius-space-xxs);font-size:var(--ius-fs-sm);line-height:1;color:var(--ius-uva-600);padding:var(--ius-space-xxs) var(--ius-space-xs);border-radius:var(--ius-radius-pill);background:var(--ius-uva-100)}.ius-stagedetail__ai .ius-icon{font-size:var(--ius-fs-sm)}.ius-stagedetail__metatext{font-size:var(--ius-fs-sm);color:var(--ius-text-tertiary)}.ius-stagedetail__actions,.ius-stagedetail__footer{display:contents}\n"] }]
|
|
25512
25513
|
}], propDecorators: { metaSlot: [{
|
|
25513
25514
|
type: ContentChild,
|
|
25514
25515
|
args: [IusStageDetailMetaDirective]
|
|
@@ -25709,7 +25710,7 @@ class FooterStatusComponent {
|
|
|
25709
25710
|
...(ngDevMode ? [{ debugName: "meterTone" }] : /* istanbul ignore next */ []));
|
|
25710
25711
|
}
|
|
25711
25712
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FooterStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25712
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FooterStatusComponent, isStandalone: true, selector: "ius-footer-status", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, meter: { classPropertyName: "meter", publicName: "meter", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, meterLegend: { classPropertyName: "meterLegend", publicName: "meterLegend", isSignal: true, isRequired: false, transformFunction: null }, blocking: { classPropertyName: "blocking", publicName: "blocking", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "blocking() ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-blocking": "blocking() ? 'true' : null", "attr.data-meter": "showMeter() ? 'true' : null" }, classAttribute: "ius-footer-status" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusFooterStatusActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (glyph()) {\n <span class=\"ius-footer-status__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ glyph() }}</span>\n </span>\n}\n\n<span class=\"ius-footer-status__body\">\n <!-- Sin espacios entre nodos: los separadores de la frase salen de before/connector/after. -->\n <span class=\"ius-footer-status__line\"\n >{{ before() }}@if (hasValue()) {<span class=\"ius-footer-status__value\">{{ valueText() }}</span\n >}{{ connector() }}@if (showTotal()) {<span class=\"ius-footer-status__total\">{{ totalText() }}</span\n >}{{ after() }}</span\n >\n\n @if (showMeter()) {\n <ius-linear-progress-bar\n class=\"ius-footer-status__meter\"\n size=\"small\"\n [animate]=\"false\"\n [ariaLabel]=\"label() || undefined\"\n [value]=\"meterValue()\"\n [max]=\"meterMax()\"\n [tone]=\"meterTone()\"\n [segments]=\"meterSegments()\"\n [showLegend]=\"meterLegend() && !!segments()?.length\"\n />\n }\n</span>\n\n@if (hasAction()) {\n <span class=\"ius-footer-status__action\">\n <ng-content select=\"[iusFooterStatusAction]\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fst-fs: var(--ius-fs-base);--_fst-lh: var(--ius-lh-base);--_fst-icon: var(--ius-icon-md);--_fst-gap: var(--ius-space-sm);--_fst-meter-w: 320px;--_fst-accent: var(--ius-neutral-7);--_fst-text: var(--ius-text-secondary);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--_fst-gap);row-gap:var(--ius-space-xs);box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);font-size:var(--_fst-fs);line-height:var(--_fst-lh);color:var(--_fst-text);text-wrap:pretty}:host([data-size=small]){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}@container style(--ius-control-size: small){:host(:not([data-size])){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}}:host([data-tone=neutral]){--_fst-accent: var(--ius-neutral-7)}:host([data-tone=info]){--_fst-accent: var(--ius-info-600)}:host([data-tone=success]){--_fst-accent: var(--ius-success-700)}:host([data-tone=warning]){--_fst-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_fst-accent: var(--ius-danger-600)}:host([data-blocking=true][data-tone=neutral]){--_fst-text: var(--ius-text-primary)}:host([data-blocking=true][data-tone=info]){--_fst-text: var(--ius-info-800)}:host([data-blocking=true][data-tone=success]){--_fst-text: var(--ius-success-800)}:host([data-blocking=true][data-tone=warning]){--_fst-text: var(--ius-warning-800)}:host([data-blocking=true][data-tone=danger]){--_fst-text: var(--ius-danger-800)}.ius-footer-status__icon{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:var(--_fst-lh);color:var(--_fst-accent)}.ius-footer-status__icon .ius-icon{font-size:var(--_fst-icon);line-height:1}.ius-footer-status__body{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-footer-status__line{margin:0}.ius-footer-status__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums;color:var(--ius-text-primary)}.ius-footer-status__total{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;color:inherit}:host([data-blocking=true]) .ius-footer-status__value{color:inherit}.ius-footer-status__meter{width:100%;max-width:var(--_fst-meter-w)}:host([data-meter=true]) .ius-footer-status__body{min-width:min(var(--_fst-meter-w),100%)}.ius-footer-status__action{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25713
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: FooterStatusComponent, isStandalone: true, selector: "ius-footer-status", inputs: { tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, total: { classPropertyName: "total", publicName: "total", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: false, transformFunction: null }, meter: { classPropertyName: "meter", publicName: "meter", isSignal: true, isRequired: false, transformFunction: null }, segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, meterLegend: { classPropertyName: "meterLegend", publicName: "meterLegend", isSignal: true, isRequired: false, transformFunction: null }, blocking: { classPropertyName: "blocking", publicName: "blocking", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "blocking() ? 'alert' : 'status'", "attr.data-tone": "tone()", "attr.data-size": "size() !== 'medium' ? size() : null", "attr.data-blocking": "blocking() ? 'true' : null", "attr.data-meter": "showMeter() ? 'true' : null" }, classAttribute: "ius-footer-status" }, queries: [{ propertyName: "actionRef", first: true, predicate: IusFooterStatusActionDirective, descendants: true, isSignal: true }], ngImport: i0, template: "@if (glyph()) {\r\n <span class=\"ius-footer-status__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ glyph() }}</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-footer-status__body\">\r\n <!-- Sin espacios entre nodos: los separadores de la frase salen de before/connector/after. -->\r\n <span class=\"ius-footer-status__line\"\r\n >{{ before() }}@if (hasValue()) {<span class=\"ius-footer-status__value\">{{ valueText() }}</span\r\n >}{{ connector() }}@if (showTotal()) {<span class=\"ius-footer-status__total\">{{ totalText() }}</span\r\n >}{{ after() }}</span\r\n >\r\n\r\n @if (showMeter()) {\r\n <ius-linear-progress-bar\r\n class=\"ius-footer-status__meter\"\r\n size=\"small\"\r\n [animate]=\"false\"\r\n [ariaLabel]=\"label() || undefined\"\r\n [value]=\"meterValue()\"\r\n [max]=\"meterMax()\"\r\n [tone]=\"meterTone()\"\r\n [segments]=\"meterSegments()\"\r\n [showLegend]=\"meterLegend() && !!segments()?.length\"\r\n />\r\n }\r\n</span>\r\n\r\n@if (hasAction()) {\r\n <span class=\"ius-footer-status__action\">\r\n <ng-content select=\"[iusFooterStatusAction]\" />\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_fst-fs: var(--ius-fs-base);--_fst-lh: var(--ius-lh-base);--_fst-icon: var(--ius-icon-md);--_fst-gap: var(--ius-space-sm);--_fst-meter-w: 320px;--_fst-accent: var(--ius-neutral-7);--_fst-text: var(--ius-text-secondary);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--_fst-gap);row-gap:var(--ius-space-xs);box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);font-size:var(--_fst-fs);line-height:var(--_fst-lh);color:var(--_fst-text);text-wrap:pretty}:host([data-size=small]){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}@container style(--ius-control-size: small){:host(:not([data-size])){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}}:host([data-tone=neutral]){--_fst-accent: var(--ius-neutral-7)}:host([data-tone=info]){--_fst-accent: var(--ius-info-600)}:host([data-tone=success]){--_fst-accent: var(--ius-success-700)}:host([data-tone=warning]){--_fst-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_fst-accent: var(--ius-danger-600)}:host([data-blocking=true][data-tone=neutral]){--_fst-text: var(--ius-text-primary)}:host([data-blocking=true][data-tone=info]){--_fst-text: var(--ius-info-800)}:host([data-blocking=true][data-tone=success]){--_fst-text: var(--ius-success-800)}:host([data-blocking=true][data-tone=warning]){--_fst-text: var(--ius-warning-800)}:host([data-blocking=true][data-tone=danger]){--_fst-text: var(--ius-danger-800)}.ius-footer-status__icon{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:var(--_fst-lh);color:var(--_fst-accent)}.ius-footer-status__icon .ius-icon{font-size:var(--_fst-icon);line-height:1}.ius-footer-status__body{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-footer-status__line{margin:0}.ius-footer-status__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums;color:var(--ius-text-primary)}.ius-footer-status__total{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;color:inherit}:host([data-blocking=true]) .ius-footer-status__value{color:inherit}.ius-footer-status__meter{width:100%;max-width:var(--_fst-meter-w)}:host([data-meter=true]) .ius-footer-status__body{min-width:min(var(--_fst-meter-w),100%)}.ius-footer-status__action{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center}\n"], dependencies: [{ kind: "component", type: LinearProgressBarComponent, selector: "ius-linear-progress-bar", inputs: ["value", "max", "step", "steps", "segments", "showLegend", "animate", "animateDelay", "tone", "size", "indeterminate", "label", "showValue", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25713
25714
|
}
|
|
25714
25715
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: FooterStatusComponent, decorators: [{
|
|
25715
25716
|
type: Component,
|
|
@@ -25720,7 +25721,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
25720
25721
|
'[attr.data-size]': "size() !== 'medium' ? size() : null",
|
|
25721
25722
|
'[attr.data-blocking]': "blocking() ? 'true' : null",
|
|
25722
25723
|
'[attr.data-meter]': "showMeter() ? 'true' : null",
|
|
25723
|
-
}, template: "@if (glyph()) {\n <span class=\"ius-footer-status__icon\" aria-hidden=\"true\">\n <span translate=\"no\" class=\"ius-icon\">{{ glyph() }}</span>\n </span>\n}\n\n<span class=\"ius-footer-status__body\">\n <!-- Sin espacios entre nodos: los separadores de la frase salen de before/connector/after. -->\n <span class=\"ius-footer-status__line\"\n >{{ before() }}@if (hasValue()) {<span class=\"ius-footer-status__value\">{{ valueText() }}</span\n >}{{ connector() }}@if (showTotal()) {<span class=\"ius-footer-status__total\">{{ totalText() }}</span\n >}{{ after() }}</span\n >\n\n @if (showMeter()) {\n <ius-linear-progress-bar\n class=\"ius-footer-status__meter\"\n size=\"small\"\n [animate]=\"false\"\n [ariaLabel]=\"label() || undefined\"\n [value]=\"meterValue()\"\n [max]=\"meterMax()\"\n [tone]=\"meterTone()\"\n [segments]=\"meterSegments()\"\n [showLegend]=\"meterLegend() && !!segments()?.length\"\n />\n }\n</span>\n\n@if (hasAction()) {\n <span class=\"ius-footer-status__action\">\n <ng-content select=\"[iusFooterStatusAction]\" />\n </span>\n}\n", styles: ["@charset \"UTF-8\";:host{--_fst-fs: var(--ius-fs-base);--_fst-lh: var(--ius-lh-base);--_fst-icon: var(--ius-icon-md);--_fst-gap: var(--ius-space-sm);--_fst-meter-w: 320px;--_fst-accent: var(--ius-neutral-7);--_fst-text: var(--ius-text-secondary);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--_fst-gap);row-gap:var(--ius-space-xs);box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);font-size:var(--_fst-fs);line-height:var(--_fst-lh);color:var(--_fst-text);text-wrap:pretty}:host([data-size=small]){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}@container style(--ius-control-size: small){:host(:not([data-size])){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}}:host([data-tone=neutral]){--_fst-accent: var(--ius-neutral-7)}:host([data-tone=info]){--_fst-accent: var(--ius-info-600)}:host([data-tone=success]){--_fst-accent: var(--ius-success-700)}:host([data-tone=warning]){--_fst-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_fst-accent: var(--ius-danger-600)}:host([data-blocking=true][data-tone=neutral]){--_fst-text: var(--ius-text-primary)}:host([data-blocking=true][data-tone=info]){--_fst-text: var(--ius-info-800)}:host([data-blocking=true][data-tone=success]){--_fst-text: var(--ius-success-800)}:host([data-blocking=true][data-tone=warning]){--_fst-text: var(--ius-warning-800)}:host([data-blocking=true][data-tone=danger]){--_fst-text: var(--ius-danger-800)}.ius-footer-status__icon{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:var(--_fst-lh);color:var(--_fst-accent)}.ius-footer-status__icon .ius-icon{font-size:var(--_fst-icon);line-height:1}.ius-footer-status__body{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-footer-status__line{margin:0}.ius-footer-status__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums;color:var(--ius-text-primary)}.ius-footer-status__total{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;color:inherit}:host([data-blocking=true]) .ius-footer-status__value{color:inherit}.ius-footer-status__meter{width:100%;max-width:var(--_fst-meter-w)}:host([data-meter=true]) .ius-footer-status__body{min-width:min(var(--_fst-meter-w),100%)}.ius-footer-status__action{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center}\n"] }]
|
|
25724
|
+
}, template: "@if (glyph()) {\r\n <span class=\"ius-footer-status__icon\" aria-hidden=\"true\">\r\n <span translate=\"no\" class=\"ius-icon\">{{ glyph() }}</span>\r\n </span>\r\n}\r\n\r\n<span class=\"ius-footer-status__body\">\r\n <!-- Sin espacios entre nodos: los separadores de la frase salen de before/connector/after. -->\r\n <span class=\"ius-footer-status__line\"\r\n >{{ before() }}@if (hasValue()) {<span class=\"ius-footer-status__value\">{{ valueText() }}</span\r\n >}{{ connector() }}@if (showTotal()) {<span class=\"ius-footer-status__total\">{{ totalText() }}</span\r\n >}{{ after() }}</span\r\n >\r\n\r\n @if (showMeter()) {\r\n <ius-linear-progress-bar\r\n class=\"ius-footer-status__meter\"\r\n size=\"small\"\r\n [animate]=\"false\"\r\n [ariaLabel]=\"label() || undefined\"\r\n [value]=\"meterValue()\"\r\n [max]=\"meterMax()\"\r\n [tone]=\"meterTone()\"\r\n [segments]=\"meterSegments()\"\r\n [showLegend]=\"meterLegend() && !!segments()?.length\"\r\n />\r\n }\r\n</span>\r\n\r\n@if (hasAction()) {\r\n <span class=\"ius-footer-status__action\">\r\n <ng-content select=\"[iusFooterStatusAction]\" />\r\n </span>\r\n}\r\n", styles: ["@charset \"UTF-8\";:host{--_fst-fs: var(--ius-fs-base);--_fst-lh: var(--ius-lh-base);--_fst-icon: var(--ius-icon-md);--_fst-gap: var(--ius-space-sm);--_fst-meter-w: 320px;--_fst-accent: var(--ius-neutral-7);--_fst-text: var(--ius-text-secondary);display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--_fst-gap);row-gap:var(--ius-space-xs);box-sizing:border-box;min-width:0;font-family:var(--ius-font-body);font-size:var(--_fst-fs);line-height:var(--_fst-lh);color:var(--_fst-text);text-wrap:pretty}:host([data-size=small]){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}@container style(--ius-control-size: small){:host(:not([data-size])){--_fst-fs: var(--ius-fs-sm);--_fst-lh: var(--ius-lh-sm);--_fst-icon: var(--ius-icon-sm);--_fst-gap: var(--ius-space-xs);--_fst-meter-w: 260px}}:host([data-tone=neutral]){--_fst-accent: var(--ius-neutral-7)}:host([data-tone=info]){--_fst-accent: var(--ius-info-600)}:host([data-tone=success]){--_fst-accent: var(--ius-success-700)}:host([data-tone=warning]){--_fst-accent: var(--ius-warning-700)}:host([data-tone=danger]){--_fst-accent: var(--ius-danger-600)}:host([data-blocking=true][data-tone=neutral]){--_fst-text: var(--ius-text-primary)}:host([data-blocking=true][data-tone=info]){--_fst-text: var(--ius-info-800)}:host([data-blocking=true][data-tone=success]){--_fst-text: var(--ius-success-800)}:host([data-blocking=true][data-tone=warning]){--_fst-text: var(--ius-warning-800)}:host([data-blocking=true][data-tone=danger]){--_fst-text: var(--ius-danger-800)}.ius-footer-status__icon{flex:0 0 auto;align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;height:var(--_fst-lh);color:var(--_fst-accent)}.ius-footer-status__icon .ius-icon{font-size:var(--_fst-icon);line-height:1}.ius-footer-status__body{flex:0 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xs)}.ius-footer-status__line{margin:0}.ius-footer-status__value{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-variant-numeric:tabular-nums;color:var(--ius-text-primary)}.ius-footer-status__total{font-family:var(--ius-font-display);font-weight:var(--ius-fw-medium);font-variant-numeric:tabular-nums;color:inherit}:host([data-blocking=true]) .ius-footer-status__value{color:inherit}.ius-footer-status__meter{width:100%;max-width:var(--_fst-meter-w)}:host([data-meter=true]) .ius-footer-status__body{min-width:min(var(--_fst-meter-w),100%)}.ius-footer-status__action{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center}\n"] }]
|
|
25724
25725
|
}], propDecorators: { tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], total: [{ type: i0.Input, args: [{ isSignal: true, alias: "total", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], unit: [{ type: i0.Input, args: [{ isSignal: true, alias: "unit", required: false }] }], meter: [{ type: i0.Input, args: [{ isSignal: true, alias: "meter", required: false }] }], segments: [{ type: i0.Input, args: [{ isSignal: true, alias: "segments", required: false }] }], meterLegend: [{ type: i0.Input, args: [{ isSignal: true, alias: "meterLegend", required: false }] }], blocking: [{ type: i0.Input, args: [{ isSignal: true, alias: "blocking", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], actionRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusFooterStatusActionDirective), { isSignal: true }] }] } });
|
|
25725
25726
|
|
|
25726
25727
|
/** Filas del menú ⋮ de card y columna: un divisor cada vez que cambia `group` (como el golden). */
|
|
@@ -25950,7 +25951,7 @@ class KanbanCardComponent {
|
|
|
25950
25951
|
}
|
|
25951
25952
|
}
|
|
25952
25953
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25953
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanCardComponent, isStandalone: true, selector: "ius-kanban-card", inputs: { overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, paragraph: { classPropertyName: "paragraph", publicName: "paragraph", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, assignee: { classPropertyName: "assignee", publicName: "assignee", isSignal: true, isRequired: false, transformFunction: null }, flag: { classPropertyName: "flag", publicName: "flag", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-layout": "layout()", "attr.data-accent": "accent()", "attr.data-handle": "handle() ? 'true' : null", "attr.data-draggable": "draggable() ? 'true' : null", "attr.data-clickable": "isClickable ? 'true' : null", "attr.data-selected": "selected() ? 'true' : null", "attr.data-dragging": "dragging() ? 'true' : null", "attr.data-disabled": "disabled() ? 'true' : null", "attr.data-state": "state() ?? null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-corner": "hasCorner() ? 'true' : null", "attr.data-item-id": "itemId() ?? null", "attr.role": "isClickable ? 'button' : null", "attr.tabindex": "isClickable ? 0 : null", "attr.aria-label": "ariaLabel() || null", "attr.title": "null" }, classAttribute: "ius-kbcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusKanbanCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusKanbanCardTrailingDirective, descendants: true, isSignal: true }, { propertyName: "bodyRef", first: true, predicate: IusKanbanCardBodyDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grip: con `handle` el arrastre nace aqu\u00ED (cdkDragHandle del cdkDrag padre). -->\n@if (handle()) {\n <span\n class=\"ius-kbcard__grip\"\n role=\"button\"\n aria-label=\"Arrastrar para reordenar\"\n [attr.tabindex]=\"disabled() ? null : 0\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"!draggable() || disabled()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">drag_indicator</span>\n </span>\n}\n\n@if (hasLeading()) {\n <span class=\"ius-kbcard__lead\">\n @if (leading(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardLeading]\" />\n }\n </span>\n}\n\n<span class=\"ius-kbcard__body\">\n @if (hasCustomBody()) {\n @if (content(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardBody]\" />\n }\n } @else {\n @for (ln of lines(); track ln.kind) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: ln }\" />\n }\n @if (resolvedTags().length) {\n <span class=\"ius-kbcard__tags\">\n @for (t of resolvedTags(); track $index) {\n @if (t.tpl) {\n <ng-container *ngTemplateOutlet=\"t.tpl\" />\n } @else {\n <ius-tag\n [size]=\"t.cfg.size ?? 'small'\"\n [label]=\"t.cfg.label\"\n [tone]=\"t.cfg.tone ?? 'neutral'\"\n [variant]=\"t.cfg.variant\"\n [shape]=\"t.cfg.shape ?? 'pill'\"\n [role]=\"t.cfg.role ?? 'label'\"\n [icon]=\"t.cfg.icon\"\n [dot]=\"t.cfg.dot\"\n [count]=\"t.cfg.count\"\n />\n }\n }\n </span>\n }\n <!-- pie: responsable (izq) + caption (der) -->\n @if (assignee() != null) {\n <span class=\"ius-kbcard__footrow\">\n @if (assigneeTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else if (assigneeCfg(); as a) {\n <span class=\"ius-kbcard__who\">\n <ius-avatar\n size=\"xsmall\"\n [name]=\"a.name\"\n [src]=\"a.src || a.avatar\"\n [monogram]=\"a.monogram\"\n [icon]=\"a.icon\"\n [color]=\"a.color ?? 'auto'\"\n />\n @if (a.name != null) {\n <span class=\"ius-kbcard__who-name\">{{ a.name }}</span>\n }\n </span>\n }\n @if (captionLine(); as cap) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\n }\n </span>\n } @else if (captionLine(); as cap) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\n }\n }\n</span>\n\n<!-- stacked: flag + \u22EE fijos arriba a la derecha \u00B7 row: en l\u00EDnea a la derecha -->\n@if (hasCorner()) {\n <span class=\"ius-kbcard__corner\">\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\n </span>\n}\n@if (layout() === 'row') {\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\n}\n@if (hasTrailing()) {\n <span class=\"ius-kbcard__trail\">\n @if (trailing(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardTrailing]\" />\n }\n </span>\n}\n@if (layout() === 'row') {\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\n}\n\n<ng-template #lineTpl let-ln>\n <span [class]=\"'ius-kbcard__line ius-kbcard__' + ln.kind\" [attr.data-tone]=\"ln.tone || null\">\n @if (ln.icon) {\n <span class=\"ius-kbcard__line-prefix\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ln.icon }}</span>\n </span>\n }\n @if (ln.text != null) {\n <span class=\"ius-kbcard__line-text\">\n @if (ln.textTpl) {\n <ng-container *ngTemplateOutlet=\"ln.textTpl\" />\n } @else {\n {{ ln.text }}\n }\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #flagTpl>\n @if (flag(); as f) {\n <span class=\"ius-kbcard__flag\">\n <ius-insignia\n [variant]=\"f.variant || 'dot'\"\n [tone]=\"f.tone || 'warning'\"\n [size]=\"f.size || 'small'\"\n [count]=\"f.count\"\n [ring]=\"!!f.ring\"\n [label]=\"f.label\"\n [ariaLabel]=\"flagAriaLabel(f)\"\n />\n </span>\n }\n</ng-template>\n\n<ng-template #overflowTpl>\n @if (hasActions()) {\n <span class=\"ius-kbcard__actions\">\n <ius-popover\n placement=\"bottom-end\"\n trigger=\"click\"\n padding=\"none\"\n [showArrow]=\"false\"\n [dismissable]=\"true\"\n [open]=\"menuOpen()\"\n (openChange)=\"menuOpen.set($event)\"\n >\n <span\n class=\"ius-kbcard__act\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"M\u00E1s acciones\"\n (keydown.enter)=\"toggleMenu($event)\"\n (keydown.space)=\"toggleMenu($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\n </span>\n <div iusPopoverContent class=\"ius-kbcard__menu\">\n @for (row of menuRows(); track row.key) {\n @if (row.sep) {\n <div class=\"ius-kbcard__menu-sep\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n [icon]=\"row.action.icon\"\n [label]=\"row.action.label\"\n [danger]=\"!!row.action.danger\"\n (clicked)=\"onAction(row.action, $event)\"\n />\n }\n }\n </div>\n </ius-popover>\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_kb-accent: var(--ius-info-600);position:relative;box-sizing:border-box;width:100%;-webkit-user-select:none;user-select:none;display:flex;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-draggable=true]:not([data-handle=true])){cursor:grab}:host([data-draggable=true]:not([data-handle=true]):active){cursor:grabbing}:host([data-clickable=true]){cursor:pointer}:host([data-draggable=true][data-clickable=true]:not([data-handle=true])){cursor:grab}:host(:hover),:host([data-state=hover]){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible),:host([data-state=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-selected=true]){border-color:var(--_kb-accent);box-shadow:inset 0 0 0 1px var(--_kb-accent),var(--ius-elevation-100)}:host([data-dragging=true]){opacity:.5;box-shadow:var(--ius-elevation-300)}:host([data-disabled=true]){opacity:.55;pointer-events:none}:host([data-layout=stacked]){flex-direction:column;gap:var(--ius-space-xs)}:host([data-layout=row]){flex-direction:row;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-kbcard__grip{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-5);cursor:grab;touch-action:none;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__grip:hover{color:var(--ius-text-secondary);background:var(--ius-neutral-2)}.ius-kbcard__grip:active{cursor:grabbing}.ius-kbcard__grip:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcard__grip .ius-icon{font-size:var(--ius-icon-md)}:host([data-layout=stacked]) .ius-kbcard__grip{align-self:flex-start;margin-top:-2px}.ius-kbcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__trail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);margin-left:auto}:host([data-layout=stacked]) .ius-kbcard__trail{margin-left:0}.ius-kbcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}:host([data-corner=true][data-layout=stacked]) .ius-kbcard__body{padding-right:var(--ius-space-lg)}.ius-kbcard__line{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line-text{flex:1 1 auto;min-width:0}.ius-kbcard__line-prefix{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--_line-c)}.ius-kbcard__line-prefix .ius-icon{font-size:var(--ius-icon-sm)}.ius-kbcard__overline .ius-kbcard__line-text{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__title .ius-kbcard__line-text{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) .ius-kbcard__title .ius-kbcard__line-text{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}.ius-kbcard__subtitle .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.35;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__paragraph{align-items:flex-start}.ius-kbcard__paragraph .ius-kbcard__line-text{font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}.ius-kbcard__paragraph .ius-kbcard__line-prefix{margin-top:1px}.ius-kbcard__caption .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-kbcard__line[data-tone] .ius-kbcard__line-text{color:var(--_line-c)}.ius-kbcard__line[data-tone=muted]{--_line-c: var(--ius-neutral-5)}.ius-kbcard__line[data-tone=neutral]{--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line[data-tone=info]{--_line-c: var(--ius-info-600)}.ius-kbcard__line[data-tone=success]{--_line-c: var(--ius-success-600)}.ius-kbcard__line[data-tone=warning]{--_line-c: var(--ius-warning-700)}.ius-kbcard__line[data-tone=danger]{--_line-c: var(--ius-danger-600)}.ius-kbcard__line[data-tone=primary]{--_line-c: var(--ius-primary-700)}.ius-kbcard__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-kbcard__footrow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-kbcard__footrow .ius-kbcard__caption{margin-left:auto;flex:0 0 auto}.ius-kbcard__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-kbcard__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-kbcard__flag{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__corner{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcard__corner .ius-kbcard__flag{margin-right:var(--ius-space-xxs)}.ius-kbcard__actions{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcard__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcard__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host(:hover) .ius-kbcard__act,:host(:focus-within) .ius-kbcard__act,:host([data-menu-open=true]) .ius-kbcard__act{opacity:1}.ius-kbcard__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:190px;padding:var(--ius-space-xxs)}.ius-kbcard__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-accent=primary]){--_kb-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kb-accent: var(--ius-info-600)}:host([data-accent=success]){--_kb-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kb-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kb-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kb-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kb-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kb-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kb-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kb-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kb-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kb-accent: var(--ius-aguacate-600)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { 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: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25954
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanCardComponent, isStandalone: true, selector: "ius-kanban-card", inputs: { overline: { classPropertyName: "overline", publicName: "overline", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, paragraph: { classPropertyName: "paragraph", publicName: "paragraph", isSignal: true, isRequired: false, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, assignee: { classPropertyName: "assignee", publicName: "assignee", isSignal: true, isRequired: false, transformFunction: null }, flag: { classPropertyName: "flag", publicName: "flag", isSignal: true, isRequired: false, transformFunction: null }, leading: { classPropertyName: "leading", publicName: "leading", isSignal: true, isRequired: false, transformFunction: null }, trailing: { classPropertyName: "trailing", publicName: "trailing", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, templateContext: { classPropertyName: "templateContext", publicName: "templateContext", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, handle: { classPropertyName: "handle", publicName: "handle", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, itemId: { classPropertyName: "itemId", publicName: "itemId", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, clickable: { classPropertyName: "clickable", publicName: "clickable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, host: { listeners: { "click": "onClick($event)", "keydown": "onKeydown($event)" }, properties: { "attr.data-layout": "layout()", "attr.data-accent": "accent()", "attr.data-handle": "handle() ? 'true' : null", "attr.data-draggable": "draggable() ? 'true' : null", "attr.data-clickable": "isClickable ? 'true' : null", "attr.data-selected": "selected() ? 'true' : null", "attr.data-dragging": "dragging() ? 'true' : null", "attr.data-disabled": "disabled() ? 'true' : null", "attr.data-state": "state() ?? null", "attr.data-menu-open": "menuOpen() ? 'true' : null", "attr.data-corner": "hasCorner() ? 'true' : null", "attr.data-item-id": "itemId() ?? null", "attr.role": "isClickable ? 'button' : null", "attr.tabindex": "isClickable ? 0 : null", "attr.aria-label": "ariaLabel() || null", "attr.title": "null" }, classAttribute: "ius-kbcard" }, queries: [{ propertyName: "leadingRef", first: true, predicate: IusKanbanCardLeadingDirective, descendants: true, isSignal: true }, { propertyName: "trailingRef", first: true, predicate: IusKanbanCardTrailingDirective, descendants: true, isSignal: true }, { propertyName: "bodyRef", first: true, predicate: IusKanbanCardBodyDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Grip: con `handle` el arrastre nace aqu\u00ED (cdkDragHandle del cdkDrag padre). -->\r\n@if (handle()) {\r\n <span\r\n class=\"ius-kbcard__grip\"\r\n role=\"button\"\r\n aria-label=\"Arrastrar para reordenar\"\r\n [attr.tabindex]=\"disabled() ? null : 0\"\r\n cdkDragHandle\r\n [cdkDragHandleDisabled]=\"!draggable() || disabled()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">drag_indicator</span>\r\n </span>\r\n}\r\n\r\n@if (hasLeading()) {\r\n <span class=\"ius-kbcard__lead\">\r\n @if (leading(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardLeading]\" />\r\n }\r\n </span>\r\n}\r\n\r\n<span class=\"ius-kbcard__body\">\r\n @if (hasCustomBody()) {\r\n @if (content(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardBody]\" />\r\n }\r\n } @else {\r\n @for (ln of lines(); track ln.kind) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: ln }\" />\r\n }\r\n @if (resolvedTags().length) {\r\n <span class=\"ius-kbcard__tags\">\r\n @for (t of resolvedTags(); track $index) {\r\n @if (t.tpl) {\r\n <ng-container *ngTemplateOutlet=\"t.tpl\" />\r\n } @else {\r\n <ius-tag\r\n [size]=\"t.cfg.size ?? 'small'\"\r\n [label]=\"t.cfg.label\"\r\n [tone]=\"t.cfg.tone ?? 'neutral'\"\r\n [variant]=\"t.cfg.variant\"\r\n [shape]=\"t.cfg.shape ?? 'pill'\"\r\n [role]=\"t.cfg.role ?? 'label'\"\r\n [icon]=\"t.cfg.icon\"\r\n [dot]=\"t.cfg.dot\"\r\n [count]=\"t.cfg.count\"\r\n />\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- pie: responsable (izq) + caption (der) -->\r\n @if (assignee() != null) {\r\n <span class=\"ius-kbcard__footrow\">\r\n @if (assigneeTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else if (assigneeCfg(); as a) {\r\n <span class=\"ius-kbcard__who\">\r\n <ius-avatar\r\n size=\"xsmall\"\r\n [name]=\"a.name\"\r\n [src]=\"a.src || a.avatar\"\r\n [monogram]=\"a.monogram\"\r\n [icon]=\"a.icon\"\r\n [color]=\"a.color ?? 'auto'\"\r\n />\r\n @if (a.name != null) {\r\n <span class=\"ius-kbcard__who-name\">{{ a.name }}</span>\r\n }\r\n </span>\r\n }\r\n @if (captionLine(); as cap) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\r\n }\r\n </span>\r\n } @else if (captionLine(); as cap) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\r\n }\r\n }\r\n</span>\r\n\r\n<!-- stacked: flag + \u22EE fijos arriba a la derecha \u00B7 row: en l\u00EDnea a la derecha -->\r\n@if (hasCorner()) {\r\n <span class=\"ius-kbcard__corner\">\r\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\r\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\r\n </span>\r\n}\r\n@if (layout() === 'row') {\r\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\r\n}\r\n@if (hasTrailing()) {\r\n <span class=\"ius-kbcard__trail\">\r\n @if (trailing(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardTrailing]\" />\r\n }\r\n </span>\r\n}\r\n@if (layout() === 'row') {\r\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\r\n}\r\n\r\n<ng-template #lineTpl let-ln>\r\n <span [class]=\"'ius-kbcard__line ius-kbcard__' + ln.kind\" [attr.data-tone]=\"ln.tone || null\">\r\n @if (ln.icon) {\r\n <span class=\"ius-kbcard__line-prefix\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ln.icon }}</span>\r\n </span>\r\n }\r\n @if (ln.text != null) {\r\n <span class=\"ius-kbcard__line-text\">\r\n @if (ln.textTpl) {\r\n <ng-container *ngTemplateOutlet=\"ln.textTpl\" />\r\n } @else {\r\n {{ ln.text }}\r\n }\r\n </span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #flagTpl>\r\n @if (flag(); as f) {\r\n <span class=\"ius-kbcard__flag\">\r\n <ius-insignia\r\n [variant]=\"f.variant || 'dot'\"\r\n [tone]=\"f.tone || 'warning'\"\r\n [size]=\"f.size || 'small'\"\r\n [count]=\"f.count\"\r\n [ring]=\"!!f.ring\"\r\n [label]=\"f.label\"\r\n [ariaLabel]=\"flagAriaLabel(f)\"\r\n />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #overflowTpl>\r\n @if (hasActions()) {\r\n <span class=\"ius-kbcard__actions\">\r\n <ius-popover\r\n placement=\"bottom-end\"\r\n trigger=\"click\"\r\n padding=\"none\"\r\n [showArrow]=\"false\"\r\n [dismissable]=\"true\"\r\n [open]=\"menuOpen()\"\r\n (openChange)=\"menuOpen.set($event)\"\r\n >\r\n <span\r\n class=\"ius-kbcard__act\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"M\u00E1s acciones\"\r\n (keydown.enter)=\"toggleMenu($event)\"\r\n (keydown.space)=\"toggleMenu($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </span>\r\n <div iusPopoverContent class=\"ius-kbcard__menu\">\r\n @for (row of menuRows(); track row.key) {\r\n @if (row.sep) {\r\n <div class=\"ius-kbcard__menu-sep\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"row.action.icon\"\r\n [label]=\"row.action.label\"\r\n [danger]=\"!!row.action.danger\"\r\n (clicked)=\"onAction(row.action, $event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </ius-popover>\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_kb-accent: var(--ius-info-600);position:relative;box-sizing:border-box;width:100%;-webkit-user-select:none;user-select:none;display:flex;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-draggable=true]:not([data-handle=true])){cursor:grab}:host([data-draggable=true]:not([data-handle=true]):active){cursor:grabbing}:host([data-clickable=true]){cursor:pointer}:host([data-draggable=true][data-clickable=true]:not([data-handle=true])){cursor:grab}:host(:hover),:host([data-state=hover]){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible),:host([data-state=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-selected=true]){border-color:var(--_kb-accent);box-shadow:inset 0 0 0 1px var(--_kb-accent),var(--ius-elevation-100)}:host([data-dragging=true]){opacity:.5;box-shadow:var(--ius-elevation-300)}:host([data-disabled=true]){opacity:.55;pointer-events:none}:host([data-layout=stacked]){flex-direction:column;gap:var(--ius-space-xs)}:host([data-layout=row]){flex-direction:row;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-kbcard__grip{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-5);cursor:grab;touch-action:none;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__grip:hover{color:var(--ius-text-secondary);background:var(--ius-neutral-2)}.ius-kbcard__grip:active{cursor:grabbing}.ius-kbcard__grip:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcard__grip .ius-icon{font-size:var(--ius-icon-md)}:host([data-layout=stacked]) .ius-kbcard__grip{align-self:flex-start;margin-top:-2px}.ius-kbcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__trail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);margin-left:auto}:host([data-layout=stacked]) .ius-kbcard__trail{margin-left:0}.ius-kbcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}:host([data-corner=true][data-layout=stacked]) .ius-kbcard__body{padding-right:var(--ius-space-lg)}.ius-kbcard__line{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line-text{flex:1 1 auto;min-width:0}.ius-kbcard__line-prefix{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--_line-c)}.ius-kbcard__line-prefix .ius-icon{font-size:var(--ius-icon-sm)}.ius-kbcard__overline .ius-kbcard__line-text{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__title .ius-kbcard__line-text{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) .ius-kbcard__title .ius-kbcard__line-text{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}.ius-kbcard__subtitle .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.35;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__paragraph{align-items:flex-start}.ius-kbcard__paragraph .ius-kbcard__line-text{font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}.ius-kbcard__paragraph .ius-kbcard__line-prefix{margin-top:1px}.ius-kbcard__caption .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-kbcard__line[data-tone] .ius-kbcard__line-text{color:var(--_line-c)}.ius-kbcard__line[data-tone=muted]{--_line-c: var(--ius-neutral-5)}.ius-kbcard__line[data-tone=neutral]{--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line[data-tone=info]{--_line-c: var(--ius-info-600)}.ius-kbcard__line[data-tone=success]{--_line-c: var(--ius-success-600)}.ius-kbcard__line[data-tone=warning]{--_line-c: var(--ius-warning-700)}.ius-kbcard__line[data-tone=danger]{--_line-c: var(--ius-danger-600)}.ius-kbcard__line[data-tone=primary]{--_line-c: var(--ius-primary-700)}.ius-kbcard__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-kbcard__footrow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-kbcard__footrow .ius-kbcard__caption{margin-left:auto;flex:0 0 auto}.ius-kbcard__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-kbcard__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-kbcard__flag{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__corner{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcard__corner .ius-kbcard__flag{margin-right:var(--ius-space-xxs)}.ius-kbcard__actions{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcard__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcard__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host(:hover) .ius-kbcard__act,:host(:focus-within) .ius-kbcard__act,:host([data-menu-open=true]) .ius-kbcard__act{opacity:1}.ius-kbcard__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:190px;padding:var(--ius-space-xxs)}.ius-kbcard__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-accent=primary]){--_kb-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kb-accent: var(--ius-info-600)}:host([data-accent=success]){--_kb-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kb-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kb-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kb-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kb-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kb-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kb-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kb-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kb-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kb-accent: var(--ius-aguacate-600)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: AvatarComponent, selector: "ius-avatar", inputs: ["alt", "name", "monogram", "icon", "shape", "size", "color", "editable", "editIcon", "ariaLabel", "src"], outputs: ["edit"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { 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: TagComponent, selector: "ius-tag", inputs: ["label", "role", "tone", "variant", "size", "shape", "icon", "dot", "count", "closable", "closeLabel", "selected", "disabled", "interactive", "state"], outputs: ["clicked", "closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
25954
25955
|
}
|
|
25955
25956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanCardComponent, decorators: [{
|
|
25956
25957
|
type: Component,
|
|
@@ -25983,7 +25984,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
25983
25984
|
'[attr.title]': 'null',
|
|
25984
25985
|
'(click)': 'onClick($event)',
|
|
25985
25986
|
'(keydown)': 'onKeydown($event)',
|
|
25986
|
-
}, template: "<!-- Grip: con `handle` el arrastre nace aqu\u00ED (cdkDragHandle del cdkDrag padre). -->\n@if (handle()) {\n <span\n class=\"ius-kbcard__grip\"\n role=\"button\"\n aria-label=\"Arrastrar para reordenar\"\n [attr.tabindex]=\"disabled() ? null : 0\"\n cdkDragHandle\n [cdkDragHandleDisabled]=\"!draggable() || disabled()\"\n >\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">drag_indicator</span>\n </span>\n}\n\n@if (hasLeading()) {\n <span class=\"ius-kbcard__lead\">\n @if (leading(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardLeading]\" />\n }\n </span>\n}\n\n<span class=\"ius-kbcard__body\">\n @if (hasCustomBody()) {\n @if (content(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardBody]\" />\n }\n } @else {\n @for (ln of lines(); track ln.kind) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: ln }\" />\n }\n @if (resolvedTags().length) {\n <span class=\"ius-kbcard__tags\">\n @for (t of resolvedTags(); track $index) {\n @if (t.tpl) {\n <ng-container *ngTemplateOutlet=\"t.tpl\" />\n } @else {\n <ius-tag\n [size]=\"t.cfg.size ?? 'small'\"\n [label]=\"t.cfg.label\"\n [tone]=\"t.cfg.tone ?? 'neutral'\"\n [variant]=\"t.cfg.variant\"\n [shape]=\"t.cfg.shape ?? 'pill'\"\n [role]=\"t.cfg.role ?? 'label'\"\n [icon]=\"t.cfg.icon\"\n [dot]=\"t.cfg.dot\"\n [count]=\"t.cfg.count\"\n />\n }\n }\n </span>\n }\n <!-- pie: responsable (izq) + caption (der) -->\n @if (assignee() != null) {\n <span class=\"ius-kbcard__footrow\">\n @if (assigneeTpl(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n } @else if (assigneeCfg(); as a) {\n <span class=\"ius-kbcard__who\">\n <ius-avatar\n size=\"xsmall\"\n [name]=\"a.name\"\n [src]=\"a.src || a.avatar\"\n [monogram]=\"a.monogram\"\n [icon]=\"a.icon\"\n [color]=\"a.color ?? 'auto'\"\n />\n @if (a.name != null) {\n <span class=\"ius-kbcard__who-name\">{{ a.name }}</span>\n }\n </span>\n }\n @if (captionLine(); as cap) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\n }\n </span>\n } @else if (captionLine(); as cap) {\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\n }\n }\n</span>\n\n<!-- stacked: flag + \u22EE fijos arriba a la derecha \u00B7 row: en l\u00EDnea a la derecha -->\n@if (hasCorner()) {\n <span class=\"ius-kbcard__corner\">\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\n </span>\n}\n@if (layout() === 'row') {\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\n}\n@if (hasTrailing()) {\n <span class=\"ius-kbcard__trail\">\n @if (trailing(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\n } @else {\n <ng-content select=\"[iusKanbanCardTrailing]\" />\n }\n </span>\n}\n@if (layout() === 'row') {\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\n}\n\n<ng-template #lineTpl let-ln>\n <span [class]=\"'ius-kbcard__line ius-kbcard__' + ln.kind\" [attr.data-tone]=\"ln.tone || null\">\n @if (ln.icon) {\n <span class=\"ius-kbcard__line-prefix\">\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ln.icon }}</span>\n </span>\n }\n @if (ln.text != null) {\n <span class=\"ius-kbcard__line-text\">\n @if (ln.textTpl) {\n <ng-container *ngTemplateOutlet=\"ln.textTpl\" />\n } @else {\n {{ ln.text }}\n }\n </span>\n }\n </span>\n</ng-template>\n\n<ng-template #flagTpl>\n @if (flag(); as f) {\n <span class=\"ius-kbcard__flag\">\n <ius-insignia\n [variant]=\"f.variant || 'dot'\"\n [tone]=\"f.tone || 'warning'\"\n [size]=\"f.size || 'small'\"\n [count]=\"f.count\"\n [ring]=\"!!f.ring\"\n [label]=\"f.label\"\n [ariaLabel]=\"flagAriaLabel(f)\"\n />\n </span>\n }\n</ng-template>\n\n<ng-template #overflowTpl>\n @if (hasActions()) {\n <span class=\"ius-kbcard__actions\">\n <ius-popover\n placement=\"bottom-end\"\n trigger=\"click\"\n padding=\"none\"\n [showArrow]=\"false\"\n [dismissable]=\"true\"\n [open]=\"menuOpen()\"\n (openChange)=\"menuOpen.set($event)\"\n >\n <span\n class=\"ius-kbcard__act\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"M\u00E1s acciones\"\n (keydown.enter)=\"toggleMenu($event)\"\n (keydown.space)=\"toggleMenu($event)\"\n >\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\n </span>\n <div iusPopoverContent class=\"ius-kbcard__menu\">\n @for (row of menuRows(); track row.key) {\n @if (row.sep) {\n <div class=\"ius-kbcard__menu-sep\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n [icon]=\"row.action.icon\"\n [label]=\"row.action.label\"\n [danger]=\"!!row.action.danger\"\n (clicked)=\"onAction(row.action, $event)\"\n />\n }\n }\n </div>\n </ius-popover>\n </span>\n }\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_kb-accent: var(--ius-info-600);position:relative;box-sizing:border-box;width:100%;-webkit-user-select:none;user-select:none;display:flex;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-draggable=true]:not([data-handle=true])){cursor:grab}:host([data-draggable=true]:not([data-handle=true]):active){cursor:grabbing}:host([data-clickable=true]){cursor:pointer}:host([data-draggable=true][data-clickable=true]:not([data-handle=true])){cursor:grab}:host(:hover),:host([data-state=hover]){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible),:host([data-state=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-selected=true]){border-color:var(--_kb-accent);box-shadow:inset 0 0 0 1px var(--_kb-accent),var(--ius-elevation-100)}:host([data-dragging=true]){opacity:.5;box-shadow:var(--ius-elevation-300)}:host([data-disabled=true]){opacity:.55;pointer-events:none}:host([data-layout=stacked]){flex-direction:column;gap:var(--ius-space-xs)}:host([data-layout=row]){flex-direction:row;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-kbcard__grip{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-5);cursor:grab;touch-action:none;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__grip:hover{color:var(--ius-text-secondary);background:var(--ius-neutral-2)}.ius-kbcard__grip:active{cursor:grabbing}.ius-kbcard__grip:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcard__grip .ius-icon{font-size:var(--ius-icon-md)}:host([data-layout=stacked]) .ius-kbcard__grip{align-self:flex-start;margin-top:-2px}.ius-kbcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__trail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);margin-left:auto}:host([data-layout=stacked]) .ius-kbcard__trail{margin-left:0}.ius-kbcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}:host([data-corner=true][data-layout=stacked]) .ius-kbcard__body{padding-right:var(--ius-space-lg)}.ius-kbcard__line{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line-text{flex:1 1 auto;min-width:0}.ius-kbcard__line-prefix{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--_line-c)}.ius-kbcard__line-prefix .ius-icon{font-size:var(--ius-icon-sm)}.ius-kbcard__overline .ius-kbcard__line-text{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__title .ius-kbcard__line-text{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) .ius-kbcard__title .ius-kbcard__line-text{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}.ius-kbcard__subtitle .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.35;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__paragraph{align-items:flex-start}.ius-kbcard__paragraph .ius-kbcard__line-text{font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}.ius-kbcard__paragraph .ius-kbcard__line-prefix{margin-top:1px}.ius-kbcard__caption .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-kbcard__line[data-tone] .ius-kbcard__line-text{color:var(--_line-c)}.ius-kbcard__line[data-tone=muted]{--_line-c: var(--ius-neutral-5)}.ius-kbcard__line[data-tone=neutral]{--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line[data-tone=info]{--_line-c: var(--ius-info-600)}.ius-kbcard__line[data-tone=success]{--_line-c: var(--ius-success-600)}.ius-kbcard__line[data-tone=warning]{--_line-c: var(--ius-warning-700)}.ius-kbcard__line[data-tone=danger]{--_line-c: var(--ius-danger-600)}.ius-kbcard__line[data-tone=primary]{--_line-c: var(--ius-primary-700)}.ius-kbcard__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-kbcard__footrow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-kbcard__footrow .ius-kbcard__caption{margin-left:auto;flex:0 0 auto}.ius-kbcard__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-kbcard__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-kbcard__flag{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__corner{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcard__corner .ius-kbcard__flag{margin-right:var(--ius-space-xxs)}.ius-kbcard__actions{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcard__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcard__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host(:hover) .ius-kbcard__act,:host(:focus-within) .ius-kbcard__act,:host([data-menu-open=true]) .ius-kbcard__act{opacity:1}.ius-kbcard__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:190px;padding:var(--ius-space-xxs)}.ius-kbcard__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-accent=primary]){--_kb-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kb-accent: var(--ius-info-600)}:host([data-accent=success]){--_kb-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kb-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kb-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kb-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kb-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kb-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kb-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kb-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kb-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kb-accent: var(--ius-aguacate-600)}\n"] }]
|
|
25987
|
+
}, template: "<!-- Grip: con `handle` el arrastre nace aqu\u00ED (cdkDragHandle del cdkDrag padre). -->\r\n@if (handle()) {\r\n <span\r\n class=\"ius-kbcard__grip\"\r\n role=\"button\"\r\n aria-label=\"Arrastrar para reordenar\"\r\n [attr.tabindex]=\"disabled() ? null : 0\"\r\n cdkDragHandle\r\n [cdkDragHandleDisabled]=\"!draggable() || disabled()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">drag_indicator</span>\r\n </span>\r\n}\r\n\r\n@if (hasLeading()) {\r\n <span class=\"ius-kbcard__lead\">\r\n @if (leading(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardLeading]\" />\r\n }\r\n </span>\r\n}\r\n\r\n<span class=\"ius-kbcard__body\">\r\n @if (hasCustomBody()) {\r\n @if (content(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardBody]\" />\r\n }\r\n } @else {\r\n @for (ln of lines(); track ln.kind) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: ln }\" />\r\n }\r\n @if (resolvedTags().length) {\r\n <span class=\"ius-kbcard__tags\">\r\n @for (t of resolvedTags(); track $index) {\r\n @if (t.tpl) {\r\n <ng-container *ngTemplateOutlet=\"t.tpl\" />\r\n } @else {\r\n <ius-tag\r\n [size]=\"t.cfg.size ?? 'small'\"\r\n [label]=\"t.cfg.label\"\r\n [tone]=\"t.cfg.tone ?? 'neutral'\"\r\n [variant]=\"t.cfg.variant\"\r\n [shape]=\"t.cfg.shape ?? 'pill'\"\r\n [role]=\"t.cfg.role ?? 'label'\"\r\n [icon]=\"t.cfg.icon\"\r\n [dot]=\"t.cfg.dot\"\r\n [count]=\"t.cfg.count\"\r\n />\r\n }\r\n }\r\n </span>\r\n }\r\n <!-- pie: responsable (izq) + caption (der) -->\r\n @if (assignee() != null) {\r\n <span class=\"ius-kbcard__footrow\">\r\n @if (assigneeTpl(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl\" />\r\n } @else if (assigneeCfg(); as a) {\r\n <span class=\"ius-kbcard__who\">\r\n <ius-avatar\r\n size=\"xsmall\"\r\n [name]=\"a.name\"\r\n [src]=\"a.src || a.avatar\"\r\n [monogram]=\"a.monogram\"\r\n [icon]=\"a.icon\"\r\n [color]=\"a.color ?? 'auto'\"\r\n />\r\n @if (a.name != null) {\r\n <span class=\"ius-kbcard__who-name\">{{ a.name }}</span>\r\n }\r\n </span>\r\n }\r\n @if (captionLine(); as cap) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\r\n }\r\n </span>\r\n } @else if (captionLine(); as cap) {\r\n <ng-container *ngTemplateOutlet=\"lineTpl; context: { $implicit: cap }\" />\r\n }\r\n }\r\n</span>\r\n\r\n<!-- stacked: flag + \u22EE fijos arriba a la derecha \u00B7 row: en l\u00EDnea a la derecha -->\r\n@if (hasCorner()) {\r\n <span class=\"ius-kbcard__corner\">\r\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\r\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\r\n </span>\r\n}\r\n@if (layout() === 'row') {\r\n <ng-container *ngTemplateOutlet=\"flagTpl\" />\r\n}\r\n@if (hasTrailing()) {\r\n <span class=\"ius-kbcard__trail\">\r\n @if (trailing(); as tpl) {\r\n <ng-container *ngTemplateOutlet=\"tpl; context: templateContext()\" />\r\n } @else {\r\n <ng-content select=\"[iusKanbanCardTrailing]\" />\r\n }\r\n </span>\r\n}\r\n@if (layout() === 'row') {\r\n <ng-container *ngTemplateOutlet=\"overflowTpl\" />\r\n}\r\n\r\n<ng-template #lineTpl let-ln>\r\n <span [class]=\"'ius-kbcard__line ius-kbcard__' + ln.kind\" [attr.data-tone]=\"ln.tone || null\">\r\n @if (ln.icon) {\r\n <span class=\"ius-kbcard__line-prefix\">\r\n <span translate=\"no\" class=\"ius-icon\" aria-hidden=\"true\">{{ ln.icon }}</span>\r\n </span>\r\n }\r\n @if (ln.text != null) {\r\n <span class=\"ius-kbcard__line-text\">\r\n @if (ln.textTpl) {\r\n <ng-container *ngTemplateOutlet=\"ln.textTpl\" />\r\n } @else {\r\n {{ ln.text }}\r\n }\r\n </span>\r\n }\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #flagTpl>\r\n @if (flag(); as f) {\r\n <span class=\"ius-kbcard__flag\">\r\n <ius-insignia\r\n [variant]=\"f.variant || 'dot'\"\r\n [tone]=\"f.tone || 'warning'\"\r\n [size]=\"f.size || 'small'\"\r\n [count]=\"f.count\"\r\n [ring]=\"!!f.ring\"\r\n [label]=\"f.label\"\r\n [ariaLabel]=\"flagAriaLabel(f)\"\r\n />\r\n </span>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #overflowTpl>\r\n @if (hasActions()) {\r\n <span class=\"ius-kbcard__actions\">\r\n <ius-popover\r\n placement=\"bottom-end\"\r\n trigger=\"click\"\r\n padding=\"none\"\r\n [showArrow]=\"false\"\r\n [dismissable]=\"true\"\r\n [open]=\"menuOpen()\"\r\n (openChange)=\"menuOpen.set($event)\"\r\n >\r\n <span\r\n class=\"ius-kbcard__act\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"M\u00E1s acciones\"\r\n (keydown.enter)=\"toggleMenu($event)\"\r\n (keydown.space)=\"toggleMenu($event)\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </span>\r\n <div iusPopoverContent class=\"ius-kbcard__menu\">\r\n @for (row of menuRows(); track row.key) {\r\n @if (row.sep) {\r\n <div class=\"ius-kbcard__menu-sep\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"row.action.icon\"\r\n [label]=\"row.action.label\"\r\n [danger]=\"!!row.action.danger\"\r\n (clicked)=\"onAction(row.action, $event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </ius-popover>\r\n </span>\r\n }\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_kb-accent: var(--ius-info-600);position:relative;box-sizing:border-box;width:100%;-webkit-user-select:none;user-select:none;display:flex;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-md);background:var(--ius-surface-card);border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-md);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-draggable=true]:not([data-handle=true])){cursor:grab}:host([data-draggable=true]:not([data-handle=true]):active){cursor:grabbing}:host([data-clickable=true]){cursor:pointer}:host([data-draggable=true][data-clickable=true]:not([data-handle=true])){cursor:grab}:host(:hover),:host([data-state=hover]){border-color:var(--ius-stroke-strong, var(--ius-neutral-4));box-shadow:var(--ius-elevation-100)}:host(:focus-visible),:host([data-state=focused]){outline:none;box-shadow:var(--ius-focus-ring)}:host([data-selected=true]){border-color:var(--_kb-accent);box-shadow:inset 0 0 0 1px var(--_kb-accent),var(--ius-elevation-100)}:host([data-dragging=true]){opacity:.5;box-shadow:var(--ius-elevation-300)}:host([data-disabled=true]){opacity:.55;pointer-events:none}:host([data-layout=stacked]){flex-direction:column;gap:var(--ius-space-xs)}:host([data-layout=row]){flex-direction:row;align-items:center;padding:var(--ius-space-xs) var(--ius-space-sm)}.ius-kbcard__grip{flex:0 0 auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;color:var(--ius-neutral-5);cursor:grab;touch-action:none;border-radius:var(--ius-radius-sm);transition:color var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__grip:hover{color:var(--ius-text-secondary);background:var(--ius-neutral-2)}.ius-kbcard__grip:active{cursor:grabbing}.ius-kbcard__grip:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcard__grip .ius-icon{font-size:var(--ius-icon-md)}:host([data-layout=stacked]) .ius-kbcard__grip{align-self:flex-start;margin-top:-2px}.ius-kbcard__lead{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__trail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xs);margin-left:auto}:host([data-layout=stacked]) .ius-kbcard__trail{margin-left:0}.ius-kbcard__body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs)}:host([data-corner=true][data-layout=stacked]) .ius-kbcard__body{padding-right:var(--ius-space-lg)}.ius-kbcard__line{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0;--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line-text{flex:1 1 auto;min-width:0}.ius-kbcard__line-prefix{flex:0 0 auto;display:inline-flex;align-items:center;color:var(--_line-c)}.ius-kbcard__line-prefix .ius-icon{font-size:var(--ius-icon-sm)}.ius-kbcard__overline .ius-kbcard__line-text{font-family:var(--ius-font-display);font-size:var(--ius-fs-sm);font-weight:var(--ius-fw-semibold);letter-spacing:.05em;text-transform:uppercase;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__title .ius-kbcard__line-text{font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}:host([data-layout=row]) .ius-kbcard__title .ius-kbcard__line-text{-webkit-line-clamp:1;white-space:nowrap;text-overflow:ellipsis}.ius-kbcard__subtitle .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.35;color:var(--ius-text-tertiary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcard__paragraph{align-items:flex-start}.ius-kbcard__paragraph .ius-kbcard__line-text{font-size:12.5px;line-height:1.5;color:var(--ius-text-secondary);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:pretty}.ius-kbcard__paragraph .ius-kbcard__line-prefix{margin-top:1px}.ius-kbcard__caption .ius-kbcard__line-text{font-size:var(--ius-fs-sm);line-height:1.3;font-weight:var(--ius-fw-medium, 500);color:var(--ius-text-tertiary);font-variant-numeric:tabular-nums}.ius-kbcard__line[data-tone] .ius-kbcard__line-text{color:var(--_line-c)}.ius-kbcard__line[data-tone=muted]{--_line-c: var(--ius-neutral-5)}.ius-kbcard__line[data-tone=neutral]{--_line-c: var(--ius-text-tertiary)}.ius-kbcard__line[data-tone=info]{--_line-c: var(--ius-info-600)}.ius-kbcard__line[data-tone=success]{--_line-c: var(--ius-success-600)}.ius-kbcard__line[data-tone=warning]{--_line-c: var(--ius-warning-700)}.ius-kbcard__line[data-tone=danger]{--_line-c: var(--ius-danger-600)}.ius-kbcard__line[data-tone=primary]{--_line-c: var(--ius-primary-700)}.ius-kbcard__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ius-space-xs)}.ius-kbcard__footrow{display:flex;align-items:center;gap:var(--ius-space-xs);min-width:0}.ius-kbcard__footrow .ius-kbcard__caption{margin-left:auto;flex:0 0 auto}.ius-kbcard__who{display:inline-flex;align-items:center;gap:var(--ius-space-xs);min-width:0;font-size:var(--ius-fs-sm);color:var(--ius-text-secondary)}.ius-kbcard__who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.ius-kbcard__flag{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__corner{position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcard__corner .ius-kbcard__flag{margin-right:var(--ius-space-xxs)}.ius-kbcard__actions{flex:0 0 auto;display:inline-flex;align-items:center}.ius-kbcard__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);opacity:0;transition:opacity var(--ius-duration-fast) var(--ius-ease-standard),background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcard__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcard__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcard__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);opacity:1}:host(:hover) .ius-kbcard__act,:host(:focus-within) .ius-kbcard__act,:host([data-menu-open=true]) .ius-kbcard__act{opacity:1}.ius-kbcard__menu{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:190px;padding:var(--ius-space-xxs)}.ius-kbcard__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-accent=primary]){--_kb-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kb-accent: var(--ius-info-600)}:host([data-accent=success]){--_kb-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kb-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kb-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kb-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kb-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kb-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kb-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kb-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kb-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kb-accent: var(--ius-aguacate-600)}\n"] }]
|
|
25987
25988
|
}], ctorParameters: () => [], propDecorators: { overline: [{ type: i0.Input, args: [{ isSignal: true, alias: "overline", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], paragraph: [{ type: i0.Input, args: [{ isSignal: true, alias: "paragraph", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], tags: [{ type: i0.Input, args: [{ isSignal: true, alias: "tags", required: false }] }], assignee: [{ type: i0.Input, args: [{ isSignal: true, alias: "assignee", required: false }] }], flag: [{ type: i0.Input, args: [{ isSignal: true, alias: "flag", required: false }] }], leading: [{ type: i0.Input, args: [{ isSignal: true, alias: "leading", required: false }] }], trailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "trailing", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], templateContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "templateContext", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], handle: [{ type: i0.Input, args: [{ isSignal: true, alias: "handle", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], dragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragging", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], itemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemId", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], clickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickable", required: false }] }], clicked: [{
|
|
25988
25989
|
type: Output
|
|
25989
25990
|
}], leadingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusKanbanCardLeadingDirective), { isSignal: true }] }], trailingRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusKanbanCardTrailingDirective), { isSignal: true }] }], bodyRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => IusKanbanCardBodyDirective), { isSignal: true }] }] } });
|
|
@@ -26101,7 +26102,7 @@ class KanbanColumnComponent {
|
|
|
26101
26102
|
action.onClick?.(event);
|
|
26102
26103
|
}
|
|
26103
26104
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26104
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanColumnComponent, isStandalone: true, selector: "ius-kanban-column", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, over: { classPropertyName: "over", publicName: "over", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addItem: "addItem", collapsedChange: "collapsedChange" }, host: { properties: { "attr.data-accent": "accent()", "attr.data-bare": "bare() && !isCollapsed() ? 'true' : null", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.data-draggable": "draggable() ? 'true' : null", "attr.data-dragging": "dragging() ? 'true' : null", "attr.data-over": "over() ? 'true' : null", "style.width": "hostWidth()", "attr.title": "null" }, classAttribute: "ius-kbcol" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isCollapsed()) {\n <!-- Plegada: franja vertical. Sigue siendo destino de drop (contenedor del cdkDropList)\n y asa del reorden de columnas. -->\n <div class=\"ius-kbcol__strip\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: false }\" />\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\n @if (count() != null) {\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\n }\n <span class=\"ius-kbcol__vtitle\" [attr.title]=\"title() || null\">{{ title() }}</span>\n </div>\n} @else {\n @if (!bare()) {\n <div class=\"ius-kbcol__head\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\n <span class=\"ius-kbcol__title\">{{ title() }}</span>\n @if (count() != null) {\n <span class=\"ius-kbcol__count\">\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\n </span>\n }\n <span class=\"ius-kbcol__spacer\"></span>\n <span class=\"ius-kbcol__head-actions\">\n @if (hasActions()) {\n <ius-popover\n placement=\"bottom-end\"\n trigger=\"click\"\n padding=\"none\"\n [showArrow]=\"false\"\n [dismissable]=\"true\"\n [open]=\"menuOpen()\"\n (openChange)=\"menuOpen.set($event)\"\n >\n <span\n class=\"ius-kbcol__act\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Opciones de columna\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\n </span>\n <div iusPopoverContent class=\"ius-kbcol__menu-list\">\n @for (row of menuRows(); track row.key) {\n @if (row.sep) {\n <div class=\"ius-kbcol__menu-sep\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n [icon]=\"row.action.icon\"\n [label]=\"row.action.label\"\n [danger]=\"!!row.action.danger\"\n (clicked)=\"onAction(row.action, $event)\"\n />\n }\n }\n </div>\n </ius-popover>\n }\n @if (collapsible()) {\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: true }\" />\n }\n </span>\n </div>\n }\n\n <div #body class=\"ius-kbcol__body ius-scroll ius-scroll--sm\">\n @if (empty()) {\n <div class=\"ius-kbcol__empty\">\n <ius-empty-state\n size=\"compact\"\n variant=\"no-data\"\n [tone]=\"emptyTone()\"\n [icon]=\"emptyIcon()\"\n [title]=\"emptyLabel()\"\n />\n </div>\n } @else {\n <ng-content />\n }\n </div>\n\n @if (showAdd) {\n <div class=\"ius-kbcol__foot\">\n <ius-text-button\n class=\"ius-kbcol__add\"\n size=\"small\"\n prefixIcon=\"add\"\n [label]=\"addLabel()\"\n (clicked)=\"addItem.emit($event)\"\n />\n </div>\n }\n}\n\n<!-- `next` = estado al que lleva el bot\u00F3n (true = plegar). El mousedown no\n arranca el arrastre de la cabecera. -->\n<ng-template #collapseBtn let-next>\n <span class=\"ius-kbcol__collapse\" (mousedown)=\"$event.stopPropagation()\">\n <ius-icon-button\n [icon]=\"next ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"next ? 'Plegar columna' : 'Desplegar columna'\"\n [ariaLabel]=\"(next ? 'Plegar ' : 'Desplegar ') + (title() || 'columna')\"\n [tooltipPlacement]=\"next ? 'top' : 'right'\"\n [ariaExpanded]=\"!next\"\n (clicked)=\"setCollapsed(next, $event)\"\n />\n </span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_kbc-accent: var(--ius-info-600);box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;user-select:none;-webkit-user-select:none;background:var(--ius-neutral-1, var(--ius-surface-sunken, #f4f6f9));border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-bare=true]){background:transparent;border-color:transparent;border-radius:0}:host([data-over=true]){border-color:var(--_kbc-accent);box-shadow:inset 0 0 0 1px var(--_kbc-accent)}:host([data-dragging=true]){opacity:.5}.ius-kbcol__head{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-sm) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__head{border-bottom:0}:host([data-draggable=true]) .ius-kbcol__head{cursor:grab}:host([data-draggable=true]) .ius-kbcol__head:active{cursor:grabbing}.ius-kbcol__head:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-md)}.ius-kbcol__title{flex:0 1 auto;min-width:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcol__count{flex:0 0 auto}.ius-kbcol__spacer{flex:1 1 auto}.ius-kbcol__head-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcol__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcol__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcol__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcol__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcol__collapse{display:inline-flex}.ius-kbcol__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);overflow-y:auto;overscroll-behavior:contain}:host([data-bare=true]) .ius-kbcol__body{padding:var(--ius-space-xxs) 0}:host([data-bare=true]) .ius-kbcol__body{overflow:visible;overscroll-behavior:auto}.ius-kbcol__empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:88px;border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-md)}:host([data-over=true]) .ius-kbcol__empty{border-color:var(--_kbc-accent)}.ius-kbcol__foot{flex:0 0 auto;display:flex;justify-content:center;padding:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__foot{border-top:0;padding:var(--ius-space-xs) 0 0}.ius-kbcol__add{align-self:center}.ius-kbcol__menu-list{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;padding:var(--ius-space-xxs)}.ius-kbcol__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-collapsed=true]){cursor:default}.ius-kbcol__strip{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}:host([data-draggable=true]) .ius-kbcol__strip{cursor:grab}.ius-kbcol__vtitle{flex:0 1 auto;min-height:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-accent=primary]){--_kbc-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kbc-accent: var(--ius-info-600)}:host([data-accent=success]){--_kbc-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kbc-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kbc-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kbc-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kbc-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kbc-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kbc-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kbc-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kbc-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kbc-accent: var(--ius-aguacate-600)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanColumnComponent, isStandalone: true, selector: "ius-kanban-column", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, tone: { classPropertyName: "tone", publicName: "tone", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, addLabel: { classPropertyName: "addLabel", publicName: "addLabel", isSignal: true, isRequired: false, transformFunction: null }, addable: { classPropertyName: "addable", publicName: "addable", isSignal: true, isRequired: false, transformFunction: null }, empty: { classPropertyName: "empty", publicName: "empty", isSignal: true, isRequired: false, transformFunction: null }, emptyLabel: { classPropertyName: "emptyLabel", publicName: "emptyLabel", isSignal: true, isRequired: false, transformFunction: null }, emptyIcon: { classPropertyName: "emptyIcon", publicName: "emptyIcon", isSignal: true, isRequired: false, transformFunction: null }, bare: { classPropertyName: "bare", publicName: "bare", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", 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 }, defaultCollapsed: { classPropertyName: "defaultCollapsed", publicName: "defaultCollapsed", isSignal: true, isRequired: false, transformFunction: null }, draggable: { classPropertyName: "draggable", publicName: "draggable", isSignal: true, isRequired: false, transformFunction: null }, dragging: { classPropertyName: "dragging", publicName: "dragging", isSignal: true, isRequired: false, transformFunction: null }, over: { classPropertyName: "over", publicName: "over", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addItem: "addItem", collapsedChange: "collapsedChange" }, host: { properties: { "attr.data-accent": "accent()", "attr.data-bare": "bare() && !isCollapsed() ? 'true' : null", "attr.data-collapsed": "isCollapsed() ? 'true' : null", "attr.data-draggable": "draggable() ? 'true' : null", "attr.data-dragging": "dragging() ? 'true' : null", "attr.data-over": "over() ? 'true' : null", "style.width": "hostWidth()", "attr.title": "null" }, classAttribute: "ius-kbcol" }, viewQueries: [{ propertyName: "bodyRef", first: true, predicate: ["body"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isCollapsed()) {\r\n <!-- Plegada: franja vertical. Sigue siendo destino de drop (contenedor del cdkDropList)\r\n y asa del reorden de columnas. -->\r\n <div class=\"ius-kbcol__strip\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\r\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: false }\" />\r\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\r\n @if (count() != null) {\r\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\r\n }\r\n <span class=\"ius-kbcol__vtitle\" [attr.title]=\"title() || null\">{{ title() }}</span>\r\n </div>\r\n} @else {\r\n @if (!bare()) {\r\n <div class=\"ius-kbcol__head\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\r\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\r\n <span class=\"ius-kbcol__title\">{{ title() }}</span>\r\n @if (count() != null) {\r\n <span class=\"ius-kbcol__count\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\r\n </span>\r\n }\r\n <span class=\"ius-kbcol__spacer\"></span>\r\n <span class=\"ius-kbcol__head-actions\">\r\n @if (hasActions()) {\r\n <ius-popover\r\n placement=\"bottom-end\"\r\n trigger=\"click\"\r\n padding=\"none\"\r\n [showArrow]=\"false\"\r\n [dismissable]=\"true\"\r\n [open]=\"menuOpen()\"\r\n (openChange)=\"menuOpen.set($event)\"\r\n >\r\n <span\r\n class=\"ius-kbcol__act\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Opciones de columna\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </span>\r\n <div iusPopoverContent class=\"ius-kbcol__menu-list\">\r\n @for (row of menuRows(); track row.key) {\r\n @if (row.sep) {\r\n <div class=\"ius-kbcol__menu-sep\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"row.action.icon\"\r\n [label]=\"row.action.label\"\r\n [danger]=\"!!row.action.danger\"\r\n (clicked)=\"onAction(row.action, $event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n @if (collapsible()) {\r\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: true }\" />\r\n }\r\n </span>\r\n </div>\r\n }\r\n\r\n <div #body class=\"ius-kbcol__body ius-scroll ius-scroll--sm\">\r\n @if (empty()) {\r\n <div class=\"ius-kbcol__empty\">\r\n <ius-empty-state\r\n size=\"compact\"\r\n variant=\"no-data\"\r\n [tone]=\"emptyTone()\"\r\n [icon]=\"emptyIcon()\"\r\n [title]=\"emptyLabel()\"\r\n />\r\n </div>\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n\r\n @if (showAdd) {\r\n <div class=\"ius-kbcol__foot\">\r\n <ius-text-button\r\n class=\"ius-kbcol__add\"\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n [label]=\"addLabel()\"\r\n (clicked)=\"addItem.emit($event)\"\r\n />\r\n </div>\r\n }\r\n}\r\n\r\n<!-- `next` = estado al que lleva el bot\u00F3n (true = plegar). El mousedown no\r\n arranca el arrastre de la cabecera. -->\r\n<ng-template #collapseBtn let-next>\r\n <span class=\"ius-kbcol__collapse\" (mousedown)=\"$event.stopPropagation()\">\r\n <ius-icon-button\r\n [icon]=\"next ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"squared\"\r\n [tooltip]=\"next ? 'Plegar columna' : 'Desplegar columna'\"\r\n [ariaLabel]=\"(next ? 'Plegar ' : 'Desplegar ') + (title() || 'columna')\"\r\n [tooltipPlacement]=\"next ? 'top' : 'right'\"\r\n [ariaExpanded]=\"!next\"\r\n (clicked)=\"setCollapsed(next, $event)\"\r\n />\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_kbc-accent: var(--ius-info-600);box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;user-select:none;-webkit-user-select:none;background:var(--ius-neutral-1, var(--ius-surface-sunken, #f4f6f9));border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-bare=true]){background:transparent;border-color:transparent;border-radius:0}:host([data-over=true]){border-color:var(--_kbc-accent);box-shadow:inset 0 0 0 1px var(--_kbc-accent)}:host([data-dragging=true]){opacity:.5}.ius-kbcol__head{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-sm) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__head{border-bottom:0}:host([data-draggable=true]) .ius-kbcol__head{cursor:grab}:host([data-draggable=true]) .ius-kbcol__head:active{cursor:grabbing}.ius-kbcol__head:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-md)}.ius-kbcol__title{flex:0 1 auto;min-width:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcol__count{flex:0 0 auto}.ius-kbcol__spacer{flex:1 1 auto}.ius-kbcol__head-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcol__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcol__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcol__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcol__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcol__collapse{display:inline-flex}.ius-kbcol__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);overflow-y:auto;overscroll-behavior:contain}:host([data-bare=true]) .ius-kbcol__body{padding:var(--ius-space-xxs) 0}:host([data-bare=true]) .ius-kbcol__body{overflow:visible;overscroll-behavior:auto}.ius-kbcol__empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:88px;border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-md)}:host([data-over=true]) .ius-kbcol__empty{border-color:var(--_kbc-accent)}.ius-kbcol__foot{flex:0 0 auto;display:flex;justify-content:center;padding:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__foot{border-top:0;padding:var(--ius-space-xs) 0 0}.ius-kbcol__add{align-self:center}.ius-kbcol__menu-list{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;padding:var(--ius-space-xxs)}.ius-kbcol__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-collapsed=true]){cursor:default}.ius-kbcol__strip{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}:host([data-draggable=true]) .ius-kbcol__strip{cursor:grab}.ius-kbcol__vtitle{flex:0 1 auto;min-height:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-accent=primary]){--_kbc-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kbc-accent: var(--ius-info-600)}:host([data-accent=success]){--_kbc-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kbc-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kbc-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kbc-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kbc-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kbc-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kbc-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kbc-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kbc-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kbc-accent: var(--ius-aguacate-600)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: EmptyStateComponent, selector: "ius-empty-state", inputs: ["variant", "size", "tone", "icon", "illustration", "illustrationTemplate", "title", "description", "primaryAction", "secondaryAction", "actionsTemplate", "role"], outputs: ["primaryClick", "secondaryClick"] }, { kind: "component", type: IconButtonComponent, selector: "ius-icon-button", inputs: ["icon", "variant", "size", "shape", "disabled", "type", "ariaLabel", "tooltip", "ariaPressed", "ariaExpanded", "ariaControls", "tooltipPlacement"], outputs: ["clicked"] }, { kind: "component", type: InsigniaComponent, selector: "ius-insignia", inputs: ["variant", "tone", "size", "label", "count", "max", "ring", "ariaLabel"] }, { kind: "component", type: MenuItemComponent, selector: "ius-menu-item", inputs: ["icon", "label", "description", "badge", "variant", "size", "selected", "disabled", "danger", "state", "href", "ariaLabel", "itemRole"], outputs: ["clicked"] }, { kind: "component", type: PopoverComponent, selector: "ius-popover", inputs: ["title", "content", "placement", "trigger", "offset", "open", "defaultOpen", "showArrow", "disabled", "anchorRect", "padding", "dismissable", "panelClass"], outputs: ["openChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26105
26106
|
}
|
|
26106
26107
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanColumnComponent, decorators: [{
|
|
26107
26108
|
type: Component,
|
|
@@ -26125,7 +26126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
26125
26126
|
'[style.width]': 'hostWidth()',
|
|
26126
26127
|
// `title` es input: sin esto el atributo estático quedaría como tooltip nativo.
|
|
26127
26128
|
'[attr.title]': 'null',
|
|
26128
|
-
}, template: "@if (isCollapsed()) {\n <!-- Plegada: franja vertical. Sigue siendo destino de drop (contenedor del cdkDropList)\n y asa del reorden de columnas. -->\n <div class=\"ius-kbcol__strip\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: false }\" />\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\n @if (count() != null) {\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\n }\n <span class=\"ius-kbcol__vtitle\" [attr.title]=\"title() || null\">{{ title() }}</span>\n </div>\n} @else {\n @if (!bare()) {\n <div class=\"ius-kbcol__head\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\n <span class=\"ius-kbcol__title\">{{ title() }}</span>\n @if (count() != null) {\n <span class=\"ius-kbcol__count\">\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\n </span>\n }\n <span class=\"ius-kbcol__spacer\"></span>\n <span class=\"ius-kbcol__head-actions\">\n @if (hasActions()) {\n <ius-popover\n placement=\"bottom-end\"\n trigger=\"click\"\n padding=\"none\"\n [showArrow]=\"false\"\n [dismissable]=\"true\"\n [open]=\"menuOpen()\"\n (openChange)=\"menuOpen.set($event)\"\n >\n <span\n class=\"ius-kbcol__act\"\n role=\"button\"\n tabindex=\"0\"\n aria-label=\"Opciones de columna\"\n (mousedown)=\"$event.stopPropagation()\"\n >\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\n </span>\n <div iusPopoverContent class=\"ius-kbcol__menu-list\">\n @for (row of menuRows(); track row.key) {\n @if (row.sep) {\n <div class=\"ius-kbcol__menu-sep\"></div>\n } @else {\n <ius-menu-item\n variant=\"menu\"\n size=\"small\"\n [icon]=\"row.action.icon\"\n [label]=\"row.action.label\"\n [danger]=\"!!row.action.danger\"\n (clicked)=\"onAction(row.action, $event)\"\n />\n }\n }\n </div>\n </ius-popover>\n }\n @if (collapsible()) {\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: true }\" />\n }\n </span>\n </div>\n }\n\n <div #body class=\"ius-kbcol__body ius-scroll ius-scroll--sm\">\n @if (empty()) {\n <div class=\"ius-kbcol__empty\">\n <ius-empty-state\n size=\"compact\"\n variant=\"no-data\"\n [tone]=\"emptyTone()\"\n [icon]=\"emptyIcon()\"\n [title]=\"emptyLabel()\"\n />\n </div>\n } @else {\n <ng-content />\n }\n </div>\n\n @if (showAdd) {\n <div class=\"ius-kbcol__foot\">\n <ius-text-button\n class=\"ius-kbcol__add\"\n size=\"small\"\n prefixIcon=\"add\"\n [label]=\"addLabel()\"\n (clicked)=\"addItem.emit($event)\"\n />\n </div>\n }\n}\n\n<!-- `next` = estado al que lleva el bot\u00F3n (true = plegar). El mousedown no\n arranca el arrastre de la cabecera. -->\n<ng-template #collapseBtn let-next>\n <span class=\"ius-kbcol__collapse\" (mousedown)=\"$event.stopPropagation()\">\n <ius-icon-button\n [icon]=\"next ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'\"\n variant=\"tertiary\"\n size=\"small\"\n shape=\"squared\"\n [tooltip]=\"next ? 'Plegar columna' : 'Desplegar columna'\"\n [ariaLabel]=\"(next ? 'Plegar ' : 'Desplegar ') + (title() || 'columna')\"\n [tooltipPlacement]=\"next ? 'top' : 'right'\"\n [ariaExpanded]=\"!next\"\n (clicked)=\"setCollapsed(next, $event)\"\n />\n </span>\n</ng-template>\n", styles: ["@charset \"UTF-8\";:host{--_kbc-accent: var(--ius-info-600);box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;user-select:none;-webkit-user-select:none;background:var(--ius-neutral-1, var(--ius-surface-sunken, #f4f6f9));border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-bare=true]){background:transparent;border-color:transparent;border-radius:0}:host([data-over=true]){border-color:var(--_kbc-accent);box-shadow:inset 0 0 0 1px var(--_kbc-accent)}:host([data-dragging=true]){opacity:.5}.ius-kbcol__head{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-sm) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__head{border-bottom:0}:host([data-draggable=true]) .ius-kbcol__head{cursor:grab}:host([data-draggable=true]) .ius-kbcol__head:active{cursor:grabbing}.ius-kbcol__head:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-md)}.ius-kbcol__title{flex:0 1 auto;min-width:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcol__count{flex:0 0 auto}.ius-kbcol__spacer{flex:1 1 auto}.ius-kbcol__head-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcol__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcol__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcol__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcol__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcol__collapse{display:inline-flex}.ius-kbcol__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);overflow-y:auto;overscroll-behavior:contain}:host([data-bare=true]) .ius-kbcol__body{padding:var(--ius-space-xxs) 0}:host([data-bare=true]) .ius-kbcol__body{overflow:visible;overscroll-behavior:auto}.ius-kbcol__empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:88px;border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-md)}:host([data-over=true]) .ius-kbcol__empty{border-color:var(--_kbc-accent)}.ius-kbcol__foot{flex:0 0 auto;display:flex;justify-content:center;padding:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__foot{border-top:0;padding:var(--ius-space-xs) 0 0}.ius-kbcol__add{align-self:center}.ius-kbcol__menu-list{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;padding:var(--ius-space-xxs)}.ius-kbcol__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-collapsed=true]){cursor:default}.ius-kbcol__strip{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}:host([data-draggable=true]) .ius-kbcol__strip{cursor:grab}.ius-kbcol__vtitle{flex:0 1 auto;min-height:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-accent=primary]){--_kbc-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kbc-accent: var(--ius-info-600)}:host([data-accent=success]){--_kbc-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kbc-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kbc-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kbc-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kbc-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kbc-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kbc-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kbc-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kbc-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kbc-accent: var(--ius-aguacate-600)}\n"] }]
|
|
26129
|
+
}, template: "@if (isCollapsed()) {\r\n <!-- Plegada: franja vertical. Sigue siendo destino de drop (contenedor del cdkDropList)\r\n y asa del reorden de columnas. -->\r\n <div class=\"ius-kbcol__strip\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\r\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: false }\" />\r\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\r\n @if (count() != null) {\r\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\r\n }\r\n <span class=\"ius-kbcol__vtitle\" [attr.title]=\"title() || null\">{{ title() }}</span>\r\n </div>\r\n} @else {\r\n @if (!bare()) {\r\n <div class=\"ius-kbcol__head\" cdkDragHandle [cdkDragHandleDisabled]=\"!draggable()\">\r\n <ius-insignia variant=\"dot\" [tone]=\"tone()\" />\r\n <span class=\"ius-kbcol__title\">{{ title() }}</span>\r\n @if (count() != null) {\r\n <span class=\"ius-kbcol__count\">\r\n <ius-insignia variant=\"count-soft\" [tone]=\"countTone()\" [count]=\"count()\" />\r\n </span>\r\n }\r\n <span class=\"ius-kbcol__spacer\"></span>\r\n <span class=\"ius-kbcol__head-actions\">\r\n @if (hasActions()) {\r\n <ius-popover\r\n placement=\"bottom-end\"\r\n trigger=\"click\"\r\n padding=\"none\"\r\n [showArrow]=\"false\"\r\n [dismissable]=\"true\"\r\n [open]=\"menuOpen()\"\r\n (openChange)=\"menuOpen.set($event)\"\r\n >\r\n <span\r\n class=\"ius-kbcol__act\"\r\n role=\"button\"\r\n tabindex=\"0\"\r\n aria-label=\"Opciones de columna\"\r\n (mousedown)=\"$event.stopPropagation()\"\r\n >\r\n <span translate=\"no\" class=\"ius-icon\">more_vert</span>\r\n </span>\r\n <div iusPopoverContent class=\"ius-kbcol__menu-list\">\r\n @for (row of menuRows(); track row.key) {\r\n @if (row.sep) {\r\n <div class=\"ius-kbcol__menu-sep\"></div>\r\n } @else {\r\n <ius-menu-item\r\n variant=\"menu\"\r\n size=\"small\"\r\n [icon]=\"row.action.icon\"\r\n [label]=\"row.action.label\"\r\n [danger]=\"!!row.action.danger\"\r\n (clicked)=\"onAction(row.action, $event)\"\r\n />\r\n }\r\n }\r\n </div>\r\n </ius-popover>\r\n }\r\n @if (collapsible()) {\r\n <ng-container *ngTemplateOutlet=\"collapseBtn; context: { $implicit: true }\" />\r\n }\r\n </span>\r\n </div>\r\n }\r\n\r\n <div #body class=\"ius-kbcol__body ius-scroll ius-scroll--sm\">\r\n @if (empty()) {\r\n <div class=\"ius-kbcol__empty\">\r\n <ius-empty-state\r\n size=\"compact\"\r\n variant=\"no-data\"\r\n [tone]=\"emptyTone()\"\r\n [icon]=\"emptyIcon()\"\r\n [title]=\"emptyLabel()\"\r\n />\r\n </div>\r\n } @else {\r\n <ng-content />\r\n }\r\n </div>\r\n\r\n @if (showAdd) {\r\n <div class=\"ius-kbcol__foot\">\r\n <ius-text-button\r\n class=\"ius-kbcol__add\"\r\n size=\"small\"\r\n prefixIcon=\"add\"\r\n [label]=\"addLabel()\"\r\n (clicked)=\"addItem.emit($event)\"\r\n />\r\n </div>\r\n }\r\n}\r\n\r\n<!-- `next` = estado al que lleva el bot\u00F3n (true = plegar). El mousedown no\r\n arranca el arrastre de la cabecera. -->\r\n<ng-template #collapseBtn let-next>\r\n <span class=\"ius-kbcol__collapse\" (mousedown)=\"$event.stopPropagation()\">\r\n <ius-icon-button\r\n [icon]=\"next ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'\"\r\n variant=\"tertiary\"\r\n size=\"small\"\r\n shape=\"squared\"\r\n [tooltip]=\"next ? 'Plegar columna' : 'Desplegar columna'\"\r\n [ariaLabel]=\"(next ? 'Plegar ' : 'Desplegar ') + (title() || 'columna')\"\r\n [tooltipPlacement]=\"next ? 'top' : 'right'\"\r\n [ariaExpanded]=\"!next\"\r\n (clicked)=\"setCollapsed(next, $event)\"\r\n />\r\n </span>\r\n</ng-template>\r\n", styles: ["@charset \"UTF-8\";:host{--_kbc-accent: var(--ius-info-600);box-sizing:border-box;flex:0 0 auto;display:flex;flex-direction:column;min-height:0;user-select:none;-webkit-user-select:none;background:var(--ius-neutral-1, var(--ius-surface-sunken, #f4f6f9));border:1px solid var(--ius-stroke);border-radius:var(--ius-radius-lg);font-family:var(--ius-font-body);transition:border-color var(--ius-duration-fast) var(--ius-ease-standard),box-shadow var(--ius-duration-fast) var(--ius-ease-standard),opacity var(--ius-duration-fast) var(--ius-ease-standard)}:host([data-bare=true]){background:transparent;border-color:transparent;border-radius:0}:host([data-over=true]){border-color:var(--_kbc-accent);box-shadow:inset 0 0 0 1px var(--_kbc-accent)}:host([data-dragging=true]){opacity:.5}.ius-kbcol__head{flex:0 0 auto;display:flex;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-sm) var(--ius-space-sm) var(--ius-space-xs);border-bottom:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__head{border-bottom:0}:host([data-draggable=true]) .ius-kbcol__head{cursor:grab}:host([data-draggable=true]) .ius-kbcol__head:active{cursor:grabbing}.ius-kbcol__head:focus-visible{outline:none;box-shadow:var(--ius-focus-ring);border-radius:var(--ius-radius-md)}.ius-kbcol__title{flex:0 1 auto;min-width:0;font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ius-kbcol__count{flex:0 0 auto}.ius-kbcol__spacer{flex:1 1 auto}.ius-kbcol__head-actions{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--ius-space-xxs)}.ius-kbcol__act{appearance:none;border:0;background:transparent;cursor:pointer;width:26px;height:26px;border-radius:var(--ius-radius-sm);display:inline-flex;align-items:center;justify-content:center;color:var(--ius-text-tertiary);transition:background var(--ius-duration-fast) var(--ius-ease-standard),color var(--ius-duration-fast) var(--ius-ease-standard)}.ius-kbcol__act .ius-icon{font-size:var(--ius-icon-md)}.ius-kbcol__act:hover{background:var(--ius-neutral-3);color:var(--ius-text-primary)}.ius-kbcol__act:focus-visible{outline:none;box-shadow:var(--ius-focus-ring)}.ius-kbcol__collapse{display:inline-flex}.ius-kbcol__body{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--ius-space-xxs);padding:var(--ius-space-xxs) var(--ius-space-xs) var(--ius-space-xs);overflow-y:auto;overscroll-behavior:contain}:host([data-bare=true]) .ius-kbcol__body{padding:var(--ius-space-xxs) 0}:host([data-bare=true]) .ius-kbcol__body{overflow:visible;overscroll-behavior:auto}.ius-kbcol__empty{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:88px;border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-md)}:host([data-over=true]) .ius-kbcol__empty{border-color:var(--_kbc-accent)}.ius-kbcol__foot{flex:0 0 auto;display:flex;justify-content:center;padding:var(--ius-space-xs);border-top:1px solid var(--ius-stroke)}:host([data-bare=true]) .ius-kbcol__foot{border-top:0;padding:var(--ius-space-xs) 0 0}.ius-kbcol__add{align-self:center}.ius-kbcol__menu-list{display:flex;flex-direction:column;gap:var(--ius-space-xxs);min-width:180px;padding:var(--ius-space-xxs)}.ius-kbcol__menu-sep{height:1px;background:var(--ius-stroke);margin:var(--ius-space-xxs) 0}:host([data-collapsed=true]){cursor:default}.ius-kbcol__strip{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;gap:var(--ius-space-xs);padding:var(--ius-space-xs) 0}:host([data-draggable=true]) .ius-kbcol__strip{cursor:grab}.ius-kbcol__vtitle{flex:0 1 auto;min-height:0;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--ius-font-display);font-weight:var(--ius-fw-semibold);font-size:var(--ius-fs-base);line-height:1.3;color:var(--ius-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([data-accent=primary]){--_kbc-accent: var(--ius-primary-700)}:host([data-accent=info]){--_kbc-accent: var(--ius-info-600)}:host([data-accent=success]){--_kbc-accent: var(--ius-success-600)}:host([data-accent=warning]){--_kbc-accent: var(--ius-warning-600)}:host([data-accent=danger]){--_kbc-accent: var(--ius-danger-600)}:host([data-accent=neutral]){--_kbc-accent: var(--ius-neutral-9)}:host([data-accent=durazno]){--_kbc-accent: var(--ius-durazno-600)}:host([data-accent=banano]){--_kbc-accent: var(--ius-banano-700)}:host([data-accent=sandia]){--_kbc-accent: var(--ius-sandia-600)}:host([data-accent=arandano]){--_kbc-accent: var(--ius-arandano-600)}:host([data-accent=uva]){--_kbc-accent: var(--ius-uva-600)}:host([data-accent=aguacate]){--_kbc-accent: var(--ius-aguacate-600)}\n"] }]
|
|
26129
26130
|
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], tone: [{ type: i0.Input, args: [{ isSignal: true, alias: "tone", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], addLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addLabel", required: false }] }], addable: [{ type: i0.Input, args: [{ isSignal: true, alias: "addable", required: false }] }], empty: [{ type: i0.Input, args: [{ isSignal: true, alias: "empty", required: false }] }], emptyLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyLabel", required: false }] }], emptyIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyIcon", required: false }] }], bare: [{ type: i0.Input, args: [{ isSignal: true, alias: "bare", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], collapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsible", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], defaultCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultCollapsed", required: false }] }], draggable: [{ type: i0.Input, args: [{ isSignal: true, alias: "draggable", required: false }] }], dragging: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragging", required: false }] }], over: [{ type: i0.Input, args: [{ isSignal: true, alias: "over", required: false }] }], addItem: [{
|
|
26130
26131
|
type: Output
|
|
26131
26132
|
}], collapsedChange: [{
|
|
@@ -26491,7 +26492,7 @@ class KanbanBoardComponent {
|
|
|
26491
26492
|
this.columnCollapse.emit({ columnId: col.id, collapsed });
|
|
26492
26493
|
}
|
|
26493
26494
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanBoardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26494
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanBoardComponent, isStandalone: true, selector: "ius-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, cardLayout: { classPropertyName: "cardLayout", publicName: "cardLayout", isSignal: true, isRequired: false, transformFunction: null }, cardHandle: { classPropertyName: "cardHandle", publicName: "cardHandle", isSignal: true, isRequired: false, transformFunction: null }, renderCard: { classPropertyName: "renderCard", publicName: "renderCard", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, bulkMove: { classPropertyName: "bulkMove", publicName: "bulkMove", isSignal: true, isRequired: false, transformFunction: null }, addColumnLabel: { classPropertyName: "addColumnLabel", publicName: "addColumnLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemMove: "itemMove", itemsMove: "itemsMove", itemClick: "itemClick", selectionChange: "selectionChange", columnCollapse: "columnCollapse", columnMove: "columnMove", addItem: "addItem", addColumn: "addColumn" }, host: { properties: { "attr.data-variant": "variant()" } }, ngImport: i0, template: "<!-- Ra\u00EDz = lista horizontal de columnas (cdkDropList) y grupo que conecta las\n listas de tarjetas (cdkDropListGroup no incluye a la lista de su mismo nodo). -->\n<div\n class=\"ius-kbboard ius-scroll\"\n [attr.data-variant]=\"variant()\"\n cdkDropListGroup\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"isList() || !reorderColumns()\"\n (cdkDropListDropped)=\"onColumnDrop($event)\"\n>\n @for (col of cols(); track col.id) {\n @let collapsed = isColCollapsed(col);\n <ius-kanban-column\n [attr.data-col-id]=\"col.id\"\n cdkDrag\n [cdkDragData]=\"col.id\"\n [cdkDragDisabled]=\"isList() || !reorderColumns()\"\n cdkDropList\n iusKanbanScrollParents\n [cdkDropListData]=\"col.id\"\n cdkDropListElementContainer=\".ius-kbcol__body, .ius-kbcol__strip\"\n [cdkDropListSortingDisabled]=\"collapsed\"\n (cdkDropListDropped)=\"onItemDrop($event)\"\n (cdkDropListEntered)=\"overCol.set(col.id)\"\n (cdkDropListExited)=\"onListExited(col.id)\"\n [title]=\"col.title\"\n [tone]=\"col.tone || 'neutral'\"\n [accent]=\"col.accent || accent()\"\n [count]=\"countOf(col)\"\n [actions]=\"columnActions().get(col.id)\"\n [bare]=\"!!col.bare || isList()\"\n [width]=\"col.width || columnWidth()\"\n [collapsible]=\"!!col.collapsible && !isList()\"\n [collapsed]=\"!!col.collapsible && !isList() ? collapsed : undefined\"\n (collapsedChange)=\"toggleCollapse(col, $event)\"\n [draggable]=\"reorderColumns() && !isList()\"\n [over]=\"overCol() === col.id\"\n [addable]=\"addItem.observed\"\n (addItem)=\"addItem.emit(isList() ? undefined : col.id)\"\n [addLabel]=\"col.addLabel\"\n [empty]=\"isEmpty(col)\"\n [emptyLabel]=\"col.emptyLabel || (isList() ? 'Sin elementos' : 'Suelta una tarjeta aqu\u00ED')\"\n >\n <!-- Plegada no pinta tarjetas: el CDK exige que sus items vivan en el contenedor. -->\n @if (!collapsed) {\n @for (id of orderOf(col.id); track id) {\n @if (itemOf(id); as item) {\n <div\n class=\"ius-kbboard__item\"\n cdkDrag\n #drag=\"cdkDrag\"\n [cdkDragData]=\"id\"\n [cdkDragDisabled]=\"!sortable() || !!item.disabled\"\n (pointerdown)=\"measure($event)\"\n (cdkDragStarted)=\"onDragStarted($event, col.id)\"\n >\n @if (renderCard(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"tpl; context: renderContext(item); injector: dragInjector(drag)\"\n />\n } @else {\n <ius-kanban-card\n [overline]=\"item.overline\"\n [title]=\"item.title\"\n [subtitle]=\"item.subtitle\"\n [paragraph]=\"item.paragraph\"\n [caption]=\"item.caption\"\n [tags]=\"item.tags\"\n [assignee]=\"item.assignee\"\n [flag]=\"item.flag\"\n [leading]=\"item.leading\"\n [trailing]=\"item.trailing\"\n [content]=\"item.content\"\n [templateContext]=\"itemContext(item)\"\n [actions]=\"item.actions\"\n [ariaLabel]=\"item.ariaLabel\"\n [layout]=\"item.layout ?? effLayout()\"\n [handle]=\"item.handle ?? effHandle()\"\n [accent]=\"accent()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"isSelected(item)\"\n [draggable]=\"sortable()\"\n [dragging]=\"isDragging(id)\"\n [itemId]=\"id\"\n [clickable]=\"isInteractive(item)\"\n (clicked)=\"onCardClick(item, $event)\"\n />\n }\n <div *cdkDragPlaceholder class=\"ius-kbcol__placeholder\" aria-hidden=\"true\" [style.height.px]=\"phHeight()\"></div>\n </div>\n }\n }\n }\n </ius-kanban-column>\n }\n\n @if (addColumn.observed && !isList()) {\n <div class=\"ius-kbboard__add-col\">\n <ius-text-button prefixIcon=\"add\" [label]=\"addColumnLabel()\" (clicked)=\"addColumn.emit($event)\" />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%;min-height:0}:host([data-variant=list]){height:auto}.ius-kbboard{box-sizing:border-box;display:flex;align-items:stretch;gap:var(--ius-space-md);width:100%;height:100%;min-height:0;padding:var(--ius-space-xxs);overflow-x:auto;overflow-y:hidden;font-family:var(--ius-font-body)}.ius-kbboard[data-variant=list]{flex-direction:column;align-items:stretch;gap:0;overflow:visible;height:auto}.ius-kbboard__add-col{flex:0 0 auto;align-self:stretch;min-width:200px;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md) var(--ius-space-md);border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-lg)}.ius-kbcol__placeholder{flex:0 0 auto;border:1px dashed var(--_kbc-accent);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_kbc-accent) 7%,transparent)}:host ::ng-deep .ius-kbcol__strip>.ius-kbcol__placeholder{display:none}.ius-kbcol.cdk-drag-placeholder{opacity:.5}.ius-kbboard__item.cdk-drag-preview>.ius-kbcard{opacity:.5;box-shadow:var(--ius-elevation-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: KanbanCardComponent, selector: "ius-kanban-card", inputs: ["overline", "title", "subtitle", "paragraph", "caption", "tags", "assignee", "flag", "leading", "trailing", "content", "templateContext", "layout", "handle", "accent", "selected", "dragging", "disabled", "state", "actions", "draggable", "itemId", "ariaLabel", "clickable"], outputs: ["clicked"] }, { kind: "component", type: KanbanColumnComponent, selector: "ius-kanban-column", inputs: ["title", "tone", "count", "accent", "actions", "addLabel", "addable", "empty", "emptyLabel", "emptyIcon", "bare", "width", "collapsible", "collapsed", "defaultCollapsed", "draggable", "dragging", "over"], outputs: ["addItem", "collapsedChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "directive", type: IusKanbanScrollParentsDirective, selector: "[iusKanbanScrollParents]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26495
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: KanbanBoardComponent, isStandalone: true, selector: "ius-kanban-board", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, accent: { classPropertyName: "accent", publicName: "accent", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, sortable: { classPropertyName: "sortable", publicName: "sortable", isSignal: true, isRequired: false, transformFunction: null }, reorderColumns: { classPropertyName: "reorderColumns", publicName: "reorderColumns", isSignal: true, isRequired: false, transformFunction: null }, cardLayout: { classPropertyName: "cardLayout", publicName: "cardLayout", isSignal: true, isRequired: false, transformFunction: null }, cardHandle: { classPropertyName: "cardHandle", publicName: "cardHandle", isSignal: true, isRequired: false, transformFunction: null }, renderCard: { classPropertyName: "renderCard", publicName: "renderCard", isSignal: true, isRequired: false, transformFunction: null }, columnWidth: { classPropertyName: "columnWidth", publicName: "columnWidth", isSignal: true, isRequired: false, transformFunction: null }, selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, multiSelect: { classPropertyName: "multiSelect", publicName: "multiSelect", isSignal: true, isRequired: false, transformFunction: null }, bulkMove: { classPropertyName: "bulkMove", publicName: "bulkMove", isSignal: true, isRequired: false, transformFunction: null }, addColumnLabel: { classPropertyName: "addColumnLabel", publicName: "addColumnLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemMove: "itemMove", itemsMove: "itemsMove", itemClick: "itemClick", selectionChange: "selectionChange", columnCollapse: "columnCollapse", columnMove: "columnMove", addItem: "addItem", addColumn: "addColumn" }, host: { properties: { "attr.data-variant": "variant()" } }, ngImport: i0, template: "<!-- Ra\u00EDz = lista horizontal de columnas (cdkDropList) y grupo que conecta las\r\n listas de tarjetas (cdkDropListGroup no incluye a la lista de su mismo nodo). -->\r\n<div\r\n class=\"ius-kbboard ius-scroll\"\r\n [attr.data-variant]=\"variant()\"\r\n cdkDropListGroup\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"isList() || !reorderColumns()\"\r\n (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n>\r\n @for (col of cols(); track col.id) {\r\n @let collapsed = isColCollapsed(col);\r\n <ius-kanban-column\r\n [attr.data-col-id]=\"col.id\"\r\n cdkDrag\r\n [cdkDragData]=\"col.id\"\r\n [cdkDragDisabled]=\"isList() || !reorderColumns()\"\r\n cdkDropList\r\n iusKanbanScrollParents\r\n [cdkDropListData]=\"col.id\"\r\n cdkDropListElementContainer=\".ius-kbcol__body, .ius-kbcol__strip\"\r\n [cdkDropListSortingDisabled]=\"collapsed\"\r\n (cdkDropListDropped)=\"onItemDrop($event)\"\r\n (cdkDropListEntered)=\"overCol.set(col.id)\"\r\n (cdkDropListExited)=\"onListExited(col.id)\"\r\n [title]=\"col.title\"\r\n [tone]=\"col.tone || 'neutral'\"\r\n [accent]=\"col.accent || accent()\"\r\n [count]=\"countOf(col)\"\r\n [actions]=\"columnActions().get(col.id)\"\r\n [bare]=\"!!col.bare || isList()\"\r\n [width]=\"col.width || columnWidth()\"\r\n [collapsible]=\"!!col.collapsible && !isList()\"\r\n [collapsed]=\"!!col.collapsible && !isList() ? collapsed : undefined\"\r\n (collapsedChange)=\"toggleCollapse(col, $event)\"\r\n [draggable]=\"reorderColumns() && !isList()\"\r\n [over]=\"overCol() === col.id\"\r\n [addable]=\"addItem.observed\"\r\n (addItem)=\"addItem.emit(isList() ? undefined : col.id)\"\r\n [addLabel]=\"col.addLabel\"\r\n [empty]=\"isEmpty(col)\"\r\n [emptyLabel]=\"col.emptyLabel || (isList() ? 'Sin elementos' : 'Suelta una tarjeta aqu\u00ED')\"\r\n >\r\n <!-- Plegada no pinta tarjetas: el CDK exige que sus items vivan en el contenedor. -->\r\n @if (!collapsed) {\r\n @for (id of orderOf(col.id); track id) {\r\n @if (itemOf(id); as item) {\r\n <div\r\n class=\"ius-kbboard__item\"\r\n cdkDrag\r\n #drag=\"cdkDrag\"\r\n [cdkDragData]=\"id\"\r\n [cdkDragDisabled]=\"!sortable() || !!item.disabled\"\r\n (pointerdown)=\"measure($event)\"\r\n (cdkDragStarted)=\"onDragStarted($event, col.id)\"\r\n >\r\n @if (renderCard(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: renderContext(item); injector: dragInjector(drag)\"\r\n />\r\n } @else {\r\n <ius-kanban-card\r\n [overline]=\"item.overline\"\r\n [title]=\"item.title\"\r\n [subtitle]=\"item.subtitle\"\r\n [paragraph]=\"item.paragraph\"\r\n [caption]=\"item.caption\"\r\n [tags]=\"item.tags\"\r\n [assignee]=\"item.assignee\"\r\n [flag]=\"item.flag\"\r\n [leading]=\"item.leading\"\r\n [trailing]=\"item.trailing\"\r\n [content]=\"item.content\"\r\n [templateContext]=\"itemContext(item)\"\r\n [actions]=\"item.actions\"\r\n [ariaLabel]=\"item.ariaLabel\"\r\n [layout]=\"item.layout ?? effLayout()\"\r\n [handle]=\"item.handle ?? effHandle()\"\r\n [accent]=\"accent()\"\r\n [disabled]=\"!!item.disabled\"\r\n [selected]=\"isSelected(item)\"\r\n [draggable]=\"sortable()\"\r\n [dragging]=\"isDragging(id)\"\r\n [itemId]=\"id\"\r\n [clickable]=\"isInteractive(item)\"\r\n (clicked)=\"onCardClick(item, $event)\"\r\n />\r\n }\r\n <div *cdkDragPlaceholder class=\"ius-kbcol__placeholder\" aria-hidden=\"true\" [style.height.px]=\"phHeight()\"></div>\r\n </div>\r\n }\r\n }\r\n }\r\n </ius-kanban-column>\r\n }\r\n\r\n @if (addColumn.observed && !isList()) {\r\n <div class=\"ius-kbboard__add-col\">\r\n <ius-text-button prefixIcon=\"add\" [label]=\"addColumnLabel()\" (clicked)=\"addColumn.emit($event)\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%;min-height:0}:host([data-variant=list]){height:auto}.ius-kbboard{box-sizing:border-box;display:flex;align-items:stretch;gap:var(--ius-space-md);width:100%;height:100%;min-height:0;padding:var(--ius-space-xxs);overflow-x:auto;overflow-y:hidden;font-family:var(--ius-font-body)}.ius-kbboard[data-variant=list]{flex-direction:column;align-items:stretch;gap:0;overflow:visible;height:auto}.ius-kbboard__add-col{flex:0 0 auto;align-self:stretch;min-width:200px;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md) var(--ius-space-md);border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-lg)}.ius-kbcol__placeholder{flex:0 0 auto;border:1px dashed var(--_kbc-accent);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_kbc-accent) 7%,transparent)}:host ::ng-deep .ius-kbcol__strip>.ius-kbcol__placeholder{display:none}.ius-kbcol.cdk-drag-placeholder{opacity:.5}.ius-kbboard__item.cdk-drag-preview>.ius-kbcard{opacity:.5;box-shadow:var(--ius-elevation-300)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragPlaceholder, selector: "ng-template[cdkDragPlaceholder]", inputs: ["data"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDropListGroup, selector: "[cdkDropListGroup]", inputs: ["cdkDropListGroupDisabled"], exportAs: ["cdkDropListGroup"] }, { kind: "component", type: KanbanCardComponent, selector: "ius-kanban-card", inputs: ["overline", "title", "subtitle", "paragraph", "caption", "tags", "assignee", "flag", "leading", "trailing", "content", "templateContext", "layout", "handle", "accent", "selected", "dragging", "disabled", "state", "actions", "draggable", "itemId", "ariaLabel", "clickable"], outputs: ["clicked"] }, { kind: "component", type: KanbanColumnComponent, selector: "ius-kanban-column", inputs: ["title", "tone", "count", "accent", "actions", "addLabel", "addable", "empty", "emptyLabel", "emptyIcon", "bare", "width", "collapsible", "collapsed", "defaultCollapsed", "draggable", "dragging", "over"], outputs: ["addItem", "collapsedChange"] }, { kind: "component", type: TextButtonComponent, selector: "ius-text-button", inputs: ["label", "prefixIcon", "sufixIcon", "size", "disabled", "type", "ariaExpanded", "ariaControls"], outputs: ["clicked"] }, { kind: "directive", type: IusKanbanScrollParentsDirective, selector: "[iusKanbanScrollParents]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
26495
26496
|
}
|
|
26496
26497
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: KanbanBoardComponent, decorators: [{
|
|
26497
26498
|
type: Component,
|
|
@@ -26507,7 +26508,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
26507
26508
|
IusKanbanScrollParentsDirective,
|
|
26508
26509
|
], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
26509
26510
|
'[attr.data-variant]': 'variant()',
|
|
26510
|
-
}, template: "<!-- Ra\u00EDz = lista horizontal de columnas (cdkDropList) y grupo que conecta las\n listas de tarjetas (cdkDropListGroup no incluye a la lista de su mismo nodo). -->\n<div\n class=\"ius-kbboard ius-scroll\"\n [attr.data-variant]=\"variant()\"\n cdkDropListGroup\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListDisabled]=\"isList() || !reorderColumns()\"\n (cdkDropListDropped)=\"onColumnDrop($event)\"\n>\n @for (col of cols(); track col.id) {\n @let collapsed = isColCollapsed(col);\n <ius-kanban-column\n [attr.data-col-id]=\"col.id\"\n cdkDrag\n [cdkDragData]=\"col.id\"\n [cdkDragDisabled]=\"isList() || !reorderColumns()\"\n cdkDropList\n iusKanbanScrollParents\n [cdkDropListData]=\"col.id\"\n cdkDropListElementContainer=\".ius-kbcol__body, .ius-kbcol__strip\"\n [cdkDropListSortingDisabled]=\"collapsed\"\n (cdkDropListDropped)=\"onItemDrop($event)\"\n (cdkDropListEntered)=\"overCol.set(col.id)\"\n (cdkDropListExited)=\"onListExited(col.id)\"\n [title]=\"col.title\"\n [tone]=\"col.tone || 'neutral'\"\n [accent]=\"col.accent || accent()\"\n [count]=\"countOf(col)\"\n [actions]=\"columnActions().get(col.id)\"\n [bare]=\"!!col.bare || isList()\"\n [width]=\"col.width || columnWidth()\"\n [collapsible]=\"!!col.collapsible && !isList()\"\n [collapsed]=\"!!col.collapsible && !isList() ? collapsed : undefined\"\n (collapsedChange)=\"toggleCollapse(col, $event)\"\n [draggable]=\"reorderColumns() && !isList()\"\n [over]=\"overCol() === col.id\"\n [addable]=\"addItem.observed\"\n (addItem)=\"addItem.emit(isList() ? undefined : col.id)\"\n [addLabel]=\"col.addLabel\"\n [empty]=\"isEmpty(col)\"\n [emptyLabel]=\"col.emptyLabel || (isList() ? 'Sin elementos' : 'Suelta una tarjeta aqu\u00ED')\"\n >\n <!-- Plegada no pinta tarjetas: el CDK exige que sus items vivan en el contenedor. -->\n @if (!collapsed) {\n @for (id of orderOf(col.id); track id) {\n @if (itemOf(id); as item) {\n <div\n class=\"ius-kbboard__item\"\n cdkDrag\n #drag=\"cdkDrag\"\n [cdkDragData]=\"id\"\n [cdkDragDisabled]=\"!sortable() || !!item.disabled\"\n (pointerdown)=\"measure($event)\"\n (cdkDragStarted)=\"onDragStarted($event, col.id)\"\n >\n @if (renderCard(); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"tpl; context: renderContext(item); injector: dragInjector(drag)\"\n />\n } @else {\n <ius-kanban-card\n [overline]=\"item.overline\"\n [title]=\"item.title\"\n [subtitle]=\"item.subtitle\"\n [paragraph]=\"item.paragraph\"\n [caption]=\"item.caption\"\n [tags]=\"item.tags\"\n [assignee]=\"item.assignee\"\n [flag]=\"item.flag\"\n [leading]=\"item.leading\"\n [trailing]=\"item.trailing\"\n [content]=\"item.content\"\n [templateContext]=\"itemContext(item)\"\n [actions]=\"item.actions\"\n [ariaLabel]=\"item.ariaLabel\"\n [layout]=\"item.layout ?? effLayout()\"\n [handle]=\"item.handle ?? effHandle()\"\n [accent]=\"accent()\"\n [disabled]=\"!!item.disabled\"\n [selected]=\"isSelected(item)\"\n [draggable]=\"sortable()\"\n [dragging]=\"isDragging(id)\"\n [itemId]=\"id\"\n [clickable]=\"isInteractive(item)\"\n (clicked)=\"onCardClick(item, $event)\"\n />\n }\n <div *cdkDragPlaceholder class=\"ius-kbcol__placeholder\" aria-hidden=\"true\" [style.height.px]=\"phHeight()\"></div>\n </div>\n }\n }\n }\n </ius-kanban-column>\n }\n\n @if (addColumn.observed && !isList()) {\n <div class=\"ius-kbboard__add-col\">\n <ius-text-button prefixIcon=\"add\" [label]=\"addColumnLabel()\" (clicked)=\"addColumn.emit($event)\" />\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%;min-height:0}:host([data-variant=list]){height:auto}.ius-kbboard{box-sizing:border-box;display:flex;align-items:stretch;gap:var(--ius-space-md);width:100%;height:100%;min-height:0;padding:var(--ius-space-xxs);overflow-x:auto;overflow-y:hidden;font-family:var(--ius-font-body)}.ius-kbboard[data-variant=list]{flex-direction:column;align-items:stretch;gap:0;overflow:visible;height:auto}.ius-kbboard__add-col{flex:0 0 auto;align-self:stretch;min-width:200px;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md) var(--ius-space-md);border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-lg)}.ius-kbcol__placeholder{flex:0 0 auto;border:1px dashed var(--_kbc-accent);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_kbc-accent) 7%,transparent)}:host ::ng-deep .ius-kbcol__strip>.ius-kbcol__placeholder{display:none}.ius-kbcol.cdk-drag-placeholder{opacity:.5}.ius-kbboard__item.cdk-drag-preview>.ius-kbcard{opacity:.5;box-shadow:var(--ius-elevation-300)}\n"] }]
|
|
26511
|
+
}, template: "<!-- Ra\u00EDz = lista horizontal de columnas (cdkDropList) y grupo que conecta las\r\n listas de tarjetas (cdkDropListGroup no incluye a la lista de su mismo nodo). -->\r\n<div\r\n class=\"ius-kbboard ius-scroll\"\r\n [attr.data-variant]=\"variant()\"\r\n cdkDropListGroup\r\n cdkDropList\r\n cdkDropListOrientation=\"horizontal\"\r\n [cdkDropListDisabled]=\"isList() || !reorderColumns()\"\r\n (cdkDropListDropped)=\"onColumnDrop($event)\"\r\n>\r\n @for (col of cols(); track col.id) {\r\n @let collapsed = isColCollapsed(col);\r\n <ius-kanban-column\r\n [attr.data-col-id]=\"col.id\"\r\n cdkDrag\r\n [cdkDragData]=\"col.id\"\r\n [cdkDragDisabled]=\"isList() || !reorderColumns()\"\r\n cdkDropList\r\n iusKanbanScrollParents\r\n [cdkDropListData]=\"col.id\"\r\n cdkDropListElementContainer=\".ius-kbcol__body, .ius-kbcol__strip\"\r\n [cdkDropListSortingDisabled]=\"collapsed\"\r\n (cdkDropListDropped)=\"onItemDrop($event)\"\r\n (cdkDropListEntered)=\"overCol.set(col.id)\"\r\n (cdkDropListExited)=\"onListExited(col.id)\"\r\n [title]=\"col.title\"\r\n [tone]=\"col.tone || 'neutral'\"\r\n [accent]=\"col.accent || accent()\"\r\n [count]=\"countOf(col)\"\r\n [actions]=\"columnActions().get(col.id)\"\r\n [bare]=\"!!col.bare || isList()\"\r\n [width]=\"col.width || columnWidth()\"\r\n [collapsible]=\"!!col.collapsible && !isList()\"\r\n [collapsed]=\"!!col.collapsible && !isList() ? collapsed : undefined\"\r\n (collapsedChange)=\"toggleCollapse(col, $event)\"\r\n [draggable]=\"reorderColumns() && !isList()\"\r\n [over]=\"overCol() === col.id\"\r\n [addable]=\"addItem.observed\"\r\n (addItem)=\"addItem.emit(isList() ? undefined : col.id)\"\r\n [addLabel]=\"col.addLabel\"\r\n [empty]=\"isEmpty(col)\"\r\n [emptyLabel]=\"col.emptyLabel || (isList() ? 'Sin elementos' : 'Suelta una tarjeta aqu\u00ED')\"\r\n >\r\n <!-- Plegada no pinta tarjetas: el CDK exige que sus items vivan en el contenedor. -->\r\n @if (!collapsed) {\r\n @for (id of orderOf(col.id); track id) {\r\n @if (itemOf(id); as item) {\r\n <div\r\n class=\"ius-kbboard__item\"\r\n cdkDrag\r\n #drag=\"cdkDrag\"\r\n [cdkDragData]=\"id\"\r\n [cdkDragDisabled]=\"!sortable() || !!item.disabled\"\r\n (pointerdown)=\"measure($event)\"\r\n (cdkDragStarted)=\"onDragStarted($event, col.id)\"\r\n >\r\n @if (renderCard(); as tpl) {\r\n <ng-container\r\n *ngTemplateOutlet=\"tpl; context: renderContext(item); injector: dragInjector(drag)\"\r\n />\r\n } @else {\r\n <ius-kanban-card\r\n [overline]=\"item.overline\"\r\n [title]=\"item.title\"\r\n [subtitle]=\"item.subtitle\"\r\n [paragraph]=\"item.paragraph\"\r\n [caption]=\"item.caption\"\r\n [tags]=\"item.tags\"\r\n [assignee]=\"item.assignee\"\r\n [flag]=\"item.flag\"\r\n [leading]=\"item.leading\"\r\n [trailing]=\"item.trailing\"\r\n [content]=\"item.content\"\r\n [templateContext]=\"itemContext(item)\"\r\n [actions]=\"item.actions\"\r\n [ariaLabel]=\"item.ariaLabel\"\r\n [layout]=\"item.layout ?? effLayout()\"\r\n [handle]=\"item.handle ?? effHandle()\"\r\n [accent]=\"accent()\"\r\n [disabled]=\"!!item.disabled\"\r\n [selected]=\"isSelected(item)\"\r\n [draggable]=\"sortable()\"\r\n [dragging]=\"isDragging(id)\"\r\n [itemId]=\"id\"\r\n [clickable]=\"isInteractive(item)\"\r\n (clicked)=\"onCardClick(item, $event)\"\r\n />\r\n }\r\n <div *cdkDragPlaceholder class=\"ius-kbcol__placeholder\" aria-hidden=\"true\" [style.height.px]=\"phHeight()\"></div>\r\n </div>\r\n }\r\n }\r\n }\r\n </ius-kanban-column>\r\n }\r\n\r\n @if (addColumn.observed && !isList()) {\r\n <div class=\"ius-kbboard__add-col\">\r\n <ius-text-button prefixIcon=\"add\" [label]=\"addColumnLabel()\" (clicked)=\"addColumn.emit($event)\" />\r\n </div>\r\n }\r\n</div>\r\n", styles: ["@charset \"UTF-8\";:host{display:block;width:100%;height:100%;min-height:0}:host([data-variant=list]){height:auto}.ius-kbboard{box-sizing:border-box;display:flex;align-items:stretch;gap:var(--ius-space-md);width:100%;height:100%;min-height:0;padding:var(--ius-space-xxs);overflow-x:auto;overflow-y:hidden;font-family:var(--ius-font-body)}.ius-kbboard[data-variant=list]{flex-direction:column;align-items:stretch;gap:0;overflow:visible;height:auto}.ius-kbboard__add-col{flex:0 0 auto;align-self:stretch;min-width:200px;display:flex;align-items:center;justify-content:center;padding:var(--ius-space-md) var(--ius-space-md);border:1px dashed var(--ius-stroke);border-radius:var(--ius-radius-lg)}.ius-kbcol__placeholder{flex:0 0 auto;border:1px dashed var(--_kbc-accent);border-radius:var(--ius-radius-md);background:color-mix(in srgb,var(--_kbc-accent) 7%,transparent)}:host ::ng-deep .ius-kbcol__strip>.ius-kbcol__placeholder{display:none}.ius-kbcol.cdk-drag-placeholder{opacity:.5}.ius-kbboard__item.cdk-drag-preview>.ius-kbcard{opacity:.5;box-shadow:var(--ius-elevation-300)}\n"] }]
|
|
26511
26512
|
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], accent: [{ type: i0.Input, args: [{ isSignal: true, alias: "accent", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], sortable: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortable", required: false }] }], reorderColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderColumns", required: false }] }], cardLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardLayout", required: false }] }], cardHandle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHandle", required: false }] }], renderCard: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderCard", required: false }] }], columnWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnWidth", required: false }] }], selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }], multiSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelect", required: false }] }], bulkMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "bulkMove", required: false }] }], addColumnLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addColumnLabel", required: false }] }], itemMove: [{
|
|
26512
26513
|
type: Output
|
|
26513
26514
|
}], itemsMove: [{
|