@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.
@@ -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 { NgTemplateOutlet } from '@angular/common';
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 2h9l5 5v15H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm8 1.5V8h4.5L14 3.5ZM8 12v7h2v-2h1.2a2.5 2.5 0 0 0 0-5H8Zm2 2h1.2a.5.5 0 0 1 0 1H10v-1Zm4-2v7h2v-2h1v-2h-1v-1h2v-2h-4Z',
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 [attr.d]="definicion().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%;fill:currentColor}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
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 [attr.d]="definicion().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%;fill:currentColor}\n"] }]
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