@libs-ui/components-image-editor 0.2.356-4 → 0.2.356-40

package/esm2022/resize/resize.component.mjs

@@ -1,8 +1,8 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { getDataUrl } from '../defines/image-editor.define';
 import { TranslateModule } from '@ngx-translate/core';
-import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
+import { LibsUiComponentsModalComponent } from '@libs-ui/components-modal';
 import { convertBase64ToBlob, convertBlobToFile, getLabelBySizeFile } from '@libs-ui/utils';
 import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
@@ -53,7 +53,6 @@ export class LibsUiComponentsImageEditorResizeComponent {
         }
         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() {
@@ -97,7 +96,7 @@ export class LibsUiComponentsImageEditorResizeComponent {
         }
     }
     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", "escapeKeyboardCloseModal", "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"] }] });
+    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", "escapeKeyboardCloseModal", "isClickOutsideClose", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl", "outClose"] }, { 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", "ignoreShowMessageError", "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,
@@ -123,4 +122,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             }], outSave: [{
                 type: Output
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXplLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbWFnZS1lZGl0b3Ivc3JjL3Jlc2l6ZS9yZXNpemUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2ltYWdlLWVkaXRvci9zcmMvcmVzaXplL3Jlc2l6ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFJdEQsT0FBTyxFQUFFLDhCQUE4QixFQUFvQixNQUFNLDJCQUEyQixDQUFDO0FBQzdGLE9BQU8sRUFBRSxvQ0FBb0MsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ3hGLE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxpQkFBaUIsRUFBRSxrQkFBa0IsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7QUFTNUYsTUFBTSxPQUFPLDBDQUEwQztJQUMzQyxhQUFhLENBQWlCO0lBQzlCLEtBQUssR0FBRyxJQUFJLEtBQUssRUFBRSxDQUFDO0lBQ3BCLGNBQWMsQ0FBVTtJQUN4QixlQUFlLENBQVU7SUFFM0IseUJBQXlCLENBQXlDO0lBRS9DLFVBQVUsQ0FBZTtJQUN6QixXQUFXLENBQVU7SUFDckIsWUFBWSxDQUFVO0lBQ3RCLEdBQUcsQ0FBVTtJQUMvQixNQUFNLENBQVU7SUFDaEIsUUFBUSxDQUFVO0lBRVIsUUFBUSxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7SUFDcEMsT0FBTyxHQUFHLElBQUksWUFBWSxFQUFlLENBQUM7SUFFN0Q7UUFDRSxJQUFJLENBQUMsYUFBYSxH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RyxhQUFhLEVBQUUsQ0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2xGLElBQUksQ0FBQyxlQUFlLEdBQUcsTUFBTSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEQsQ0FBQztJQUVTLGdDQUFnQyxDQUFDLEtBQXNDO1FBQy9FLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVTLFlBQVksQ0FBQyxLQUF1QjtRQUM1QyxJQUFJLEtBQUssS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDO3dHQTFHVSwwQ0FBMEM7NEZBQTFDLDBDQUEwQyw2U0NqQnZELG8yR0E0RUEsMkNEN0RZLGVBQWUsNEZBQUUsOEJBQThCLCt1QkFBRSxvQ0FBb0M7OzRGQUVwRiwwQ0FBMEM7a0JBUHRELFNBQVM7K0JBRUUsd0NBQXdDLGNBRXRDLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSw4QkFBOEIsRUFBRSxvQ0FBb0MsQ0FBQzt3REFVckUsVUFBVTtzQkFBcEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsV0FBVztzQkFBckMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsWUFBWTtzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsR0FBRztzQkFBN0IsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ2hCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVhLFFBQVE7c0JBQTFCLE1BQU07Z0JBQ1ksT0FBTztzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGdldERhdGFVcmwgfSBmcm9tICcuLi9kZWZpbmVzL2ltYWdlLWVkaXRvci5kZWZpbmUnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbic7XG5pbXBvcnQgeyBJSW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbEV2ZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1pbnB1dHMtdmFsaWQnO1xuaW1wb3J0IHsgSVJlc2l6ZURhdGEgfSBmcm9tICcuLi9pbnRlcmZhY2VzL2ltYWdlLWVkaXRvci5pbnRlcmZhY2UnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c01vZGFsQ29tcG9uZW50LCBUWVBFX01PREFMX0VWRU5UIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1tb2RhbCc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzSW5wdXRzVmFsaWRDb21wb25lbnQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLWlucHV0cy12YWxpZCc7XG5pbXBvcnQgeyBjb252ZXJ0QmFzZTY0VG9CbG9iLCBjb252ZXJ0QmxvYlRvRmlsZSwgZ2V0TGFiZWxCeVNpemVGaWxlIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzLXVpLWNvbXBvbmVudHMtaW1hZ2VfZWRpdG9yLXJlc2l6ZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9yZXNpemUuY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbVHJhbnNsYXRlTW9kdWxlLCBMaWJzVWlDb21wb25lbnRzTW9kYWxDb21wb25lbnQsIExpYnNVaUNvbXBvbmVudHNJbnB1dHNWYWxpZENvbXBvbmVudF0sXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNJbWFnZUVkaXRvclJlc2l6ZUNvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIHByb3RlY3RlZCBidXR0b25zRm9vdGVyOiBBcnJheTxJQnV0dG9uPjtcbiAgcHJvdGVjdGVkIGltYWdlID0gbmV3IEltYWdlKCk7XG4gIHByb3RlY3RlZCBvcmlnaW5GaWxlU2l6ZSE6IHN0cmluZztcbiAgcHJvdGVjdGVkIGN1cnJlbnRGaWxlU2l6ZSE6IHN0cmluZztcblxuICBwcml2YXRlIGlucHV0VmFsaWRGdW5jdGlvbkNvbnRyb2w6IEFycmF5PElJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sRXZlbnQ+O1xuXG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIHJlc2l6ZURhdGEhOiBJUmVzaXplRGF0YTtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgb3JpZ2luV2lkdGghOiBudW1iZXI7XG4gIEBJbnB1dCh7IHJlcXVpcmVkOiB0cnVlIH0pIG9yaWdpbkhlaWdodCE6IG51bWJlcjtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgc3JjITogc3RyaW5nO1xuICBASW5wdXQoKSB6SW5kZXg/OiBudW1iZXI7XG4gIEBJbnB1dCgpIG1pbWV0eXBlPzogc3RyaW5nO1xuXG4gIEBPdXRwdXQoKSByZWFkb25seSBvdXRDbG9zZSA9IG5ldyBFdmVudEVtaXR0ZXI8dm9pZD4oKTtcbiAgQE91dHB1dCgpIHJlYWRvbmx5IG91dFNhdmUgPSBuZXcgRXZlbnRFbWl0dGVyPElSZXNpemVEYXRhPigpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIHRoaXMuYnV0dG9uc0Zvb3RlciA9IFtcbiAgICAgIHtcbiAgICAgICAgdHlwZTogJ2J1dHRvbi10aGlyZCcsXG4gICAgICAgIGxhYmVsOiAnaTE4bl9jYW5jZWwnLFxuICAgICAgICBhY3Rpb246IGFzeW5jICgpID0+IHRoaXMub3V0Q2xvc2UuZW1pdCgpLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgbGFiZWw6ICdpMThuX3NhdmUnLFxuICAgICAgICBhY3Rpb246IGFzeW5jICgpID0+IHtcbiAgICAgICAgICB0aGlzLm91dFNhdmUuZW1pdCh0aGlzLnJlc2l6ZURhdGEpO1xuICAgICAgICAgIHRoaXMub3V0Q2xvc2UuZW1pdCgpO1xuICAgICAgICB9LFxuICAgICAgfSxcbiAgICBdO1xuICAgIHRoaXMuaW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbCA9IFtdO1xuICB9XG5cbiAgYXN5bmMgbmdPbkluaXQoKTogUHJvbWlzZTx2b2lkPiB7XG4gICAgY29uc3QgZmlsZVNpemUgPSBhd2FpdCB0aGlzLmdldEZpbGVTaXplKCk7XG5cbiAgICB0aGlzLmN1cnJlbnRGaWxlU2l6ZSA9IGZpbGVTaXplO1xuICAgIHRoaXMub3JpZ2luRmlsZVNpemUgPSBmaWxlU2l6ZTtcbiAgfVxuXG4gIHByb3RlY3RlZCBhc3luYyBoYW5kbGVyUmVzaXplUmF0aW8oKSB7XG4gICAgbGV0IHJhdGlvID0gcGFyc2VJbnQoYCR7dGhpcy5yZXNpemVEYXRhLnJhdGlvfWApO1xuXG4gICAgaWYgKCFyYXRpbyB8fCByYXRpbyA8IDApIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHJhdGlvID4gMTAwKSB7XG4gICAgICByYXRpbyA9IDEwMDtcbiAgICAgIHRoaXMucmVzaXplRGF0YS5yYXRpbyA9IHJhdGlvO1xuICAgIH1cbiAgICB0aGlzLnJlc2l6ZURhdGEud2lkdGggPSBNYXRoLm1heChwYXJzZUludChgJHsodGhpcy5vcmlnaW5XaWR0aCAqIHJhdGlvKSAvIDEwMH1gKSwgMSk7XG4gICAgdGhpcy5yZXNpemVEYXRhLmhlaWdodCA9IE1hdGgubWF4KHBhcnNlSW50KGAkeyh0aGlzLm9yaWdpbkhlaWdodCAqIHJhdGlvKSAvIDEwMH1gKSwgMSk7XG4gICAgLy8gdGhpcy5pbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sLmZvckVhY2goaXRlbSA9PiBpdGVtLmRldGVjdENoYW5nZXMoKSk7XG4gICAgdGhpcy5jdXJyZW50RmlsZVNpemUgPSBhd2FpdCB0aGlzLmdldEZpbGVTaXplKCk7XG4gIH1cblxuICBwcml2YXRlIGdldEZpbGVTaXplKCkge1xuICAgIHJldHVybiBuZXcgUHJvbWlzZTxzdHJpbmc+KChyZXNvbHZlKSA9PiB7XG4gICAgICB0aGlzLmltYWdlLm9ubG9hZCA9ICgpID0+IHtcbiAgICAgICAgY29uc3QgY2FudmFzID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnY2FudmFzJyk7XG5cbiAgICAgICAgY2FudmFzLndpZHRoID0gdGhpcy5yZXNpemVEYXRhLndpZHRoO1xuICAgICAgICBjYW52YXMuaGVpZ2h0ID0gdGhpcy5yZXNpemVEYXRhLmhlaWdodDtcbiAgICAgICAgY29uc3QgY3R4ID0gY2FudmFzLmdldENvbnRleHQoJzJkJyk7XG4gICAgICAgIGlmIChjdHgpIHtcbiAgICAgICAgICBjdHguZHJhd0ltYWdlKHRoaXMuaW1hZ2UsIDAsIDAsIGNhbnZhcy53aWR0aCwgY2FudmFzLmhlaWdodCk7XG4gICAgICAgIH1cbiAgICAgICAgY29uc3Qgc3JjID0gZ2V0RGF0YVVybChjYW52YXMsIHRoaXMubWltZXR5cGUsIHRoaXMuc3JjKTtcbiAgICAgICAgY29uc3QgZmlsZSA9IGNvbnZlcnRCYXNlNjRUb0Jsb2Ioc3JjKTtcblxuICAgICAgICByZXNvbHZlKGdldExhYmVsQnlTaXplRmlsZShjb252ZXJ0QmxvYlRvRmlsZShmaWxlLCBEYXRlLm5vdygpLnRvTG9jYWxlU3RyaW5nKCkpLnNpemUpKTtcbiAgICAgIH07XG4gICAgICB0aGlzLmltYWdlLnNyYyA9IHRoaXMuc3JjO1xuICAgIH0pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJSZXNpemVXaWR0aCgpIHtcbiAgICB0aGlzLnByb2Nlc3NSZXNpemVXaWR0aE9ySGVpZ2h0KCd3aWR0aCcsICdoZWlnaHQnLCB0aGlzLm9yaWdpbldpZHRoLCB0aGlzLm9yaWdpbkhlaWdodCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlclJlc2l6ZUhlaWdodCgpIHtcbiAgICB0aGlzLnByb2Nlc3NSZXNpemVXaWR0aE9ySGVpZ2h0KCdoZWlnaHQnLCAnd2lkdGgnLCB0aGlzLm9yaWdpbkhlaWdodCwgdGhpcy5vcmlnaW5XaWR0aCk7XG4gIH1cblxuICBwcml2YXRlIGFzeW5jIHByb2Nlc3NSZXNpemVXaWR0aE9ySGVpZ2h0KHJlc2l6ZUJ5OiAnd2lkdGgnIHwgJ2hlaWdodCcsIGZpZWxkUmVzaXplOiAnd2lkdGgnIHwgJ2hlaWdodCcsIG9yaWdpbkJ5VmFsdWU6IG51bWJlciwgb3JpZ2luT3RoZXJWYWx1ZTogbnVtYmVyKSB7XG4gICAgY29uc3QgdmFsdWUgPSBwYXJzZUludChgJHt0aGlzLnJlc2l6ZURhdGFbcmVzaXplQnldfWApO1xuXG4gICAgaWYgKCF2YWx1ZSB8fCB2YWx1ZSA+IG9yaWdpbkJ5VmFsdWUpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5yZXNpemVEYXRhW2ZpZWxkUmVzaXplXSA9IE1hdGgubWF4KHBhcnNlSW50KGAkeyhvcmlnaW5PdGhlclZhbHVlICogdmFsdWUpIC8gb3JpZ2luQnlWYWx1ZX1gKSwgMSk7XG4gICAgdGhpcy5yZXNpemVEYXRhLnJhdGlvID0gTWF0aC5tYXgocGFyc2VJbnQoYCR7KDEwMCAqIHZhbHVlKSAvIG9yaWdpbkJ5VmFsdWV9YCksIDEpO1xuICAgIHRoaXMuY3VycmVudEZpbGVTaXplID0gYXdhaXQgdGhpcy5nZXRGaWxlU2l6ZSgpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sKGV2ZW50OiBJSW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbEV2ZW50KSB7XG4gICAgdGhpcy5pbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sLnB1c2goZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJFdmVudChldmVudDogVFlQRV9NT0RBTF9FVkVOVCkge1xuICAgIGlmIChldmVudCA9PT0gJ2Nsb3NlJykge1xuICAgICAgdGhpcy5vdXRDbG9zZS5lbWl0KCk7XG4gICAgfVxuICB9XG59XG4iLCI8bGlic191aS1jb21wb25lbnRzLW1vZGFsXG4gIFtoZWFkZXJDb25maWddPVwieyBpZ25vcmVIZWFkZXJUaGVtZTogdHJ1ZSB9XCJcbiAgW21vZGVdPVwiJ2NlbnRlcidcIlxuICBbd2lkdGhdPVwiJzUwMHB4J1wiXG4gIFtoZWlnaHRdPVwiJ2F1dG8nXCJcbiAgW3RpdGxlXT1cIidpMThuX3Jlc2l6ZScgfCB0cmFuc2xhdGVcIlxuICBbekluZGV4XT1cInpJbmRleFwiXG4gIFtidXR0b25zRm9vdGVyXT1cImJ1dHRvbnNGb290ZXJcIlxuICAob3V0RXZlbnQpPVwiaGFuZGxlckV2ZW50KCRldmVudClcIj5cbiAgPGRpdiBjbGFzcz1cImxpYnMtdWktbW9kYWwtYm9keS1jdXN0b20gdy1mdWxsIGgtZnVsbFwiPlxuICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgbXItWzRweF0gdGV4dC1bIzZhNzM4M10gdy1bMTAwcHhdIHNocmluay0wXCI+e3sgJ2kxOG5fcmF0aW9fc2l6ZScgfCB0cmFuc2xhdGUgfX0gKCUpPC9kaXY+XG4gICAgICA8bGlic191aS1jb21wb25lbnRzLWlucHV0cy12YWxpZFxuICAgICAgICBbaWdub3JlV2lkdGhJbnB1dDEwMF09XCJ0cnVlXCJcbiAgICAgICAgW2NsYXNzSW5jbHVkZUlucHV0XT1cIid3LVsxMzJweF0nXCJcbiAgICAgICAgW2RhdGFUeXBlXT1cIidpbnQnXCJcbiAgICAgICAgW2ZpZWxkTmFtZUJpbmRdPVwiJ3JhdGlvJ1wiXG4gICAgICAgIFsoaXRlbSldPVwicmVzaXplRGF0YVwiXG4gICAgICAgIFttaW5WYWx1ZU51bWJlcl09XCIxXCJcbiAgICAgICAgW21heFZhbHVlTnVtYmVyXT1cIjEwMFwiXG4gICAgICAgIFt2YWx1ZVVwRG93bk51bWJlcl09XCIxXCJcbiAgICAgICAgW3ZhbGlkUmVxdWlyZWRdPVwieyBpc1JlcXVpcmVkOiB0cnVlIH1cIlxuICAgICAgICBbaWdub3JlU2hvd0Vycm9yXT1cInRydWVcIlxuICAgICAgICAob3V0VmFsdWVDaGFuZ2UpPVwiaGFuZGxlclJlc2l6ZVJhdGlvKClcIlxuICAgICAgICAob3V0RnVuY3Rpb25zQ29udHJvbCk9XCJoYW5kbGVySW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCIgLz5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibXQtWzE2cHhdIHJlbGF0aXZlXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgbXItWzRweF0gdGV4dC1bIzZhNzM4M10gdy1bMTAwcHhdIHNocmluay0wXCI+XG4gICAgICAgICAge3sgJ2kxOG5fd2lkdGgnIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWlucHV0cy12YWxpZFxuICAgICAgICAgIFtpZ25vcmVXaWR0aElucHV0MTAwXT1cInRydWVcIlxuICAgICAgICAgIFtjbGFzc0luY2x1ZGVJbnB1dF09XCIndy1bMTAycHhdJ1wiXG4gICAgICAgICAgW2RhdGFUeXBlXT1cIidpbnQnXCJcbiAgICAgICAgICBbbWF4VmFsdWVOdW1iZXJdPVwib3JpZ2luV2lkdGhcIlxuICAgICAgICAgIFttaW5WYWx1ZU51bWJlcl09XCIxXCJcbiAgICAgICAgICBbZmllbGROYW1lQmluZF09XCInd2lkdGgnXCJcbiAgICAgICAgICBbKGl0ZW0pXT1cInJlc2l6ZURhdGFcIlxuICAgICAgICAgIFt1bml0c1JpZ2h0XT1cIlt7IGlkOiAncHgnLCBsYWJlbDogJ3B4JyB9XVwiXG4gICAgICAgICAgW2tleVNlbGVjdGVkVW5pdFJpZ2h0XT1cIidweCdcIlxuICAgICAgICAgIFt2YWx1ZVVwRG93bk51bWJlcl09XCIxXCJcbiAgICAgICAgICAob3V0VmFsdWVDaGFuZ2UpPVwiaGFuZGxlclJlc2l6ZVdpZHRoKClcIlxuICAgICAgICAgIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sKCRldmVudClcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgbXQtWzhweF1cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImxpYnMtdWktZm9udC1oN3IgbXItWzRweF0gdGV4dC1bIzZhNzM4M10gdy1bMTAwcHhdIHNocmluay0wXCI+XG4gICAgICAgICAge3sgJ2kxOG5fbGVuZ3RoJyB8IHRyYW5zbGF0ZSB9fVxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtdmFsaWRcbiAgICAgICAgICBbaWdub3JlV2lkdGhJbnB1dDEwMF09XCJ0cnVlXCJcbiAgICAgICAgICBbY2xhc3NJbmNsdWRlSW5wdXRdPVwiJ3ctWzEwMnB4XSdcIlxuICAgICAgICAgIFtkYXRhVHlwZV09XCInaW50J1wiXG4gICAgICAgICAgW21pblZhbHVlTnVtYmVyXT1cIjFcIlxuICAgICAgICAgIFttYXhWYWx1ZU51bWJlcl09XCJvcmlnaW5IZWlnaHRcIlxuICAgICAgICAgIFtmaWVsZE5hbWVCaW5kXT1cIidoZWlnaHQnXCJcbiAgICAgICAgICBbKGl0ZW0pXT1cInJlc2l6ZURhdGFcIlxuICAgICAgICAgIFt1bml0c1JpZ2h0XT1cIlt7IGlkOiAncHgnLCBsYWJlbDogJ3B4JyB9XVwiXG4gICAgICAgICAgW2tleVNlbGVjdGVkVW5pdFJpZ2h0XT1cIidweCdcIlxuICAgICAgICAgIFt2YWx1ZVVwRG93bk51bWJlcl09XCIxXCJcbiAgICAgICAgICAob3V0VmFsdWVDaGFuZ2UpPVwiaGFuZGxlclJlc2l6ZUhlaWdodCgpXCJcbiAgICAgICAgICAob3V0RnVuY3Rpb25zQ29udHJvbCk9XCJoYW5kbGVySW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImFic29sdXRlIGZsZXggaXRlbXMtY2VudGVyIGxlZnQtWzIzNnB4XSB0b3AtWzE0cHhdXCI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJ3LVsyMHB4XSBoLVs0NHB4XSBsaWJzLXVpLWJvcmRlci10b3AtZ2VuZXJhbCBsaWJzLXVpLWJvcmRlci1yaWdodC1nZW5lcmFsIGxpYnMtdWktYm9yZGVyLWJvdHRvbS1nZW5lcmFsXCI+PC9kaXY+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJtbC1bNnB4XSB0ZXh0LVsjOWNhMmFkXSBsaWJzLXVpLWljb24tbG9ja1wiPjwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cIm10LVsxNnB4XVwiPlxuICAgICAgPGRpdiBjbGFzcz1cImxpYnMtdWktZm9udC1oNm0gdGV4dC1bIzZhNzM4M10gbWItWzhweF1cIj57eyAnaTE4bl9zaXplX3Bob3RvJyB8IHRyYW5zbGF0ZSB9fTwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cImxpYnMtdWktZm9udC1oNXIgcm91bmRlZC1bNHB4XSBweS1bOHB4XSBweC1bMTZweF0gYmctWyNmOGY5ZmFdIHRleHQtWyM5Y2EyYWRdXCI+XG4gICAgICAgIHt7ICdpMThuX2ZpbGVfc2l6ZV9jb21wYXJlX3doZW5fcmVzaXplJyB8IHRyYW5zbGF0ZTogeyBjdXJyZW50X3NpemU6IGN1cnJlbnRGaWxlU2l6ZSwgb3JpZ2luYWxfc2l6ZTogb3JpZ2luRmlsZVNpemUgfSB9fVxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9saWJzX3VpLWNvbXBvbmVudHMtbW9kYWw+XG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmVzaXplLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbWFnZS1lZGl0b3Ivc3JjL3Jlc2l6ZS9yZXNpemUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2ltYWdlLWVkaXRvci9zcmMvcmVzaXplL3Jlc2l6ZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQVUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9FLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxnQ0FBZ0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFdEQsT0FBTyxFQUFtQyxvQ0FBb0MsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBRXpILE9BQU8sRUFBRSw4QkFBOEIsRUFBb0IsTUFBTSwyQkFBMkIsQ0FBQztBQUM3RixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsaUJBQWlCLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7O0FBUzVGLE1BQU0sT0FBTywwQ0FBMEM7SUFDM0MsYUFBYSxDQUFpQjtJQUM5QixLQUFLLEdBQUcsSUFBSSxLQUFLLEVBQUUsQ0FBQztJQUNwQixjQUFjLENBQVU7SUFDeEIsZUFBZSxDQUFVO0lBRWxCLHlCQUF5QixDQUF5QztJQUV4RCxVQUFVLENBQWU7SUFDekIsV0FBVyxDQUFVO0lBQ3JCLFlBQVksQ0FBVTtJQUN0QixHQUFHLENBQVU7SUFDL0IsTUFBTSxDQUFVO0lBQ2hCLFFBQVEsQ0FBVTtJQUVSLFFBQVEsR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0lBQ3BDLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBZSxDQUFDO0lBRTdEO1FBQ0UsSUFBSSxDQUFDLGFBQWEs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Q0FBQyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQ2xGLElBQUksQ0FBQyxlQUFlLEdBQUcsTUFBTSxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7SUFDbEQsQ0FBQztJQUVTLGdDQUFnQyxDQUFDLEtBQXNDO1FBQy9FLElBQUksQ0FBQyx5QkFBeUIsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUVTLFlBQVksQ0FBQyxLQUF1QjtRQUM1QyxJQUFJLEtBQUssS0FBSyxPQUFPLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ3ZCLENBQUM7SUFDSCxDQUFDO3dHQXpHVSwwQ0FBMEM7NEZBQTFDLDBDQUEwQyw2U0NoQnZELG8yR0E0RUEsMkNEOURZLGVBQWUsNEZBQUUsOEJBQThCLGt4QkFBRSxvQ0FBb0M7OzRGQUVwRiwwQ0FBMEM7a0JBUHRELFNBQVM7K0JBRUUsd0NBQXdDLGNBRXRDLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSw4QkFBOEIsRUFBRSxvQ0FBb0MsQ0FBQzt3REFVckUsVUFBVTtzQkFBcEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsV0FBVztzQkFBckMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsWUFBWTtzQkFBdEMsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ0UsR0FBRztzQkFBN0IsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUU7Z0JBQ2hCLE1BQU07c0JBQWQsS0FBSztnQkFDRyxRQUFRO3NCQUFoQixLQUFLO2dCQUVhLFFBQVE7c0JBQTFCLE1BQU07Z0JBQ1ksT0FBTztzQkFBekIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT25Jbml0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IGdldERhdGFVcmwgfSBmcm9tICcuLi9kZWZpbmVzL2ltYWdlLWVkaXRvci5kZWZpbmUnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uIH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbic7XG5pbXBvcnQgeyBJSW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbEV2ZW50LCBMaWJzVWlDb21wb25lbnRzSW5wdXRzVmFsaWRDb21wb25lbnQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLWlucHV0cy12YWxpZCc7XG5pbXBvcnQgeyBJUmVzaXplRGF0YSB9IGZyb20gJy4uL2ludGVyZmFjZXMvaW1hZ2UtZWRpdG9yLmludGVyZmFjZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzTW9kYWxDb21wb25lbnQsIFRZUEVfTU9EQUxfRVZFTlQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLW1vZGFsJztcbmltcG9ydCB7IGNvbnZlcnRCYXNlNjRUb0Jsb2IsIGNvbnZlcnRCbG9iVG9GaWxlLCBnZXRMYWJlbEJ5U2l6ZUZpbGUgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnMtdWktY29tcG9uZW50cy1pbWFnZV9lZGl0b3ItcmVzaXplJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3Jlc2l6ZS5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExpYnNVaUNvbXBvbmVudHNNb2RhbENvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0lucHV0c1ZhbGlkQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0ltYWdlRWRpdG9yUmVzaXplQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgcHJvdGVjdGVkIGJ1dHRvbnNGb290ZXI6IEFycmF5PElCdXR0b24+O1xuICBwcm90ZWN0ZWQgaW1hZ2UgPSBuZXcgSW1hZ2UoKTtcbiAgcHJvdGVjdGVkIG9yaWdpbkZpbGVTaXplITogc3RyaW5nO1xuICBwcm90ZWN0ZWQgY3VycmVudEZpbGVTaXplITogc3RyaW5nO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgaW5wdXRWYWxpZEZ1bmN0aW9uQ29udHJvbDogQXJyYXk8SUlucHV0VmFsaWRGdW5jdGlvbkNvbnRyb2xFdmVudD47XG5cbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgcmVzaXplRGF0YSE6IElSZXNpemVEYXRhO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBvcmlnaW5XaWR0aCE6IG51bWJlcjtcbiAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSkgb3JpZ2luSGVpZ2h0ITogbnVtYmVyO1xuICBASW5wdXQoeyByZXF1aXJlZDogdHJ1ZSB9KSBzcmMhOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHpJbmRleD86IG51bWJlcjtcbiAgQElucHV0KCkgbWltZXR5cGU/OiBzdHJpbmc7XG5cbiAgQE91dHB1dCgpIHJlYWRvbmx5IG91dENsb3NlID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuICBAT3V0cHV0KCkgcmVhZG9ubHkgb3V0U2F2ZSA9IG5ldyBFdmVudEVtaXR0ZXI8SVJlc2l6ZURhdGE+KCk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgdGhpcy5idXR0b25zRm9vdGVyID0gW1xuICAgICAge1xuICAgICAgICB0eXBlOiAnYnV0dG9uLXRoaXJkJyxcbiAgICAgICAgbGFiZWw6ICdpMThuX2NhbmNlbCcsXG4gICAgICAgIGFjdGlvbjogYXN5bmMgKCkgPT4gdGhpcy5vdXRDbG9zZS5lbWl0KCksXG4gICAgICB9LFxuICAgICAge1xuICAgICAgICBsYWJlbDogJ2kxOG5fc2F2ZScsXG4gICAgICAgIGFjdGlvbjogYXN5bmMgKCkgPT4ge1xuICAgICAgICAgIHRoaXMub3V0U2F2ZS5lbWl0KHRoaXMucmVzaXplRGF0YSk7XG4gICAgICAgICAgdGhpcy5vdXRDbG9zZS5lbWl0KCk7XG4gICAgICAgIH0sXG4gICAgICB9LFxuICAgIF07XG4gICAgdGhpcy5pbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sID0gW107XG4gIH1cblxuICBhc3luYyBuZ09uSW5pdCgpOiBQcm9taXNlPHZvaWQ+IHtcbiAgICBjb25zdCBmaWxlU2l6ZSA9IGF3YWl0IHRoaXMuZ2V0RmlsZVNpemUoKTtcblxuICAgIHRoaXMuY3VycmVudEZpbGVTaXplID0gZmlsZVNpemU7XG4gICAgdGhpcy5vcmlnaW5GaWxlU2l6ZSA9IGZpbGVTaXplO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJSZXNpemVSYXRpbygpIHtcbiAgICBsZXQgcmF0aW8gPSBwYXJzZUludChgJHt0aGlzLnJlc2l6ZURhdGEucmF0aW99YCk7XG5cbiAgICBpZiAoIXJhdGlvIHx8IHJhdGlvIDwgMCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBpZiAocmF0aW8gPiAxMDApIHtcbiAgICAgIHJhdGlvID0gMTAwO1xuICAgICAgdGhpcy5yZXNpemVEYXRhLnJhdGlvID0gcmF0aW87XG4gICAgfVxuICAgIHRoaXMucmVzaXplRGF0YS53aWR0aCA9IE1hdGgubWF4KHBhcnNlSW50KGAkeyh0aGlzLm9yaWdpbldpZHRoICogcmF0aW8pIC8gMTAwfWApLCAxKTtcbiAgICB0aGlzLnJlc2l6ZURhdGEuaGVpZ2h0ID0gTWF0aC5tYXgocGFyc2VJbnQoYCR7KHRoaXMub3JpZ2luSGVpZ2h0ICogcmF0aW8pIC8gMTAwfWApLCAxKTtcbiAgICB0aGlzLmN1cnJlbnRGaWxlU2l6ZSA9IGF3YWl0IHRoaXMuZ2V0RmlsZVNpemUoKTtcbiAgfVxuXG4gIHByaXZhdGUgZ2V0RmlsZVNpemUoKSB7XG4gICAgcmV0dXJuIG5ldyBQcm9taXNlPHN0cmluZz4oKHJlc29sdmUpID0+IHtcbiAgICAgIHRoaXMuaW1hZ2Uub25sb2FkID0gKCkgPT4ge1xuICAgICAgICBjb25zdCBjYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCdjYW52YXMnKTtcblxuICAgICAgICBjYW52YXMud2lkdGggPSB0aGlzLnJlc2l6ZURhdGEud2lkdGg7XG4gICAgICAgIGNhbnZhcy5oZWlnaHQgPSB0aGlzLnJlc2l6ZURhdGEuaGVpZ2h0O1xuICAgICAgICBjb25zdCBjdHggPSBjYW52YXMuZ2V0Q29udGV4dCgnMmQnKTtcbiAgICAgICAgaWYgKGN0eCkge1xuICAgICAgICAgIGN0eC5kcmF3SW1hZ2UodGhpcy5pbWFnZSwgMCwgMCwgY2FudmFzLndpZHRoLCBjYW52YXMuaGVpZ2h0KTtcbiAgICAgICAgfVxuICAgICAgICBjb25zdCBzcmMgPSBnZXREYXRhVXJsKGNhbnZhcywgdGhpcy5taW1ldHlwZSwgdGhpcy5zcmMpO1xuICAgICAgICBjb25zdCBmaWxlID0gY29udmVydEJhc2U2NFRvQmxvYihzcmMpO1xuXG4gICAgICAgIHJlc29sdmUoZ2V0TGFiZWxCeVNpemVGaWxlKGNvbnZlcnRCbG9iVG9GaWxlKGZpbGUsIERhdGUubm93KCkudG9Mb2NhbGVTdHJpbmcoKSkuc2l6ZSkpO1xuICAgICAgfTtcbiAgICAgIHRoaXMuaW1hZ2Uuc3JjID0gdGhpcy5zcmM7XG4gICAgfSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlclJlc2l6ZVdpZHRoKCkge1xuICAgIHRoaXMucHJvY2Vzc1Jlc2l6ZVdpZHRoT3JIZWlnaHQoJ3dpZHRoJywgJ2hlaWdodCcsIHRoaXMub3JpZ2luV2lkdGgsIHRoaXMub3JpZ2luSGVpZ2h0KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyUmVzaXplSGVpZ2h0KCkge1xuICAgIHRoaXMucHJvY2Vzc1Jlc2l6ZVdpZHRoT3JIZWlnaHQoJ2hlaWdodCcsICd3aWR0aCcsIHRoaXMub3JpZ2luSGVpZ2h0LCB0aGlzLm9yaWdpbldpZHRoKTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgcHJvY2Vzc1Jlc2l6ZVdpZHRoT3JIZWlnaHQocmVzaXplQnk6ICd3aWR0aCcgfCAnaGVpZ2h0JywgZmllbGRSZXNpemU6ICd3aWR0aCcgfCAnaGVpZ2h0Jywgb3JpZ2luQnlWYWx1ZTogbnVtYmVyLCBvcmlnaW5PdGhlclZhbHVlOiBudW1iZXIpIHtcbiAgICBjb25zdCB2YWx1ZSA9IHBhcnNlSW50KGAke3RoaXMucmVzaXplRGF0YVtyZXNpemVCeV19YCk7XG5cbiAgICBpZiAoIXZhbHVlIHx8IHZhbHVlID4gb3JpZ2luQnlWYWx1ZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLnJlc2l6ZURhdGFbZmllbGRSZXNpemVdID0gTWF0aC5tYXgocGFyc2VJbnQoYCR7KG9yaWdpbk90aGVyVmFsdWUgKiB2YWx1ZSkgLyBvcmlnaW5CeVZhbHVlfWApLCAxKTtcbiAgICB0aGlzLnJlc2l6ZURhdGEucmF0aW8gPSBNYXRoLm1heChwYXJzZUludChgJHsoMTAwICogdmFsdWUpIC8gb3JpZ2luQnlWYWx1ZX1gKSwgMSk7XG4gICAgdGhpcy5jdXJyZW50RmlsZVNpemUgPSBhd2FpdCB0aGlzLmdldEZpbGVTaXplKCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlcklucHV0VmFsaWRGdW5jdGlvbkNvbnRyb2woZXZlbnQ6IElJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sRXZlbnQpIHtcbiAgICB0aGlzLmlucHV0VmFsaWRGdW5jdGlvbkNvbnRyb2wucHVzaChldmVudCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckV2ZW50KGV2ZW50OiBUWVBFX01PREFMX0VWRU5UKSB7XG4gICAgaWYgKGV2ZW50ID09PSAnY2xvc2UnKSB7XG4gICAgICB0aGlzLm91dENsb3NlLmVtaXQoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxsaWJzX3VpLWNvbXBvbmVudHMtbW9kYWxcbiAgW2hlYWRlckNvbmZpZ109XCJ7IGlnbm9yZUhlYWRlclRoZW1lOiB0cnVlIH1cIlxuICBbbW9kZV09XCInY2VudGVyJ1wiXG4gIFt3aWR0aF09XCInNTAwcHgnXCJcbiAgW2hlaWdodF09XCInYXV0bydcIlxuICBbdGl0bGVdPVwiJ2kxOG5fcmVzaXplJyB8IHRyYW5zbGF0ZVwiXG4gIFt6SW5kZXhdPVwiekluZGV4XCJcbiAgW2J1dHRvbnNGb290ZXJdPVwiYnV0dG9uc0Zvb3RlclwiXG4gIChvdXRFdmVudCk9XCJoYW5kbGVyRXZlbnQoJGV2ZW50KVwiPlxuICA8ZGl2IGNsYXNzPVwibGlicy11aS1tb2RhbC1ib2R5LWN1c3RvbSB3LWZ1bGwgaC1mdWxsXCI+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg3ciBtci1bNHB4XSB0ZXh0LVsjNmE3MzgzXSB3LVsxMDBweF0gc2hyaW5rLTBcIj57eyAnaTE4bl9yYXRpb19zaXplJyB8IHRyYW5zbGF0ZSB9fSAoJSk8L2Rpdj5cbiAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLXZhbGlkXG4gICAgICAgIFtpZ25vcmVXaWR0aElucHV0MTAwXT1cInRydWVcIlxuICAgICAgICBbY2xhc3NJbmNsdWRlSW5wdXRdPVwiJ3ctWzEzMnB4XSdcIlxuICAgICAgICBbZGF0YVR5cGVdPVwiJ2ludCdcIlxuICAgICAgICBbZmllbGROYW1lQmluZF09XCIncmF0aW8nXCJcbiAgICAgICAgWyhpdGVtKV09XCJyZXNpemVEYXRhXCJcbiAgICAgICAgW21pblZhbHVlTnVtYmVyXT1cIjFcIlxuICAgICAgICBbbWF4VmFsdWVOdW1iZXJdPVwiMTAwXCJcbiAgICAgICAgW3ZhbHVlVXBEb3duTnVtYmVyXT1cIjFcIlxuICAgICAgICBbdmFsaWRSZXF1aXJlZF09XCJ7IGlzUmVxdWlyZWQ6IHRydWUgfVwiXG4gICAgICAgIFtpZ25vcmVTaG93RXJyb3JdPVwidHJ1ZVwiXG4gICAgICAgIChvdXRWYWx1ZUNoYW5nZSk9XCJoYW5kbGVyUmVzaXplUmF0aW8oKVwiXG4gICAgICAgIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sKCRldmVudClcIiAvPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJtdC1bMTZweF0gcmVsYXRpdmVcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg3ciBtci1bNHB4XSB0ZXh0LVsjNmE3MzgzXSB3LVsxMDBweF0gc2hyaW5rLTBcIj5cbiAgICAgICAgICB7eyAnaTE4bl93aWR0aCcgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLXZhbGlkXG4gICAgICAgICAgW2lnbm9yZVdpZHRoSW5wdXQxMDBdPVwidHJ1ZVwiXG4gICAgICAgICAgW2NsYXNzSW5jbHVkZUlucHV0XT1cIid3LVsxMDJweF0nXCJcbiAgICAgICAgICBbZGF0YVR5cGVdPVwiJ2ludCdcIlxuICAgICAgICAgIFttYXhWYWx1ZU51bWJlcl09XCJvcmlnaW5XaWR0aFwiXG4gICAgICAgICAgW21pblZhbHVlTnVtYmVyXT1cIjFcIlxuICAgICAgICAgIFtmaWVsZE5hbWVCaW5kXT1cIid3aWR0aCdcIlxuICAgICAgICAgIFsoaXRlbSldPVwicmVzaXplRGF0YVwiXG4gICAgICAgICAgW3VuaXRzUmlnaHRdPVwiW3sgaWQ6ICdweCcsIGxhYmVsOiAncHgnIH1dXCJcbiAgICAgICAgICBba2V5U2VsZWN0ZWRVbml0UmlnaHRdPVwiJ3B4J1wiXG4gICAgICAgICAgW3ZhbHVlVXBEb3duTnVtYmVyXT1cIjFcIlxuICAgICAgICAgIChvdXRWYWx1ZUNoYW5nZSk9XCJoYW5kbGVyUmVzaXplV2lkdGgoKVwiXG4gICAgICAgICAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlcklucHV0VmFsaWRGdW5jdGlvbkNvbnRyb2woJGV2ZW50KVwiIC8+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBtdC1bOHB4XVwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg3ciBtci1bNHB4XSB0ZXh0LVsjNmE3MzgzXSB3LVsxMDBweF0gc2hyaW5rLTBcIj5cbiAgICAgICAgICB7eyAnaTE4bl9sZW5ndGgnIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWlucHV0cy12YWxpZFxuICAgICAgICAgIFtpZ25vcmVXaWR0aElucHV0MTAwXT1cInRydWVcIlxuICAgICAgICAgIFtjbGFzc0luY2x1ZGVJbnB1dF09XCIndy1bMTAycHhdJ1wiXG4gICAgICAgICAgW2RhdGFUeXBlXT1cIidpbnQnXCJcbiAgICAgICAgICBbbWluVmFsdWVOdW1iZXJdPVwiMVwiXG4gICAgICAgICAgW21heFZhbHVlTnVtYmVyXT1cIm9yaWdpbkhlaWdodFwiXG4gICAgICAgICAgW2ZpZWxkTmFtZUJpbmRdPVwiJ2hlaWdodCdcIlxuICAgICAgICAgIFsoaXRlbSldPVwicmVzaXplRGF0YVwiXG4gICAgICAgICAgW3VuaXRzUmlnaHRdPVwiW3sgaWQ6ICdweCcsIGxhYmVsOiAncHgnIH1dXCJcbiAgICAgICAgICBba2V5U2VsZWN0ZWRVbml0UmlnaHRdPVwiJ3B4J1wiXG4gICAgICAgICAgW3ZhbHVlVXBEb3duTnVtYmVyXT1cIjFcIlxuICAgICAgICAgIChvdXRWYWx1ZUNoYW5nZSk9XCJoYW5kbGVyUmVzaXplSGVpZ2h0KClcIlxuICAgICAgICAgIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJJbnB1dFZhbGlkRnVuY3Rpb25Db250cm9sKCRldmVudClcIiAvPlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiYWJzb2x1dGUgZmxleCBpdGVtcy1jZW50ZXIgbGVmdC1bMjM2cHhdIHRvcC1bMTRweF1cIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cInctWzIwcHhdIGgtWzQ0cHhdIGxpYnMtdWktYm9yZGVyLXRvcC1nZW5lcmFsIGxpYnMtdWktYm9yZGVyLXJpZ2h0LWdlbmVyYWwgbGlicy11aS1ib3JkZXItYm90dG9tLWdlbmVyYWxcIj48L2Rpdj5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1sLVs2cHhdIHRleHQtWyM5Y2EyYWRdIGxpYnMtdWktaWNvbi1sb2NrXCI+PC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwibXQtWzE2cHhdXCI+XG4gICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg2bSB0ZXh0LVsjNmE3MzgzXSBtYi1bOHB4XVwiPnt7ICdpMThuX3NpemVfcGhvdG8nIHwgdHJhbnNsYXRlIH19PC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwibGlicy11aS1mb250LWg1ciByb3VuZGVkLVs0cHhdIHB5LVs4cHhdIHB4LVsxNnB4XSBiZy1bI2Y4ZjlmYV0gdGV4dC1bIzljYTJhZF1cIj5cbiAgICAgICAge3sgJ2kxOG5fZmlsZV9zaXplX2NvbXBhcmVfd2hlbl9yZXNpemUnIHwgdHJhbnNsYXRlOiB7IGN1cnJlbnRfc2l6ZTogY3VycmVudEZpbGVTaXplLCBvcmlnaW5hbF9zaXplOiBvcmlnaW5GaWxlU2l6ZSB9IH19XG4gICAgICA8L2Rpdj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2xpYnNfdWktY29tcG9uZW50cy1tb2RhbD5cbiJdfQ==

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

@@ -149,7 +149,6 @@ class LibsUiComponentsImageEditorResizeComponent {
         }
         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() {
@@ -193,7 +192,7 @@ class LibsUiComponentsImageEditorResizeComponent {
         }
     }
     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", "escapeKeyboardCloseModal", "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"] }] });
+    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", "escapeKeyboardCloseModal", "isClickOutsideClose", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl", "outClose"] }, { 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", "ignoreShowMessageError", "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,
@@ -435,9 +434,8 @@ class LibsUiComponentsImageEditorComponent {
             return;
         }
         let width = rectImg.width;
-        let height = width / this.ratioValue();
         width = Math.min(rectImg.width, width);
-        height = width / this.ratioValue();
+        let height = width / this.ratioValue();
         height = Math.min(rectImg.height, height);
         width = height * this.ratioValue();
         const top = rectImg.top + (rectImg.height - height) / 2;
@@ -496,9 +494,9 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const left = this.startMouseDim().left + this.startMouseDim().width - width;
         this.setStylesElements(this.cropArea(), { left, height, width }, true);
     };
     resizeCropFollowTLDir = (e) => {
@@ -506,10 +504,10 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const left = this.startMouseDim().left + this.startMouseDim().width - width;
+        const top = this.startMouseDim().top + this.startMouseDim().height - height;
         this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
     };
     resizeCropFollowTRDir = (e) => {
@@ -517,9 +515,9 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const top = this.startMouseDim().top + this.startMouseDim().height - height;
         this.setStylesElements(this.cropArea(), { top, height, width }, true);
     };
     resizeCropFollowBRDir(e) {
@@ -536,10 +534,10 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const left = this.startMouseDim().left + this.startMouseDim().width - width;
+        const top = this.startMouseDim().top + this.startMouseDim().height - height;
         this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
     };
     resizeCropFollowVRDir = (e) => {
@@ -547,9 +545,9 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const top = this.startMouseDim().top + this.startMouseDim().height - height;
         this.setStylesElements(this.cropArea(), { top, height, width }, true);
     };
     resizeCropFollowHTDir = (e) => {
@@ -557,10 +555,10 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const top = this.startMouseDim().top + this.startMouseDim().height - height;
+        const left = this.startMouseDim().left + this.startMouseDim().width - width;
         this.setStylesElements(this.cropArea(), { top, left, height, width }, true);
     };
     resizeCropFollowHBDir = (e) => {
@@ -568,9 +566,9 @@ class LibsUiComponentsImageEditorComponent {
         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);
+        let { width, height } = 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;
+        const left = this.startMouseDim().left + this.startMouseDim().width - width;
         this.setStylesElements(this.cropArea(), { height, left, width }, true);
     };
     getRectResizeCropFollow(ratio, momentX, momentY) {
@@ -987,11 +985,11 @@ class LibsUiComponentsImageEditorComponent {
         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", "escapeKeyboardCloseModal", "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 });
+    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          alt=\"\"\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          alt=\"\"\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", "escapeKeyboardCloseModal", "isClickOutsideClose", "headerConfig", "bodyConfig", "footerConfig", "buttonsFooter", "title", "titleUseXssFilter", "titleUseTooltip", "titleUseInnerText"], outputs: ["showChange", "widthChange", "heightChange", "maxWidthChange", "maxHeightChange", "minWidthChange", "disableChange", "buttonsFooterChange", "outScrollContent", "outEvent", "outFunctionControl", "outClose"] }, { 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", "ignoreShowMessageError", "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"] }]
+            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          alt=\"\"\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          alt=\"\"\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
                 }, {