dialog

1import { A11yModule } from '@angular/cdk/a11y';
2import { OverlayModule } from '@angular/cdk/overlay';
3import {
4  BasePortalOutlet,
5  CdkPortalOutlet,
6  type ComponentPortal,
7  PortalModule,
8  type TemplatePortal,
9} from '@angular/cdk/portal';
10import {
11  ChangeDetectionStrategy,
12  Component,
13  type ComponentRef,
14  computed,
15  ElementRef,
16  type EmbeddedViewRef,
17  type EventEmitter,
18  inject,
19  output,
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';
28import type { ClassValue } from 'clsx';
29 
30import { ZardIdDirective } from '@/shared/core';
31import { mergeClasses, noopFn } from '@/shared/utils/merge-classes';
32 
33import type { ZardDialogRef } from './dialog-ref';
34import {
35  dialogDescriptionVariants,
36  dialogFooterVariants,
37  dialogHeaderVariants,
38  dialogTitleVariants,
39  dialogVariants,
40} from './dialog.variants';
41import { ZardButtonComponent } from '../button/button.component';
42 
43export type OnClickCallback<T> = (instance: T) => false | void | object;
44export class ZardDialogOptions<T, U> {
45  zCancelIcon?: string;
46  zCancelText?: string | null;
47  zClosable?: boolean;
48  zContent?: string | TemplateRef<T> | Type<T>;
49  zCustomClasses?: ClassValue;
50  zData?: U;
51  zDescription?: string;
52  /** Animation duration (ms) used when closing. Defaults to 100 (matches CSS transition). */
53  zDuration?: number;
54  zHideFooter?: boolean;
55  zMaskClosable?: boolean;
56  zOkDestructive?: boolean;
57  zOkDisabled?: boolean;
58  zOkIcon?: string;
59  zOkText?: string | null;
60  zOnCancel?: EventEmitter<T> | OnClickCallback<T> = noopFn;
61  zOnOk?: EventEmitter<T> | OnClickCallback<T> = noopFn;
62  zTitle?: string | TemplateRef<T>;
63  zViewContainerRef?: ViewContainerRef;
64  zWidth?: string;
65}
66 
67@Component({
68  selector: 'z-dialog',
69  imports: [A11yModule, OverlayModule, PortalModule, ZardButtonComponent, ZardIdDirective, NgIcon],
70  template: `
71    <ng-container zardId="z-dialog" #idRef="zardId">
72      @if (config.zClosable || config.zClosable === undefined) {
73        <button
74          type="button"
75          data-testid="z-close-header-button"
76          data-slot="dialog-close"
77          z-button
78          zType="ghost"
79          zSize="icon-sm"
80          class="absolute top-2 right-2"
81          (click)="onCloseClick()"
82        >
83          <ng-icon name="lucideX" class="size-4!" />
84          <span class="sr-only">Close</span>
85        </button>
86      }
87 
88// … truncated