sheet

1import { OverlayModule } from '@angular/cdk/overlay';
2import {
3  BasePortalOutlet,
4  CdkPortalOutlet,
5  type ComponentPortal,
6  PortalModule,
7  type TemplatePortal,
8} from '@angular/cdk/portal';
9import {
10  ChangeDetectionStrategy,
11  Component,
12  type ComponentRef,
13  computed,
14  ElementRef,
15  type EmbeddedViewRef,
16  type EventEmitter,
17  inject,
18  output,
19  signal,
20  type TemplateRef,
21  type Type,
22  viewChild,
23  type ViewContainerRef,
24} from '@angular/core';
25 
26import { NgIcon, provideIcons } from '@ng-icons/core';
27import { lucideX } from '@ng-icons/lucide';
28 
29import { ZardButtonComponent } from '@/shared/components/button';
30import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
31 
32import type { ZardSheetRef } from './sheet-ref';
33import { sheetVariants, type ZardSheetVariants } from './sheet.variants';
34 
35export type OnClickCallback<T> = (instance: T) => false | void | object;
36export class ZardSheetOptions<T, U> {
37  zCancelIcon?: string;
38  zCancelText?: string | null;
39  zClosable?: boolean;
40  zContent?: string | TemplateRef<T> | Type<T>;
41  zCustomClasses?: string;
42  zData?: U;
43  zDescription?: string;
44  zHeight?: string;
45  zHideFooter?: boolean;
46  zMaskClosable?: boolean;
47  zOkDestructive?: boolean;
48  zOkDisabled?: boolean;
49  zOkIcon?: string;
50  zOkText?: string | null;
51  zOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFn;
52  zOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFn;
53  zSide?: ZardSheetVariants['zSide'] = 'left';
54  zSize?: ZardSheetVariants['zSize'] = 'default';
55  zTitle?: string | TemplateRef<T>;
56  zViewContainerRef?: ViewContainerRef;
57  zWidth?: string;
58}
59 
60@Component({
61  selector: 'z-sheet',
62  imports: [OverlayModule, PortalModule, ZardButtonComponent, NgIcon],
63  template: `
64    @if (config.zClosable || config.zClosable === undefined) {
65      <button
66        type="button"
67        data-testid="z-close-header-button"
68        z-button
69        zType="ghost"
70        zSize="sm"
71        class="absolute top-1 right-1 cursor-pointer"
72        (click)="onCloseClick()"
73      >
74        <ng-icon name="lucideX" />
75      </button>
76    }
77 
78    @if (config.zTitle || config.zDescription) {
79      <header data-slot="sheet-header" class="flex flex-col gap-1.5 p-4">
80        @if (config.zTitle) {
81          <h4 data-testid="z-title" data-slot="sheet-title" class="text-lg leading-none font-semibold tracking-tight">
82            {{ config.zTitle }}
83          </h4>
84 
85          @if (config.zDescription) {
86// … truncated