@telcomdev/ui 0.0.5 → 0.0.6

package/README.md

@@ -37,6 +37,22 @@ El comportamiento predeterminado durante el scroll es `reposition`, por lo que
 el panel permanece unido al control. Puede cambiarse con
 `scrollBehavior="close"`.
 
+## Tabs
+
+```html
+<td-tabs [(selectedIndex)]="indice">
+  <td-tab label="General" icon="settings">
+    <app-general />
+  </td-tab>
+  <td-tab label="Usuarios" icon="people" [badge]="12">
+    <app-usuarios />
+  </td-tab>
+</td-tabs>
+```
+
+Incluye las variantes `linea`, `pastilla` y `contenida`, además de navegación
+con flechas, Home y End.
+
 Para usar componentes basados en Overlay, como `TdDialog`, agrega el estilo
 estructural del CDK en `angular.json`:
 

package/fesm2022/telcomdev-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, HostListener, Directive, ChangeDetectorRef, forwardRef, DestroyRef, signal } from '@angular/core';
+import { Component, Injectable, inject, HostBinding, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, HostListener, Directive, ChangeDetectorRef, forwardRef, DestroyRef, signal, TemplateRef, ViewChildren, ContentChildren } from '@angular/core';
 import * as i2 from '@angular/cdk/scrolling';
 import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i1 from '@angular/forms';
@@ -468,7 +468,138 @@ const TD_ICONOS = {
         path: 'M4 3h16l3 11v7H1v-7L4 3Zm1.5 2L3 14h5l1 2h6l1-2h5l-2.5-9h-13Z',
     },
     pdf: {
-        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',
+        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',
+        estilo: 'linea',
+        grosor: 1.65,
+    },
+    save: {
+        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',
+    },
+    copy: {
+        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',
+    },
+    download: {
+        path: 'M11 3h2v10.17l3.59-3.58L18 11l-6 6-6-6 1.41-1.41L11 13.17V3ZM4 19h16v2H4v-2Z',
+    },
+    upload: {
+        path: 'm12 3 6 6-1.41 1.41L13 6.83V17h-2V6.83l-3.59 3.58L6 9l6-6ZM4 19h16v2H4v-2Z',
+    },
+    print: {
+        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',
+    },
+    excel: {
+        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',
+        estilo: 'linea',
+        grosor: 1.65,
+    },
+    xml: {
+        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',
+        estilo: 'linea',
+        grosor: 1.65,
+    },
+    zip: {
+        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',
+        estilo: 'linea',
+        grosor: 1.65,
+    },
+    file: {
+        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',
+    },
+    image: {
+        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',
+    },
+    calendar: {
+        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',
+    },
+    clock: {
+        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',
+    },
+    history: {
+        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',
+    },
+    filter: {
+        path: 'M3 4h18l-7 8v6l-4 2v-8L3 4Zm4.41 2L12 11.25 16.59 6H7.41Z',
+    },
+    refresh: {
+        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',
+    },
+    sort: {
+        path: 'M7 3 3 7h3v11H3l4 4 4-4H8V7h3L7 3Zm10 0-4 4h3v11h-3l4 4 4-4h-3V7h3l-4-4Z',
+    },
+    more_vertical: {
+        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',
+    },
+    more_horizontal: {
+        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',
+    },
+    arrow_back: {
+        path: 'm11 5-7 7 7 7 1.41-1.41L7.83 13H21v-2H7.83l4.58-4.59L11 5Z',
+    },
+    arrow_forward: {
+        path: 'm13 5-1.41 1.41L16.17 11H3v2h13.17l-4.58 4.59L13 19l7-7-7-7Z',
+    },
+    login: {
+        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',
+    },
+    logout: {
+        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',
+    },
+    lock: {
+        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',
+    },
+    lock_open: {
+        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',
+    },
+    mail: {
+        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',
+    },
+    phone: {
+        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',
+    },
+    send: {
+        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',
+    },
+    location: {
+        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',
+    },
+    language: {
+        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',
+    },
+    info: {
+        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',
+    },
+    warning: {
+        path: 'M12 2 1 21h22L12 2Zm0 4.03L19.53 19H4.47L12 6.03ZM11 10v5h2v-5h-2Zm0 6v2h2v-2h-2Z',
+    },
+    error: {
+        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',
+    },
+    check_circle: {
+        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',
+    },
+    cancel: {
+        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',
+    },
+    star: {
+        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',
+    },
+    favorite: {
+        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',
+    },
+    database: {
+        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',
+    },
+    cloud: {
+        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',
+    },
+    camera: {
+        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',
+    },
+    link: {
+        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',
+    },
+    external_link: {
+        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',
     },
 };
 const TD_ICONOS_NOMBRES = Object.freeze(Object.keys(TD_ICONOS));
@@ -526,9 +657,16 @@ class TdIcon {
       [attr.role]="titulo ? 'img' : null"
       focusable="false"
     >
-      <path [attr.d]="definicion().path" />
+      <path
+        [attr.d]="definicion().path"
+        [attr.fill]="definicion().estilo === 'linea' ? 'none' : 'currentColor'"
+        [attr.stroke]="definicion().estilo === 'linea' ? 'currentColor' : 'none'"
+        [attr.stroke-width]="definicion().grosor || null"
+        [attr.stroke-linecap]="definicion().estilo === 'linea' ? 'round' : null"
+        [attr.stroke-linejoin]="definicion().estilo === 'linea' ? 'round' : null"
+      />
     </svg>
-  `, 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 });
+  `, 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdIcon, decorators: [{
             type: Component,
@@ -540,9 +678,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       [attr.role]="titulo ? 'img' : null"
       focusable="false"
     >
-      <path [attr.d]="definicion().path" />
+      <path
+        [attr.d]="definicion().path"
+        [attr.fill]="definicion().estilo === 'linea' ? 'none' : 'currentColor'"
+        [attr.stroke]="definicion().estilo === 'linea' ? 'currentColor' : 'none'"
+        [attr.stroke-width]="definicion().grosor || null"
+        [attr.stroke-linecap]="definicion().estilo === 'linea' ? 'round' : null"
+        [attr.stroke-linejoin]="definicion().estilo === 'linea' ? 'round' : null"
+      />
     </svg>
-  `, 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"] }]
+  `, 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"] }]
         }], propDecorators: { nombre: [{
                 type: Input
             }], titulo: [{
@@ -2222,6 +2367,297 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                 type: Output
             }] } });
 
+let tabSequence = 0;
+class TdTab {
+    generatedId = `td-tab-${++tabSequence}`;
+    id = '';
+    label = 'Tab';
+    icon = '';
+    disabled = false;
+    badge = null;
+    content;
+    get resolvedId() {
+        return this.id || this.generatedId;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTab, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: `
+    <ng-template>
+      <ng-content />
+    </ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTab, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'td-tab',
+                    template: `
+    <ng-template>
+      <ng-content />
+    </ng-template>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], propDecorators: { id: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], icon: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], badge: [{
+                type: Input
+            }], content: [{
+                type: ViewChild,
+                args: [TemplateRef, { static: true }]
+            }] } });
+
+class TdTabs {
+    cdr = inject(ChangeDetectorRef);
+    tabsChange;
+    requestedIndex = 0;
+    tabQuery;
+    tabButtons;
+    set selectedIndex(value) {
+        this.requestedIndex = Number.isFinite(value) ? Math.max(0, Math.trunc(value)) : 0;
+        if (this.tabQuery)
+            this.applyRequestedIndex();
+    }
+    get selectedIndex() {
+        return this.activeIndex;
+    }
+    variant = 'linea';
+    alignment = 'inicio';
+    stretch = false;
+    dark = false;
+    ariaLabel = 'Pestañas';
+    panelFocusable = false;
+    selectedIndexChange = new EventEmitter();
+    tabChange = new EventEmitter();
+    tabs = [];
+    activeIndex = 0;
+    get activeTab() {
+        return this.tabs[this.activeIndex] ?? null;
+    }
+    ngAfterContentInit() {
+        this.syncTabs();
+        this.tabsChange = this.tabQuery.changes.subscribe(() => this.syncTabs());
+    }
+    ngOnDestroy() {
+        this.tabsChange?.unsubscribe();
+    }
+    select(index, focus = false) {
+        const tab = this.tabs[index];
+        if (!tab || tab.disabled || index === this.activeIndex) {
+            if (focus && tab && !tab.disabled)
+                this.focusButton(index);
+            return;
+        }
+        this.activeIndex = index;
+        this.requestedIndex = index;
+        this.selectedIndexChange.emit(index);
+        this.tabChange.emit(tab);
+        this.cdr.markForCheck();
+        if (focus)
+            queueMicrotask(() => this.focusButton(index));
+    }
+    handleKeydown(event) {
+        const horizontalKeys = ['ArrowLeft', 'ArrowRight'];
+        if (!horizontalKeys.includes(event.key) && !['Home', 'End'].includes(event.key))
+            return;
+        event.preventDefault();
+        if (event.key === 'Home') {
+            this.select(this.firstEnabledIndex(), true);
+            return;
+        }
+        if (event.key === 'End') {
+            this.select(this.lastEnabledIndex(), true);
+            return;
+        }
+        this.select(this.nextEnabledIndex(event.key === 'ArrowRight' ? 1 : -1), true);
+    }
+    tabId(tab) {
+        return `${tab.resolvedId}-trigger`;
+    }
+    panelId(tab) {
+        return `${tab.resolvedId}-panel`;
+    }
+    syncTabs() {
+        this.tabs = this.tabQuery.toArray();
+        this.applyRequestedIndex();
+        this.cdr.markForCheck();
+    }
+    applyRequestedIndex() {
+        if (!this.tabs.length) {
+            this.activeIndex = 0;
+            return;
+        }
+        const requested = Math.min(this.requestedIndex, this.tabs.length - 1);
+        if (!this.tabs[requested]?.disabled) {
+            this.activeIndex = requested;
+            return;
+        }
+        const firstEnabled = this.firstEnabledIndex();
+        this.activeIndex = firstEnabled >= 0 ? firstEnabled : 0;
+    }
+    nextEnabledIndex(direction) {
+        if (!this.tabs.length)
+            return 0;
+        let next = this.activeIndex;
+        for (let index = 0; index < this.tabs.length; index++) {
+            next = (next + direction + this.tabs.length) % this.tabs.length;
+            if (!this.tabs[next]?.disabled)
+                return next;
+        }
+        return this.activeIndex;
+    }
+    firstEnabledIndex() {
+        return this.tabs.findIndex((tab) => !tab.disabled);
+    }
+    lastEnabledIndex() {
+        for (let index = this.tabs.length - 1; index >= 0; index--) {
+            if (!this.tabs[index]?.disabled)
+                return index;
+        }
+        return this.activeIndex;
+    }
+    focusButton(index) {
+        this.tabButtons.get(index)?.nativeElement.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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: `
+    <section
+      class="td-tabs"
+      [class.td-tabs--dark]="dark"
+      [class.td-tabs--stretch]="stretch"
+      [class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
+        (dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
+    >
+      <div
+        class="td-tabs__list"
+        role="tablist"
+        [attr.aria-label]="ariaLabel"
+        (keydown)="handleKeydown($event)"
+      >
+        @for (tab of tabs; track tab.resolvedId; let index = $index) {
+          <button
+            #tabButton
+            type="button"
+            class="td-tabs__tab"
+            role="tab"
+            [id]="tabId(tab)"
+            [class.td-tabs__tab--active]="index === activeIndex"
+            [disabled]="tab.disabled"
+            [attr.tabindex]="index === activeIndex ? 0 : -1"
+            [attr.aria-selected]="index === activeIndex"
+            [attr.aria-controls]="panelId(tab)"
+            (click)="select(index)"
+          >
+            @if (tab.icon) {
+              <td-icon [nombre]="tab.icon" />
+            }
+            <span>{{ tab.label }}</span>
+            @if (tab.badge !== null) {
+              <small>{{ tab.badge }}</small>
+            }
+          </button>
+        }
+      </div>
+
+      @if (activeTab; as tab) {
+        <div
+          class="td-tabs__panel"
+          role="tabpanel"
+          [id]="panelId(tab)"
+          [attr.aria-labelledby]="tabId(tab)"
+          [attr.tabindex]="panelFocusable ? 0 : null"
+        >
+          <ng-container [ngTemplateOutlet]="tab.content" />
+        </div>
+      }
+    </section>
+  `, 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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TdTabs, decorators: [{
+            type: Component,
+            args: [{ selector: 'td-tabs', imports: [NgTemplateOutlet, TdIcon], template: `
+    <section
+      class="td-tabs"
+      [class.td-tabs--dark]="dark"
+      [class.td-tabs--stretch]="stretch"
+      [class]="'td-tabs td-tabs--' + variant + ' td-tabs--align-' + alignment +
+        (dark ? ' td-tabs--dark' : '') + (stretch ? ' td-tabs--stretch' : '')"
+    >
+      <div
+        class="td-tabs__list"
+        role="tablist"
+        [attr.aria-label]="ariaLabel"
+        (keydown)="handleKeydown($event)"
+      >
+        @for (tab of tabs; track tab.resolvedId; let index = $index) {
+          <button
+            #tabButton
+            type="button"
+            class="td-tabs__tab"
+            role="tab"
+            [id]="tabId(tab)"
+            [class.td-tabs__tab--active]="index === activeIndex"
+            [disabled]="tab.disabled"
+            [attr.tabindex]="index === activeIndex ? 0 : -1"
+            [attr.aria-selected]="index === activeIndex"
+            [attr.aria-controls]="panelId(tab)"
+            (click)="select(index)"
+          >
+            @if (tab.icon) {
+              <td-icon [nombre]="tab.icon" />
+            }
+            <span>{{ tab.label }}</span>
+            @if (tab.badge !== null) {
+              <small>{{ tab.badge }}</small>
+            }
+          </button>
+        }
+      </div>
+
+      @if (activeTab; as tab) {
+        <div
+          class="td-tabs__panel"
+          role="tabpanel"
+          [id]="panelId(tab)"
+          [attr.aria-labelledby]="tabId(tab)"
+          [attr.tabindex]="panelFocusable ? 0 : null"
+        >
+          <ng-container [ngTemplateOutlet]="tab.content" />
+        </div>
+      }
+    </section>
+  `, 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"] }]
+        }], propDecorators: { tabQuery: [{
+                type: ContentChildren,
+                args: [TdTab]
+            }], tabButtons: [{
+                type: ViewChildren,
+                args: ['tabButton']
+            }], selectedIndex: [{
+                type: Input
+            }], variant: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], stretch: [{
+                type: Input
+            }], dark: [{
+                type: Input
+            }], ariaLabel: [{
+                type: Input
+            }], panelFocusable: [{
+                type: Input
+            }], selectedIndexChange: [{
+                type: Output
+            }], tabChange: [{
+                type: Output
+            }] } });
+
 /*
  * Public API Surface of telcomdev-ui
  */
@@ -2230,5 +2666,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-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, TelcomdevUi };
+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 };
 //# sourceMappingURL=telcomdev-ui.mjs.map