button-group

1import {
2  ChangeDetectionStrategy,
3  Component,
4  computed,
5  Directive,
6  inject,
7  input,
8  ViewEncapsulation,
9} from '@angular/core';
10 
11import { type ClassValue } from 'clsx';
12 
13import { mergeClasses } from '@/shared/utils/merge-classes';
14 
15import {
16  buttonGroupDividerVariants,
17  buttonGroupTextVariants,
18  buttonGroupVariants,
19  type ZardButtonGroupVariants,
20} from './button-group.variants';
21import { ZardSeparatorComponent } from '../separator/separator.component';
22import { type ZardSeparatorVariants } from '../separator/separator.variants';
23 
24@Component({
25  selector: 'z-button-group',
26  template: `
27    <ng-content />
28  `,
29  changeDetection: ChangeDetectionStrategy.OnPush,
30  encapsulation: ViewEncapsulation.None,
31  host: {
32    role: 'group',
33    'data-slot': 'button-group',
34    '[class]': 'classes()',
35    '[attr.data-orientation]': 'zOrientation()',
36    '[attr.aria-orientation]': 'zOrientation()',
37  },
38  exportAs: 'zButtonGroup',
39})
40export class ZardButtonGroupComponent {
41  readonly zOrientation = input<Required<ZardButtonGroupVariants>['zOrientation']>('horizontal');
42  readonly class = input<ClassValue>('');
43 
44  protected readonly classes = computed(() =>
45    mergeClasses(
46      buttonGroupVariants({
47        zOrientation: this.zOrientation(),
48      }),
49      this.class(),
50    ),
51  );
52}
53 
54@Component({
55  selector: 'z-button-group-divider',
56  imports: [ZardSeparatorComponent],
57  template: `
58    <z-separator [class]="classes()" aria-hidden="true" [zOrientation]="orientation()" />
59  `,
60  changeDetection: ChangeDetectionStrategy.OnPush,
61  encapsulation: ViewEncapsulation.None,
62  host: {
63    class: 'contents',
64    'data-slot': 'button-group-separator',
65  },
66  exportAs: 'zButtonGroupDivider',
67})
68export class ZardButtonGroupDividerComponent {
69  readonly zOrientation = input<ZardSeparatorVariants['zOrientation']>(null);
70  readonly class = input<ClassValue>('');
71 
72  private readonly parent = inject(ZardButtonGroupComponent, {
73    optional: true,
74    host: true,
75  });
76 
77  protected readonly orientation = computed(() => {
78    if (!this.parent || typeof this.zOrientation() === 'string') {
79      return this.zOrientation();
80    }
81 
82    return this.parent.zOrientation() === 'vertical' ? 'horizontal' : 'vertical';
83  });
84 
85  protected readonly classes = computed(() =>
86    mergeClasses(
87      buttonGroupDividerVariants({
88        zOrientation: this.orientation(),
89      }),
90      this.class(),
91    ),
92  );
93}
94 
95@Directive({
96  selector: '[z-button-group-text]',
97  host: {
98// … truncated