@lit-pigeon/angular 0.1.5 → 0.2.0

package/README.md

@@ -11,7 +11,8 @@ idiomatic Angular `@Input()`s and `@Output()`s.
 npm install @lit-pigeon/angular
 ```
 
-Requires `@angular/core` >= 17 as a peer dependency.
+Requires `@angular/core` >= 22 as a peer dependency. The package is compiled
+with ng-packagr in partial (Ivy) mode, so it works in AOT production builds.
 
 ## Usage
 
@@ -48,11 +49,137 @@ export class AppComponent {
 
 ### Inputs & outputs
 
-`@Input()` — `document`, `config`. `@Output()` — `pigeonChange`,
-`pigeonSelect`, `pigeonReady`, `pigeonPreview`, `pigeonExport`,
-`pigeonExportJson`, `pigeonExportMjml`, `pigeonExportHtml`. The component also
-exposes imperative helpers: `getDocument()`, `loadDocument(doc)`, `undo()`,
-`redo()`. Core types are re-exported for convenience.
+`@Input()` — `document`, `config`, `renderer`, `documentToMjml`, `theme`,
+`themeOverrides`, `templateStorage`, `assetStorage`. `@Output()` —
+`pigeonChange`, `pigeonSelect`, `pigeonReady`, `pigeonPreview`,
+`pigeonExport`, `pigeonExportJson`, `pigeonExportMjml`, `pigeonExportHtml`
+(`{ document, html }`, with `html` null when no `renderer` is set). The
+component also exposes imperative helpers: `getDocument()`,
+`loadDocument(doc)`, `undo()`, `redo()`, `exportMjml()` and `exportHtml()`.
+Core types are re-exported for convenience.
+
+Binding `[document]` to the object the editor last emitted through
+`pigeonChange` does nothing; binding a different object loads it and resets
+undo history, including resetting back to the original document.
+
+### MJML and HTML export
+
+The wrapper does not set a renderer for you. Pass one from
+`@lit-pigeon/renderer-mjml`; without it the Preview button does nothing and
+`exportMjml()` / `exportHtml()` return `null`.
+
+```typescript
+import { Component, ViewChild } from '@angular/core';
+import { PigeonEditorComponent, type PigeonDocument } from '@lit-pigeon/angular';
+import { mjmlToDocument } from '@lit-pigeon/parser-mjml';
+import { MjmlRenderer, documentToMjml } from '@lit-pigeon/renderer-mjml';
+
+@Component({
+  selector: 'app-template-editor',
+  imports: [PigeonEditorComponent],
+  template: `
+    <pigeon-editor-wrapper
+      #editor
+      [document]="doc"
+      [renderer]="renderer"
+      [documentToMjml]="toMjml"
+      (pigeonChange)="doc = $event.document"
+    />
+  `,
+})
+export class TemplateEditorComponent {
+  @ViewChild('editor') editor!: PigeonEditorComponent;
+
+  doc: PigeonDocument = mjmlToDocument(savedMjml).document;
+  renderer = new MjmlRenderer();
+  toMjml = documentToMjml;
+
+  async save() {
+    const mjml = this.editor.exportMjml();
+    const html = await this.editor.exportHtml();
+    // store { mjml, html }
+  }
+}
+```
+
+`@lit-pigeon/renderer-mjml` imports `mjml`, which is Node-only; an Angular
+build fails with `Could not resolve "fs"` (and `path`, `url`, `os`, `http`,
+`https`). Alias it to the browser build in your app's `package.json`:
+
+```json
+{
+  "overrides": {
+    "mjml": "npm:mjml-browser@^4.18.0"
+  }
+}
+```
+
+(`pnpm.overrides` with pnpm, `resolutions` with Yarn.) `mjml-browser` is
+CommonJS, so allow it in `angular.json` to silence the
+`Module 'mjml' ... is not ESM` warning:
+
+```json
+"build": {
+  "options": {
+    "allowedCommonJsDependencies": ["mjml"]
+  }
+}
+```
+
+`mjml-browser` adds about 1.2 MB (raw) to the bundle, which exceeds the default
+`initial` budget of a new Angular app. Lazy-load the route that hosts the
+editor, or raise the budget.
+
+### Image uploads with auth headers
+
+Uploads are configured through `[config]`'s `assetManager`, an
+`AssetManagerConfig`:
+
+```typescript
+interface AssetManagerConfig {
+  enabled?: boolean;
+  uploadUrl?: string;
+  uploadHeaders?: Record<string, string>;
+  acceptedTypes?: string[];
+  maxFileSize?: number;
+  uploadHandler?: (file: File) => Promise<string>;
+  presignedUpload?: {
+    getUploadParams: (file: File) => Promise<PresignedUploadParams>;
+  };
+  stock?: StockConfig;
+}
+```
+
+`uploadHandler` takes precedence over `presignedUpload` and `uploadUrl`, and
+resolves to the public URL of the uploaded image:
+
+```typescript
+import type { EditorConfig } from '@lit-pigeon/angular';
+
+config: Partial<EditorConfig> = {
+  assetManager: {
+    uploadHandler: async (file) => {
+      const body = new FormData();
+      body.append('file', file);
+      const res = await fetch('/api/email-assets', {
+        method: 'POST',
+        headers: { Authorization: `Bearer ${this.auth.token()}` },
+        body,
+      });
+      if (!res.ok) throw new Error(`Upload failed: ${res.status}`);
+      return (await res.json()).url;
+    },
+  },
+};
+```
+
+```html
+<pigeon-editor-wrapper [document]="doc" [config]="config" />
+```
+
+For a fixed header set, `uploadUrl` plus `uploadHeaders` also works: the editor
+POSTs the file as multipart field `file` and reads `url`, `src` or `location`
+from the JSON response.
 
 Part of [Lit Pigeon](https://github.com/snxstudio/lit-pigeon) — open-source drag-and-drop email editor.
 

package/fesm2022/lit-pigeon-angular.mjs

@@ -0,0 +1,172 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, ViewChild, CUSTOM_ELEMENTS_SCHEMA, Component } from '@angular/core';
+import '@lit-pigeon/editor';
+
+const PASSTHROUGH_INPUTS = [
+    'renderer',
+    'documentToMjml',
+    'theme',
+    'themeOverrides',
+    'templateStorage',
+    'assetStorage',
+];
+class PigeonEditorComponent {
+    constructor() {
+        this.pigeonChange = new EventEmitter();
+        this.pigeonSelect = new EventEmitter();
+        this.pigeonReady = new EventEmitter();
+        this.pigeonPreview = new EventEmitter();
+        this.pigeonExport = new EventEmitter();
+        this.pigeonExportJson = new EventEmitter();
+        this.pigeonExportMjml = new EventEmitter();
+        this.pigeonExportHtml = new EventEmitter();
+        this._listeners = [];
+    }
+    ngAfterViewInit() {
+        const el = this.editorRef?.nativeElement;
+        if (!el)
+            return;
+        // Set initial properties
+        if (this.document) {
+            el.document = this.document;
+        }
+        if (this.config) {
+            el.config = this.config;
+        }
+        for (const key of PASSTHROUGH_INPUTS) {
+            this._syncInput(el, key);
+        }
+        // Wire event listeners
+        this._addListener(el, 'pigeon:change', (e) => {
+            this.pigeonChange.emit(e.detail);
+        });
+        this._addListener(el, 'pigeon:select', (e) => {
+            this.pigeonSelect.emit(e.detail);
+        });
+        this._addListener(el, 'pigeon:ready', () => {
+            this.pigeonReady.emit();
+        });
+        this._addListener(el, 'pigeon:preview', () => {
+            this.pigeonPreview.emit();
+        });
+        this._addListener(el, 'pigeon:export', () => {
+            this.pigeonExport.emit();
+        });
+        this._addListener(el, 'pigeon:export-json', (e) => {
+            this.pigeonExportJson.emit(e.detail);
+        });
+        this._addListener(el, 'pigeon:export-mjml', (e) => {
+            this.pigeonExportMjml.emit(e.detail);
+        });
+        this._addListener(el, 'pigeon:export-html', (e) => {
+            this.pigeonExportHtml.emit(e.detail);
+        });
+    }
+    ngOnChanges(changes) {
+        const el = this.editorRef?.nativeElement;
+        if (!el)
+            return;
+        // Setting el.document is a no-op when a host resets back to the original
+        // object, so load genuinely different documents explicitly.
+        if (changes['document'] && this.document && this.document !== el.getDocument()) {
+            el.loadDocument(this.document);
+        }
+        if (changes['config'] && this.config) {
+            el.config = this.config;
+        }
+        for (const key of PASSTHROUGH_INPUTS) {
+            if (changes[key])
+                this._syncInput(el, key);
+        }
+    }
+    ngOnDestroy() {
+        const el = this.editorRef?.nativeElement;
+        if (!el)
+            return;
+        for (const [event, listener] of this._listeners) {
+            el.removeEventListener(event, listener);
+        }
+        this._listeners = [];
+    }
+    /** Returns the current document from the editor. */
+    getDocument() {
+        return this.editorRef?.nativeElement?.getDocument();
+    }
+    /** Loads a new document into the editor (resets history). */
+    loadDocument(doc) {
+        this.editorRef?.nativeElement?.loadDocument(doc);
+    }
+    /** Undo the last change. */
+    undo() {
+        return this.editorRef?.nativeElement?.undo() ?? false;
+    }
+    /** Redo the last undone change. */
+    redo() {
+        return this.editorRef?.nativeElement?.redo() ?? false;
+    }
+    /** Export the current document as MJML. Requires `documentToMjml`. */
+    exportMjml() {
+        return this.editorRef?.nativeElement?.exportMjml() ?? null;
+    }
+    /** Export the current document as HTML. Requires `renderer`. */
+    async exportHtml() {
+        return (await this.editorRef?.nativeElement?.exportHtml()) ?? null;
+    }
+    _syncInput(el, key) {
+        if (this[key] !== undefined) {
+            Object.assign(el, { [key]: this[key] });
+        }
+    }
+    _addListener(el, event, handler) {
+        el.addEventListener(event, handler);
+        this._listeners.push([event, handler]);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PigeonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.7", type: PigeonEditorComponent, isStandalone: true, selector: "pigeon-editor-wrapper", inputs: { document: "document", config: "config", renderer: "renderer", documentToMjml: "documentToMjml", theme: "theme", themeOverrides: "themeOverrides", templateStorage: "templateStorage", assetStorage: "assetStorage" }, outputs: { pigeonChange: "pigeonChange", pigeonSelect: "pigeonSelect", pigeonReady: "pigeonReady", pigeonPreview: "pigeonPreview", pigeonExport: "pigeonExport", pigeonExportJson: "pigeonExportJson", pigeonExportMjml: "pigeonExportMjml", pigeonExportHtml: "pigeonExportHtml" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editorEl"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `<pigeon-editor #editorEl></pigeon-editor>`, isInline: true, styles: [":host{display:block;width:100%;height:100%}pigeon-editor{width:100%;height:100%}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.7", ngImport: i0, type: PigeonEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pigeon-editor-wrapper', standalone: true, schemas: [CUSTOM_ELEMENTS_SCHEMA], template: `<pigeon-editor #editorEl></pigeon-editor>`, styles: [":host{display:block;width:100%;height:100%}pigeon-editor{width:100%;height:100%}\n"] }]
+        }], propDecorators: { editorRef: [{
+                type: ViewChild,
+                args: ['editorEl', { static: false }]
+            }], document: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], renderer: [{
+                type: Input
+            }], documentToMjml: [{
+                type: Input
+            }], theme: [{
+                type: Input
+            }], themeOverrides: [{
+                type: Input
+            }], templateStorage: [{
+                type: Input
+            }], assetStorage: [{
+                type: Input
+            }], pigeonChange: [{
+                type: Output
+            }], pigeonSelect: [{
+                type: Output
+            }], pigeonReady: [{
+                type: Output
+            }], pigeonPreview: [{
+                type: Output
+            }], pigeonExport: [{
+                type: Output
+            }], pigeonExportJson: [{
+                type: Output
+            }], pigeonExportMjml: [{
+                type: Output
+            }], pigeonExportHtml: [{
+                type: Output
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PigeonEditorComponent };
+//# sourceMappingURL=lit-pigeon-angular.mjs.map

package/fesm2022/lit-pigeon-angular.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lit-pigeon-angular.mjs","sources":["../../src/lib/pigeon-editor.component.ts","../../src/lit-pigeon-angular.ts"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  EventEmitter,\n  Input,\n  Output,\n  ViewChild,\n  AfterViewInit,\n  OnChanges,\n  OnDestroy,\n  SimpleChanges,\n  CUSTOM_ELEMENTS_SCHEMA,\n} from '@angular/core';\nimport type { PigeonDocument, EditorConfig, Selection } from '@lit-pigeon/core';\nimport '@lit-pigeon/editor';\nimport type { PigeonEditor } from '@lit-pigeon/editor';\n\nconst PASSTHROUGH_INPUTS = [\n  'renderer',\n  'documentToMjml',\n  'theme',\n  'themeOverrides',\n  'templateStorage',\n  'assetStorage',\n] as const;\ntype PassthroughInput = (typeof PASSTHROUGH_INPUTS)[number];\n\n@Component({\n  selector: 'pigeon-editor-wrapper',\n  standalone: true,\n  schemas: [CUSTOM_ELEMENTS_SCHEMA],\n  template: `<pigeon-editor #editorEl></pigeon-editor>`,\n  styles: [`\n    :host {\n      display: block;\n      width: 100%;\n      height: 100%;\n    }\n    pigeon-editor {\n      width: 100%;\n      height: 100%;\n    }\n  `],\n})\nexport class PigeonEditorComponent implements AfterViewInit, OnChanges, OnDestroy {\n  @ViewChild('editorEl', { static: false })\n  private editorRef!: ElementRef<PigeonEditor>;\n\n  @Input() document?: PigeonDocument;\n  @Input() config?: Partial<EditorConfig>;\n  @Input() renderer?: PigeonEditor['renderer'];\n  @Input() documentToMjml?: PigeonEditor['documentToMjml'];\n  @Input() theme?: PigeonEditor['theme'];\n  @Input() themeOverrides?: PigeonEditor['themeOverrides'];\n  @Input() templateStorage?: PigeonEditor['templateStorage'];\n  @Input() assetStorage?: PigeonEditor['assetStorage'];\n\n  @Output() pigeonChange = new EventEmitter<{ document: PigeonDocument }>();\n  @Output() pigeonSelect = new EventEmitter<{ selection: Selection | null }>();\n  @Output() pigeonReady = new EventEmitter<void>();\n  @Output() pigeonPreview = new EventEmitter<void>();\n  @Output() pigeonExport = new EventEmitter<void>();\n  @Output() pigeonExportJson = new EventEmitter<{ document: PigeonDocument }>();\n  @Output() pigeonExportMjml = new EventEmitter<{ mjml: string }>();\n  @Output() pigeonExportHtml = new EventEmitter<{ document: PigeonDocument; html: string | null }>();\n\n  private _listeners: Array<[string, EventListener]> = [];\n\n  ngAfterViewInit(): void {\n    const el = this.editorRef?.nativeElement;\n    if (!el) return;\n\n    // Set initial properties\n    if (this.document) {\n      el.document = this.document;\n    }\n    if (this.config) {\n      el.config = this.config;\n    }\n    for (const key of PASSTHROUGH_INPUTS) {\n      this._syncInput(el, key);\n    }\n\n    // Wire event listeners\n    this._addListener(el, 'pigeon:change', (e: Event) => {\n      this.pigeonChange.emit((e as CustomEvent).detail);\n    });\n    this._addListener(el, 'pigeon:select', (e: Event) => {\n      this.pigeonSelect.emit((e as CustomEvent).detail);\n    });\n    this._addListener(el, 'pigeon:ready', () => {\n      this.pigeonReady.emit();\n    });\n    this._addListener(el, 'pigeon:preview', () => {\n      this.pigeonPreview.emit();\n    });\n    this._addListener(el, 'pigeon:export', () => {\n      this.pigeonExport.emit();\n    });\n    this._addListener(el, 'pigeon:export-json', (e: Event) => {\n      this.pigeonExportJson.emit((e as CustomEvent).detail);\n    });\n    this._addListener(el, 'pigeon:export-mjml', (e: Event) => {\n      this.pigeonExportMjml.emit((e as CustomEvent).detail);\n    });\n    this._addListener(el, 'pigeon:export-html', (e: Event) => {\n      this.pigeonExportHtml.emit((e as CustomEvent).detail);\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    const el = this.editorRef?.nativeElement;\n    if (!el) return;\n\n    // Setting el.document is a no-op when a host resets back to the original\n    // object, so load genuinely different documents explicitly.\n    if (changes['document'] && this.document && this.document !== el.getDocument()) {\n      el.loadDocument(this.document);\n    }\n    if (changes['config'] && this.config) {\n      el.config = this.config;\n    }\n    for (const key of PASSTHROUGH_INPUTS) {\n      if (changes[key]) this._syncInput(el, key);\n    }\n  }\n\n  ngOnDestroy(): void {\n    const el = this.editorRef?.nativeElement;\n    if (!el) return;\n\n    for (const [event, listener] of this._listeners) {\n      el.removeEventListener(event, listener);\n    }\n    this._listeners = [];\n  }\n\n  /** Returns the current document from the editor. */\n  getDocument(): PigeonDocument | undefined {\n    return this.editorRef?.nativeElement?.getDocument();\n  }\n\n  /** Loads a new document into the editor (resets history). */\n  loadDocument(doc: PigeonDocument): void {\n    this.editorRef?.nativeElement?.loadDocument(doc);\n  }\n\n  /** Undo the last change. */\n  undo(): boolean {\n    return this.editorRef?.nativeElement?.undo() ?? false;\n  }\n\n  /** Redo the last undone change. */\n  redo(): boolean {\n    return this.editorRef?.nativeElement?.redo() ?? false;\n  }\n\n  /** Export the current document as MJML. Requires `documentToMjml`. */\n  exportMjml(): string | null {\n    return this.editorRef?.nativeElement?.exportMjml() ?? null;\n  }\n\n  /** Export the current document as HTML. Requires `renderer`. */\n  async exportHtml(): Promise<string | null> {\n    return (await this.editorRef?.nativeElement?.exportHtml()) ?? null;\n  }\n\n  private _syncInput(el: PigeonEditor, key: PassthroughInput): void {\n    if (this[key] !== undefined) {\n      Object.assign(el, { [key]: this[key] });\n    }\n  }\n\n  private _addListener(el: HTMLElement, event: string, handler: EventListener): void {\n    el.addEventListener(event, handler);\n    this._listeners.push([event, handler]);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,42 +1,23 @@
 {
   "name": "@lit-pigeon/angular",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Angular wrapper for the Pigeon email editor web component",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
-  },
-  "files": [
-    "dist",
-    "README.md",
-    "LICENSE"
-  ],
   "dependencies": {
-    "@lit-pigeon/core": "^0.3.1",
-    "@lit-pigeon/editor": "^0.3.1"
+    "tslib": "^2.3.0",
+    "@lit-pigeon/core": "^0.3.3",
+    "@lit-pigeon/editor": "^0.3.3"
   },
   "peerDependencies": {
-    "@angular/core": ">=17.0.0"
+    "@angular/core": ">=22.0.0"
   },
   "peerDependenciesMeta": {
     "@angular/core": {
       "optional": false
     }
   },
-  "devDependencies": {
-    "typescript": "^5.5.0",
-    "vite": "^5.4.0",
-    "vite-plugin-dts": "^4.0.0"
-  },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "directory": "dist"
   },
   "repository": {
     "type": "git",
@@ -57,9 +38,17 @@
     "web-components",
     "angular"
   ],
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "clean": "rm -rf dist"
-  }
+  "module": "fesm2022/lit-pigeon-angular.mjs",
+  "typings": "types/lit-pigeon-angular.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/lit-pigeon-angular.d.ts",
+      "default": "./fesm2022/lit-pigeon-angular.mjs"
+    }
+  },
+  "sideEffects": false,
+  "type": "module"
 }

package/types/lit-pigeon-angular.d.ts

@@ -0,0 +1,58 @@
+import * as i0 from '@angular/core';
+import { AfterViewInit, OnChanges, OnDestroy, EventEmitter, SimpleChanges } from '@angular/core';
+import { PigeonDocument, EditorConfig, Selection } from '@lit-pigeon/core';
+export { AssetManagerConfig, BlockType, ButtonBlock, ColumnNode, ContentBlock, DividerBlock, EditorConfig, HeroBlock, HtmlBlock, ImageBlock, MergeTag, MergeTagConfig, NavBarBlock, NavLink, PigeonDocument, RenderOptions, RenderResult, Renderer, RowNode, Selection, SocialBlock, SocialIcon, SpacerBlock, Spacing, TextBlock } from '@lit-pigeon/core';
+import { PigeonEditor } from '@lit-pigeon/editor';
+
+declare class PigeonEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
+    private editorRef;
+    document?: PigeonDocument;
+    config?: Partial<EditorConfig>;
+    renderer?: PigeonEditor['renderer'];
+    documentToMjml?: PigeonEditor['documentToMjml'];
+    theme?: PigeonEditor['theme'];
+    themeOverrides?: PigeonEditor['themeOverrides'];
+    templateStorage?: PigeonEditor['templateStorage'];
+    assetStorage?: PigeonEditor['assetStorage'];
+    pigeonChange: EventEmitter<{
+        document: PigeonDocument;
+    }>;
+    pigeonSelect: EventEmitter<{
+        selection: Selection | null;
+    }>;
+    pigeonReady: EventEmitter<void>;
+    pigeonPreview: EventEmitter<void>;
+    pigeonExport: EventEmitter<void>;
+    pigeonExportJson: EventEmitter<{
+        document: PigeonDocument;
+    }>;
+    pigeonExportMjml: EventEmitter<{
+        mjml: string;
+    }>;
+    pigeonExportHtml: EventEmitter<{
+        document: PigeonDocument;
+        html: string | null;
+    }>;
+    private _listeners;
+    ngAfterViewInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngOnDestroy(): void;
+    /** Returns the current document from the editor. */
+    getDocument(): PigeonDocument | undefined;
+    /** Loads a new document into the editor (resets history). */
+    loadDocument(doc: PigeonDocument): void;
+    /** Undo the last change. */
+    undo(): boolean;
+    /** Redo the last undone change. */
+    redo(): boolean;
+    /** Export the current document as MJML. Requires `documentToMjml`. */
+    exportMjml(): string | null;
+    /** Export the current document as HTML. Requires `renderer`. */
+    exportHtml(): Promise<string | null>;
+    private _syncInput;
+    private _addListener;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PigeonEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<PigeonEditorComponent, "pigeon-editor-wrapper", never, { "document": { "alias": "document"; "required": false; }; "config": { "alias": "config"; "required": false; }; "renderer": { "alias": "renderer"; "required": false; }; "documentToMjml": { "alias": "documentToMjml"; "required": false; }; "theme": { "alias": "theme"; "required": false; }; "themeOverrides": { "alias": "themeOverrides"; "required": false; }; "templateStorage": { "alias": "templateStorage"; "required": false; }; "assetStorage": { "alias": "assetStorage"; "required": false; }; }, { "pigeonChange": "pigeonChange"; "pigeonSelect": "pigeonSelect"; "pigeonReady": "pigeonReady"; "pigeonPreview": "pigeonPreview"; "pigeonExport": "pigeonExport"; "pigeonExportJson": "pigeonExportJson"; "pigeonExportMjml": "pigeonExportMjml"; "pigeonExportHtml": "pigeonExportHtml"; }, never, never, true, never>;
+}
+
+export { PigeonEditorComponent };

package/dist/index.cjs

@@ -1,11 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@angular/core");require("@lit-pigeon/editor");var g=Object.defineProperty,m=Object.getOwnPropertyDescriptor,n=(p,e,t,o)=>{for(var r=o>1?void 0:o?m(e,t):e,s=p.length-1,d;s>=0;s--)(d=p[s])&&(r=(o?d(e,t,r):d(r))||r);return o&&r&&g(e,t,r),r};exports.PigeonEditorComponent=class{constructor(){this.pigeonChange=new i.EventEmitter,this.pigeonSelect=new i.EventEmitter,this.pigeonReady=new i.EventEmitter,this.pigeonPreview=new i.EventEmitter,this.pigeonExport=new i.EventEmitter,this.pigeonExportJson=new i.EventEmitter,this.pigeonExportMjml=new i.EventEmitter,this.pigeonExportHtml=new i.EventEmitter,this._listeners=[]}ngAfterViewInit(){var t;const e=(t=this.editorRef)==null?void 0:t.nativeElement;e&&(this.document&&(e.document=this.document),this.config&&(e.config=this.config),this._addListener(e,"pigeon:change",o=>{this.pigeonChange.emit(o.detail)}),this._addListener(e,"pigeon:select",o=>{this.pigeonSelect.emit(o.detail)}),this._addListener(e,"pigeon:ready",()=>{this.pigeonReady.emit()}),this._addListener(e,"pigeon:preview",()=>{this.pigeonPreview.emit()}),this._addListener(e,"pigeon:export",()=>{this.pigeonExport.emit()}),this._addListener(e,"pigeon:export-json",o=>{this.pigeonExportJson.emit(o.detail)}),this._addListener(e,"pigeon:export-mjml",o=>{this.pigeonExportMjml.emit(o.detail)}),this._addListener(e,"pigeon:export-html",o=>{this.pigeonExportHtml.emit(o.detail)}))}ngOnChanges(e){var o;const t=(o=this.editorRef)==null?void 0:o.nativeElement;t&&(e.document&&this.document&&(t.document=this.document),e.config&&this.config&&(t.config=this.config))}ngOnDestroy(){var t;const e=(t=this.editorRef)==null?void 0:t.nativeElement;if(e){for(const[o,r]of this._listeners)e.removeEventListener(o,r);this._listeners=[]}}getDocument(){var e,t;return(t=(e=this.editorRef)==null?void 0:e.nativeElement)==null?void 0:t.getDocument()}loadDocument(e){var t,o;(o=(t=this.editorRef)==null?void 0:t.nativeElement)==null||o.loadDocument(e)}undo(){var e,t;return((t=(e=this.editorRef)==null?void 0:e.nativeElement)==null?void 0:t.undo())??!1}redo(){var e,t;return((t=(e=this.editorRef)==null?void 0:e.nativeElement)==null?void 0:t.redo())??!1}_addListener(e,t,o){e.addEventListener(t,o),this._listeners.push([t,o])}};n([i.ViewChild("editorEl",{static:!1})],exports.PigeonEditorComponent.prototype,"editorRef",2);n([i.Input()],exports.PigeonEditorComponent.prototype,"document",2);n([i.Input()],exports.PigeonEditorComponent.prototype,"config",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonChange",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonSelect",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonReady",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonPreview",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonExport",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonExportJson",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonExportMjml",2);n([i.Output()],exports.PigeonEditorComponent.prototype,"pigeonExportHtml",2);exports.PigeonEditorComponent=n([i.Component({selector:"pigeon-editor-wrapper",standalone:!0,schemas:[i.CUSTOM_ELEMENTS_SCHEMA],template:"<pigeon-editor #editorEl></pigeon-editor>",styles:[`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    pigeon-editor {
-      width: 100%;
-      height: 100%;
-    }
-  `]})],exports.PigeonEditorComponent);

package/dist/index.d.ts

@@ -1,119 +0,0 @@
-import { AfterViewInit } from '@angular/core';
-import { AssetManagerConfig } from '@lit-pigeon/core';
-import { BlockType } from '@lit-pigeon/core';
-import { ButtonBlock } from '@lit-pigeon/core';
-import { ColumnNode } from '@lit-pigeon/core';
-import { ContentBlock } from '@lit-pigeon/core';
-import { DividerBlock } from '@lit-pigeon/core';
-import { EditorConfig } from '@lit-pigeon/core';
-import { EventEmitter } from '@angular/core';
-import { HeroBlock } from '@lit-pigeon/core';
-import { HtmlBlock } from '@lit-pigeon/core';
-import { ImageBlock } from '@lit-pigeon/core';
-import { MergeTag } from '@lit-pigeon/core';
-import { MergeTagConfig } from '@lit-pigeon/core';
-import { NavBarBlock } from '@lit-pigeon/core';
-import { NavLink } from '@lit-pigeon/core';
-import { OnChanges } from '@angular/core';
-import { OnDestroy } from '@angular/core';
-import { PigeonDocument } from '@lit-pigeon/core';
-import { Renderer } from '@lit-pigeon/core';
-import { RenderOptions } from '@lit-pigeon/core';
-import { RenderResult } from '@lit-pigeon/core';
-import { RowNode } from '@lit-pigeon/core';
-import { Selection as Selection_2 } from '@lit-pigeon/core';
-import { SimpleChanges } from '@angular/core';
-import { SocialBlock } from '@lit-pigeon/core';
-import { SocialIcon } from '@lit-pigeon/core';
-import { SpacerBlock } from '@lit-pigeon/core';
-import { Spacing } from '@lit-pigeon/core';
-import { TextBlock } from '@lit-pigeon/core';
-
-export { AssetManagerConfig }
-
-export { BlockType }
-
-export { ButtonBlock }
-
-export { ColumnNode }
-
-export { ContentBlock }
-
-export { DividerBlock }
-
-export { EditorConfig }
-
-export { HeroBlock }
-
-export { HtmlBlock }
-
-export { ImageBlock }
-
-export { MergeTag }
-
-export { MergeTagConfig }
-
-export { NavBarBlock }
-
-export { NavLink }
-
-export { PigeonDocument }
-
-export declare class PigeonEditorComponent implements AfterViewInit, OnChanges, OnDestroy {
-    private editorRef;
-    document?: PigeonDocument;
-    config?: Partial<EditorConfig>;
-    pigeonChange: EventEmitter<{
-        document: PigeonDocument;
-    }>;
-    pigeonSelect: EventEmitter<{
-        selection: Selection_2 | null;
-    }>;
-    pigeonReady: EventEmitter<void>;
-    pigeonPreview: EventEmitter<void>;
-    pigeonExport: EventEmitter<void>;
-    pigeonExportJson: EventEmitter<{
-        document: PigeonDocument;
-    }>;
-    pigeonExportMjml: EventEmitter<{
-        mjml: string;
-    }>;
-    pigeonExportHtml: EventEmitter<{
-        html: string;
-    }>;
-    private _listeners;
-    ngAfterViewInit(): void;
-    ngOnChanges(changes: SimpleChanges): void;
-    ngOnDestroy(): void;
-    /** Returns the current document from the editor. */
-    getDocument(): PigeonDocument | undefined;
-    /** Loads a new document into the editor (resets history). */
-    loadDocument(doc: PigeonDocument): void;
-    /** Undo the last change. */
-    undo(): boolean;
-    /** Redo the last undone change. */
-    redo(): boolean;
-    private _addListener;
-}
-
-export { Renderer }
-
-export { RenderOptions }
-
-export { RenderResult }
-
-export { RowNode }
-
-export { Selection_2 as Selection }
-
-export { SocialBlock }
-
-export { SocialIcon }
-
-export { SpacerBlock }
-
-export { Spacing }
-
-export { TextBlock }
-
-export { }

package/dist/index.js

@@ -1,125 +0,0 @@
-import { ViewChild as m, Input as l, Output as s, Component as a, CUSTOM_ELEMENTS_SCHEMA as c, EventEmitter as r } from "@angular/core";
-import "@lit-pigeon/editor";
-var f = Object.defineProperty, E = Object.getOwnPropertyDescriptor, n = (e, t, i, d) => {
-  for (var p = d > 1 ? void 0 : d ? E(t, i) : t, h = e.length - 1, g; h >= 0; h--)
-    (g = e[h]) && (p = (d ? g(t, i, p) : g(p)) || p);
-  return d && p && f(t, i, p), p;
-};
-let o = class {
-  constructor() {
-    this.pigeonChange = new r(), this.pigeonSelect = new r(), this.pigeonReady = new r(), this.pigeonPreview = new r(), this.pigeonExport = new r(), this.pigeonExportJson = new r(), this.pigeonExportMjml = new r(), this.pigeonExportHtml = new r(), this._listeners = [];
-  }
-  ngAfterViewInit() {
-    var t;
-    const e = (t = this.editorRef) == null ? void 0 : t.nativeElement;
-    e && (this.document && (e.document = this.document), this.config && (e.config = this.config), this._addListener(e, "pigeon:change", (i) => {
-      this.pigeonChange.emit(i.detail);
-    }), this._addListener(e, "pigeon:select", (i) => {
-      this.pigeonSelect.emit(i.detail);
-    }), this._addListener(e, "pigeon:ready", () => {
-      this.pigeonReady.emit();
-    }), this._addListener(e, "pigeon:preview", () => {
-      this.pigeonPreview.emit();
-    }), this._addListener(e, "pigeon:export", () => {
-      this.pigeonExport.emit();
-    }), this._addListener(e, "pigeon:export-json", (i) => {
-      this.pigeonExportJson.emit(i.detail);
-    }), this._addListener(e, "pigeon:export-mjml", (i) => {
-      this.pigeonExportMjml.emit(i.detail);
-    }), this._addListener(e, "pigeon:export-html", (i) => {
-      this.pigeonExportHtml.emit(i.detail);
-    }));
-  }
-  ngOnChanges(e) {
-    var i;
-    const t = (i = this.editorRef) == null ? void 0 : i.nativeElement;
-    t && (e.document && this.document && (t.document = this.document), e.config && this.config && (t.config = this.config));
-  }
-  ngOnDestroy() {
-    var t;
-    const e = (t = this.editorRef) == null ? void 0 : t.nativeElement;
-    if (e) {
-      for (const [i, d] of this._listeners)
-        e.removeEventListener(i, d);
-      this._listeners = [];
-    }
-  }
-  /** Returns the current document from the editor. */
-  getDocument() {
-    var e, t;
-    return (t = (e = this.editorRef) == null ? void 0 : e.nativeElement) == null ? void 0 : t.getDocument();
-  }
-  /** Loads a new document into the editor (resets history). */
-  loadDocument(e) {
-    var t, i;
-    (i = (t = this.editorRef) == null ? void 0 : t.nativeElement) == null || i.loadDocument(e);
-  }
-  /** Undo the last change. */
-  undo() {
-    var e, t;
-    return ((t = (e = this.editorRef) == null ? void 0 : e.nativeElement) == null ? void 0 : t.undo()) ?? !1;
-  }
-  /** Redo the last undone change. */
-  redo() {
-    var e, t;
-    return ((t = (e = this.editorRef) == null ? void 0 : e.nativeElement) == null ? void 0 : t.redo()) ?? !1;
-  }
-  _addListener(e, t, i) {
-    e.addEventListener(t, i), this._listeners.push([t, i]);
-  }
-};
-n([
-  m("editorEl", { static: !1 })
-], o.prototype, "editorRef", 2);
-n([
-  l()
-], o.prototype, "document", 2);
-n([
-  l()
-], o.prototype, "config", 2);
-n([
-  s()
-], o.prototype, "pigeonChange", 2);
-n([
-  s()
-], o.prototype, "pigeonSelect", 2);
-n([
-  s()
-], o.prototype, "pigeonReady", 2);
-n([
-  s()
-], o.prototype, "pigeonPreview", 2);
-n([
-  s()
-], o.prototype, "pigeonExport", 2);
-n([
-  s()
-], o.prototype, "pigeonExportJson", 2);
-n([
-  s()
-], o.prototype, "pigeonExportMjml", 2);
-n([
-  s()
-], o.prototype, "pigeonExportHtml", 2);
-o = n([
-  a({
-    selector: "pigeon-editor-wrapper",
-    standalone: !0,
-    schemas: [c],
-    template: "<pigeon-editor #editorEl></pigeon-editor>",
-    styles: [`
-    :host {
-      display: block;
-      width: 100%;
-      height: 100%;
-    }
-    pigeon-editor {
-      width: 100%;
-      height: 100%;
-    }
-  `]
-  })
-], o);
-export {
-  o as PigeonEditorComponent
-};