@rageshpikalmunde/rp-image-editor-angular 1.5.13 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2020/index.mjs +1 -1
- package/esm2020/lib/rp-image-editor.service.mjs +13 -2
- package/fesm2015/rageshpikalmunde-rp-image-editor-angular.mjs +14 -1
- package/fesm2015/rageshpikalmunde-rp-image-editor-angular.mjs.map +1 -1
- package/fesm2020/rageshpikalmunde-rp-image-editor-angular.mjs +12 -1
- package/fesm2020/rageshpikalmunde-rp-image-editor-angular.mjs.map +1 -1
- package/index.d.ts +1 -1
- package/lib/rp-image-editor.service.d.ts +10 -1
- package/package.json +2 -2
package/esm2020/index.mjs
CHANGED
|
@@ -8,4 +8,4 @@ export { RpImageEditorModule } from './lib/rp-image-editor.module';
|
|
|
8
8
|
export { RpImageEditorComponent } from './lib/rp-image-editor.component';
|
|
9
9
|
// Service
|
|
10
10
|
export { RpImageEditorService } from './lib/rp-image-editor.service';
|
|
11
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
11
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7OztHQUdHO0FBRUgsU0FBUztBQUNULE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLDhCQUE4QixDQUFDO0FBRW5FLFlBQVk7QUFDWixPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQztBQUV6RSxVQUFVO0FBQ1YsT0FBTyxFQUFFLG9CQUFvQixFQUFFLE1BQU0sK0JBQStCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEByYWdlc2hwaWthbG11bmRlL3JwLWltYWdlLWVkaXRvci1hbmd1bGFyXG4gKiBBbmd1bGFyIHdyYXBwZXIgZm9yIHRoZSBycC1pbWFnZS1lZGl0b3IgcGx1Z2luXG4gKi9cblxuLy8gTW9kdWxlXG5leHBvcnQgeyBScEltYWdlRWRpdG9yTW9kdWxlIH0gZnJvbSAnLi9saWIvcnAtaW1hZ2UtZWRpdG9yLm1vZHVsZSc7XG5cbi8vIENvbXBvbmVudFxuZXhwb3J0IHsgUnBJbWFnZUVkaXRvckNvbXBvbmVudCB9IGZyb20gJy4vbGliL3JwLWltYWdlLWVkaXRvci5jb21wb25lbnQnO1xuXG4vLyBTZXJ2aWNlXG5leHBvcnQgeyBScEltYWdlRWRpdG9yU2VydmljZSB9IGZyb20gJy4vbGliL3JwLWltYWdlLWVkaXRvci5zZXJ2aWNlJztcblxuLy8gUmUtZXhwb3J0IHR5cGVzIGZyb20gY29yZVxuZXhwb3J0IHR5cGUge1xuICBScEVkaXRvckNvbmZpZyxcbiAgUnBFZGl0b3JUaGVtZSxcbiAgUnBFZGl0b3JSZXN1bHQsXG4gIFJwTXVsdGlFZGl0b3JJdGVtUmVzdWx0LFxuICBDcm9wQXNwZWN0UmF0aW8sXG4gIEVkaXRvck1vZGUsXG59IGZyb20gJ0ByYWdlc2hwaWthbG11bmRlL3JwLWltYWdlLWVkaXRvcic7XG4iXX0=
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Injectable } from '@angular/core';
|
|
2
|
-
import { openEditorModal, } from '@rageshpikalmunde/rp-image-editor';
|
|
2
|
+
import { openEditorModal, openMultiEditorModal, } from '@rageshpikalmunde/rp-image-editor';
|
|
3
3
|
import * as i0 from "@angular/core";
|
|
4
4
|
/**
|
|
5
5
|
* Service to open the image editor as a modal overlay.
|
|
@@ -34,6 +34,17 @@ export class RpImageEditorService {
|
|
|
34
34
|
config,
|
|
35
35
|
});
|
|
36
36
|
}
|
|
37
|
+
/**
|
|
38
|
+
* Edit several images in one modal with a thumbnail strip.
|
|
39
|
+
*
|
|
40
|
+
* @param images - Files, Blobs or URL strings, in strip order
|
|
41
|
+
* @param config - Editor configuration shared by every image
|
|
42
|
+
* @param startIndex - 0-based index of the image to open first
|
|
43
|
+
* @returns One `{ index, edited, result }` per image on Apply, or null if closed
|
|
44
|
+
*/
|
|
45
|
+
async openMultiEditor(images, config, startIndex) {
|
|
46
|
+
return openMultiEditorModal({ images, config, startIndex });
|
|
47
|
+
}
|
|
37
48
|
}
|
|
38
49
|
RpImageEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
39
50
|
RpImageEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, providedIn: 'root' });
|
|
@@ -43,4 +54,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
43
54
|
providedIn: 'root',
|
|
44
55
|
}]
|
|
45
56
|
}] });
|
|
46
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
57
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicnAtaW1hZ2UtZWRpdG9yLnNlcnZpY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL3JwLWltYWdlLWVkaXRvci5zZXJ2aWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDM0MsT0FBTyxFQUlMLGVBQWUsRUFDZixvQkFBb0IsR0FDckIsTUFBTSxtQ0FBbUMsQ0FBQzs7QUFFM0M7Ozs7Ozs7Ozs7Ozs7Ozs7OztHQWtCRztBQUlILE1BQU0sT0FBTyxvQkFBb0I7SUFDL0I7Ozs7OztPQU1HO0lBQ0gsS0FBSyxDQUFDLFVBQVUsQ0FDZCxLQUEyQixFQUMzQixNQUFnQztRQUVoQyxPQUFPLGVBQWUsQ0FBQztZQUNyQixLQUFLO1lBQ0wsTUFBTTtTQUNQLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRDs7Ozs7OztPQU9HO0lBQ0gsS0FBSyxDQUFDLGVBQWUsQ0FDbkIsTUFBbUMsRUFDbkMsTUFBZ0MsRUFDaEMsVUFBbUI7UUFFbkIsT0FBTyxvQkFBb0IsQ0FBQyxFQUFFLE1BQU0sRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLENBQUMsQ0FBQztJQUM5RCxDQUFDOztrSEFoQ1Usb0JBQW9CO3NIQUFwQixvQkFBb0IsY0FGbkIsTUFBTTs0RkFFUCxvQkFBb0I7a0JBSGhDLFVBQVU7bUJBQUM7b0JBQ1YsVUFBVSxFQUFFLE1BQU07aUJBQ25CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSW5qZWN0YWJsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgUnBFZGl0b3JDb25maWcsXG4gIFJwRWRpdG9yUmVzdWx0LFxuICBScE11bHRpRWRpdG9ySXRlbVJlc3VsdCxcbiAgb3BlbkVkaXRvck1vZGFsLFxuICBvcGVuTXVsdGlFZGl0b3JNb2RhbCxcbn0gZnJvbSAnQHJhZ2VzaHBpa2FsbXVuZGUvcnAtaW1hZ2UtZWRpdG9yJztcblxuLyoqXG4gKiBTZXJ2aWNlIHRvIG9wZW4gdGhlIGltYWdlIGVkaXRvciBhcyBhIG1vZGFsIG92ZXJsYXkuXG4gKiBXb3JrcyB3aXRoIG9yIHdpdGhvdXQgSW9uaWMg4oCUIHVzZXMgdGhlIGNvcmUgbW9kYWwgaW1wbGVtZW50YXRpb24uXG4gKlxuICogVXNhZ2U6XG4gKiBgYGB0c1xuICogY29uc3RydWN0b3IocHJpdmF0ZSBycEVkaXRvcjogUnBJbWFnZUVkaXRvclNlcnZpY2UpIHt9XG4gKlxuICogYXN5bmMgZWRpdEltYWdlKGZpbGU6IEZpbGUpIHtcbiAqICAgY29uc3QgcmVzdWx0ID0gYXdhaXQgdGhpcy5ycEVkaXRvci5vcGVuRWRpdG9yKGZpbGUsIHtcbiAqICAgICB0aGVtZTogeyBhcHBseUJ1dHRvbkJhY2tncm91bmQ6ICcjMjhhNzQ1JyB9XG4gKiAgIH0pO1xuICogICBpZiAocmVzdWx0KSB7XG4gKiAgICAgLy8gcmVzdWx0LmZpbGUg4oCUIHVwbG9hZCB0byBzZXJ2ZXJcbiAqICAgICAvLyByZXN1bHQuYmFzZTY0IOKAlCBwcmV2aWV3XG4gKiAgIH1cbiAqIH1cbiAqIGBgYFxuICovXG5ASW5qZWN0YWJsZSh7XG4gIHByb3ZpZGVkSW46ICdyb290Jyxcbn0pXG5leHBvcnQgY2xhc3MgUnBJbWFnZUVkaXRvclNlcnZpY2Uge1xuICAvKipcbiAgICogT3BlbiB0aGUgaW1hZ2UgZWRpdG9yIGluIGEgbW9kYWwgcG9wdXAuXG4gICAqXG4gICAqIEBwYXJhbSBpbWFnZSAtIEZpbGUsIEJsb2IsIG9yIFVSTCBzdHJpbmcgdG8gZWRpdFxuICAgKiBAcGFyYW0gY29uZmlnIC0gT3B0aW9uYWwgZWRpdG9yIGNvbmZpZ3VyYXRpb24gKHRoZW1lLCBjcm9wIHJhdGlvcywgZXRjLilcbiAgICogQHJldHVybnMgUHJvbWlzZSByZXNvbHZpbmcgdG8gUnBFZGl0b3JSZXN1bHQgaWYgYXBwbGllZCwgb3IgbnVsbCBpZiBjYW5jZWxsZWRcbiAgICovXG4gIGFzeW5jIG9wZW5FZGl0b3IoXG4gICAgaW1hZ2U6IEZpbGUgfCBCbG9iIHwgc3RyaW5nLFxuICAgIGNvbmZpZz86IFBhcnRpYWw8UnBFZGl0b3JDb25maWc+XG4gICk6IFByb21pc2U8UnBFZGl0b3JSZXN1bHQgfCBudWxsPiB7XG4gICAgcmV0dXJuIG9wZW5FZGl0b3JNb2RhbCh7XG4gICAgICBpbWFnZSxcbiAgICAgIGNvbmZpZyxcbiAgICB9KTtcbiAgfVxuXG4gIC8qKlxuICAgKiBFZGl0IHNldmVyYWwgaW1hZ2VzIGluIG9uZSBtb2RhbCB3aXRoIGEgdGh1bWJuYWlsIHN0cmlwLlxuICAgKlxuICAgKiBAcGFyYW0gaW1hZ2VzIC0gRmlsZXMsIEJsb2JzIG9yIFVSTCBzdHJpbmdzLCBpbiBzdHJpcCBvcmRlclxuICAgKiBAcGFyYW0gY29uZmlnIC0gRWRpdG9yIGNvbmZpZ3VyYXRpb24gc2hhcmVkIGJ5IGV2ZXJ5IGltYWdlXG4gICAqIEBwYXJhbSBzdGFydEluZGV4IC0gMC1iYXNlZCBpbmRleCBvZiB0aGUgaW1hZ2UgdG8gb3BlbiBmaXJzdFxuICAgKiBAcmV0dXJucyBPbmUgYHsgaW5kZXgsIGVkaXRlZCwgcmVzdWx0IH1gIHBlciBpbWFnZSBvbiBBcHBseSwgb3IgbnVsbCBpZiBjbG9zZWRcbiAgICovXG4gIGFzeW5jIG9wZW5NdWx0aUVkaXRvcihcbiAgICBpbWFnZXM6IEFycmF5PEZpbGUgfCBCbG9iIHwgc3RyaW5nPixcbiAgICBjb25maWc/OiBQYXJ0aWFsPFJwRWRpdG9yQ29uZmlnPixcbiAgICBzdGFydEluZGV4PzogbnVtYmVyXG4gICk6IFByb21pc2U8UnBNdWx0aUVkaXRvckl0ZW1SZXN1bHRbXSB8IG51bGw+IHtcbiAgICByZXR1cm4gb3Blbk11bHRpRWRpdG9yTW9kYWwoeyBpbWFnZXMsIGNvbmZpZywgc3RhcnRJbmRleCB9KTtcbiAgfVxufVxuIl19
|
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { EventEmitter, PLATFORM_ID, Component, Inject, ViewChild, Input, Output, Injectable, NgModule } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
4
4
|
import { __awaiter } from 'tslib';
|
|
5
|
-
import { RpImageEditor, openEditorModal } from '@rageshpikalmunde/rp-image-editor';
|
|
5
|
+
import { RpImageEditor, openEditorModal, openMultiEditorModal } from '@rageshpikalmunde/rp-image-editor';
|
|
6
6
|
|
|
7
7
|
class RpImageEditorComponent {
|
|
8
8
|
constructor(platformId) {
|
|
@@ -163,6 +163,19 @@ class RpImageEditorService {
|
|
|
163
163
|
});
|
|
164
164
|
});
|
|
165
165
|
}
|
|
166
|
+
/**
|
|
167
|
+
* Edit several images in one modal with a thumbnail strip.
|
|
168
|
+
*
|
|
169
|
+
* @param images - Files, Blobs or URL strings, in strip order
|
|
170
|
+
* @param config - Editor configuration shared by every image
|
|
171
|
+
* @param startIndex - 0-based index of the image to open first
|
|
172
|
+
* @returns One `{ index, edited, result }` per image on Apply, or null if closed
|
|
173
|
+
*/
|
|
174
|
+
openMultiEditor(images, config, startIndex) {
|
|
175
|
+
return __awaiter(this, void 0, void 0, function* () {
|
|
176
|
+
return openMultiEditorModal({ images, config, startIndex });
|
|
177
|
+
});
|
|
178
|
+
}
|
|
166
179
|
}
|
|
167
180
|
RpImageEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
168
181
|
RpImageEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, providedIn: 'root' });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rageshpikalmunde-rp-image-editor-angular.mjs","sources":["../../src/lib/rp-image-editor.component.ts","../../src/lib/rp-image-editor.service.ts","../../src/lib/rp-image-editor.module.ts","../../src/index.ts","../../src/rageshpikalmunde-rp-image-editor-angular.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, PLATFORM_ID, ViewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { RpImageEditor, RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';\n\n@Component({\n selector: 'rp-image-editor',\n template: `<div #editorContainer class=\"rp-image-editor-host\" [style.width]=\"'100%'\" [style.height]=\"'100%'\" [style.display]=\"'flex'\" [style.flexDirection]=\"'column'\"></div>`,\n styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]\n})\nexport class RpImageEditorComponent implements AfterViewInit, OnDestroy {\n @ViewChild('editorContainer', { static: true }) containerRef!: ElementRef<HTMLElement>;\n\n /** Image source — File, Blob, or URL string */\n @Input() image: File | Blob | string | null = null;\n\n /** Editor configuration */\n @Input() config: Partial<RpEditorConfig> = {};\n\n /** Emitted when user clicks Apply — contains the edited image result */\n @Output() imageEdited = new EventEmitter<RpEditorResult>();\n\n /** Emitted when user clicks Close/Cancel */\n @Output() editorClosed = new EventEmitter<void>();\n\n /** Emitted when an error occurs */\n @Output() editorError = new EventEmitter<Error>();\n\n private editor: RpImageEditor | null = null;\n\n /** False during server-side rendering, where there is no DOM/canvas. */\n private readonly isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) platformId: object) {\n this.isBrowser = isPlatformBrowser(platformId);\n }\n\n ngAfterViewInit(): void {\n if (this.image) {\n this.initEditor();\n }\n }\n\n ngOnDestroy(): void {\n this.destroyEditor();\n }\n\n /**\n * Programmatically load an image (can be called after component init)\n */\n async loadImage(source: File | Blob | string): Promise<void> {\n this.image = source;\n await this.initEditor();\n }\n\n /**\n * Get the edited result programmatically\n */\n async getResult(): Promise<RpEditorResult | null> {\n try {\n return await this.editor?.getResult() ?? null;\n } catch (err) {\n this.editorError.emit(err as Error);\n return null;\n }\n }\n\n /**\n * Apply and emit result\n */\n async apply(): Promise<void> {\n const result = await this.getResult();\n if (result) {\n this.imageEdited.emit(result);\n }\n }\n\n /**\n * Close the editor\n */\n close(): void {\n this.destroyEditor();\n this.editorClosed.emit();\n }\n\n /**\n * Reset to original image\n */\n async reset(): Promise<void> {\n await this.editor?.reset();\n }\n\n private async initEditor(): Promise<void> {\n this.destroyEditor();\n\n if (!this.isBrowser || !this.image || !this.containerRef?.nativeElement) return;\n\n this.editor = new RpImageEditor(this.containerRef.nativeElement, this.config);\n\n this.editor.on('error', (err) => {\n this.editorError.emit(err);\n });\n\n try {\n await this.editor.loadImage(this.image);\n } catch (err) {\n this.editorError.emit(err as Error);\n }\n }\n\n private destroyEditor(): void {\n if (this.editor) {\n this.editor.destroy();\n this.editor = null;\n }\n }\n}\n","import { Injectable } from '@angular/core';\nimport {\n RpEditorConfig,\n RpEditorResult,\n openEditorModal,\n} from '@rageshpikalmunde/rp-image-editor';\n\n/**\n * Service to open the image editor as a modal overlay.\n * Works with or without Ionic — uses the core modal implementation.\n *\n * Usage:\n * ```ts\n * constructor(private rpEditor: RpImageEditorService) {}\n *\n * async editImage(file: File) {\n * const result = await this.rpEditor.openEditor(file, {\n * theme: { applyButtonBackground: '#28a745' }\n * });\n * if (result) {\n * // result.file — upload to server\n * // result.base64 — preview\n * }\n * }\n * ```\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class RpImageEditorService {\n /**\n * Open the image editor in a modal popup.\n *\n * @param image - File, Blob, or URL string to edit\n * @param config - Optional editor configuration (theme, crop ratios, etc.)\n * @returns Promise resolving to RpEditorResult if applied, or null if cancelled\n */\n async openEditor(\n image: File | Blob | string,\n config?: Partial<RpEditorConfig>\n ): Promise<RpEditorResult | null> {\n return openEditorModal({\n image,\n config,\n });\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RpImageEditorComponent } from './rp-image-editor.component';\nimport { RpImageEditorService } from './rp-image-editor.service';\n\n@NgModule({\n declarations: [RpImageEditorComponent],\n imports: [CommonModule],\n exports: [RpImageEditorComponent],\n providers: [RpImageEditorService],\n})\nexport class RpImageEditorModule {\n /**\n * Use forRoot() if you want to provide the service at root level\n * (optional — service is already providedIn: 'root')\n */\n static forRoot(): ModuleWithProviders<RpImageEditorModule> {\n return {\n ngModule: RpImageEditorModule,\n providers: [RpImageEditorService],\n };\n }\n}\n","/**\n * @rageshpikalmunde/rp-image-editor-angular\n * Angular wrapper for the rp-image-editor plugin\n */\n\n// Module\nexport { RpImageEditorModule } from './lib/rp-image-editor.module';\n\n// Component\nexport { RpImageEditorComponent } from './lib/rp-image-editor.component';\n\n// Service\nexport { RpImageEditorService } from './lib/rp-image-editor.service';\n\n// Re-export types from core\nexport type {\n RpEditorConfig,\n RpEditorTheme,\n RpEditorResult,\n CropAspectRatio,\n EditorMode,\n} from '@rageshpikalmunde/rp-image-editor';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rageshpikalmunde-rp-image-editor-angular.mjs","sources":["../../src/lib/rp-image-editor.component.ts","../../src/lib/rp-image-editor.service.ts","../../src/lib/rp-image-editor.module.ts","../../src/index.ts","../../src/rageshpikalmunde-rp-image-editor-angular.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, PLATFORM_ID, ViewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { RpImageEditor, RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';\n\n@Component({\n selector: 'rp-image-editor',\n template: `<div #editorContainer class=\"rp-image-editor-host\" [style.width]=\"'100%'\" [style.height]=\"'100%'\" [style.display]=\"'flex'\" [style.flexDirection]=\"'column'\"></div>`,\n styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]\n})\nexport class RpImageEditorComponent implements AfterViewInit, OnDestroy {\n @ViewChild('editorContainer', { static: true }) containerRef!: ElementRef<HTMLElement>;\n\n /** Image source — File, Blob, or URL string */\n @Input() image: File | Blob | string | null = null;\n\n /** Editor configuration */\n @Input() config: Partial<RpEditorConfig> = {};\n\n /** Emitted when user clicks Apply — contains the edited image result */\n @Output() imageEdited = new EventEmitter<RpEditorResult>();\n\n /** Emitted when user clicks Close/Cancel */\n @Output() editorClosed = new EventEmitter<void>();\n\n /** Emitted when an error occurs */\n @Output() editorError = new EventEmitter<Error>();\n\n private editor: RpImageEditor | null = null;\n\n /** False during server-side rendering, where there is no DOM/canvas. */\n private readonly isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) platformId: object) {\n this.isBrowser = isPlatformBrowser(platformId);\n }\n\n ngAfterViewInit(): void {\n if (this.image) {\n this.initEditor();\n }\n }\n\n ngOnDestroy(): void {\n this.destroyEditor();\n }\n\n /**\n * Programmatically load an image (can be called after component init)\n */\n async loadImage(source: File | Blob | string): Promise<void> {\n this.image = source;\n await this.initEditor();\n }\n\n /**\n * Get the edited result programmatically\n */\n async getResult(): Promise<RpEditorResult | null> {\n try {\n return await this.editor?.getResult() ?? null;\n } catch (err) {\n this.editorError.emit(err as Error);\n return null;\n }\n }\n\n /**\n * Apply and emit result\n */\n async apply(): Promise<void> {\n const result = await this.getResult();\n if (result) {\n this.imageEdited.emit(result);\n }\n }\n\n /**\n * Close the editor\n */\n close(): void {\n this.destroyEditor();\n this.editorClosed.emit();\n }\n\n /**\n * Reset to original image\n */\n async reset(): Promise<void> {\n await this.editor?.reset();\n }\n\n private async initEditor(): Promise<void> {\n this.destroyEditor();\n\n if (!this.isBrowser || !this.image || !this.containerRef?.nativeElement) return;\n\n this.editor = new RpImageEditor(this.containerRef.nativeElement, this.config);\n\n this.editor.on('error', (err) => {\n this.editorError.emit(err);\n });\n\n try {\n await this.editor.loadImage(this.image);\n } catch (err) {\n this.editorError.emit(err as Error);\n }\n }\n\n private destroyEditor(): void {\n if (this.editor) {\n this.editor.destroy();\n this.editor = null;\n }\n }\n}\n","import { Injectable } from '@angular/core';\nimport {\n RpEditorConfig,\n RpEditorResult,\n RpMultiEditorItemResult,\n openEditorModal,\n openMultiEditorModal,\n} from '@rageshpikalmunde/rp-image-editor';\n\n/**\n * Service to open the image editor as a modal overlay.\n * Works with or without Ionic — uses the core modal implementation.\n *\n * Usage:\n * ```ts\n * constructor(private rpEditor: RpImageEditorService) {}\n *\n * async editImage(file: File) {\n * const result = await this.rpEditor.openEditor(file, {\n * theme: { applyButtonBackground: '#28a745' }\n * });\n * if (result) {\n * // result.file — upload to server\n * // result.base64 — preview\n * }\n * }\n * ```\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class RpImageEditorService {\n /**\n * Open the image editor in a modal popup.\n *\n * @param image - File, Blob, or URL string to edit\n * @param config - Optional editor configuration (theme, crop ratios, etc.)\n * @returns Promise resolving to RpEditorResult if applied, or null if cancelled\n */\n async openEditor(\n image: File | Blob | string,\n config?: Partial<RpEditorConfig>\n ): Promise<RpEditorResult | null> {\n return openEditorModal({\n image,\n config,\n });\n }\n\n /**\n * Edit several images in one modal with a thumbnail strip.\n *\n * @param images - Files, Blobs or URL strings, in strip order\n * @param config - Editor configuration shared by every image\n * @param startIndex - 0-based index of the image to open first\n * @returns One `{ index, edited, result }` per image on Apply, or null if closed\n */\n async openMultiEditor(\n images: Array<File | Blob | string>,\n config?: Partial<RpEditorConfig>,\n startIndex?: number\n ): Promise<RpMultiEditorItemResult[] | null> {\n return openMultiEditorModal({ images, config, startIndex });\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RpImageEditorComponent } from './rp-image-editor.component';\nimport { RpImageEditorService } from './rp-image-editor.service';\n\n@NgModule({\n declarations: [RpImageEditorComponent],\n imports: [CommonModule],\n exports: [RpImageEditorComponent],\n providers: [RpImageEditorService],\n})\nexport class RpImageEditorModule {\n /**\n * Use forRoot() if you want to provide the service at root level\n * (optional — service is already providedIn: 'root')\n */\n static forRoot(): ModuleWithProviders<RpImageEditorModule> {\n return {\n ngModule: RpImageEditorModule,\n providers: [RpImageEditorService],\n };\n }\n}\n","/**\n * @rageshpikalmunde/rp-image-editor-angular\n * Angular wrapper for the rp-image-editor plugin\n */\n\n// Module\nexport { RpImageEditorModule } from './lib/rp-image-editor.module';\n\n// Component\nexport { RpImageEditorComponent } from './lib/rp-image-editor.component';\n\n// Service\nexport { RpImageEditorService } from './lib/rp-image-editor.service';\n\n// Re-export types from core\nexport type {\n RpEditorConfig,\n RpEditorTheme,\n RpEditorResult,\n RpMultiEditorItemResult,\n CropAspectRatio,\n EditorMode,\n} from '@rageshpikalmunde/rp-image-editor';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { EventEmitter, PLATFORM_ID, Component, Inject, ViewChild, Input, Output, Injectable, NgModule } from '@angular/core';
|
|
3
3
|
import { isPlatformBrowser, CommonModule } from '@angular/common';
|
|
4
|
-
import { RpImageEditor, openEditorModal } from '@rageshpikalmunde/rp-image-editor';
|
|
4
|
+
import { RpImageEditor, openEditorModal, openMultiEditorModal } from '@rageshpikalmunde/rp-image-editor';
|
|
5
5
|
|
|
6
6
|
class RpImageEditorComponent {
|
|
7
7
|
constructor(platformId) {
|
|
@@ -145,6 +145,17 @@ class RpImageEditorService {
|
|
|
145
145
|
config,
|
|
146
146
|
});
|
|
147
147
|
}
|
|
148
|
+
/**
|
|
149
|
+
* Edit several images in one modal with a thumbnail strip.
|
|
150
|
+
*
|
|
151
|
+
* @param images - Files, Blobs or URL strings, in strip order
|
|
152
|
+
* @param config - Editor configuration shared by every image
|
|
153
|
+
* @param startIndex - 0-based index of the image to open first
|
|
154
|
+
* @returns One `{ index, edited, result }` per image on Apply, or null if closed
|
|
155
|
+
*/
|
|
156
|
+
async openMultiEditor(images, config, startIndex) {
|
|
157
|
+
return openMultiEditorModal({ images, config, startIndex });
|
|
158
|
+
}
|
|
148
159
|
}
|
|
149
160
|
RpImageEditorService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
150
161
|
RpImageEditorService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RpImageEditorService, providedIn: 'root' });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rageshpikalmunde-rp-image-editor-angular.mjs","sources":["../../src/lib/rp-image-editor.component.ts","../../src/lib/rp-image-editor.service.ts","../../src/lib/rp-image-editor.module.ts","../../src/index.ts","../../src/rageshpikalmunde-rp-image-editor-angular.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, PLATFORM_ID, ViewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { RpImageEditor, RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';\n\n@Component({\n selector: 'rp-image-editor',\n template: `<div #editorContainer class=\"rp-image-editor-host\" [style.width]=\"'100%'\" [style.height]=\"'100%'\" [style.display]=\"'flex'\" [style.flexDirection]=\"'column'\"></div>`,\n styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]\n})\nexport class RpImageEditorComponent implements AfterViewInit, OnDestroy {\n @ViewChild('editorContainer', { static: true }) containerRef!: ElementRef<HTMLElement>;\n\n /** Image source — File, Blob, or URL string */\n @Input() image: File | Blob | string | null = null;\n\n /** Editor configuration */\n @Input() config: Partial<RpEditorConfig> = {};\n\n /** Emitted when user clicks Apply — contains the edited image result */\n @Output() imageEdited = new EventEmitter<RpEditorResult>();\n\n /** Emitted when user clicks Close/Cancel */\n @Output() editorClosed = new EventEmitter<void>();\n\n /** Emitted when an error occurs */\n @Output() editorError = new EventEmitter<Error>();\n\n private editor: RpImageEditor | null = null;\n\n /** False during server-side rendering, where there is no DOM/canvas. */\n private readonly isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) platformId: object) {\n this.isBrowser = isPlatformBrowser(platformId);\n }\n\n ngAfterViewInit(): void {\n if (this.image) {\n this.initEditor();\n }\n }\n\n ngOnDestroy(): void {\n this.destroyEditor();\n }\n\n /**\n * Programmatically load an image (can be called after component init)\n */\n async loadImage(source: File | Blob | string): Promise<void> {\n this.image = source;\n await this.initEditor();\n }\n\n /**\n * Get the edited result programmatically\n */\n async getResult(): Promise<RpEditorResult | null> {\n try {\n return await this.editor?.getResult() ?? null;\n } catch (err) {\n this.editorError.emit(err as Error);\n return null;\n }\n }\n\n /**\n * Apply and emit result\n */\n async apply(): Promise<void> {\n const result = await this.getResult();\n if (result) {\n this.imageEdited.emit(result);\n }\n }\n\n /**\n * Close the editor\n */\n close(): void {\n this.destroyEditor();\n this.editorClosed.emit();\n }\n\n /**\n * Reset to original image\n */\n async reset(): Promise<void> {\n await this.editor?.reset();\n }\n\n private async initEditor(): Promise<void> {\n this.destroyEditor();\n\n if (!this.isBrowser || !this.image || !this.containerRef?.nativeElement) return;\n\n this.editor = new RpImageEditor(this.containerRef.nativeElement, this.config);\n\n this.editor.on('error', (err) => {\n this.editorError.emit(err);\n });\n\n try {\n await this.editor.loadImage(this.image);\n } catch (err) {\n this.editorError.emit(err as Error);\n }\n }\n\n private destroyEditor(): void {\n if (this.editor) {\n this.editor.destroy();\n this.editor = null;\n }\n }\n}\n","import { Injectable } from '@angular/core';\nimport {\n RpEditorConfig,\n RpEditorResult,\n openEditorModal,\n} from '@rageshpikalmunde/rp-image-editor';\n\n/**\n * Service to open the image editor as a modal overlay.\n * Works with or without Ionic — uses the core modal implementation.\n *\n * Usage:\n * ```ts\n * constructor(private rpEditor: RpImageEditorService) {}\n *\n * async editImage(file: File) {\n * const result = await this.rpEditor.openEditor(file, {\n * theme: { applyButtonBackground: '#28a745' }\n * });\n * if (result) {\n * // result.file — upload to server\n * // result.base64 — preview\n * }\n * }\n * ```\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class RpImageEditorService {\n /**\n * Open the image editor in a modal popup.\n *\n * @param image - File, Blob, or URL string to edit\n * @param config - Optional editor configuration (theme, crop ratios, etc.)\n * @returns Promise resolving to RpEditorResult if applied, or null if cancelled\n */\n async openEditor(\n image: File | Blob | string,\n config?: Partial<RpEditorConfig>\n ): Promise<RpEditorResult | null> {\n return openEditorModal({\n image,\n config,\n });\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RpImageEditorComponent } from './rp-image-editor.component';\nimport { RpImageEditorService } from './rp-image-editor.service';\n\n@NgModule({\n declarations: [RpImageEditorComponent],\n imports: [CommonModule],\n exports: [RpImageEditorComponent],\n providers: [RpImageEditorService],\n})\nexport class RpImageEditorModule {\n /**\n * Use forRoot() if you want to provide the service at root level\n * (optional — service is already providedIn: 'root')\n */\n static forRoot(): ModuleWithProviders<RpImageEditorModule> {\n return {\n ngModule: RpImageEditorModule,\n providers: [RpImageEditorService],\n };\n }\n}\n","/**\n * @rageshpikalmunde/rp-image-editor-angular\n * Angular wrapper for the rp-image-editor plugin\n */\n\n// Module\nexport { RpImageEditorModule } from './lib/rp-image-editor.module';\n\n// Component\nexport { RpImageEditorComponent } from './lib/rp-image-editor.component';\n\n// Service\nexport { RpImageEditorService } from './lib/rp-image-editor.service';\n\n// Re-export types from core\nexport type {\n RpEditorConfig,\n RpEditorTheme,\n RpEditorResult,\n CropAspectRatio,\n EditorMode,\n} from '@rageshpikalmunde/rp-image-editor';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"rageshpikalmunde-rp-image-editor-angular.mjs","sources":["../../src/lib/rp-image-editor.component.ts","../../src/lib/rp-image-editor.service.ts","../../src/lib/rp-image-editor.module.ts","../../src/index.ts","../../src/rageshpikalmunde-rp-image-editor-angular.ts"],"sourcesContent":["import { Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, Output, PLATFORM_ID, ViewChild, AfterViewInit } from '@angular/core';\nimport { isPlatformBrowser } from '@angular/common';\nimport { RpImageEditor, RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';\n\n@Component({\n selector: 'rp-image-editor',\n template: `<div #editorContainer class=\"rp-image-editor-host\" [style.width]=\"'100%'\" [style.height]=\"'100%'\" [style.display]=\"'flex'\" [style.flexDirection]=\"'column'\"></div>`,\n styles: [`:host { display: block; width: 100%; height: 100%; } .rp-image-editor-host { min-height: 300px; }`]\n})\nexport class RpImageEditorComponent implements AfterViewInit, OnDestroy {\n @ViewChild('editorContainer', { static: true }) containerRef!: ElementRef<HTMLElement>;\n\n /** Image source — File, Blob, or URL string */\n @Input() image: File | Blob | string | null = null;\n\n /** Editor configuration */\n @Input() config: Partial<RpEditorConfig> = {};\n\n /** Emitted when user clicks Apply — contains the edited image result */\n @Output() imageEdited = new EventEmitter<RpEditorResult>();\n\n /** Emitted when user clicks Close/Cancel */\n @Output() editorClosed = new EventEmitter<void>();\n\n /** Emitted when an error occurs */\n @Output() editorError = new EventEmitter<Error>();\n\n private editor: RpImageEditor | null = null;\n\n /** False during server-side rendering, where there is no DOM/canvas. */\n private readonly isBrowser: boolean;\n\n constructor(@Inject(PLATFORM_ID) platformId: object) {\n this.isBrowser = isPlatformBrowser(platformId);\n }\n\n ngAfterViewInit(): void {\n if (this.image) {\n this.initEditor();\n }\n }\n\n ngOnDestroy(): void {\n this.destroyEditor();\n }\n\n /**\n * Programmatically load an image (can be called after component init)\n */\n async loadImage(source: File | Blob | string): Promise<void> {\n this.image = source;\n await this.initEditor();\n }\n\n /**\n * Get the edited result programmatically\n */\n async getResult(): Promise<RpEditorResult | null> {\n try {\n return await this.editor?.getResult() ?? null;\n } catch (err) {\n this.editorError.emit(err as Error);\n return null;\n }\n }\n\n /**\n * Apply and emit result\n */\n async apply(): Promise<void> {\n const result = await this.getResult();\n if (result) {\n this.imageEdited.emit(result);\n }\n }\n\n /**\n * Close the editor\n */\n close(): void {\n this.destroyEditor();\n this.editorClosed.emit();\n }\n\n /**\n * Reset to original image\n */\n async reset(): Promise<void> {\n await this.editor?.reset();\n }\n\n private async initEditor(): Promise<void> {\n this.destroyEditor();\n\n if (!this.isBrowser || !this.image || !this.containerRef?.nativeElement) return;\n\n this.editor = new RpImageEditor(this.containerRef.nativeElement, this.config);\n\n this.editor.on('error', (err) => {\n this.editorError.emit(err);\n });\n\n try {\n await this.editor.loadImage(this.image);\n } catch (err) {\n this.editorError.emit(err as Error);\n }\n }\n\n private destroyEditor(): void {\n if (this.editor) {\n this.editor.destroy();\n this.editor = null;\n }\n }\n}\n","import { Injectable } from '@angular/core';\nimport {\n RpEditorConfig,\n RpEditorResult,\n RpMultiEditorItemResult,\n openEditorModal,\n openMultiEditorModal,\n} from '@rageshpikalmunde/rp-image-editor';\n\n/**\n * Service to open the image editor as a modal overlay.\n * Works with or without Ionic — uses the core modal implementation.\n *\n * Usage:\n * ```ts\n * constructor(private rpEditor: RpImageEditorService) {}\n *\n * async editImage(file: File) {\n * const result = await this.rpEditor.openEditor(file, {\n * theme: { applyButtonBackground: '#28a745' }\n * });\n * if (result) {\n * // result.file — upload to server\n * // result.base64 — preview\n * }\n * }\n * ```\n */\n@Injectable({\n providedIn: 'root',\n})\nexport class RpImageEditorService {\n /**\n * Open the image editor in a modal popup.\n *\n * @param image - File, Blob, or URL string to edit\n * @param config - Optional editor configuration (theme, crop ratios, etc.)\n * @returns Promise resolving to RpEditorResult if applied, or null if cancelled\n */\n async openEditor(\n image: File | Blob | string,\n config?: Partial<RpEditorConfig>\n ): Promise<RpEditorResult | null> {\n return openEditorModal({\n image,\n config,\n });\n }\n\n /**\n * Edit several images in one modal with a thumbnail strip.\n *\n * @param images - Files, Blobs or URL strings, in strip order\n * @param config - Editor configuration shared by every image\n * @param startIndex - 0-based index of the image to open first\n * @returns One `{ index, edited, result }` per image on Apply, or null if closed\n */\n async openMultiEditor(\n images: Array<File | Blob | string>,\n config?: Partial<RpEditorConfig>,\n startIndex?: number\n ): Promise<RpMultiEditorItemResult[] | null> {\n return openMultiEditorModal({ images, config, startIndex });\n }\n}\n","import { NgModule, ModuleWithProviders } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RpImageEditorComponent } from './rp-image-editor.component';\nimport { RpImageEditorService } from './rp-image-editor.service';\n\n@NgModule({\n declarations: [RpImageEditorComponent],\n imports: [CommonModule],\n exports: [RpImageEditorComponent],\n providers: [RpImageEditorService],\n})\nexport class RpImageEditorModule {\n /**\n * Use forRoot() if you want to provide the service at root level\n * (optional — service is already providedIn: 'root')\n */\n static forRoot(): ModuleWithProviders<RpImageEditorModule> {\n return {\n ngModule: RpImageEditorModule,\n providers: [RpImageEditorService],\n };\n }\n}\n","/**\n * @rageshpikalmunde/rp-image-editor-angular\n * Angular wrapper for the rp-image-editor plugin\n */\n\n// Module\nexport { RpImageEditorModule } from './lib/rp-image-editor.module';\n\n// Component\nexport { RpImageEditorComponent } from './lib/rp-image-editor.component';\n\n// Service\nexport { RpImageEditorService } from './lib/rp-image-editor.service';\n\n// Re-export types from core\nexport type {\n RpEditorConfig,\n RpEditorTheme,\n RpEditorResult,\n RpMultiEditorItemResult,\n CropAspectRatio,\n EditorMode,\n} from '@rageshpikalmunde/rp-image-editor';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
export { RpImageEditorModule } from './lib/rp-image-editor.module';
|
|
6
6
|
export { RpImageEditorComponent } from './lib/rp-image-editor.component';
|
|
7
7
|
export { RpImageEditorService } from './lib/rp-image-editor.service';
|
|
8
|
-
export type { RpEditorConfig, RpEditorTheme, RpEditorResult, CropAspectRatio, EditorMode, } from '@rageshpikalmunde/rp-image-editor';
|
|
8
|
+
export type { RpEditorConfig, RpEditorTheme, RpEditorResult, RpMultiEditorItemResult, CropAspectRatio, EditorMode, } from '@rageshpikalmunde/rp-image-editor';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { RpEditorConfig, RpEditorResult } from '@rageshpikalmunde/rp-image-editor';
|
|
1
|
+
import { RpEditorConfig, RpEditorResult, RpMultiEditorItemResult } from '@rageshpikalmunde/rp-image-editor';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
/**
|
|
4
4
|
* Service to open the image editor as a modal overlay.
|
|
@@ -28,6 +28,15 @@ export declare class RpImageEditorService {
|
|
|
28
28
|
* @returns Promise resolving to RpEditorResult if applied, or null if cancelled
|
|
29
29
|
*/
|
|
30
30
|
openEditor(image: File | Blob | string, config?: Partial<RpEditorConfig>): Promise<RpEditorResult | null>;
|
|
31
|
+
/**
|
|
32
|
+
* Edit several images in one modal with a thumbnail strip.
|
|
33
|
+
*
|
|
34
|
+
* @param images - Files, Blobs or URL strings, in strip order
|
|
35
|
+
* @param config - Editor configuration shared by every image
|
|
36
|
+
* @param startIndex - 0-based index of the image to open first
|
|
37
|
+
* @returns One `{ index, edited, result }` per image on Apply, or null if closed
|
|
38
|
+
*/
|
|
39
|
+
openMultiEditor(images: Array<File | Blob | string>, config?: Partial<RpEditorConfig>, startIndex?: number): Promise<RpMultiEditorItemResult[] | null>;
|
|
31
40
|
static ɵfac: i0.ɵɵFactoryDeclaration<RpImageEditorService, never>;
|
|
32
41
|
static ɵprov: i0.ɵɵInjectableDeclaration<RpImageEditorService>;
|
|
33
42
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rageshpikalmunde/rp-image-editor-angular",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "Angular wrapper for rp-image-editor with crop, annotation, filters, and native-resolution export support",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"image-editor",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"access": "public"
|
|
25
25
|
},
|
|
26
26
|
"dependencies": {
|
|
27
|
-
"@rageshpikalmunde/rp-image-editor": "^1.
|
|
27
|
+
"@rageshpikalmunde/rp-image-editor": "^1.6.0",
|
|
28
28
|
"tslib": "^2.3.0"
|
|
29
29
|
},
|
|
30
30
|
"peerDependencies": {
|