separator

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  input,
7  ViewEncapsulation,
8} from '@angular/core';
9 
10import type { ClassValue } from 'clsx';
11 
12import { mergeClasses } from '@/shared/utils/merge-classes';
13 
14import { separatorVariants, type ZardSeparatorVariants } from './separator.variants';
15 
16@Component({
17  selector: 'z-separator',
18  template: '',
19  changeDetection: ChangeDetectionStrategy.OnPush,
20  encapsulation: ViewEncapsulation.None,
21  host: {
22    'data-slot': 'separator',
23    '[attr.data-orientation]': 'zOrientation()',
24    '[attr.role]': 'zDecorative() ? "none" : "separator"',
25    '[attr.aria-orientation]': '!zDecorative() && zOrientation() === "vertical" ? "vertical" : null',
26    '[class]': 'classes()',
27  },
28  exportAs: 'zSeparator',
29})
30export class ZardSeparatorComponent {
31  readonly zOrientation = input<ZardSeparatorVariants['zOrientation']>('horizontal');
32  readonly zDecorative = input(true, { transform: booleanAttribute });
33  readonly class = input<ClassValue>('');
34 
35  // shadcn/ui uses div through SeparatorPrimitive. We don't use div, so we need to add 'block' class
36  // to make it match shadcn/ui styling
37  protected readonly classes = computed(() => mergeClasses(separatorVariants(), 'block', this.class()));
38}