@rageshpikalmunde/rp-image-editor-angular 1.1.0

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+"use strict";
+/**
+ * @rageshpikalmunde/rp-image-editor-angular
+ * Angular wrapper for the rp-image-editor plugin
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RpImageEditorService = exports.RpImageEditorComponent = exports.RpImageEditorModule = void 0;
+// Module
+var rp_image_editor_module_1 = require("./lib/rp-image-editor.module");
+Object.defineProperty(exports, "RpImageEditorModule", { enumerable: true, get: function () { return rp_image_editor_module_1.RpImageEditorModule; } });
+// Component
+var rp_image_editor_component_1 = require("./lib/rp-image-editor.component");
+Object.defineProperty(exports, "RpImageEditorComponent", { enumerable: true, get: function () { return rp_image_editor_component_1.RpImageEditorComponent; } });
+// Service
+var rp_image_editor_service_1 = require("./lib/rp-image-editor.service");
+Object.defineProperty(exports, "RpImageEditorService", { enumerable: true, get: function () { return rp_image_editor_service_1.RpImageEditorService; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";AAAA;;;GAGG;;;AAEH,SAAS;AACT,uEAAmE;AAA1D,6HAAA,mBAAmB,OAAA;AAE5B,YAAY;AACZ,6EAAyE;AAAhE,mIAAA,sBAAsB,OAAA;AAE/B,UAAU;AACV,yEAAqE;AAA5D,+HAAA,oBAAoB,OAAA"}

package/dist/cjs/lib/rp-image-editor.component.js

@@ -0,0 +1,132 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RpImageEditorComponent = void 0;
+const core_1 = require("@angular/core");
+const rp_image_editor_1 = require("@rageshpikalmunde/rp-image-editor");
+let RpImageEditorComponent = class RpImageEditorComponent {
+    constructor() {
+        /** Image source — File, Blob, or URL string */
+        this.image = null;
+        /** Editor configuration */
+        this.config = {};
+        /** Emitted when user clicks Apply — contains the edited image result */
+        this.imageEdited = new core_1.EventEmitter();
+        /** Emitted when user clicks Close/Cancel */
+        this.editorClosed = new core_1.EventEmitter();
+        /** Emitted when an error occurs */
+        this.editorError = new core_1.EventEmitter();
+        this.editor = null;
+    }
+    ngAfterViewInit() {
+        if (this.image) {
+            this.initEditor();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyEditor();
+    }
+    /**
+     * Programmatically load an image (can be called after component init)
+     */
+    async loadImage(source) {
+        this.image = source;
+        await this.initEditor();
+    }
+    /**
+     * Get the edited result programmatically
+     */
+    async getResult() {
+        try {
+            return await this.editor?.getResult() ?? null;
+        }
+        catch (err) {
+            this.editorError.emit(err);
+            return null;
+        }
+    }
+    /**
+     * Apply and emit result
+     */
+    async apply() {
+        const result = await this.getResult();
+        if (result) {
+            this.imageEdited.emit(result);
+        }
+    }
+    /**
+     * Close the editor
+     */
+    close() {
+        this.destroyEditor();
+        this.editorClosed.emit();
+    }
+    /**
+     * Reset to original image
+     */
+    async reset() {
+        await this.editor?.reset();
+    }
+    async initEditor() {
+        this.destroyEditor();
+        if (!this.image || !this.containerRef?.nativeElement)
+            return;
+        this.editor = new rp_image_editor_1.RpImageEditor(this.containerRef.nativeElement, this.config);
+        this.editor.on('error', (err) => {
+            this.editorError.emit(err);
+        });
+        try {
+            await this.editor.loadImage(this.image);
+        }
+        catch (err) {
+            this.editorError.emit(err);
+        }
+    }
+    destroyEditor() {
+        if (this.editor) {
+            this.editor.destroy();
+            this.editor = null;
+        }
+    }
+};
+exports.RpImageEditorComponent = RpImageEditorComponent;
+__decorate([
+    (0, core_1.ViewChild)('editorContainer', { static: true }),
+    __metadata("design:type", core_1.ElementRef)
+], RpImageEditorComponent.prototype, "containerRef", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "image", void 0);
+__decorate([
+    (0, core_1.Input)(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "config", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "imageEdited", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "editorClosed", void 0);
+__decorate([
+    (0, core_1.Output)(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "editorError", void 0);
+exports.RpImageEditorComponent = RpImageEditorComponent = __decorate([
+    (0, core_1.Component)({
+        selector: 'rp-image-editor',
+        template: `<div #editorContainer class="rp-image-editor-host" [style.width]="'100%'" [style.height]="'100%'" [style.display]="'flex'" [style.flexDirection]="'column'"></div>`,
+        styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]
+    })
+], RpImageEditorComponent);
+//# sourceMappingURL=rp-image-editor.component.js.map

package/dist/cjs/lib/rp-image-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.component.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.component.ts"],"names":[],"mappings":"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"}

package/dist/cjs/lib/rp-image-editor.module.js

@@ -0,0 +1,36 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var RpImageEditorModule_1;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RpImageEditorModule = void 0;
+const core_1 = require("@angular/core");
+const common_1 = require("@angular/common");
+const rp_image_editor_component_1 = require("./rp-image-editor.component");
+const rp_image_editor_service_1 = require("./rp-image-editor.service");
+let RpImageEditorModule = RpImageEditorModule_1 = class RpImageEditorModule {
+    /**
+     * Use forRoot() if you want to provide the service at root level
+     * (optional — service is already providedIn: 'root')
+     */
+    static forRoot() {
+        return {
+            ngModule: RpImageEditorModule_1,
+            providers: [rp_image_editor_service_1.RpImageEditorService],
+        };
+    }
+};
+exports.RpImageEditorModule = RpImageEditorModule;
+exports.RpImageEditorModule = RpImageEditorModule = RpImageEditorModule_1 = __decorate([
+    (0, core_1.NgModule)({
+        declarations: [rp_image_editor_component_1.RpImageEditorComponent],
+        imports: [common_1.CommonModule],
+        exports: [rp_image_editor_component_1.RpImageEditorComponent],
+        providers: [rp_image_editor_service_1.RpImageEditorService],
+    })
+], RpImageEditorModule);
+//# sourceMappingURL=rp-image-editor.module.js.map

package/dist/cjs/lib/rp-image-editor.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.module.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.module.ts"],"names":[],"mappings":";;;;;;;;;;AAAA,wCAA8D;AAC9D,4CAA+C;AAC/C,2EAAqE;AACrE,uEAAiE;AAQ1D,IAAM,mBAAmB,2BAAzB,MAAM,mBAAmB;IAC9B;;;OAGG;IACH,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,qBAAmB;YAC7B,SAAS,EAAE,CAAC,8CAAoB,CAAC;SAClC,CAAC;IACJ,CAAC;CACF,CAAA;AAXY,kDAAmB;8BAAnB,mBAAmB;IAN/B,IAAA,eAAQ,EAAC;QACR,YAAY,EAAE,CAAC,kDAAsB,CAAC;QACtC,OAAO,EAAE,CAAC,qBAAY,CAAC;QACvB,OAAO,EAAE,CAAC,kDAAsB,CAAC;QACjC,SAAS,EAAE,CAAC,8CAAoB,CAAC;KAClC,CAAC;GACW,mBAAmB,CAW/B"}

package/dist/cjs/lib/rp-image-editor.service.js

@@ -0,0 +1,52 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RpImageEditorService = void 0;
+const core_1 = require("@angular/core");
+const rp_image_editor_1 = require("@rageshpikalmunde/rp-image-editor");
+/**
+ * Service to open the image editor as a modal overlay.
+ * Works with or without Ionic — uses the core modal implementation.
+ *
+ * Usage:
+ * ```ts
+ * constructor(private rpEditor: RpImageEditorService) {}
+ *
+ * async editImage(file: File) {
+ *   const result = await this.rpEditor.openEditor(file, {
+ *     theme: { applyButtonBackground: '#28a745' }
+ *   });
+ *   if (result) {
+ *     // result.file — upload to server
+ *     // result.base64 — preview
+ *   }
+ * }
+ * ```
+ */
+let RpImageEditorService = class RpImageEditorService {
+    /**
+     * Open the image editor in a modal popup.
+     *
+     * @param image - File, Blob, or URL string to edit
+     * @param config - Optional editor configuration (theme, crop ratios, etc.)
+     * @returns Promise resolving to RpEditorResult if applied, or null if cancelled
+     */
+    async openEditor(image, config) {
+        return (0, rp_image_editor_1.openEditorModal)({
+            image,
+            config,
+        });
+    }
+};
+exports.RpImageEditorService = RpImageEditorService;
+exports.RpImageEditorService = RpImageEditorService = __decorate([
+    (0, core_1.Injectable)({
+        providedIn: 'root',
+    })
+], RpImageEditorService);
+//# sourceMappingURL=rp-image-editor.service.js.map

package/dist/cjs/lib/rp-image-editor.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.service.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.service.ts"],"names":[],"mappings":";;;;;;;;;AAAA,wCAA2C;AAC3C,uEAI2C;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AAII,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAC/B;;;;;;OAMG;IACH,KAAK,CAAC,UAAU,CACd,KAA2B,EAC3B,MAAgC;QAEhC,OAAO,IAAA,iCAAe,EAAC;YACrB,KAAK;YACL,MAAM;SACP,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAjBY,oDAAoB;+BAApB,oBAAoB;IAHhC,IAAA,iBAAU,EAAC;QACV,UAAU,EAAE,MAAM;KACnB,CAAC;GACW,oBAAoB,CAiBhC"}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+/**
+ * @rageshpikalmunde/rp-image-editor-angular
+ * Angular wrapper for the rp-image-editor plugin
+ */
+// Module
+export { RpImageEditorModule } from './lib/rp-image-editor.module';
+// Component
+export { RpImageEditorComponent } from './lib/rp-image-editor.component';
+// Service
+export { RpImageEditorService } from './lib/rp-image-editor.service';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,SAAS;AACT,OAAO,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AAEnE,YAAY;AACZ,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AAEzE,UAAU;AACV,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/lib/rp-image-editor.component.js

@@ -0,0 +1,129 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { RpImageEditor } from '@rageshpikalmunde/rp-image-editor';
+let RpImageEditorComponent = class RpImageEditorComponent {
+    constructor() {
+        /** Image source — File, Blob, or URL string */
+        this.image = null;
+        /** Editor configuration */
+        this.config = {};
+        /** Emitted when user clicks Apply — contains the edited image result */
+        this.imageEdited = new EventEmitter();
+        /** Emitted when user clicks Close/Cancel */
+        this.editorClosed = new EventEmitter();
+        /** Emitted when an error occurs */
+        this.editorError = new EventEmitter();
+        this.editor = null;
+    }
+    ngAfterViewInit() {
+        if (this.image) {
+            this.initEditor();
+        }
+    }
+    ngOnDestroy() {
+        this.destroyEditor();
+    }
+    /**
+     * Programmatically load an image (can be called after component init)
+     */
+    async loadImage(source) {
+        this.image = source;
+        await this.initEditor();
+    }
+    /**
+     * Get the edited result programmatically
+     */
+    async getResult() {
+        try {
+            return await this.editor?.getResult() ?? null;
+        }
+        catch (err) {
+            this.editorError.emit(err);
+            return null;
+        }
+    }
+    /**
+     * Apply and emit result
+     */
+    async apply() {
+        const result = await this.getResult();
+        if (result) {
+            this.imageEdited.emit(result);
+        }
+    }
+    /**
+     * Close the editor
+     */
+    close() {
+        this.destroyEditor();
+        this.editorClosed.emit();
+    }
+    /**
+     * Reset to original image
+     */
+    async reset() {
+        await this.editor?.reset();
+    }
+    async initEditor() {
+        this.destroyEditor();
+        if (!this.image || !this.containerRef?.nativeElement)
+            return;
+        this.editor = new RpImageEditor(this.containerRef.nativeElement, this.config);
+        this.editor.on('error', (err) => {
+            this.editorError.emit(err);
+        });
+        try {
+            await this.editor.loadImage(this.image);
+        }
+        catch (err) {
+            this.editorError.emit(err);
+        }
+    }
+    destroyEditor() {
+        if (this.editor) {
+            this.editor.destroy();
+            this.editor = null;
+        }
+    }
+};
+__decorate([
+    ViewChild('editorContainer', { static: true }),
+    __metadata("design:type", ElementRef)
+], RpImageEditorComponent.prototype, "containerRef", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "image", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "config", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "imageEdited", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "editorClosed", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], RpImageEditorComponent.prototype, "editorError", void 0);
+RpImageEditorComponent = __decorate([
+    Component({
+        selector: 'rp-image-editor',
+        template: `<div #editorContainer class="rp-image-editor-host" [style.width]="'100%'" [style.height]="'100%'" [style.display]="'flex'" [style.flexDirection]="'column'"></div>`,
+        styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]
+    })
+], RpImageEditorComponent);
+export { RpImageEditorComponent };
+//# sourceMappingURL=rp-image-editor.component.js.map

package/dist/esm/lib/rp-image-editor.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.component.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.component.ts"],"names":[],"mappings":"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"}

package/dist/esm/lib/rp-image-editor.module.js

@@ -0,0 +1,33 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var RpImageEditorModule_1;
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RpImageEditorComponent } from './rp-image-editor.component';
+import { RpImageEditorService } from './rp-image-editor.service';
+let RpImageEditorModule = RpImageEditorModule_1 = class RpImageEditorModule {
+    /**
+     * Use forRoot() if you want to provide the service at root level
+     * (optional — service is already providedIn: 'root')
+     */
+    static forRoot() {
+        return {
+            ngModule: RpImageEditorModule_1,
+            providers: [RpImageEditorService],
+        };
+    }
+};
+RpImageEditorModule = RpImageEditorModule_1 = __decorate([
+    NgModule({
+        declarations: [RpImageEditorComponent],
+        imports: [CommonModule],
+        exports: [RpImageEditorComponent],
+        providers: [RpImageEditorService],
+    })
+], RpImageEditorModule);
+export { RpImageEditorModule };
+//# sourceMappingURL=rp-image-editor.module.js.map

package/dist/esm/lib/rp-image-editor.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.module.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.module.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAuB,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,sBAAsB,EAAE,MAAM,6BAA6B,CAAC;AACrE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAQ1D,IAAM,mBAAmB,2BAAzB,MAAM,mBAAmB;IAC9B;;;OAGG;IACH,MAAM,CAAC,OAAO;QACZ,OAAO;YACL,QAAQ,EAAE,qBAAmB;YAC7B,SAAS,EAAE,CAAC,oBAAoB,CAAC;SAClC,CAAC;IACJ,CAAC;CACF,CAAA;AAXY,mBAAmB;IAN/B,QAAQ,CAAC;QACR,YAAY,EAAE,CAAC,sBAAsB,CAAC;QACtC,OAAO,EAAE,CAAC,YAAY,CAAC;QACvB,OAAO,EAAE,CAAC,sBAAsB,CAAC;QACjC,SAAS,EAAE,CAAC,oBAAoB,CAAC;KAClC,CAAC;GACW,mBAAmB,CAW/B"}

package/dist/esm/lib/rp-image-editor.service.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Injectable } from '@angular/core';
+import { openEditorModal, } from '@rageshpikalmunde/rp-image-editor';
+/**
+ * Service to open the image editor as a modal overlay.
+ * Works with or without Ionic — uses the core modal implementation.
+ *
+ * Usage:
+ * ```ts
+ * constructor(private rpEditor: RpImageEditorService) {}
+ *
+ * async editImage(file: File) {
+ *   const result = await this.rpEditor.openEditor(file, {
+ *     theme: { applyButtonBackground: '#28a745' }
+ *   });
+ *   if (result) {
+ *     // result.file — upload to server
+ *     // result.base64 — preview
+ *   }
+ * }
+ * ```
+ */
+let RpImageEditorService = class RpImageEditorService {
+    /**
+     * Open the image editor in a modal popup.
+     *
+     * @param image - File, Blob, or URL string to edit
+     * @param config - Optional editor configuration (theme, crop ratios, etc.)
+     * @returns Promise resolving to RpEditorResult if applied, or null if cancelled
+     */
+    async openEditor(image, config) {
+        return openEditorModal({
+            image,
+            config,
+        });
+    }
+};
+RpImageEditorService = __decorate([
+    Injectable({
+        providedIn: 'root',
+    })
+], RpImageEditorService);
+export { RpImageEditorService };
+//# sourceMappingURL=rp-image-editor.service.js.map

package/dist/esm/lib/rp-image-editor.service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rp-image-editor.service.js","sourceRoot":"","sources":["../../../src/lib/rp-image-editor.service.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAGL,eAAe,GAChB,MAAM,mCAAmC,CAAC;AAE3C;;;;;;;;;;;;;;;;;;GAkBG;AAII,IAAM,oBAAoB,GAA1B,MAAM,oBAAoB;IAC/B;;;;;;OAMG;IACH,KAAK,CAAC,UAAU,CACd,KAA2B,EAC3B,MAAgC;QAEhC,OAAO,eAAe,CAAC;YACrB,KAAK;YACL,MAAM;SACP,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAjBY,oBAAoB;IAHhC,UAAU,CAAC;QACV,UAAU,EAAE,MAAM;KACnB,CAAC;GACW,oBAAoB,CAiBhC"}

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @rageshpikalmunde/rp-image-editor-angular
+ * Angular wrapper for the rp-image-editor plugin
+ */
+export { RpImageEditorModule } from './lib/rp-image-editor.module';
+export { RpImageEditorComponent } from './lib/rp-image-editor.component';
+export { RpImageEditorService } from './lib/rp-image-editor.service';
+export type { RpEditorConfig, RpEditorTheme, RpEditorResult, CropAspectRatio, EditorMode, } from '@rageshpikalmunde/rp-image-editor';

package/dist/types/lib/rp-image-editor.component.d.ts

@@ -0,0 +1,40 @@
+import { ElementRef, EventEmitter, OnDestroy, AfterViewInit } from '@angular/core';
+import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
+export declare class RpImageEditorComponent implements AfterViewInit, OnDestroy {
+    containerRef: ElementRef<HTMLElement>;
+    /** Image source — File, Blob, or URL string */
+    image: File | Blob | string | null;
+    /** Editor configuration */
+    config: Partial<RpEditorConfig>;
+    /** Emitted when user clicks Apply — contains the edited image result */
+    imageEdited: EventEmitter<RpEditorResult>;
+    /** Emitted when user clicks Close/Cancel */
+    editorClosed: EventEmitter<void>;
+    /** Emitted when an error occurs */
+    editorError: EventEmitter<Error>;
+    private editor;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Programmatically load an image (can be called after component init)
+     */
+    loadImage(source: File | Blob | string): Promise<void>;
+    /**
+     * Get the edited result programmatically
+     */
+    getResult(): Promise<RpEditorResult | null>;
+    /**
+     * Apply and emit result
+     */
+    apply(): Promise<void>;
+    /**
+     * Close the editor
+     */
+    close(): void;
+    /**
+     * Reset to original image
+     */
+    reset(): Promise<void>;
+    private initEditor;
+    private destroyEditor;
+}

package/dist/types/lib/rp-image-editor.module.d.ts

@@ -0,0 +1,8 @@
+import { ModuleWithProviders } from '@angular/core';
+export declare class RpImageEditorModule {
+    /**
+     * Use forRoot() if you want to provide the service at root level
+     * (optional — service is already providedIn: 'root')
+     */
+    static forRoot(): ModuleWithProviders<RpImageEditorModule>;
+}

package/dist/types/lib/rp-image-editor.service.d.ts

@@ -0,0 +1,30 @@
+import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
+/**
+ * Service to open the image editor as a modal overlay.
+ * Works with or without Ionic — uses the core modal implementation.
+ *
+ * Usage:
+ * ```ts
+ * constructor(private rpEditor: RpImageEditorService) {}
+ *
+ * async editImage(file: File) {
+ *   const result = await this.rpEditor.openEditor(file, {
+ *     theme: { applyButtonBackground: '#28a745' }
+ *   });
+ *   if (result) {
+ *     // result.file — upload to server
+ *     // result.base64 — preview
+ *   }
+ * }
+ * ```
+ */
+export declare class RpImageEditorService {
+    /**
+     * Open the image editor in a modal popup.
+     *
+     * @param image - File, Blob, or URL string to edit
+     * @param config - Optional editor configuration (theme, crop ratios, etc.)
+     * @returns Promise resolving to RpEditorResult if applied, or null if cancelled
+     */
+    openEditor(image: File | Blob | string, config?: Partial<RpEditorConfig>): Promise<RpEditorResult | null>;
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@rageshpikalmunde/rp-image-editor-angular",
+  "version": "1.1.0",
+  "description": "Angular wrapper for rp-image-editor — use inside Ionic+Angular apps",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "npm run build:esm && npm run build:cjs && npm run build:types",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:types": "tsc -p tsconfig.types.json",
+    "clean": "rm -rf dist"
+  },
+  "keywords": [
+    "image-editor",
+    "angular",
+    "ionic",
+    "capacitor"
+  ],
+  "author": "Ragesh Pikalmunde",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@rageshpikalmunde/rp-image-editor": "^1.1.0"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=14.0.0",
+    "@angular/common": ">=14.0.0",
+    "@ionic/angular": ">=6.0.0"
+  },
+  "devDependencies": {
+    "typescript": "~5.3.0"
+  }
+}