prettier-modals-angular 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 srdavo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,152 @@
+# prettier-modals-angular
+
+Angular directives and an injectable service for [Prettier Modals](https://github.com/antuuanyf/prettier-modals) — beautiful open/close animations for native `<dialog>` elements, powered by GSAP Flip.
+
+Standalone (no `NgModule`), SSR-safe, and runs animations outside the Angular zone.
+
+## Installation
+
+```bash
+npm install prettier-modals-angular prettier-modals gsap
+```
+
+`prettier-modals`, `gsap`, and `@angular/core`/`@angular/common` are peer dependencies (Angular `>=17`).
+
+Register the GSAP plugins once, e.g. in `main.ts`:
+
+```ts
+import gsap from 'gsap'
+import { Flip } from 'gsap/Flip'
+import { CustomEase } from 'gsap/CustomEase'
+
+gsap.registerPlugin(Flip, CustomEase)
+```
+
+## Declarative usage (directives)
+
+Import the directives you need — or `PRETTY_MODAL_DIRECTIVES` for all of them — into a standalone component:
+
+```ts
+import { Component } from '@angular/core'
+import { PRETTY_MODAL_DIRECTIVES } from 'prettier-modals-angular'
+
+@Component({
+  selector: 'app-settings',
+  standalone: true,
+  imports: [PRETTY_MODAL_DIRECTIVES],
+  template: `
+    <button [prettyModalTrigger]="'settings'" anchor="origin">Open</button>
+
+    <dialog id="settings" prettyModal anchor="origin"
+            (opened)="onOpen()" (closed)="onClose()">
+      <h1>Settings</h1>
+      <button prettyModalClose>Close</button>
+    </dialog>
+  `,
+})
+export class SettingsComponent {
+  onOpen() {}
+  onClose() {}
+}
+```
+
+No `ViewChild`, no `NgZone` boilerplate — the directives wire everything to the core.
+
+### Directives
+
+| Directive | Selector | Description |
+|---|---|---|
+| `PrettyModalDirective` | `dialog[prettyModal]` | Marks the dialog (needs an `id`). Inputs: `anchor`, `animateCancel`. Outputs: `(opened)`, `(closed)`. |
+| `PrettyModalTriggerDirective` | `[prettyModalTrigger]` | Opens the dialog whose id/element it's bound to, morphing from the host. Input: `anchor`. |
+| `PrettyModalCloseDirective` | `[prettyModalClose]` | Closes the nearest ancestor `<dialog>` (or a given id/element). |
+
+`animateCancel` (default `true`) intercepts the native Escape key so it closes with the animation instead of instantly.
+
+## Trigger and dialog in separate components
+
+The trigger and the `<dialog>` **don't have to live in the same component**. They're linked only by the dialog's `id`: the `PrettyModalService` is a root singleton shared by the whole app, and the core resolves the dialog through `document.getElementById`. So you can wrap each part in its own reusable component:
+
+```ts
+// button.component.ts — knows only the target dialog id
+import { Component, Input } from '@angular/core'
+import { PrettyModalTriggerDirective, type PrettyModalAnchor } from 'prettier-modals-angular'
+
+@Component({
+  selector: 'app-modal-button',
+  standalone: true,
+  imports: [PrettyModalTriggerDirective],
+  template: `<button [prettyModalTrigger]="target" [anchor]="anchor"><ng-content /></button>`,
+})
+export class ModalButtonComponent {
+  @Input({ required: true }) target!: string
+  @Input() anchor?: PrettyModalAnchor
+}
+```
+
+```ts
+// modal.component.ts — owns the dialog, declared independently
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { PrettyModalDirective, PrettyModalCloseDirective, type PrettyModalAnchor } from 'prettier-modals-angular'
+
+@Component({
+  selector: 'app-modal',
+  standalone: true,
+  imports: [PrettyModalDirective, PrettyModalCloseDirective],
+  template: `
+    <dialog [id]="modalId" prettyModal [anchor]="anchor"
+            (opened)="opened.emit($event)" (closed)="closed.emit($event)">
+      <button prettyModalClose>Close</button>
+      <ng-content />
+    </dialog>
+  `,
+})
+export class ModalComponent {
+  // Don't name this input `id`: a native `id` would also be reflected onto the
+  // host <app-modal>, duplicating the id and breaking document.getElementById.
+  @Input({ required: true }) modalId!: string
+  @Input() anchor?: PrettyModalAnchor
+  @Output() opened = new EventEmitter<HTMLDialogElement>()
+  @Output() closed = new EventEmitter<HTMLDialogElement>()
+}
+```
+
+A parent just drops both in and matches the id:
+
+```html
+<app-modal-button target="settings" anchor="origin">Open</app-modal-button>
+
+<app-modal modalId="settings" anchor="origin">
+  <h1>Settings</h1>
+</app-modal>
+```
+
+Two things to keep in mind:
+
+- The dialog `id` must be **unique in the document** — Angular's view encapsulation scopes CSS, not `id` attributes. Avoid exposing a wrapper input literally named `id`: Angular reflects it onto the host element too, so it ends up duplicated (use `modalId` or similar, as above).
+- The `<dialog>` must be **rendered in the DOM** when the trigger fires. Don't strip it with `@if`/`*ngIf`; it stays hidden until opened anyway.
+
+## Imperative usage (service)
+
+```ts
+import { Component, inject } from '@angular/core'
+import { PrettyModalService } from 'prettier-modals-angular'
+
+@Component({ /* … */ })
+export class MyComponent {
+  private readonly modal = inject(PrettyModalService)
+
+  open(trigger: HTMLElement) {
+    this.modal.open('settings', { trigger, anchor: 'origin' })
+  }
+
+  close() {
+    this.modal.close('settings')
+  }
+}
+```
+
+`PrettyModalService` lazily creates the core in the browser only (SSR-safe) and runs every animation outside the Angular zone.
+
+## License
+
+MIT © Antonio Monreal Diaz

package/fesm2022/prettier-modals-angular.mjs

@@ -0,0 +1,235 @@
+import * as i0 from '@angular/core';
+import { inject, NgZone, PLATFORM_ID, Injectable, ElementRef, EventEmitter, booleanAttribute, Output, Input, Directive, HostListener } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { PrettyModal } from 'prettier-modals';
+
+/**
+ * Injectable wrapper around the vanilla `PrettyModal` core.
+ *
+ * - Lazily instantiates the core in the browser only (SSR-safe).
+ * - Runs GSAP animations outside the Angular zone to avoid change detection
+ *   on every animation frame.
+ */
+class PrettyModalService {
+    zone = inject(NgZone);
+    isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    modal = null;
+    registry = new Map();
+    /** Open a dialog (id or element), morphing from `options.trigger`. */
+    open(dialog, options = {}) {
+        const modal = this.ensure();
+        if (!modal)
+            return;
+        this.zone.runOutsideAngular(() => modal.open(dialog, options));
+    }
+    /** Close a dialog, morphing back into its trigger. */
+    close(dialog, options = {}) {
+        const modal = this.ensure();
+        if (!modal)
+            return;
+        this.zone.runOutsideAngular(() => modal.close(dialog, options));
+    }
+    /** Tear down the core instance and remove injected styles. */
+    destroy() {
+        this.modal?.destroy();
+        this.modal = null;
+    }
+    // --- directive wiring --------------------------------------------------
+    register(id, registration) {
+        this.registry.set(id, registration);
+    }
+    unregister(id) {
+        this.registry.delete(id);
+    }
+    registration(id) {
+        return this.registry.get(id);
+    }
+    ensure() {
+        if (!this.isBrowser)
+            return null;
+        if (!this.modal) {
+            this.zone.runOutsideAngular(() => {
+                this.modal = new PrettyModal();
+            });
+        }
+        return this.modal;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Marks a `<dialog>` as Pretty Modal managed. The dialog **must have an id** so
+ * triggers and close buttons can reference it.
+ *
+ * ```html
+ * <dialog id="settings" prettyModal anchor="origin"
+ *         (opened)="onOpen()" (closed)="onClose()">…</dialog>
+ * ```
+ */
+class PrettyModalDirective {
+    host = inject(ElementRef);
+    service = inject(PrettyModalService);
+    zone = inject(NgZone);
+    /** Default anchor for this dialog. Overridable per trigger. */
+    anchor;
+    /** Animate the close when the user presses Escape (native `cancel`). */
+    animateCancel = true;
+    opened = new EventEmitter();
+    closed = new EventEmitter();
+    get element() {
+        return this.host.nativeElement;
+    }
+    ngOnInit() {
+        const id = this.element.id;
+        if (!id) {
+            console.warn('[prettyModal] The <dialog> needs an id to be linked to its triggers.');
+            return;
+        }
+        this.service.register(id, this);
+        // Native Escape closes the dialog instantly, bypassing the animation.
+        // Intercept it and route through the service so it animates.
+        this.element.addEventListener('cancel', this.onCancel);
+    }
+    ngOnDestroy() {
+        if (this.element.id)
+            this.service.unregister(this.element.id);
+        this.element.removeEventListener('cancel', this.onCancel);
+    }
+    notifyOpened(dialog) {
+        this.zone.run(() => this.opened.emit(dialog));
+    }
+    notifyClosed(dialog) {
+        this.zone.run(() => this.closed.emit(dialog));
+    }
+    onCancel = (event) => {
+        if (!this.animateCancel)
+            return;
+        event.preventDefault();
+        this.service.close(this.element, { onClose: (d) => this.notifyClosed(d) });
+    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.24", type: PrettyModalDirective, isStandalone: true, selector: "dialog[prettyModal]", inputs: { anchor: "anchor", animateCancel: ["animateCancel", "animateCancel", booleanAttribute] }, outputs: { opened: "opened", closed: "closed" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'dialog[prettyModal]',
+                    standalone: true,
+                }]
+        }], propDecorators: { anchor: [{
+                type: Input
+            }], animateCancel: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], opened: [{
+                type: Output
+            }], closed: [{
+                type: Output
+            }] } });
+
+/**
+ * Opens a Pretty Modal dialog when the host element is clicked, morphing the
+ * dialog out of this element.
+ *
+ * ```html
+ * <button [prettyModalTrigger]="'settings'" anchor="origin">Open</button>
+ * ```
+ */
+class PrettyModalTriggerDirective {
+    host = inject(ElementRef);
+    service = inject(PrettyModalService);
+    /** Dialog id or element to open. */
+    target;
+    /** Overrides the dialog's default anchor for this trigger. */
+    anchor;
+    onClick() {
+        const id = typeof this.target === 'string' ? this.target : this.target.id;
+        const registration = id ? this.service.registration(id) : undefined;
+        this.service.open(this.target, {
+            trigger: this.host.nativeElement,
+            anchor: this.anchor ?? registration?.anchor,
+            onOpen: registration ? (d) => registration.notifyOpened(d) : undefined,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalTriggerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: PrettyModalTriggerDirective, isStandalone: true, selector: "[prettyModalTrigger]", inputs: { target: ["prettyModalTrigger", "target"], anchor: "anchor" }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalTriggerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[prettyModalTrigger]',
+                    standalone: true,
+                }]
+        }], propDecorators: { target: [{
+                type: Input,
+                args: [{ alias: 'prettyModalTrigger', required: true }]
+            }], anchor: [{
+                type: Input
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/**
+ * Closes a Pretty Modal dialog when the host element is clicked. By default it
+ * closes the nearest ancestor `<dialog>`; pass an id/element to target another.
+ *
+ * ```html
+ * <button prettyModalClose>Close</button>
+ * ```
+ */
+class PrettyModalCloseDirective {
+    host = inject(ElementRef);
+    service = inject(PrettyModalService);
+    /** Optional dialog id/element. Defaults to the nearest ancestor `<dialog>`. */
+    target;
+    onClick() {
+        const dialog = this.resolve();
+        if (!dialog)
+            return;
+        const id = typeof dialog === 'string' ? dialog : dialog.id;
+        const registration = id ? this.service.registration(id) : undefined;
+        this.service.close(dialog, {
+            onClose: registration ? (d) => registration.notifyClosed(d) : undefined,
+        });
+    }
+    resolve() {
+        if (this.target)
+            return this.target;
+        return this.host.nativeElement.closest('dialog');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.24", type: PrettyModalCloseDirective, isStandalone: true, selector: "[prettyModalClose]", inputs: { target: ["prettyModalClose", "target"] }, host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.24", ngImport: i0, type: PrettyModalCloseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[prettyModalClose]',
+                    standalone: true,
+                }]
+        }], propDecorators: { target: [{
+                type: Input,
+                args: [{ alias: 'prettyModalClose' }]
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+/** Convenience array to import all Pretty Modal directives at once. */
+const PRETTY_MODAL_DIRECTIVES = [
+    PrettyModalDirective,
+    PrettyModalTriggerDirective,
+    PrettyModalCloseDirective,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PRETTY_MODAL_DIRECTIVES, PrettyModalCloseDirective, PrettyModalDirective, PrettyModalService, PrettyModalTriggerDirective };
+//# sourceMappingURL=prettier-modals-angular.mjs.map

package/fesm2022/prettier-modals-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"prettier-modals-angular.mjs","sources":["../../src/lib/pretty-modal.service.ts","../../src/lib/pretty-modal.directive.ts","../../src/lib/pretty-modal-trigger.directive.ts","../../src/lib/pretty-modal-close.directive.ts","../../src/public-api.ts","../../src/prettier-modals-angular.ts"],"sourcesContent":["import { Injectable, NgZone, PLATFORM_ID, inject } from '@angular/core'\nimport { isPlatformBrowser } from '@angular/common'\nimport { PrettyModal } from 'prettier-modals'\nimport type { PrettyModalOptions, PrettyModalRegistration } from './pretty-modal.types'\n\n/**\n * Injectable wrapper around the vanilla `PrettyModal` core.\n *\n * - Lazily instantiates the core in the browser only (SSR-safe).\n * - Runs GSAP animations outside the Angular zone to avoid change detection\n *   on every animation frame.\n */\n@Injectable({ providedIn: 'root' })\nexport class PrettyModalService {\n  private readonly zone = inject(NgZone)\n  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID))\n  private modal: PrettyModal | null = null\n  private readonly registry = new Map<string, PrettyModalRegistration>()\n\n  /** Open a dialog (id or element), morphing from `options.trigger`. */\n  open(dialog: string | HTMLDialogElement, options: PrettyModalOptions = {}): void {\n    const modal = this.ensure()\n    if (!modal) return\n    this.zone.runOutsideAngular(() => modal.open(dialog, options))\n  }\n\n  /** Close a dialog, morphing back into its trigger. */\n  close(dialog: string | HTMLDialogElement, options: PrettyModalOptions = {}): void {\n    const modal = this.ensure()\n    if (!modal) return\n    this.zone.runOutsideAngular(() => modal.close(dialog, options))\n  }\n\n  /** Tear down the core instance and remove injected styles. */\n  destroy(): void {\n    this.modal?.destroy()\n    this.modal = null\n  }\n\n  // --- directive wiring --------------------------------------------------\n\n  register(id: string, registration: PrettyModalRegistration): void {\n    this.registry.set(id, registration)\n  }\n\n  unregister(id: string): void {\n    this.registry.delete(id)\n  }\n\n  registration(id: string): PrettyModalRegistration | undefined {\n    return this.registry.get(id)\n  }\n\n  private ensure(): PrettyModal | null {\n    if (!this.isBrowser) return null\n    if (!this.modal) {\n      this.zone.runOutsideAngular(() => {\n        this.modal = new PrettyModal()\n      })\n    }\n    return this.modal\n  }\n}\n","import {\n  Directive,\n  ElementRef,\n  EventEmitter,\n  Input,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  Output,\n  booleanAttribute,\n  inject,\n} from '@angular/core'\nimport { PrettyModalService } from './pretty-modal.service'\nimport type { PrettyModalAnchor, PrettyModalRegistration } from './pretty-modal.types'\n\n/**\n * Marks a `<dialog>` as Pretty Modal managed. The dialog **must have an id** so\n * triggers and close buttons can reference it.\n *\n * ```html\n * <dialog id=\"settings\" prettyModal anchor=\"origin\"\n *         (opened)=\"onOpen()\" (closed)=\"onClose()\">…</dialog>\n * ```\n */\n@Directive({\n  selector: 'dialog[prettyModal]',\n  standalone: true,\n})\nexport class PrettyModalDirective implements PrettyModalRegistration, OnInit, OnDestroy {\n  private readonly host = inject<ElementRef<HTMLDialogElement>>(ElementRef)\n  private readonly service = inject(PrettyModalService)\n  private readonly zone = inject(NgZone)\n\n  /** Default anchor for this dialog. Overridable per trigger. */\n  @Input() anchor?: PrettyModalAnchor\n\n  /** Animate the close when the user presses Escape (native `cancel`). */\n  @Input({ transform: booleanAttribute }) animateCancel = true\n\n  @Output() opened = new EventEmitter<HTMLDialogElement>()\n  @Output() closed = new EventEmitter<HTMLDialogElement>()\n\n  get element(): HTMLDialogElement {\n    return this.host.nativeElement\n  }\n\n  ngOnInit(): void {\n    const id = this.element.id\n    if (!id) {\n      console.warn('[prettyModal] The <dialog> needs an id to be linked to its triggers.')\n      return\n    }\n    this.service.register(id, this)\n    // Native Escape closes the dialog instantly, bypassing the animation.\n    // Intercept it and route through the service so it animates.\n    this.element.addEventListener('cancel', this.onCancel)\n  }\n\n  ngOnDestroy(): void {\n    if (this.element.id) this.service.unregister(this.element.id)\n    this.element.removeEventListener('cancel', this.onCancel)\n  }\n\n  notifyOpened(dialog: HTMLDialogElement): void {\n    this.zone.run(() => this.opened.emit(dialog))\n  }\n\n  notifyClosed(dialog: HTMLDialogElement): void {\n    this.zone.run(() => this.closed.emit(dialog))\n  }\n\n  private readonly onCancel = (event: Event): void => {\n    if (!this.animateCancel) return\n    event.preventDefault()\n    this.service.close(this.element, { onClose: (d) => this.notifyClosed(d) })\n  }\n}\n","import { Directive, ElementRef, HostListener, Input, inject } from '@angular/core'\nimport { PrettyModalService } from './pretty-modal.service'\nimport type { PrettyModalAnchor } from './pretty-modal.types'\n\n/**\n * Opens a Pretty Modal dialog when the host element is clicked, morphing the\n * dialog out of this element.\n *\n * ```html\n * <button [prettyModalTrigger]=\"'settings'\" anchor=\"origin\">Open</button>\n * ```\n */\n@Directive({\n  selector: '[prettyModalTrigger]',\n  standalone: true,\n})\nexport class PrettyModalTriggerDirective {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef)\n  private readonly service = inject(PrettyModalService)\n\n  /** Dialog id or element to open. */\n  @Input({ alias: 'prettyModalTrigger', required: true })\n  target!: string | HTMLDialogElement\n\n  /** Overrides the dialog's default anchor for this trigger. */\n  @Input() anchor?: PrettyModalAnchor\n\n  @HostListener('click')\n  onClick(): void {\n    const id = typeof this.target === 'string' ? this.target : this.target.id\n    const registration = id ? this.service.registration(id) : undefined\n\n    this.service.open(this.target, {\n      trigger: this.host.nativeElement,\n      anchor: this.anchor ?? registration?.anchor,\n      onOpen: registration ? (d) => registration.notifyOpened(d) : undefined,\n    })\n  }\n}\n","import { Directive, ElementRef, HostListener, Input, inject } from '@angular/core'\nimport { PrettyModalService } from './pretty-modal.service'\n\n/**\n * Closes a Pretty Modal dialog when the host element is clicked. By default it\n * closes the nearest ancestor `<dialog>`; pass an id/element to target another.\n *\n * ```html\n * <button prettyModalClose>Close</button>\n * ```\n */\n@Directive({\n  selector: '[prettyModalClose]',\n  standalone: true,\n})\nexport class PrettyModalCloseDirective {\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef)\n  private readonly service = inject(PrettyModalService)\n\n  /** Optional dialog id/element. Defaults to the nearest ancestor `<dialog>`. */\n  @Input({ alias: 'prettyModalClose' })\n  target?: string | HTMLDialogElement | ''\n\n  @HostListener('click')\n  onClick(): void {\n    const dialog = this.resolve()\n    if (!dialog) return\n\n    const id = typeof dialog === 'string' ? dialog : dialog.id\n    const registration = id ? this.service.registration(id) : undefined\n\n    this.service.close(dialog, {\n      onClose: registration ? (d) => registration.notifyClosed(d) : undefined,\n    })\n  }\n\n  private resolve(): string | HTMLDialogElement | null {\n    if (this.target) return this.target\n    return this.host.nativeElement.closest('dialog')\n  }\n}\n","import { PrettyModalDirective } from './lib/pretty-modal.directive'\nimport { PrettyModalTriggerDirective } from './lib/pretty-modal-trigger.directive'\nimport { PrettyModalCloseDirective } from './lib/pretty-modal-close.directive'\n\nexport { PrettyModalService } from './lib/pretty-modal.service'\nexport { PrettyModalDirective } from './lib/pretty-modal.directive'\nexport { PrettyModalTriggerDirective } from './lib/pretty-modal-trigger.directive'\nexport { PrettyModalCloseDirective } from './lib/pretty-modal-close.directive'\nexport type {\n  PrettyModalAnchor,\n  PrettyModalOptions,\n  PrettyModalRegistration,\n} from './lib/pretty-modal.types'\n\n/** Convenience array to import all Pretty Modal directives at once. */\nexport const PRETTY_MODAL_DIRECTIVES = [\n  PrettyModalDirective,\n  PrettyModalTriggerDirective,\n  PrettyModalCloseDirective,\n] as const\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="prettier-modals-angular" />
+export * from './public-api';

package/lib/pretty-modal-close.directive.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from "@angular/core";
+/**
+ * Closes a Pretty Modal dialog when the host element is clicked. By default it
+ * closes the nearest ancestor `<dialog>`; pass an id/element to target another.
+ *
+ * ```html
+ * <button prettyModalClose>Close</button>
+ * ```
+ */
+export declare class PrettyModalCloseDirective {
+    private readonly host;
+    private readonly service;
+    /** Optional dialog id/element. Defaults to the nearest ancestor `<dialog>`. */
+    target?: string | HTMLDialogElement | '';
+    onClick(): void;
+    private resolve;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrettyModalCloseDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrettyModalCloseDirective, "[prettyModalClose]", never, { "target": { "alias": "prettyModalClose"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/pretty-modal-trigger.directive.d.ts

@@ -0,0 +1,21 @@
+import type { PrettyModalAnchor } from './pretty-modal.types';
+import * as i0 from "@angular/core";
+/**
+ * Opens a Pretty Modal dialog when the host element is clicked, morphing the
+ * dialog out of this element.
+ *
+ * ```html
+ * <button [prettyModalTrigger]="'settings'" anchor="origin">Open</button>
+ * ```
+ */
+export declare class PrettyModalTriggerDirective {
+    private readonly host;
+    private readonly service;
+    /** Dialog id or element to open. */
+    target: string | HTMLDialogElement;
+    /** Overrides the dialog's default anchor for this trigger. */
+    anchor?: PrettyModalAnchor;
+    onClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrettyModalTriggerDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrettyModalTriggerDirective, "[prettyModalTrigger]", never, { "target": { "alias": "prettyModalTrigger"; "required": true; }; "anchor": { "alias": "anchor"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/pretty-modal.directive.d.ts

@@ -0,0 +1,32 @@
+import { EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import type { PrettyModalAnchor, PrettyModalRegistration } from './pretty-modal.types';
+import * as i0 from "@angular/core";
+/**
+ * Marks a `<dialog>` as Pretty Modal managed. The dialog **must have an id** so
+ * triggers and close buttons can reference it.
+ *
+ * ```html
+ * <dialog id="settings" prettyModal anchor="origin"
+ *         (opened)="onOpen()" (closed)="onClose()">…</dialog>
+ * ```
+ */
+export declare class PrettyModalDirective implements PrettyModalRegistration, OnInit, OnDestroy {
+    private readonly host;
+    private readonly service;
+    private readonly zone;
+    /** Default anchor for this dialog. Overridable per trigger. */
+    anchor?: PrettyModalAnchor;
+    /** Animate the close when the user presses Escape (native `cancel`). */
+    animateCancel: boolean;
+    opened: EventEmitter<HTMLDialogElement>;
+    closed: EventEmitter<HTMLDialogElement>;
+    get element(): HTMLDialogElement;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    notifyOpened(dialog: HTMLDialogElement): void;
+    notifyClosed(dialog: HTMLDialogElement): void;
+    private readonly onCancel;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrettyModalDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PrettyModalDirective, "dialog[prettyModal]", never, { "anchor": { "alias": "anchor"; "required": false; }; "animateCancel": { "alias": "animateCancel"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ngAcceptInputType_animateCancel: unknown;
+}

package/lib/pretty-modal.service.d.ts

@@ -0,0 +1,27 @@
+import type { PrettyModalOptions, PrettyModalRegistration } from './pretty-modal.types';
+import * as i0 from "@angular/core";
+/**
+ * Injectable wrapper around the vanilla `PrettyModal` core.
+ *
+ * - Lazily instantiates the core in the browser only (SSR-safe).
+ * - Runs GSAP animations outside the Angular zone to avoid change detection
+ *   on every animation frame.
+ */
+export declare class PrettyModalService {
+    private readonly zone;
+    private readonly isBrowser;
+    private modal;
+    private readonly registry;
+    /** Open a dialog (id or element), morphing from `options.trigger`. */
+    open(dialog: string | HTMLDialogElement, options?: PrettyModalOptions): void;
+    /** Close a dialog, morphing back into its trigger. */
+    close(dialog: string | HTMLDialogElement, options?: PrettyModalOptions): void;
+    /** Tear down the core instance and remove injected styles. */
+    destroy(): void;
+    register(id: string, registration: PrettyModalRegistration): void;
+    unregister(id: string): void;
+    registration(id: string): PrettyModalRegistration | undefined;
+    private ensure;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PrettyModalService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PrettyModalService>;
+}

package/lib/pretty-modal.types.d.ts

@@ -0,0 +1,21 @@
+export type PrettyModalAnchor = 'center' | 'origin';
+/** Options accepted by {@link PrettyModalService.open} / `.close`. */
+export interface PrettyModalOptions {
+    /** Element (or its id) the modal morphs from. */
+    trigger?: string | HTMLElement;
+    anchor?: PrettyModalAnchor;
+    duration?: number;
+    respectReducedMotion?: boolean;
+    onOpen?: (dialog: HTMLDialogElement) => void;
+    onClose?: (dialog: HTMLDialogElement) => void;
+}
+/**
+ * Contract a `[prettyModal]` directive exposes to the service so triggers can
+ * read its default anchor and notify it of open/close events. Kept as an
+ * interface to avoid a circular dependency between the directive and service.
+ */
+export interface PrettyModalRegistration {
+    readonly anchor?: PrettyModalAnchor;
+    notifyOpened(dialog: HTMLDialogElement): void;
+    notifyClosed(dialog: HTMLDialogElement): void;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "prettier-modals-angular",
+  "version": "0.1.0",
+  "description": "Angular directives and service for Prettier Modals — beautiful <dialog> animations powered by GSAP Flip.",
+  "keywords": [
+    "angular",
+    "modal",
+    "dialog",
+    "gsap",
+    "flip",
+    "animation",
+    "directive"
+  ],
+  "author": "Antonio Monreal Diaz",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/antuuanyf/prettier-modals.git",
+    "directory": "packages/angular"
+  },
+  "peerDependencies": {
+    "@angular/common": ">=17",
+    "@angular/core": ">=17",
+    "gsap": ">=3.12",
+    "prettier-modals": "^0.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/prettier-modals-angular.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/prettier-modals-angular.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,10 @@
+import { PrettyModalDirective } from './lib/pretty-modal.directive';
+import { PrettyModalTriggerDirective } from './lib/pretty-modal-trigger.directive';
+import { PrettyModalCloseDirective } from './lib/pretty-modal-close.directive';
+export { PrettyModalService } from './lib/pretty-modal.service';
+export { PrettyModalDirective } from './lib/pretty-modal.directive';
+export { PrettyModalTriggerDirective } from './lib/pretty-modal-trigger.directive';
+export { PrettyModalCloseDirective } from './lib/pretty-modal-close.directive';
+export type { PrettyModalAnchor, PrettyModalOptions, PrettyModalRegistration, } from './lib/pretty-modal.types';
+/** Convenience array to import all Pretty Modal directives at once. */
+export declare const PRETTY_MODAL_DIRECTIVES: readonly [typeof PrettyModalDirective, typeof PrettyModalTriggerDirective, typeof PrettyModalCloseDirective];