item

1import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
2 
3import type { ClassValue } from 'clsx';
4 
5import { mergeClasses } from '@/shared/utils/merge-classes';
6 
7import {
8  itemActionsVariants,
9  itemContentVariants,
10  itemDescriptionVariants,
11  itemFooterVariants,
12  itemGroupVariants,
13  itemHeaderVariants,
14  itemMediaVariants,
15  itemSeparatorVariants,
16  itemTitleVariants,
17  itemVariants,
18  type ZardItemMediaVariantVariants,
19  type ZardItemSizeVariants,
20  type ZardItemVariantVariants,
21} from './item.variants';
22 
23@Component({
24  selector: 'z-item-group, [z-item-group]',
25  template: '<ng-content />',
26  changeDetection: ChangeDetectionStrategy.OnPush,
27  encapsulation: ViewEncapsulation.None,
28  host: {
29    role: 'list',
30    'data-slot': 'item-group',
31    '[class]': 'classes()',
32  },
33  exportAs: 'zItemGroup',
34})
35export class ZardItemGroupComponent {
36  readonly class = input<ClassValue>('');
37 
38  protected readonly classes = computed(() => mergeClasses(itemGroupVariants(), this.class()));
39}
40 
41@Component({
42  selector: 'z-item-separator, [z-item-separator]',
43  template: '',
44  changeDetection: ChangeDetectionStrategy.OnPush,
45  encapsulation: ViewEncapsulation.None,
46  host: {
47    role: 'separator',
48    'aria-orientation': 'horizontal',
49    'data-slot': 'item-separator',
50    '[class]': 'classes()',
51  },
52  exportAs: 'zItemSeparator',
53})
54export class ZardItemSeparatorComponent {
55  readonly class = input<ClassValue>('');
56 
57  protected readonly classes = computed(() => mergeClasses(itemSeparatorVariants(), this.class()));
58}
59 
60@Component({
61  selector: 'z-item, [z-item]',
62  template: '<ng-content />',
63  changeDetection: ChangeDetectionStrategy.OnPush,
64  encapsulation: ViewEncapsulation.None,
65  host: {
66    'data-slot': 'item',
67    '[attr.data-variant]': 'zVariant()',
68    '[attr.data-size]': 'zSize()',
69    '[class]': 'classes()',
70  },
71  exportAs: 'zItem',
72})
73export class ZardItemComponent {
74  readonly class = input<ClassValue>('');
75  readonly zVariant = input<ZardItemVariantVariants>('default');
76  readonly zSize = input<ZardItemSizeVariants>('default');
77 
78  protected readonly classes = computed(() =>
79    mergeClasses(itemVariants({ zVariant: this.zVariant(), zSize: this.zSize() }), this.class()),
80  );
81}
82 
83@Component({
84  selector: 'z-item-media, [z-item-media]',
85  template: '<ng-content />',
86  changeDetection: ChangeDetectionStrategy.OnPush,
87  encapsulation: ViewEncapsulation.None,
88  host: {
89    'data-slot': 'item-media',
90// … truncated