Dialog

import { Component } from "@angular/core";
import {
  BadgeComponent,
  ButtonComponent,
  DialogBodyComponent,
  DialogComponent,
  DialogContentComponent,
  DialogDescriptionComponent,
  DialogFooterComponent,
  DialogHeaderComponent,
  DialogTitleComponent,
} from "@sinequa/galactik";

@Component({
  selector: "sample-component",
  imports: [
    DialogComponent,
    DialogContentComponent,
    DialogHeaderComponent,
    DialogTitleComponent,
    DialogBodyComponent,
    DialogDescriptionComponent,
    DialogFooterComponent,
    BadgeComponent,
    ButtonComponent,
  ],
  template: `
    <div class="flex gap-2">
      <button variant="secondary" size="md" (click)="dialog.show()">Open (non-modal)</button>
      <button variant="secondary" size="md" (click)="dialog.showModal()">Open (modal)</button>
      <button variant="secondary" size="md" (click)="dialog.showPopover()">Open (popover)</button>
    </div>

    <dialog #dialog="dialog" id="profileDialog">
      <DialogContent size="md">
        <DialogHeader>
          <badge variant="icon" scheme="info" size="md" aria-label="Information">i</badge>
          <DialogTitle>Edit profile</DialogTitle>
        </DialogHeader>
        <DialogBody>
          <DialogDescription>Make changes to your profile here. Click save when you're done.</DialogDescription>
        </DialogBody>
        <DialogFooter>
          <!-- Native Invoker Commands API — closes "profileDialog" without a click handler. -->
          <button variant="secondary" size="md" command="close" commandfor="profileDialog">Cancel</button>
          <button variant="primary" size="md" (click)="dialog.close('dialog-confirm')">Save changes</button>
        </DialogFooter>
      </DialogContent>
    </dialog>
  `,
})
export class SampleComponent {}

import { afterNextRender, Component, signal, viewChild } from "@angular/core";
import {
  ButtonComponent,
  createCallable,
  DialogBodyComponent,
  DialogComponent,
  DialogContentComponent,
  DialogFooterComponent,
  DialogHeaderComponent,
  DialogTitleComponent,
  injectCallRef,
  InputComponent,
  InputControlDirective,
} from "@sinequa/galactik";

interface EditNameProps {
  currentName: string;
}
type EditNameResult = { name: string } | null;

@Component({
  selector: "edit-name-dialog",
  imports: [
    DialogComponent,
    DialogContentComponent,
    DialogHeaderComponent,
    DialogTitleComponent,
    DialogBodyComponent,
    DialogFooterComponent,
    InputComponent,
    InputControlDirective,
    ButtonComponent,
  ],
  template: `
    <dialog #dialog="dialog" (closed)="onClosed()">
      <DialogContent size="sm">
        <DialogHeader>
          <DialogTitle>Edit name</DialogTitle>
        </DialogHeader>
        <DialogBody>
          <input-group>
            <input
              input-control
              type="text"
              [value]="name()"
              (input)="name.set($any($event.target).value)"
              aria-label="Name"
            />
          </input-group>
        </DialogBody>
        <DialogFooter>
          <button variant="secondary" size="md" (click)="dialog.cancel()">Cancel</button>
          <button variant="primary" size="md" [disabled]="!name().trim()" (click)="save()">Save</button>
        </DialogFooter>
      </DialogContent>
    </dialog>
  `,
})
export class EditNameDialog {
  protected readonly call = injectCallRef<EditNameProps, EditNameResult>();
  protected readonly name = signal("");
  private readonly dialog = viewChild.required(DialogComponent);
  private saved = false;

  constructor() {
    this.name.set(this.call.props().currentName);
    afterNextRender(() => this.dialog().showModal());
  }

  protected save() {
    this.saved = true;
    this.call.end({ name: this.name().trim() });
    this.dialog().close("dialog-confirm");
  }

  // Cancel / Escape / backdrop all land here without having gone through save().
  protected onClosed() {
    if (!this.saved) this.call.end(null);
  }
}

export const EditName = createCallable<EditNameProps, EditNameResult>(EditNameDialog);

import { afterNextRender, Component, viewChild } from "@angular/core";
import {
  ButtonComponent,
  createCallable,
  DialogBodyComponent,
  DialogComponent,
  DialogContentComponent,
  injectCallRef,
} from "@sinequa/galactik";

@Component({
  selector: "stacked-toast-dialog",
  imports: [DialogComponent, DialogContentComponent, DialogBodyComponent, ButtonComponent],
  template: `
    <!-- Plain "dialog" attribute, matching the "dialog, [dialog]" selector on any host element. -->
    <div dialog #dlg="dialog" [class.opacity-0]="call.ended()" (closed)="call.end()">
      <DialogContent size="sm">
        <DialogBody>
          <p>Notice {{ call.index() + 1 }} of {{ call.stackSize() }}</p>
          <p>{{ call.props().message }}</p>
          <button variant="primary" size="md" [disabled]="call.ended()" (click)="dlg.close()">Dismiss</button>
        </DialogBody>
      </DialogContent>
    </div>
  `,
})
export class StackedToastDialog {
  // R = void here: this dialog just needs to be dismissed, no result value.
  protected readonly call = injectCallRef<{ message: string }>();
  private readonly dlg = viewChild.required(DialogComponent);

  constructor() {
    afterNextRender(() => this.dlg().show());
  }
}

// unmountDelay: 200 — leaves time for the opacity transition to play before teardown.
export const Notify = createCallable<{ message: string }>(StackedToastDialog, 200);

import { Directive, inject } from "@angular/core";
import { DIALOG_REF } from "@sinequa/galactik";

@Directive({
  selector: "button[dialogClose]",
  host: { "(click)": "dialogRef?.close()" },
})
export class DialogCloseButtonDirective {
  // Optional — injecting DIALOG_REF works whether or not this button ends up inside a Dialog.
  private readonly dialogRef = inject(DIALOG_REF, { optional: true });
}

import { Component, ElementRef, inject } from "@angular/core";
import { ButtonComponent } from "@sinequa/galactik";
import { Confirm } from "./confirm-dialog";

@Component({
  selector: "sample-component",
  imports: [ButtonComponent],
  template: `
    <button variant="secondary" size="md" popovertarget="actions-popover">Actions</button>
    <div popover id="actions-popover" class="p-3">
      <button variant="primary" size="md" (click)="remove()">Delete item…</button>
    </div>
  `,
})
export class SampleComponent {
  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef);

  protected async remove() {
    const confirmed = await Confirm.call(
      { message: "Delete this item?" },
      // The nearest popover, if any: undefined falls back to document.body.
      { container: this.host.nativeElement.closest<HTMLElement>("[popover]") ?? undefined },
    );
    if (confirmed) console.log("deleted");
  }
}