@telcomdev/ui 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +74 -0
- package/fesm2022/telcomdev-ui.mjs +1748 -9
- package/fesm2022/telcomdev-ui.mjs.map +1 -1
- package/package.json +7 -2
- package/types/telcomdev-ui.d.ts +419 -4
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, HostListener, signal } from '@angular/core';
|
|
2
|
+
import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, HostListener, Directive, ChangeDetectorRef, forwardRef, DestroyRef, signal, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
|
|
3
3
|
import * as i2 from '@angular/cdk/scrolling';
|
|
4
4
|
import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|
5
5
|
import * as i1 from '@angular/forms';
|
|
6
|
-
import { FormsModule } from '@angular/forms';
|
|
7
|
-
import {
|
|
6
|
+
import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
7
|
+
import { DIALOG_DATA, Dialog } from '@angular/cdk/dialog';
|
|
8
|
+
import { NgComponentOutlet, DOCUMENT, NgTemplateOutlet } from '@angular/common';
|
|
9
|
+
import { ScrollStrategyOptions, CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';
|
|
8
10
|
import { RouterLink, RouterLinkActive } from '@angular/router';
|
|
9
11
|
|
|
10
12
|
class TelcomdevUi {
|
|
@@ -429,6 +431,12 @@ const TD_ICONOS = {
|
|
|
429
431
|
search: {
|
|
430
432
|
path: 'M10.5 3a7.5 7.5 0 1 0 4.73 13.32L20.91 22 22 20.91l-5.68-5.68A7.5 7.5 0 0 0 10.5 3Zm0 2a5.5 5.5 0 1 1 0 11 5.5 5.5 0 0 1 0-11Z',
|
|
431
433
|
},
|
|
434
|
+
visibility: {
|
|
435
|
+
path: 'M12 4.5C6.5 4.5 2.1 8 1 12c1.1 4 5.5 7.5 11 7.5S21.9 16 23 12c-1.1-4-5.5-7.5-11-7.5Zm0 12a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z',
|
|
436
|
+
},
|
|
437
|
+
visibility_off: {
|
|
438
|
+
path: 'm3.3 2 18.7 18.7-1.3 1.3-3.15-3.15A12.2 12.2 0 0 1 12 20C6.5 20 2.1 16.5 1 12a11.6 11.6 0 0 1 3.4-5.2L2 4.3 3.3 2Zm4.42 7.02A4.5 4.5 0 0 0 14.98 16l-1.55-1.55a2.5 2.5 0 0 1-3.88-3.88L7.72 9.02ZM12 4c5.5 0 9.9 3.5 11 8a11.2 11.2 0 0 1-2.53 4.35l-3.3-3.3A5.5 5.5 0 0 0 10.95 6.83L8.58 4.46A13.4 13.4 0 0 1 12 4Z',
|
|
439
|
+
},
|
|
432
440
|
notifications: {
|
|
433
441
|
path: 'M12 22a2.5 2.5 0 0 0 2.45-2h-4.9A2.5 2.5 0 0 0 12 22Zm7-6v-5a7 7 0 0 0-5.5-6.84V3a1.5 1.5 0 0 0-3 0v1.16A7 7 0 0 0 5 11v5l-2 2v1h18v-1l-2-2Z',
|
|
434
442
|
},
|
|
@@ -460,7 +468,138 @@ const TD_ICONOS = {
|
|
|
460
468
|
path: 'M4 3h16l3 11v7H1v-7L4 3Zm1.5 2L3 14h5l1 2h6l1-2h5l-2.5-9h-13Z',
|
|
461
469
|
},
|
|
462
470
|
pdf: {
|
|
463
|
-
path: 'M6
|
|
471
|
+
path: 'M6.5 2.75h8l4.75 4.75v13.75H6.5a1.75 1.75 0 0 1-1.75-1.75v-15A1.75 1.75 0 0 1 6.5 2.75Zm8 0V7.5h4.75M7.1 20v-6.5m0 1.1c.45-.75 1.25-1.15 2.05-1.05 1.25.15 1.85 1.25 1.7 2.65-.15 1.35-.9 2.2-2.05 2.15-.75-.05-1.35-.4-1.7-.95m7.85-5.9V18.4m0-3.8c-.45-.75-1.25-1.15-2.05-1.05-1.25.15-1.85 1.25-1.7 2.65.15 1.35.9 2.2 2.05 2.15.75-.05 1.35-.4 1.7-.95m2.15 1v-5.65c0-1.15.55-1.75 1.65-1.75.35 0 .65.05.9.15m-2.5 3.05h2.1',
|
|
472
|
+
estilo: 'linea',
|
|
473
|
+
grosor: 1.65,
|
|
474
|
+
},
|
|
475
|
+
save: {
|
|
476
|
+
path: 'M5 3h12l4 4v14H3V5a2 2 0 0 1 2-2Zm1 2a1 1 0 0 0-1 1v13h14V8h-4V5H6Zm2 0v5h7V5H8Zm1 8h6a2 2 0 0 1 2 2v4H7v-4a2 2 0 0 1 2-2Z',
|
|
477
|
+
},
|
|
478
|
+
copy: {
|
|
479
|
+
path: 'M8 3h11a2 2 0 0 1 2 2v11h-2V5H8V3ZM5 7h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2Zm0 2v10h10V9H5Z',
|
|
480
|
+
},
|
|
481
|
+
download: {
|
|
482
|
+
path: 'M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3ZM4 19h16v2H4v-2Z',
|
|
483
|
+
},
|
|
484
|
+
upload: {
|
|
485
|
+
path: 'm12 3 6 6-1.41 1.41L13 6.83V17h-2V6.83l-3.59 3.58L6 9l6-6ZM4 19h16v2H4v-2Z',
|
|
486
|
+
},
|
|
487
|
+
print: {
|
|
488
|
+
path: 'M7 3h10v4H7V3Zm10 12v6H7v-6h10Zm2-7a3 3 0 0 1 3 3v6h-3v-4H5v4H2v-6a3 3 0 0 1 3-3h14Zm-4 9H9v2h6v-2Zm4-7a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z',
|
|
489
|
+
},
|
|
490
|
+
excel: {
|
|
491
|
+
path: 'M6.5 2.75h8l4.75 4.75v13.75H6.5a1.75 1.75 0 0 1-1.75-1.75v-15A1.75 1.75 0 0 1 6.5 2.75Zm8 0V7.5h4.75M8 11h8v7.5H8V11Zm0 3.75h8M11.9 11v7.5',
|
|
492
|
+
estilo: 'linea',
|
|
493
|
+
grosor: 1.65,
|
|
494
|
+
},
|
|
495
|
+
xml: {
|
|
496
|
+
path: 'M6.5 2.75h8l4.75 4.75v13.75H6.5a1.75 1.75 0 0 1-1.75-1.75v-15A1.75 1.75 0 0 1 6.5 2.75Zm8 0V7.5h4.75M9.25 12l-2.5 3 2.5 3m5.5-6 2.5 3-2.5 3m-1.5-7-2.5 8',
|
|
497
|
+
estilo: 'linea',
|
|
498
|
+
grosor: 1.65,
|
|
499
|
+
},
|
|
500
|
+
zip: {
|
|
501
|
+
path: 'M6.5 2.75h8l4.75 4.75v13.75H6.5a1.75 1.75 0 0 1-1.75-1.75v-15A1.75 1.75 0 0 1 6.5 2.75Zm8 0V7.5h4.75M10.25 2.75h3.5m-3.5 2.25h3.5m-3.5 2.25h3.5m-3.5 2.25h3.5m-3.5 2.25h3.5M12 11.75v3m-1.75 0h3.5v3.5h-3.5v-3.5Z',
|
|
502
|
+
estilo: 'linea',
|
|
503
|
+
grosor: 1.65,
|
|
504
|
+
},
|
|
505
|
+
file: {
|
|
506
|
+
path: 'M6 2h9l5 5v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 2H6v16h12V8h-4V4Zm2 2 2 2h-2V6Z',
|
|
507
|
+
},
|
|
508
|
+
image: {
|
|
509
|
+
path: 'M4 3h16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm0 2v14h16V5H4Zm3.5 2A2.5 2.5 0 1 1 5 9.5 2.5 2.5 0 0 1 7.5 7Zm12 10-4.5-5-3.2 3.5-2.3-2.5L4.5 18h15v-1Z',
|
|
510
|
+
},
|
|
511
|
+
calendar: {
|
|
512
|
+
path: 'M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2ZM5 9v11h14V9H5Zm0-3v1h14V6H5Z',
|
|
513
|
+
},
|
|
514
|
+
clock: {
|
|
515
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1 3h2v4.59l3.2 3.2-1.41 1.42L11 12.41V7Z',
|
|
516
|
+
},
|
|
517
|
+
history: {
|
|
518
|
+
path: 'M12 4a8 8 0 1 1-7.45 5H2l3.5-4L9 9H6.67A6 6 0 1 0 12 6V4Zm-1 3h2v4.59l3.2 3.2-1.41 1.42L11 12.41V7Z',
|
|
519
|
+
},
|
|
520
|
+
filter: {
|
|
521
|
+
path: 'M3 4h18l-7 8v6l-4 2v-8L3 4Zm4.41 2L12 11.25 16.59 6H7.41Z',
|
|
522
|
+
},
|
|
523
|
+
refresh: {
|
|
524
|
+
path: 'M17.65 6.35A7.95 7.95 0 0 0 12 4a8 8 0 1 0 7.75 10h-2.08A6 6 0 1 1 16.2 7.8L13 11h8V3l-3.35 3.35Z',
|
|
525
|
+
},
|
|
526
|
+
sort: {
|
|
527
|
+
path: 'M7 3 3 7h3v11H3l4 4 4-4H8V7h3L7 3Zm10 0-4 4h3v11h-3l4 4 4-4h-3V7h3l-4-4Z',
|
|
528
|
+
},
|
|
529
|
+
more_vertical: {
|
|
530
|
+
path: 'M12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm0 6a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z',
|
|
531
|
+
},
|
|
532
|
+
more_horizontal: {
|
|
533
|
+
path: 'M8 12a2 2 0 1 0-4 0 2 2 0 0 0 4 0Zm6 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Zm6 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z',
|
|
534
|
+
},
|
|
535
|
+
arrow_back: {
|
|
536
|
+
path: 'm11 5-7 7 7 7 1.41-1.41L7.83 13H21v-2H7.83l4.58-4.59L11 5Z',
|
|
537
|
+
},
|
|
538
|
+
arrow_forward: {
|
|
539
|
+
path: 'm13 5-1.41 1.41L16.17 11H3v2h13.17l-4.58 4.59L13 19l7-7-7-7Z',
|
|
540
|
+
},
|
|
541
|
+
login: {
|
|
542
|
+
path: 'M4 3h9a2 2 0 0 1 2 2v4h-2V5H4v14h9v-4h2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm13 5 4 4-4 4v-3H8v-2h9V8Z',
|
|
543
|
+
},
|
|
544
|
+
logout: {
|
|
545
|
+
path: 'M4 3h9a2 2 0 0 1 2 2v4h-2V5H4v14h9v-4h2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm13 5 4 4-4 4v-3H8v-2h9V8Z',
|
|
546
|
+
},
|
|
547
|
+
lock: {
|
|
548
|
+
path: 'M7 10V7a5 5 0 0 1 10 0v3h1a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm2 0h6V7a3 3 0 0 0-6 0v3Zm3 4a2 2 0 0 0-1 3.73V19h2v-1.27A2 2 0 0 0 12 14Z',
|
|
549
|
+
},
|
|
550
|
+
lock_open: {
|
|
551
|
+
path: 'M7 10V7a5 5 0 0 1 9.9-1H14.8A3 3 0 0 0 9 7v3h9a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h1Zm5 4a2 2 0 0 0-1 3.73V19h2v-1.27A2 2 0 0 0 12 14Z',
|
|
552
|
+
},
|
|
553
|
+
mail: {
|
|
554
|
+
path: 'M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm0 3.24V18h16V7.24l-8 5-8-5ZM18.53 6H5.47L12 10.08 18.53 6Z',
|
|
555
|
+
},
|
|
556
|
+
phone: {
|
|
557
|
+
path: 'M6.62 2.5 10 6.2 7.9 8.3a15.5 15.5 0 0 0 7.8 7.8l2.1-2.1 3.7 3.38V20a2 2 0 0 1-2 2C9.84 22 2 14.16 2 4.5a2 2 0 0 1 2-2h2.62Z',
|
|
558
|
+
},
|
|
559
|
+
send: {
|
|
560
|
+
path: 'm3 3 19 9-19 9 2-7 10-2-10-2-2-7Zm3.62 5.55.57 2L12 12l-4.81 1.45-.57 2L17.53 12 6.62 8.55Z',
|
|
561
|
+
},
|
|
562
|
+
location: {
|
|
563
|
+
path: 'M12 2a8 8 0 0 1 8 8c0 5.5-8 12-8 12S4 15.5 4 10a8 8 0 0 1 8-8Zm0 2a6 6 0 0 0-6 6c0 3.55 3.92 7.68 6 9.65 2.08-1.97 6-6.1 6-9.65a6 6 0 0 0-6-6Zm0 3a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z',
|
|
564
|
+
},
|
|
565
|
+
language: {
|
|
566
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm6.92 6h-3.08a15.7 15.7 0 0 0-1.38-3.18A8.05 8.05 0 0 1 18.92 8ZM12 4c-.83 1.2-1.5 2.53-1.84 4h3.68A13.7 13.7 0 0 0 12 4ZM9.54 4.82A15.7 15.7 0 0 0 8.16 8H5.08a8.05 8.05 0 0 1 4.46-3.18ZM4.26 10A8.3 8.3 0 0 0 4 12c0 .69.09 1.36.26 2h3.55a17 17 0 0 1 0-4H4.26Zm5.57 0a14.6 14.6 0 0 0 0 4h4.34a14.6 14.6 0 0 0 0-4H9.83Zm6.36 0a17 17 0 0 1 0 4h3.55A8.3 8.3 0 0 0 20 12c0-.69-.09-1.36-.26-2h-3.55ZM5.08 16h3.08c.3 1.14.77 2.2 1.38 3.18A8.05 8.05 0 0 1 5.08 16Zm5.08 0c.34 1.47 1.01 2.8 1.84 4 .83-1.2 1.5-2.53 1.84-4h-3.68Zm4.3 3.18A15.7 15.7 0 0 0 15.84 16h3.08a8.05 8.05 0 0 1-4.46 3.18Z',
|
|
567
|
+
},
|
|
568
|
+
info: {
|
|
569
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1 6h2v7h-2v-7Zm0-3h2v2h-2V7Z',
|
|
570
|
+
},
|
|
571
|
+
warning: {
|
|
572
|
+
path: 'M12 2 1 21h22L12 2Zm0 4.03L19.53 19H4.47L12 6.03ZM11 10v5h2v-5h-2Zm0 6v2h2v-2h-2Z',
|
|
573
|
+
},
|
|
574
|
+
error: {
|
|
575
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1 3h2v7h-2V7Zm0 9h2v2h-2v-2Z',
|
|
576
|
+
},
|
|
577
|
+
check_circle: {
|
|
578
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-1.5 11.5-3-3 1.41-1.41 1.59 1.58 4.59-4.58 1.41 1.41-6 6Z',
|
|
579
|
+
},
|
|
580
|
+
cancel: {
|
|
581
|
+
path: 'M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-3.3 3.3L12 10.59l3.3-3.3 1.4 1.42-3.29 3.29 3.3 3.3-1.42 1.4L12 13.41l-3.3 3.3-1.4-1.42 3.29-3.29-3.3-3.3L8.7 7.3Z',
|
|
582
|
+
},
|
|
583
|
+
star: {
|
|
584
|
+
path: 'm12 2.5 2.94 5.96 6.58.96-4.76 4.64 1.12 6.56L12 17.53l-5.88 3.09 1.12-6.56-4.76-4.64 6.58-.96L12 2.5Z',
|
|
585
|
+
},
|
|
586
|
+
favorite: {
|
|
587
|
+
path: 'M12 21s-9-5.4-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6.6-9 12-9 12Z',
|
|
588
|
+
},
|
|
589
|
+
database: {
|
|
590
|
+
path: 'M12 2C6.48 2 2 3.79 2 6v12c0 2.21 4.48 4 10 4s10-1.79 10-4V6c0-2.21-4.48-4-10-4Zm0 2c4.42 0 8 1.12 8 2s-3.58 2-8 2-8-1.12-8-2 3.58-2 8-2ZM4 9.2c1.83.82 4.69 1.3 8 1.3s6.17-.48 8-1.3V12c0 .88-3.58 2-8 2s-8-1.12-8-2V9.2Zm0 6c1.83.82 4.69 1.3 8 1.3s6.17-.48 8-1.3V18c0 .88-3.58 2-8 2s-8-1.12-8-2v-2.8Z',
|
|
591
|
+
},
|
|
592
|
+
cloud: {
|
|
593
|
+
path: 'M7.5 20A5.5 5.5 0 0 1 6.3 9.13 7 7 0 0 1 19 11.5h.5a4.25 4.25 0 0 1 0 8.5h-12Zm0-2h12a2.25 2.25 0 0 0 0-4.5h-2.4l-.05-1.2A5 5 0 0 0 7.9 10.1l-.42 1.05-1.12.17A3.5 3.5 0 0 0 7.5 18Z',
|
|
594
|
+
},
|
|
595
|
+
camera: {
|
|
596
|
+
path: 'M8 4h8l1.5 2H21a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.5L8 4Zm4 4a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a3 3 0 1 1 0 6 3 3 0 0 1 0-6Z',
|
|
597
|
+
},
|
|
598
|
+
link: {
|
|
599
|
+
path: 'M10.59 13.41a2 2 0 0 0 2.82 0l3-3a2 2 0 0 0-2.82-2.82l-1.3 1.29-1.41-1.41 1.3-1.3a4 4 0 1 1 5.65 5.66l-3 3a4 4 0 0 1-5.66 0l-.7-.71 1.41-1.41.71.7Zm2.82-2.82a2 2 0 0 0-2.82 0l-3 3a2 2 0 0 0 2.82 2.82l1.3-1.29 1.41 1.41-1.3 1.3a4 4 0 1 1-5.65-5.66l3-3a4 4 0 0 1 5.66 0l.7.71-1.41 1.41-.71-.7Z',
|
|
600
|
+
},
|
|
601
|
+
external_link: {
|
|
602
|
+
path: 'M14 3h7v7h-2V6.41l-8.29 8.3-1.42-1.42L17.59 5H14V3ZM5 5h6v2H5v12h12v-6h2v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z',
|
|
464
603
|
},
|
|
465
604
|
};
|
|
466
605
|
const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
|
|
@@ -518,9 +657,16 @@ class TdIcon {
|
|
|
518
657
|
[attr.role]="titulo ? 'img' : null"
|
|
519
658
|
focusable="false"
|
|
520
659
|
>
|
|
521
|
-
<path
|
|
660
|
+
<path
|
|
661
|
+
[attr.d]="definicion().path"
|
|
662
|
+
[attr.fill]="definicion().estilo === 'linea' ? 'none' : 'currentColor'"
|
|
663
|
+
[attr.stroke]="definicion().estilo === 'linea' ? 'currentColor' : 'none'"
|
|
664
|
+
[attr.stroke-width]="definicion().grosor || null"
|
|
665
|
+
[attr.stroke-linecap]="definicion().estilo === 'linea' ? 'round' : null"
|
|
666
|
+
[attr.stroke-linejoin]="definicion().estilo === 'linea' ? 'round' : null"
|
|
667
|
+
/>
|
|
522
668
|
</svg>
|
|
523
|
-
`, isInline: true, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100
|
|
669
|
+
`, isInline: true, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
524
670
|
}
|
|
525
671
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIcon, decorators: [{
|
|
526
672
|
type: Component,
|
|
@@ -532,9 +678,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
532
678
|
[attr.role]="titulo ? 'img' : null"
|
|
533
679
|
focusable="false"
|
|
534
680
|
>
|
|
535
|
-
<path
|
|
681
|
+
<path
|
|
682
|
+
[attr.d]="definicion().path"
|
|
683
|
+
[attr.fill]="definicion().estilo === 'linea' ? 'none' : 'currentColor'"
|
|
684
|
+
[attr.stroke]="definicion().estilo === 'linea' ? 'currentColor' : 'none'"
|
|
685
|
+
[attr.stroke-width]="definicion().grosor || null"
|
|
686
|
+
[attr.stroke-linecap]="definicion().estilo === 'linea' ? 'round' : null"
|
|
687
|
+
[attr.stroke-linejoin]="definicion().estilo === 'linea' ? 'round' : null"
|
|
688
|
+
/>
|
|
536
689
|
</svg>
|
|
537
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100
|
|
690
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex;width:var(--td-icon-size, 1.25rem);height:var(--td-icon-size, 1.25rem);flex:0 0 auto;color:inherit;line-height:0;vertical-align:middle}svg{width:100%;height:100%}\n"] }]
|
|
538
691
|
}], propDecorators: { nombre: [{
|
|
539
692
|
type: Input
|
|
540
693
|
}], titulo: [{
|
|
@@ -710,6 +863,240 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
710
863
|
type: Output
|
|
711
864
|
}] } });
|
|
712
865
|
|
|
866
|
+
const TD_DIALOG_DATA = new InjectionToken('TD_DIALOG_DATA');
|
|
867
|
+
const TD_DIALOG_CONFIG = new InjectionToken('TD_DIALOG_CONFIG');
|
|
868
|
+
|
|
869
|
+
class TdDialogRef {
|
|
870
|
+
ref;
|
|
871
|
+
closed;
|
|
872
|
+
id;
|
|
873
|
+
constructor(ref) {
|
|
874
|
+
this.ref = ref;
|
|
875
|
+
this.closed = ref.closed;
|
|
876
|
+
this.id = ref.id;
|
|
877
|
+
}
|
|
878
|
+
close(result) {
|
|
879
|
+
this.ref.close(result);
|
|
880
|
+
}
|
|
881
|
+
updateSize(width, height) {
|
|
882
|
+
this.ref.updateSize(width, height);
|
|
883
|
+
return this;
|
|
884
|
+
}
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
class TdDialogPanel {
|
|
888
|
+
payload = inject(DIALOG_DATA);
|
|
889
|
+
dialogRef = inject(TdDialogRef);
|
|
890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdDialogPanel, isStandalone: true, selector: "td-dialog-panel", ngImport: i0, template: `
|
|
892
|
+
<section
|
|
893
|
+
class="td-dialog"
|
|
894
|
+
[class.td-dialog--oscuro]="payload.config.oscuro"
|
|
895
|
+
[class.td-dialog--pantalla]="payload.fullscreen"
|
|
896
|
+
[attr.aria-label]="payload.config.ariaLabel || payload.config.titulo || 'Diálogo'"
|
|
897
|
+
>
|
|
898
|
+
@if (
|
|
899
|
+
payload.config.titulo ||
|
|
900
|
+
payload.config.subtitulo ||
|
|
901
|
+
payload.config.icono ||
|
|
902
|
+
payload.config.mostrarCerrar !== false
|
|
903
|
+
) {
|
|
904
|
+
<header class="td-dialog__header">
|
|
905
|
+
@if (payload.config.icono) {
|
|
906
|
+
<span class="td-dialog__icono">
|
|
907
|
+
<td-icon [nombre]="payload.config.icono" tamano="1.25rem" />
|
|
908
|
+
</span>
|
|
909
|
+
}
|
|
910
|
+
<div class="td-dialog__titulos">
|
|
911
|
+
@if (payload.config.titulo) {
|
|
912
|
+
<h2>{{ payload.config.titulo }}</h2>
|
|
913
|
+
}
|
|
914
|
+
@if (payload.config.subtitulo) {
|
|
915
|
+
<p>{{ payload.config.subtitulo }}</p>
|
|
916
|
+
}
|
|
917
|
+
</div>
|
|
918
|
+
@if (payload.config.mostrarCerrar !== false) {
|
|
919
|
+
<button
|
|
920
|
+
type="button"
|
|
921
|
+
class="td-dialog__cerrar"
|
|
922
|
+
aria-label="Cerrar diálogo"
|
|
923
|
+
title="Cerrar"
|
|
924
|
+
(click)="dialogRef.close()"
|
|
925
|
+
>
|
|
926
|
+
<td-icon nombre="close" />
|
|
927
|
+
</button>
|
|
928
|
+
}
|
|
929
|
+
</header>
|
|
930
|
+
}
|
|
931
|
+
|
|
932
|
+
<div class="td-dialog__contenido">
|
|
933
|
+
<ng-container *ngComponentOutlet="payload.component" />
|
|
934
|
+
</div>
|
|
935
|
+
</section>
|
|
936
|
+
`, isInline: true, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-muted: #748096;display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-muted: #a1a1aa}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color:#5746d8;background:#eeecff}.td-dialog--oscuro .td-dialog__icono{color:#b9b0fa;background:#292540}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:.65rem;color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:#5746d8;background:#f2f0ff}.td-dialog--oscuro .td-dialog__cerrar:hover{color:#b9b0fa;background:#292931}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
937
|
+
}
|
|
938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPanel, decorators: [{
|
|
939
|
+
type: Component,
|
|
940
|
+
args: [{ selector: 'td-dialog-panel', imports: [NgComponentOutlet, TdIcon], template: `
|
|
941
|
+
<section
|
|
942
|
+
class="td-dialog"
|
|
943
|
+
[class.td-dialog--oscuro]="payload.config.oscuro"
|
|
944
|
+
[class.td-dialog--pantalla]="payload.fullscreen"
|
|
945
|
+
[attr.aria-label]="payload.config.ariaLabel || payload.config.titulo || 'Diálogo'"
|
|
946
|
+
>
|
|
947
|
+
@if (
|
|
948
|
+
payload.config.titulo ||
|
|
949
|
+
payload.config.subtitulo ||
|
|
950
|
+
payload.config.icono ||
|
|
951
|
+
payload.config.mostrarCerrar !== false
|
|
952
|
+
) {
|
|
953
|
+
<header class="td-dialog__header">
|
|
954
|
+
@if (payload.config.icono) {
|
|
955
|
+
<span class="td-dialog__icono">
|
|
956
|
+
<td-icon [nombre]="payload.config.icono" tamano="1.25rem" />
|
|
957
|
+
</span>
|
|
958
|
+
}
|
|
959
|
+
<div class="td-dialog__titulos">
|
|
960
|
+
@if (payload.config.titulo) {
|
|
961
|
+
<h2>{{ payload.config.titulo }}</h2>
|
|
962
|
+
}
|
|
963
|
+
@if (payload.config.subtitulo) {
|
|
964
|
+
<p>{{ payload.config.subtitulo }}</p>
|
|
965
|
+
}
|
|
966
|
+
</div>
|
|
967
|
+
@if (payload.config.mostrarCerrar !== false) {
|
|
968
|
+
<button
|
|
969
|
+
type="button"
|
|
970
|
+
class="td-dialog__cerrar"
|
|
971
|
+
aria-label="Cerrar diálogo"
|
|
972
|
+
title="Cerrar"
|
|
973
|
+
(click)="dialogRef.close()"
|
|
974
|
+
>
|
|
975
|
+
<td-icon nombre="close" />
|
|
976
|
+
</button>
|
|
977
|
+
}
|
|
978
|
+
</header>
|
|
979
|
+
}
|
|
980
|
+
|
|
981
|
+
<div class="td-dialog__contenido">
|
|
982
|
+
<ng-container *ngComponentOutlet="payload.component" />
|
|
983
|
+
</div>
|
|
984
|
+
</section>
|
|
985
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;width:100%;max-width:100%;max-height:inherit;overflow:hidden;border-radius:1rem;outline:none;box-shadow:0 28px 75px #0f172a3d,0 8px 24px #0f172a1f;animation:td-dialog-enter .18s cubic-bezier(.2,.8,.2,1)}:host-context(.td-dialog-overlay--fullscreen){height:100%;max-height:100%;border-radius:0}*{box-sizing:border-box}.td-dialog{--td-dialog-surface: #fff;--td-dialog-footer: #fafbfc;--td-dialog-border: #e6e9f0;--td-dialog-text: #263147;--td-dialog-muted: #748096;display:flex;width:100%;max-height:inherit;flex-direction:column;overflow:hidden;color:var(--td-dialog-text);background:var(--td-dialog-surface);font-family:Inter,ui-sans-serif,system-ui,sans-serif}.td-dialog--oscuro{--td-dialog-surface: #19191f;--td-dialog-footer: #202028;--td-dialog-border: #303039;--td-dialog-text: #ededf0;--td-dialog-muted: #a1a1aa}.td-dialog__header{display:flex;min-height:4.4rem;flex:0 0 auto;align-items:center;gap:.85rem;border-bottom:1px solid var(--td-dialog-border);padding:1rem 1.25rem 1rem 1.5rem;background:var(--td-dialog-surface)}.td-dialog__icono{display:grid;width:2.6rem;height:2.6rem;flex:0 0 auto;place-items:center;border-radius:.75rem;color:#5746d8;background:#eeecff}.td-dialog--oscuro .td-dialog__icono{color:#b9b0fa;background:#292540}.td-dialog__titulos{min-width:0;flex:1}.td-dialog__titulos h2{margin:0;font-size:1rem;line-height:1.3;letter-spacing:-.015em}.td-dialog__titulos p{margin:.2rem 0 0;color:var(--td-dialog-muted);font-size:.73rem;line-height:1.45}.td-dialog__cerrar{display:grid;width:2.35rem;height:2.35rem;flex:0 0 auto;place-items:center;border:0;border-radius:.65rem;color:var(--td-dialog-muted);background:transparent;cursor:pointer}.td-dialog__cerrar:hover{color:#5746d8;background:#f2f0ff}.td-dialog--oscuro .td-dialog__cerrar:hover{color:#b9b0fa;background:#292931}.td-dialog__contenido{display:flex;min-height:0;flex:1 1 auto;overflow-x:hidden;overflow-y:auto;padding:1.5rem;overscroll-behavior:contain;scrollbar-color:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent) transparent;scrollbar-width:thin}.td-dialog__contenido ::ng-deep>*{display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido ::ng-deep :has(>td-dialog-actions){display:flex;width:100%;min-height:100%;flex:1 1 auto;flex-direction:column}.td-dialog__contenido::-webkit-scrollbar{width:.42rem}.td-dialog__contenido::-webkit-scrollbar-track{background:transparent}.td-dialog__contenido::-webkit-scrollbar-thumb{border-radius:999px;background:color-mix(in srgb,var(--td-dialog-muted) 38%,transparent)}.td-dialog__contenido::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--td-dialog-muted) 58%,transparent)}.td-dialog--pantalla{height:100%}@keyframes td-dialog-enter{0%{opacity:0;transform:translateY(.6rem) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@media(prefers-reduced-motion:reduce){:host{animation:none}}@media(max-width:600px){:host{border-radius:1rem}:host-context(.td-dialog-overlay--fullscreen){border-radius:0}.td-dialog__contenido{padding:1.1rem}.td-dialog__header{padding-left:1.1rem}}\n"] }]
|
|
986
|
+
}] });
|
|
987
|
+
|
|
988
|
+
class TdDialog {
|
|
989
|
+
dialog = inject(Dialog);
|
|
990
|
+
open(component, config = {}) {
|
|
991
|
+
const size = config.tamano ?? 'mediano';
|
|
992
|
+
const mobile = typeof window !== 'undefined' &&
|
|
993
|
+
typeof window.matchMedia === 'function' &&
|
|
994
|
+
window.matchMedia('(max-width: 600px)').matches;
|
|
995
|
+
const fullscreen = size === 'pantalla' || (mobile && size !== 'pequeno');
|
|
996
|
+
const width = fullscreen ? '100%' : config.ancho ?? this.widthFor(size);
|
|
997
|
+
const maxWidth = fullscreen ? '100%' : config.maxAncho ?? 'calc(100vw - 2rem)';
|
|
998
|
+
const maxHeight = fullscreen ? '100dvh' : config.maxAlto ?? 'calc(100dvh - 2rem)';
|
|
999
|
+
let publicRef;
|
|
1000
|
+
const cdkRef = this.dialog.open(TdDialogPanel, {
|
|
1001
|
+
data: { component, config, fullscreen },
|
|
1002
|
+
width,
|
|
1003
|
+
height: fullscreen ? '100dvh' : config.alto,
|
|
1004
|
+
maxWidth,
|
|
1005
|
+
maxHeight,
|
|
1006
|
+
hasBackdrop: true,
|
|
1007
|
+
backdropClass: 'cdk-overlay-dark-backdrop',
|
|
1008
|
+
panelClass: this.panelClasses(config, fullscreen),
|
|
1009
|
+
disableClose: config.deshabilitarCierre ?? false,
|
|
1010
|
+
closeOnNavigation: config.cerrarAlNavegar ?? true,
|
|
1011
|
+
autoFocus: config.autoFocus ?? 'first-tabbable',
|
|
1012
|
+
restoreFocus: config.restaurarFoco ?? true,
|
|
1013
|
+
ariaLabel: config.ariaLabel ?? config.titulo,
|
|
1014
|
+
ariaModal: true,
|
|
1015
|
+
providers: (ref) => {
|
|
1016
|
+
publicRef = new TdDialogRef(ref);
|
|
1017
|
+
return [
|
|
1018
|
+
{ provide: TD_DIALOG_DATA, useValue: config.data },
|
|
1019
|
+
{ provide: TD_DIALOG_CONFIG, useValue: config },
|
|
1020
|
+
{ provide: TdDialogRef, useValue: publicRef },
|
|
1021
|
+
];
|
|
1022
|
+
},
|
|
1023
|
+
});
|
|
1024
|
+
return publicRef ?? new TdDialogRef(cdkRef);
|
|
1025
|
+
}
|
|
1026
|
+
closeAll() {
|
|
1027
|
+
this.dialog.closeAll();
|
|
1028
|
+
}
|
|
1029
|
+
widthFor(size) {
|
|
1030
|
+
const widths = {
|
|
1031
|
+
pequeno: 'min(28rem, calc(100vw - 2rem))',
|
|
1032
|
+
mediano: 'min(40rem, calc(100vw - 2rem))',
|
|
1033
|
+
grande: 'min(64rem, calc(100vw - 2rem))',
|
|
1034
|
+
pantalla: '100%',
|
|
1035
|
+
};
|
|
1036
|
+
return widths[size ?? 'mediano'];
|
|
1037
|
+
}
|
|
1038
|
+
panelClasses(config, fullscreen) {
|
|
1039
|
+
const extra = Array.isArray(config.panelClass)
|
|
1040
|
+
? config.panelClass
|
|
1041
|
+
: config.panelClass
|
|
1042
|
+
? [config.panelClass]
|
|
1043
|
+
: [];
|
|
1044
|
+
return [
|
|
1045
|
+
'td-dialog-overlay',
|
|
1046
|
+
`td-dialog-overlay--${config.tamano ?? 'mediano'}`,
|
|
1047
|
+
...(fullscreen ? ['td-dialog-overlay--fullscreen'] : []),
|
|
1048
|
+
...extra,
|
|
1049
|
+
];
|
|
1050
|
+
}
|
|
1051
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1052
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, providedIn: 'root' });
|
|
1053
|
+
}
|
|
1054
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialog, decorators: [{
|
|
1055
|
+
type: Injectable,
|
|
1056
|
+
args: [{ providedIn: 'root' }]
|
|
1057
|
+
}] });
|
|
1058
|
+
|
|
1059
|
+
class TdDialogActions {
|
|
1060
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogActions, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1061
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogActions, isStandalone: true, selector: "td-dialog-actions", ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1062
|
+
}
|
|
1063
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogActions, decorators: [{
|
|
1064
|
+
type: Component,
|
|
1065
|
+
args: [{ selector: 'td-dialog-actions', template: `<ng-content />`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:flex;min-height:3.7rem;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:.5rem;margin:auto -1.5rem -1.5rem;margin-top:auto;border-top:1px solid var(--td-dialog-border, #e6e9f0);padding:.65rem 1.25rem;background:var(--td-dialog-footer, #fafbfc);box-shadow:0 -8px 22px #0f172a09}:host ::ng-deep button{display:inline-flex;min-height:2.25rem;align-items:center;justify-content:center;gap:.45rem;border:1px solid var(--td-dialog-border, #dfe3eb);border-radius:.6rem;padding:.5rem .85rem;color:var(--td-dialog-text, #263147);background:var(--td-dialog-surface, #fff);font:750 .75rem/1 system-ui,sans-serif;cursor:pointer}:host ::ng-deep button:hover{border-color:#9b91e3;background:#f7f5ff}:host ::ng-deep button[tdDialogPrimary]{border-color:transparent;color:#fff;background:linear-gradient(135deg,#5746d8,#7657df);box-shadow:0 7px 16px #5746d833}:host ::ng-deep button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:520px){:host{min-height:auto;align-items:stretch;flex-direction:column-reverse;margin-right:-1.1rem;margin-bottom:-1.1rem;margin-left:-1.1rem;padding:.7rem 1.1rem}:host ::ng-deep button{width:100%}}\n"] }]
|
|
1066
|
+
}] });
|
|
1067
|
+
|
|
1068
|
+
class TdDialogClose {
|
|
1069
|
+
dialogRef = inject(TdDialogRef);
|
|
1070
|
+
result;
|
|
1071
|
+
close() {
|
|
1072
|
+
this.dialogRef.close(this.result);
|
|
1073
|
+
}
|
|
1074
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogClose, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1075
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogClose, isStandalone: true, selector: "[tdDialogClose]", inputs: { result: ["tdDialogClose", "result"] }, host: { listeners: { "click": "close()" } }, ngImport: i0 });
|
|
1076
|
+
}
|
|
1077
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogClose, decorators: [{
|
|
1078
|
+
type: Directive,
|
|
1079
|
+
args: [{
|
|
1080
|
+
selector: '[tdDialogClose]',
|
|
1081
|
+
}]
|
|
1082
|
+
}], propDecorators: { result: [{
|
|
1083
|
+
type: Input,
|
|
1084
|
+
args: ['tdDialogClose']
|
|
1085
|
+
}], close: [{
|
|
1086
|
+
type: HostListener,
|
|
1087
|
+
args: ['click']
|
|
1088
|
+
}] } });
|
|
1089
|
+
class TdDialogPrimary {
|
|
1090
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPrimary, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1091
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.17", type: TdDialogPrimary, isStandalone: true, selector: "[tdDialogPrimary]", ngImport: i0 });
|
|
1092
|
+
}
|
|
1093
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdDialogPrimary, decorators: [{
|
|
1094
|
+
type: Directive,
|
|
1095
|
+
args: [{
|
|
1096
|
+
selector: '[tdDialogPrimary]',
|
|
1097
|
+
}]
|
|
1098
|
+
}] });
|
|
1099
|
+
|
|
713
1100
|
class TdFooter {
|
|
714
1101
|
empresa = 'TelcomDev';
|
|
715
1102
|
texto = 'Todos los derechos reservados.';
|
|
@@ -820,6 +1207,1067 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
820
1207
|
args: ['document:keydown.escape']
|
|
821
1208
|
}] } });
|
|
822
1209
|
|
|
1210
|
+
let inputSequence = 0;
|
|
1211
|
+
class TdInput {
|
|
1212
|
+
cdr = inject(ChangeDetectorRef);
|
|
1213
|
+
generatedId = `td-input-${++inputSequence}`;
|
|
1214
|
+
id = '';
|
|
1215
|
+
name = '';
|
|
1216
|
+
label = 'Campo';
|
|
1217
|
+
type = 'text';
|
|
1218
|
+
placeholder = '';
|
|
1219
|
+
autocomplete = 'off';
|
|
1220
|
+
icon = '';
|
|
1221
|
+
hint = '';
|
|
1222
|
+
error = '';
|
|
1223
|
+
readonly = false;
|
|
1224
|
+
disabled = false;
|
|
1225
|
+
required = false;
|
|
1226
|
+
clearable = false;
|
|
1227
|
+
dark = false;
|
|
1228
|
+
min = null;
|
|
1229
|
+
max = null;
|
|
1230
|
+
step = null;
|
|
1231
|
+
minlength = null;
|
|
1232
|
+
maxlength = null;
|
|
1233
|
+
valueChange = new EventEmitter();
|
|
1234
|
+
value = '';
|
|
1235
|
+
focused = false;
|
|
1236
|
+
passwordVisible = false;
|
|
1237
|
+
get inputId() {
|
|
1238
|
+
return this.id || this.generatedId;
|
|
1239
|
+
}
|
|
1240
|
+
get descriptionId() {
|
|
1241
|
+
return this.error || this.hint ? `${this.inputId}-description` : null;
|
|
1242
|
+
}
|
|
1243
|
+
get resolvedType() {
|
|
1244
|
+
return this.type === 'password' && this.passwordVisible ? 'text' : this.type;
|
|
1245
|
+
}
|
|
1246
|
+
onChange = () => undefined;
|
|
1247
|
+
onTouched = () => undefined;
|
|
1248
|
+
writeValue(value) {
|
|
1249
|
+
this.value = value === null || value === undefined ? '' : String(value);
|
|
1250
|
+
this.cdr.markForCheck();
|
|
1251
|
+
}
|
|
1252
|
+
registerOnChange(fn) {
|
|
1253
|
+
this.onChange = fn;
|
|
1254
|
+
}
|
|
1255
|
+
registerOnTouched(fn) {
|
|
1256
|
+
this.onTouched = fn;
|
|
1257
|
+
}
|
|
1258
|
+
setDisabledState(disabled) {
|
|
1259
|
+
this.disabled = disabled;
|
|
1260
|
+
this.cdr.markForCheck();
|
|
1261
|
+
}
|
|
1262
|
+
handleInput(event) {
|
|
1263
|
+
this.setValue(event.target.value);
|
|
1264
|
+
}
|
|
1265
|
+
handleBlur() {
|
|
1266
|
+
this.focused = false;
|
|
1267
|
+
this.onTouched();
|
|
1268
|
+
}
|
|
1269
|
+
clear() {
|
|
1270
|
+
this.setValue('');
|
|
1271
|
+
}
|
|
1272
|
+
setValue(value) {
|
|
1273
|
+
this.value = value;
|
|
1274
|
+
this.onChange(value);
|
|
1275
|
+
this.valueChange.emit(value);
|
|
1276
|
+
}
|
|
1277
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1278
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdInput, isStandalone: true, selector: "td-input", inputs: { id: "id", name: "name", label: "label", type: "type", placeholder: "placeholder", autocomplete: "autocomplete", icon: "icon", hint: "hint", error: "error", readonly: "readonly", disabled: "disabled", required: "required", clearable: "clearable", dark: "dark", min: "min", max: "max", step: "step", minlength: "minlength", maxlength: "maxlength", value: "value" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
1279
|
+
{
|
|
1280
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1281
|
+
useExisting: forwardRef(() => TdInput),
|
|
1282
|
+
multi: true,
|
|
1283
|
+
},
|
|
1284
|
+
], ngImport: i0, template: `
|
|
1285
|
+
<div
|
|
1286
|
+
class="td-input"
|
|
1287
|
+
[class.td-input--focused]="focused"
|
|
1288
|
+
[class.td-input--error]="!!error"
|
|
1289
|
+
[class.td-input--disabled]="disabled"
|
|
1290
|
+
[class.td-input--dark]="dark"
|
|
1291
|
+
>
|
|
1292
|
+
<label [for]="inputId">{{ label }}</label>
|
|
1293
|
+
|
|
1294
|
+
<div class="td-input__control">
|
|
1295
|
+
@if (icon) {
|
|
1296
|
+
<td-icon class="td-input__icon" [nombre]="icon" />
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
<input
|
|
1300
|
+
[id]="inputId"
|
|
1301
|
+
[name]="name"
|
|
1302
|
+
[type]="resolvedType"
|
|
1303
|
+
[value]="value"
|
|
1304
|
+
[placeholder]="placeholder"
|
|
1305
|
+
[autocomplete]="autocomplete"
|
|
1306
|
+
[disabled]="disabled"
|
|
1307
|
+
[readonly]="readonly"
|
|
1308
|
+
[required]="required"
|
|
1309
|
+
[min]="min"
|
|
1310
|
+
[max]="max"
|
|
1311
|
+
[step]="step"
|
|
1312
|
+
[attr.minlength]="minlength"
|
|
1313
|
+
[attr.maxlength]="maxlength"
|
|
1314
|
+
[attr.aria-describedby]="descriptionId"
|
|
1315
|
+
[attr.aria-invalid]="!!error"
|
|
1316
|
+
(input)="handleInput($event)"
|
|
1317
|
+
(focus)="focused = true"
|
|
1318
|
+
(blur)="handleBlur()"
|
|
1319
|
+
/>
|
|
1320
|
+
|
|
1321
|
+
@if (clearable && value && !disabled && !readonly) {
|
|
1322
|
+
<button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
|
|
1323
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
1324
|
+
</button>
|
|
1325
|
+
}
|
|
1326
|
+
|
|
1327
|
+
@if (type === 'password') {
|
|
1328
|
+
<button
|
|
1329
|
+
type="button"
|
|
1330
|
+
class="td-input__action"
|
|
1331
|
+
[title]="passwordVisible ? 'Ocultar contraseña' : 'Mostrar contraseña'"
|
|
1332
|
+
(click)="passwordVisible = !passwordVisible"
|
|
1333
|
+
>
|
|
1334
|
+
<td-icon [nombre]="passwordVisible ? 'visibility_off' : 'visibility'" />
|
|
1335
|
+
</button>
|
|
1336
|
+
}
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
|
|
1340
|
+
@if (error || hint) {
|
|
1341
|
+
<p
|
|
1342
|
+
class="td-input__message"
|
|
1343
|
+
[class.td-input__message--error]="!!error"
|
|
1344
|
+
[id]="descriptionId"
|
|
1345
|
+
>
|
|
1346
|
+
{{ error || hint }}
|
|
1347
|
+
</p>
|
|
1348
|
+
}
|
|
1349
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"], dependencies: [{ kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1350
|
+
}
|
|
1351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdInput, decorators: [{
|
|
1352
|
+
type: Component,
|
|
1353
|
+
args: [{ selector: 'td-input', imports: [TdIcon], template: `
|
|
1354
|
+
<div
|
|
1355
|
+
class="td-input"
|
|
1356
|
+
[class.td-input--focused]="focused"
|
|
1357
|
+
[class.td-input--error]="!!error"
|
|
1358
|
+
[class.td-input--disabled]="disabled"
|
|
1359
|
+
[class.td-input--dark]="dark"
|
|
1360
|
+
>
|
|
1361
|
+
<label [for]="inputId">{{ label }}</label>
|
|
1362
|
+
|
|
1363
|
+
<div class="td-input__control">
|
|
1364
|
+
@if (icon) {
|
|
1365
|
+
<td-icon class="td-input__icon" [nombre]="icon" />
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
<input
|
|
1369
|
+
[id]="inputId"
|
|
1370
|
+
[name]="name"
|
|
1371
|
+
[type]="resolvedType"
|
|
1372
|
+
[value]="value"
|
|
1373
|
+
[placeholder]="placeholder"
|
|
1374
|
+
[autocomplete]="autocomplete"
|
|
1375
|
+
[disabled]="disabled"
|
|
1376
|
+
[readonly]="readonly"
|
|
1377
|
+
[required]="required"
|
|
1378
|
+
[min]="min"
|
|
1379
|
+
[max]="max"
|
|
1380
|
+
[step]="step"
|
|
1381
|
+
[attr.minlength]="minlength"
|
|
1382
|
+
[attr.maxlength]="maxlength"
|
|
1383
|
+
[attr.aria-describedby]="descriptionId"
|
|
1384
|
+
[attr.aria-invalid]="!!error"
|
|
1385
|
+
(input)="handleInput($event)"
|
|
1386
|
+
(focus)="focused = true"
|
|
1387
|
+
(blur)="handleBlur()"
|
|
1388
|
+
/>
|
|
1389
|
+
|
|
1390
|
+
@if (clearable && value && !disabled && !readonly) {
|
|
1391
|
+
<button type="button" class="td-input__action" title="Limpiar" (click)="clear()">
|
|
1392
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
1393
|
+
</button>
|
|
1394
|
+
}
|
|
1395
|
+
|
|
1396
|
+
@if (type === 'password') {
|
|
1397
|
+
<button
|
|
1398
|
+
type="button"
|
|
1399
|
+
class="td-input__action"
|
|
1400
|
+
[title]="passwordVisible ? 'Ocultar contraseña' : 'Mostrar contraseña'"
|
|
1401
|
+
(click)="passwordVisible = !passwordVisible"
|
|
1402
|
+
>
|
|
1403
|
+
<td-icon [nombre]="passwordVisible ? 'visibility_off' : 'visibility'" />
|
|
1404
|
+
</button>
|
|
1405
|
+
}
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
|
|
1409
|
+
@if (error || hint) {
|
|
1410
|
+
<p
|
|
1411
|
+
class="td-input__message"
|
|
1412
|
+
[class.td-input__message--error]="!!error"
|
|
1413
|
+
[id]="descriptionId"
|
|
1414
|
+
>
|
|
1415
|
+
{{ error || hint }}
|
|
1416
|
+
</p>
|
|
1417
|
+
}
|
|
1418
|
+
`, providers: [
|
|
1419
|
+
{
|
|
1420
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1421
|
+
useExisting: forwardRef(() => TdInput),
|
|
1422
|
+
multi: true,
|
|
1423
|
+
},
|
|
1424
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-input{--td-input-bg: #fff;--td-input-border: #dfe3eb;--td-input-text: #263147;--td-input-muted: #748096;position:relative;display:flex;min-height:3.15rem;align-items:center;border:1px solid var(--td-input-border);border-radius:.78rem;background:var(--td-input-bg);transition:border-color .14s ease,box-shadow .14s ease,background .14s ease}.td-input--dark{--td-input-bg: #19191f;--td-input-border: #34343e;--td-input-text: #ededf0;--td-input-muted: #a1a1aa;color-scheme:dark}.td-input:hover:not(.td-input--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-input-border))}.td-input--focused{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-input--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-input--disabled{opacity:.58;background:#f5f6f8;cursor:not-allowed}.td-input label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-input-muted);background:var(--td-input-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-input--focused label{color:#5746d8}.td-input--error label{color:#d33f3f}.td-input__control{display:flex;width:100%;min-width:0;align-items:center;gap:.55rem;padding:.25rem .7rem}.td-input__icon{flex:0 0 auto;color:var(--td-input-muted)}input{width:100%;min-width:0;height:2.55rem;border:0;outline:0;color:var(--td-input-text);background:transparent;font:550 .78rem/1 system-ui,sans-serif}input::placeholder{color:color-mix(in srgb,var(--td-input-muted) 72%,transparent)}input:disabled{cursor:not-allowed}input[type=search]::-webkit-search-cancel-button{display:none}.td-input__action{display:grid;width:2rem;height:2rem;flex:0 0 auto;place-items:center;border:0;border-radius:.5rem;color:var(--td-input-muted);background:transparent;cursor:pointer}.td-input__action:hover{color:#5746d8;background:#f2f0ff}.td-input--dark .td-input__action:hover{color:#b9b0fa;background:#292931}.td-input__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-input__message--error{color:#c43636}\n"] }]
|
|
1425
|
+
}], propDecorators: { id: [{
|
|
1426
|
+
type: Input
|
|
1427
|
+
}], name: [{
|
|
1428
|
+
type: Input
|
|
1429
|
+
}], label: [{
|
|
1430
|
+
type: Input
|
|
1431
|
+
}], type: [{
|
|
1432
|
+
type: Input
|
|
1433
|
+
}], placeholder: [{
|
|
1434
|
+
type: Input
|
|
1435
|
+
}], autocomplete: [{
|
|
1436
|
+
type: Input
|
|
1437
|
+
}], icon: [{
|
|
1438
|
+
type: Input
|
|
1439
|
+
}], hint: [{
|
|
1440
|
+
type: Input
|
|
1441
|
+
}], error: [{
|
|
1442
|
+
type: Input
|
|
1443
|
+
}], readonly: [{
|
|
1444
|
+
type: Input
|
|
1445
|
+
}], disabled: [{
|
|
1446
|
+
type: Input
|
|
1447
|
+
}], required: [{
|
|
1448
|
+
type: Input
|
|
1449
|
+
}], clearable: [{
|
|
1450
|
+
type: Input
|
|
1451
|
+
}], dark: [{
|
|
1452
|
+
type: Input
|
|
1453
|
+
}], min: [{
|
|
1454
|
+
type: Input
|
|
1455
|
+
}], max: [{
|
|
1456
|
+
type: Input
|
|
1457
|
+
}], step: [{
|
|
1458
|
+
type: Input
|
|
1459
|
+
}], minlength: [{
|
|
1460
|
+
type: Input
|
|
1461
|
+
}], maxlength: [{
|
|
1462
|
+
type: Input
|
|
1463
|
+
}], valueChange: [{
|
|
1464
|
+
type: Output
|
|
1465
|
+
}], value: [{
|
|
1466
|
+
type: Input
|
|
1467
|
+
}] } });
|
|
1468
|
+
|
|
1469
|
+
let autocompleteSequence = 0;
|
|
1470
|
+
class TdAutocompleteSelect {
|
|
1471
|
+
cdr = inject(ChangeDetectorRef);
|
|
1472
|
+
document = inject(DOCUMENT);
|
|
1473
|
+
destroyRef = inject(DestroyRef);
|
|
1474
|
+
scrollStrategies = inject(ScrollStrategyOptions);
|
|
1475
|
+
generatedId = `td-autocomplete-${++autocompleteSequence}`;
|
|
1476
|
+
searchInput;
|
|
1477
|
+
connectedOverlay;
|
|
1478
|
+
label = 'Buscar y seleccionar';
|
|
1479
|
+
placeholder = 'Escribe para buscar...';
|
|
1480
|
+
options = [];
|
|
1481
|
+
hint = '';
|
|
1482
|
+
error = '';
|
|
1483
|
+
emptyText = 'No se encontraron resultados';
|
|
1484
|
+
clearable = true;
|
|
1485
|
+
dark = false;
|
|
1486
|
+
disabled = false;
|
|
1487
|
+
scrollBehavior = 'reposition';
|
|
1488
|
+
minimumCharacters = 0;
|
|
1489
|
+
filterWith = (option, search) => `${option.label} ${option.description ?? ''}`.toLocaleLowerCase().includes(search);
|
|
1490
|
+
compareWith = (first, second) => Object.is(first, second);
|
|
1491
|
+
selectionChange = new EventEmitter();
|
|
1492
|
+
searchChange = new EventEmitter();
|
|
1493
|
+
value = null;
|
|
1494
|
+
search = '';
|
|
1495
|
+
open = false;
|
|
1496
|
+
activeIndex = -1;
|
|
1497
|
+
scrollStrategy = this.scrollStrategies.reposition();
|
|
1498
|
+
get inputId() {
|
|
1499
|
+
return `${this.generatedId}-input`;
|
|
1500
|
+
}
|
|
1501
|
+
get listId() {
|
|
1502
|
+
return `${this.generatedId}-list`;
|
|
1503
|
+
}
|
|
1504
|
+
get filteredOptions() {
|
|
1505
|
+
const normalized = this.search.trim().toLocaleLowerCase();
|
|
1506
|
+
if (normalized.length < this.minimumCharacters)
|
|
1507
|
+
return [];
|
|
1508
|
+
return this.options.filter((option) => this.filterWith(option, normalized));
|
|
1509
|
+
}
|
|
1510
|
+
onTouched = () => {
|
|
1511
|
+
this.touched();
|
|
1512
|
+
};
|
|
1513
|
+
changed = () => undefined;
|
|
1514
|
+
touched = () => undefined;
|
|
1515
|
+
constructor() {
|
|
1516
|
+
const scrollListener = (event) => {
|
|
1517
|
+
const target = event.target;
|
|
1518
|
+
if (target instanceof Element && target.closest('.td-select-panel'))
|
|
1519
|
+
return;
|
|
1520
|
+
if (this.open) {
|
|
1521
|
+
if (this.scrollBehavior === 'close') {
|
|
1522
|
+
this.close();
|
|
1523
|
+
}
|
|
1524
|
+
else {
|
|
1525
|
+
this.connectedOverlay?.overlayRef.updatePosition();
|
|
1526
|
+
}
|
|
1527
|
+
this.cdr.markForCheck();
|
|
1528
|
+
}
|
|
1529
|
+
};
|
|
1530
|
+
this.document.addEventListener('scroll', scrollListener, true);
|
|
1531
|
+
this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
|
|
1532
|
+
}
|
|
1533
|
+
writeValue(value) {
|
|
1534
|
+
this.value = value ?? null;
|
|
1535
|
+
this.search = this.options.find((option) => this.compare(option.value, this.value))?.label ?? '';
|
|
1536
|
+
this.cdr.markForCheck();
|
|
1537
|
+
}
|
|
1538
|
+
registerOnChange(fn) {
|
|
1539
|
+
this.changed = fn;
|
|
1540
|
+
}
|
|
1541
|
+
registerOnTouched(fn) {
|
|
1542
|
+
this.touched = fn;
|
|
1543
|
+
}
|
|
1544
|
+
setDisabledState(disabled) {
|
|
1545
|
+
this.disabled = disabled;
|
|
1546
|
+
this.cdr.markForCheck();
|
|
1547
|
+
}
|
|
1548
|
+
compare(first, second) {
|
|
1549
|
+
return this.compareWith(first, second);
|
|
1550
|
+
}
|
|
1551
|
+
openPanel() {
|
|
1552
|
+
if (this.disabled)
|
|
1553
|
+
return;
|
|
1554
|
+
this.open = true;
|
|
1555
|
+
this.activeIndex = this.firstEnabledIndex();
|
|
1556
|
+
}
|
|
1557
|
+
close() {
|
|
1558
|
+
this.open = false;
|
|
1559
|
+
const selected = this.options.find((option) => this.compare(option.value, this.value));
|
|
1560
|
+
if (selected)
|
|
1561
|
+
this.search = selected.label;
|
|
1562
|
+
this.touched();
|
|
1563
|
+
}
|
|
1564
|
+
handleInput(event) {
|
|
1565
|
+
this.search = event.target.value;
|
|
1566
|
+
this.value = null;
|
|
1567
|
+
this.changed(null);
|
|
1568
|
+
this.searchChange.emit(this.search);
|
|
1569
|
+
this.openPanel();
|
|
1570
|
+
this.activeIndex = this.firstEnabledIndex();
|
|
1571
|
+
}
|
|
1572
|
+
select(option) {
|
|
1573
|
+
if (option.disabled)
|
|
1574
|
+
return;
|
|
1575
|
+
this.value = option.value;
|
|
1576
|
+
this.search = option.label;
|
|
1577
|
+
this.changed(option.value);
|
|
1578
|
+
this.selectionChange.emit(option.value);
|
|
1579
|
+
this.close();
|
|
1580
|
+
}
|
|
1581
|
+
clear(event) {
|
|
1582
|
+
event.stopPropagation();
|
|
1583
|
+
this.value = null;
|
|
1584
|
+
this.search = '';
|
|
1585
|
+
this.changed(null);
|
|
1586
|
+
this.selectionChange.emit(null);
|
|
1587
|
+
this.searchChange.emit('');
|
|
1588
|
+
this.openPanel();
|
|
1589
|
+
queueMicrotask(() => this.searchInput?.nativeElement.focus());
|
|
1590
|
+
}
|
|
1591
|
+
handleKeydown(event) {
|
|
1592
|
+
if (event.key === 'Escape') {
|
|
1593
|
+
event.preventDefault();
|
|
1594
|
+
this.close();
|
|
1595
|
+
}
|
|
1596
|
+
else if (event.key === 'ArrowDown') {
|
|
1597
|
+
event.preventDefault();
|
|
1598
|
+
this.openPanel();
|
|
1599
|
+
this.moveActive(1);
|
|
1600
|
+
}
|
|
1601
|
+
else if (event.key === 'ArrowUp') {
|
|
1602
|
+
event.preventDefault();
|
|
1603
|
+
this.openPanel();
|
|
1604
|
+
this.moveActive(-1);
|
|
1605
|
+
}
|
|
1606
|
+
else if (event.key === 'Enter' && this.open && this.activeIndex >= 0) {
|
|
1607
|
+
event.preventDefault();
|
|
1608
|
+
const option = this.filteredOptions[this.activeIndex];
|
|
1609
|
+
if (option)
|
|
1610
|
+
this.select(option);
|
|
1611
|
+
}
|
|
1612
|
+
}
|
|
1613
|
+
moveActive(direction) {
|
|
1614
|
+
const options = this.filteredOptions;
|
|
1615
|
+
if (!options.length)
|
|
1616
|
+
return;
|
|
1617
|
+
let next = this.activeIndex;
|
|
1618
|
+
for (let index = 0; index < options.length; index++) {
|
|
1619
|
+
next = (next + direction + options.length) % options.length;
|
|
1620
|
+
if (!options[next]?.disabled) {
|
|
1621
|
+
this.activeIndex = next;
|
|
1622
|
+
return;
|
|
1623
|
+
}
|
|
1624
|
+
}
|
|
1625
|
+
}
|
|
1626
|
+
firstEnabledIndex() {
|
|
1627
|
+
return this.filteredOptions.findIndex((option) => !option.disabled);
|
|
1628
|
+
}
|
|
1629
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdAutocompleteSelect, isStandalone: true, selector: "td-autocomplete-select", inputs: { label: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", minimumCharacters: "minimumCharacters", filterWith: "filterWith", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange", searchChange: "searchChange" }, providers: [
|
|
1631
|
+
{
|
|
1632
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1633
|
+
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
1634
|
+
multi: true,
|
|
1635
|
+
},
|
|
1636
|
+
], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
|
|
1637
|
+
<div
|
|
1638
|
+
cdkOverlayOrigin
|
|
1639
|
+
#origin="cdkOverlayOrigin"
|
|
1640
|
+
class="td-select td-select--autocomplete"
|
|
1641
|
+
[class.td-select--open]="open"
|
|
1642
|
+
[class.td-select--error]="!!error"
|
|
1643
|
+
[class.td-select--disabled]="disabled"
|
|
1644
|
+
[class.td-select--dark]="dark"
|
|
1645
|
+
>
|
|
1646
|
+
<label [for]="inputId">{{ label }}</label>
|
|
1647
|
+
<div class="td-select__trigger">
|
|
1648
|
+
<td-icon class="td-select__leading" nombre="search" />
|
|
1649
|
+
<input
|
|
1650
|
+
#searchInput
|
|
1651
|
+
[id]="inputId"
|
|
1652
|
+
type="search"
|
|
1653
|
+
autocomplete="off"
|
|
1654
|
+
role="combobox"
|
|
1655
|
+
[value]="search"
|
|
1656
|
+
[placeholder]="placeholder"
|
|
1657
|
+
[disabled]="disabled"
|
|
1658
|
+
[attr.aria-expanded]="open"
|
|
1659
|
+
[attr.aria-controls]="listId"
|
|
1660
|
+
(focus)="openPanel()"
|
|
1661
|
+
(input)="handleInput($event)"
|
|
1662
|
+
(keydown)="handleKeydown($event)"
|
|
1663
|
+
(blur)="onTouched()"
|
|
1664
|
+
/>
|
|
1665
|
+
@if (clearable && (value !== null || search) && !disabled) {
|
|
1666
|
+
<button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
|
|
1667
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
1668
|
+
</button>
|
|
1669
|
+
}
|
|
1670
|
+
<td-icon
|
|
1671
|
+
class="td-select__chevron"
|
|
1672
|
+
[class.td-select__chevron--open]="open"
|
|
1673
|
+
nombre="chevron_down"
|
|
1674
|
+
/>
|
|
1675
|
+
</div>
|
|
1676
|
+
</div>
|
|
1677
|
+
|
|
1678
|
+
@if (error || hint) {
|
|
1679
|
+
<p class="td-select__message" [class.td-select__message--error]="!!error">
|
|
1680
|
+
{{ error || hint }}
|
|
1681
|
+
</p>
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
<ng-template
|
|
1685
|
+
cdkConnectedOverlay
|
|
1686
|
+
#connectedOverlay="cdkConnectedOverlay"
|
|
1687
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
1688
|
+
[cdkConnectedOverlayOpen]="open"
|
|
1689
|
+
[cdkConnectedOverlayScrollStrategy]="scrollStrategy"
|
|
1690
|
+
[cdkConnectedOverlayMatchWidth]="true"
|
|
1691
|
+
[cdkConnectedOverlayViewportMargin]="8"
|
|
1692
|
+
[cdkConnectedOverlayPush]="true"
|
|
1693
|
+
(overlayOutsideClick)="close()"
|
|
1694
|
+
(overlayKeydown)="handleKeydown($event)"
|
|
1695
|
+
(detach)="close()"
|
|
1696
|
+
>
|
|
1697
|
+
<div
|
|
1698
|
+
class="td-select-panel"
|
|
1699
|
+
[class.td-select-panel--dark]="dark"
|
|
1700
|
+
[id]="listId"
|
|
1701
|
+
role="listbox"
|
|
1702
|
+
>
|
|
1703
|
+
@if (!filteredOptions.length) {
|
|
1704
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
1705
|
+
}
|
|
1706
|
+
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
1707
|
+
<button
|
|
1708
|
+
type="button"
|
|
1709
|
+
role="option"
|
|
1710
|
+
[class.td-select-panel__option--active]="index === activeIndex"
|
|
1711
|
+
[class.td-select-panel__option--selected]="compare(option.value, value)"
|
|
1712
|
+
[disabled]="option.disabled"
|
|
1713
|
+
(mousedown)="$event.preventDefault()"
|
|
1714
|
+
(mouseenter)="activeIndex = index"
|
|
1715
|
+
(click)="select(option)"
|
|
1716
|
+
>
|
|
1717
|
+
@if (option.icon) {
|
|
1718
|
+
<td-icon [nombre]="option.icon" />
|
|
1719
|
+
}
|
|
1720
|
+
<span>
|
|
1721
|
+
<strong>{{ option.label }}</strong>
|
|
1722
|
+
@if (option.description) {
|
|
1723
|
+
<small>{{ option.description }}</small>
|
|
1724
|
+
}
|
|
1725
|
+
</span>
|
|
1726
|
+
@if (compare(option.value, value)) {
|
|
1727
|
+
<td-icon class="td-select-panel__check" nombre="check" />
|
|
1728
|
+
}
|
|
1729
|
+
</button>
|
|
1730
|
+
}
|
|
1731
|
+
</div>
|
|
1732
|
+
</ng-template>
|
|
1733
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1734
|
+
}
|
|
1735
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdAutocompleteSelect, decorators: [{
|
|
1736
|
+
type: Component,
|
|
1737
|
+
args: [{ selector: 'td-autocomplete-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
|
|
1738
|
+
<div
|
|
1739
|
+
cdkOverlayOrigin
|
|
1740
|
+
#origin="cdkOverlayOrigin"
|
|
1741
|
+
class="td-select td-select--autocomplete"
|
|
1742
|
+
[class.td-select--open]="open"
|
|
1743
|
+
[class.td-select--error]="!!error"
|
|
1744
|
+
[class.td-select--disabled]="disabled"
|
|
1745
|
+
[class.td-select--dark]="dark"
|
|
1746
|
+
>
|
|
1747
|
+
<label [for]="inputId">{{ label }}</label>
|
|
1748
|
+
<div class="td-select__trigger">
|
|
1749
|
+
<td-icon class="td-select__leading" nombre="search" />
|
|
1750
|
+
<input
|
|
1751
|
+
#searchInput
|
|
1752
|
+
[id]="inputId"
|
|
1753
|
+
type="search"
|
|
1754
|
+
autocomplete="off"
|
|
1755
|
+
role="combobox"
|
|
1756
|
+
[value]="search"
|
|
1757
|
+
[placeholder]="placeholder"
|
|
1758
|
+
[disabled]="disabled"
|
|
1759
|
+
[attr.aria-expanded]="open"
|
|
1760
|
+
[attr.aria-controls]="listId"
|
|
1761
|
+
(focus)="openPanel()"
|
|
1762
|
+
(input)="handleInput($event)"
|
|
1763
|
+
(keydown)="handleKeydown($event)"
|
|
1764
|
+
(blur)="onTouched()"
|
|
1765
|
+
/>
|
|
1766
|
+
@if (clearable && (value !== null || search) && !disabled) {
|
|
1767
|
+
<button type="button" class="td-select__clear" title="Limpiar" (click)="clear($event)">
|
|
1768
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
1769
|
+
</button>
|
|
1770
|
+
}
|
|
1771
|
+
<td-icon
|
|
1772
|
+
class="td-select__chevron"
|
|
1773
|
+
[class.td-select__chevron--open]="open"
|
|
1774
|
+
nombre="chevron_down"
|
|
1775
|
+
/>
|
|
1776
|
+
</div>
|
|
1777
|
+
</div>
|
|
1778
|
+
|
|
1779
|
+
@if (error || hint) {
|
|
1780
|
+
<p class="td-select__message" [class.td-select__message--error]="!!error">
|
|
1781
|
+
{{ error || hint }}
|
|
1782
|
+
</p>
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
<ng-template
|
|
1786
|
+
cdkConnectedOverlay
|
|
1787
|
+
#connectedOverlay="cdkConnectedOverlay"
|
|
1788
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
1789
|
+
[cdkConnectedOverlayOpen]="open"
|
|
1790
|
+
[cdkConnectedOverlayScrollStrategy]="scrollStrategy"
|
|
1791
|
+
[cdkConnectedOverlayMatchWidth]="true"
|
|
1792
|
+
[cdkConnectedOverlayViewportMargin]="8"
|
|
1793
|
+
[cdkConnectedOverlayPush]="true"
|
|
1794
|
+
(overlayOutsideClick)="close()"
|
|
1795
|
+
(overlayKeydown)="handleKeydown($event)"
|
|
1796
|
+
(detach)="close()"
|
|
1797
|
+
>
|
|
1798
|
+
<div
|
|
1799
|
+
class="td-select-panel"
|
|
1800
|
+
[class.td-select-panel--dark]="dark"
|
|
1801
|
+
[id]="listId"
|
|
1802
|
+
role="listbox"
|
|
1803
|
+
>
|
|
1804
|
+
@if (!filteredOptions.length) {
|
|
1805
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
1806
|
+
}
|
|
1807
|
+
@for (option of filteredOptions; track option.value; let index = $index) {
|
|
1808
|
+
<button
|
|
1809
|
+
type="button"
|
|
1810
|
+
role="option"
|
|
1811
|
+
[class.td-select-panel__option--active]="index === activeIndex"
|
|
1812
|
+
[class.td-select-panel__option--selected]="compare(option.value, value)"
|
|
1813
|
+
[disabled]="option.disabled"
|
|
1814
|
+
(mousedown)="$event.preventDefault()"
|
|
1815
|
+
(mouseenter)="activeIndex = index"
|
|
1816
|
+
(click)="select(option)"
|
|
1817
|
+
>
|
|
1818
|
+
@if (option.icon) {
|
|
1819
|
+
<td-icon [nombre]="option.icon" />
|
|
1820
|
+
}
|
|
1821
|
+
<span>
|
|
1822
|
+
<strong>{{ option.label }}</strong>
|
|
1823
|
+
@if (option.description) {
|
|
1824
|
+
<small>{{ option.description }}</small>
|
|
1825
|
+
}
|
|
1826
|
+
</span>
|
|
1827
|
+
@if (compare(option.value, value)) {
|
|
1828
|
+
<td-icon class="td-select-panel__check" nombre="check" />
|
|
1829
|
+
}
|
|
1830
|
+
</button>
|
|
1831
|
+
}
|
|
1832
|
+
</div>
|
|
1833
|
+
</ng-template>
|
|
1834
|
+
`, providers: [
|
|
1835
|
+
{
|
|
1836
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1837
|
+
useExisting: forwardRef(() => TdAutocompleteSelect),
|
|
1838
|
+
multi: true,
|
|
1839
|
+
},
|
|
1840
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
1841
|
+
}], ctorParameters: () => [], propDecorators: { searchInput: [{
|
|
1842
|
+
type: ViewChild,
|
|
1843
|
+
args: ['searchInput']
|
|
1844
|
+
}], connectedOverlay: [{
|
|
1845
|
+
type: ViewChild,
|
|
1846
|
+
args: [CdkConnectedOverlay]
|
|
1847
|
+
}], label: [{
|
|
1848
|
+
type: Input
|
|
1849
|
+
}], placeholder: [{
|
|
1850
|
+
type: Input
|
|
1851
|
+
}], options: [{
|
|
1852
|
+
type: Input
|
|
1853
|
+
}], hint: [{
|
|
1854
|
+
type: Input
|
|
1855
|
+
}], error: [{
|
|
1856
|
+
type: Input
|
|
1857
|
+
}], emptyText: [{
|
|
1858
|
+
type: Input
|
|
1859
|
+
}], clearable: [{
|
|
1860
|
+
type: Input
|
|
1861
|
+
}], dark: [{
|
|
1862
|
+
type: Input
|
|
1863
|
+
}], disabled: [{
|
|
1864
|
+
type: Input
|
|
1865
|
+
}], scrollBehavior: [{
|
|
1866
|
+
type: Input
|
|
1867
|
+
}], minimumCharacters: [{
|
|
1868
|
+
type: Input
|
|
1869
|
+
}], filterWith: [{
|
|
1870
|
+
type: Input
|
|
1871
|
+
}], compareWith: [{
|
|
1872
|
+
type: Input
|
|
1873
|
+
}], selectionChange: [{
|
|
1874
|
+
type: Output
|
|
1875
|
+
}], searchChange: [{
|
|
1876
|
+
type: Output
|
|
1877
|
+
}] } });
|
|
1878
|
+
|
|
1879
|
+
let selectSequence = 0;
|
|
1880
|
+
class TdSelect {
|
|
1881
|
+
cdr = inject(ChangeDetectorRef);
|
|
1882
|
+
document = inject(DOCUMENT);
|
|
1883
|
+
destroyRef = inject(DestroyRef);
|
|
1884
|
+
scrollStrategies = inject(ScrollStrategyOptions);
|
|
1885
|
+
generatedId = `td-select-${++selectSequence}`;
|
|
1886
|
+
connectedOverlay;
|
|
1887
|
+
label = 'Seleccionar';
|
|
1888
|
+
placeholder = 'Selecciona una opción';
|
|
1889
|
+
options = [];
|
|
1890
|
+
hint = '';
|
|
1891
|
+
error = '';
|
|
1892
|
+
emptyText = 'No hay opciones disponibles';
|
|
1893
|
+
clearable = false;
|
|
1894
|
+
dark = false;
|
|
1895
|
+
disabled = false;
|
|
1896
|
+
scrollBehavior = 'reposition';
|
|
1897
|
+
compareWith = (first, second) => Object.is(first, second);
|
|
1898
|
+
selectionChange = new EventEmitter();
|
|
1899
|
+
value = null;
|
|
1900
|
+
open = false;
|
|
1901
|
+
activeIndex = -1;
|
|
1902
|
+
scrollStrategy = this.scrollStrategies.reposition();
|
|
1903
|
+
get labelId() {
|
|
1904
|
+
return `${this.generatedId}-label`;
|
|
1905
|
+
}
|
|
1906
|
+
get listId() {
|
|
1907
|
+
return `${this.generatedId}-list`;
|
|
1908
|
+
}
|
|
1909
|
+
get selectedOption() {
|
|
1910
|
+
return this.options.find((option) => this.compare(option.value, this.value));
|
|
1911
|
+
}
|
|
1912
|
+
onChange = () => undefined;
|
|
1913
|
+
onTouched = () => undefined;
|
|
1914
|
+
constructor() {
|
|
1915
|
+
const scrollListener = (event) => {
|
|
1916
|
+
const target = event.target;
|
|
1917
|
+
if (target instanceof Element && target.closest('.td-select-panel'))
|
|
1918
|
+
return;
|
|
1919
|
+
if (this.open) {
|
|
1920
|
+
if (this.scrollBehavior === 'close') {
|
|
1921
|
+
this.close();
|
|
1922
|
+
}
|
|
1923
|
+
else {
|
|
1924
|
+
this.connectedOverlay?.overlayRef.updatePosition();
|
|
1925
|
+
}
|
|
1926
|
+
this.cdr.markForCheck();
|
|
1927
|
+
}
|
|
1928
|
+
};
|
|
1929
|
+
this.document.addEventListener('scroll', scrollListener, true);
|
|
1930
|
+
this.destroyRef.onDestroy(() => this.document.removeEventListener('scroll', scrollListener, true));
|
|
1931
|
+
}
|
|
1932
|
+
writeValue(value) {
|
|
1933
|
+
this.value = value ?? null;
|
|
1934
|
+
this.cdr.markForCheck();
|
|
1935
|
+
}
|
|
1936
|
+
registerOnChange(fn) {
|
|
1937
|
+
this.onChange = fn;
|
|
1938
|
+
}
|
|
1939
|
+
registerOnTouched(fn) {
|
|
1940
|
+
this.onTouched = fn;
|
|
1941
|
+
}
|
|
1942
|
+
setDisabledState(disabled) {
|
|
1943
|
+
this.disabled = disabled;
|
|
1944
|
+
this.cdr.markForCheck();
|
|
1945
|
+
}
|
|
1946
|
+
compare(first, second) {
|
|
1947
|
+
return this.compareWith(first, second);
|
|
1948
|
+
}
|
|
1949
|
+
toggle() {
|
|
1950
|
+
if (this.disabled)
|
|
1951
|
+
return;
|
|
1952
|
+
this.open ? this.close() : this.openPanel();
|
|
1953
|
+
}
|
|
1954
|
+
close() {
|
|
1955
|
+
if (!this.open)
|
|
1956
|
+
return;
|
|
1957
|
+
this.open = false;
|
|
1958
|
+
this.onTouched();
|
|
1959
|
+
}
|
|
1960
|
+
select(option) {
|
|
1961
|
+
if (option.disabled)
|
|
1962
|
+
return;
|
|
1963
|
+
this.setValue(option.value);
|
|
1964
|
+
this.close();
|
|
1965
|
+
}
|
|
1966
|
+
clear(event) {
|
|
1967
|
+
event.stopPropagation();
|
|
1968
|
+
this.setValue(null);
|
|
1969
|
+
}
|
|
1970
|
+
handleKeydown(event) {
|
|
1971
|
+
if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
|
|
1972
|
+
event.preventDefault();
|
|
1973
|
+
this.openPanel();
|
|
1974
|
+
}
|
|
1975
|
+
}
|
|
1976
|
+
handleOverlayKeydown(event) {
|
|
1977
|
+
if (event.key === 'Escape') {
|
|
1978
|
+
event.preventDefault();
|
|
1979
|
+
this.close();
|
|
1980
|
+
return;
|
|
1981
|
+
}
|
|
1982
|
+
if (event.key === 'ArrowDown') {
|
|
1983
|
+
event.preventDefault();
|
|
1984
|
+
this.moveActive(1);
|
|
1985
|
+
}
|
|
1986
|
+
else if (event.key === 'ArrowUp') {
|
|
1987
|
+
event.preventDefault();
|
|
1988
|
+
this.moveActive(-1);
|
|
1989
|
+
}
|
|
1990
|
+
else if (event.key === 'Enter' && this.activeIndex >= 0) {
|
|
1991
|
+
event.preventDefault();
|
|
1992
|
+
const option = this.options[this.activeIndex];
|
|
1993
|
+
if (option)
|
|
1994
|
+
this.select(option);
|
|
1995
|
+
}
|
|
1996
|
+
}
|
|
1997
|
+
openPanel() {
|
|
1998
|
+
this.open = true;
|
|
1999
|
+
const selectedIndex = this.options.findIndex((option) => this.compare(option.value, this.value));
|
|
2000
|
+
this.activeIndex = selectedIndex >= 0 ? selectedIndex : this.firstEnabledIndex();
|
|
2001
|
+
}
|
|
2002
|
+
moveActive(direction) {
|
|
2003
|
+
if (!this.options.length)
|
|
2004
|
+
return;
|
|
2005
|
+
let next = this.activeIndex;
|
|
2006
|
+
for (let index = 0; index < this.options.length; index++) {
|
|
2007
|
+
next = (next + direction + this.options.length) % this.options.length;
|
|
2008
|
+
if (!this.options[next]?.disabled) {
|
|
2009
|
+
this.activeIndex = next;
|
|
2010
|
+
return;
|
|
2011
|
+
}
|
|
2012
|
+
}
|
|
2013
|
+
}
|
|
2014
|
+
firstEnabledIndex() {
|
|
2015
|
+
return this.options.findIndex((option) => !option.disabled);
|
|
2016
|
+
}
|
|
2017
|
+
setValue(value) {
|
|
2018
|
+
this.value = value;
|
|
2019
|
+
this.onChange(value);
|
|
2020
|
+
this.selectionChange.emit(value);
|
|
2021
|
+
}
|
|
2022
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2023
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdSelect, isStandalone: true, selector: "td-select", inputs: { label: "label", placeholder: "placeholder", options: "options", hint: "hint", error: "error", emptyText: "emptyText", clearable: "clearable", dark: "dark", disabled: "disabled", scrollBehavior: "scrollBehavior", compareWith: "compareWith" }, outputs: { selectionChange: "selectionChange" }, providers: [
|
|
2024
|
+
{
|
|
2025
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2026
|
+
useExisting: forwardRef(() => TdSelect),
|
|
2027
|
+
multi: true,
|
|
2028
|
+
},
|
|
2029
|
+
], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true }], ngImport: i0, template: `
|
|
2030
|
+
<div
|
|
2031
|
+
cdkOverlayOrigin
|
|
2032
|
+
#origin="cdkOverlayOrigin"
|
|
2033
|
+
class="td-select"
|
|
2034
|
+
[class.td-select--open]="open"
|
|
2035
|
+
[class.td-select--error]="!!error"
|
|
2036
|
+
[class.td-select--disabled]="disabled"
|
|
2037
|
+
[class.td-select--dark]="dark"
|
|
2038
|
+
>
|
|
2039
|
+
<label [id]="labelId">{{ label }}</label>
|
|
2040
|
+
<div
|
|
2041
|
+
class="td-select__trigger"
|
|
2042
|
+
role="combobox"
|
|
2043
|
+
[attr.tabindex]="disabled ? -1 : 0"
|
|
2044
|
+
[attr.aria-disabled]="disabled"
|
|
2045
|
+
[attr.aria-labelledby]="labelId"
|
|
2046
|
+
[attr.aria-expanded]="open"
|
|
2047
|
+
[attr.aria-controls]="listId"
|
|
2048
|
+
(click)="toggle()"
|
|
2049
|
+
(keydown)="handleKeydown($event)"
|
|
2050
|
+
>
|
|
2051
|
+
@if (selectedOption?.icon) {
|
|
2052
|
+
<td-icon class="td-select__leading" [nombre]="selectedOption!.icon!" />
|
|
2053
|
+
}
|
|
2054
|
+
<span [class.td-select__placeholder]="!selectedOption">
|
|
2055
|
+
{{ selectedOption?.label || placeholder }}
|
|
2056
|
+
</span>
|
|
2057
|
+
@if (clearable && selectedOption && !disabled) {
|
|
2058
|
+
<button
|
|
2059
|
+
type="button"
|
|
2060
|
+
class="td-select__clear"
|
|
2061
|
+
title="Limpiar selección"
|
|
2062
|
+
(click)="clear($event)"
|
|
2063
|
+
>
|
|
2064
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
2065
|
+
</button>
|
|
2066
|
+
}
|
|
2067
|
+
<td-icon
|
|
2068
|
+
class="td-select__chevron"
|
|
2069
|
+
[class.td-select__chevron--open]="open"
|
|
2070
|
+
nombre="chevron_down"
|
|
2071
|
+
/>
|
|
2072
|
+
</div>
|
|
2073
|
+
</div>
|
|
2074
|
+
|
|
2075
|
+
@if (error || hint) {
|
|
2076
|
+
<p class="td-select__message" [class.td-select__message--error]="!!error">
|
|
2077
|
+
{{ error || hint }}
|
|
2078
|
+
</p>
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
<ng-template
|
|
2082
|
+
cdkConnectedOverlay
|
|
2083
|
+
#connectedOverlay="cdkConnectedOverlay"
|
|
2084
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
2085
|
+
[cdkConnectedOverlayOpen]="open"
|
|
2086
|
+
[cdkConnectedOverlayScrollStrategy]="scrollStrategy"
|
|
2087
|
+
[cdkConnectedOverlayMatchWidth]="true"
|
|
2088
|
+
[cdkConnectedOverlayViewportMargin]="8"
|
|
2089
|
+
[cdkConnectedOverlayPush]="true"
|
|
2090
|
+
(overlayOutsideClick)="close()"
|
|
2091
|
+
(overlayKeydown)="handleOverlayKeydown($event)"
|
|
2092
|
+
(detach)="close()"
|
|
2093
|
+
>
|
|
2094
|
+
<div
|
|
2095
|
+
class="td-select-panel"
|
|
2096
|
+
[class.td-select-panel--dark]="dark"
|
|
2097
|
+
[id]="listId"
|
|
2098
|
+
role="listbox"
|
|
2099
|
+
>
|
|
2100
|
+
@if (!options.length) {
|
|
2101
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
2102
|
+
}
|
|
2103
|
+
@for (option of options; track option.value; let index = $index) {
|
|
2104
|
+
<button
|
|
2105
|
+
type="button"
|
|
2106
|
+
role="option"
|
|
2107
|
+
[class.td-select-panel__option--active]="index === activeIndex"
|
|
2108
|
+
[class.td-select-panel__option--selected]="compare(option.value, value)"
|
|
2109
|
+
[attr.aria-selected]="compare(option.value, value)"
|
|
2110
|
+
[disabled]="option.disabled"
|
|
2111
|
+
(mouseenter)="activeIndex = index"
|
|
2112
|
+
(click)="select(option)"
|
|
2113
|
+
>
|
|
2114
|
+
@if (option.icon) {
|
|
2115
|
+
<td-icon [nombre]="option.icon" />
|
|
2116
|
+
}
|
|
2117
|
+
<span>
|
|
2118
|
+
<strong>{{ option.label }}</strong>
|
|
2119
|
+
@if (option.description) {
|
|
2120
|
+
<small>{{ option.description }}</small>
|
|
2121
|
+
}
|
|
2122
|
+
</span>
|
|
2123
|
+
@if (compare(option.value, value)) {
|
|
2124
|
+
<td-icon class="td-select-panel__check" nombre="check" />
|
|
2125
|
+
}
|
|
2126
|
+
</button>
|
|
2127
|
+
}
|
|
2128
|
+
</div>
|
|
2129
|
+
</ng-template>
|
|
2130
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2131
|
+
}
|
|
2132
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdSelect, decorators: [{
|
|
2133
|
+
type: Component,
|
|
2134
|
+
args: [{ selector: 'td-select', imports: [CdkConnectedOverlay, CdkOverlayOrigin, TdIcon], template: `
|
|
2135
|
+
<div
|
|
2136
|
+
cdkOverlayOrigin
|
|
2137
|
+
#origin="cdkOverlayOrigin"
|
|
2138
|
+
class="td-select"
|
|
2139
|
+
[class.td-select--open]="open"
|
|
2140
|
+
[class.td-select--error]="!!error"
|
|
2141
|
+
[class.td-select--disabled]="disabled"
|
|
2142
|
+
[class.td-select--dark]="dark"
|
|
2143
|
+
>
|
|
2144
|
+
<label [id]="labelId">{{ label }}</label>
|
|
2145
|
+
<div
|
|
2146
|
+
class="td-select__trigger"
|
|
2147
|
+
role="combobox"
|
|
2148
|
+
[attr.tabindex]="disabled ? -1 : 0"
|
|
2149
|
+
[attr.aria-disabled]="disabled"
|
|
2150
|
+
[attr.aria-labelledby]="labelId"
|
|
2151
|
+
[attr.aria-expanded]="open"
|
|
2152
|
+
[attr.aria-controls]="listId"
|
|
2153
|
+
(click)="toggle()"
|
|
2154
|
+
(keydown)="handleKeydown($event)"
|
|
2155
|
+
>
|
|
2156
|
+
@if (selectedOption?.icon) {
|
|
2157
|
+
<td-icon class="td-select__leading" [nombre]="selectedOption!.icon!" />
|
|
2158
|
+
}
|
|
2159
|
+
<span [class.td-select__placeholder]="!selectedOption">
|
|
2160
|
+
{{ selectedOption?.label || placeholder }}
|
|
2161
|
+
</span>
|
|
2162
|
+
@if (clearable && selectedOption && !disabled) {
|
|
2163
|
+
<button
|
|
2164
|
+
type="button"
|
|
2165
|
+
class="td-select__clear"
|
|
2166
|
+
title="Limpiar selección"
|
|
2167
|
+
(click)="clear($event)"
|
|
2168
|
+
>
|
|
2169
|
+
<td-icon nombre="close" tamano=".95rem" />
|
|
2170
|
+
</button>
|
|
2171
|
+
}
|
|
2172
|
+
<td-icon
|
|
2173
|
+
class="td-select__chevron"
|
|
2174
|
+
[class.td-select__chevron--open]="open"
|
|
2175
|
+
nombre="chevron_down"
|
|
2176
|
+
/>
|
|
2177
|
+
</div>
|
|
2178
|
+
</div>
|
|
2179
|
+
|
|
2180
|
+
@if (error || hint) {
|
|
2181
|
+
<p class="td-select__message" [class.td-select__message--error]="!!error">
|
|
2182
|
+
{{ error || hint }}
|
|
2183
|
+
</p>
|
|
2184
|
+
}
|
|
2185
|
+
|
|
2186
|
+
<ng-template
|
|
2187
|
+
cdkConnectedOverlay
|
|
2188
|
+
#connectedOverlay="cdkConnectedOverlay"
|
|
2189
|
+
[cdkConnectedOverlayOrigin]="origin"
|
|
2190
|
+
[cdkConnectedOverlayOpen]="open"
|
|
2191
|
+
[cdkConnectedOverlayScrollStrategy]="scrollStrategy"
|
|
2192
|
+
[cdkConnectedOverlayMatchWidth]="true"
|
|
2193
|
+
[cdkConnectedOverlayViewportMargin]="8"
|
|
2194
|
+
[cdkConnectedOverlayPush]="true"
|
|
2195
|
+
(overlayOutsideClick)="close()"
|
|
2196
|
+
(overlayKeydown)="handleOverlayKeydown($event)"
|
|
2197
|
+
(detach)="close()"
|
|
2198
|
+
>
|
|
2199
|
+
<div
|
|
2200
|
+
class="td-select-panel"
|
|
2201
|
+
[class.td-select-panel--dark]="dark"
|
|
2202
|
+
[id]="listId"
|
|
2203
|
+
role="listbox"
|
|
2204
|
+
>
|
|
2205
|
+
@if (!options.length) {
|
|
2206
|
+
<p class="td-select-panel__empty">{{ emptyText }}</p>
|
|
2207
|
+
}
|
|
2208
|
+
@for (option of options; track option.value; let index = $index) {
|
|
2209
|
+
<button
|
|
2210
|
+
type="button"
|
|
2211
|
+
role="option"
|
|
2212
|
+
[class.td-select-panel__option--active]="index === activeIndex"
|
|
2213
|
+
[class.td-select-panel__option--selected]="compare(option.value, value)"
|
|
2214
|
+
[attr.aria-selected]="compare(option.value, value)"
|
|
2215
|
+
[disabled]="option.disabled"
|
|
2216
|
+
(mouseenter)="activeIndex = index"
|
|
2217
|
+
(click)="select(option)"
|
|
2218
|
+
>
|
|
2219
|
+
@if (option.icon) {
|
|
2220
|
+
<td-icon [nombre]="option.icon" />
|
|
2221
|
+
}
|
|
2222
|
+
<span>
|
|
2223
|
+
<strong>{{ option.label }}</strong>
|
|
2224
|
+
@if (option.description) {
|
|
2225
|
+
<small>{{ option.description }}</small>
|
|
2226
|
+
}
|
|
2227
|
+
</span>
|
|
2228
|
+
@if (compare(option.value, value)) {
|
|
2229
|
+
<td-icon class="td-select-panel__check" nombre="check" />
|
|
2230
|
+
}
|
|
2231
|
+
</button>
|
|
2232
|
+
}
|
|
2233
|
+
</div>
|
|
2234
|
+
</ng-template>
|
|
2235
|
+
`, providers: [
|
|
2236
|
+
{
|
|
2237
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2238
|
+
useExisting: forwardRef(() => TdSelect),
|
|
2239
|
+
multi: true,
|
|
2240
|
+
},
|
|
2241
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-select{--td-select-bg: #fff;--td-select-border: #dfe3eb;--td-select-text: #263147;--td-select-muted: #748096;position:relative;min-height:3.15rem;border:1px solid var(--td-select-border);border-radius:.78rem;background:var(--td-select-bg);transition:border-color .14s ease,box-shadow .14s ease}.td-select--dark{--td-select-bg: #19191f;--td-select-border: #34343e;--td-select-text: #ededf0;--td-select-muted: #a1a1aa;color-scheme:dark}.td-select:hover:not(.td-select--disabled){border-color:color-mix(in srgb,#5746d8 42%,var(--td-select-border))}.td-select--open{border-color:#5746d8;box-shadow:0 0 0 3px #5746d821}.td-select--error{border-color:#d33f3f;box-shadow:0 0 0 3px #d33f3f1a}.td-select--disabled{opacity:.58;background:#f5f6f8}.td-select>label{position:absolute;z-index:1;top:-.48rem;left:.72rem;max-width:calc(100% - 1.4rem);overflow:hidden;padding:0 .35rem;color:var(--td-select-muted);background:var(--td-select-bg);font-size:.65rem;font-weight:750;line-height:1;text-overflow:ellipsis;white-space:nowrap}.td-select--open>label{color:#5746d8}.td-select--error>label{color:#d33f3f}.td-select__trigger{display:flex;width:100%;min-width:0;min-height:3.05rem;align-items:center;gap:.55rem;border:0;border-radius:inherit;padding:.3rem .7rem;color:var(--td-select-text);background:transparent;font:550 .78rem/1.25 system-ui,sans-serif;text-align:left;cursor:pointer}.td-select__trigger:disabled{cursor:not-allowed}.td-select__trigger>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select__placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__leading{flex:0 0 auto;color:var(--td-select-muted)}.td-select__chevron{flex:0 0 auto;color:var(--td-select-muted);transition:transform .14s ease}.td-select__chevron--open{transform:rotate(180deg)}.td-select__trigger input{width:100%;min-width:0;height:2.4rem;border:0;outline:0;color:var(--td-select-text);background:transparent;font:inherit}.td-select__trigger input::placeholder{color:color-mix(in srgb,var(--td-select-muted) 72%,transparent)}.td-select__trigger input::-webkit-search-cancel-button{display:none}.td-select__clear{display:grid;width:1.9rem;height:1.9rem;flex:0 0 auto;place-items:center;border:0;border-radius:.45rem;color:var(--td-select-muted);background:transparent;cursor:pointer}.td-select__clear:hover{color:#5746d8;background:#f2f0ff}.td-select__message{margin:.38rem .75rem 0;color:#748096;font-size:.66rem;line-height:1.4}.td-select__message--error{color:#c43636}.td-select-panel{width:100%;min-width:100%;max-height:min(20rem,100dvh - 2rem);overflow-y:auto;border:1px solid #e1e5ee;border-radius:.78rem;padding:.35rem;color:#263147;background:#fff;box-shadow:0 18px 46px #0f172a2e;font-family:Inter,ui-sans-serif,system-ui,sans-serif;animation:td-select-panel-in .13s ease-out;scrollbar-width:thin}.td-select-panel--dark{border-color:#34343e;color:#ededf0;background:#202028}.td-select-panel button{display:flex;width:100%;min-height:2.7rem;align-items:center;gap:.65rem;border:0;border-radius:.58rem;padding:.55rem .65rem;color:inherit;background:transparent;font:inherit;text-align:left;cursor:pointer}.td-select-panel button>span{min-width:0;overflow:hidden}.td-select-panel strong,.td-select-panel small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.td-select-panel button:hover,.td-select-panel__option--active{background:#f4f2ff!important}.td-select-panel--dark button:hover,.td-select-panel--dark .td-select-panel__option--active{background:#2a2934!important}.td-select-panel__option--selected{color:#5746d8!important;background:#eeecff!important}.td-select-panel--dark .td-select-panel__option--selected{color:#b9b0fa!important;background:#292540!important}.td-select-panel button:disabled{opacity:.45;cursor:not-allowed}.td-select-panel button>span{min-width:0;flex:1}.td-select-panel strong,.td-select-panel small{display:block}.td-select-panel strong{font-size:.75rem}.td-select-panel small{margin-top:.18rem;color:#748096;font-size:.65rem}.td-select-panel__check{margin-left:auto}.td-select-panel__empty{margin:0;padding:1rem;color:#748096;font-size:.72rem;text-align:center}@keyframes td-select-panel-in{0%{opacity:0;transform:translateY(-.25rem)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
2242
|
+
}], ctorParameters: () => [], propDecorators: { connectedOverlay: [{
|
|
2243
|
+
type: ViewChild,
|
|
2244
|
+
args: [CdkConnectedOverlay]
|
|
2245
|
+
}], label: [{
|
|
2246
|
+
type: Input
|
|
2247
|
+
}], placeholder: [{
|
|
2248
|
+
type: Input
|
|
2249
|
+
}], options: [{
|
|
2250
|
+
type: Input
|
|
2251
|
+
}], hint: [{
|
|
2252
|
+
type: Input
|
|
2253
|
+
}], error: [{
|
|
2254
|
+
type: Input
|
|
2255
|
+
}], emptyText: [{
|
|
2256
|
+
type: Input
|
|
2257
|
+
}], clearable: [{
|
|
2258
|
+
type: Input
|
|
2259
|
+
}], dark: [{
|
|
2260
|
+
type: Input
|
|
2261
|
+
}], disabled: [{
|
|
2262
|
+
type: Input
|
|
2263
|
+
}], scrollBehavior: [{
|
|
2264
|
+
type: Input
|
|
2265
|
+
}], compareWith: [{
|
|
2266
|
+
type: Input
|
|
2267
|
+
}], selectionChange: [{
|
|
2268
|
+
type: Output
|
|
2269
|
+
}] } });
|
|
2270
|
+
|
|
823
2271
|
class TdSidebar {
|
|
824
2272
|
titulo = 'Gestión Corporativa';
|
|
825
2273
|
subtitulo = 'Central Platform';
|
|
@@ -919,6 +2367,297 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
919
2367
|
type: Output
|
|
920
2368
|
}] } });
|
|
921
2369
|
|
|
2370
|
+
let tabSequence = 0;
|
|
2371
|
+
class TdTab {
|
|
2372
|
+
generatedId = `td-tab-${++tabSequence}`;
|
|
2373
|
+
id = '';
|
|
2374
|
+
label = 'Tab';
|
|
2375
|
+
icon = '';
|
|
2376
|
+
disabled = false;
|
|
2377
|
+
badge = null;
|
|
2378
|
+
content;
|
|
2379
|
+
get resolvedId() {
|
|
2380
|
+
return this.id || this.generatedId;
|
|
2381
|
+
}
|
|
2382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: TdTab, isStandalone: true, selector: "td-tab", inputs: { id: "id", label: "label", icon: "icon", disabled: "disabled", badge: "badge" }, viewQueries: [{ propertyName: "content", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0, template: `
|
|
2384
|
+
<ng-template>
|
|
2385
|
+
<ng-content />
|
|
2386
|
+
</ng-template>
|
|
2387
|
+
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2388
|
+
}
|
|
2389
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTab, decorators: [{
|
|
2390
|
+
type: Component,
|
|
2391
|
+
args: [{
|
|
2392
|
+
selector: 'td-tab',
|
|
2393
|
+
template: `
|
|
2394
|
+
<ng-template>
|
|
2395
|
+
<ng-content />
|
|
2396
|
+
</ng-template>
|
|
2397
|
+
`,
|
|
2398
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2399
|
+
}]
|
|
2400
|
+
}], propDecorators: { id: [{
|
|
2401
|
+
type: Input
|
|
2402
|
+
}], label: [{
|
|
2403
|
+
type: Input
|
|
2404
|
+
}], icon: [{
|
|
2405
|
+
type: Input
|
|
2406
|
+
}], disabled: [{
|
|
2407
|
+
type: Input
|
|
2408
|
+
}], badge: [{
|
|
2409
|
+
type: Input
|
|
2410
|
+
}], content: [{
|
|
2411
|
+
type: ViewChild,
|
|
2412
|
+
args: [TemplateRef, { static: true }]
|
|
2413
|
+
}] } });
|
|
2414
|
+
|
|
2415
|
+
class TdTabs {
|
|
2416
|
+
cdr = inject(ChangeDetectorRef);
|
|
2417
|
+
tabsChange;
|
|
2418
|
+
requestedIndex = 0;
|
|
2419
|
+
tabQuery;
|
|
2420
|
+
tabButtons;
|
|
2421
|
+
set selectedIndex(value) {
|
|
2422
|
+
this.requestedIndex = Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;
|
|
2423
|
+
if (this.tabQuery)
|
|
2424
|
+
this.applyRequestedIndex();
|
|
2425
|
+
}
|
|
2426
|
+
get selectedIndex() {
|
|
2427
|
+
return this.activeIndex;
|
|
2428
|
+
}
|
|
2429
|
+
variant = 'linea';
|
|
2430
|
+
alignment = 'inicio';
|
|
2431
|
+
stretch = false;
|
|
2432
|
+
dark = false;
|
|
2433
|
+
ariaLabel = 'Pestañas';
|
|
2434
|
+
panelFocusable = false;
|
|
2435
|
+
selectedIndexChange = new EventEmitter();
|
|
2436
|
+
tabChange = new EventEmitter();
|
|
2437
|
+
tabs = [];
|
|
2438
|
+
activeIndex = 0;
|
|
2439
|
+
get activeTab() {
|
|
2440
|
+
return this.tabs[this.activeIndex] ?? null;
|
|
2441
|
+
}
|
|
2442
|
+
ngAfterContentInit() {
|
|
2443
|
+
this.syncTabs();
|
|
2444
|
+
this.tabsChange = this.tabQuery.changes.subscribe(() => this.syncTabs());
|
|
2445
|
+
}
|
|
2446
|
+
ngOnDestroy() {
|
|
2447
|
+
this.tabsChange?.unsubscribe();
|
|
2448
|
+
}
|
|
2449
|
+
select(index, focus = false) {
|
|
2450
|
+
const tab = this.tabs[index];
|
|
2451
|
+
if (!tab || tab.disabled || index === this.activeIndex) {
|
|
2452
|
+
if (focus && tab && !tab.disabled)
|
|
2453
|
+
this.focusButton(index);
|
|
2454
|
+
return;
|
|
2455
|
+
}
|
|
2456
|
+
this.activeIndex = index;
|
|
2457
|
+
this.requestedIndex = index;
|
|
2458
|
+
this.selectedIndexChange.emit(index);
|
|
2459
|
+
this.tabChange.emit(tab);
|
|
2460
|
+
this.cdr.markForCheck();
|
|
2461
|
+
if (focus)
|
|
2462
|
+
queueMicrotask(() => this.focusButton(index));
|
|
2463
|
+
}
|
|
2464
|
+
handleKeydown(event) {
|
|
2465
|
+
const horizontalKeys = ['ArrowLeft', 'ArrowRight'];
|
|
2466
|
+
if (!horizontalKeys.includes(event.key) && !['Home', 'End'].includes(event.key))
|
|
2467
|
+
return;
|
|
2468
|
+
event.preventDefault();
|
|
2469
|
+
if (event.key === 'Home') {
|
|
2470
|
+
this.select(this.firstEnabledIndex(), true);
|
|
2471
|
+
return;
|
|
2472
|
+
}
|
|
2473
|
+
if (event.key === 'End') {
|
|
2474
|
+
this.select(this.lastEnabledIndex(), true);
|
|
2475
|
+
return;
|
|
2476
|
+
}
|
|
2477
|
+
this.select(this.nextEnabledIndex(event.key === 'ArrowRight' ? 1 : -1), true);
|
|
2478
|
+
}
|
|
2479
|
+
tabId(tab) {
|
|
2480
|
+
return `${tab.resolvedId}-trigger`;
|
|
2481
|
+
}
|
|
2482
|
+
panelId(tab) {
|
|
2483
|
+
return `${tab.resolvedId}-panel`;
|
|
2484
|
+
}
|
|
2485
|
+
syncTabs() {
|
|
2486
|
+
this.tabs = this.tabQuery.toArray();
|
|
2487
|
+
this.applyRequestedIndex();
|
|
2488
|
+
this.cdr.markForCheck();
|
|
2489
|
+
}
|
|
2490
|
+
applyRequestedIndex() {
|
|
2491
|
+
if (!this.tabs.length) {
|
|
2492
|
+
this.activeIndex = 0;
|
|
2493
|
+
return;
|
|
2494
|
+
}
|
|
2495
|
+
const requested = Math.min(this.requestedIndex, this.tabs.length - 1);
|
|
2496
|
+
if (!this.tabs[requested]?.disabled) {
|
|
2497
|
+
this.activeIndex = requested;
|
|
2498
|
+
return;
|
|
2499
|
+
}
|
|
2500
|
+
const firstEnabled = this.firstEnabledIndex();
|
|
2501
|
+
this.activeIndex = firstEnabled >= 0 ? firstEnabled : 0;
|
|
2502
|
+
}
|
|
2503
|
+
nextEnabledIndex(direction) {
|
|
2504
|
+
if (!this.tabs.length)
|
|
2505
|
+
return 0;
|
|
2506
|
+
let next = this.activeIndex;
|
|
2507
|
+
for (let index = 0; index < this.tabs.length; index++) {
|
|
2508
|
+
next = (next + direction + this.tabs.length) % this.tabs.length;
|
|
2509
|
+
if (!this.tabs[next]?.disabled)
|
|
2510
|
+
return next;
|
|
2511
|
+
}
|
|
2512
|
+
return this.activeIndex;
|
|
2513
|
+
}
|
|
2514
|
+
firstEnabledIndex() {
|
|
2515
|
+
return this.tabs.findIndex((tab) => !tab.disabled);
|
|
2516
|
+
}
|
|
2517
|
+
lastEnabledIndex() {
|
|
2518
|
+
for (let index = this.tabs.length - 1; index >= 0; index--) {
|
|
2519
|
+
if (!this.tabs[index]?.disabled)
|
|
2520
|
+
return index;
|
|
2521
|
+
}
|
|
2522
|
+
return this.activeIndex;
|
|
2523
|
+
}
|
|
2524
|
+
focusButton(index) {
|
|
2525
|
+
this.tabButtons.get(index)?.nativeElement.focus();
|
|
2526
|
+
}
|
|
2527
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2528
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TdTabs, isStandalone: true, selector: "td-tabs", inputs: { selectedIndex: "selectedIndex", variant: "variant", alignment: "alignment", stretch: "stretch", dark: "dark", ariaLabel: "ariaLabel", panelFocusable: "panelFocusable" }, outputs: { selectedIndexChange: "selectedIndexChange", tabChange: "tabChange" }, queries: [{ propertyName: "tabQuery", predicate: TdTab }], viewQueries: [{ propertyName: "tabButtons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: `
|
|
2529
|
+
<section
|
|
2530
|
+
class="td-tabs"
|
|
2531
|
+
[class.td-tabs--dark]="dark"
|
|
2532
|
+
[class.td-tabs--stretch]="stretch"
|
|
2533
|
+
[class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
|
|
2534
|
+
(dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
|
|
2535
|
+
>
|
|
2536
|
+
<div
|
|
2537
|
+
class="td-tabs__list"
|
|
2538
|
+
role="tablist"
|
|
2539
|
+
[attr.aria-label]="ariaLabel"
|
|
2540
|
+
(keydown)="handleKeydown($event)"
|
|
2541
|
+
>
|
|
2542
|
+
@for (tab of tabs; track tab.resolvedId; let index = $index) {
|
|
2543
|
+
<button
|
|
2544
|
+
#tabButton
|
|
2545
|
+
type="button"
|
|
2546
|
+
class="td-tabs__tab"
|
|
2547
|
+
role="tab"
|
|
2548
|
+
[id]="tabId(tab)"
|
|
2549
|
+
[class.td-tabs__tab--active]="index === activeIndex"
|
|
2550
|
+
[disabled]="tab.disabled"
|
|
2551
|
+
[attr.tabindex]="index === activeIndex ? 0 : -1"
|
|
2552
|
+
[attr.aria-selected]="index === activeIndex"
|
|
2553
|
+
[attr.aria-controls]="panelId(tab)"
|
|
2554
|
+
(click)="select(index)"
|
|
2555
|
+
>
|
|
2556
|
+
@if (tab.icon) {
|
|
2557
|
+
<td-icon [nombre]="tab.icon" />
|
|
2558
|
+
}
|
|
2559
|
+
<span>{{ tab.label }}</span>
|
|
2560
|
+
@if (tab.badge !== null) {
|
|
2561
|
+
<small>{{ tab.badge }}</small>
|
|
2562
|
+
}
|
|
2563
|
+
</button>
|
|
2564
|
+
}
|
|
2565
|
+
</div>
|
|
2566
|
+
|
|
2567
|
+
@if (activeTab; as tab) {
|
|
2568
|
+
<div
|
|
2569
|
+
class="td-tabs__panel"
|
|
2570
|
+
role="tabpanel"
|
|
2571
|
+
[id]="panelId(tab)"
|
|
2572
|
+
[attr.aria-labelledby]="tabId(tab)"
|
|
2573
|
+
[attr.tabindex]="panelFocusable ? 0 : null"
|
|
2574
|
+
>
|
|
2575
|
+
<ng-container [ngTemplateOutlet]="tab.content" />
|
|
2576
|
+
</div>
|
|
2577
|
+
}
|
|
2578
|
+
</section>
|
|
2579
|
+
`, isInline: true, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:center}.td-tabs--align-fin .td-tabs__list{justify-content:flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TdIcon, selector: "td-icon", inputs: ["nombre", "titulo", "tamano"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2580
|
+
}
|
|
2581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, decorators: [{
|
|
2582
|
+
type: Component,
|
|
2583
|
+
args: [{ selector: 'td-tabs', imports: [NgTemplateOutlet, TdIcon], template: `
|
|
2584
|
+
<section
|
|
2585
|
+
class="td-tabs"
|
|
2586
|
+
[class.td-tabs--dark]="dark"
|
|
2587
|
+
[class.td-tabs--stretch]="stretch"
|
|
2588
|
+
[class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
|
|
2589
|
+
(dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
|
|
2590
|
+
>
|
|
2591
|
+
<div
|
|
2592
|
+
class="td-tabs__list"
|
|
2593
|
+
role="tablist"
|
|
2594
|
+
[attr.aria-label]="ariaLabel"
|
|
2595
|
+
(keydown)="handleKeydown($event)"
|
|
2596
|
+
>
|
|
2597
|
+
@for (tab of tabs; track tab.resolvedId; let index = $index) {
|
|
2598
|
+
<button
|
|
2599
|
+
#tabButton
|
|
2600
|
+
type="button"
|
|
2601
|
+
class="td-tabs__tab"
|
|
2602
|
+
role="tab"
|
|
2603
|
+
[id]="tabId(tab)"
|
|
2604
|
+
[class.td-tabs__tab--active]="index === activeIndex"
|
|
2605
|
+
[disabled]="tab.disabled"
|
|
2606
|
+
[attr.tabindex]="index === activeIndex ? 0 : -1"
|
|
2607
|
+
[attr.aria-selected]="index === activeIndex"
|
|
2608
|
+
[attr.aria-controls]="panelId(tab)"
|
|
2609
|
+
(click)="select(index)"
|
|
2610
|
+
>
|
|
2611
|
+
@if (tab.icon) {
|
|
2612
|
+
<td-icon [nombre]="tab.icon" />
|
|
2613
|
+
}
|
|
2614
|
+
<span>{{ tab.label }}</span>
|
|
2615
|
+
@if (tab.badge !== null) {
|
|
2616
|
+
<small>{{ tab.badge }}</small>
|
|
2617
|
+
}
|
|
2618
|
+
</button>
|
|
2619
|
+
}
|
|
2620
|
+
</div>
|
|
2621
|
+
|
|
2622
|
+
@if (activeTab; as tab) {
|
|
2623
|
+
<div
|
|
2624
|
+
class="td-tabs__panel"
|
|
2625
|
+
role="tabpanel"
|
|
2626
|
+
[id]="panelId(tab)"
|
|
2627
|
+
[attr.aria-labelledby]="tabId(tab)"
|
|
2628
|
+
[attr.tabindex]="panelFocusable ? 0 : null"
|
|
2629
|
+
>
|
|
2630
|
+
<ng-container [ngTemplateOutlet]="tab.content" />
|
|
2631
|
+
</div>
|
|
2632
|
+
}
|
|
2633
|
+
</section>
|
|
2634
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}.td-tabs{--td-tabs-bg: #fff;--td-tabs-soft: #f7f8fb;--td-tabs-border: #e3e7ef;--td-tabs-text: #263147;--td-tabs-muted: #748096;--td-tabs-accent: #5746d8;min-width:0;color:var(--td-tabs-text)}.td-tabs--dark{--td-tabs-bg: #19191f;--td-tabs-soft: #202028;--td-tabs-border: #303039;--td-tabs-text: #ededf0;--td-tabs-muted: #a1a1aa;--td-tabs-accent: #b9b0fa}.td-tabs__list{display:flex;min-width:0;overflow-x:auto;scrollbar-width:none}.td-tabs__list::-webkit-scrollbar{display:none}.td-tabs--align-centro .td-tabs__list{justify-content:center}.td-tabs--align-fin .td-tabs__list{justify-content:flex-end}.td-tabs__tab{position:relative;display:inline-flex;min-height:2.85rem;flex:0 0 auto;align-items:center;justify-content:center;gap:.45rem;border:0;padding:.7rem .95rem;color:var(--td-tabs-muted);background:transparent;font:750 .72rem/1 system-ui,sans-serif;white-space:nowrap;cursor:pointer;transition:color .13s ease,background .13s ease}.td-tabs--stretch .td-tabs__tab{min-width:0;flex:1 1 0}.td-tabs__tab:hover:not(:disabled){color:var(--td-tabs-accent)}.td-tabs__tab:focus-visible{outline:2px solid var(--td-tabs-accent);outline-offset:-2px}.td-tabs__tab:disabled{opacity:.42;cursor:not-allowed}.td-tabs__tab small{min-width:1.25rem;border-radius:999px;padding:.22rem .38rem;color:var(--td-tabs-muted);background:var(--td-tabs-soft);font-size:.58rem}.td-tabs--linea .td-tabs__list{border-bottom:1px solid var(--td-tabs-border)}.td-tabs--linea .td-tabs__tab:after{position:absolute;right:.65rem;bottom:-1px;left:.65rem;height:2px;border-radius:999px 999px 0 0;background:transparent;content:\"\"}.td-tabs--linea .td-tabs__tab--active{color:var(--td-tabs-accent)}.td-tabs--linea .td-tabs__tab--active:after{background:var(--td-tabs-accent)}.td-tabs--pastilla .td-tabs__list{gap:.3rem;border:1px solid var(--td-tabs-border);border-radius:.8rem;padding:.28rem;background:var(--td-tabs-soft)}.td-tabs--pastilla .td-tabs__tab{min-height:2.35rem;border-radius:.58rem}.td-tabs--pastilla .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg);box-shadow:0 3px 10px #0f172a14}.td-tabs--contenida{overflow:hidden;border:1px solid var(--td-tabs-border);border-radius:.9rem;background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__list{border-bottom:1px solid var(--td-tabs-border);padding:0 .45rem;background:var(--td-tabs-soft)}.td-tabs--contenida .td-tabs__tab--active{color:var(--td-tabs-accent);background:var(--td-tabs-bg)}.td-tabs--contenida .td-tabs__panel{padding:1.25rem}.td-tabs__panel{min-width:0;padding-top:1.15rem;animation:td-tabs-panel-in .14s ease-out}@keyframes td-tabs-panel-in{0%{opacity:0;transform:translateY(.18rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.td-tabs__panel{animation:none}}\n"] }]
|
|
2635
|
+
}], propDecorators: { tabQuery: [{
|
|
2636
|
+
type: ContentChildren,
|
|
2637
|
+
args: [TdTab]
|
|
2638
|
+
}], tabButtons: [{
|
|
2639
|
+
type: ViewChildren,
|
|
2640
|
+
args: ['tabButton']
|
|
2641
|
+
}], selectedIndex: [{
|
|
2642
|
+
type: Input
|
|
2643
|
+
}], variant: [{
|
|
2644
|
+
type: Input
|
|
2645
|
+
}], alignment: [{
|
|
2646
|
+
type: Input
|
|
2647
|
+
}], stretch: [{
|
|
2648
|
+
type: Input
|
|
2649
|
+
}], dark: [{
|
|
2650
|
+
type: Input
|
|
2651
|
+
}], ariaLabel: [{
|
|
2652
|
+
type: Input
|
|
2653
|
+
}], panelFocusable: [{
|
|
2654
|
+
type: Input
|
|
2655
|
+
}], selectedIndexChange: [{
|
|
2656
|
+
type: Output
|
|
2657
|
+
}], tabChange: [{
|
|
2658
|
+
type: Output
|
|
2659
|
+
}] } });
|
|
2660
|
+
|
|
922
2661
|
/*
|
|
923
2662
|
* Public API Surface of telcomdev-ui
|
|
924
2663
|
*/
|
|
@@ -927,5 +2666,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
|
|
|
927
2666
|
* Generated bundle index. Do not edit.
|
|
928
2667
|
*/
|
|
929
2668
|
|
|
930
|
-
export { TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdDataTable, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdSidebar, TelcomdevUi };
|
|
2669
|
+
export { TD_DIALOG_CONFIG, TD_DIALOG_DATA, TD_ICONOS, TD_ICONOS_NOMBRES, TdAlerta, TdAutocompleteSelect, TdDataTable, TdDialog, TdDialogActions, TdDialogClose, TdDialogPrimary, TdDialogRef, TdFooter, TdHeader, TdIcon, TdIconoRegistry, TdInput, TdSelect, TdSidebar, TdTab, TdTabs, TelcomdevUi };
|
|
931
2670
|
//# sourceMappingURL=telcomdev-ui.mjs.map
|