@rdlabo/ionic-angular-photo-editor 21.0.1 → 21.0.2

package/fesm2022/rdlabo-ionic-angular-photo-editor.mjs

@@ -0,0 +1,523 @@
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import * as i0 from '@angular/core';
+import { inject, signal, input, effect, viewChild, ElementRef, computed, ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, Injectable } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import * as i1 from '@ionic/angular/standalone';
+import { IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonText, IonRange, ModalController, IonicSlides, ActionSheetController, Platform } from '@ionic/angular/standalone';
+import ImageEditor from 'tui-image-editor';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { addIcons } from 'ionicons';
+import { removeOutline, closeOutline, checkmarkOutline, refreshOutline, squareOutline, tabletLandscapeOutline, expandOutline, sunnyOutline, colorFilterOutline, cropOutline, send } from 'ionicons/icons';
+import { Navigation, Zoom } from 'swiper/modules';
+import { Subscription, fromEvent, zipWith, withLatestFrom, throttleTime } from 'rxjs';
+import { register } from 'swiper/element/bundle';
+import { CameraSource, CameraResultType, Camera } from '@capacitor/camera';
+
+const filterPreset = (dictionary) => [
+    {
+        name: dictionary.original,
+        type: 'Default',
+        option: null,
+    },
+    // {
+    //   name: dictionary.invert,
+    //   type: 'Invert',
+    //   option: null,
+    // },
+    {
+        name: dictionary.sepia,
+        type: 'Sepia',
+        option: null,
+    },
+    {
+        name: dictionary.vintage,
+        type: 'vintage',
+        option: null,
+    },
+    {
+        name: 'ぼかし',
+        type: 'Blur',
+        option: { blur: 0.1 },
+    },
+    {
+        name: dictionary.grayscale,
+        type: 'Grayscale',
+        option: null,
+    },
+    // {
+    //   name: dictionary.sharpen,
+    //   type: 'Sharpen',
+    //   option: null,
+    // },
+    // {
+    //   name: dictionary.emboss,
+    //   type: 'Emboss',
+    //   option: null,
+    // },
+];
+
+const ionComponents = [IonHeader, IonToolbar, IonButtons, IonButton, IonIcon, IonContent, IonFooter, IonText, IonRange];
+
+const dictionaryForEditor = () => ({
+    // UI labels
+    save: '保存',
+    crop: '切り抜き・回転',
+    filter: 'フィルター',
+    brightness: '明るさ',
+    // Filter labels
+    original: 'オリジナル',
+    invert: '反転',
+    sepia: 'セピア',
+    vintage: 'ヴィンテージ',
+    blur: 'ぼかし',
+    grayscale: 'グレースケール',
+    sharpen: '輪郭',
+    emboss: 'エンボス',
+});
+const dictionaryForViewer = () => ({
+    // UI labels
+    delete: '削除',
+});
+const dictionaryForService = () => ({
+    // UI labels
+    camera: 'カメラ撮影',
+    album: 'アルバムから選択',
+    cancel: 'キャンセル',
+});
+
+const initializeViewerIcons = () => {
+    addIcons({
+        closeOutline,
+        removeOutline,
+    });
+};
+const initializeEditorIcons = () => {
+    addIcons({
+        closeOutline,
+        send,
+        cropOutline,
+        colorFilterOutline,
+        sunnyOutline,
+        expandOutline,
+        tabletLandscapeOutline,
+        squareOutline,
+        refreshOutline,
+        checkmarkOutline,
+    });
+};
+const waitToFindDom = (nativeElement, selector) => {
+    return new Promise((resolve) => {
+        const interval = setInterval(() => {
+            const find = nativeElement.querySelector(selector);
+            if (find) {
+                clearInterval(interval);
+                resolve();
+            }
+        });
+    });
+};
+
+class PhotoEditorPage {
+    constructor() {
+        this.modalCtrl = inject(ModalController);
+        this.dictionary = signal(dictionaryForEditor(), ...(ngDevMode ? [{ debugName: "dictionary" }] : []));
+        this.requireSquare = input(false, { ...(ngDevMode ? { debugName: "requireSquare" } : {}), transform: coerceBooleanProperty });
+        this.labels = input(undefined, ...(ngDevMode ? [{ debugName: "labels" }] : []));
+        this.setLabels = effect(() => {
+            if (this.labels()) {
+                this.dictionary.update((value) => ({ ...value, ...this.labels() }));
+            }
+        }, ...(ngDevMode ? [{ debugName: "setLabels" }] : []));
+        this.value = input.required(...(ngDevMode ? [{ debugName: "value" }] : []));
+        this.editorRef = viewChild.required('imageEditor');
+        this.ionContent = viewChild.required(IonContent, { read: ElementRef });
+        this.filters = signal([], ...(ngDevMode ? [{ debugName: "filters" }] : []));
+        this.footerMenu = signal('menu', ...(ngDevMode ? [{ debugName: "footerMenu" }] : []));
+        this.currentCrop = signal('cover', ...(ngDevMode ? [{ debugName: "currentCrop" }] : []));
+        this.currentRotate = signal(0, ...(ngDevMode ? [{ debugName: "currentRotate" }] : []));
+        this.photoCrop = signal({
+            width: 0,
+            height: 0,
+        }, ...(ngDevMode ? [{ debugName: "photoCrop" }] : []));
+        this.isCropped = signal(false, ...(ngDevMode ? [{ debugName: "isCropped" }] : []));
+        this.adoptFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "adoptFilter" }] : []));
+        this.filterPreset = computed(() => filterPreset(this.dictionary()), ...(ngDevMode ? [{ debugName: "filterPreset" }] : []));
+        this.footerMenu$ = toObservable(this.footerMenu);
+        this.initSubscription$ = [];
+        this.filterImageSize = 240;
+        this.canvasContainerObserver = new MutationObserver((mutationsList) => {
+            if (mutationsList.find((mutation) => mutation.type === 'attributes' && mutation.attributeName === 'style')) {
+                // Cover the image editor with the parent element
+                const editorRef = this.editorRef();
+                editorRef.nativeElement.style.minWidth = mutationsList[0].target.parentElement.style.maxWidth;
+                editorRef.nativeElement.style.minHeight = mutationsList[0].target.parentElement.style.maxHeight;
+                this.photoCrop.set({
+                    width: mutationsList[0].target.parentElement.querySelector('canvas').width,
+                    height: mutationsList[0].target.parentElement.querySelector('canvas').height,
+                });
+            }
+        });
+        initializeEditorIcons();
+    }
+    ngOnInit() {
+        this.initSubscription$.push(this.footerMenu$.subscribe((value) => {
+            if (value === 'filter') {
+                this.initializeFilterMenu().then();
+            }
+            if (value === 'crop') {
+                this.editorInstance.startDrawingMode('CROPPER');
+                this.changeCrop(this.requireSquare() ? '1' : 'cover');
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.initSubscription$.forEach((subscription) => subscription.unsubscribe());
+    }
+    async ionViewDidEnter() {
+        this.editorInstance = new ImageEditor(this.editorRef().nativeElement, {
+            cssMaxWidth: this.ionContent().nativeElement.clientWidth - 32,
+            cssMaxHeight: this.ionContent().nativeElement.clientHeight - 32,
+        });
+        waitToFindDom(this.editorRef().nativeElement, '.tui-image-editor-canvas-container').then(() => {
+            this.canvasContainerObserver.observe(this.editorRef().nativeElement.querySelector('.tui-image-editor-canvas-container'), {
+                attributes: true,
+                childList: false,
+                subtree: true,
+            });
+        });
+        const blob = await fetch(this.value()).then((res) => res.blob());
+        await this.editorInstance.loadImageFromFile(new File([blob], 'data.png', { type: blob.type }));
+        this.footerMenu.set(this.requireSquare() ? 'crop' : 'menu');
+    }
+    ionViewDidLeave() {
+        this.editorInstance.destroy();
+        this.canvasContainerObserver.disconnect();
+    }
+    changeCrop(crop) {
+        const rect = crop === 'cover' ? this.photoCrop().width / this.photoCrop().height : crop === '16/9' ? 16 / 9 : 1;
+        this.editorInstance.setCropzoneRect(crop !== 'auto' ? rect : undefined);
+        this.currentCrop.set(crop);
+    }
+    async rotate() {
+        this.editorInstance.stopDrawingMode();
+        await this.editorInstance.rotate(90);
+        this.currentRotate.update((value) => value + 90);
+        this.editorInstance.startDrawingMode('CROPPER');
+        requestAnimationFrame(() => this.changeCrop(this.currentCrop()));
+    }
+    async closeCrop(type) {
+        if (this.footerMenu() === 'crop') {
+            if (type === 'cancel') {
+                await this.editorInstance.rotate(this.currentRotate() * -1);
+            }
+            else {
+                await this.editorInstance.crop(this.editorInstance.getCropzoneRect());
+                this.isCropped.set(true);
+            }
+            this.currentRotate.set(0);
+            this.currentCrop.set('cover');
+            this.editorInstance.stopDrawingMode();
+        }
+        else if (this.footerMenu() === 'brightness') {
+            if (type === 'cancel' && this.editorInstance.hasFilter('brightness')) {
+                await this.editorInstance.removeFilter('brightness');
+            }
+        }
+        this.footerMenu.set('menu');
+    }
+    async changeRange(event) {
+        if (this.editorInstance.hasFilter('brightness')) {
+            await this.editorInstance.removeFilter('brightness');
+        }
+        await this.editorInstance.applyFilter('brightness', {
+            brightness: Number(event.detail.value) / 255,
+        });
+    }
+    imageSave() {
+        const value = this.editorInstance.toDataURL();
+        this.modalCtrl.dismiss({ value });
+    }
+    async initializeFilterMenu() {
+        const filters = [];
+        const defaultInstance = new ImageEditor(document.createElement('div'), {
+            cssMaxWidth: this.filterImageSize,
+            cssMaxHeight: (this.photoCrop().height * this.filterImageSize) / this.photoCrop().width,
+        });
+        const blob = await fetch(this.editorInstance.toDataURL({
+            multiplier: this.filterImageSize / this.photoCrop().width,
+        })).then((res) => res.blob());
+        await defaultInstance.loadImageFromFile(new File([blob], 'defaultInstance.png', { type: blob.type }));
+        for (const filter of this.filterPreset()) {
+            if (filter.type !== 'Default') {
+                await defaultInstance.applyFilter(filter.type, filter.option);
+            }
+            filters.push({
+                name: filter.name,
+                type: filter.type,
+                option: filter.option,
+                data: defaultInstance.toDataURL(),
+                width: this.filterImageSize,
+                height: (this.photoCrop().height * this.filterImageSize) / this.photoCrop().width,
+            });
+            if (filter.type !== 'Default') {
+                await defaultInstance.removeFilter(filter.type);
+            }
+        }
+        this.filters.set(filters);
+        defaultInstance.destroy();
+    }
+    async filterImage(filter) {
+        if (this.adoptFilter()) {
+            await this.editorInstance.removeFilter(this.adoptFilter().type);
+        }
+        if (filter.type === 'Default') {
+            this.adoptFilter.set(undefined);
+            return;
+        }
+        await this.editorInstance.applyFilter(filter.type, filter.option);
+        this.adoptFilter.set(filter);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoEditorPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PhotoEditorPage, isStandalone: true, selector: "app-editor-image", inputs: { requireSquare: { classPropertyName: "requireSquare", publicName: "requireSquare", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["imageEditor"], descendants: true, isSignal: true }, { propertyName: "ionContent", first: true, predicate: IonContent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\"\n      ><ion-button (click)=\"modalCtrl.dismiss()\"><ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon></ion-button\n    ></ion-buttons>\n    <ion-buttons slot=\"end\">\n      <ion-button color=\"photo-editor-primary\" fill=\"solid\" type=\"submit\" [disabled]=\"!['menu', 'filter'].includes(footerMenu())\" (click)=\"imageSave()\">\n        {{ dictionary().save }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\" [scrollY]=\"false\">\n  <div #imageEditor></div>\n</ion-content>\n<ion-footer>\n  <ion-toolbar>\n    @if (this.footerMenu() === 'menu') {\n      <aside class=\"ion-justify-content-center\">\n        <button (click)=\"footerMenu.set('crop')\">\n          <ion-text>{{ dictionary().crop }}</ion-text>\n          <ion-icon name=\"crop-outline\" size=\"large\"></ion-icon>\n        </button>\n        <button (click)=\"footerMenu.set('filter')\">\n          <ion-text>{{ dictionary().filter }}</ion-text>\n          <ion-icon name=\"color-filter-outline\" size=\"large\"></ion-icon>\n        </button>\n        <button (click)=\"footerMenu.set('brightness')\">\n          <ion-text>{{ dictionary().brightness }}</ion-text>\n          <ion-icon name=\"sunny-outline\" size=\"large\"></ion-icon>\n        </button>\n      </aside>\n    }\n\n    @if (this.footerMenu() === 'filter') {\n      <aside>\n        @for (item of filters(); track item) {\n          <button (click)=\"filterImage(item)\">\n            <ion-text>{{ item.name }}</ion-text>\n            <span class=\"image-filter-box\" [style.background-image]=\"'url(' + item.data + ')'\"></span>\n          </button>\n        }\n      </aside>\n    }\n\n    @if (this.footerMenu() === 'crop' && !requireSquare()) {\n      <ion-buttons class=\"ion-justify-content-center submenu-icon-buttons\">\n        <ion-button (click)=\"changeCrop('cover')\" [color]=\"currentCrop() === 'cover' ? 'success' : undefined\">\n          <ion-icon name=\"expand-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('16/9')\" [color]=\"currentCrop() === '16/9' ? 'success' : undefined\">\n          <ion-icon name=\"tablet-landscape-outline\" slot=\"icon-only\" style=\"transform: scale(1, 0.8)\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('1')\" [color]=\"currentCrop() === '1' ? 'success' : undefined\">\n          <ion-icon name=\"square-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('auto')\" [color]=\"currentCrop() === 'auto' ? 'success' : undefined\">\n          <ion-icon name=\"crop-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"rotate()\"><ion-icon name=\"refresh-outline\" slot=\"icon-only\"></ion-icon></ion-button>\n      </ion-buttons>\n    }\n\n    @if (['brightness'].includes(this.footerMenu())) {\n      <div class=\"ion-padding ion-margin\">\n        <ion-range [pin]=\"true\" [min]=\"-100\" [max]=\"100\" (ionChange)=\"changeRange($any($event))\"></ion-range>\n      </div>\n    }\n  </ion-toolbar>\n  @if (this.footerMenu() !== 'menu') {\n    <ion-toolbar mode=\"md\">\n      @if (this.footerMenu() === 'filter') {\n        <ion-buttons class=\"ion-justify-content-center\" style=\"margin: 0 8px\">\n          <ion-button fill=\"outline\" shape=\"round\" (click)=\"this.footerMenu.set('menu')\">\u623B\u308B</ion-button>\n        </ion-buttons>\n      } @else {\n        <ion-buttons slot=\"start\" style=\"min-width: 60px\">\n          @if (!requireSquare() || isCropped()) {\n            <ion-button (click)=\"closeCrop('cancel')\"><ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon></ion-button>\n          }</ion-buttons\n        ><ion-text class=\"footer-title\">\n          @if (footerMenu() === 'crop') {\n            {{ dictionary().crop }}\n          } @else if (footerMenu() === 'brightness') {\n            {{ dictionary().brightness }}\n          }</ion-text\n        ><ion-buttons slot=\"end\"\n          ><ion-button (click)=\"closeCrop('apply')\"\n            ><ion-icon name=\"checkmark-outline\" color=\"photo-editor-success\" slot=\"icon-only\"></ion-icon></ion-button\n        ></ion-buttons>\n      }\n    </ion-toolbar>\n  }\n</ion-footer>\n", styles: [":host{--editor-background: var(--ion-photo-editor-background, --ion-color-step-100, #2a2a2a);--editor-background-tint: var(--ion-photo-editor-background-tint, --ion-color-step-200, #414141);--editor-color: var(--ion-photo-editor-color, --ion-color-step-950, #f0f0f0);--editor-color-tint: var(--ion-photo-editor-color-tint, --ion-color-step-850, #dbdbdb);--ion-color-photo-editor-primary: var(--ion-photo-editor-primary, --ion-color-primary, #4d8dff);--ion-color-photo-editor-danger: var(--ion-photo-editor-danger, #f24c58);--ion-color-photo-editor-success: var(--ion-photo-editor-success, #2dd55b)}.ion-color-photo-editor-primary{--ion-color-base: var(--ion-color-photo-editor-primary)}.ion-color-photo-editor-danger{--ion-color-base: var(--ion-color-photo-editor-danger)}.ion-color-photo-editor-success{--ion-color-base: var(--ion-color-photo-editor-success)}ion-content,ion-toolbar,ion-header,ion-footer{background:var(--editor-background)!important;--background: var(--editor-background) !important}\n", "ion-content{--background: var(--editor-background)}ion-content>div{width:100%;height:100%;max-width:100%;max-height:100%;display:grid;align-items:center;justify-items:center}aside{display:flex;overflow-x:scroll;margin-top:16px;min-height:120px}aside ion-icon{color:var(--editor-color);border:1px solid var(--editor-background-tint);border-radius:50%;padding:16px}aside button{width:120px;display:block;flex:1;background:transparent;margin:0 8px 16px}aside button ion-text{display:block;color:var(--editor-color);margin-bottom:8px;font-size:.8rem}aside button span.image-filter-box{width:96px;height:64px;border-radius:8px;overflow:hidden;display:block;background-position:center,center;background-size:cover}ion-header ion-button,ion-footer ion-button{--color: var(--editor-color) !important}ion-footer ion-toolbar ion-text.footer-title{color:var(--editor-color)!important;display:block;text-align:center}ion-footer ion-toolbar ion-range{--bar-background: var(--editor-color);--bar-background-active: var(--editor-color);--bar-height: 2px;--bar-border-radius: 8px;--knob-background: var(--editor-color);--knob-size: 20px;--pin-background: none;--pin-color: var(--editor-color)}ion-footer ion-toolbar ion-buttons[slot=start] ion-button,ion-footer ion-toolbar ion-buttons[slot=end] ion-button{--background: var(--editor-background-tint) !important;--border-radius: 50%;margin:0 8px;min-width:32px;min-height:32px}ion-footer ion-toolbar ion-buttons.submenu-icon-buttons ion-button{margin:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonText, selector: "ion-text", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonRange, selector: "ion-range", inputs: ["activeBarStart", "color", "debounce", "disabled", "dualKnobs", "label", "labelPlacement", "max", "min", "mode", "name", "pin", "pinFormatter", "snaps", "step", "ticks", "value"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoEditorPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-editor-image', imports: [CommonModule, FormsModule, ...ionComponents], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header>\n  <ion-toolbar>\n    <ion-buttons slot=\"start\"\n      ><ion-button (click)=\"modalCtrl.dismiss()\"><ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon></ion-button\n    ></ion-buttons>\n    <ion-buttons slot=\"end\">\n      <ion-button color=\"photo-editor-primary\" fill=\"solid\" type=\"submit\" [disabled]=\"!['menu', 'filter'].includes(footerMenu())\" (click)=\"imageSave()\">\n        {{ dictionary().save }}\n      </ion-button>\n    </ion-buttons>\n  </ion-toolbar>\n</ion-header>\n\n<ion-content class=\"ion-padding\" [scrollY]=\"false\">\n  <div #imageEditor></div>\n</ion-content>\n<ion-footer>\n  <ion-toolbar>\n    @if (this.footerMenu() === 'menu') {\n      <aside class=\"ion-justify-content-center\">\n        <button (click)=\"footerMenu.set('crop')\">\n          <ion-text>{{ dictionary().crop }}</ion-text>\n          <ion-icon name=\"crop-outline\" size=\"large\"></ion-icon>\n        </button>\n        <button (click)=\"footerMenu.set('filter')\">\n          <ion-text>{{ dictionary().filter }}</ion-text>\n          <ion-icon name=\"color-filter-outline\" size=\"large\"></ion-icon>\n        </button>\n        <button (click)=\"footerMenu.set('brightness')\">\n          <ion-text>{{ dictionary().brightness }}</ion-text>\n          <ion-icon name=\"sunny-outline\" size=\"large\"></ion-icon>\n        </button>\n      </aside>\n    }\n\n    @if (this.footerMenu() === 'filter') {\n      <aside>\n        @for (item of filters(); track item) {\n          <button (click)=\"filterImage(item)\">\n            <ion-text>{{ item.name }}</ion-text>\n            <span class=\"image-filter-box\" [style.background-image]=\"'url(' + item.data + ')'\"></span>\n          </button>\n        }\n      </aside>\n    }\n\n    @if (this.footerMenu() === 'crop' && !requireSquare()) {\n      <ion-buttons class=\"ion-justify-content-center submenu-icon-buttons\">\n        <ion-button (click)=\"changeCrop('cover')\" [color]=\"currentCrop() === 'cover' ? 'success' : undefined\">\n          <ion-icon name=\"expand-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('16/9')\" [color]=\"currentCrop() === '16/9' ? 'success' : undefined\">\n          <ion-icon name=\"tablet-landscape-outline\" slot=\"icon-only\" style=\"transform: scale(1, 0.8)\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('1')\" [color]=\"currentCrop() === '1' ? 'success' : undefined\">\n          <ion-icon name=\"square-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"changeCrop('auto')\" [color]=\"currentCrop() === 'auto' ? 'success' : undefined\">\n          <ion-icon name=\"crop-outline\" slot=\"icon-only\"></ion-icon>\n        </ion-button>\n        <ion-button (click)=\"rotate()\"><ion-icon name=\"refresh-outline\" slot=\"icon-only\"></ion-icon></ion-button>\n      </ion-buttons>\n    }\n\n    @if (['brightness'].includes(this.footerMenu())) {\n      <div class=\"ion-padding ion-margin\">\n        <ion-range [pin]=\"true\" [min]=\"-100\" [max]=\"100\" (ionChange)=\"changeRange($any($event))\"></ion-range>\n      </div>\n    }\n  </ion-toolbar>\n  @if (this.footerMenu() !== 'menu') {\n    <ion-toolbar mode=\"md\">\n      @if (this.footerMenu() === 'filter') {\n        <ion-buttons class=\"ion-justify-content-center\" style=\"margin: 0 8px\">\n          <ion-button fill=\"outline\" shape=\"round\" (click)=\"this.footerMenu.set('menu')\">\u623B\u308B</ion-button>\n        </ion-buttons>\n      } @else {\n        <ion-buttons slot=\"start\" style=\"min-width: 60px\">\n          @if (!requireSquare() || isCropped()) {\n            <ion-button (click)=\"closeCrop('cancel')\"><ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon></ion-button>\n          }</ion-buttons\n        ><ion-text class=\"footer-title\">\n          @if (footerMenu() === 'crop') {\n            {{ dictionary().crop }}\n          } @else if (footerMenu() === 'brightness') {\n            {{ dictionary().brightness }}\n          }</ion-text\n        ><ion-buttons slot=\"end\"\n          ><ion-button (click)=\"closeCrop('apply')\"\n            ><ion-icon name=\"checkmark-outline\" color=\"photo-editor-success\" slot=\"icon-only\"></ion-icon></ion-button\n        ></ion-buttons>\n      }\n    </ion-toolbar>\n  }\n</ion-footer>\n", styles: [":host{--editor-background: var(--ion-photo-editor-background, --ion-color-step-100, #2a2a2a);--editor-background-tint: var(--ion-photo-editor-background-tint, --ion-color-step-200, #414141);--editor-color: var(--ion-photo-editor-color, --ion-color-step-950, #f0f0f0);--editor-color-tint: var(--ion-photo-editor-color-tint, --ion-color-step-850, #dbdbdb);--ion-color-photo-editor-primary: var(--ion-photo-editor-primary, --ion-color-primary, #4d8dff);--ion-color-photo-editor-danger: var(--ion-photo-editor-danger, #f24c58);--ion-color-photo-editor-success: var(--ion-photo-editor-success, #2dd55b)}.ion-color-photo-editor-primary{--ion-color-base: var(--ion-color-photo-editor-primary)}.ion-color-photo-editor-danger{--ion-color-base: var(--ion-color-photo-editor-danger)}.ion-color-photo-editor-success{--ion-color-base: var(--ion-color-photo-editor-success)}ion-content,ion-toolbar,ion-header,ion-footer{background:var(--editor-background)!important;--background: var(--editor-background) !important}\n", "ion-content{--background: var(--editor-background)}ion-content>div{width:100%;height:100%;max-width:100%;max-height:100%;display:grid;align-items:center;justify-items:center}aside{display:flex;overflow-x:scroll;margin-top:16px;min-height:120px}aside ion-icon{color:var(--editor-color);border:1px solid var(--editor-background-tint);border-radius:50%;padding:16px}aside button{width:120px;display:block;flex:1;background:transparent;margin:0 8px 16px}aside button ion-text{display:block;color:var(--editor-color);margin-bottom:8px;font-size:.8rem}aside button span.image-filter-box{width:96px;height:64px;border-radius:8px;overflow:hidden;display:block;background-position:center,center;background-size:cover}ion-header ion-button,ion-footer ion-button{--color: var(--editor-color) !important}ion-footer ion-toolbar ion-text.footer-title{color:var(--editor-color)!important;display:block;text-align:center}ion-footer ion-toolbar ion-range{--bar-background: var(--editor-color);--bar-background-active: var(--editor-color);--bar-height: 2px;--bar-border-radius: 8px;--knob-background: var(--editor-color);--knob-size: 20px;--pin-background: none;--pin-color: var(--editor-color)}ion-footer ion-toolbar ion-buttons[slot=start] ion-button,ion-footer ion-toolbar ion-buttons[slot=end] ion-button{--background: var(--editor-background-tint) !important;--border-radius: 50%;margin:0 8px;min-width:32px;min-height:32px}ion-footer ion-toolbar ion-buttons.submenu-icon-buttons ion-button{margin:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { requireSquare: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSquare", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], editorRef: [{ type: i0.ViewChild, args: ['imageEditor', { isSignal: true }] }], ionContent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => IonContent), { ...{ read: ElementRef }, isSignal: true }] }] } });
+
+class PhotoViewerPage {
+    constructor() {
+        this.imageUrls = input.required(...(ngDevMode ? [{ debugName: "imageUrls" }] : []));
+        this.index = input(0, { ...(ngDevMode ? { debugName: "index" } : {}), transform: coerceNumberProperty });
+        this.isCircle = input(false, { ...(ngDevMode ? { debugName: "isCircle" } : {}), transform: coerceBooleanProperty });
+        this.enableDelete = input(false, { ...(ngDevMode ? { debugName: "enableDelete" } : {}), transform: coerceBooleanProperty });
+        this.enableFooterSafeArea = input(false, { ...(ngDevMode ? { debugName: "enableFooterSafeArea" } : {}), transform: coerceBooleanProperty });
+        this.labels = input(...(ngDevMode ? [undefined, { debugName: "labels" }] : []));
+        this.setLabels = effect(() => {
+            if (this.labels()) {
+                this.dictionary.update((value) => ({ ...value, ...this.labels() }));
+            }
+        }, ...(ngDevMode ? [{ debugName: "setLabels" }] : []));
+        this.swiper = viewChild.required('swiper');
+        this.dictionary = signal(dictionaryForViewer(), ...(ngDevMode ? [{ debugName: "dictionary" }] : []));
+        this.watchSwipe$ = new Subscription();
+        this.modalCtrl = inject(ModalController);
+        this.el = inject(ElementRef);
+        register();
+        initializeViewerIcons();
+    }
+    async ngOnInit() {
+        waitToFindDom(this.el.nativeElement, 'swiper-container').then(() => {
+            const index = this.index();
+            const swiper = this.swiper();
+            Object.assign(swiper.nativeElement, {
+                modules: [Navigation, Zoom, IonicSlides],
+                initialSlide: index,
+                slidesPerView: 1,
+                pagination: {
+                    enabled: true,
+                    clickable: true,
+                },
+                zoom: true,
+            });
+            swiper.nativeElement.initialize();
+            swiper.nativeElement.swiper.zoom.enable();
+            swiper.nativeElement.swiper.activeIndex = index;
+            swiper.nativeElement.swiper.update();
+        });
+        this.watchSwipe$.add(fromEvent(this.el.nativeElement, 'touchstart')
+            .pipe(zipWith(fromEvent(this.el.nativeElement, 'touchend').pipe(withLatestFrom(fromEvent(this.el.nativeElement, 'touchmove')))), throttleTime(1))
+            .subscribe(([touchstart, [_, touchmove]]) => {
+            const touchstartClientX = touchstart.touches ? touchstart.touches[0].clientX : touchstart.detail[1].clientX;
+            const touchmoveClientX = touchmove.touches ? touchmove.touches[0].clientX : touchmove.detail[1].clientX;
+            const touchstartClientY = touchstart.touches ? touchstart.touches[0].clientY : touchstart.detail[1].clientY;
+            const touchmoveClientY = touchmove.touches ? touchmove.touches[0].clientY : touchmove.detail[1].clientY;
+            const xDiff = touchstartClientX - touchmoveClientX;
+            const yDiff = touchstartClientY - touchmoveClientY;
+            const slides = this.swiper().nativeElement.querySelectorAll('swiper-slide');
+            const isZoomed = Array.from(slides).find((slide) => {
+                return ['swiper-slide-zoomed', 'swiper-slide-active'].every((c) => slide.classList.contains(c));
+            });
+            const threshold = touchmove.touches ? -50 : -5;
+            if (!isZoomed && Math.abs(xDiff) < Math.abs(threshold) && yDiff < threshold && touchstart.timeStamp <= touchmove.timeStamp) {
+                this.watchSwipe$.unsubscribe();
+                this.modalCtrl.dismiss();
+            }
+        }));
+    }
+    ngOnDestroy() {
+        this.watchSwipe$.unsubscribe();
+    }
+    remove() {
+        this.modalCtrl.dismiss({
+            delete: {
+                index: this.swiper().nativeElement.swiper.activeIndex,
+                value: this.imageUrls()[this.swiper().nativeElement.swiper.activeIndex],
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoViewerPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.5", type: PhotoViewerPage, isStandalone: true, selector: "app-photo-image", inputs: { imageUrls: { classPropertyName: "imageUrls", publicName: "imageUrls", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, isCircle: { classPropertyName: "isCircle", publicName: "isCircle", isSignal: true, isRequired: false, transformFunction: null }, enableDelete: { classPropertyName: "enableDelete", publicName: "enableDelete", isSignal: true, isRequired: false, transformFunction: null }, enableFooterSafeArea: { classPropertyName: "enableFooterSafeArea", publicName: "enableFooterSafeArea", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "swiper", first: true, predicate: ["swiper"], descendants: true, isSignal: true }], ngImport: i0, template: "<ion-header [translucent]=\"true\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"modalCtrl.dismiss()\" class=\"viewer-close-button\">\n        <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    @if (enableDelete()) {\n      <ion-buttons slot=\"end\">\n        <ion-button color=\"photo-editor-danger\" fill=\"solid\" type=\"submit\" (click)=\"remove()\">{{ dictionary().delete }}</ion-button>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n  <swiper-container #swiper>\n    @for (url of imageUrls(); track url) {\n      <swiper-slide>\n        <div class=\"swiper-zoom-container\"><img [src]=\"url\" alt=\"\" [class.circle]=\"isCircle()\" /></div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n@if (enableFooterSafeArea()) {\n  <!-- use for safe area-->\n  <ion-footer>\n    <ion-toolbar style=\"--border-width: 0; --min-height: 0\"></ion-toolbar>\n  </ion-footer>\n}\n", styles: [":host{--editor-background: var(--ion-photo-editor-background, --ion-color-step-100, #2a2a2a);--editor-background-tint: var(--ion-photo-editor-background-tint, --ion-color-step-200, #414141);--editor-color: var(--ion-photo-editor-color, --ion-color-step-950, #f0f0f0);--editor-color-tint: var(--ion-photo-editor-color-tint, --ion-color-step-850, #dbdbdb);--ion-color-photo-editor-primary: var(--ion-photo-editor-primary, --ion-color-primary, #4d8dff);--ion-color-photo-editor-danger: var(--ion-photo-editor-danger, #f24c58);--ion-color-photo-editor-success: var(--ion-photo-editor-success, #2dd55b)}.ion-color-photo-editor-primary{--ion-color-base: var(--ion-color-photo-editor-primary)}.ion-color-photo-editor-danger{--ion-color-base: var(--ion-color-photo-editor-danger)}.ion-color-photo-editor-success{--ion-color-base: var(--ion-color-photo-editor-success)}ion-content,ion-toolbar,ion-header,ion-footer{background:var(--editor-background)!important;--background: var(--editor-background) !important}\n", "ion-button.viewer-close-button{--color: var(--editor-color) !important}img.circle{border-radius:50%;display:block;padding:16px}swiper-container{height:100%;max-height:100%}swiper-slide{height:100%;max-height:100%;display:flex;justify-content:center;align-items:center}swiper-slide img{display:block;object-fit:contain;max-width:100%;max-height:100%}\n"], dependencies: [{ kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { kind: "component", type: i1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { kind: "component", type: i1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "form", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { kind: "component", type: i1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { kind: "component", type: i1.IonContent, selector: "ion-content", inputs: ["color", "fixedSlotPlacement", "forceOverscroll", "fullscreen", "scrollEvents", "scrollX", "scrollY"] }, { kind: "component", type: i1.IonFooter, selector: "ion-footer", inputs: ["collapse", "mode", "translucent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoViewerPage, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-photo-image', imports: [...ionComponents], schemas: [CUSTOM_ELEMENTS_SCHEMA], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ion-header [translucent]=\"true\">\n  <ion-toolbar>\n    <ion-buttons slot=\"start\">\n      <ion-button (click)=\"modalCtrl.dismiss()\" class=\"viewer-close-button\">\n        <ion-icon name=\"close-outline\" slot=\"icon-only\"></ion-icon>\n      </ion-button>\n    </ion-buttons>\n    @if (enableDelete()) {\n      <ion-buttons slot=\"end\">\n        <ion-button color=\"photo-editor-danger\" fill=\"solid\" type=\"submit\" (click)=\"remove()\">{{ dictionary().delete }}</ion-button>\n      </ion-buttons>\n    }\n  </ion-toolbar>\n</ion-header>\n\n<ion-content [fullscreen]=\"true\">\n  <swiper-container #swiper>\n    @for (url of imageUrls(); track url) {\n      <swiper-slide>\n        <div class=\"swiper-zoom-container\"><img [src]=\"url\" alt=\"\" [class.circle]=\"isCircle()\" /></div>\n      </swiper-slide>\n    }\n  </swiper-container>\n</ion-content>\n\n@if (enableFooterSafeArea()) {\n  <!-- use for safe area-->\n  <ion-footer>\n    <ion-toolbar style=\"--border-width: 0; --min-height: 0\"></ion-toolbar>\n  </ion-footer>\n}\n", styles: [":host{--editor-background: var(--ion-photo-editor-background, --ion-color-step-100, #2a2a2a);--editor-background-tint: var(--ion-photo-editor-background-tint, --ion-color-step-200, #414141);--editor-color: var(--ion-photo-editor-color, --ion-color-step-950, #f0f0f0);--editor-color-tint: var(--ion-photo-editor-color-tint, --ion-color-step-850, #dbdbdb);--ion-color-photo-editor-primary: var(--ion-photo-editor-primary, --ion-color-primary, #4d8dff);--ion-color-photo-editor-danger: var(--ion-photo-editor-danger, #f24c58);--ion-color-photo-editor-success: var(--ion-photo-editor-success, #2dd55b)}.ion-color-photo-editor-primary{--ion-color-base: var(--ion-color-photo-editor-primary)}.ion-color-photo-editor-danger{--ion-color-base: var(--ion-color-photo-editor-danger)}.ion-color-photo-editor-success{--ion-color-base: var(--ion-color-photo-editor-success)}ion-content,ion-toolbar,ion-header,ion-footer{background:var(--editor-background)!important;--background: var(--editor-background) !important}\n", "ion-button.viewer-close-button{--color: var(--editor-color) !important}img.circle{border-radius:50%;display:block;padding:16px}swiper-container{height:100%;max-height:100%}swiper-slide{height:100%;max-height:100%;display:flex;justify-content:center;align-items:center}swiper-slide img{display:block;object-fit:contain;max-width:100%;max-height:100%}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imageUrls: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrls", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], isCircle: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCircle", required: false }] }], enableDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDelete", required: false }] }], enableFooterSafeArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableFooterSafeArea", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], swiper: [{ type: i0.ViewChild, args: ['swiper', { isSignal: true }] }] } });
+
+var PhotoEditorErrors;
+(function (PhotoEditorErrors) {
+    PhotoEditorErrors["initialize"] = "input dom is not found";
+    PhotoEditorErrors["cancel"] = "user canceled";
+    PhotoEditorErrors["type"] = "upload file is not image.";
+})(PhotoEditorErrors || (PhotoEditorErrors = {}));
+
+class PhotoFileService {
+    constructor() {
+        this.$photoMaxSize = signal(1000, ...(ngDevMode ? [{ debugName: "$photoMaxSize" }] : []));
+        this.actionSheetCtrl = inject(ActionSheetController);
+        this.platform = inject(Platform);
+        this.dictionary = signal(dictionaryForService(), ...(ngDevMode ? [{ debugName: "dictionary" }] : []));
+    }
+    set photoMaxSize(value) {
+        this.$photoMaxSize.set(value);
+    }
+    set labels(d) {
+        this.dictionary.update((value) => ({ ...value, ...d }));
+    }
+    async loadPhoto(limit) {
+        /**
+         * Using Input for browser
+         */
+        if (!this.platform.is('capacitor')) {
+            return this.getPictureFromBrowser();
+        }
+        const actionSheet = await this.actionSheetCtrl.create({
+            buttons: [
+                {
+                    text: this.dictionary().camera,
+                    handler: () => {
+                        actionSheet.dismiss('camera');
+                    },
+                },
+                {
+                    text: this.dictionary().album,
+                    handler: () => {
+                        actionSheet.dismiss('album');
+                    },
+                },
+                {
+                    text: this.dictionary().cancel,
+                    role: 'cancel',
+                },
+            ],
+        });
+        await actionSheet.present();
+        const { data } = await actionSheet.onDidDismiss();
+        if (!data) {
+            return Promise.reject(PhotoEditorErrors.cancel);
+        }
+        if (data === 'camera') {
+            const defaultCamera = {
+                quality: 100,
+                width: this.$photoMaxSize(),
+                allowEditing: false,
+                resultType: CameraResultType.DataUrl,
+                source: CameraSource.Camera,
+                presentationStyle: 'popover',
+            };
+            const image = await Camera.getPhoto(defaultCamera).catch(() => undefined);
+            if (!image?.dataUrl) {
+                return Promise.reject(PhotoEditorErrors.cancel);
+            }
+            if (!image.dataUrl.includes('capacitor://localhost')) {
+                return [image.dataUrl];
+            }
+            return Promise.all([image.dataUrl].map(async (image) => await this.loadPhotoFromFilePath(image)));
+        }
+        if (data === 'album') {
+            const images = await Camera.pickImages({
+                quality: 100,
+                width: this.$photoMaxSize(),
+                limit,
+                presentationStyle: 'popover',
+            }).catch(() => undefined);
+            if (!images) {
+                return Promise.reject(PhotoEditorErrors.cancel);
+            }
+            return Promise.all(images.photos.map(async (image) => await this.loadPhotoFromFilePath(image.webPath)));
+        }
+        // Not run on this line. This is for lint
+        return [];
+    }
+    getPictureFromBrowser() {
+        const inputFile = document.querySelector('input#browserPhotoUploader');
+        if (!inputFile) {
+            return Promise.reject(PhotoEditorErrors.initialize);
+        }
+        return new Promise((resolve, reject) => {
+            const cancelMethod = () => {
+                inputFile.removeEventListener('cancel', cancelMethod, false);
+                inputFile.removeEventListener('change', changeMethod, false);
+                reject(PhotoEditorErrors.cancel);
+            };
+            const changeMethod = (e) => {
+                inputFile.removeEventListener('cancel', cancelMethod, false);
+                inputFile.removeEventListener('change', changeMethod, false);
+                if (!e.target.files || !e.target.files[0]) {
+                    reject(PhotoEditorErrors.cancel);
+                }
+                const file = e.target.files[0];
+                const reader = new FileReader();
+                reader.onload = (() => {
+                    if (file.type.indexOf('image') < 0) {
+                        reject(PhotoEditorErrors.type);
+                    }
+                    return async (event) => {
+                        inputFile.value = '';
+                        const result = event.target.result;
+                        const data = await this.loadPhotoFromFilePath(result);
+                        resolve([data]);
+                    };
+                })();
+                reader.readAsDataURL(file);
+            };
+            inputFile.addEventListener('cancel', cancelMethod, false);
+            inputFile.addEventListener('change', changeMethod, false);
+            inputFile.click();
+        });
+    }
+    async loadPhotoFromFilePath(filePath) {
+        const defaultInstance = new ImageEditor(document.createElement('div'), {
+            cssMaxWidth: this.$photoMaxSize(),
+            cssMaxHeight: this.$photoMaxSize(),
+        });
+        const blob = await fetch(filePath).then((res) => res.blob());
+        const loaded = await defaultInstance.loadImageFromFile(new File([blob], 'data.png', { type: blob.type }));
+        const maxSize = Math.max(loaded.newWidth, loaded.newHeight);
+        const dataUrl = defaultInstance.toDataURL({
+            multiplier: this.$photoMaxSize() / maxSize,
+        });
+        defaultInstance.destroy();
+        return dataUrl;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoFileService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.5", ngImport: i0, type: PhotoFileService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/*
+ * Public API Surface of photo-editor
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { PhotoEditorPage, PhotoFileService, PhotoViewerPage };
+//# sourceMappingURL=rdlabo-ionic-angular-photo-editor.mjs.map