@joanroucoux/cairn-ui 0.7.2 → 0.8.0

package/fesm2022/joanroucoux-cairn-ui-dialog.mjs

@@ -0,0 +1,626 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, output, signal, computed, inject, ElementRef, DestroyRef, afterNextRender, afterRenderEffect, Component } from '@angular/core';
+
+const GRACE = 50;
+function afterExit(element, done) {
+    const style = getComputedStyle(element);
+    const wait = longest(style.transitionDuration) + longest(style.transitionDelay);
+    if (wait === 0) {
+        done();
+        return () => undefined;
+    }
+    const onEnd = (event) => {
+        if (event.target === element && !event.pseudoElement) {
+            cancel();
+            done();
+        }
+    };
+    const timer = setTimeout(() => {
+        cancel();
+        done();
+    }, wait + GRACE);
+    const cancel = () => {
+        clearTimeout(timer);
+        element.removeEventListener('transitionend', onEnd);
+    };
+    element.addEventListener('transitionend', onEnd);
+    return cancel;
+}
+function longest(list) {
+    return Math.max(0, ...list.split(',').map(toMs));
+}
+function toMs(value) {
+    const amount = Number.parseFloat(value);
+    if (Number.isNaN(amount)) {
+        return 0;
+    }
+    return value.trim().endsWith('ms') ? amount : amount * 1000;
+}
+
+const DIALOG_STYLES = `
+dialog {
+  --dialog-ease: var(--ease-sheet);
+  transition:
+    transform var(--duration-base) var(--dialog-ease),
+    overlay var(--duration-base) allow-discrete,
+    display var(--duration-base) allow-discrete;
+  transform: translateY(var(--drag-y, 0px));
+}
+
+dialog:not([open]) {
+  transform: translateY(100%);
+  transition-duration: var(--duration-exit);
+}
+
+@starting-style {
+  dialog[open] {
+    transform: translateY(100%);
+  }
+}
+
+dialog[data-dragging] {
+  transition: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog {
+    transition:
+      opacity var(--duration-base) var(--dialog-ease),
+      overlay var(--duration-base) allow-discrete,
+      display var(--duration-base) allow-discrete;
+    opacity: 1;
+  }
+
+  dialog:not([open]) {
+    opacity: 0;
+    transform: translateY(var(--drag-y, 0px));
+  }
+
+  @starting-style {
+    dialog[open] {
+      opacity: 0;
+      transform: translateY(0);
+    }
+  }
+}
+
+@media (min-width: 64rem) {
+  dialog {
+    --dialog-ease: var(--ease-out);
+    transition:
+      opacity var(--duration-base) var(--dialog-ease),
+      transform var(--duration-base) var(--dialog-ease),
+      overlay var(--duration-base) allow-discrete,
+      display var(--duration-base) allow-discrete;
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  dialog:not([open]) {
+    opacity: 0;
+    transform: scale(var(--enter-scale));
+  }
+
+  @starting-style {
+    dialog[open] {
+      opacity: 0;
+      transform: scale(var(--enter-scale));
+    }
+  }
+}
+
+dialog::backdrop {
+  transition: opacity var(--duration-base) var(--ease-out);
+  opacity: 1;
+}
+
+dialog:not([open])::backdrop {
+  opacity: 0;
+  transition-duration: var(--duration-exit);
+}
+
+@starting-style {
+  dialog[open]::backdrop {
+    opacity: 0;
+  }
+}
+`;
+
+const DISMISS_RATIO = 0.3;
+const DISMISS_SPEED = 0.5;
+const SPEED_WINDOW = 100;
+const SLOP = 6;
+const CONTROLS = 'button, a, input, select, textarea, [role="button"]';
+class SheetDrag {
+    #panel;
+    #grips;
+    #dismiss;
+    #enabled;
+    #gesture = null;
+    constructor(panel, grips, dismiss, enabled) {
+        this.#panel = panel;
+        this.#grips = grips;
+        this.#dismiss = dismiss;
+        this.#enabled = enabled;
+        for (const grip of grips) {
+            grip.addEventListener('pointerdown', this.#onDown);
+            grip.addEventListener('pointermove', this.#onMove);
+            grip.addEventListener('pointerup', this.#onUp);
+            grip.addEventListener('pointercancel', this.#onCancel);
+        }
+    }
+    reset() {
+        this.#gesture = null;
+        this.#panel.removeAttribute('data-dragging');
+        this.#panel.style.removeProperty('--drag-y');
+    }
+    destroy() {
+        for (const grip of this.#grips) {
+            grip.removeEventListener('pointerdown', this.#onDown);
+            grip.removeEventListener('pointermove', this.#onMove);
+            grip.removeEventListener('pointerup', this.#onUp);
+            grip.removeEventListener('pointercancel', this.#onCancel);
+        }
+    }
+    #onDown = (event) => {
+        const grip = event.currentTarget;
+        if (event.button !== 0 || !this.#enabled() || !isSheet() || event.target.closest(CONTROLS)) {
+            return;
+        }
+        grip.setPointerCapture(event.pointerId);
+        this.#gesture = {
+            id: event.pointerId,
+            startX: event.clientX,
+            startY: event.clientY,
+            dragging: false,
+            height: 0,
+            offset: 0,
+            samples: [{ y: event.clientY, at: event.timeStamp }],
+        };
+    };
+    #onMove = (event) => {
+        const gesture = this.#current(event);
+        if (!gesture) {
+            return;
+        }
+        const dx = event.clientX - gesture.startX;
+        const dy = event.clientY - gesture.startY;
+        if (!gesture.dragging) {
+            if (Math.max(Math.abs(dx), Math.abs(dy)) < SLOP) {
+                return;
+            }
+            if (Math.abs(dx) > Math.abs(dy)) {
+                this.#gesture = null;
+                return;
+            }
+            gesture.dragging = true;
+            gesture.height = this.#panel.getBoundingClientRect().height;
+            this.#panel.setAttribute('data-dragging', '');
+        }
+        gesture.offset = Math.max(0, dy);
+        gesture.samples.push({ y: event.clientY, at: event.timeStamp });
+        this.#panel.style.setProperty('--drag-y', `${gesture.offset}px`);
+    };
+    #onUp = (event) => {
+        const gesture = this.#current(event);
+        if (!gesture) {
+            return;
+        }
+        this.#gesture = null;
+        if (!gesture.dragging) {
+            return;
+        }
+        this.#panel.removeAttribute('data-dragging');
+        const release = { y: event.clientY, at: event.timeStamp };
+        if (gesture.offset > gesture.height * DISMISS_RATIO || releaseSpeed(gesture.samples, release) > DISMISS_SPEED) {
+            this.#dismiss();
+        }
+        else {
+            this.reset();
+        }
+    };
+    #onCancel = (event) => {
+        if (this.#current(event)) {
+            this.#gesture = null;
+            this.#panel.removeAttribute('data-dragging');
+            this.reset();
+        }
+    };
+    #current(event) {
+        return this.#gesture?.id === event.pointerId ? this.#gesture : null;
+    }
+}
+function isSheet() {
+    return typeof matchMedia === 'function' && !matchMedia('(min-width: 64rem)').matches;
+}
+function releaseSpeed(samples, last) {
+    const first = samples.find((sample) => sample.at >= last.at - SPEED_WINDOW) ?? last;
+    const elapsed = last.at - first.at;
+    return elapsed > 0 ? (last.y - first.y) / elapsed : 0;
+}
+
+/** Named dialog widths; any other CSS length is accepted as is. `DialogWidth` is derived from this tuple. */
+const DIALOG_WIDTHS = ['md', 'lg'];
+const WIDTH_VALUES = {
+    md: '28rem',
+    lg: '560px',
+};
+/** Spacing presets. `DialogLayout` is derived from this tuple. */
+const DIALOG_LAYOUTS = ['trade', 'form', 'list', 'confirm'];
+const LAYOUTS = {
+    trade: {
+        dialog: '',
+        header: 'items-start lg:pt-6',
+        title: 'pt-1 lg:pt-0',
+        cross: 'lg:-mt-1.5',
+        icon: 'lg:size-5',
+        handle: 'pt-[7.5px]',
+        body: 'pt-3 pb-4 lg:pt-5 lg:pb-5',
+        footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
+    },
+    form: {
+        dialog: '',
+        header: 'items-center lg:pt-6',
+        title: '',
+        cross: '',
+        icon: 'lg:size-[22px]',
+        handle: 'pt-[7.5px]',
+        body: 'pt-2 pb-5 lg:pt-4 lg:pb-5',
+        footer: 'max-lg:pb-[calc(12px+env(safe-area-inset-bottom))] lg:pb-5',
+    },
+    list: {
+        dialog: 'max-lg:h-[calc(100dvh-58px)] lg:mt-24 lg:mb-auto lg:max-h-[min(760px,calc(100dvh-96px-32px))]',
+        header: 'items-center lg:pt-5',
+        title: '',
+        cross: '',
+        icon: 'lg:size-[22px]',
+        handle: 'pt-[7.5px]',
+        body: 'pt-2 pb-4 lg:pt-4 lg:pb-5',
+        footer: 'pt-3 shadow-[0_-1px_0_var(--hairline)] max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pt-4 lg:pb-4',
+    },
+    confirm: {
+        dialog: '',
+        header: 'items-center pt-3 lg:pt-6',
+        title: '',
+        cross: '',
+        icon: 'lg:size-[22px]',
+        handle: 'pt-[11.5px]',
+        body: 'pt-3 pb-5 lg:pt-3 lg:pb-6',
+        footer: 'max-lg:pb-[calc(8px+env(safe-area-inset-bottom))] lg:pb-6',
+    },
+};
+/** What started a close, as `closed` reports it. `DialogCloseReason` is derived from this tuple. */
+const DIALOG_CLOSE_REASONS = ['escape', 'backdrop', 'cross', 'drag', 'programmatic'];
+const nextId = (() => {
+    let count = 0;
+    return () => `ui-dialog-${++count}`;
+})();
+/**
+ * Modal dialog on the native <dialog>: a bottom sheet under `64rem`, centered above it.
+ *
+ * `busy` keeps it open while its action runs: Escape, a click on the backdrop and a drag of the sheet do
+ * nothing and the cross is disabled. The owner disables its own buttons and still closes it through `open`.
+ *
+ * @example
+ * <ui-dialog heading="Buy" description="Ferrari" closeLabel="Close" width="528px" [open]="buying()" (dismissed)="buying.set(false)">
+ *   <p>Body</p>
+ *   <button dialogActions ui-button variant="outline" class="max-lg:hidden" (click)="buying.set(false)">Cancel</button>
+ *   <button dialogActions ui-button>Buy 40 shares</button>
+ * </ui-dialog>
+ */
+class UiDialog {
+    heading = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []));
+    description = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "description" }] : /* istanbul ignore next */ []));
+    closeLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "closeLabel" }] : /* istanbul ignore next */ []));
+    layout = input('trade', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+    truncateDescription = input(false, { ...(ngDevMode ? { debugName: "truncateDescription" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    width = input('lg', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []));
+    open = input(false, { ...(ngDevMode ? { debugName: "open" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    busy = input(false, { ...(ngDevMode ? { debugName: "busy" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    dismissed = output();
+    closed = output();
+    headingId = nextId();
+    descriptionId = `${this.headingId}-description`;
+    bodyId = `${this.headingId}-body`;
+    scrollable = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "scrollable" }] : /* istanbul ignore next */ []));
+    describedBy = computed(() => {
+        if (this.description()) {
+            return this.descriptionId;
+        }
+        return this.layout() === 'confirm' ? this.bodyId : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []));
+    widthValue = computed(() => {
+        const width = this.width();
+        return Object.hasOwn(WIDTH_VALUES, width) ? WIDTH_VALUES[width] : width;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "widthValue" }] : /* istanbul ignore next */ []));
+    spec = computed(() => LAYOUTS[this.layout()], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "spec" }] : /* istanbul ignore next */ []));
+    headerClasses = computed(() => `flex gap-2 pl-4 max-lg:touch-none lg:gap-3 lg:pl-6 ${this.spec().header} ${this.closeLabel() ? 'pr-2 lg:pr-4' : 'pr-4 lg:pr-6'}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "headerClasses" }] : /* istanbul ignore next */ []));
+    titleClasses = computed(() => this.spec().title, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []));
+    crossClasses = computed(() => `rounded-pill lg:rounded-control grid size-11 flex-none cursor-pointer place-items-center text-(--muted-foreground) transition-[scale,background-color,color] [transition-duration:var(--duration-press),var(--duration-fast),var(--duration-fast)] ease-out outline-none focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-(--ring) active:scale-(--press-scale) active:bg-(--soft) disabled:pointer-events-none disabled:opacity-40 lg:size-9 lg:hover:bg-(--glow) lg:hover:text-(--foreground) ${this.spec().cross}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "crossClasses" }] : /* istanbul ignore next */ []));
+    iconClasses = computed(() => this.spec().icon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconClasses" }] : /* istanbul ignore next */ []));
+    footerClasses = computed(() => `max-lg:[&>[ui-button]]:text-body flex justify-end gap-2 px-4 empty:hidden max-lg:flex-col-reverse max-lg:[&>[ui-button]]:h-[50px] max-lg:[&>[ui-button]]:w-full lg:px-6 ${this.spec().footer}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "footerClasses" }] : /* istanbul ignore next */ []));
+    classes = computed(() => `open:flex w-full flex-col overflow-hidden m-auto mt-auto max-h-[calc(100dvh-2rem)] max-lg:mb-0 max-lg:max-w-none max-lg:rounded-b-none lg:max-w-(--dialog-width) rounded-container bg-(--card) text-(--foreground) shadow-[0_0_0_1px_var(--border),0_24px_64px_rgb(0_0_0/0.24)] max-lg:shadow-[0_-1px_0_var(--border),0_-12px_32px_rgb(0_0_0/0.16)] backdrop:bg-black/[0.36] ${this.spec().dialog}`, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
+    #host = inject(ElementRef);
+    constructor() {
+        const destroyRef = inject(DestroyRef);
+        afterNextRender(() => {
+            const host = this.#host.nativeElement;
+            const grips = ['[data-dialog-handle]', '[data-dialog-header]'].map((grip) => host.querySelector(grip));
+            this.#drag = new SheetDrag(this.#dialog, grips, () => this.close('drag'), () => !this.busy());
+            destroyRef.onDestroy(() => {
+                this.#drag?.destroy();
+                this.#cancelExit();
+            });
+            if (typeof ResizeObserver === 'undefined') {
+                return;
+            }
+            const body = this.#host.nativeElement.querySelector('[data-dialog-body]');
+            const observer = new ResizeObserver(() => this.scrollable.set(body.scrollHeight > body.clientHeight));
+            observer.observe(body);
+            observer.observe(body.firstElementChild);
+            destroyRef.onDestroy(() => observer.disconnect());
+        });
+        afterRenderEffect(() => {
+            // viewChild.required can't target a #private field (NG1053); safe because the template has exactly one <dialog>.
+            const dialog = this.#host.nativeElement.querySelector('dialog');
+            if (this.open() && !dialog.open) {
+                this.#cancelExit();
+                this.#drag?.reset();
+                dialog.showModal();
+            }
+            else if (!this.open() && dialog.open) {
+                this.close('programmatic');
+            }
+        });
+    }
+    #pressedOnBackdrop = false;
+    #drag = null;
+    #reason = null;
+    #cancelExit = () => undefined;
+    close(reason) {
+        if (this.#dialog.open) {
+            this.#reason = reason;
+            this.#dialog.close();
+        }
+    }
+    onCancel(event) {
+        if (event.target !== event.currentTarget) {
+            return;
+        }
+        event.preventDefault();
+        if (!this.busy()) {
+            this.close('escape');
+        }
+    }
+    onKeydown(event) {
+        if (event.key === 'Escape' && this.busy()) {
+            event.preventDefault();
+        }
+    }
+    onPointerDown(event) {
+        this.#pressedOnBackdrop = event.target === this.#dialog && this.#outside(event);
+    }
+    onClick(event) {
+        if (this.#pressedOnBackdrop && !this.busy() && event.target === this.#dialog && this.#outside(event)) {
+            this.close('backdrop');
+        }
+        this.#pressedOnBackdrop = false;
+    }
+    get #dialog() {
+        return this.#host.nativeElement.querySelector('dialog');
+    }
+    #outside(event) {
+        const rect = this.#dialog.getBoundingClientRect();
+        return (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom);
+    }
+    onNativeClose() {
+        const asked = this.#reason;
+        this.#reason = null;
+        if (this.#dialog.open) {
+            return;
+        }
+        if (asked === null && this.busy()) {
+            this.#dialog.showModal();
+            return;
+        }
+        const reason = asked ?? 'escape';
+        if (reason !== 'programmatic') {
+            this.dismissed.emit();
+        }
+        this.#awaitExit(reason);
+    }
+    #awaitExit(reason) {
+        this.#cancelExit();
+        this.#cancelExit = afterExit(this.#dialog, () => {
+            this.#cancelExit = () => undefined;
+            this.#drag?.reset();
+            this.closed.emit(reason);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.7", type: UiDialog, isStandalone: true, selector: "ui-dialog", inputs: { heading: { classPropertyName: "heading", publicName: "heading", isSignal: true, isRequired: true, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, closeLabel: { classPropertyName: "closeLabel", publicName: "closeLabel", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, truncateDescription: { classPropertyName: "truncateDescription", publicName: "truncateDescription", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismissed: "dismissed", closed: "closed" }, host: { listeners: { "pointerdown": "onPointerDown($event)", "click": "onClick($event)", "keydown": "onKeydown($event)" } }, ngImport: i0, template: `
+    <dialog
+      #dlg
+      [attr.aria-busy]="busy() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-labelledby]="headingId"
+      [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
+      [class]="classes()"
+      [style.--dialog-width]="widthValue()"
+      (cancel)="onCancel($event)"
+      (close)="onNativeClose()"
+    >
+      <div
+        aria-hidden="true"
+        class="flex h-5 touch-none justify-center lg:hidden"
+        data-dialog-handle
+        [class]="spec().handle"
+      >
+        <span class="rounded-pill h-[5px] w-9 bg-(--border)"></span>
+      </div>
+
+      <div data-dialog-header [class]="headerClasses()">
+        <div class="flex min-w-0 flex-1 flex-col" [class]="titleClasses()">
+          <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
+
+          @if (description()) {
+            <p
+              class="text-label text-(--muted-foreground)"
+              [class.truncate]="truncateDescription()"
+              [id]="descriptionId"
+            >
+              {{ description() }}
+            </p>
+          }
+        </div>
+
+        @if (closeLabel()) {
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
+            <svg
+              aria-hidden="true"
+              class="block size-[22px] fill-none stroke-current stroke-[1.75]"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              viewBox="0 0 24 24"
+              [class]="iconClasses()"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        }
+      </div>
+
+      <div
+        class="min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6"
+        data-dialog-body
+        [attr.aria-labelledby]="scrollable() ? headingId : null"
+        [attr.role]="scrollable() ? 'region' : null"
+        [attr.tabindex]="scrollable() ? 0 : null"
+        [id]="bodyId"
+      >
+        <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
+        <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
+          <ng-content />
+        </div>
+      </div>
+
+      <div data-dialog-footer [class]="footerClasses()">
+        <ng-content select="[dialogActions]" />
+      </div>
+    </dialog>
+  `, isInline: true, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: UiDialog, decorators: [{
+            type: Component,
+            args: [{ selector: 'ui-dialog', host: {
+                        '(pointerdown)': 'onPointerDown($event)',
+                        '(click)': 'onClick($event)',
+                        '(keydown)': 'onKeydown($event)',
+                    }, template: `
+    <dialog
+      #dlg
+      [attr.aria-busy]="busy() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-labelledby]="headingId"
+      [attr.role]="layout() === 'confirm' ? 'alertdialog' : 'dialog'"
+      [class]="classes()"
+      [style.--dialog-width]="widthValue()"
+      (cancel)="onCancel($event)"
+      (close)="onNativeClose()"
+    >
+      <div
+        aria-hidden="true"
+        class="flex h-5 touch-none justify-center lg:hidden"
+        data-dialog-handle
+        [class]="spec().handle"
+      >
+        <span class="rounded-pill h-[5px] w-9 bg-(--border)"></span>
+      </div>
+
+      <div data-dialog-header [class]="headerClasses()">
+        <div class="flex min-w-0 flex-1 flex-col" [class]="titleClasses()">
+          <h2 class="text-title font-semibold" [id]="headingId">{{ heading() }}</h2>
+
+          @if (description()) {
+            <p
+              class="text-label text-(--muted-foreground)"
+              [class.truncate]="truncateDescription()"
+              [id]="descriptionId"
+            >
+              {{ description() }}
+            </p>
+          }
+        </div>
+
+        @if (closeLabel()) {
+          <button
+            type="button"
+            [attr.aria-label]="closeLabel()"
+            [class]="crossClasses()"
+            [disabled]="busy()"
+            (click)="close('cross')"
+          >
+            <svg
+              aria-hidden="true"
+              class="block size-[22px] fill-none stroke-current stroke-[1.75]"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              viewBox="0 0 24 24"
+              [class]="iconClasses()"
+            >
+              <path d="M18 6 6 18" />
+              <path d="m6 6 12 12" />
+            </svg>
+          </button>
+        }
+      </div>
+
+      <div
+        class="min-h-0 flex-1 overflow-y-auto px-4 outline-none focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--ring) lg:px-6"
+        data-dialog-body
+        [attr.aria-labelledby]="scrollable() ? headingId : null"
+        [attr.role]="scrollable() ? 'region' : null"
+        [attr.tabindex]="scrollable() ? 0 : null"
+        [id]="bodyId"
+      >
+        <!-- empty:hidden keeps a body-less dialog from carrying the body's vertical padding. -->
+        <div class="flex flex-col gap-4 empty:hidden" [class]="spec().body">
+          <ng-content />
+        </div>
+      </div>
+
+      <div data-dialog-footer [class]="footerClasses()">
+        <ng-content select="[dialogActions]" />
+      </div>
+    </dialog>
+  `, styles: ["dialog{--dialog-ease: var(--ease-sheet);transition:transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;transform:translateY(var(--drag-y, 0px))}dialog:not([open]){transform:translateY(100%);transition-duration:var(--duration-exit)}@starting-style{dialog[open]{transform:translateY(100%)}}dialog[data-dragging]{transition:none}@media(prefers-reduced-motion:reduce){dialog{transition:opacity var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1}dialog:not([open]){opacity:0;transform:translateY(var(--drag-y, 0px))}@starting-style{dialog[open]{opacity:0;transform:translateY(0)}}}@media(min-width:64rem){dialog{--dialog-ease: var(--ease-out);transition:opacity var(--duration-base) var(--dialog-ease),transform var(--duration-base) var(--dialog-ease),overlay var(--duration-base) allow-discrete,display var(--duration-base) allow-discrete;opacity:1;transform:scale(1)}dialog:not([open]){opacity:0;transform:scale(var(--enter-scale))}@starting-style{dialog[open]{opacity:0;transform:scale(var(--enter-scale))}}}dialog::backdrop{transition:opacity var(--duration-base) var(--ease-out);opacity:1}dialog:not([open])::backdrop{opacity:0;transition-duration:var(--duration-exit)}@starting-style{dialog[open]::backdrop{opacity:0}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { heading: [{ type: i0.Input, args: [{ isSignal: true, alias: "heading", required: true }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], closeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeLabel", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], truncateDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "truncateDescription", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], busy: [{ type: i0.Input, args: [{ isSignal: true, alias: "busy", required: false }] }], dismissed: [{ type: i0.Output, args: ["dismissed"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DIALOG_CLOSE_REASONS, DIALOG_LAYOUTS, DIALOG_WIDTHS, UiDialog };
+//# sourceMappingURL=joanroucoux-cairn-ui-dialog.mjs.map