@libs-ui/components-image-editor 0.1.1-1

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

@@ -0,0 +1,1160 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { EventEmitter, Output, Input, Component, signal, input, model, viewChild, output, inject, DestroyRef, Optional, Inject, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+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, set, LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { 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.14", ngImport: i0, type: LibsUiComponentsImageEditorResizeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\n  [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\">{{ 'i18n_ratio_size' | translate }} (%)</div>\n      <libs_ui-components-inputs-valid\n        [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\n          [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\n          [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 class=\"w-[20px] h-[44px] libs-ui-border-top-general libs-ui-border-right-general libs-ui-border-bottom-general\"></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", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n  [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\">{{ 'i18n_ratio_size' | translate }} (%)</div>\n      <libs_ui-components-inputs-valid\n        [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\n          [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\n          [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 class=\"w-[20px] h-[44px] libs-ui-border-top-general libs-ui-border-right-general libs-ui-border-bottom-general\"></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;
+    resizeComponentRef;
+    modeShowButton = input('save-file');
+    mimetype = input();
+    zIndex = input(1200);
+    imgSrc = model.required();
+    originUrl = input();
+    nameFile = input();
+    hasZoom = input(false);
+    aspectRatio = input();
+    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();
+    destroyRef = inject(DestroyRef);
+    dynamicComponentService = inject(LibsUiDynamicComponentService);
+    constructor(linkImageError) {
+        this.linkImageError = linkImageError;
+    }
+    ngAfterViewInit() {
+        const aspectRatioFound = this.aspectRatio()?.key ? this.cropRatioItems().find((item) => item.key === this.aspectRatio()?.key) : this.cropRatioItems()[0];
+        if (aspectRatioFound) {
+            this.dragGridCrop.set(true);
+            this.cropRatioItemSelected.set(aspectRatioFound?.key);
+            this.updateOriginImageSize();
+            this.changedImage(true);
+        }
+        this.updateModalSize();
+        this.initData();
+        this.initMouseEvent();
+        this.outFunctionsControl.emit(this.FunctionsControl);
+    }
+    get FunctionsControl() {
+        return {
+            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(this.imageEditorContainer(), '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);
+            }
+        }), takeUntilDestroyed(this.destroyRef));
+        if (obsMerge) {
+            return obs.pipe(mergeMap(() => obsMerge), takeUntilDestroyed(this.destroyRef));
+        }
+        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.cropRatioItems().find((item) => item.key === this.cropRatioItemSelected());
+        if (!cropRatio?.value) {
+            return this.aspectRatio()?.value || this.originWidth() / this.originHeight();
+        }
+        return cropRatio.value;
+    }
+    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-grabbing');
+        this.cropArea().nativeElement.classList.remove('cursor-grabbing');
+        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-grabbing');
+                break;
+            case 'clip':
+                if (width === imageWidth && height === imageHeight) {
+                    return;
+                }
+                this.cropArea().nativeElement.classList.add('cursor-grabbing');
+                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;
+        // Calculate the center point of the current view
+        const centerX = currLeft + currWidth / 2;
+        const centerY = currTop + currHeight / 2;
+        // Calculate new position to maintain center point
+        const top = centerY - height / 2;
+        const left = centerX - width / 2;
+        // Get current crop area dimensions and position
+        let [cropWidth, cropHeight] = getStylesOfElement(this.cropArea().nativeElement, ['offsetWidth', 'offsetHeight']);
+        const [cropTop, cropLeft] = getStylesOfElement(this.cropArea().nativeElement, ['style.top', 'style.left']);
+        // Scale crop area dimensions proportionally
+        cropWidth = cropWidth * scale;
+        cropHeight = cropHeight * scale;
+        // Calculate new crop area position relative to the image
+        const cropTopNew = top + (cropTop - currTop) * scale;
+        const cropLeftNew = left + (cropLeft - currLeft) * scale;
+        // Ensure crop area stays within bounds
+        const maxCropWidth = width;
+        const maxCropHeight = height;
+        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();
+        }
+        // Update clipping rectangle
+        this.rectClip.update((rect) => {
+            const rectTop = cropTopNew - top;
+            const rectLeft = cropLeftNew - 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)`;
+        // Update all elements with new positions and dimensions
+        this.setStylesElements(this.cropArea(), { top: cropTopNew, left: cropLeftNew, 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.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(takeUntilDestroyed(this.destroyRef)).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(takeUntilDestroyed(this.destroyRef)).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) {
+        Object.keys(styles).forEach((key) => {
+            const value = get(styles, key);
+            if (isNil(value)) {
+                return;
+            }
+            set(element.nativeElement.style, key, typeof value === 'number' ? `${value}px` : value);
+        });
+        if (isUpdateRectClipPos) {
+            this.updateRectClipPos();
+        }
+    }
+    ngOnDestroy() {
+        this.dynamicComponentService.remove(this.resizeComponentRef);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", 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.14", 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", 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\n  [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\n          [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\n          [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\n          class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event, 'save-file')\" />\n      } @else {\n        <libs_ui-components-buttons-button\n          [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\n          [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\n          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\n      #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px] libs-ui-input-image-editor-container-left\">\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]\"></div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\"></div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\"></div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\"></div>\n      <div\n        #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div\n          #circleTL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleTR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleBL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleBR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img\n          #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] top-[-1000px] left-[-1000px]\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img\n          #imageClip\n          class=\"absolute z-[1] top-[-1000px] left-[-1000px]\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\"></div>\n        <div\n          #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div\n              #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 cursor-ew-resize\"></div>\n            <div\n              #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 cursor-ew-resize\"></div>\n            <div\n              #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 cursor-ns-resize\"></div>\n            <div\n              #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] cursor-ns-resize\"></div>\n\n            <div class=\"bg-white absolute h-[1px] top-0 left-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[1px] bottom-0 left-0 right-0\"></div>\n            <div class=\"bg-white absolute w-[1px] top-0 left-0 bottom-0\"></div>\n            <div class=\"bg-white absolute w-[1px] top-0 bottom-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[2px] top-[33%] left-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[2px] top-[66%] left-0 right-0\"></div>\n            <div class=\"bg-white absolute w-[2px] top-0 bottom-0 left-[33%]\"></div>\n            <div class=\"bg-white absolute w-[2px] top-0 bottom-0 left-[66%]\"></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] libs-ui-input-image-editor-container-right\">\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\n          [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\n              [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon + ' !text-[20px]'\"\n              [isActive]=\"item.key === cropRatioItemSelected()\"\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\n          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\n          [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\n            [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\n            [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\n            [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\n            [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\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path\n      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\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle\n      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-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", "initEventInElementRefCustom", "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", "debounceTimeValidate"], 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", "isHandlerEnterDocumentClickButton"], 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.14", 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\n  [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\n          [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\n          [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\n          class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event, 'save-file')\" />\n      } @else {\n        <libs_ui-components-buttons-button\n          [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\n          [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\n          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\n      #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px] libs-ui-input-image-editor-container-left\">\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]\"></div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\"></div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\"></div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\"></div>\n      <div\n        #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div\n          #circleTL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleTR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleBL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div\n          #circleBR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img\n          #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] top-[-1000px] left-[-1000px]\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img\n          #imageClip\n          class=\"absolute z-[1] top-[-1000px] left-[-1000px]\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\"></div>\n        <div\n          #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div\n              #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div\n              #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 cursor-ew-resize\"></div>\n            <div\n              #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 cursor-ew-resize\"></div>\n            <div\n              #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 cursor-ns-resize\"></div>\n            <div\n              #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] cursor-ns-resize\"></div>\n\n            <div class=\"bg-white absolute h-[1px] top-0 left-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[1px] bottom-0 left-0 right-0\"></div>\n            <div class=\"bg-white absolute w-[1px] top-0 left-0 bottom-0\"></div>\n            <div class=\"bg-white absolute w-[1px] top-0 bottom-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[2px] top-[33%] left-0 right-0\"></div>\n            <div class=\"bg-white absolute h-[2px] top-[66%] left-0 right-0\"></div>\n            <div class=\"bg-white absolute w-[2px] top-0 bottom-0 left-[33%]\"></div>\n            <div class=\"bg-white absolute w-[2px] top-0 bottom-0 left-[66%]\"></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] libs-ui-input-image-editor-container-right\">\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\n          [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\n              [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon + ' !text-[20px]'\"\n              [isActive]=\"item.key === cropRatioItemSelected()\"\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\n          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\n          [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\n            [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\n            [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\n            [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\n            [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\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path\n      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\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle\n      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-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]
+                }] }] });
+
+class LibsUiComponentsImageEditorDemoComponent {
+    imageFileInput;
+    imageSource = '';
+    showEditor = false;
+    editedImageUrl = '';
+    selectedFile = null;
+    imageName = '';
+    // Documentation data as regular properties
+    inputsDoc = [
+        { name: 'imgSrc', type: 'string', default: 'Bắt buộc', description: 'Đường dẫn hoặc base64 của hình ảnh cần chỉnh sửa' },
+        { name: 'originUrl', type: 'string', default: '-', description: 'URL gốc của hình ảnh' },
+        { name: 'nameFile', type: 'string', default: '-', description: 'Tên file khi lưu' },
+        { name: 'modeShowButton', type: "'save-file' | 'save-api'", default: "'save-file'", description: 'Chế độ nút lưu' },
+        { name: 'mimetype', type: 'string', default: '-', description: 'Định dạng của hình ảnh' },
+        { name: 'zIndex', type: 'number', default: '1200', description: 'z-index của component' },
+        { name: 'hasZoom', type: 'boolean', default: 'false', description: 'Cho phép phóng to/thu nhỏ hình ảnh' },
+        { name: 'aspectRatio', type: 'IAspectRatio', default: '-', description: 'Tỷ lệ khung hình mặc định' },
+        { name: 'requiredCropFollowRatio', type: 'boolean', default: 'false', description: 'Bắt buộc cắt theo tỷ lệ đã chọn' },
+    ];
+    outputsDoc = [
+        { name: 'outClose', type: '{isClickButtonClose: boolean}', description: 'Sự kiện khi đóng trình chỉnh sửa' },
+        { name: 'outSaveFile', type: 'ISaveFile', description: 'Sự kiện khi lưu file' },
+        { name: 'outFunctionsControl', type: 'IImageEditorFunctionControlEvent', description: 'Sự kiện để kiểm soát các chức năng' },
+    ];
+    interfacesDoc = [
+        {
+            name: 'ISaveFile',
+            code: "export interface ISaveFile {\n  file: Blob;\n  url: string;\n  mode: 'save-file' | 'save-api' | 'save-api-as-new-file';\n}",
+            description: 'Interface định nghĩa dữ liệu khi lưu file.',
+        },
+        {
+            name: 'IImageEditorFunctionControlEvent',
+            code: 'export interface IImageEditorFunctionControlEvent {\n  cropImage: () => Promise<string>;\n  setLoadingState: (loading: boolean) => void;\n}',
+            description: 'Interface định nghĩa các hàm điều khiển có thể được gọi từ bên ngoài component.',
+        },
+        {
+            name: 'IAspectRatio',
+            code: 'export interface IAspectRatio {\n  key: string;\n  value: number;\n}',
+            description: 'Interface định nghĩa tỷ lệ khung hình.',
+        },
+    ];
+    features = [
+        {
+            id: 1,
+            icon: '✂️',
+            title: 'Cắt ảnh',
+            description: 'Cắt hình ảnh theo khu vực tùy chỉnh hoặc dựa trên tỷ lệ định trước (1:1, 4:3, 16:9, v.v.).',
+        },
+        {
+            id: 2,
+            icon: '🔄',
+            title: 'Xoay và lật',
+            description: 'Xoay hình ảnh theo các góc khác nhau hoặc lật theo chiều ngang/dọc.',
+        },
+        {
+            id: 3,
+            icon: '📏',
+            title: 'Thay đổi kích thước',
+            description: 'Thay đổi kích thước hình ảnh theo tỷ lệ phần trăm hoặc kích thước cụ thể.',
+        },
+        {
+            id: 4,
+            icon: '💾',
+            title: 'Nhiều chế độ lưu',
+            description: 'Hỗ trợ nhiều chế độ lưu: tải xuống trực tiếp hoặc gửi đến API.',
+        },
+        {
+            id: 5,
+            icon: '🔍',
+            title: 'Phóng to/thu nhỏ',
+            description: 'Tính năng phóng to/thu nhỏ để xem chi tiết hình ảnh khi cần thiết.',
+        },
+    ];
+    codeExamples = [
+        {
+            id: 1,
+            title: 'Sử dụng cơ bản',
+            code: `import { Component } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      [modeShowButton]="'save-file'"\n      [nameFile]="'image.jpg'"\n      (outSaveFile)="onSaveFile($event)"\n      (outClose)="onClose($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: {file: Blob, url: string, mode: string}) {\n    console.log('File đã được lưu:', data);\n  }\n\n  onClose(data: {isClickButtonClose: boolean}) {\n    console.log('Đã đóng trình chỉnh sửa ảnh');\n  }\n}`,
+        },
+        {
+            id: 2,
+            title: 'Sử dụng với tỷ lệ cố định',
+            code: `import { Component } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent } from '@libs-ui/components-image-editor';\nimport { IAspectRatio } from '@libs-ui/interfaces-types';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      [aspectRatio]="aspectRatio"\n      [requiredCropFollowRatio]="true"\n      (outSaveFile)="onSaveFile($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = {\n    key: '1:1',\n    value: 1\n  };\n\n  onSaveFile(data: any) {\n    console.log('Đã lưu hình ảnh với tỷ lệ 1:1');\n  }\n}`,
+        },
+        {
+            id: 3,
+            title: 'Sử dụng với phần điều khiển bên ngoài',
+            code: `import { Component, ViewChild } from '@angular/core';\nimport { LibsUiComponentsImageEditorComponent, IImageEditorFunctionControlEvent } from '@libs-ui/components-image-editor';\n\n@Component({\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  template: \`\n    <button (click)="cropAndSave()">Cắt và lưu ngay</button>\n    <libs_ui-components-image_editor\n      [(imgSrc)]="imageSource"\n      (outFunctionsControl)="onFunctionsControl($event)">\n    </libs_ui-components-image_editor>\n  \`\n})\nexport class ExampleComponent {\n  imageSource = 'https://example.com/path/to/image.jpg';\n  editorFunctions!: IImageEditorFunctionControlEvent;\n\n  onFunctionsControl(event: IImageEditorFunctionControlEvent) {\n    this.editorFunctions = event;\n  }\n\n  async cropAndSave() {\n    if (this.editorFunctions) {\n      this.editorFunctions.setLoadingState(true);\n      try {\n        const dataUrl = await this.editorFunctions.cropImage();\n        console.log('Hình ảnh đã được cắt:', dataUrl);\n      } finally {\n        this.editorFunctions.setLoadingState(false);\n      }\n    }\n  }\n}`,
+        },
+    ];
+    copyToClipboard(text) {
+        navigator.clipboard
+            .writeText(text)
+            .then(() => {
+            alert('Đã sao chép vào clipboard');
+        })
+            .catch((err) => {
+            console.error('Không thể sao chép: ', err);
+        });
+    }
+    onFileSelected(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.selectedFile = input.files[0];
+            this.imageName = this.selectedFile.name;
+            console.log('File selected:', this.selectedFile.name);
+        }
+    }
+    uploadAndEdit() {
+        if (!this.selectedFile) {
+            alert('Vui lòng chọn một file hình ảnh trước');
+            return;
+        }
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            if (e.target?.result) {
+                this.imageSource = e.target.result;
+                this.showEditor = true;
+            }
+        };
+        reader.readAsDataURL(this.selectedFile);
+    }
+    onSaveImage(data) {
+        console.log('Image saved:', data);
+        this.editedImageUrl = data.url;
+        this.showEditor = false;
+    }
+    onCloseEditor(data) {
+        console.log('Editor closed:', data);
+        this.showEditor = false;
+    }
+    downloadImage() {
+        if (this.editedImageUrl) {
+            const link = document.createElement('a');
+            link.href = this.editedImageUrl;
+            link.download = this.imageName || 'edited-image.jpg';
+            link.click();
+        }
+    }
+    handleFunctionControl(event) {
+        console.log(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsImageEditorDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsImageEditorDemoComponent, isStandalone: true, selector: "lib-image-editor-demo", viewQueries: [{ propertyName: "imageFileInput", first: true, predicate: ["imageFileInput"], descendants: true }], ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Tr\u00ECnh Ch\u1EC9nh S\u1EEDa H\u00ECnh \u1EA2nh</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component cho Angular \u0111\u1EC3 ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-image-editor</code>\n        l\u00E0 m\u1ED9t component Angular m\u1EA1nh m\u1EBD cho ph\u00E9p ng\u01B0\u1EDDi d\u00F9ng th\u1EF1c hi\u1EC7n c\u00E1c thao t\u00E1c ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh nh\u01B0 c\u1EAFt, thay \u0111\u1ED5i k\u00EDch th\u01B0\u1EDBc, xoay, l\u1EADt v\u00E0 \u00E1p d\u1EE5ng t\u1EF7 l\u1EC7 c\u1ED1 \u0111\u1ECBnh.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li>\n            <span class=\"font-semibold\">Angular</span>\n            : 18.0.0 tr\u1EDF l\u00EAn\n          </li>\n          <li>\n            <span class=\"font-semibold\">Tailwind CSS</span>\n            : 3.3.0 tr\u1EDF l\u00EAn\n          </li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-image-editor</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-image-editor</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n      <div>\n        <p class=\"mb-4\">T\u1EA3i l\u00EAn h\u00ECnh \u1EA3nh v\u00E0 ch\u1EC9nh s\u1EEDa ngay tr\u00EAn tr\u00ECnh duy\u1EC7t:</p>\n        <div class=\"flex flex-wrap items-center gap-4 mb-8\">\n          <input\n            type=\"file\"\n            #imageFileInput\n            accept=\"image/*\"\n            class=\"border border-gray-300 rounded px-3 py-2\"\n            (change)=\"onFileSelected($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"T\u1EA3i l\u00EAn v\u00E0 ch\u1EC9nh s\u1EEDa\"\n            (click)=\"uploadAndEdit()\"></libs_ui-components-buttons-button>\n        </div>\n\n        @if (editedImageUrl) {\n          <div class=\"mt-8 p-6 bg-gray-50 rounded-lg\">\n            <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">K\u1EBFt qu\u1EA3</h3>\n            <div class=\"max-w-xl mx-auto mb-4 border border-gray-200 rounded-lg overflow-hidden shadow-md\">\n              <img\n                [src]=\"editedImageUrl\"\n                alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\"\n                class=\"w-full h-auto\" />\n            </div>\n            <div class=\"flex justify-center\">\n              <libs_ui-components-buttons-button\n                label=\"T\u1EA3i xu\u1ED1ng h\u00ECnh \u1EA3nh\"\n                (click)=\"downloadImage()\"></libs_ui-components-buttons-button>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (showEditor) {\n      <div class=\"fixed inset-0 z-50\">\n        <libs_ui-components-image_editor\n          [(imgSrc)]=\"imageSource\"\n          [nameFile]=\"imageName || 'demo-image.jpg'\"\n          [modeShowButton]=\"'save-file'\"\n          [hasZoom]=\"true\"\n          (outSaveFile)=\"onSaveImage($event)\"\n          (outClose)=\"onCloseEditor($event)\"\n          (outFunctionsControl)=\"handleFunctionControl($event)\" />\n      </div>\n    }\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [nameFile]=\"'image.jpg'\"\n  [modeShowButton]=\"'save-file'\"\n  (outSaveFile)=\"onSaveFile($event)\"\n  (outClose)=\"onClose($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: &#123;file: Blob, url: string, mode: string&#125;) &#123;\n    console.log('File \u0111\u00E3 \u0111\u01B0\u1EE3c l\u01B0u:', data);\n  &#125;\n\n  onClose(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    console.log('\u0110\u00E3 \u0111\u00F3ng tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: V\u1EDBi tr\u00ECnh ch\u1EC9nh s\u1EEDa c\u00F3 th\u1EC3 \u0111\u00F3ng/m\u1EDF</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (toggle-editor.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;button (click)=\"openEditor()\" class=\"px-4 py-2 bg-blue-500 text-white rounded\"&gt;\n  M\u1EDF tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh\n&lt;/button&gt;\n\n&#64;if (showEditor) &#123;\n  &lt;libs_ui-components-image_editor\n    [(imgSrc)]=\"imageSource\"\n    [nameFile]=\"'my-image.jpg'\"\n    (outSaveFile)=\"onSaveFile($event)\"\n    (outClose)=\"onCloseEditor($event)\"&gt;\n  &lt;/libs_ui-components-image_editor&gt;\n&#125;\n\n&#64;if (editedImageUrl) &#123;\n  &lt;div class=\"mt-4\"&gt;\n    &lt;h3 class=\"text-lg font-semibold\"&gt;H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa:&lt;/h3&gt;\n    &lt;img [src]=\"editedImageUrl\" alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\" class=\"mt-2 max-w-full h-auto\" /&gt;\n  &lt;/div&gt;\n&#125;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (toggle-editor.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; ISaveFile &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-toggle-editor',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './toggle-editor.component.html'\n&#125;)\nexport class ToggleEditorComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  showEditor = false;\n  editedImageUrl = '';\n\n  openEditor() &#123;\n    this.showEditor = true;\n  &#125;\n\n  onSaveFile(data: ISaveFile) &#123;\n    this.editedImageUrl = data.url;\n    this.showEditor = false;\n    console.log('\u0110\u00E3 l\u01B0u file:', data.file);\n  &#125;\n\n  onCloseEditor(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    this.showEditor = false;\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 3: V\u1EDBi t\u1EF7 l\u1EC7 khung h\u00ECnh c\u1ED1 \u0111\u1ECBnh</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (fixed-ratio.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [aspectRatio]=\"aspectRatio\"\n  [requiredCropFollowRatio]=\"true\"\n  (outSaveFile)=\"onSaveFile($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (fixed-ratio.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; IAspectRatio &#125; from '&#64;libs-ui/interfaces-types';\n\n&#64;Component(&#123;\n  selector: 'app-fixed-ratio',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './fixed-ratio.component.html'\n&#125;)\nexport class FixedRatioComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = &#123;\n    key: '1:1',\n    value: 1\n  &#125;;\n\n  onSaveFile(data: any) &#123;\n    console.log('\u0110\u00E3 l\u01B0u h\u00ECnh \u1EA3nh v\u1EDBi t\u1EF7 l\u1EC7 1:1');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (input of inputsDoc; track input.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (output of outputsDoc; track output.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n          <div class=\"bg-gray-50 p-6 rounded-lg\">\n            <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n            <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n          </div>\n        }\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n      <ul class=\"space-y-6\">\n        @for (feature of features; track feature.id) {\n          <li class=\"flex items-start\">\n            <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n              <p class=\"text-gray-600\">{{ feature.description }}</p>\n            </div>\n          </li>\n        }\n      </ul>\n    </section>\n  </main>\n</div>\n", styles: ["pre code{@apply font-mono;}.hover\\:bg-blue-600{transition:background-color .2s ease-in-out}.overflow-x-auto{-webkit-overflow-scrolling:touch}pre::-webkit-scrollbar{@apply h-1.5 bg-gray-100;}pre::-webkit-scrollbar-thumb{@apply bg-gray-300 rounded;}button:focus,input:focus{@apply outline-none ring-2 ring-blue-400 ring-opacity-50;}input[type=file]{@apply text-sm text-gray-600;}\n"], dependencies: [{ 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", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsImageEditorComponent, selector: "libs_ui-components-image_editor", inputs: ["modeShowButton", "mimetype", "zIndex", "imgSrc", "originUrl", "nameFile", "hasZoom", "aspectRatio", "requiredCropFollowRatio"], outputs: ["imgSrcChange", "outClose", "outSaveFile", "outFunctionsControl"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsImageEditorDemoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-image-editor-demo', standalone: true, imports: [LibsUiComponentsButtonsButtonComponent, LibsUiComponentsImageEditorComponent], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n  <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n    <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Tr\u00ECnh Ch\u1EC9nh S\u1EEDa H\u00ECnh \u1EA2nh</h1>\n    <p class=\"text-xl text-gray-500\">Th\u01B0 vi\u1EC7n component cho Angular \u0111\u1EC3 ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh</p>\n  </header>\n\n  <main>\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n      <p>\n        <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-image-editor</code>\n        l\u00E0 m\u1ED9t component Angular m\u1EA1nh m\u1EBD cho ph\u00E9p ng\u01B0\u1EDDi d\u00F9ng th\u1EF1c hi\u1EC7n c\u00E1c thao t\u00E1c ch\u1EC9nh s\u1EEDa h\u00ECnh \u1EA3nh nh\u01B0 c\u1EAFt, thay \u0111\u1ED5i k\u00EDch th\u01B0\u1EDBc, xoay, l\u1EADt v\u00E0 \u00E1p d\u1EE5ng t\u1EF7 l\u1EC7 c\u1ED1 \u0111\u1ECBnh.\n      </p>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n      <div class=\"mb-6\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n        <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n          <li>\n            <span class=\"font-semibold\">Angular</span>\n            : 18.0.0 tr\u1EDF l\u00EAn\n          </li>\n          <li>\n            <span class=\"font-semibold\">Tailwind CSS</span>\n            : 3.3.0 tr\u1EDF l\u00EAn\n          </li>\n        </ul>\n      </div>\n\n      <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-image-editor</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('npm install @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n\n      <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n      <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n        <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-image-editor</code></pre>\n        <button\n          class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n          (click)=\"copyToClipboard('yarn add @libs-ui/components-image-editor')\">\n          Sao ch\u00E9p\n        </button>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo tr\u1EF1c ti\u1EBFp</h2>\n      <div>\n        <p class=\"mb-4\">T\u1EA3i l\u00EAn h\u00ECnh \u1EA3nh v\u00E0 ch\u1EC9nh s\u1EEDa ngay tr\u00EAn tr\u00ECnh duy\u1EC7t:</p>\n        <div class=\"flex flex-wrap items-center gap-4 mb-8\">\n          <input\n            type=\"file\"\n            #imageFileInput\n            accept=\"image/*\"\n            class=\"border border-gray-300 rounded px-3 py-2\"\n            (change)=\"onFileSelected($event)\" />\n          <libs_ui-components-buttons-button\n            label=\"T\u1EA3i l\u00EAn v\u00E0 ch\u1EC9nh s\u1EEDa\"\n            (click)=\"uploadAndEdit()\"></libs_ui-components-buttons-button>\n        </div>\n\n        @if (editedImageUrl) {\n          <div class=\"mt-8 p-6 bg-gray-50 rounded-lg\">\n            <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">K\u1EBFt qu\u1EA3</h3>\n            <div class=\"max-w-xl mx-auto mb-4 border border-gray-200 rounded-lg overflow-hidden shadow-md\">\n              <img\n                [src]=\"editedImageUrl\"\n                alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\"\n                class=\"w-full h-auto\" />\n            </div>\n            <div class=\"flex justify-center\">\n              <libs_ui-components-buttons-button\n                label=\"T\u1EA3i xu\u1ED1ng h\u00ECnh \u1EA3nh\"\n                (click)=\"downloadImage()\"></libs_ui-components-buttons-button>\n            </div>\n          </div>\n        }\n      </div>\n    </section>\n\n    @if (showEditor) {\n      <div class=\"fixed inset-0 z-50\">\n        <libs_ui-components-image_editor\n          [(imgSrc)]=\"imageSource\"\n          [nameFile]=\"imageName || 'demo-image.jpg'\"\n          [modeShowButton]=\"'save-file'\"\n          [hasZoom]=\"true\"\n          (outSaveFile)=\"onSaveImage($event)\"\n          (outClose)=\"onCloseEditor($event)\"\n          (outFunctionsControl)=\"handleFunctionControl($event)\" />\n      </div>\n    }\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 1: S\u1EED d\u1EE5ng file HTML ri\u00EAng bi\u1EC7t</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [nameFile]=\"'image.jpg'\"\n  [modeShowButton]=\"'save-file'\"\n  (outSaveFile)=\"onSaveFile($event)\"\n  (outClose)=\"onClose($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-example',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n\n  onSaveFile(data: &#123;file: Blob, url: string, mode: string&#125;) &#123;\n    console.log('File \u0111\u00E3 \u0111\u01B0\u1EE3c l\u01B0u:', data);\n  &#125;\n\n  onClose(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    console.log('\u0110\u00E3 \u0111\u00F3ng tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 2: V\u1EDBi tr\u00ECnh ch\u1EC9nh s\u1EEDa c\u00F3 th\u1EC3 \u0111\u00F3ng/m\u1EDF</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (toggle-editor.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;button (click)=\"openEditor()\" class=\"px-4 py-2 bg-blue-500 text-white rounded\"&gt;\n  M\u1EDF tr\u00ECnh ch\u1EC9nh s\u1EEDa \u1EA3nh\n&lt;/button&gt;\n\n&#64;if (showEditor) &#123;\n  &lt;libs_ui-components-image_editor\n    [(imgSrc)]=\"imageSource\"\n    [nameFile]=\"'my-image.jpg'\"\n    (outSaveFile)=\"onSaveFile($event)\"\n    (outClose)=\"onCloseEditor($event)\"&gt;\n  &lt;/libs_ui-components-image_editor&gt;\n&#125;\n\n&#64;if (editedImageUrl) &#123;\n  &lt;div class=\"mt-4\"&gt;\n    &lt;h3 class=\"text-lg font-semibold\"&gt;H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa:&lt;/h3&gt;\n    &lt;img [src]=\"editedImageUrl\" alt=\"H\u00ECnh \u1EA3nh \u0111\u00E3 ch\u1EC9nh s\u1EEDa\" class=\"mt-2 max-w-full h-auto\" /&gt;\n  &lt;/div&gt;\n&#125;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (toggle-editor.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; ISaveFile &#125; from '&#64;libs-ui/components-image-editor';\n\n&#64;Component(&#123;\n  selector: 'app-toggle-editor',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './toggle-editor.component.html'\n&#125;)\nexport class ToggleEditorComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  showEditor = false;\n  editedImageUrl = '';\n\n  openEditor() &#123;\n    this.showEditor = true;\n  &#125;\n\n  onSaveFile(data: ISaveFile) &#123;\n    this.editedImageUrl = data.url;\n    this.showEditor = false;\n    console.log('\u0110\u00E3 l\u01B0u file:', data.file);\n  &#125;\n\n  onCloseEditor(data: &#123;isClickButtonClose: boolean&#125;) &#123;\n    this.showEditor = false;\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"mb-8\">\n        <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">C\u00E1ch 3: V\u1EDBi t\u1EF7 l\u1EC7 khung h\u00ECnh c\u1ED1 \u0111\u1ECBnh</h3>\n\n        <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (fixed-ratio.component.html)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-image_editor\n  [(imgSrc)]=\"imageSource\"\n  [aspectRatio]=\"aspectRatio\"\n  [requiredCropFollowRatio]=\"true\"\n  (outSaveFile)=\"onSaveFile($event)\"&gt;\n&lt;/libs_ui-components-image_editor&gt;</code></pre>\n          </div>\n\n          <div>\n            <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (fixed-ratio.component.ts)</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsImageEditorComponent &#125; from '&#64;libs-ui/components-image-editor';\nimport &#123; IAspectRatio &#125; from '&#64;libs-ui/interfaces-types';\n\n&#64;Component(&#123;\n  selector: 'app-fixed-ratio',\n  standalone: true,\n  imports: [LibsUiComponentsImageEditorComponent],\n  templateUrl: './fixed-ratio.component.html'\n&#125;)\nexport class FixedRatioComponent &#123;\n  imageSource = 'https://example.com/path/to/image.jpg';\n  aspectRatio: IAspectRatio = &#123;\n    key: '1:1',\n    value: 1\n  &#125;;\n\n  onSaveFile(data: any) &#123;\n    console.log('\u0110\u00E3 l\u01B0u h\u00ECnh \u1EA3nh v\u1EDBi t\u1EF7 l\u1EC7 1:1');\n  &#125;\n&#125;</code></pre>\n          </div>\n        </div>\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Inputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (input of inputsDoc; track input.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Outputs</h3>\n      <div class=\"overflow-x-auto mb-8\">\n        <table class=\"min-w-full bg-white border border-gray-200\">\n          <thead>\n            <tr>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u d\u1EEF li\u1EC7u</th>\n              <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (output of outputsDoc; track output.name) {\n              <tr>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.name }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">\n                  <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ output.type }}</code>\n                </td>\n                <td class=\"py-2 px-4 border-b border-gray-200\">{{ output.description }}</td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n\n      <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n      <div class=\"space-y-6\">\n        @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n          <div class=\"bg-gray-50 p-6 rounded-lg\">\n            <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n            <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n            <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n          </div>\n        }\n      </div>\n    </section>\n\n    <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n      <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n      <ul class=\"space-y-6\">\n        @for (feature of features; track feature.id) {\n          <li class=\"flex items-start\">\n            <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n            <div>\n              <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n              <p class=\"text-gray-600\">{{ feature.description }}</p>\n            </div>\n          </li>\n        }\n      </ul>\n    </section>\n  </main>\n</div>\n", styles: ["pre code{@apply font-mono;}.hover\\:bg-blue-600{transition:background-color .2s ease-in-out}.overflow-x-auto{-webkit-overflow-scrolling:touch}pre::-webkit-scrollbar{@apply h-1.5 bg-gray-100;}pre::-webkit-scrollbar-thumb{@apply bg-gray-300 rounded;}button:focus,input:focus{@apply outline-none ring-2 ring-blue-400 ring-opacity-50;}input[type=file]{@apply text-sm text-gray-600;}\n"] }]
+        }], propDecorators: { imageFileInput: [{
+                type: ViewChild,
+                args: ['imageFileInput']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsImageEditorComponent, LibsUiComponentsImageEditorDemoComponent, LibsUiComponentsImageEditorResizeComponent };
+//# sourceMappingURL=libs-ui-components-image-editor.mjs.map