tabs

1import { NgTemplateOutlet } from '@angular/common';
2import {
3  booleanAttribute,
4  ChangeDetectionStrategy,
5  Component,
6  computed,
7  contentChildren,
8  input,
9  output,
10  signal,
11  type TemplateRef,
12  viewChild,
13  ViewEncapsulation,
14} from '@angular/core';
15 
16import { NgIcon } from '@ng-icons/core';
17import { twMerge } from 'tailwind-merge';
18 
19import {
20  tabButtonVariants,
21  tabContainerVariants,
22  tabNavVariants,
23  type ZardTabVariants,
24} from '@/shared/components/tabs/tabs.variants';
25 
26@Component({
27  selector: 'z-tab',
28  imports: [],
29  template: `
30    <ng-template #content>
31      <ng-content />
32    </ng-template>
33  `,
34  changeDetection: ChangeDetectionStrategy.OnPush,
35  encapsulation: ViewEncapsulation.None,
36})
37export class ZardTabComponent {
38  readonly label = input.required<string>();
39  readonly zIcon = input<string | undefined>(undefined);
40  readonly zDisabled = input(false, { transform: booleanAttribute });
41  readonly contentTemplate = viewChild.required<TemplateRef<unknown>>('content');
42}
43 
44@Component({
45  selector: 'z-tab-group',
46  imports: [NgTemplateOutlet, NgIcon],
47  template: `
48    <nav
49      [class]="navClasses()"
50      role="tablist"
51      [attr.aria-orientation]="zOrientation()"
52      [attr.data-variant]="zVariant()"
53    >
54      @for (tab of tabs(); track $index; let index = $index) {
55        <button
56          type="button"
57          role="tab"
58          [attr.id]="'tab-' + index"
59          [attr.aria-selected]="activeTabIndex() === index"
60          [attr.data-active]="activeTabIndex() === index ? '' : null"
61          [attr.tabindex]="activeTabIndex() === index ? 0 : -1"
62          [attr.aria-controls]="'tabpanel-' + index"
63          [disabled]="zDisabled() || tab.zDisabled()"
64          (click)="setActiveTab(index)"
65          [class]="buttonClasses()"
66        >
67          @if (tab.zIcon()) {
68            <ng-icon [name]="tab.zIcon()!" />
69          }
70          {{ tab.label() }}
71        </button>
72      }
73    </nav>
74 
75    <div class="flex-1">
76      @for (tab of tabs(); track $index; let index = $index) {
77        <div
78          role="tabpanel"
79          [attr.id]="'tabpanel-' + index"
80          [attr.aria-labelledby]="'tab-' + index"
81          [attr.tabindex]="0"
82          [hidden]="activeTabIndex() !== index"
83          class="focus-visible:ring-primary/50 outline-none focus-visible:ring-2"
84        >
85          <ng-container [ngTemplateOutlet]="tab.contentTemplate()" />
86        </div>
87      }
88    </div>
89  `,
90// … truncated