npm - @libs-ui/components-image-editor - Versions diffs - 0.2.162 → 0.2.164 - Mend

@libs-ui/components-image-editor 0.2.162 → 0.2.164

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/esm2022/image-editor.component.mjs +11 -26
package/esm2022/interfaces/image-editor.interface.mjs +1 -1
package/fesm2022/libs-ui-components-image-editor.mjs +10 -25
package/fesm2022/libs-ui-components-image-editor.mjs.map +1 -1
package/image-editor.component.d.ts +2 -2
package/interfaces/image-editor.interface.d.ts +2 -5
package/package.json +12 -2

package/esm2022/interfaces/image-editor.interface.mjs CHANGED Viewed

@@ -1,2 +1,2 @@
 export {};
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtZWRpdG9yLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbWFnZS1lZGl0b3Ivc3JjL2ludGVyZmFjZXMvaW1hZ2UtZWRpdG9yLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBJU2F2ZUZpbGUge1xuICBmaWxlOiBCbG9iO1xuICB1cmw6IHN0cmluZztcbiAgbW9kZTogVFlQRV9NT0RFX1NBVkU7XG59XG5cbmV4cG9ydCB0eXBlIFRZUEVfTU9ERV9TQVZFID0gJ3NhdmUtZmlsZScgfCAnc2F2ZS1hcGknIHwgJ3NhdmUtYXBpLWFzLW5ldy1maWxlJztcbmV4cG9ydCBpbnRlcmZhY2UgSUNyb3BSYXRpb0l0ZW0ge1xuICBrZXk6ICdmcmVlJyB8ICcxOjEnIHwgJzI6MycgfCAnMzoyJyB8ICczOjQnIHwgJzQ6MycgfCAnOToxNicgfCAnMTY6OSc7XG4gIGljb246IHN0cmluZztcbiAgdmFsdWU/OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUFzcGVjdFJhdGlvIHtcbiAga2V5OiBzdHJpbmc7XG4gIHZhbHVlOiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUNyb3BTaXplIHtcbiAgd2lkdGg6IG51bWJlcjtcbiAgaGVpZ2h0OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVJlY3RDbGlwIHtcbiAgdG9wOiBudW1iZXI7XG4gIGxlZnQ6IG51bWJlcjtcbiAgd2lkdGg6IG51bWJlcjtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHJpZ2h0OiBudW1iZXI7XG4gIGJvdHRvbTogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElSZXNpemVEYXRhIHtcbiAgcmF0aW86IG51bWJlcjtcbiAgd2lkdGg6IG51bWJlcjtcbiAgaGVpZ2h0OiBudW1iZXI7XG59XG5cbmV4cG9ydCB0eXBlIFRZUEVfUkVTSVpFX1NUQVRFID0gJ1RMJyB8ICdCTCcgfCAnVFInIHwgJ0JSJyB8ICdWTCcgfCAnVlInIHwgJ0hUJyB8ICdIQicgfCAnbm9uZSc7XG5cblxuZXhwb3J0IGludGVyZmFjZSBJU3RhcnRNb3VzZURpbSB7XG4gIGNsaWVudFg6IG51bWJlcjtcbiAgY2xpZW50WTogbnVtYmVyO1xuICB3aWR0aDogbnVtYmVyO1xuICBoZWlnaHQ6IG51bWJlcjtcbiAgdG9wOiBudW1iZXI7XG4gIGxlZnQ6IG51bWJlcjtcbiAgaW1hZ2VUb3A6IG51bWJlcjtcbiAgaW1hZ2VMZWZ0OiBudW1iZXI7XG4gIGltYWdlV2lkdGg6IG51bWJlcjtcbiAgaW1hZ2VIZWlnaHQ6IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJU3R5bGVzIHtcbiAgd2lkdGg/OiBudW1iZXI7XG4gIGhlaWdodD86IG51bWJlcjtcbiAgdG9wPzogbnVtYmVyO1xuICBsZWZ0PzogbnVtYmVyO1xuICBkaXNwbGF5Pzogc3RyaW5nO1xuICBzcmM/OiBzdHJpbmc7XG4gIGNsaXA/OiBzdHJpbmc7XG59XG5cbmV4cG9ydCB0eXBlIE1PREVfRURJVCA9ICdzYXZlLWZpbGUnIHwgJ3NhdmUtYXBpJztcblxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW1hZ2UtZWRpdG9yLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbWFnZS1lZGl0b3Ivc3JjL2ludGVyZmFjZXMvaW1hZ2UtZWRpdG9yLmludGVyZmFjZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVFlQRV9BU1BFQ1RfUkFUSU8gfSBmcm9tICdAbGlicy11aS9pbnRlcmZhY2VzLXR5cGVzJztcblxuZXhwb3J0IGludGVyZmFjZSBJU2F2ZUZpbGUge1xuICBmaWxlOiBCbG9iO1xuICB1cmw6IHN0cmluZztcbiAgbW9kZTogVFlQRV9NT0RFX1NBVkU7XG59XG5cbmV4cG9ydCB0eXBlIFRZUEVfTU9ERV9TQVZFID0gJ3NhdmUtZmlsZScgfCAnc2F2ZS1hcGknIHwgJ3NhdmUtYXBpLWFzLW5ldy1maWxlJztcbmV4cG9ydCBpbnRlcmZhY2UgSUNyb3BSYXRpb0l0ZW0ge1xuICBrZXk6IFRZUEVfQVNQRUNUX1JBVElPO1xuICBpY29uOiBzdHJpbmc7XG4gIHZhbHVlPzogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElDcm9wU2l6ZSB7XG4gIHdpZHRoOiBudW1iZXI7XG4gIGhlaWdodDogbnVtYmVyO1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElSZWN0Q2xpcCB7XG4gIHRvcDogbnVtYmVyO1xuICBsZWZ0OiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG4gIGhlaWdodDogbnVtYmVyO1xuICByaWdodDogbnVtYmVyO1xuICBib3R0b206IG51bWJlcjtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJUmVzaXplRGF0YSB7XG4gIHJhdGlvOiBudW1iZXI7XG4gIHdpZHRoOiBudW1iZXI7XG4gIGhlaWdodDogbnVtYmVyO1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX1JFU0laRV9TVEFURSA9ICdUTCcgfCAnQkwnIHwgJ1RSJyB8ICdCUicgfCAnVkwnIHwgJ1ZSJyB8ICdIVCcgfCAnSEInIHwgJ25vbmUnO1xuXG5cbmV4cG9ydCBpbnRlcmZhY2UgSVN0YXJ0TW91c2VEaW0ge1xuICBjbGllbnRYOiBudW1iZXI7XG4gIGNsaWVudFk6IG51bWJlcjtcbiAgd2lkdGg6IG51bWJlcjtcbiAgaGVpZ2h0OiBudW1iZXI7XG4gIHRvcDogbnVtYmVyO1xuICBsZWZ0OiBudW1iZXI7XG4gIGltYWdlVG9wOiBudW1iZXI7XG4gIGltYWdlTGVmdDogbnVtYmVyO1xuICBpbWFnZVdpZHRoOiBudW1iZXI7XG4gIGltYWdlSGVpZ2h0OiBudW1iZXI7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgSVN0eWxlcyB7XG4gIHdpZHRoPzogbnVtYmVyO1xuICBoZWlnaHQ/OiBudW1iZXI7XG4gIHRvcD86IG51bWJlcjtcbiAgbGVmdD86IG51bWJlcjtcbiAgZGlzcGxheT86IHN0cmluZztcbiAgc3JjPzogc3RyaW5nO1xuICBjbGlwPzogc3RyaW5nO1xufVxuXG5leHBvcnQgdHlwZSBNT0RFX0VESVQgPSAnc2F2ZS1maWxlJyB8ICdzYXZlLWFwaSc7XG5cbiJdfQ==

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

@@ -7,7 +7,7 @@ import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
 import { LibsUiComponentsSpinnerComponent } from '@libs-ui/components-spinner';
 import { LibsUiDynamicComponentService } from '@libs-ui/services-dynamic-component';
-import { get, convertBase64ToBlob, getLabelBySizeFile, convertBlobToFile, isNil, LINK_IMAGE_ERROR_TOKEN_INJECT } from '@libs-ui/utils';
+import { 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 { Subject, fromEvent } from 'rxjs';
@@ -939,27 +939,13 @@ class LibsUiComponentsImageEditorComponent {
         this.imageClip().nativeElement.style.clip = `rect(${top}px, ${right}px, ${bottom}px, ${left}px)`;
     }
     setStylesElements(element, styles, isUpdateRectClipPos) {
-        if (!isNil(styles.top)) {
-            element.nativeElement.style.top = `${styles.top}px`;
-        }
-        if (!isNil(styles.left)) {
-            element.nativeElement.style.left = `${styles.left}px`;
-        }
-        if (!isNil(styles.width)) {
-            element.nativeElement.style.width = `${styles.width}px`;
-        }
-        if (!isNil(styles.height)) {
-            element.nativeElement.style.height = `${styles.height}px`;
-        }
-        if (!isNil(styles.display)) {
-            element.nativeElement.style.display = styles.display;
-        }
-        if (!isNil(styles.src)) {
-            element.nativeElement.src = styles.src;
-        }
-        if (!isNil(styles.clip)) {
-            element.nativeElement.style.clip = styles.clip;
-        }
+        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();
         }
@@ -968,17 +954,16 @@ class LibsUiComponentsImageEditorComponent {
         this.onDestroy.next();
         this.onDestroy.complete();
         this.dynamicComponentService.remove(this.resizeComponentRef);
-        // this.dynamicComponentService.remove(this.forwardComponentRef);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorComponent, deps: [{ token: LINK_IMAGE_ERROR_TOKEN_INJECT, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsImageEditorComponent, isStandalone: true, selector: "libs_ui-components-image_editor", inputs: { modeShowButton: { classPropertyName: "modeShowButton", publicName: "modeShowButton", isSignal: true, isRequired: false, transformFunction: null }, mimetype: { classPropertyName: "mimetype", publicName: "mimetype", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, originUrl: { classPropertyName: "originUrl", publicName: "originUrl", isSignal: true, isRequired: false, transformFunction: null }, nameFile: { classPropertyName: "nameFile", publicName: "nameFile", isSignal: true, isRequired: false, transformFunction: null }, hasZoom: { classPropertyName: "hasZoom", publicName: "hasZoom", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, requiredCropFollowRatio: { classPropertyName: "requiredCropFollowRatio", publicName: "requiredCropFollowRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imgSrc: "imgSrcChange", aspectRatio: "aspectRatioChange", outClose: "outClose", outSaveFile: "outSaveFile", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "imageOrigin", first: true, predicate: ["imageOrigin"], descendants: true, isSignal: true }, { propertyName: "imageClip", first: true, predicate: ["imageClip"], descendants: true, isSignal: true }, { propertyName: "imageEditorContainer", first: true, predicate: ["imageEditorContainer"], descendants: true, isSignal: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true, isSignal: true }, { propertyName: "cropArea", first: true, predicate: ["cropArea"], descendants: true, isSignal: true }, { propertyName: "cropTL", first: true, predicate: ["cropTL"], descendants: true, isSignal: true }, { propertyName: "cropBL", first: true, predicate: ["cropBL"], descendants: true, isSignal: true }, { propertyName: "cropBR", first: true, predicate: ["cropBR"], descendants: true, isSignal: true }, { propertyName: "cropTR", first: true, predicate: ["cropTR"], descendants: true, isSignal: true }, { propertyName: "cropLineVL", first: true, predicate: ["cropLineVL"], descendants: true, isSignal: true }, { propertyName: "cropLineVR", first: true, predicate: ["cropLineVR"], descendants: true, isSignal: true }, { propertyName: "cropLineHT", first: true, predicate: ["cropLineHT"], descendants: true, isSignal: true }, { propertyName: "cropLineHB", first: true, predicate: ["cropLineHB"], descendants: true, isSignal: true }, { propertyName: "circleTL", first: true, predicate: ["circleTL"], descendants: true, isSignal: true }, { propertyName: "circleTR", first: true, predicate: ["circleTR"], descendants: true, isSignal: true }, { propertyName: "circleBL", first: true, predicate: ["circleBL"], descendants: true, isSignal: true }, { propertyName: "circleBR", first: true, predicate: ["circleBR"], descendants: true, isSignal: true }], ngImport: i0, template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] top-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] bottom-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 left-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 right-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[33px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[66px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[33px]\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[66px]\">\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n    <div class=\"w-[320px] shrink-0 p-[16px] bg-[#ffffff] rounded-br-[8px] z-[2]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              (outClick)=\"handlerSelectCropRatioItem($event, item.key)\" />\n            <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n              {{ (item.key === 'free' ? 'i18n_custom' : item.key) | translate }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"mb-[16px] flex\">\n        <libs_ui-components-inputs-valid class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-cursor-ew-resize{cursor:ew-resize!important}.libs-ui-image-editor-edit-cursor-ns-resize{cursor:ns-resize!important}.libs-ui-image-editor-edit-cursor-nwse-resize{cursor:nwse-resize!important}.libs-ui-image-editor-edit-cursor-nesw-resize{cursor:nesw-resize!important}.libs-ui-image-editor-edit-action-item{display:flex;flex-direction:column;align-items:center;width:60px;cursor:pointer}.libs-ui-image-editor-edit-action-item-icon{padding:12px;border-radius:8px;width:max-content;border:1px solid #e6e7ea}.libs-ui-image-editor-edit-action-item-icon:before{font-size:20px}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-hover)}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-bright-20)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-active)!important;background-color:var(--mo-global-color-primary-background-95)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-active)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsImageEditorComponent, isStandalone: true, selector: "libs_ui-components-image_editor", inputs: { modeShowButton: { classPropertyName: "modeShowButton", publicName: "modeShowButton", isSignal: true, isRequired: false, transformFunction: null }, mimetype: { classPropertyName: "mimetype", publicName: "mimetype", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, imgSrc: { classPropertyName: "imgSrc", publicName: "imgSrc", isSignal: true, isRequired: true, transformFunction: null }, originUrl: { classPropertyName: "originUrl", publicName: "originUrl", isSignal: true, isRequired: false, transformFunction: null }, nameFile: { classPropertyName: "nameFile", publicName: "nameFile", isSignal: true, isRequired: false, transformFunction: null }, hasZoom: { classPropertyName: "hasZoom", publicName: "hasZoom", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, requiredCropFollowRatio: { classPropertyName: "requiredCropFollowRatio", publicName: "requiredCropFollowRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { imgSrc: "imgSrcChange", aspectRatio: "aspectRatioChange", outClose: "outClose", outSaveFile: "outSaveFile", outFunctionsControl: "outFunctionsControl" }, viewQueries: [{ propertyName: "imageOrigin", first: true, predicate: ["imageOrigin"], descendants: true, isSignal: true }, { propertyName: "imageClip", first: true, predicate: ["imageClip"], descendants: true, isSignal: true }, { propertyName: "imageEditorContainer", first: true, predicate: ["imageEditorContainer"], descendants: true, isSignal: true }, { propertyName: "imageContainer", first: true, predicate: ["imageContainer"], descendants: true, isSignal: true }, { propertyName: "cropArea", first: true, predicate: ["cropArea"], descendants: true, isSignal: true }, { propertyName: "cropTL", first: true, predicate: ["cropTL"], descendants: true, isSignal: true }, { propertyName: "cropBL", first: true, predicate: ["cropBL"], descendants: true, isSignal: true }, { propertyName: "cropBR", first: true, predicate: ["cropBR"], descendants: true, isSignal: true }, { propertyName: "cropTR", first: true, predicate: ["cropTR"], descendants: true, isSignal: true }, { propertyName: "cropLineVL", first: true, predicate: ["cropLineVL"], descendants: true, isSignal: true }, { propertyName: "cropLineVR", first: true, predicate: ["cropLineVR"], descendants: true, isSignal: true }, { propertyName: "cropLineHT", first: true, predicate: ["cropLineHT"], descendants: true, isSignal: true }, { propertyName: "cropLineHB", first: true, predicate: ["cropLineHB"], descendants: true, isSignal: true }, { propertyName: "circleTL", first: true, predicate: ["circleTL"], descendants: true, isSignal: true }, { propertyName: "circleTR", first: true, predicate: ["circleTR"], descendants: true, isSignal: true }, { propertyName: "circleBL", first: true, predicate: ["circleBL"], descendants: true, isSignal: true }, { propertyName: "circleBR", first: true, predicate: ["circleBR"], descendants: true, isSignal: true }], ngImport: i0, template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] cursor-ns-resize\">\n            </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]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              [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 class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-action-item{display:flex;flex-direction:column;align-items:center;width:60px;cursor:pointer}.libs-ui-image-editor-edit-action-item-icon{padding:12px;border-radius:8px;width:max-content;border:1px solid #e6e7ea}.libs-ui-image-editor-edit-action-item-icon:before{font-size:20px}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-hover)}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-bright-20)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-active)!important;background-color:var(--mo-global-color-primary-background-95)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-active)!important}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsModalComponent, selector: "libs_ui-components-modal", inputs: ["show", "mode", "isBackdropTransparent", "isBackgroundTransparentModal", "isSizeBackdropByWidthHeightInput", "hasShadowBoxWhenHiddenBackDropTransparent", "classIncludeModalWrapper", "zIndex", "width", "height", "maxWidth", "maxHeight", "minWidth", "isFullScreen", "disable", "ignoreCommunicateMicroEvent", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsSpinnerComponent, selector: "libs_ui-components-spinner", inputs: ["type", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsImageEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'libs_ui-components-image_editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
                         NgTemplateOutlet, TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsModalComponent,
                         LibsUiComponentsInputsValidComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsSpinnerComponent,
-                    ], template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[5]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] libs-ui-image-editor-edit-cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] libs-ui-image-editor-edit-cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 libs-ui-image-editor-edit-cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] libs-ui-image-editor-edit-cursor-ns-resize\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] top-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[1px] bottom-0 left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 left-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[1px] top-0 right-0 bottom-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[33px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] h-[2px] top-[66px] left-0 right-0\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[33px]\">\n            </div>\n            <div class=\"absolute z-[1] w-[2px] top-0 bottom-0 left-[66px]\">\n            </div>\n          </div>\n        </div>\n      </div>\n      @if (loading()) {\n        <libs_ui-components-spinner [size]=\"'medium'\" />\n      }\n    </div>\n    <div class=\"w-[320px] shrink-0 p-[16px] bg-[#ffffff] rounded-br-[8px] z-[2]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              (outClick)=\"handlerSelectCropRatioItem($event, item.key)\" />\n            <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n              {{ (item.key === 'free' ? 'i18n_custom' : item.key) | translate }}\n            </div>\n          </div>\n        }\n      </div>\n      <div class=\"mb-[16px] flex\">\n        <libs_ui-components-inputs-valid class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-cursor-ew-resize{cursor:ew-resize!important}.libs-ui-image-editor-edit-cursor-ns-resize{cursor:ns-resize!important}.libs-ui-image-editor-edit-cursor-nwse-resize{cursor:nwse-resize!important}.libs-ui-image-editor-edit-cursor-nesw-resize{cursor:nesw-resize!important}.libs-ui-image-editor-edit-action-item{display:flex;flex-direction:column;align-items:center;width:60px;cursor:pointer}.libs-ui-image-editor-edit-action-item-icon{padding:12px;border-radius:8px;width:max-content;border:1px solid #e6e7ea}.libs-ui-image-editor-edit-action-item-icon:before{font-size:20px}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-hover)}.libs-ui-image-editor-edit-action-item:hover .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-bright-20)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon{border:1px solid var(--mo-global-color-primary-border-active)!important;background-color:var(--mo-global-color-primary-background-95)!important}.libs-ui-image-editor-edit-action-item[active=true] .libs-ui-image-editor-edit-action-item-icon:before{color:var(--mo-global-color-primary-text-active)!important}\n"] }]
+                    ], template: "<libs_ui-components-modal [width]=\"'calc(100vw - 400px)'\"\n  [height]=\"'calc(100vh - 100px)'\"\n  [minWidth]=\"'1200px'\"\n  [headerConfig]=\"{ignoreHeaderTheme: true, removeButtonClose: true}\"\n  [bodyConfig]=\"{classInclude: '!p-0', scrollOverlayOptions: {scrollX: 'hidden', scrollY: 'hidden'}}\"\n  [footerConfig]=\"{hidden: true}\"\n  [zIndex]=\"zIndex()\"\n  [buttonsFooter]=\"[]\"\n  [mode]=\"'center'\">\n  <div class=\"libs-ui-modal-header-custom w-full flex items-center justify-between\">\n    <div class=\"w-full relative mx-[24px] h-[16px]\">\n      <div class=\"flex w-full libs-ui-font-h4s absolute\">\n        <libs_ui-components-popover [type]=\"'text'\"\n          [config]=\"{zIndex: zIndex()}\">\n          {{ 'i18n_edit_file_name' | translate:{file_name: nameFile()} }}\n        </libs_ui-components-popover>\n      </div>\n    </div>\n    <div class=\"flex items-center\">\n      @if (modeShowButton() === 'save-file') {\n        <libs_ui-components-buttons-button [type]=\"'button-third'\"\n          [label]=\"'i18n_cancel'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px] mr-[16px]'\"\n          (outClick)=\"handlerClose($event)\" />\n\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [label]=\"'i18n_save'\"\n          [disable]=\"loading() || loadingImage()\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          (outClick)=\"handlerSaveFile($event,'save-file')\" />\n      }\n      @else {\n        <libs_ui-components-buttons-button [label]=\"'i18n_save_to_new_file'\"\n          [type]=\"'button-outline'\"\n          [classInclude]=\"'mx-[16px] py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api-as-new-file')\" />\n        <libs_ui-components-buttons-button [type]=\"'button-secondary'\"\n          [label]=\"'i18n_save'\"\n          [classInclude]=\"'py-[6px] px-[12px]'\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerSaveFile($event,'save-api')\" />\n        <div class=\"h-[12px] libs-ui-border-left-general mx-[16px]\"></div>\n        <libs_ui-components-buttons-button class=\"mr-[24px]\"\n          [classInclude]=\"'p-[6px]'\"\n          [type]=\"'button-third-hover-danger'\"\n          [iconOnlyType]=\"true\"\n          [disable]=\"loading()\"\n          [popover]=\"{config: {content: 'i18n_exit_edit_mode', zIndex: zIndex()}}\"\n          [classIconLeft]=\"'libs-ui-icon-close'\"\n          (outClick)=\"handlerClose($event)\" />\n      }\n    </div>\n  </div>\n  <div class=\"libs-ui-modal-body-custom h-full w-full flex\">\n    <div #imageEditorContainer\n      class=\"relative w-full h-full bg-[#e6e7ea] border-radius-bottom-left-8px p-[32px]\">\n      @if (loadingImage()) {\n        <div class=\"absolute h-full w-full bg-[#e6e7ea] top-0 left-0 z-[5]\">\n          <libs_ui-components-spinner [size]=\"'medium'\" />\n        </div>\n      }\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] top-0 left-[32px] z-[1]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] left-0 top-0 z-[1] rounded-bl-[8px]\">\n      </div>\n      <div class=\"absolute w-[32px] h-full bg-[#e6e7eab8] right-0 top-0 z-[1]\">\n      </div>\n      <div class=\"absolute h-[32px] w-[calc(100%-64px)] bg-[#e6e7eab8] bottom-0 left-[32px] z-[1]\">\n      </div>\n      <div #imageContainer\n        class=\"relative w-full h-full rounded-bl-[8px] min-h-0\">\n        <div #circleTL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleTR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBL\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <div #circleBR\n          class=\"absolute z-[1]\"\n          [class.hidden]=\"!dragGridCrop()\"\n          [class.flex]=\"dragGridCrop()\">\n          <ng-template *ngTemplateOutlet=\"svgCircle\" />\n        </div>\n        <img #imageOrigin\n          class=\"absolute border-[4px] border-[#8e61ee] rounded-[4px] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (load)=\"handlerImageLoaded()\"\n          (error)=\"handlerImageError($event)\" />\n        <img #imageClip\n          class=\"absolute z-[1] w-0 h-0\"\n          loading=\"lazy\"\n          [src]=\"imgSrc()\"\n          (error)=\"handlerImageError($event)\" />\n        <div class=\"absolute top-0 left-0 right-0 bottom-0 bg-[#e6e7eab8]\">\n        </div>\n        <div #cropArea\n          class=\"absolute z-[2] border-[4px] border-[#8e61ee] rounded-[4px]\">\n          <div class=\"relative w-full h-full\">\n            <div #cropTL\n              class=\"absolute z-[2] left-[-18px] top-[-17px] cursor-nwse-resize\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBL\n              class=\"absolute z-[2] left-[-17px] bottom-[-18px] cursor-nesw-resize rotate-[270deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropTR\n              class=\"absolute z-[2] right-[-17px] top-[-17px] cursor-nesw-resize rotate-[90deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropBR\n              class=\"absolute z-[2] right-[-18px] bottom-[-17px] cursor-nwse-resize rotate-[180deg]\">\n              <ng-template *ngTemplateOutlet=\"svgArrow\" />\n            </div>\n            <div #cropLineVL\n              class=\"absolute z-[1] w-[12px] left-[-6px] top-0 bottom-0 cursor-ew-resize\">\n            </div>\n            <div #cropLineVR\n              class=\"absolute z-[1] w-[12px] right-[-6px] top-0 bottom-0 cursor-ew-resize\">\n            </div>\n            <div #cropLineHT\n              class=\"absolute z-[1] h-[12px] left-0 top-[-6px] right-0 cursor-ns-resize\">\n            </div>\n            <div #cropLineHB\n              class=\"absolute z-[1] h-[12px] left-0 right-0 bottom-[-6px] cursor-ns-resize\">\n            </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]\">\n      <div class=\"flex items-center justify-between mb-[16px]\">\n        <div class=\"libs-ui-font-h4m\">{{ 'i18n_cutting_ratio' | translate }}</div>\n        <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n          [type]=\"'button-third'\"\n          [classIconLeft]=\"'libs-ui-icon-refresh'\"\n          [classInclude]=\"'p-[6px] mr-[8px]'\"\n          [popover]=\"{config: {content: 'i18n_restore_the_original_state', zIndex: zIndex()}}\"\n          [disable]=\"loading() || loadingImage() || !changed()\"\n          (outClick)=\"handlerRestoreImage($event)\" />\n      </div>\n      <div class=\"mb-[16px] libs-ui-image-editor-edit-display-grid-gap-16\">\n        @for (item of cropRatioItems(); track item.key) {\n          <div class=\"flex flex-col items-center\">\n            <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n              [sizeButton]=\"'large'\"\n              [disable]=\"loading() || loadingImage() || requiredCropFollowRatio()\"\n              [type]=\"'button-outline'\"\n              [classIconLeft]=\"item.icon+' !text-[20px]'\"\n              [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 class=\"mr-[16px]\"\n          [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_width', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'width'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originWidth()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropWidth()\" />\n        <libs_ui-components-inputs-valid [dataType]=\"'int'\"\n          [labelConfig]=\"{labelLeft: 'i18n_length', classInclude: 'mb-[4px]', labelLeftClass: 'libs-ui-font-h7r'}\"\n          [fieldNameBind]=\"'height'\"\n          [(item)]=\"cropSize\"\n          [unitsRight]=\"[{id: 'px', label: 'px'}]\"\n          [keySelectedUnitRight]=\"'px'\"\n          [valueUpDownNumber]=\"1\"\n          [maxValueNumber]=\"originHeight()\"\n          [disable]=\"loading() || loadingImage()\"\n          (outValueChange)=\"handlerCropHeight()\" />\n      </div>\n      <div class=\"libs-ui-font-h4m mb-[16px]\">{{ 'i18n_rotate_photos' | translate }}</div>\n      <div class=\"flex libs-ui-image-editor-edit-display-grid-gap-16\">\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-rotate-image-outline !text-[20px]'\"\n            (outClick)=\"handlerRotateImage($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_rotate_ninety_degrees' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-vertical !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'vertical')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_vertical_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-flip-horizontal !text-[20px]'\"\n            (outClick)=\"handlerFlipImage($event, 'horizontal')\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_horizontal_flip' | translate }}\n          </div>\n        </div>\n\n        <div class=\"flex flex-col items-center\">\n          <libs_ui-components-buttons-button [iconOnlyType]=\"true\"\n            [sizeButton]=\"'large'\"\n            [disable]=\"loading() || loadingImage()\"\n            [type]=\"'button-outline'\"\n            [classIconLeft]=\"'libs-ui-icon-scale !text-[20px]'\"\n            (outClick)=\"handlerResize($event)\" />\n          <div class=\"libs-ui-font-h6r text-[#6a7383] mt-[4px]\">\n            {{ 'i18n_resize' | translate }}\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</libs_ui-components-modal>\n\n<ng-template #svgArrow>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"40\"\n    height=\"40\"\n    viewBox=\"0 0 40 40\"\n    fill=\"none\">\n    <path d=\"M33.6987 14.6969L18.3309 14.6969C16.516 14.6969 15.0311 16.1818 15.0311 17.9967L15.0311 33.3645\"\n      stroke=\"white\"\n      stroke-width=\"5.83333\"\n      stroke-miterlimit=\"10\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\" />\n  </svg>\n</ng-template>\n\n<ng-template #svgCircle>\n  <svg xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"15\"\n    height=\"15\"\n    viewBox=\"0 0 15 15\"\n    fill=\"none\">\n    <circle cx=\"7.5\"\n      cy=\"7.5\"\n      r=\"7.5\"\n      fill=\"white\" />\n  </svg>\n</ng-template>\n", styles: [".libs-ui-image-editor-edit-display-grid-gap-16{display:grid;gap:16px;grid-template-columns:1fr 1fr 1fr 1fr}.libs-ui-image-editor-edit-top-33{top:33.33%}.libs-ui-image-editor-edit-top-66{top:66.66%}.libs-ui-image-editor-edit-left-33{left:33.33%}.libs-ui-image-editor-edit-left-66{left:66.66%}.libs-ui-image-editor-edit-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
                 }, {