@libs-ui/components-image-editor 0.2.161

package/fesm2022/libs-ui-components-image-editor.mjs

@@ -0,0 +1,994 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, input, model, viewChild, output, inject, Optional, Inject, ChangeDetectionStrategy } from '@angular/core';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
+import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
+import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
+import { get, convertBase64ToBlob, getLabelBySizeFile, convertBlobToFile, isNil, LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, fromEvent } from 'rxjs';
+import { takeUntil, tap, mergeMap } from 'rxjs/operators';
+
+const cropRationItems = () => {
+    return [
+        {
+            key: 'free',
+            icon: 'libs-ui-icon-customize-image-outline'
+        },
+        {
+            key: '1:1',
+            value: 1,
+            icon: 'libs-ui-icon-ratio-1-1'
+        },
+        {
+            key: '2:3',
+            value: 2 / 3,
+            icon: 'libs-ui-icon-ratio-2-3'
+        },
+        {
+            key: '3:2',
+            value: 3 / 2,
+            icon: 'libs-ui-icon-ratio-3-2'
+        },
+        {
+            key: '3:4',
+            value: 3 / 4,
+            icon: 'libs-ui-icon-ratio-3-4'
+        },
+        {
+            key: '4:3',
+            value: 4 / 3,
+            icon: 'libs-ui-icon-ratio-4-3'
+        },
+        {
+            key: '9:16',
+            value: 9 / 16,
+            icon: 'libs-ui-icon-ratio-9-16'
+        },
+        {
+            key: '16:9',
+            value: 16 / 9,
+            icon: 'libs-ui-icon-ratio-16-9'
+        }
+    ];
+};
+const getMimeTypeFromSrc = (src) => {
+    if (!src) {
+        return undefined;
+    }
+    const match = /^data:(.*?);/.exec(src);
+    if (match) {
+        return match[1];
+    }
+    const srcSplit = src.split('.');
+    const mineType = srcSplit[srcSplit.length - 1];
+    return `image/${(mineType.toLowerCase()) === 'jpg' ? 'jpeg' : mineType}`;
+};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const getDataUrl = (canvas, mimetype, src) => {
+    const mimeTypeBySrc = getMimeTypeFromSrc(src);
+    if (mimetype || mimeTypeBySrc) {
+        return canvas.toDataURL(mimetype || mimeTypeBySrc);
+    }
+    return canvas.toDataURL();
+};
+const getWidthHeightResizeCropFollow = (ratioValue, width, height, maxWidth, maxHeight, minWidth, minHeight) => {
+    height = Math.min(height, maxHeight);
+    height = Math.max(minHeight, height);
+    if (ratioValue) {
+        width = height * ratioValue;
+        width = Math.min(maxWidth, width);
+        width = Math.max(minWidth, width);
+        height = width / ratioValue;
+    }
+    width = Math.min(maxWidth, width);
+    width = Math.max(minWidth, width);
+    return [width, height];
+};
+const getCropRectImage = (rectClip, imgWidth, imgHeight, scale) => {
+    return {
+        left: Math.max(rectClip.left * scale, 0),
+        top: Math.max(rectClip.top * scale, 0),
+        width: rectClip.width * scale,
+        height: rectClip.height * scale
+    };
+};
+const getStylesOfElement = (element, fields) => {
+    return fields?.map(field => parseFloat(get(element, field) || '0'));
+};
+
+class LibsUiComponentsImageEditorResizeComponent {
+    buttonsFooter;
+    image = new Image();
+    originFileSize;
+    currentFileSize;
+    inputValidFunctionControl;
+    resizeData;
+    originWidth;
+    originHeight;
+    src;
+    zIndex;
+    mimetype;
+    outClose = new EventEmitter();
+    outSave = new EventEmitter();
+    constructor() {
+        this.buttonsFooter = [{
+                type: 'button-third',
+                label: 'i18n_cancel',
+                action: async () => this.outClose.emit()
+            }, {
+                label: 'i18n_save',
+                action: async () => {
+                    this.outSave.emit(this.resizeData);
+                    this.outClose.emit();
+                }
+            }];
+        this.inputValidFunctionControl = [];
+    }
+    async ngOnInit() {
+        const fileSize = await this.getFileSize();
+        this.currentFileSize = fileSize;
+        this.originFileSize = fileSize;
+    }
+    async handlerResizeRatio() {
+        let ratio = parseInt(`${this.resizeData.ratio}`);
+        if (!ratio || ratio < 0) {
+            return;
+        }
+        if (ratio > 100) {
+            ratio = 100;
+            this.resizeData.ratio = ratio;
+        }
+        this.resizeData.width = Math.max(parseInt(`${this.originWidth * ratio / 100}`), 1);
+        this.resizeData.height = Math.max(parseInt(`${this.originHeight * ratio / 100}`), 1);
+        // this.inputValidFunctionControl.forEach(item => item.detectChanges());
+        this.currentFileSize = await this.getFileSize();
+    }
+    getFileSize() {
+        return new Promise((resolve) => {
+            this.image.onload = () => {
+                const canvas = document.createElement('canvas');
+                canvas.width = this.resizeData.width;
+                canvas.height = this.resizeData.height;
+                const ctx = canvas.getContext('2d');
+                if (ctx) {
+                    ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height);
+                }
+                const src = getDataUrl(canvas, this.mimetype, this.src);
+                const file = convertBase64ToBlob(src);
+                resolve(getLabelBySizeFile(convertBlobToFile(file, Date.now().toLocaleString()).size));
+            };
+            this.image.src = this.src;
+        });
+    }
+    handlerResizeWidth() {
+        this.processResizeWidthOrHeight('width', 'height', this.originWidth, this.originHeight);
+    }
+    handlerResizeHeight() {
+        this.processResizeWidthOrHeight('height', 'width', this.originHeight, this.originWidth);
+    }
+    async processResizeWidthOrHeight(resizeBy, fieldResize, originByValue, originOtherValue) {
+        const value = parseInt(`${this.resizeData[resizeBy]}`);
+        if (!value || value > originByValue) {
+            return;
+        }
+        this.resizeData[fieldResize] = Math.max(parseInt(`${originOtherValue * value / originByValue}`), 1);
+        this.resizeData.ratio = Math.max(parseInt(`${100 * value / originByValue}`), 1);
+        this.currentFileSize = await this.getFileSize();
+    }
+    handlerInputValidFunctionControl(event) {
+        this.inputValidFunctionControl.push(event);
+    }
+    handlerEvent(event) {
+        if (event === 'close') {
+            this.outClose.emit();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorResizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LibsUiComponentsImageEditorResizeComponent, isStandalone: true, selector: "libs-ui-components-image_editor-resize", inputs: { resizeData: "resizeData", originWidth: "originWidth", originHeight: "originHeight", src: "src", zIndex: "zIndex", mimetype: "mimetype" }, outputs: { outClose: "outClose", outSave: "outSave" }, ngImport: i0, template: "<libs_ui-components-modal [headerConfig]=\"{ignoreHeaderTheme: true}\"\n  [mode]=\"'center'\"\n  [width]=\"'500px'\"\n  [height]=\"'auto'\"\n  [title]=\"'i18n_resize' | translate\"\n  [zIndex]=\"zIndex\"\n  [buttonsFooter]=\"buttonsFooter\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom w-full h-full\">\n    <div class=\"flex items-center\">\n      <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n        {{ 'i18n_ratio_size' | translate }} (%)\n      </div>\n      <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n        [classIncludeInput]=\"'w-[132px]'\"\n        [dataType]=\"'int'\"\n        [fieldNameBind]=\"'ratio'\"\n        [(item)]=\"resizeData\"\n        [minValueNumber]=\"1\"\n        [maxValueNumber]=\"100\"\n        [valueUpDownNumber]=\"1\"\n        [validRequired]=\"{isRequired: true}\"\n        [ignoreShowError]=\"true\"\n        (outValueChange)=\"handlerResizeRatio()\"\n        (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n    </div>\n    <div class=\"mt-[16px] relative\">\n      <div class=\"flex items-center\">\n        <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n          {{ 'i18n_width' | translate }}\n        </div>\n        <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n          [classIncludeInput]=\"'w-[102px]'\"\n          [dataType]=\"'int'\"\n          [maxValueNumber]=\"originWidth\"\n          [minValueNumber]=\"1\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"resizeData\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          (outValueChange)=\"handlerResizeWidth()\"\n          (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n      </div>\n      <div class=\"flex items-center mt-[8px]\">\n        <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n          {{ 'i18n_length' | translate }}\n        </div>\n        <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n          [classIncludeInput]=\"'w-[102px]'\"\n          [dataType]=\"'int'\"\n          [minValueNumber]=\"1\"\n          [maxValueNumber]=\"originHeight\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"resizeData\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          (outValueChange)=\"handlerResizeHeight()\"\n          (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n      </div>\n      <div class=\"absolute flex items-center left-[236px] top-[14px]\">\n        <div\n          class=\"w-[20px] h-[44px] libs-ui-border-top-general libs-ui-border-right-general libs-ui-border-bottom-general\">\n        </div>\n        <div class=\"ml-[6px] text-[#9ca2ad] libs-ui-icon-lock\"></div>\n      </div>\n    </div>\n    <div class=\"mt-[16px]\">\n      <div class=\"libs-ui-font-h6m text-[#6a7383] mb-[8px]\">{{ 'i18n_size_photo' | translate }}</div>\n      <div class=\"libs-ui-font-h5r rounded-[4px] py-[8px] px-[16px] bg-[#f8f9fa] text-[#9ca2ad]\">\n        {{ 'i18n_file_size_compare_when_resize' | translate:{current_size: currentFileSize, original_size: originFileSize} }}\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorResizeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs-ui-components-image_editor-resize', standalone: true, imports: [
+                        TranslateModule, LibsUiComponentsModalComponent, LibsUiComponentsInputsValidComponent
+                    ], template: "<libs_ui-components-modal [headerConfig]=\"{ignoreHeaderTheme: true}\"\n  [mode]=\"'center'\"\n  [width]=\"'500px'\"\n  [height]=\"'auto'\"\n  [title]=\"'i18n_resize' | translate\"\n  [zIndex]=\"zIndex\"\n  [buttonsFooter]=\"buttonsFooter\"\n  (outEvent)=\"handlerEvent($event)\">\n  <div class=\"libs-ui-modal-body-custom w-full h-full\">\n    <div class=\"flex items-center\">\n      <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n        {{ 'i18n_ratio_size' | translate }} (%)\n      </div>\n      <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n        [classIncludeInput]=\"'w-[132px]'\"\n        [dataType]=\"'int'\"\n        [fieldNameBind]=\"'ratio'\"\n        [(item)]=\"resizeData\"\n        [minValueNumber]=\"1\"\n        [maxValueNumber]=\"100\"\n        [valueUpDownNumber]=\"1\"\n        [validRequired]=\"{isRequired: true}\"\n        [ignoreShowError]=\"true\"\n        (outValueChange)=\"handlerResizeRatio()\"\n        (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n    </div>\n    <div class=\"mt-[16px] relative\">\n      <div class=\"flex items-center\">\n        <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n          {{ 'i18n_width' | translate }}\n        </div>\n        <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n          [classIncludeInput]=\"'w-[102px]'\"\n          [dataType]=\"'int'\"\n          [maxValueNumber]=\"originWidth\"\n          [minValueNumber]=\"1\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"resizeData\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          (outValueChange)=\"handlerResizeWidth()\"\n          (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n      </div>\n      <div class=\"flex items-center mt-[8px]\">\n        <div class=\"libs-ui-font-h7r mr-[4px] text-[#6a7383] w-[100px] shrink-0\">\n          {{ 'i18n_length' | translate }}\n        </div>\n        <libs_ui-components-inputs-valid [ignoreWidthInput100]=\"true\"\n          [classIncludeInput]=\"'w-[102px]'\"\n          [dataType]=\"'int'\"\n          [minValueNumber]=\"1\"\n          [maxValueNumber]=\"originHeight\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"resizeData\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          (outValueChange)=\"handlerResizeHeight()\"\n          (outFunctionsControl)=\"handlerInputValidFunctionControl($event)\" />\n      </div>\n      <div class=\"absolute flex items-center left-[236px] top-[14px]\">\n        <div\n          class=\"w-[20px] h-[44px] libs-ui-border-top-general libs-ui-border-right-general libs-ui-border-bottom-general\">\n        </div>\n        <div class=\"ml-[6px] text-[#9ca2ad] libs-ui-icon-lock\"></div>\n      </div>\n    </div>\n    <div class=\"mt-[16px]\">\n      <div class=\"libs-ui-font-h6m text-[#6a7383] mb-[8px]\">{{ 'i18n_size_photo' | translate }}</div>\n      <div class=\"libs-ui-font-h5r rounded-[4px] py-[8px] px-[16px] bg-[#f8f9fa] text-[#9ca2ad]\">\n        {{ 'i18n_file_size_compare_when_resize' | translate:{current_size: currentFileSize, original_size: originFileSize} }}\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n" }]
+        }], ctorParameters: () => [], propDecorators: { resizeData: [{
+                type: Input,
+                args: [{ required: true }]
+            }], originWidth: [{
+                type: Input,
+                args: [{ required: true }]
+            }], originHeight: [{
+                type: Input,
+                args: [{ required: true }]
+            }], src: [{
+                type: Input,
+                args: [{ required: true }]
+            }], zIndex: [{
+                type: Input
+            }], mimetype: [{
+                type: Input
+            }], outClose: [{
+                type: Output
+            }], outSave: [{
+                type: Output
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class LibsUiComponentsImageEditorComponent {
+    linkImageError;
+    loading = signal(false);
+    loadingImage = signal(true);
+    changed = signal(false);
+    originWidth = signal(0);
+    originHeight = signal(0);
+    cropRatioItems = signal(cropRationItems());
+    cropRatioItemSelected = signal('');
+    cropSize = signal({ width: 20, height: 20 });
+    resizeData = signal({ ratio: 100, width: 600, height: 800 });
+    dragGridCrop = signal(false);
+    image = new Image();
+    canvas = document.createElement('canvas');
+    containerHeight = signal(800);
+    containerWidth = signal(1200);
+    imgContainerRect = signal({ top: 0, left: 0, width: 0, height: 0 });
+    rectClip = signal({ top: 0, left: 0, right: 0, bottom: 0, width: 0, height: 0 });
+    resizeState = signal('none');
+    moveState = signal('none');
+    startMouseDim = signal({ clientX: 0, clientY: 0, width: 0, height: 0, top: 0, left: 0, imageTop: 0, imageLeft: 0, imageWidth: 0, imageHeight: 0 });
+    dataUrlOrigin = signal('');
+    ratioValue = signal(0);
+    minHeight = 20;
+    minWidth = 20;
+    onDestroy = new Subject();
+    resizeComponentRef;
+    modeShowButton = input('save-file');
+    mimetype = input();
+    zIndex = input(1200);
+    imgSrc = model.required();
+    originUrl = input();
+    nameFile = input();
+    hasZoom = input(false);
+    aspectRatio = model();
+    requiredCropFollowRatio = input(false);
+    imageOrigin = viewChild.required('imageOrigin');
+    imageClip = viewChild.required('imageClip');
+    imageEditorContainer = viewChild.required('imageEditorContainer');
+    imageContainer = viewChild.required('imageContainer');
+    cropArea = viewChild.required('cropArea');
+    cropTL = viewChild.required('cropTL');
+    cropBL = viewChild.required('cropBL');
+    cropBR = viewChild.required('cropBR');
+    cropTR = viewChild.required('cropTR');
+    cropLineVL = viewChild.required('cropLineVL');
+    cropLineVR = viewChild.required('cropLineVR');
+    cropLineHT = viewChild.required('cropLineHT');
+    cropLineHB = viewChild.required('cropLineHB');
+    circleTL = viewChild.required('circleTL');
+    circleTR = viewChild.required('circleTR');
+    circleBL = viewChild.required('circleBL');
+    circleBR = viewChild.required('circleBR');
+    outClose = output();
+    outSaveFile = output();
+    outFunctionsControl = output();
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
+    constructor(linkImageError) {
+        this.linkImageError = linkImageError;
+    }
+    ngAfterViewInit() {
+        if (this.aspectRatio()) {
+            this.dragGridCrop.set(true);
+            const aspectRatioFound = this.cropRatioItems().find(item => item.key === this.aspectRatio()?.key);
+            this.cropRatioItemSelected.set(aspectRatioFound?.key || this.cropRatioItems()[0].key);
+            this.updateOriginImageSize();
+            this.changedImage(true);
+        }
+        this.updateModalSize();
+        this.initData();
+        this.initMouseEvent();
+        this.outFunctionsControl.emit({
+            cropImage: this.cropImage.bind(this),
+            setLoadingState: (loading) => this.loading.set(loading)
+        });
+    }
+    handlerImageLoaded() {
+        setTimeout(() => {
+            this.updateModalSize();
+            this.loadingImage.set(false);
+        }, 500);
+    }
+    handlerImageError(e) {
+        console.log('e', e);
+        e.target.src = this.linkImageError;
+    }
+    updateModalSize() {
+        const maxHeight = window.innerHeight - 100;
+        const maxWidth = window.innerWidth - 400;
+        this.containerHeight.set(maxHeight - 124);
+        this.containerWidth.set(maxWidth - 384);
+        this.updateOriginImageSize();
+    }
+    initData() {
+        this.imgContainerRect.set(this.imageContainer().nativeElement.getBoundingClientRect());
+        this.image.setAttribute('crossorigin', 'anonymous');
+        this.image.onload = () => {
+            this.imgContainerRect.set(this.imageContainer().nativeElement.getBoundingClientRect());
+            this.canvas.height = this.image.height;
+            this.canvas.width = this.image.width;
+            this.originHeight.set(this.image.height);
+            this.originWidth.set(this.image.width);
+            this.updateOriginImageSize();
+            this.canvas.getContext('2d')?.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
+            this.dataUrlOrigin.set(getDataUrl(this.canvas, this.mimetype(), this.image.src));
+            this.imgSrc.set(this.dataUrlOrigin());
+        };
+        this.image.src = this.imgSrc();
+    }
+    initMouseEvent() {
+        const mouseUp = this.initEvent({ nativeElement: document }, 'mouseup', { callStopPropagation: true, callPreventDefault: true }, undefined, () => this.handlerMouseup());
+        const mouseMove = this.initEvent({ nativeElement: document }, 'mousemove', { callStopPropagation: true, callPreventDefault: true }).pipe(takeUntil(mouseUp));
+        this.initEvent({ nativeElement: document }, 'wheel', { callStopPropagation: true }, undefined, (e) => this.handlerMousewheel(e)).subscribe();
+        this.initEvent({ nativeElement: window }, 'resize', {}, undefined, () => this.updateModalSize()).subscribe();
+        this.initEvent(this.imageContainer(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => this.handlerImageContainerMousedown(e)).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropTL(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'TL'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropBL(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'BL'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropBR(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'BR'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropTR(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'TR'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropLineVL(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'VL'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropLineVR(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'VR'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropLineHT(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'HT'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropLineHB(), 'mousedown', { callStopPropagation: true, callPreventDefault: true }, mouseMove, (e) => { this.handlerCropResize(e, 'HB'); }).subscribe((e) => this.handlerMousemove(e));
+        this.initEvent(this.cropArea(), 'mousedown', {}, undefined, (e) => this.handlerMousedownCropArea(e)).subscribe((e) => this.handlerMousemove(e));
+    }
+    initEvent(element, eventName, flag, obsMerge, callback) {
+        const obs = fromEvent(element.nativeElement, eventName).pipe(tap((e) => {
+            if (flag.callStopPropagation && e?.stopPropagation) {
+                e.stopPropagation();
+            }
+            if (flag.callPreventDefault && e?.preventDefault) {
+                e.preventDefault();
+            }
+            if (callback) {
+                callback(e);
+            }
+        }), takeUntil(this.onDestroy));
+        if (obsMerge) {
+            return obs.pipe(mergeMap(() => obsMerge), (takeUntil(this.onDestroy)));
+        }
+        return obs;
+    }
+    ;
+    updateOriginImageSize() {
+        let width = this.originWidth();
+        let height = this.originHeight();
+        const ratio = width / height;
+        if (width >= height) {
+            width = Math.min(this.containerWidth(), width);
+            height = Math.min(width / ratio, this.containerHeight());
+            width = height * ratio;
+        }
+        else {
+            height = Math.min(this.containerHeight(), height);
+            width = height * ratio;
+        }
+        this.setImagePosition(width, height);
+        this.updateCropAreaPos();
+        this.updateRectClipPos();
+    }
+    setImagePosition(width, height) {
+        const left = this.containerWidth() / 2 - width / 2;
+        const top = this.containerHeight() / 2 - height / 2;
+        const styles = { width, height, top, left, display: 'block' };
+        this.setStylesElements(this.imageOrigin(), styles);
+        this.setStylesElements(this.imageClip(), styles);
+        this.setCirclePosition(styles);
+    }
+    setCirclePosition(styles) {
+        this.setStylesElements(this.circleTL(), { top: (styles.top || 0) - 5, left: (styles.left || 0) - 5 });
+        this.setStylesElements(this.circleTR(), { top: (styles.top || 0) - 5, left: (styles.left || 0) + (styles.width || 0) - 10 });
+        this.setStylesElements(this.circleBL(), { top: (styles.top || 0) + (styles.height || 0) - 10, left: (styles.left || 0) - 5 });
+        this.setStylesElements(this.circleBR(), { top: (styles.top || 0) + (styles.height || 0) - 10, left: (styles.left || 0) + (styles.width || 0) - 10 });
+    }
+    updateCropAreaPos() {
+        const [imgTop, imgLeft, imgWidth, imgHeight] = getStylesOfElement(this.imageClip().nativeElement, ['style.top', 'style.left', 'offsetWidth', 'offsetHeight']);
+        const rectImg = {
+            top: Math.max(0, imgTop),
+            left: Math.max(0, imgLeft),
+            width: imgWidth,
+            height: imgHeight
+        };
+        rectImg.width = Math.min(imgWidth, this.containerWidth() - imgLeft);
+        if (imgLeft < 0) {
+            rectImg.width = Math.min(imgWidth + imgLeft, this.containerWidth());
+        }
+        rectImg.height = Math.min(imgHeight, this.containerHeight() - imgTop);
+        if (imgTop < 0) {
+            rectImg.height = Math.min(imgTop + imgHeight, this.containerHeight());
+        }
+        this.ratioValue.set(this.getCropRatioValue());
+        if (!this.ratioValue()) {
+            this.setStylesElements(this.cropArea(), rectImg);
+            return;
+        }
+        let width = rectImg.width;
+        let height = width / this.ratioValue();
+        width = Math.min(rectImg.width, width);
+        height = width / this.ratioValue();
+        height = Math.min(rectImg.height, height);
+        width = height * this.ratioValue();
+        const top = rectImg.top + (rectImg.height - height) / 2;
+        const left = rectImg.left + (rectImg.width - width) / 2;
+        this.setStylesElements(this.cropArea(), { width, height, top, left });
+    }
+    getCropRatioValue() {
+        const cropRatio = this.aspectRatio() || this.cropRatioItems().find(item => item.key === this.cropRatioItemSelected());
+        if (!cropRatio) {
+            return this.originWidth() / this.originHeight();
+        }
+        return cropRatio.value ?? 0;
+    }
+    updateRectClipPos() {
+        const reactClip = this.getRectClipImage();
+        this.imageClip().nativeElement.style.clip = `rect(${reactClip.top}px, ${reactClip.right}px, ${reactClip.bottom}px, ${reactClip.left}px)`;
+    }
+    getRectClipImage() {
+        const imageRect = this.imageClip().nativeElement.getBoundingClientRect();
+        if (!imageRect.width) {
+            return this.rectClip();
+        }
+        const cropRect = this.cropArea().nativeElement.getBoundingClientRect();
+        const width = Math.round(cropRect.width);
+        const height = Math.round(cropRect.height);
+        const left = cropRect.left - imageRect.left;
+        const top = cropRect.top - imageRect.top;
+        const right = Math.round(left + width);
+        const bottom = Math.round(top + height);
+        const ratio = this.originWidth() / imageRect.width;
+        this.rectClip.set({ left, top, right, bottom, width, height });
+        this.cropSize.set({
+            height: top >= 0 ? (Math.round((bottom - top) * ratio)) : (Math.floor((bottom - top) * ratio)),
+            width: top >= 0 ? (Math.round(((right - left) * (this.ratioValue() ?? 1)) * ratio)) : (Math.floor(((right - left) * (this.ratioValue() ?? 1)) * ratio))
+        });
+        return this.rectClip();
+    }
+    handlerMousemove(e) {
+        const typeState = ['BL', 'TL', 'TR', 'BR', 'VL', 'VR', 'HT', 'HB'];
+        const methodName = `resizeCropFollow${this.resizeState()}Dir`; // resizeCropFollowBLDir, resizeCropFollowTLDir, resizeCropFollowTRDir, resizeCropFollowBRDir, resizeCropFollowVLDir, resizeCropFollowVRDir, resizeCropFollowHTDir, resizeCropFollowHBDir
+        if (typeState.includes(this.resizeState())) {
+            this[methodName](e);
+        }
+        switch (this.moveState()) {
+            case 'clip':
+                this.moveClipArea(e);
+                break;
+            case 'image':
+                this.moveImage(e);
+                break;
+        }
+        this.changedImage(true);
+    }
+    resizeCropFollowBLDir = (e) => {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? -momentY * this.ratioValue() : e.clientX - this.startMouseDim().clientX;
+        const maxHeight = this.startMouseDim().imageTop + this.startMouseDim().imageHeight - this.startMouseDim().top;
+        const maxWidth = this.startMouseDim().left + this.startMouseDim().width - this.startMouseDim().imageLeft;
+        let { width, height, left } = this.getRectResizeCropFollow({ width: -1, height: 1, left: 1, top: 0 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        left = this.startMouseDim().left + this.startMouseDim().width - width;
+        this.setStylesElements(this.cropArea(), { left, height, width }, true);
+    };
+    resizeCropFollowTLDir = (e) => {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? this.ratioValue() * momentY : e.clientX - this.startMouseDim().clientX;
+        const maxHeight = this.startMouseDim().top + this.startMouseDim().height - this.startMouseDim().imageTop;
+        const maxWidth = this.startMouseDim().left + this.startMouseDim().width - this.startMouseDim().imageLeft;
+        let { width, height, top, left } = this.getRectResizeCropFollow({ width: -1, height: -1, left: 1, top: 1 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        left = this.startMouseDim().left + this.startMouseDim().width - width;
+        top = this.startMouseDim().top + this.startMouseDim().height - height;
+        this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
+    };
+    resizeCropFollowTRDir = (e) => {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? -momentY * this.ratioValue() : e.clientX - this.startMouseDim().clientX;
+        const maxHeight = this.startMouseDim().top + this.startMouseDim().height - this.startMouseDim().imageTop;
+        const maxWidth = this.startMouseDim().imageLeft + this.startMouseDim().imageWidth - this.startMouseDim().left;
+        let { width, height, top } = this.getRectResizeCropFollow({ width: 1, height: -1, left: 0, top: 1 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        top = this.startMouseDim().top + this.startMouseDim().height - height;
+        this.setStylesElements(this.cropArea(), { top, height, width }, true);
+    };
+    resizeCropFollowBRDir(e) {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? momentY * this.ratioValue() : e.clientX - this.startMouseDim().clientX;
+        const maxHeight = this.startMouseDim().imageTop + this.startMouseDim().imageHeight - this.startMouseDim().top;
+        const maxWidth = this.startMouseDim().imageLeft + this.startMouseDim().imageWidth - this.startMouseDim().left;
+        let { width, height } = this.getRectResizeCropFollow({ width: 1, height: 1, left: 0, top: 0 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        this.setStylesElements(this.cropArea(), { height, width }, true);
+    }
+    resizeCropFollowVLDir = (e) => {
+        const momentX = e.clientX - this.startMouseDim().clientX;
+        const momentY = this.ratioValue() ? momentX / this.ratioValue() : 0;
+        const maxHeight = this.startMouseDim().top + this.startMouseDim().height - this.startMouseDim().imageTop;
+        const maxWidth = this.startMouseDim().left + this.startMouseDim().width - this.startMouseDim().imageLeft;
+        let { width, height, top, left } = this.getRectResizeCropFollow({ width: -1, height: -1, left: 1, top: 1 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        left = this.startMouseDim().left + this.startMouseDim().width - width;
+        top = this.startMouseDim().top + this.startMouseDim().height - height;
+        this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
+    };
+    resizeCropFollowVRDir = (e) => {
+        const momentX = e.clientX - this.startMouseDim().clientX;
+        const momentY = this.ratioValue() ? -momentX / this.ratioValue() : 0;
+        const maxHeight = this.startMouseDim().top + this.startMouseDim().height - this.startMouseDim().imageTop;
+        const maxWidth = this.startMouseDim().imageLeft + this.startMouseDim().imageWidth - this.startMouseDim().left;
+        let { width, height, top } = this.getRectResizeCropFollow({ width: 1, height: -1, left: 0, top: 1 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        top = this.startMouseDim().top + this.startMouseDim().height - height;
+        this.setStylesElements(this.cropArea(), { top, height, width }, true);
+    };
+    resizeCropFollowHTDir = (e) => {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? momentY * this.ratioValue() : 0;
+        const maxWidth = this.startMouseDim().width + this.startMouseDim().left - this.startMouseDim().imageLeft;
+        const maxHeight = this.startMouseDim().top + this.startMouseDim().height - this.startMouseDim().imageTop;
+        let { width, height, top, left } = this.getRectResizeCropFollow({ width: -1, height: -1, left: 1, top: 1 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        top = this.startMouseDim().top + this.startMouseDim().height - height;
+        left = this.startMouseDim().left + this.startMouseDim().width - width;
+        this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
+    };
+    resizeCropFollowHBDir = (e) => {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = this.ratioValue() ? momentY * this.ratioValue() : 0;
+        const maxHeight = this.startMouseDim().imageTop + this.startMouseDim().imageHeight - this.startMouseDim().top;
+        const maxWidth = this.startMouseDim().width + this.startMouseDim().left - this.startMouseDim().imageLeft;
+        let { width, height, left } = this.getRectResizeCropFollow({ width: 1, height: 1, left: -1, top: 0 }, momentX, momentY);
+        [width, height] = getWidthHeightResizeCropFollow(this.ratioValue(), width, height, maxWidth, maxHeight, this.minWidth, this.minHeight);
+        left = this.startMouseDim().left + this.startMouseDim().width - width;
+        this.setStylesElements(this.cropArea(), { height, left, width }, true);
+    };
+    getRectResizeCropFollow(ratio, momentX, momentY) {
+        const width = this.startMouseDim().width + momentX * ratio.width;
+        const height = this.startMouseDim().height + momentY * ratio.height;
+        const top = this.startMouseDim().top + momentY * ratio.top;
+        const left = this.startMouseDim().left + momentX * ratio.left;
+        return { width, height, left, top };
+    }
+    handlerMouseup() {
+        this.imageContainer().nativeElement.classList.remove('cursor-move');
+        this.cropArea().nativeElement.classList.remove('cursor-move');
+        this.resizeState.set('none');
+        this.moveState.set('none');
+    }
+    handlerMousewheel(event) {
+        if (!this.hasZoom()) {
+            return;
+        }
+        if (event.deltaY < 0) {
+            this.zoomImage(1 / 1.1);
+            return;
+        }
+        this.zoomImage(1.1);
+    }
+    handlerImageContainerMousedown(e) {
+        if (this.resizeState() === 'none' && this.moveState() === 'none') {
+            this.moveState.set('image');
+            this.handlerMousedown(e);
+        }
+        return false;
+    }
+    handlerCropResize(e, resizeType) {
+        this.resizeState.set(resizeType);
+        this.dragGridCrop.set(true);
+        this.handlerMousedown(e);
+    }
+    handlerMousedownCropArea(e) {
+        this.moveState.set('clip');
+        this.handlerMousedown(e);
+    }
+    handlerMousedown(e) {
+        const [width, height, top, left] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+        const [imageWidth, imageHeight, imageTop, imageLeft] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+        switch (this.moveState()) {
+            case 'image':
+                this.imageContainer().nativeElement.classList.add('cursor-move');
+                break;
+            case 'clip':
+                if (width === imageWidth && height === imageHeight) {
+                    return;
+                }
+                this.cropArea().nativeElement.classList.add('cursor-move');
+                break;
+            default:
+                break;
+        }
+        this.startMouseDim.set({
+            clientX: e.clientX,
+            clientY: e.clientY,
+            width: width,
+            height: height,
+            top: top,
+            left: left,
+            imageTop: imageTop,
+            imageLeft: imageLeft,
+            imageWidth: imageWidth,
+            imageHeight: imageHeight
+        });
+        this.ratioValue.set(this.getCropRatioValue());
+    }
+    moveImage(e) {
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = e.clientX - this.startMouseDim().clientX;
+        const imgTop = this.startMouseDim().imageTop + momentY;
+        const imgLeft = this.startMouseDim().imageLeft + momentX;
+        const top = this.startMouseDim().top + momentY;
+        const left = this.startMouseDim().left + momentX;
+        this.setStylesElements(this.imageOrigin(), { top: imgTop, left: imgLeft });
+        this.setStylesElements(this.imageClip(), { top: imgTop, left: imgLeft });
+        this.setStylesElements(this.cropArea(), { top, left });
+        this.setCirclePosition({ top: imgTop, left: imgLeft, width: this.startMouseDim().imageWidth, height: this.startMouseDim().imageHeight });
+    }
+    moveClipArea(e) {
+        const [imgWidth, imgHeight, imgTop, imgLeft] = getStylesOfElement(this.imageClip().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+        const [cropWidth, cropHeight] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight']);
+        const momentY = e.clientY - this.startMouseDim().clientY;
+        const momentX = e.clientX - this.startMouseDim().clientX;
+        let top = Math.max(imgTop, this.startMouseDim().top + momentY);
+        let left = Math.max(imgLeft, this.startMouseDim().left + momentX);
+        top = Math.min(top, imgTop + imgHeight - cropHeight);
+        left = Math.min(left, imgLeft + imgWidth - cropWidth);
+        this.setStylesElements(this.cropArea(), { top, left }, true);
+    }
+    zoomImage(scale) {
+        const [currWidth, currHeight, currTop, currLeft] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+        const width = Math.max(currWidth * scale, 50);
+        const height = this.imageOrigin().nativeElement.offsetHeight * width / this.imageOrigin().nativeElement.offsetWidth;
+        const top = currTop + (currHeight - height) / 2;
+        const left = currLeft + (currWidth - width) / 2;
+        let [cropWidth, cropHeight] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight']);
+        const [cropTop, cropLeft] = getStylesOfElement(this.cropArea().nativeElement, ['style.top', 'style.left']);
+        const maxCropWidth = width + left - cropLeft;
+        const maxCropHeight = height + top - cropTop;
+        const minWidth = 20;
+        const minHeight = 20;
+        cropWidth = Math.min(cropWidth, maxCropWidth);
+        cropHeight = Math.min(cropHeight, maxCropHeight);
+        cropWidth = Math.max(cropWidth, minWidth);
+        cropHeight = Math.max(cropHeight, minHeight);
+        this.ratioValue.set(this.getCropRatioValue());
+        if (this.ratioValue()) {
+            cropHeight = cropWidth / this.ratioValue();
+            cropHeight = Math.min(cropHeight, maxCropHeight);
+            cropHeight = Math.max(cropHeight, minHeight);
+            cropWidth = cropHeight * this.ratioValue();
+        }
+        this.rectClip.update(rect => {
+            const rectTop = cropTop - top;
+            const rectLeft = cropLeft - left;
+            return {
+                ...rect,
+                top: rectTop,
+                left: rectLeft,
+                right: rectLeft + cropWidth,
+                bottom: rectTop + cropHeight
+            };
+        });
+        const clip = `rect(${this.rectClip().top}px, ${this.rectClip().right}px, ${this.rectClip().bottom}px, ${this.rectClip().left}px)`;
+        this.setStylesElements(this.cropArea(), { top: cropTop, left: cropLeft, width: cropWidth, height: cropHeight });
+        this.setStylesElements(this.imageOrigin(), { top, left, width, height });
+        this.setCirclePosition({ top, left, width, height });
+        this.setStylesElements(this.imageClip(), { clip, top, left, width, height });
+        this.getRectClipImage();
+    }
+    handlerRotateImage(event) {
+        event.stopPropagation();
+        this.image.src = this.imgSrc();
+        this.image.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext("2d");
+            const [width, height] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight']);
+            const originWidth = this.image.width;
+            const originHeight = this.image.height;
+            let top = parseInt(this.imageOrigin().nativeElement.style.top);
+            let left = parseInt(this.imageOrigin().nativeElement.style.left);
+            let newHeight = width;
+            let newWidth = height;
+            const ratio = newWidth / newHeight;
+            canvas.height = originWidth;
+            canvas.width = originHeight;
+            ctx?.translate(originHeight / 2, originWidth / 2);
+            ctx?.rotate(Math.PI / 2);
+            ctx?.drawImage(this.image, -originWidth / 2, -originHeight / 2);
+            const src = getDataUrl(canvas, this.mimetype(), this.image.src);
+            this.imgSrc.set(src);
+            newWidth = Math.max(newWidth, originHeight);
+            newWidth = Math.min(newWidth, this.containerWidth());
+            newHeight = newWidth / ratio;
+            newHeight = Math.max(newHeight, originWidth);
+            newHeight = Math.min(newHeight, this.containerHeight());
+            newWidth = newHeight * ratio;
+            top = top - (newHeight / 2 - height / 2);
+            left = left - (newWidth / 2 - width / 2);
+            this.setStylesElements(this.imageOrigin(), { src, top, left, width: newWidth, height: newHeight });
+            this.setCirclePosition({ top, left, width: newWidth, height: newHeight });
+            this.setStylesElements(this.imageClip(), { src, top, left, width: newWidth, height: newHeight });
+            this.getOriginalImageSize(() => {
+                this.cropSize.set({ width: this.originWidth(), height: this.originHeight() });
+                this.updateOriginImageSize();
+            });
+            this.changedImage(true);
+        };
+    }
+    getOriginalImageSize(callback) {
+        this.image.src = this.imgSrc();
+        this.image.onload = () => {
+            this.originWidth.set(this.image.width);
+            this.originHeight.set(this.image.height);
+            if (callback) {
+                return callback();
+            }
+        };
+    }
+    changedImage(status) {
+        this.changed.set(status);
+    }
+    handlerFlipImage(event, mode) {
+        event.stopPropagation();
+        this.image.src = this.imgSrc();
+        this.image.onload = () => {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext("2d");
+            const width = this.image.width;
+            const height = this.image.height;
+            canvas.height = height;
+            canvas.width = width;
+            if (ctx) {
+                ctx.drawImage(this.image, 0, 0, width, height);
+                if (mode === 'horizontal') {
+                    ctx.translate(width, 0);
+                    ctx.scale(-1, 1);
+                }
+                if (mode === 'vertical') {
+                    ctx.translate(0, height);
+                    ctx.scale(1, -1);
+                }
+                ctx.clearRect(0, 0, width, height);
+                ctx.drawImage(this.image, 0, 0);
+            }
+            const dataUrl = getDataUrl(canvas, this.mimetype(), this.image.src);
+            this.imgSrc.set(dataUrl);
+            this.imageOrigin().nativeElement.src = dataUrl;
+            this.imageClip().nativeElement.src = dataUrl;
+            this.updateCropAreaPos();
+            this.updateRectClipPos();
+            this.changedImage(true);
+        };
+    }
+    handlerRestoreImage(event) {
+        event.stopPropagation();
+        this.imgSrc.set(this.dataUrlOrigin());
+        this.dragGridCrop.set(false);
+        this.getOriginalImageSize(() => {
+            this.updateOriginImageSize();
+            this.changedImage(false);
+            this.cropRatioItemSelected.set('');
+            this.updateCropAreaPos();
+            this.updateRectClipPos();
+        });
+    }
+    cropImage() {
+        return new Promise((resolve) => {
+            this.image.src = this.imgSrc();
+            this.image.onload = () => {
+                const canvas = document.createElement('canvas');
+                const originWidth = this.image.width;
+                const width = parseInt(this.imageClip().nativeElement.offsetWidth);
+                const height = parseInt(this.imageClip().nativeElement.offsetHeight);
+                const scale = originWidth / width;
+                const rectClip = this.getRectClipImage();
+                const cropRect = getCropRectImage(rectClip, width, height, scale);
+                canvas.height = cropRect.height;
+                canvas.width = cropRect.width;
+                this.originHeight.set(canvas.height);
+                this.originWidth.set(canvas.width);
+                const ctx = canvas.getContext("2d");
+                if (ctx) {
+                    ctx.drawImage(this.image, cropRect.left, cropRect.top, cropRect.width, cropRect.height, 0, 0, cropRect.width, cropRect.height);
+                }
+                const dataUrl = getDataUrl(canvas, this.mimetype(), this.image.src);
+                this.changedImage(true);
+                resolve(dataUrl);
+            };
+        });
+    }
+    async handlerSaveFile(event, modeSave) {
+        event.stopPropagation();
+        const dataUrl = await this.cropImage();
+        const file = convertBase64ToBlob(dataUrl);
+        this.outSaveFile.emit({ file: file, url: dataUrl, mode: modeSave });
+    }
+    async handlerClose(event) {
+        event.stopPropagation();
+        this.outClose.emit({ isClickButtonClose: true });
+    }
+    handlerSelectCropRatioItem(event, key) {
+        event.stopPropagation();
+        this.cropRatioItemSelected.set(key);
+        this.aspectRatio.set(undefined);
+        this.changed.set(true);
+        this.dragGridCrop.set(true);
+        this.updateOriginImageSize();
+    }
+    handlerResize(event) {
+        event.stopPropagation();
+        if (this.resizeComponentRef) {
+            return;
+        }
+        this.resizeComponentRef = this.dynamicComponentService.resolveComponentFactory(LibsUiComponentsImageEditorResizeComponent);
+        const instance = this.resizeComponentRef.instance;
+        const subs = instance.outClose.pipe(takeUntil(this.onDestroy)).subscribe(() => {
+            this.dynamicComponentService.remove(this.resizeComponentRef);
+            this.resizeComponentRef = undefined;
+            subs.unsubscribe();
+        });
+        instance.src = this.imgSrc();
+        instance.mimetype = this.mimetype();
+        instance.zIndex = this.zIndex();
+        subs.add(instance.outSave.pipe(takeUntil(this.onDestroy)).subscribe(event => {
+            this.resizeData.set(event);
+            this.saveResize();
+        }));
+        instance.resizeData = { ratio: 100, width: this.originWidth(), height: this.originHeight() };
+        instance.originWidth = this.originWidth();
+        instance.originHeight = this.originHeight();
+        this.dynamicComponentService.addToBody(this.resizeComponentRef);
+    }
+    saveResize() {
+        this.image.src = this.imgSrc();
+        this.image.onload = () => {
+            const canvas = document.createElement('canvas');
+            canvas.width = this.resizeData().width;
+            canvas.height = this.resizeData().height;
+            const ctx = canvas.getContext('2d');
+            if (ctx) {
+                ctx.drawImage(this.image, 0, 0, canvas.width, canvas.height);
+            }
+            const src = getDataUrl(canvas, this.mimetype(), this.image.src);
+            const [currWidth, currHeight, currTop, currLeft] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+            const ratio = currWidth / currHeight;
+            let newWidth = Math.min(this.resizeData().width, this.containerWidth());
+            let newHeight = newWidth / ratio;
+            newHeight = Math.min(this.resizeData().height, this.containerHeight());
+            newWidth = newHeight * ratio;
+            Math.min(this.resizeData().height, this.containerHeight());
+            const top = currTop + (currHeight - newHeight) / 2;
+            const left = currLeft + (currWidth - newWidth) / 2;
+            const movementY = currTop - top;
+            const movementX = currLeft - left;
+            this.rectClip.update(rect => {
+                const rectTop = rect.top + movementY;
+                const rectLeft = rect.left + movementX;
+                return {
+                    ...rect,
+                    top: rectTop,
+                    left: rectLeft,
+                    right: rectLeft + newWidth,
+                    bottom: rectTop + newHeight
+                };
+            });
+            const clip = `rect(${this.rectClip().top}px, ${this.rectClip().right}px, ${this.rectClip().bottom}px, ${this.rectClip().left}px)`;
+            this.setStylesElements(this.imageOrigin(), { src, top, left, width: newWidth, height: newHeight });
+            this.setCirclePosition({ top, left, width: newWidth, height: newHeight });
+            this.setStylesElements(this.imageClip(), { src, clip, top, left, width: newWidth, height: newHeight });
+            this.imgSrc.set(src);
+            this.originWidth.set(this.resizeData().width);
+            this.originHeight.set(this.resizeData().height);
+            this.updateCropAreaPos();
+            this.updateRectClipPos();
+            this.changedImage(true);
+        };
+    }
+    handlerCropWidth() {
+        this.processCropWidthOrHeight('width');
+    }
+    handlerCropHeight() {
+        this.processCropWidthOrHeight('height');
+    }
+    processCropWidthOrHeight(cropBy) {
+        this.ratioValue.set(this.getCropRatioValue());
+        const [currImgWidth, currImgHeight, currImgTop, currImgLeft] = getStylesOfElement(this.imageOrigin().nativeElement, ['offsetWidth', 'offsetHeight', 'style.top', 'style.left']);
+        let [cropWidth, cropHeight] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight']);
+        const [cropTop, cropLeft] = getStylesOfElement(this.cropArea().nativeElement, ['style.top', 'style.left']);
+        const maxCropWidth = currImgLeft + currImgWidth - cropLeft;
+        const maxCropHeight = currImgHeight + currImgTop - cropTop;
+        const ratio = this.originWidth() / currImgWidth;
+        let cropValue = get(this.cropSize, cropBy) / ratio;
+        cropValue = Math.min(cropValue, cropBy === 'width' ? maxCropWidth : maxCropHeight);
+        cropValue = Math.max(1, cropValue);
+        if (this.ratioValue()) {
+            if (cropBy === 'width') {
+                cropHeight = cropValue / this.ratioValue();
+                cropHeight = Math.min(cropHeight, maxCropHeight);
+                cropValue = cropHeight * this.ratioValue();
+                this.cropSize.update(cropSize => ({ ...cropSize, height: Math.round(cropHeight * ratio) }));
+                this.cropArea().nativeElement.style.height = `${cropHeight}px`;
+            }
+            if (cropBy === 'height') {
+                cropWidth = cropValue * this.ratioValue();
+                cropWidth = Math.min(cropWidth, maxCropWidth);
+                cropValue = cropWidth / this.ratioValue();
+                this.cropSize.update(cropSize => ({ ...cropSize, width: Math.round(cropWidth * ratio) }));
+                this.cropArea().nativeElement.style.width = `${cropWidth}px`;
+            }
+        }
+        this.cropSize.update(cropSize => ({ ...cropSize, [cropBy]: Math.round(cropValue * ratio) }));
+        this.cropArea().nativeElement.style[cropBy] = `${cropValue}px`;
+        const imageRect = this.imageClip().nativeElement.getBoundingClientRect();
+        const cropRect = this.cropArea().nativeElement.getBoundingClientRect();
+        const { width, height } = cropRect;
+        const left = cropRect.left - imageRect.left;
+        const top = cropRect.top - imageRect.top;
+        const right = left + width;
+        const bottom = top + height;
+        this.imageClip().nativeElement.style.clip = `rect(${top}px, ${right}px, ${bottom}px, ${left}px)`;
+    }
+    setStylesElements(element, styles, isUpdateRectClipPos) {
+        if (!isNil(styles.top)) {
+            element.nativeElement.style.top = `${styles.top}px`;
+        }
+        if (!isNil(styles.left)) {
+            element.nativeElement.style.left = `${styles.left}px`;
+        }
+        if (!isNil(styles.width)) {
+            element.nativeElement.style.width = `${styles.width}px`;
+        }
+        if (!isNil(styles.height)) {
+            element.nativeElement.style.height = `${styles.height}px`;
+        }
+        if (!isNil(styles.display)) {
+            element.nativeElement.style.display = styles.display;
+        }
+        if (!isNil(styles.src)) {
+            element.nativeElement.src = styles.src;
+        }
+        if (!isNil(styles.clip)) {
+            element.nativeElement.style.clip = styles.clip;
+        }
+        if (isUpdateRectClipPos) {
+            this.updateRectClipPos();
+        }
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        this.onDestroy.complete();
+        this.dynamicComponentService.remove(this.resizeComponentRef);
+        // this.dynamicComponentService.remove(this.forwardComponentRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorComponent, deps: [{ token: LINK_IMAGE_ERROR_TOKEN_INJECT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsImageEditorComponent, isStandalone: true, selector: "libs_ui-components-image_editor", inputs: { modeShowButton: { classPropertyName: "modeShowButton", publicName: "modeShowButton", isSignal: true, isRequired: false, transformFunction: null }, mimetype: { classPropertyName: "mimetype", publicName: "mimetype", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, originUrl: { classPropertyName: "originUrl", publicName: "originUrl", isSignal: true, isRequired: false, transformFunction: null }, nameFile: { classPropertyName: "nameFile", publicName: "nameFile", isSignal: true, isRequired: false, transformFunction: null }, hasZoom: { classPropertyName: "hasZoom", publicName: "hasZoom", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, requiredCropFollowRatio: { classPropertyName: "requiredCropFollowRatio", publicName: "requiredCropFollowRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imgSrc: "imgSrcChange", aspectRatio: "aspectRatioChange", outClose: "outClose", outSaveFile: "outSaveFile", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "imageOrigin", first: true, predicate: ["imageOrigin"], descendants: true, isSignal: true }, { propertyName: "imageClip", first: true, predicate: ["imageClip"], descendants: true, isSignal: true }, { propertyName: "imageEditorContainer", first: true, predicate: ["imageEditorContainer"], descendants: true, isSignal: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true, isSignal: true }, { propertyName: "cropArea", first: true, predicate: ["cropArea"], descendants: true, isSignal: true }, { propertyName: "cropTL", first: true, predicate: ["cropTL"], descendants: true, isSignal: true }, { propertyName: "cropBL", first: true, predicate: ["cropBL"], descendants: true, isSignal: true }, { propertyName: "cropBR", first: true, predicate: ["cropBR"], descendants: true, isSignal: true }, { propertyName: "cropTR", first: true, predicate: ["cropTR"], descendants: true, isSignal: true }, { propertyName: "cropLineVL", first: true, predicate: ["cropLineVL"], descendants: true, isSignal: true }, { propertyName: "cropLineVR", first: true, predicate: ["cropLineVR"], descendants: true, isSignal: true }, { propertyName: "cropLineHT", first: true, predicate: ["cropLineHT"], descendants: true, isSignal: true }, { propertyName: "cropLineHB", first: true, predicate: ["cropLineHB"], descendants: true, isSignal: true }, { propertyName: "circleTL", first: true, predicate: ["circleTL"], descendants: true, isSignal: true }, { propertyName: "circleTR", first: true, predicate: ["circleTR"], descendants: true, isSignal: true }, { propertyName: "circleBL", first: true, predicate: ["circleBL"], descendants: true, isSignal: true }, { propertyName: "circleBR", first: true, predicate: ["circleBR"], descendants: true, isSignal: true }], ngImport: i0, template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] top-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] bottom-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 left-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 right-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[33px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[66px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[33px]\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[66px]\">\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n    <div class=\"w-[320px] shrink-0 p-[16px] bg-[#ffffff] rounded-br-[8px] z-[2]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              (outClick)=\"handlerSelectCropRatioItem($event, item.key)\" />\n            <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n              {{ (item.key === 'free' ? 'i18n_custom' : item.key) | translate }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"mb-[16px] flex\">\n        <libs_ui-components-inputs-valid class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-cursor-ew-resize{cursor:ew-resize!important}.libs-ui-image-editor-edit-cursor-ns-resize{cursor:ns-resize!important}.libs-ui-image-editor-edit-cursor-nwse-resize{cursor:nwse-resize!important}.libs-ui-image-editor-edit-cursor-nesw-resize{cursor:nesw-resize!important}.libs-ui-image-editor-edit-action-item{display:flex;flex-direction:column;align-items:center;width:60px;cursor:pointer}.libs-ui-image-editor-edit-action-item-icon{padding:12px;border-radius:8px;width:max-content;border:1px solid #e6e7ea}.libs-ui-image-editor-edit-action-item-icon:before{font-size:20px}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-hover)}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-bright-20)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-active)!important;background-color:var(--mo-global-color-primary-background-95)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-active)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-image_editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        NgTemplateOutlet, TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsModalComponent,
+                        LibsUiComponentsInputsValidComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSpinnerComponent,
+                    ], template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] top-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] bottom-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 left-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 right-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[33px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[66px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[33px]\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[66px]\">\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n    <div class=\"w-[320px] shrink-0 p-[16px] bg-[#ffffff] rounded-br-[8px] z-[2]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              (outClick)=\"handlerSelectCropRatioItem($event, item.key)\" />\n            <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n              {{ (item.key === 'free' ? 'i18n_custom' : item.key) | translate }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"mb-[16px] flex\">\n        <libs_ui-components-inputs-valid class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-cursor-ew-resize{cursor:ew-resize!important}.libs-ui-image-editor-edit-cursor-ns-resize{cursor:ns-resize!important}.libs-ui-image-editor-edit-cursor-nwse-resize{cursor:nwse-resize!important}.libs-ui-image-editor-edit-cursor-nesw-resize{cursor:nesw-resize!important}.libs-ui-image-editor-edit-action-item{display:flex;flex-direction:column;align-items:center;width:60px;cursor:pointer}.libs-ui-image-editor-edit-action-item-icon{padding:12px;border-radius:8px;width:max-content;border:1px solid #e6e7ea}.libs-ui-image-editor-edit-action-item-icon:before{font-size:20px}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-hover)}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-bright-20)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-active)!important;background-color:var(--mo-global-color-primary-background-95)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-active)!important}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [LINK_IMAGE_ERROR_TOKEN_INJECT]
+                }] }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsImageEditorComponent, LibsUiComponentsImageEditorResizeComponent };
+//# sourceMappingURL=libs-ui-components-image-editor.mjs.map