toggle-group

1import { NgTemplateOutlet } from '@angular/common';
2import {
3  booleanAttribute,
4  ChangeDetectionStrategy,
5  Component,
6  computed,
7  forwardRef,
8  input,
9  linkedSignal,
10  output,
11  signal,
12  type TemplateRef,
13  ViewEncapsulation,
14} from '@angular/core';
15import { type ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
16 
17import { NgIcon, type IconName } from '@ng-icons/core';
18import type { ClassValue } from 'clsx';
19 
20import {
21  toggleVariants,
22  type ZardToggleSizeVariants,
23  type ZardToggleTypeVariants,
24} from '@/shared/components/toggle/toggle.variants';
25import { mergeClasses } from '@/shared/utils/merge-classes';
26 
27import { toggleGroupItemVariants, toggleGroupVariants } from './toggle-group.variants';
28 
29export interface ZardToggleGroupItem {
30  value: string;
31  label?: string;
32  icon?: IconName;
33  template?: TemplateRef<void>;
34  disabled?: boolean;
35  ariaLabel?: string;
36}
37 
38type OnTouchedType = () => void;
39type OnChangeType = (value: string | string[]) => void;
40 
41@Component({
42  selector: 'z-toggle-group',
43  imports: [NgIcon, NgTemplateOutlet],
44  template: `
45    <div
46      role="group"
47      data-slot="toggle-group"
48      [class]="classes()"
49      [attr.data-variant]="zType()"
50      [attr.data-size]="zSize()"
51      [attr.data-orientation]="zOrientation()"
52      [attr.data-horizontal]="zOrientation() === 'horizontal' || null"
53      [attr.data-vertical]="zOrientation() === 'vertical' || null"
54      [attr.data-spacing]="zSpacing()"
55      [style.--gap]="zSpacing()"
56    >
57      @for (item of zItems(); track item.value) {
58        <button
59          type="button"
60          data-slot="toggle-group-item"
61          [attr.data-variant]="zType()"
62          [attr.data-size]="zSize()"
63          [attr.data-spacing]="zSpacing()"
64          [attr.aria-pressed]="isItemPressed(item.value)"
65          [attr.data-state]="isItemPressed(item.value) ? 'on' : 'off'"
66          [attr.aria-label]="item.ariaLabel"
67          [class]="itemClasses()"
68          [disabled]="disabledState() || item.disabled"
69          (click)="toggleItem(item)"
70        >
71          @if (item.template) {
72            <ng-container [ngTemplateOutlet]="item.template" />
73          } @else {
74            @if (item.icon) {
75              <ng-icon [name]="item.icon" class="size-4!" />
76            }
77            @if (item.label) {
78              <span>{{ item.label }}</span>
79            } @else if (!item.icon) {
80              <span>{{ item.value }}</span>
81            }
82          }
83        </button>
84      }
85// … truncated