Dialog

1import { css, html, LitElement, nothing, type PropertyValues } from "lit";
2import { customElement, property, query, state } from "lit/decorators.js";
3import { unsafeSVG } from "lit/directives/unsafe-svg.js";
4import { X } from "lucide-static";
5import { TW } from "@/registry/lib/tailwindMixin";
6import { cn } from "@/registry/lib/utils";
7 
8const TwLitElement = TW(LitElement);
9 
10/**
11 * Dialog component properties
12 */
13export interface DialogProperties {
14  open?: boolean;
15  modal?: boolean;
16}
17 
18export interface DialogTriggerProperties {
19  disabled?: boolean;
20}
21 
22export interface DialogContentProperties {
23  closeOnEscape?: boolean;
24  closeOnBackdrop?: boolean;
25}
26 
27export interface DialogCloseEvent {
28  reason: "escape" | "backdrop" | "close-button" | "programmatic";
29}
30 
31export interface DialogOpenChangeEvent extends CustomEvent {
32  detail: { open: boolean };
33}
34 
35/**
36 * Root dialog container managing state
37 */
38@customElement("ui-dialog")
39export class Dialog extends TwLitElement implements DialogProperties {
40  @property({ type: Boolean, reflect: true }) open = false;
41  @property({ type: Boolean }) modal = true;
42 
43  @query("ui-dialog-content") contentElement?: DialogContent;
44 
45  render() {
46    return html`
47      <style>
48        :host {
49          display: contents;
50        }
51      </style>
52      <slot name="trigger"></slot>
53      <slot name="content"></slot>
54    `;
55  }
56 
57  override connectedCallback() {
58    super.connectedCallback();
59    this.addEventListener(
60      "trigger-click",
61      this.handleTriggerClick as EventListener,
62    );
63    this.addEventListener(
64      "content-close",
65      this.handleContentClose as EventListener,
66    );
67  }
68 
69  override disconnectedCallback() {
70    super.disconnectedCallback();
71    this.removeEventListener(
72      "trigger-click",
73      this.handleTriggerClick as EventListener,
74    );
75    this.removeEventListener(
76      "content-close",
77      this.handleContentClose as EventListener,
78    );
79  }
80 
81  override updated(changedProperties: PropertyValues) {
82    super.updated(changedProperties);
83 
84    if (changedProperties.has("open")) {
85      // Dispatch dialog-open-change event
86      this.dispatchEvent(
87        new CustomEvent("dialog-open-change", {
88          detail: { open: this.open },
89          bubbles: true,
90          composed: true,
91        }),
92      );
93    }
94  }
95 
96  private handleTriggerClick = () => {
97    this.open = !this.open;
98  };
99 
100  private handleContentClose = (e: CustomEvent) => {
101    this.open = false;
102 
103    this.dispatchEvent(
104// … truncated