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

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

@@ -1,533 +0,0 @@
-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());
-        this.requireSquare = input(false, {
-            transform: coerceBooleanProperty,
-        });
-        this.labels = input(undefined);
-        this.setLabels = effect(() => {
-            if (this.labels()) {
-                this.dictionary.update((value) => ({ ...value, ...this.labels() }));
-            }
-        });
-        this.value = input.required();
-        this.editorRef = viewChild.required('imageEditor');
-        this.ionContent = viewChild.required(IonContent, { read: ElementRef });
-        this.filters = signal([]);
-        this.footerMenu = signal('menu');
-        this.currentCrop = signal('cover');
-        this.currentRotate = signal(0);
-        this.photoCrop = signal({
-            width: 0,
-            height: 0,
-        });
-        this.isCropped = signal(false);
-        this.adoptFilter = signal(undefined);
-        this.filterPreset = computed(() => filterPreset(this.dictionary()));
-        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: "20.0.0", ngImport: i0, type: PhotoEditorPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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=\"outline\" [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: "20.0.0", 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=\"outline\" [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: () => [] });
-
-class PhotoViewerPage {
-    constructor() {
-        this.imageUrls = input.required();
-        this.index = input(0, {
-            transform: coerceNumberProperty,
-        });
-        this.isCircle = input(false, {
-            transform: coerceBooleanProperty,
-        });
-        this.enableDelete = input(false, {
-            transform: coerceBooleanProperty,
-        });
-        this.enableFooterSafeArea = input(false, {
-            transform: coerceBooleanProperty,
-        });
-        this.labels = input();
-        this.setLabels = effect(() => {
-            if (this.labels()) {
-                this.dictionary.update((value) => ({ ...value, ...this.labels() }));
-            }
-        });
-        this.swiper = viewChild.required('swiper');
-        this.dictionary = signal(dictionaryForViewer());
-        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: "20.0.0", ngImport: i0, type: PhotoViewerPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.0", 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=\"outline\" (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: "20.0.0", 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=\"outline\" (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: () => [] });
-
-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);
-        this.actionSheetCtrl = inject(ActionSheetController);
-        this.platform = inject(Platform);
-        this.dictionary = signal(dictionaryForService());
-    }
-    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: "20.0.0", ngImport: i0, type: PhotoFileService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.0", ngImport: i0, type: PhotoFileService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.0", 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