card

1import {
2  booleanAttribute,
3  ChangeDetectionStrategy,
4  Component,
5  computed,
6  input,
7  type TemplateRef,
8  ViewEncapsulation,
9} from '@angular/core';
10 
11import type { ClassValue } from 'clsx';
12 
13import { ZardStringTemplateOutletDirective } from '@/shared/core';
14import { mergeClasses } from '@/shared/utils/merge-classes';
15 
16import {
17  cardActionVariants,
18  cardContentVariants,
19  cardDescriptionVariant,
20  cardFooterVariants,
21  cardHeaderVariants,
22  cardTitleVariant,
23  cardVariants,
24  type ZardCardSizeType,
25} from './card.variants';
26 
27@Component({
28  selector: 'z-card-title, [z-card-title]',
29  imports: [ZardStringTemplateOutletDirective],
30  template: `
31    @let title = zTitle();
32    <ng-container *zStringTemplateOutlet="title">{{ title }}</ng-container>
33  `,
34  changeDetection: ChangeDetectionStrategy.OnPush,
35  encapsulation: ViewEncapsulation.None,
36  host: {
37    'data-slot': 'card-title',
38    '[class]': 'classes()',
39  },
40  exportAs: 'zCardTitle',
41})
42export class ZardCardTitleComponent {
43  readonly class = input<ClassValue>('');
44  readonly zTitle = input<string | TemplateRef<void>>();
45 
46  protected readonly classes = computed(() => mergeClasses(cardTitleVariant(), this.class()));
47}
48 
49@Component({
50  selector: 'z-card-description, [z-card-description]',
51  imports: [ZardStringTemplateOutletDirective],
52  template: `
53    @let description = zDescription();
54    <ng-container *zStringTemplateOutlet="description">{{ description }}</ng-container>
55  `,
56  changeDetection: ChangeDetectionStrategy.OnPush,
57  encapsulation: ViewEncapsulation.None,
58  host: {
59    'data-slot': 'card-description',
60    '[class]': 'classes()',
61  },
62  exportAs: 'zCardDescription',
63})
64export class ZardCardDescriptionComponent {
65  readonly class = input<ClassValue>('');
66  readonly zDescription = input<string | TemplateRef<void>>();
67 
68  protected readonly classes = computed(() => mergeClasses(cardDescriptionVariant(), this.class()));
69}
70 
71@Component({
72  selector: 'z-card-action, [z-card-action]',
73  template: `
74    <ng-content />
75  `,
76  changeDetection: ChangeDetectionStrategy.OnPush,
77  encapsulation: ViewEncapsulation.None,
78  host: {
79    'data-slot': 'card-action',
80    '[class]': 'classes()',
81  },
82  exportAs: 'zCardAction',
83})
84export class ZardCardActionComponent {
85  readonly class = input<ClassValue>('');
86 
87  protected readonly classes = computed(() => mergeClasses(cardActionVariants(), this.class()));
88}
89 
90@Component({
91  selector: 'z-card-header, [z-card-header]',
92  template: `
93    <ng-content />
94  `,
95// … truncated